/* Landing page. Own tokens so it does not depend on tenant branding. */
.landing{--l-bg:#f4f6fa;--l-ink:#0f1c2e;--l-mute:#51607a;--l-line:#d8dfeb;--l-card:#fff;--l-brand:#0e7c86;--l-brand-ink:#fff;--l-alt:#eaeff7;
  --blue:#2f7df6;--violet:#8b5cf6;--orange:#f97316;--green:#22c55e;--teal:#14b8a6;--pink:#ec4899;--red:#ef4444;--slate:#8593a8;
  background:var(--l-bg);color:var(--l-ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic",Tahoma,sans-serif;line-height:1.6;margin:0}
[data-theme="dark"] .landing{--l-bg:#0b1422;--l-ink:#e8eefa;--l-mute:#9fb0cc;--l-line:#1f3050;--l-card:#101d33;--l-brand:#22c1cf;--l-brand-ink:#04222a;--l-alt:#0e1a2e}
.landing a{color:inherit}
.l-wrap{width:min(1180px,100% - 2rem);margin-inline:auto}
.l-head{border-block-end:1px solid var(--l-line);position:sticky;top:0;background:var(--l-bg);z-index:10}
.l-head-in{display:flex;align-items:center;gap:1.25rem;padding-block:.65rem}
.l-brand{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.1rem;text-decoration:none;letter-spacing:-.01em}
.l-mark{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,var(--blue),var(--teal));position:relative;display:inline-block}
.l-mark::after{content:"";position:absolute;inset:6px 5px 7px 5px;border-inline-start:3px solid #fff;border-block-end:3px solid #fff;transform:rotate(-45deg) scale(.8)}
.l-nav{display:flex;gap:1.1rem;flex:1;font-size:.93rem}
.l-nav a{text-decoration:none;color:var(--l-mute)}
.l-nav a:hover{color:var(--l-ink)}
.l-tools{display:flex;align-items:center;gap:.5rem}
.l-tools .icon-btn{border-color:var(--l-line);color:var(--l-ink)}
.l-link{padding:.45rem .7rem;text-decoration:none;font-size:.93rem}
.l-btn,.l-btn-ghost{display:inline-block;padding:.5rem 1rem;border-radius:8px;font-weight:600;text-decoration:none;font-size:.93rem;border:1px solid var(--l-brand)}
.landing .l-btn{background:var(--l-brand);color:var(--l-brand-ink)}
.landing .l-btn:hover{filter:brightness(1.1)}
.l-btn-ghost{background:transparent;border-color:var(--l-line)}
.l-btn-ghost:hover{border-color:var(--l-ink)}
.l-btn-lg{padding:.8rem 1.4rem;font-size:1rem}
.landing :focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Hero: operations-centre band, dark in both themes */
.l-hero{background:#0a1a2f;color:#e8eefa;padding-block:3.5rem 4rem;
  background-image:linear-gradient(rgba(120,160,220,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,220,.07) 1px,transparent 1px);background-size:36px 36px}
.l-hero a{color:inherit}
.l-hero .l-btn-ghost{border-color:rgba(255,255,255,.3)}
.l-hero .l-btn-ghost:hover{border-color:#fff}
.landing .l-hero .l-btn{background:var(--orange);border-color:var(--orange);color:#1b0d00}
.l-hero-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:2.5rem;align-items:center}
.l-hero h1{font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 1rem}
.l-lead{font-size:1.12rem;color:#b6c4de;max-width:44ch;margin:0 0 1.6rem}
.l-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.l-center{justify-content:center}
.l-note{margin:1rem 0 0;font-size:.88rem;color:#8ea1c4}
.l-sso-line{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem 0 0;font-size:.88rem;color:#b6c4de}
.l-chip{display:inline-flex;align-items:center;gap:.4rem;background:#fff;color:#1d2b44;border-radius:99px;padding:.2rem .65rem;font-weight:600}

.l-console{margin:0;border:1px solid #223a5e;border-radius:14px;background:#0d2037;box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden}
.l-console-bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;border-block-end:1px solid #223a5e;font-size:.8rem;color:#9fb3d6}
.l-console-bar i{width:10px;height:10px;border-radius:50%;background:#2a4268;display:inline-block}
.l-console-bar i:nth-child(1){background:var(--red)}.l-console-bar i:nth-child(2){background:var(--orange)}.l-console-bar i:nth-child(3){background:var(--green)}
.l-console-bar span{margin-inline-start:.5rem;flex:1}
.l-console-bar em{font-style:normal;background:#183253;border-radius:99px;padding:.05rem .6rem;font-size:.72rem;color:#9fb3d6}
.l-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;padding:.8rem .8rem 0}
.l-kpi{background:#102842;border-inline-start:4px solid var(--c);border-radius:8px;padding:.5rem .7rem;display:grid}
.l-kpi b{font-size:1.45rem;line-height:1.2;color:#fff}
.l-kpi span{font-size:.75rem;color:#9fb3d6}
.k-blue{--c:var(--blue)}.k-green{--c:var(--green)}.k-orange{--c:var(--orange)}.k-violet{--c:var(--violet)}
.l-console-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:.6rem;padding:.8rem}
.l-panel{background:#102842;border-radius:8px;padding:.7rem .8rem}
.l-panel h3{font-size:.78rem;font-weight:600;color:#9fb3d6;margin:0 0 .4rem}
.l-svg{width:100%;height:auto;display:block}
.l-svg .g{stroke:#223a5e;stroke-width:1}
.ln{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.draw{stroke-dasharray:1;stroke-dashoffset:0;animation:l-draw 1.4s .2s ease-out both}
.draw.d2{animation-delay:.5s}
@keyframes l-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.l-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;font-size:.75rem;color:#9fb3d6;margin:.4rem 0 0}
.l-legend span{width:10px;height:10px;border-radius:3px;display:inline-block}
.l-legend span+span,.l-legend span:not(:first-child){margin-inline-start:.6rem}
.l-donut{width:100%;max-width:150px;display:block;margin:0 auto}
.l-donut .ring{fill:none;stroke:#1b3355;stroke-width:5}
.l-donut .seg{fill:none;stroke-width:5;transform:rotate(0deg);transform-origin:center}
.l-donut .dn{font-size:7px;font-weight:700;fill:currentColor;text-anchor:middle}
.l-key{list-style:none;padding:0;margin:.4rem 0 0;font-size:.74rem;color:#9fb3d6;display:grid;gap:.15rem}
.l-key li{display:flex;align-items:center;gap:.4rem}
.l-key span{width:9px;height:9px;border-radius:2px;display:inline-block}
.l-key b{margin-inline-start:auto;color:#fff}
.l-console .l-donut{color:#fff}

/* colour utilities for chart parts */
.c-blue-s{stroke:var(--blue)}.c-violet-s{stroke:var(--violet)}.c-orange-s{stroke:var(--orange)}.c-green-s{stroke:var(--green)}.c-teal-s{stroke:var(--teal)}.c-pink-s{stroke:var(--pink)}.c-red-s{stroke:var(--red)}
.c-blue-f,.c-blue-b{fill:var(--blue);background:var(--blue)}.c-violet-f,.c-violet-b{fill:var(--violet);background:var(--violet)}
.c-orange-f,.c-orange-b{fill:var(--orange);background:var(--orange)}.c-green-f,.c-green-b{fill:var(--green);background:var(--green)}
.c-teal-f,.c-teal-b{fill:var(--teal);background:var(--teal)}.c-pink-f,.c-pink-b{fill:var(--pink);background:var(--pink)}
.c-red-f,.c-red-b{fill:var(--red);background:var(--red)}.c-slate-f,.c-slate-b{fill:var(--slate);background:var(--slate)}
.c-red-s.seg{stroke:var(--red)}.c-orange-s.seg{stroke:var(--orange)}
.c-green-f.area{fill:var(--green);opacity:.16}
.c-red-b,.c-orange-b,.c-blue-b,.c-green-b,.c-violet-b,.c-teal-b,.c-pink-b,.c-slate-b{fill:none}
/* class names used in markup: c-red etc. on <circle>/<li> */
.seg.c-red-s{stroke:var(--red)}.seg.c-orange-s{stroke:var(--orange)}.seg.c-blue-s{stroke:var(--blue)}.seg.c-green-s{stroke:var(--green)}.seg.c-teal-s{stroke:var(--teal)}
.l-flow li.c-blue-t{border-block-start-color:var(--blue)}.l-flow li.c-violet-t{border-block-start-color:var(--violet)}.l-flow li.c-orange-t{border-block-start-color:var(--orange)}.l-flow li.c-green-t{border-block-start-color:var(--green)}.l-flow li.c-pink-t{border-block-start-color:var(--pink)}
.grow{transform-box:fill-box;transform-origin:left;animation:l-grow 1s .3s cubic-bezier(.2,.7,.2,1) both}
[dir="rtl"] .grow{transform-origin:right}
@keyframes l-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.l-band{background:var(--l-alt);border-block:1px solid var(--l-line)}
.l-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-block:2.5rem}
.l-benefits>div{border-inline-start:4px solid var(--c);padding-inline-start:1rem}
.b-blue{--c:var(--blue)}.b-violet{--c:var(--violet)}.b-orange{--c:var(--orange)}
.l-benefits h2{font-size:1.15rem;margin:0 0 .35rem;letter-spacing:-.01em}
.l-benefits p{margin:0;color:var(--l-mute)}

.l-sec{padding-block:4rem}
.l-alt{background:var(--l-alt);border-block:1px solid var(--l-line)}
.l-h2{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;line-height:1.15;margin:0 0 1rem;max-width:24ch}
.l-body{color:var(--l-mute);max-width:60ch}

.l-flow{list-style:none;padding:0;margin:1.75rem 0 2rem;display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem}
.l-flow li{background:var(--l-card);border:1px solid var(--l-line);border-block-start:4px solid;border-radius:10px;padding:.8rem .9rem;display:grid;gap:.25rem}
.l-flow li span{font-size:.85rem;color:var(--l-mute)}
.l-charts{display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:1rem}
.l-card{background:var(--l-card);border:1px solid var(--l-line);border-radius:12px;padding:1.1rem 1.2rem}
.l-card h3{font-size:1rem;margin:0 0 .75rem}
.landing .l-legend{color:var(--l-mute)}
.l-ba-row{display:grid;grid-template-columns:8.5rem 1fr auto;gap:.6rem;align-items:center;margin-block:.55rem;font-size:.85rem}
.l-ba-name{font-weight:600}
.l-bars{width:100%;height:20px;display:block;background:var(--l-alt);border-radius:3px}
.l-ba-val{color:var(--l-mute);white-space:nowrap}
.l-ba-val b{color:var(--l-ink)}
.l-fine{font-size:.78rem;color:var(--l-mute);margin:.8rem 0 0}
.l-hbar{display:grid;grid-template-columns:5.5rem 1fr 2rem;gap:.5rem;align-items:center;margin-block:.5rem;font-size:.85rem}
.l-hbar svg{width:100%;height:12px;display:block;background:var(--l-alt);border-radius:3px}
.l-hbar b{text-align:end}
.l-gauge{display:grid;gap:.6rem;justify-items:center;text-align:center;color:var(--l-ink)}
.l-gauge p{margin:0;font-size:.85rem;color:var(--l-mute)}
.l-card .l-donut .ring{stroke:var(--l-alt)}

.l-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-block-start:1.5rem}
.l-feat2{background:var(--l-card);border:1px solid var(--l-line);border-inline-start:5px solid var(--c);border-radius:10px;padding:1rem 1.1rem}
.l-feat2 h3{font-size:1.02rem;margin:0 0 .3rem;color:var(--c)}
.l-feat2 p{margin:0;color:var(--l-mute);font-size:.93rem}
.g-blue{--c:var(--blue)}.g-violet{--c:var(--violet)}.g-orange{--c:var(--orange)}.g-pink{--c:var(--pink)}.g-slate{--c:var(--slate)}.g-teal{--c:var(--teal)}

.l-split{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.l-list{padding-inline-start:1.1rem;margin:1rem 0 0}
.l-list li{margin-block:.3rem}
.l-ws-demo{display:grid;gap:.6rem}
.l-ws{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border:1px solid var(--l-line);border-radius:9px;background:var(--l-card)}
.l-ws small{color:var(--l-mute)}
.l-ws-on{border-color:var(--teal);box-shadow:inset 3px 0 0 var(--teal)}
[dir="rtl"] .l-ws-on{box-shadow:inset -3px 0 0 var(--teal)}
.l-sec-list{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem 3rem}
.l-sec-list li{display:grid;gap:.15rem}
.l-sec-list span{color:var(--l-mute)}

.l-cta{padding-block:4rem;text-align:center;background:#0a1a2f;color:#e8eefa}
.l-cta h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:0 0 1.5rem;letter-spacing:-.02em}
.landing .l-cta .l-btn{background:var(--orange);border-color:var(--orange);color:#1b0d00}
.landing .l-cta .l-btn-ghost{color:#e8eefa;border-color:rgba(255,255,255,.35)}
.l-foot{padding-block:1.5rem;color:var(--l-mute);font-size:.85rem}

@media (max-width:980px){
  .l-hero-in,.l-split,.l-charts{grid-template-columns:1fr}
  .l-flow{grid-template-columns:repeat(2,1fr)}
  .l-feats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .l-benefits,.l-sec-list,.l-feats,.l-flow{grid-template-columns:1fr}
  .l-kpis{grid-template-columns:repeat(2,1fr)}
  .l-console-grid{grid-template-columns:1fr}
  .l-ba-row{grid-template-columns:1fr;gap:.2rem}
  .l-nav{display:none}.l-head-in{justify-content:space-between}
  .l-hero{padding-block:2.25rem}
  .l-tools .icon-btn-text span{display:none}
  .l-tools .l-link{display:none}
}
@media (prefers-reduced-motion:reduce){.draw,.grow{animation:none}}