/* ALADINO — site styles
   Layout idea: a bright "showroom" in cool ice-white with navy ink, cut by midnight
   bands where the data story is told. The nav floats as a glass capsule. The lamp's
   gold is saved for the moments a wish is granted. */
:root{
  color-scheme: light;
  --ice:#f2f5fc;
  --white:#ffffff;
  --mist:#e3eaf8;
  --line:#d2dbee;
  --ink:#0a1238;
  --ink-2:#465179;
  --royal:#1a48d8;
  --royal-deep:#0f2a94;
  --sky:#3db8ff;
  --lamp:#dd9a12;
  --lamp-soft:#f7d580;
  --night:#050a22;
  --night-2:#0c1744;
  --on-night:#eaf0ff;
  --on-night-2:#a3b3de;
  --good:#0f9d66;
  --warn:#c77d00;
  --bad:#d23c48;
  --wa:#128c4a;
  --wa-bright:#25d366;
  --f-display:"Unbounded","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --f-body:"Onest","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.75,.2,1);
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --shadow:0 30px 70px -30px rgba(10,18,56,.35), 0 8px 20px -12px rgba(10,18,56,.18);
  --gutter:clamp(16px,4vw,44px);
}
@view-transition{ navigation:auto }
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--ice); color:var(--ink); font:400 17px/1.6 var(--f-body); -webkit-font-smoothing:antialiased; overflow-x:clip }
.page{ overflow-x:clip }
img,video,canvas,svg{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit }
button{ font:inherit; color:inherit }
:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; border-radius:6px }
::selection{ background:var(--royal); color:#fff }

/* ---------- type ---------- */
.display{ font-family:var(--f-display); font-weight:500; letter-spacing:-.035em; line-height:1.02; text-wrap:balance; margin:0 }
.h-xl{ font-size:clamp(2.5rem,7.4vw,6.2rem) }
.h-lg{ font-size:clamp(2rem,5vw,4rem) }
.h-md{ font-size:clamp(1.55rem,3.2vw,2.5rem); line-height:1.1 }
.h-sm{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.05rem,1.6vw,1.3rem); letter-spacing:-.02em; line-height:1.2; margin:0; text-wrap:balance }
.lede{ font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55; color:var(--ink-2); max-width:62ch; margin:0; text-wrap:pretty }
.body{ color:var(--ink-2); max-width:62ch; margin:0 }
.eyebrow{ font:500 .74rem/1.5 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--royal); margin:0; display:inline-flex; align-items:center; gap:.7em }
.eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px }
.gold{ background:linear-gradient(100deg,#b9770a 5%,var(--lamp) 40%,#f2c355 62%,#c98708 95%); -webkit-background-clip:text; background-clip:text; color:transparent }
.note{ font:400 .78rem/1.5 var(--f-mono); color:var(--ink-2); letter-spacing:.02em }

/* ---------- layout ---------- */
.wrap{ width:min(1240px,100%); margin-inline:auto; padding-inline:var(--gutter) }
.sec{ padding-block:clamp(72px,10vw,150px); position:relative }
.sec-tight{ padding-block:clamp(48px,6vw,90px) }
.stack{ display:flex; flex-direction:column; gap:1.3rem }
.stack-lg{ display:flex; flex-direction:column; gap:clamp(2rem,4vw,3.5rem) }
.center{ align-items:center; text-align:center }
.center .lede,.center .body{ margin-inline:auto }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,5vw,72px); align-items:center }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,24px) }
.grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px) }
.night{ background:var(--night); color:var(--on-night) }
.night .lede,.night .body,.night .note{ color:var(--on-night-2) }
.night .eyebrow{ color:var(--sky) }
.white{ background:var(--white) }

/* ---------- buttons ---------- */
.btn{ --bg:var(--royal); --fg:#fff; display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:.95em 1.5em; border-radius:999px; border:0; background:var(--bg); color:var(--fg); font:600 .98rem/1 var(--f-body); text-decoration:none; cursor:pointer; position:relative; overflow:hidden; isolation:isolate; transition:transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow:0 14px 30px -14px rgba(26,72,216,.7); white-space:nowrap }
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); transition:transform .8s var(--ease) }
.btn:hover::before{ transform:translateX(120%) }
.btn:hover{ box-shadow:0 20px 40px -14px rgba(26,72,216,.8) }
.btn:active{ transform:scale(.97) }
.btn svg{ width:1.1em; height:1.1em; transition:transform .35s var(--ease) }
.btn:hover svg.arr{ transform:translateX(4px) }
.btn-ghost{ --bg:transparent; --fg:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line) }
.btn-ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--royal) }
.night .btn-ghost{ --fg:var(--on-night); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25) }
.night .btn-ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--sky) }
.btn-gold{ --bg:linear-gradient(120deg,#c98708,#f0bd47); --fg:#231700; box-shadow:0 14px 30px -14px rgba(221,154,18,.8) }
.btn-sm{ padding:.72em 1.15em; font-size:.88rem }
.cta-row{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center }
.center .cta-row{ justify-content:center }
.tlink{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; color:var(--royal); text-decoration:none; border-bottom:1.5px solid transparent; transition:border-color .3s }
.tlink:hover{ border-color:currentColor }
.night .tlink{ color:var(--sky) }
.tlink svg{ width:1.05em; height:1.05em; transition:transform .3s var(--ease) }
.tlink:hover svg{ transform:translateX(4px) }
.ico{ display:inline-block; vertical-align:-.22em; width:1.2em; height:1.2em; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.ico.fill{ fill:currentColor; stroke:none }

.chip{ display:inline-flex; align-items:center; gap:.45em; padding:.42em .85em; border-radius:999px; background:var(--mist); color:var(--ink); font:500 .8rem/1.2 var(--f-body); white-space:nowrap }
.chip-dark{ background:var(--ink); color:#fff }
.chip-line{ background:transparent; box-shadow:inset 0 0 0 1px var(--line) }
.night .chip{ background:rgba(255,255,255,.08); color:var(--on-night) }
.tagline{ font:500 .7rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; padding:.5em .8em; border-radius:6px; background:rgba(221,154,18,.16); color:#8a5c00; display:inline-block }
.night .tagline{ color:var(--lamp-soft) }

/* ---------- progress bar + nav ---------- */
.progress{ position:fixed; left:0; top:0; height:3px; width:100%; z-index:120; transform-origin:0 50%; transform:scaleX(0); will-change:transform; background:linear-gradient(90deg,var(--royal),var(--sky) 60%,var(--lamp)); pointer-events:none }
.nav{ position:fixed; z-index:110; left:50%; top:calc(env(safe-area-inset-top,0px) + 12px); width:min(1200px,calc(100% - 24px)); transform:translate(-50%,0); display:flex; align-items:center; gap:1rem; padding:8px 10px 8px 20px; border-radius:999px; background:rgba(255,255,255,.97); box-shadow:0 0 0 1px rgba(10,18,56,.07), 0 18px 40px -22px rgba(10,18,56,.45); transition:transform .5s var(--ease), padding .4s var(--ease); view-transition-name:nav }
.nav.hide{ transform:translate(-50%,calc(-100% - 30px)) }
.nav-logo{ display:flex; align-items:center; flex:none }
.nav-logo img{ height:52px; width:auto; transition:height .4s var(--ease) }
.nav.small .nav-logo img{ height:42px }
.nav-links{ display:flex; gap:.2rem; margin-inline:auto }
.nav-links a{ position:relative; padding:.6em .95em; border-radius:999px; text-decoration:none; font-weight:500; font-size:.93rem; color:var(--ink-2); transition:color .3s, background .3s }
.nav-links a:hover{ color:var(--ink); background:rgba(26,72,216,.07) }
.nav-links a[aria-current="page"]{ color:var(--royal) }
.nav-links a[aria-current="page"]::after{ content:""; position:absolute; left:50%; bottom:2px; width:5px; height:5px; border-radius:50%; background:var(--lamp); transform:translateX(-50%) }
.nav-burger{ display:none; width:44px; height:44px; border-radius:50%; border:0; background:var(--ink); color:#fff; cursor:pointer; align-items:center; justify-content:center; flex:none }
.nav-burger span{ display:block; width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .4s var(--ease), opacity .3s; position:relative }
.nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .4s var(--ease) }
.nav-burger span::before{ top:-6px } .nav-burger span::after{ top:6px }
.nav-burger[aria-expanded="true"] span{ background:transparent }
.nav-burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg) }
.nav-burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg) }
.menu{ position:fixed; inset:0; z-index:105; background:rgba(242,245,252,.985); display:flex; flex-direction:column; justify-content:center; gap:.3rem; padding:110px var(--gutter) 40px; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s }
.menu.open{ opacity:1; visibility:visible }
.menu a{ font:500 clamp(1.7rem,8vw,2.6rem)/1.25 var(--f-display); letter-spacing:-.03em; text-decoration:none; color:var(--ink); padding:.25em 0; border-bottom:1px solid var(--line); transform:translateY(24px); opacity:0; transition:transform .6s var(--ease), opacity .6s; transition-delay:calc(var(--i)*60ms) }
.menu.open a{ transform:none; opacity:1 }
.menu a[aria-current="page"]{ color:var(--royal) }

/* ---------- language switcher ---------- */
.lang{ position:relative; flex:none }
.lang summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; height:40px; padding:0 .8rem; border-radius:999px; font:600 .82rem/1 var(--f-body); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); transition:box-shadow .3s, background .3s; user-select:none }
.lang summary::-webkit-details-marker{ display:none }
.lang summary:hover,.lang[open] summary{ box-shadow:inset 0 0 0 1.5px var(--royal); background:rgba(26,72,216,.06) }
.lang summary .ico{ width:17px; height:17px; color:var(--royal) }
.lang-menu{ position:absolute; top:calc(100% + 10px); inset-inline-end:0; min-width:170px; padding:6px; border-radius:16px; background:var(--white); box-shadow:0 24px 50px -20px rgba(10,18,56,.5), 0 0 0 1px rgba(10,18,56,.08); display:flex; flex-direction:column; gap:2px; animation:lang-in .25s var(--ease) both; z-index:5 }
@keyframes lang-in{ from{ opacity:0; transform:translateY(-6px) } }
.lang-menu a{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.65em .8em; border-radius:10px; text-decoration:none; font:500 .95rem/1.2 var(--f-body); color:var(--ink) }
.lang-menu a[lang="ar"],.menu-lang a[lang="ar"],.foot-lang a[lang="ar"]{ font-family:"IBM Plex Sans Arabic","Noto Kufi Arabic",Tahoma,sans-serif }
.lang-menu a:hover{ background:var(--ice) }
.lang-menu a[aria-current]{ color:var(--royal); background:rgba(26,72,216,.08) }
.lang-menu a[aria-current]::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--lamp); flex:none }
.menu-lang{ display:flex; gap:.5rem; margin-top:1.4rem; flex-wrap:wrap }
.menu .menu-lang a{ font:600 1rem/1 var(--f-body); letter-spacing:0; padding:.7em 1.1em; border:0; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink); transform:none; opacity:1 }
.menu .menu-lang a[aria-current]{ background:var(--ink); color:#fff; box-shadow:none }
.foot-lang{ display:inline-flex; gap:1rem; flex-wrap:wrap }
.foot-lang a[aria-current]{ color:#fff; text-decoration:underline; text-underline-offset:4px }

/* ---------- reveal ---------- */
.js [data-reveal]{ opacity:0; transform:translate3d(0,30px,0); transition:opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease); transition-delay:var(--d,0ms) }
.js [data-reveal="left"]{ transform:translate3d(-46px,0,0) }
.js [data-reveal="right"]{ transform:translate3d(46px,0,0) }
.js [data-reveal="scale"]{ transform:scale(.93) }
.js [data-reveal="blur"]{ filter:blur(16px); transform:scale(1.03) }
.js [data-reveal].in{ opacity:1; transform:none; filter:none }
/* clip wipes live on the children: a fully clipped element never registers with IntersectionObserver */
.js [data-reveal="clip"]{ opacity:1; transform:none; background:transparent; box-shadow:none; transition:box-shadow .9s ease .5s }
.js [data-reveal="clip"]>*{ clip-path:inset(0 0 100% 0); transition:clip-path 1.3s var(--ease); transition-delay:var(--d,0ms) }
.js [data-reveal="clip"].in{ box-shadow:var(--shadow) }
.js [data-reveal="clip"].in>*{ clip-path:inset(0 0 0 0) }
.split .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em }
.split .w>span{ display:inline-block; transform:translateY(110%) rotate(4deg); transform-origin:0 100%; transition:transform .95s var(--ease); transition-delay:calc(var(--wi)*55ms + var(--d,0ms)) }
.split.in .w>span{ transform:none }
.split .w>span.gold{ padding-right:.04em }

/* ---------- hero ---------- */
.hero{ position:relative; padding-top:calc(env(safe-area-inset-top,0px) + clamp(120px,15vh,170px)); overflow:clip }
.ribbons{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.9; will-change:transform; animation:drift 16s ease-in-out infinite alternate }
.hero>.ribbons{ height:min(100%,105vh) }
@keyframes drift{ from{ transform:translate3d(-1.5%,-1%,0) scale(1.03,1) } to{ transform:translate3d(1.5%,1.5%,0) scale(1.06,1.12) } }
.hero-head{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.4rem }
.hero-head .lede{ max-width:56ch }
.stage{ position:relative; height:160vh; height:160svh; margin-top:clamp(28px,5vh,56px) }
.stage-pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:clip }
.stage-frame{ position:absolute; inset:0; transform-origin:50% 0; transform:translate3d(0,7vh,0) scale(.72); border-radius:56px; overflow:hidden; background:var(--night); box-shadow:var(--shadow); will-change:transform }
.stage-frame video,.stage-frame img{ width:100%; height:100%; object-fit:cover }
.stage-shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,10,34,0) 45%,rgba(5,10,34,.72)); opacity:0; pointer-events:none }
.stage-cap{ position:absolute; left:0; right:0; bottom:clamp(28px,8vh,90px); z-index:2; text-align:center; color:#fff; padding-inline:var(--gutter); opacity:0; will-change:transform,opacity }
.stage-cap p{ margin:.6rem auto 0; max-width:52ch; color:rgba(255,255,255,.82) }
.floats{ position:absolute; inset:0; z-index:3; pointer-events:none; will-change:transform,opacity }
.float{ position:absolute; padding:.8rem 1rem; border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 20px 40px -20px rgba(10,18,56,.45), inset 0 0 0 1px rgba(255,255,255,.7); font-size:.86rem; line-height:1.35; color:var(--ink); min-width:170px; transform:translate3d(var(--mx,0px),var(--my,0px),0); animation:bob 7s ease-in-out infinite; animation-delay:var(--bd,0s) }
.float b{ display:block; font-family:var(--f-display); font-weight:500; font-size:.95rem; letter-spacing:-.02em }
.float small{ font:500 .66rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--royal); display:block; margin-bottom:.45rem }
@keyframes bob{ 50%{ translate:0 -10px } }
.f1{ left:max(var(--gutter),4%); top:14% }
.f2{ right:max(var(--gutter),4%); top:20%; --bd:-2s }
.f3{ left:max(var(--gutter),7%); bottom:26%; --bd:-4s }
.f4{ right:max(var(--gutter),6%); bottom:30%; --bd:-3s }
.mini-bar{ height:6px; border-radius:6px; background:var(--mist); overflow:hidden; margin-top:.5rem }
.mini-bar i{ display:block; height:100%; width:85%; border-radius:6px; background:linear-gradient(90deg,var(--royal),var(--sky)) }
.dotrow{ display:flex; gap:.35rem; align-items:center; margin-top:.35rem; font-size:.78rem; color:var(--ink-2) }
.led{ width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 0 4px rgba(15,157,102,.18); flex:none }

/* ---------- marquee ---------- */
.marquee{ position:relative; overflow:hidden; border-block:1px solid var(--line); padding-block:1.1rem; background:var(--white) }
.marquee::before,.marquee::after{ content:""; position:absolute; top:0; bottom:0; width:9%; z-index:1; pointer-events:none }
.marquee::before{ left:0; background:linear-gradient(90deg,var(--white),rgba(255,255,255,0)) } .marquee::after{ right:0; background:linear-gradient(270deg,var(--white),rgba(255,255,255,0)) }
.marquee-track{ display:flex; gap:2.6rem; width:max-content; animation:marq 38s linear infinite; will-change:transform }
.marquee:hover .marquee-track{ animation-play-state:paused }
.marquee span{ display:inline-flex; align-items:center; gap:2.6rem; font:500 clamp(1rem,1.7vw,1.35rem)/1 var(--f-display); letter-spacing:-.02em; white-space:nowrap; color:var(--ink) }
.marquee span::after{ content:""; width:9px; height:9px; background:var(--lamp); transform:rotate(45deg); border-radius:2px }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* ---------- statement (scroll-filled text) ---------- */
.statement{ font:500 clamp(1.5rem,3.9vw,3.3rem)/1.22 var(--f-display); letter-spacing:-.035em; margin:0; max-width:21ch; text-wrap:balance }
.statement.wide{ max-width:26ch }
.statement .fw{ opacity:.14; transition:opacity .35s linear }
.statement .fw.on{ opacity:1 }
.statement .fw.hl{ color:var(--royal) }
.night .statement .fw.hl{ color:var(--sky) }

/* ---------- flow ---------- */
.flow{ display:flex; flex-wrap:wrap; align-items:stretch; gap:.6rem; counter-reset:f }
.flow li{ list-style:none }
.flow{ margin:0; padding:0 }
.flow-step{ position:relative; flex:1 1 150px; display:flex; flex-direction:column; gap:.5rem; padding:1.1rem 1.1rem 1.2rem; border-radius:var(--r-md); background:var(--white); box-shadow:inset 0 0 0 1px var(--line); transition:background .6s var(--ease), color .6s, transform .6s var(--ease), box-shadow .6s; transition-delay:calc(var(--i)*160ms) }
.flow-step .ico{ width:26px; height:26px; color:var(--royal); transition:color .6s; transition-delay:inherit }
.flow-step b{ font:500 .98rem/1.2 var(--f-display); letter-spacing:-.02em }
.flow-step span{ font-size:.86rem; color:var(--ink-2); line-height:1.4; transition:color .6s; transition-delay:inherit }
.flow.in .flow-step{ transform:none }
.flow.in .flow-step:last-child{ background:var(--ink); color:#fff; box-shadow:none }
.flow.in .flow-step:last-child span{ color:#b8c4ea } .flow.in .flow-step:last-child .ico{ color:var(--lamp-soft) }
.flow-step:not(:last-child)::after{ content:""; position:absolute; inset-inline-end:-.6rem; top:50%; width:.6rem; height:2px; background:var(--royal); transform:scaleX(0); transform-origin:0 50%; transition:transform .4s var(--ease); transition-delay:calc(var(--i)*160ms + 200ms) }
.flow.in .flow-step::after{ transform:scaleX(1) }
.night .flow-step{ background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) }
.night .flow-step span{ color:var(--on-night-2) } .night .flow-step .ico{ color:var(--sky) }
.night .flow.in .flow-step:last-child{ background:var(--royal) }
.pills{ display:flex; flex-wrap:wrap; align-items:center; margin:0; padding:0; list-style:none }
.pills li{ display:flex; align-items:center; gap:.5rem; font:500 .72rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; padding:.8em 1.1em; border-radius:10px; background:var(--mist); color:var(--ink); opacity:.35; transition:opacity .5s, background .5s, color .5s; transition-delay:calc(var(--i)*180ms) }
.pills.in li{ opacity:1 }
.pills.in li:last-child{ background:var(--ink); color:#fff }
.pills li{ position:relative }
.pills li:not(:last-child)::after{ content:"›"; position:absolute; inset-inline-end:-1.15rem; top:50%; transform:translateY(-58%); color:var(--royal); font:500 1.2rem/1 var(--f-body) }
.pills{ gap:.5rem 1.7rem }
.night .pills li:not(:last-child)::after{ color:var(--sky) }
.night .pills li{ background:rgba(255,255,255,.08); color:var(--on-night) }
.night .pills.in li:last-child{ background:var(--royal) }

/* ---------- robot + screen ---------- */
.bot{ --w:clamp(230px,27vw,330px); width:var(--w); display:flex; flex-direction:column; align-items:center; position:relative }
.bot::after{ content:""; position:absolute; left:8%; right:8%; bottom:-5%; height:9%; border-radius:50%; background:radial-gradient(closest-side,rgba(10,18,56,.28),rgba(10,18,56,0)); z-index:-1 }
.bot-head{ position:relative; width:56%; aspect-ratio:1.28; border-radius:46% 46% 42% 42%/52% 52% 46% 46%; background:linear-gradient(170deg,#fff 30%,#d9e1f2); display:grid; place-items:center; z-index:2 }
.bot-head::before,.bot-head::after{ content:""; position:absolute; top:34%; width:11%; height:36%; border-radius:40%; background:linear-gradient(180deg,#2356e8,#0f2a94); box-shadow:inset 0 0 0 3px rgba(255,255,255,.5) }
.bot-head::before{ left:-6% } .bot-head::after{ right:-6% }
.bot-visor{ position:relative; width:80%; height:66%; border-radius:44%/52%; background:radial-gradient(120% 120% at 50% 0%,#17204d,#04071a 70%); overflow:hidden }
.eye{ position:absolute; top:30%; width:19%; aspect-ratio:2; border:calc(var(--w)*.014) solid var(--sky); border-bottom:0; border-radius:100px 100px 0 0; filter:drop-shadow(0 0 6px var(--sky)); transform:translate(var(--ex,0px),var(--ey,0px)); animation:blink 6s infinite }
.eye:nth-child(1){ left:21% } .eye:nth-child(2){ right:21% }
.smile{ position:absolute; left:50%; top:62%; width:22%; aspect-ratio:2.2; margin-left:-11%; border:calc(var(--w)*.013) solid var(--sky); border-top:0; border-radius:0 0 100px 100px; filter:drop-shadow(0 0 6px var(--sky)); transform:translate(var(--ex,0px),var(--ey,0px)) }
@keyframes blink{ 0%,46%,50%,100%{ scale:1 1 } 48%{ scale:1 .1 } }
.bot-neck{ width:16%; height:calc(var(--w)*.045); background:linear-gradient(90deg,#b9c4dc,#eef2fb,#b9c4dc); margin-block:-2px }
.bot-body{ width:100%; padding:calc(var(--w)*.035); border-radius:calc(var(--w)*.13); background:linear-gradient(165deg,#fff 20%,#dfe6f5); position:relative }
.screen{ position:relative; aspect-ratio:3/4.35; border-radius:calc(var(--w)*.1); background:#070c26; padding:calc(var(--w)*.022); font-size:calc(var(--w)*.038); overflow:hidden }
.screen-in{ position:relative; height:100%; border-radius:calc(var(--w)*.082); background:linear-gradient(180deg,#f8faff,#e9effb); overflow:hidden; display:flex; flex-direction:column; color:var(--ink) }
.screen-top{ display:flex; align-items:center; justify-content:space-between; padding:.9em 1.1em .7em; font:600 .82em/1 var(--f-display); letter-spacing:.04em; color:var(--royal-deep) }
.screen-top i{ width:.7em; height:.7em; border-radius:50%; background:var(--good); box-shadow:0 0 0 .3em rgba(15,157,102,.2); animation:pulse 2s infinite }
@keyframes pulse{ 50%{ box-shadow:0 0 0 .6em rgba(15,157,102,0) } }
.screen-view{ position:relative; flex:1; min-height:0 }
.screen-tabs{ display:flex; justify-content:space-around; padding:.7em .6em .9em; background:#0c1744; color:#8ea0d8; font-size:.62em; letter-spacing:.04em }
.screen-tabs span{ display:flex; flex-direction:column; align-items:center; gap:.35em }
.screen-tabs .ico{ width:1.9em; height:1.9em }
.screen-tabs .on{ color:#fff }
.scene{ position:absolute; inset:0; padding:.2em 1.1em 1em; display:flex; flex-direction:column; gap:.7em; opacity:0; visibility:hidden; transition:opacity .5s, visibility .5s }
.scene.on{ opacity:1; visibility:visible }
.scene>*{ transform:translateY(1.2em); opacity:0; transition:transform .55s var(--ease), opacity .45s; transition-delay:calc(var(--i,0)*55ms + 80ms) }
.scene.on>*{ transform:none; opacity:1 }
.ui-h{ font:500 1.12em/1.2 var(--f-display); letter-spacing:-.02em; margin:0 }
.ui-s{ font-size:.8em; color:var(--ink-2); margin:0; line-height:1.35 }
.ui-bubble{ align-self:flex-end; max-width:86%; padding:.65em .9em; border-radius:1.1em 1.1em .3em 1.1em; background:var(--royal); color:#fff; font-size:.86em; line-height:1.35 }
.ui-bubble.bot-b{ align-self:flex-start; border-radius:1.1em 1.1em 1.1em .3em; background:#fff; color:var(--ink); box-shadow:0 .3em 1em -.4em rgba(10,18,56,.3) }
.ui-row{ display:flex; align-items:center; gap:.7em; padding:.6em .7em; border-radius:.9em; background:#fff; box-shadow:0 .3em 1em -.5em rgba(10,18,56,.3); font-size:.84em; line-height:1.25 }
.ui-row .thumb{ width:2.6em; height:2.6em; border-radius:.6em; display:grid; place-items:center; flex:none; background:var(--tc,#ffe9b0); color:var(--ti,#8a5c00) }
.ui-row .thumb .ico{ width:1.5em; height:1.5em }
.ui-row div{ flex:1; min-width:0 }
.ui-row b{ display:block; font-weight:600 }
.ui-row small{ color:var(--ink-2); font-size:.86em }
.ui-row em{ font-style:normal; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap }
.badge{ display:inline-flex; align-items:center; gap:.35em; font:600 .72em/1 var(--f-body); padding:.38em .6em; border-radius:999px; white-space:nowrap }
.badge::before{ content:""; width:.55em; height:.55em; border-radius:50% ; background:currentColor }
.b-in{ background:#dcf5ea; color:#08754b } .b-low{ background:#fdeccb; color:#8f5a00 } .b-out{ background:#fbdfe1; color:#a8212c }
.ui-bar{ height:.7em; border-radius:1em; background:#d9e2f6; overflow:hidden }
.ui-bar i{ display:block; height:100%; width:var(--v,0%); border-radius:1em; background:linear-gradient(90deg,var(--royal),var(--sky)); transition:width 1.4s var(--ease) .3s }
.ui-card{ padding:.9em; border-radius:1em; background:#0c1744; color:#fff; display:flex; flex-direction:column; gap:.55em }
.ui-card .ui-s{ color:#aab8e6 }
.ui-big{ font:500 1.7em/1 var(--f-display); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.ui-chips{ display:flex; flex-wrap:wrap; gap:.4em }
.ui-chip{ font:600 .74em/1 var(--f-body); padding:.55em .75em; border-radius:.6em; background:var(--ink); color:#fff }
.ui-chip.alt{ background:#dfe7fa; color:var(--ink) }
.ui-btn{ text-align:center; padding:.8em; border-radius:.9em; background:var(--royal); color:#fff; font-weight:600; font-size:.86em }
.ui-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5em }
.ui-tile{ padding:.6em .4em; border-radius:.8em; background:#fff; box-shadow:0 .3em 1em -.5em rgba(10,18,56,.3); display:flex; flex-direction:column; align-items:center; gap:.3em; font-size:.7em; text-align:center; line-height:1.2 }
.ui-tile .thumb{ width:2.8em; height:2.8em; border-radius:.7em; display:grid; place-items:center; background:var(--tc,#ffe9b0); color:var(--ti,#8a5c00) }
.ui-tile .thumb .ico{ width:1.6em; height:1.6em }
.ui-tile b{ font-weight:600 } .ui-tile em{ font-style:normal; color:var(--royal); font-weight:600 }
.ui-map{ position:relative; flex:1; min-height:0; border-radius:1em; background:#fff; overflow:hidden; box-shadow:0 .3em 1em -.5em rgba(10,18,56,.3) }
.ui-map svg{ width:100%; height:100% }
.route{ stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300); transition:stroke-dashoffset 1.8s var(--ease) .4s }
.on .route,.in .route{ stroke-dashoffset:0 }
.ui-total{ display:flex; justify-content:space-between; align-items:baseline; font-weight:600; padding:.2em .3em 0; font-size:.9em }
.ui-lang{ display:flex; align-items:center; gap:.7em; padding:.75em .9em; border-radius:.9em; background:#fff; box-shadow:0 .3em 1em -.5em rgba(10,18,56,.3); font-size:.9em; font-weight:600 }
.ui-lang.sel{ box-shadow:inset 0 0 0 .14em var(--royal) }
.flag{ width:1.9em; height:1.3em; border-radius:.25em; flex:none; box-shadow:0 0 0 1px rgba(10,18,56,.12) }
.flag-fr{ background:linear-gradient(90deg,#1f3fa8 33.3%,#fff 0 66.6%,#d8303b 0) }
.flag-it{ background:linear-gradient(90deg,#128a4a 33.3%,#fff 0 66.6%,#d8303b 0) }
.flag-en{ background:linear-gradient(0deg,transparent 40%,#fff 0 60%,transparent 0),linear-gradient(90deg,transparent 42%,#fff 0 58%,transparent 0),#1f3fa8; position:relative }
.flag-en::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(0deg,transparent 44%,#d8303b 0 56%,transparent 0),linear-gradient(90deg,transparent 46%,#d8303b 0 54%,transparent 0) }

/* ---------- feature tour ---------- */
.tour{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:clamp(24px,6vw,90px); align-items:start }
.tour-stick{ position:sticky; top:0; height:100vh; height:100svh; display:grid; place-items:center }
.tour-stick::before{ content:""; position:absolute; width:min(520px,90%); aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side,rgba(61,184,255,.3),rgba(26,72,216,.1) 60%,transparent); filter:blur(10px) }
.tour-stick .bot{ position:relative }
.tour-steps{ display:flex; flex-direction:column; padding-block:16vh 22vh }
.tour-step{ min-height:72vh; display:flex; flex-direction:column; justify-content:center; gap:.9rem; opacity:.25; transition:opacity .5s }
.tour-step.on{ opacity:1 }
.tour-step .k{ font:500 .72rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--royal) }
.tour-step p{ margin:0; color:var(--ink-2); max-width:52ch; font-size:1.02rem; line-height:1.6 }
.tour-points{ list-style:none; margin:.3rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; max-width:52ch }
.tour-points li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; color:var(--ink); line-height:1.45 }
.tour-points .ico{ flex:none; width:20px; height:20px; padding:4px; margin-top:.1em; border-radius:50%; background:rgba(26,72,216,.12); color:var(--royal); stroke-width:2.6 }
.tour-dots{ position:absolute; inset-inline-end:calc(var(--gutter)*.6); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:8px }
.tour-dots i{ width:6px; height:6px; border-radius:6px; background:var(--line); transition:height .4s var(--ease), background .4s }
.tour-dots i.on{ height:26px; background:var(--royal) }

/* ---------- scroll sequence ---------- */
.seq{ position:relative; height:290vh; background:var(--night) }
.seq-pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden }
.seq canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; mix-blend-mode:screen }
.seq-layer{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; will-change:transform,opacity; backface-visibility:hidden }
.seq-pin::after{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(120% 90% at 50% 50%,transparent 40%,rgba(5,10,34,.75)),linear-gradient(180deg,rgba(5,10,34,.55),transparent 22%,transparent 62%,rgba(5,10,34,.9)); pointer-events:none }
.seq-caps{ position:absolute; inset:0; z-index:2; display:grid; align-items:end; padding:0 var(--gutter) clamp(48px,11vh,120px); color:#fff }
.seq-caps::before{ content:""; position:absolute; z-index:-1; inset-block:30% 0; inset-inline:0 25%; background:radial-gradient(95% 100% at 0% 100%,rgba(5,10,34,.92),rgba(5,10,34,.64) 45%,transparent 78%); pointer-events:none }
[dir="rtl"] .seq-caps::before{ background:radial-gradient(95% 100% at 100% 100%,rgba(5,10,34,.92),rgba(5,10,34,.64) 45%,transparent 78%) }
.seq-cap{ grid-area:1/1; max-width:min(780px,100%); opacity:0; transform:translateY(30px); transition:opacity .6s, transform .8s var(--ease) }
.seq-cap.on{ opacity:1; transform:none }
.seq-cap .display{ text-shadow:0 2px 30px rgba(5,10,34,.8) }
.seq-cap p{ margin:.8rem 0 0; color:rgba(234,240,255,.85); max-width:44ch; text-shadow:0 2px 20px rgba(5,10,34,.9) }
.seq-meter{ position:absolute; z-index:2; left:var(--gutter); right:var(--gutter); top:calc(env(safe-area-inset-top,0px) + 96px); display:flex; justify-content:space-between; align-items:center; gap:1rem; font:500 .7rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:rgba(234,240,255,.7) }
.seq-meter b{ flex:1; height:2px; background:rgba(255,255,255,.18); border-radius:2px; overflow:hidden; position:relative }
.seq-meter b::after{ content:""; position:absolute; inset:0; background:var(--sky); transform-origin:0 50%; transform:scaleX(var(--p,0)) }

/* ---------- cards / bento ---------- */
.card{ --mx:50%; --my:50%; position:relative; border-radius:var(--r-lg); background:var(--white); box-shadow:inset 0 0 0 1px var(--line); padding:clamp(20px,2.4vw,32px); display:flex; flex-direction:column; gap:.8rem; overflow:hidden; transform-style:preserve-3d; transition:transform .5s var(--ease), box-shadow .5s }
.card::before{ content:""; position:absolute; inset:0; background:radial-gradient(380px circle at var(--mx) var(--my),rgba(61,184,255,.2),transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none }
.card:hover::before{ opacity:1 }
.card:hover{ box-shadow:inset 0 0 0 1px rgba(26,72,216,.35), var(--shadow) }
.card p{ margin:0; color:var(--ink-2); font-size:.96rem }
.card ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.45rem; font-size:.94rem; color:var(--ink-2) }
.card ul li{ display:flex; gap:.6em; align-items:flex-start }
.card ul li::before{ content:""; flex:none; width:7px; height:7px; margin-top:.55em; border-radius:50%; background:var(--royal); box-shadow:0 0 0 3px rgba(26,72,216,.15) }
.card-ico{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(140deg,var(--royal),var(--royal-deep)); color:#fff; flex:none }
.card-ico .ico{ width:24px; height:24px }
.night .card{ background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) }
.night .card p,.night .card ul{ color:var(--on-night-2) }
.night .card ul li::before{ background:var(--sky); box-shadow:0 0 0 3px rgba(61,184,255,.18) }
.card-dark{ background:linear-gradient(150deg,var(--night-2),var(--night)); color:var(--on-night); box-shadow:none }
.card-dark p,.card-dark ul{ color:var(--on-night-2) }
.bento{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px) }
.bento .c3{ grid-column:span 3 } .bento .c2{ grid-column:span 2 } .bento .c4{ grid-column:span 4 }
.viz{ margin-top:auto; padding-top:1rem }
.viz-bars{ display:flex; align-items:flex-end; gap:6px; height:84px }
.viz-bars i{ flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--sky),var(--royal)); height:calc(var(--v)*1%); transform:scaleY(0); transform-origin:50% 100%; transition:transform 1s var(--ease); transition-delay:calc(var(--i)*70ms + 200ms) }
.in .viz-bars i,.viz-bars.in i{ transform:none }
.viz-journey{ display:flex; align-items:center; justify-content:space-between; gap:.3rem; position:relative }
.viz-journey::before{ content:""; position:absolute; left:8%; right:8%; top:22px; height:2px; background:var(--line) }
.viz-journey{ container-type:inline-size }
.viz-journey::after{ --run:calc(84cqw - 10px); content:""; position:absolute; left:8%; top:18px; width:10px; height:10px; border-radius:50%; background:var(--lamp); box-shadow:0 0 0 5px rgba(221,154,18,.2); animation:travel 5s var(--ease) infinite }
@keyframes travel{ 0%{ transform:translateX(0) } 80%,100%{ transform:translateX(var(--run,260px)) } }
.viz-journey span{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-size:.78rem; color:var(--ink-2) }
.viz-journey span b{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--white); box-shadow:inset 0 0 0 1.5px var(--royal); color:var(--royal) }
.viz-cam{ position:relative; height:120px; border-radius:14px; background:linear-gradient(180deg,#0c1744,#050a22); overflow:hidden }
.viz-cam{ container-type:inline-size }
.viz-cam i{ --run:108cqw; left:0; position:absolute; width:22px; height:44px; border:1.5px solid var(--sky); border-radius:4px; bottom:14px; animation:walk 9s linear infinite; animation-delay:var(--dl); box-shadow:0 0 12px rgba(61,184,255,.5) }
.viz-cam i::before{ content:""; position:absolute; left:50%; top:6px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#fff; opacity:.8 }
.viz-cam::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(61,184,255,.35) 50%,transparent 52%); animation:sweep 3.6s linear infinite }
@keyframes walk{ from{ transform:translateX(-40px) } to{ transform:translateX(var(--run,640px)) } }
@keyframes sweep{ from{ transform:translateY(-60%) } to{ transform:translateY(60%) } }
.viz-qr{ width:92px; aspect-ratio:1; border-radius:12px; padding:8px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); display:grid; grid-template-columns:repeat(7,1fr); gap:2px }
.viz-qr i{ border-radius:1.5px; background:var(--ink); opacity:0; animation:qr 4s infinite; animation-delay:calc(var(--i)*40ms) }
@keyframes qr{ 0%{ opacity:0 } 20%,80%{ opacity:var(--o,1) } 100%{ opacity:0 } }

/* ---------- media ---------- */
.shot{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--mist); box-shadow:var(--shadow); margin:0 }
.shot img,.shot video{ width:100%; height:auto; display:block }
.shot.par{ aspect-ratio:16/9 }
.shot.par img{ height:118%; object-fit:cover; transform:scale(1.02); will-change:transform }
.shot figcaption{ position:absolute; inset-inline-start:14px; bottom:14px; padding:.5em .8em; border-radius:10px; background:rgba(5,10,34,.7); color:#fff; font:400 .68rem/1.3 var(--f-mono); letter-spacing:.06em }
.tilt{ transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s var(--ease) }

/* ---------- horizontal scroll ---------- */
.hs{ position:relative }
.hs-pin{ position:sticky; top:0; height:100vh; height:100svh; display:flex; flex-direction:column; justify-content:center; gap:clamp(20px,4vh,44px); overflow:hidden }
.hs-track{ display:flex; gap:clamp(14px,2vw,26px); padding-inline:var(--gutter); width:max-content; will-change:transform; backface-visibility:hidden }
.hs-card{ position:relative; width:min(74vw,760px); aspect-ratio:16/9.6; border-radius:var(--r-lg); overflow:hidden; background:var(--night); color:#fff; flex:none }
.hs-card video,.hs-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease) }
.hs-card:hover video{ transform:scale(1.04) }
.hs-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(5,10,34,.86)) }
.hs-meta{ position:absolute; z-index:2; left:clamp(18px,3vw,34px); right:clamp(18px,3vw,34px); bottom:clamp(18px,3vw,30px); display:flex; flex-direction:column; gap:.5rem }
.hs-meta p{ margin:0; color:rgba(234,240,255,.82); max-width:46ch; font-size:.98rem }
.hs-n{ position:absolute; z-index:2; top:clamp(16px,2.4vw,26px); inset-inline-start:clamp(18px,3vw,34px); display:flex; gap:.5rem; align-items:center; font:500 .7rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; padding:.6em .9em; border-radius:999px; background:rgba(5,10,34,.55) }
.hs.native .hs-pin{ position:static; height:auto; padding-block:clamp(60px,10vw,90px) }
.hs.native .hs-track{ width:auto; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px }
.hs.native .hs-card,.hs.native .hs-end{ scroll-snap-align:center }
.hs-end{ width:min(60vw,420px); display:flex; flex-direction:column; justify-content:center; gap:1.2rem; flex:none; padding-inline:clamp(10px,3vw,40px) }

/* ---------- CTA + footer ---------- */
.cta{ position:relative; overflow:hidden; background:radial-gradient(90% 120% at 50% 110%,#16308f 0%,var(--night-2) 45%,var(--night) 80%); color:var(--on-night); text-align:center }
.cta .ribbons{ opacity:.7 }
.cta-in{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1.5rem }
.plate{ display:inline-flex; padding:14px 22px; border-radius:22px; background:radial-gradient(closest-side,#fff 55%,rgba(255,255,255,.86)); box-shadow:0 0 80px 10px rgba(61,184,255,.35), 0 0 0 1px rgba(255,255,255,.6) }
.plate img{ height:clamp(70px,9vw,104px); width:auto }
.foot{ background:var(--night); color:var(--on-night-2); padding-block:clamp(48px,6vw,80px) 96px; border-top:1px solid rgba(255,255,255,.08); font-size:.93rem }
.foot-grid{ display:grid; grid-template-columns:1.4fr minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.3fr); gap:clamp(24px,4vw,56px) }
.foot h4{ font:500 .7rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 1rem }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem }
.foot a{ text-decoration:none; transition:color .3s }
.foot a:hover{ color:#fff }
.foot .plate{ padding:8px 14px; border-radius:16px; box-shadow:none }
.foot .plate img{ height:58px }
.foot-brand{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; max-width:36ch }
.tbc{ display:flex; align-items:center; gap:.9rem; color:var(--on-night) }
.tbc img{ width:54px; height:auto; flex:none }
.tbc small{ display:block; color:var(--on-night-2); font-size:.8rem; line-height:1.4 }
.foot-base{ margin-top:clamp(32px,5vw,56px); padding-top:22px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; font-size:.82rem }
.totop{ position:fixed; right:24px; bottom:calc(env(safe-area-inset-bottom,0px) + 92px); z-index:90; width:46px; height:46px; border-radius:50%; border:0; background:var(--ink); color:#fff; display:grid; place-items:center; cursor:pointer; opacity:0; transform:translateY(20px); pointer-events:none; transition:opacity .4s, transform .4s var(--ease); box-shadow:0 12px 30px -12px rgba(10,18,56,.6) }
.totop.show{ opacity:1; transform:none; pointer-events:auto }
.totop .ico{ transform:rotate(-90deg) }

/* ---------- sub-page hero ---------- */
.phero{ position:relative; padding-top:calc(env(safe-area-inset-top,0px) + clamp(130px,17vh,190px)); padding-bottom:clamp(40px,6vw,80px); overflow:clip }
.phero-head{ position:relative; display:flex; flex-direction:column; gap:1.4rem; max-width:1120px }
.phero .h-xl{ font-size:clamp(2.2rem,5.6vw,4.6rem) }
.grid-2 .h-lg{ font-size:clamp(1.8rem,3.3vw,2.85rem); line-height:1.06 }
.phero .shot{ margin-top:clamp(32px,5vw,64px) }

/* ---------- demos ---------- */
.demo{ border-radius:var(--r-lg); background:var(--white); box-shadow:inset 0 0 0 1px var(--line), var(--shadow); padding:clamp(18px,3vw,36px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,4vw,56px); align-items:center }
.demo-side{ display:flex; flex-direction:column; gap:1.1rem; min-width:0 }
.demo-stage{ display:grid; place-items:center; min-width:0; position:relative }
.seg{ display:inline-flex; flex-wrap:wrap; padding:5px; border-radius:16px; background:var(--mist); gap:4px; align-self:flex-start }
.seg button{ border:0; background:transparent; padding:.65em 1.05em; border-radius:12px; font-weight:600; font-size:.9rem; color:var(--ink-2); cursor:pointer; transition:background .3s, color .3s, box-shadow .3s; display:inline-flex; align-items:center; gap:.5em }
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{ background:#fff; color:var(--ink); box-shadow:0 6px 16px -8px rgba(10,18,56,.4) }
.night .seg{ background:rgba(255,255,255,.08) } .night .seg button{ color:var(--on-night-2) }
.night .seg button[aria-pressed="true"],.night .seg button[aria-selected="true"]{ background:var(--royal); color:#fff }
.ask{ display:flex; gap:.5rem; padding:6px; border-radius:18px; background:var(--ice); box-shadow:inset 0 0 0 1.5px var(--line); transition:box-shadow .3s }
.ask:focus-within{ box-shadow:inset 0 0 0 2px var(--royal) }
.ask input{ flex:1; min-width:0; border:0; background:transparent; padding:.7em .8em; font:inherit; color:var(--ink); outline:none }
.sugs{ display:flex; flex-wrap:wrap; gap:.4rem }
.sugs button{ border:0; cursor:pointer; padding:.5em .9em; border-radius:999px; background:var(--mist); font-size:.85rem; font-weight:500; transition:background .3s, color .3s }
.sugs button:hover{ background:var(--royal); color:#fff }
.steps5{ display:flex; gap:6px; margin:0; padding:0; list-style:none }
.steps5 li{ flex:1; font:500 .62rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:.75em .2em; border-radius:8px; background:var(--mist); color:var(--ink-2); transition:background .4s, color .4s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.steps5 li.on{ background:var(--royal); color:#fff }
.steps5 li.done{ background:var(--ink); color:#fff }
.results{ display:flex; flex-direction:column; gap:.55rem; min-height:300px }
.res{ display:flex; align-items:center; gap:.8rem; width:100%; text-align:start; border:0; cursor:pointer; padding:.7rem .8rem; border-radius:16px; background:var(--ice); transition:background .3s, box-shadow .3s, transform .5s var(--ease), opacity .5s; opacity:0; transform:translateY(14px) }
.res.show{ opacity:1; transform:none }
.res:hover,.res.sel{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--royal) }
.res .thumb{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:none; background:var(--tc,#ffe9b0); color:var(--ti,#8a5c00) }
.res .thumb .ico{ width:24px; height:24px }
.res div{ flex:1; min-width:0 } .res b{ display:block; font-weight:600; font-size:.96rem } .res small{ color:var(--ink-2); font-size:.82rem }
.res em{ font-style:normal; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap }
.answer{ border-radius:18px; padding:1rem 1.1rem; background:linear-gradient(140deg,var(--night-2),var(--night)); color:#fff; display:flex; flex-direction:column; gap:.6rem; font-size:.95rem }
.answer .ui-chips{ gap:.4rem } .answer .ui-chip{ background:rgba(255,255,255,.14); font-size:.78rem }
.answer p{ margin:0; color:#c5d0f2 }
.thinking{ display:inline-flex; gap:5px; align-items:center; padding:.4rem 0 }
.thinking i{ width:7px; height:7px; border-radius:50%; background:var(--royal); animation:think 1s infinite; animation-delay:calc(var(--i)*.15s) }
@keyframes think{ 50%{ transform:translateY(-6px); opacity:.4 } }

.offer{ border-radius:var(--r-lg); padding:clamp(22px,4vw,48px); background:linear-gradient(140deg,var(--night-2),var(--night)); color:#fff; display:flex; flex-direction:column; gap:1.4rem; position:relative; overflow:hidden }
.offer canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.offer-q{ font:400 clamp(1.15rem,2.4vw,1.8rem)/1.35 var(--f-display); letter-spacing:-.025em; margin:0; max-width:30ch; text-wrap:balance }
.offer-bar{ height:14px; border-radius:14px; background:rgba(255,255,255,.12); overflow:hidden }
.offer-bar i{ display:block; height:100%; width:var(--v,0%); border-radius:14px; background:linear-gradient(90deg,var(--royal),var(--sky)); transition:width .9s var(--ease), background .6s }
.offer.won .offer-bar i{ background:linear-gradient(90deg,#c98708,#f7d580) }
.offer-scale{ display:flex; justify-content:space-between; font:500 .72rem/1 var(--f-mono); letter-spacing:.08em; color:#9fb0dc; font-variant-numeric:tabular-nums }
.offer-add{ display:flex; flex-wrap:wrap; gap:.5rem }
.offer-add button{ border:0; cursor:pointer; padding:.7em 1em; border-radius:12px; background:rgba(255,255,255,.1); color:#fff; font-weight:500; font-size:.9rem; display:inline-flex; gap:.5em; align-items:center; transition:background .3s, transform .3s }
.offer-add button:hover{ background:rgba(255,255,255,.2) } .offer-add button:active{ transform:scale(.96) }
.offer-add button[data-reset]{ background:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25) }

.bill{ display:flex; flex-direction:column; gap:.5em; flex:1; min-height:0; overflow:hidden }
.bill .ui-row{ animation:rowin .6s var(--ease) both }
@keyframes rowin{ from{ opacity:0; transform:translateY(1em) } }
.beam{ position:absolute; left:8%; right:8%; top:50%; height:3px; border-radius:3px; background:var(--bad); box-shadow:0 0 16px 3px rgba(210,60,72,.7); opacity:0; pointer-events:none }
.beam.go{ animation:beam .6s ease-out }
@keyframes beam{ 0%{ opacity:1; top:20% } 100%{ opacity:0; top:80% } }
.qrbig{ width:60%; aspect-ratio:1; margin:auto; border-radius:1em; padding:.7em; background:#fff; display:grid; grid-template-columns:repeat(9,1fr); gap:.2em; box-shadow:0 .6em 1.6em -.6em rgba(10,18,56,.4) }
.qrbig i{ border-radius:.15em; background:var(--ink) }
.okmark{ width:4.2em; height:4.2em; margin:auto; border-radius:50%; background:var(--good); color:#fff; display:grid; place-items:center; animation:pop .7s var(--ease) both }
.okmark .ico{ width:2.2em; height:2.2em; stroke-width:2.6 }
@keyframes pop{ from{ transform:scale(.3); opacity:0 } 60%{ transform:scale(1.12) } }
.cols2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,2vw,22px) }
.listcard h3{ font:500 .7rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; margin:0; padding:1rem 1.3rem; background:var(--royal); color:#fff }
.listcard{ border-radius:var(--r-md); overflow:hidden; background:var(--white); box-shadow:inset 0 0 0 1px var(--line) }
.listcard.dk h3{ background:var(--ink) }
.listcard ul{ margin:0; padding:1.1rem 1.3rem 1.3rem; list-style:none; display:flex; flex-direction:column; gap:.55rem; font-size:.95rem; color:var(--ink) }
.listcard li{ display:flex; gap:.7em; align-items:flex-start }
.listcard li::before{ content:""; flex:none; width:8px; height:8px; margin-top:.5em; border-radius:50%; background:var(--royal); box-shadow:0 0 0 3px rgba(26,72,216,.15) }
.listcard.dk li::before{ background:var(--sky); box-shadow:0 0 0 3px rgba(61,184,255,.2) }
.nlist{ margin:0; padding:0; list-style:none; counter-reset:n; display:flex; flex-direction:column; gap:.2rem; position:relative }
.nlist li{ counter-increment:n; display:flex; gap:1rem; align-items:flex-start; padding:.55rem 0; color:var(--ink); position:relative }
.nlist li::before{ content:counter(n); flex:none; width:28px; height:28px; border-radius:50%; background:var(--royal); color:#fff; display:grid; place-items:center; font:600 .78rem/1 var(--f-body); position:relative; z-index:1 }
.nlist li:not(:last-child)::after{ content:""; position:absolute; inset-inline-start:13px; top:36px; bottom:-6px; width:2px; background:var(--line) }

/* ---------- platform ---------- */
.ticket{ border-radius:var(--r-lg); background:var(--white); box-shadow:inset 0 0 0 1px var(--line), var(--shadow); overflow:hidden }
.ticket-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem; padding:1rem 1.3rem; background:var(--ink); color:#fff }
.ticket-top b{ font:500 .95rem/1 var(--f-display); letter-spacing:-.01em }
.ticket-body{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line) }
.ticket-cell{ background:var(--white); padding:1.1rem 1.3rem; display:flex; flex-direction:column; gap:.4rem; font-size:.95rem }
.ticket-cell small{ font:500 .66rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--royal) }
.kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.1); border-radius:var(--r-md); overflow:hidden }
.kpi{ background:#0a1236; padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.45rem }
.kpi small{ font:500 .64rem/1.2 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--on-night-2) }
.kpi b{ font:500 clamp(1.3rem,2.4vw,1.9rem)/1 var(--f-display); letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:#fff }
.dash{ border-radius:var(--r-lg); background:#070d2b; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); padding:clamp(14px,2vw,24px); display:flex; flex-direction:column; gap:clamp(12px,1.6vw,18px) }
.dash-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; color:var(--on-night-2); font:500 .7rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase }
.dash-row{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(12px,1.6vw,18px) }
.panel{ background:#0a1236; border-radius:var(--r-md); padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.8rem; min-width:0 }
.panel h4{ margin:0; font:500 .92rem/1.2 var(--f-body); color:#fff }
.chart{ position:relative }
.chart svg{ width:100%; height:auto; overflow:visible }
.chart .axis text{ font:400 10px var(--f-mono); fill:#8fa0d0 }
.chart .grid line{ stroke:rgba(255,255,255,.08) }
.chart .line{ fill:none; stroke:var(--sky); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200); transition:stroke-dashoffset 2.2s var(--ease) .2s }
.chart .area{ fill:url(#areaFill); opacity:0; transition:opacity 1.2s 1s }
.in .chart .line,.chart.in .line{ stroke-dashoffset:0 } .in .chart .area,.chart.in .area{ opacity:1 }
.chart .cross{ stroke:rgba(255,255,255,.35); stroke-dasharray:3 3; opacity:0 } .chart .dot{ fill:var(--sky); stroke:#0a1236; stroke-width:2; opacity:0 }
.chart.hov .cross,.chart.hov .dot{ opacity:1 }
.tip{ position:absolute; pointer-events:none; padding:.45em .7em; border-radius:8px; background:#fff; color:var(--ink); font:500 .78rem/1.3 var(--f-body); white-space:nowrap; transform:translate(-50%,-130%); opacity:0; transition:opacity .2s; box-shadow:0 8px 20px -8px rgba(0,0,0,.5); font-variant-numeric:tabular-nums }
.chart.hov .tip{ opacity:1 }
.hbars{ display:flex; flex-direction:column; gap:.7rem; margin:0; padding:0; list-style:none }
.hbars li{ display:grid; grid-template-columns:minmax(0,7.5em) minmax(0,1fr) auto; gap:.7rem; align-items:center; font-size:.84rem; color:var(--on-night) }
.hbars i{ display:block; height:10px; border-radius:0 4px 4px 0; background:var(--sky); width:calc(var(--v)*1%); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.1s var(--ease); transition-delay:calc(var(--i)*90ms + 200ms) }
.in .hbars i{ transform:none }
.hbars em{ font-style:normal; font-variant-numeric:tabular-nums; color:var(--on-night-2); font-size:.8rem }
.versus{ color:var(--ink); display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,4vw,56px); align-items:center; border-radius:var(--r-lg); background:var(--white); box-shadow:inset 0 0 0 1px var(--line); padding:clamp(20px,3.4vw,44px) }
.versus-nums{ display:flex; align-items:baseline; gap:1.2rem }
.versus-nums div{ display:flex; flex-direction:column; gap:.4rem }
.versus-nums b{ font:500 clamp(2rem,5vw,3.8rem)/1 var(--f-display); letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.versus-nums small{ font:500 .66rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2) }
.versus-nums span{ font:500 .8rem/1 var(--f-mono); color:var(--ink-2) }
.vbars{ display:flex; flex-direction:column; gap:.5rem; margin-top:1rem }
.vbars i{ display:block; height:12px; border-radius:0 4px 4px 0; background:var(--royal); width:calc(var(--v)*1%); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.4s var(--ease) .2s }
.vbars i+i{ background:var(--lamp) }
.in .vbars i{ transform:none }
.heat{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:#070d2b; aspect-ratio:16/10; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) }
.heat canvas{ width:100%; height:100% }
.heat-tag{ position:absolute; left:14px; top:14px; display:flex; gap:.5rem; align-items:center; font:500 .66rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:#fff; padding:.6em .8em; border-radius:8px; background:rgba(255,255,255,.1) }
.heat-tag i{ width:8px; height:8px; border-radius:50%; background:var(--bad); animation:pulse2 1.4s infinite }
@keyframes pulse2{ 50%{ opacity:.25 } }
.orbit{ position:relative; width:min(560px,100%); aspect-ratio:1; margin-inline:auto }
.orbit-ring{ position:absolute; inset:9%; border-radius:50%; border:1.5px dashed var(--line); animation:spin 70s linear infinite }
.orbit-ring.r2{ inset:27%; animation-duration:40s; animation-direction:reverse; border-style:solid; opacity:.6 }
@keyframes spin{ to{ transform:rotate(360deg) } }
.orbit-hub{ position:absolute; left:50%; top:50%; width:34%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(closest-side,#fff 60%,var(--mist)); box-shadow:0 0 0 1px var(--line), 0 30px 60px -20px rgba(26,72,216,.5); display:grid; place-items:center; padding:9% }
.orbit-node{ position:absolute; left:50%; top:50%; width:0; height:0; rotate:calc(var(--i)*60deg); animation:spin 70s linear infinite }
.orbit-node>div{ position:absolute; left:0; top:0; translate:-50% calc(-50% - var(--rad)); rotate:calc(var(--i)*-60deg); animation:spin 70s linear infinite reverse; display:flex; flex-direction:column; align-items:center; gap:.4rem; width:120px; text-align:center; font:600 .78rem/1.2 var(--f-body) }
.orbit-node b{ width:56px; height:56px; border-radius:18px; display:grid; place-items:center; background:var(--ink); color:#fff; box-shadow:0 14px 30px -14px rgba(10,18,56,.7) }
.orbit-node b .ico{ width:26px; height:26px }
.orbit{ --rad:calc(min(560px,100vw - var(--gutter)*2)*.41) }
.tabs-x{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(16px,3vw,40px); align-items:start }
.tabs-x [role="tablist"]{ display:flex; flex-direction:column; gap:6px }
.tabs-x [role="tab"]{ text-align:start; border:0; cursor:pointer; padding:1rem 1.2rem; border-radius:16px; background:transparent; display:flex; flex-direction:column; gap:.25rem; transition:background .3s, box-shadow .3s; color:var(--ink) }
.tabs-x [role="tab"] b{ font:500 1rem/1.2 var(--f-display); letter-spacing:-.02em }
.tabs-x [role="tab"] span{ font-size:.9rem; color:var(--ink-2); display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease) }
.tabs-x [role="tab"] span>i{ overflow:hidden; font-style:normal }
.tabs-x [role="tab"][aria-selected="true"]{ background:var(--white); box-shadow:inset 0 0 0 1px var(--line), 0 16px 30px -22px rgba(10,18,56,.5) }
.tabs-x [role="tab"][aria-selected="true"] span{ grid-template-rows:1fr }
.tabs-x [role="tab"]:hover{ background:rgba(255,255,255,.6) }

/* ---------- solutions ---------- */
.ind-tabs{ display:flex; flex-wrap:wrap; gap:.5rem }
.ind-tabs button{ border:0; cursor:pointer; padding:.75em 1.1em; border-radius:999px; background:var(--white); box-shadow:inset 0 0 0 1px var(--line); font-weight:600; font-size:.92rem; display:inline-flex; align-items:center; gap:.55em; transition:background .3s, color .3s, box-shadow .3s }
.ind-tabs button[aria-selected="true"]{ background:var(--ink); color:#fff; box-shadow:none }
.ind-panel{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(20px,4vw,56px); align-items:center }
.ind-panel[hidden]{ display:none }
.ind-media{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; background:var(--night); box-shadow:var(--shadow) }
.ind-media video{ width:100%; height:100%; object-fit:cover }
.ind-panel.swap .ind-media{ animation:swapin .8s var(--ease) }
.ind-panel.swap .ind-text>*{ animation:rowin .7s var(--ease) both; animation-delay:calc(var(--i,0)*80ms) }
@keyframes swapin{ from{ clip-path:inset(0 100% 0 0 round var(--r-lg)); transform:scale(1.04) } to{ clip-path:inset(0 0 0 0 round var(--r-lg)) } }
.ind-text{ display:flex; flex-direction:column; gap:1rem }
.checks{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.7rem }
.checks li{ display:flex; gap:.8rem; align-items:flex-start; color:var(--ink) }
.checks .ico{ flex:none; width:22px; height:22px; padding:4px; border-radius:50%; background:var(--royal); color:#fff; stroke-width:2.6; margin-top:.15em }
.night .checks li{ color:var(--on-night) }
.phases{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px) }
.phase{ position:relative; padding:1.3rem 1.2rem 1.4rem; border-radius:var(--r-md); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); display:flex; flex-direction:column; gap:.6rem; overflow:hidden }
.phase::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg,var(--royal),var(--sky)); transform:scaleX(0); transform-origin:0 50%; transition:transform 1s var(--ease); transition-delay:calc(var(--i)*140ms) }
.phases.in .phase::before{ transform:none }
.phase .n{ font:500 2rem/1 var(--f-display); letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px var(--sky) }
.phase p{ margin:0; font-size:.92rem; color:var(--on-night-2) }
.road{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,24px) }
.road .card ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem 1.2rem }
.faq{ display:flex; flex-direction:column; border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.4rem .2rem; font:500 clamp(1rem,1.8vw,1.25rem)/1.3 var(--f-display); letter-spacing:-.02em }
.faq summary::-webkit-details-marker{ display:none }
.faq summary i{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--mist); position:relative; transition:background .3s, transform .5s var(--ease) }
.faq summary i::before,.faq summary i::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; margin:-1px 0 0 -7px; background:var(--ink); border-radius:2px; transition:transform .5s var(--ease), background .3s }
.faq summary i::after{ transform:rotate(90deg) }
.faq details[open] summary i{ background:var(--royal); transform:rotate(180deg) }
.faq details[open] summary i::before,.faq details[open] summary i::after{ background:#fff }
.faq details[open] summary i::after{ transform:rotate(0) }
.faq .ans{ overflow:hidden }
.faq .ans p{ margin:0; padding:0 .2rem 1.5rem; color:var(--ink-2); max-width:70ch }

.sticky-col{ position:sticky; top:120px }
.ppanel .ui-row{ background:var(--ice); box-shadow:none; padding:.8em 1em }
.ppanel.swap>*{ animation:rowin .6s var(--ease) both }
.ppanel.swap>*:nth-child(2){ animation-delay:70ms } .ppanel.swap>*:nth-child(3){ animation-delay:140ms } .ppanel.swap>*:nth-child(4){ animation-delay:210ms }
/* ---------- contact ---------- */
.contact{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(20px,4vw,56px); align-items:start }
.form{ border-radius:var(--r-lg); background:var(--white); box-shadow:inset 0 0 0 1px var(--line), var(--shadow); padding:clamp(20px,3.4vw,44px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem }
.field{ display:flex; flex-direction:column; gap:.45rem; min-width:0 }
.field.full{ grid-column:1/-1 }
.field label,.field legend{ font:500 .7rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); padding:0 }
.field input,.field select,.field textarea{ width:100%; border:0; border-radius:14px; padding:.9em 1em; background:var(--ice); box-shadow:inset 0 0 0 1.5px var(--line); font:inherit; color:var(--ink); transition:box-shadow .3s, background .3s }
.field textarea{ min-height:130px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; background:#fff; box-shadow:inset 0 0 0 2px var(--royal) }
.field .err{ color:var(--bad); font-size:.82rem; min-height:1em }
.field.bad input,.field.bad textarea{ box-shadow:inset 0 0 0 2px var(--bad) }
fieldset.field{ border:0; margin:0; padding:0 }
.opts{ display:flex; flex-wrap:wrap; gap:.45rem }
.opts label{ cursor:pointer; font:500 .88rem/1 var(--f-body); letter-spacing:0; text-transform:none; color:var(--ink) }
.opts input{ position:absolute; opacity:0; width:1px; height:1px }
.opts span{ display:inline-flex; padding:.7em 1em; border-radius:999px; background:var(--ice); box-shadow:inset 0 0 0 1.5px var(--line); transition:background .3s, color .3s, box-shadow .3s }
.opts input:checked+span{ background:var(--royal); color:#fff; box-shadow:none }
.opts input:focus-visible+span{ outline:3px solid var(--sky); outline-offset:2px }
.ready{ grid-column:1/-1; border-radius:var(--r-md); background:var(--ice); box-shadow:inset 0 0 0 1.5px var(--royal); padding:1.2rem; display:flex; flex-direction:column; gap:.9rem }
.ready pre{ margin:0; white-space:pre-wrap; word-break:break-word; font:400 .84rem/1.55 var(--f-mono); color:var(--ink); max-height:240px; overflow:auto; background:#fff; padding:1rem; border-radius:12px }
.copyline{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
.copyline code{ font:500 clamp(1.05rem,2vw,1.4rem)/1.2 var(--f-display); letter-spacing:-.02em; user-select:all; word-break:break-all }
.copybtn{ border:0; cursor:pointer; display:inline-flex; align-items:center; gap:.4em; padding:.55em .85em; border-radius:10px; background:var(--mist); font-size:.82rem; font-weight:600; transition:background .3s, color .3s }
.copybtn:hover,.copybtn.ok{ background:var(--royal); color:#fff }
.night .copybtn{ background:rgba(255,255,255,.1); color:#fff }

/* ---------- WhatsApp ---------- */
.btn-wa{ --bg:var(--wa); --fg:#fff; box-shadow:0 14px 30px -14px rgba(18,140,74,.8) }
.btn-wa:hover{ box-shadow:0 20px 40px -14px rgba(18,140,74,.9) }
.card-wa{ box-shadow:inset 0 0 0 1.5px rgba(18,140,74,.4) }
.wa{ position:fixed; right:18px; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); z-index:100; display:flex; flex-direction:column; align-items:flex-end; gap:12px }
.wa-fab{ position:relative; border:0; cursor:pointer; height:60px; min-width:60px; padding:0 18px 0 16px; border-radius:999px; display:inline-flex; align-items:center; gap:.55rem; color:#fff; font:600 .95rem/1 var(--f-body); background:linear-gradient(140deg,#25d366,#128c4a); box-shadow:0 18px 36px -14px rgba(18,140,74,.9), inset 0 0 0 1px rgba(255,255,255,.25); transition:transform .4s var(--ease), box-shadow .4s; animation:wa-in .9s var(--ease) 1.2s both }
.wa-fab:hover{ transform:translateY(-3px) scale(1.03) }
.wa-fab::before,.wa-fab::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid var(--wa-bright); opacity:0; animation:wa-ring 2.8s ease-out infinite; pointer-events:none }
.wa-fab::after{ animation-delay:1.4s }
.wa-fab-ico{ width:30px; height:30px; display:grid; place-items:center; animation:wa-wiggle 5s ease-in-out infinite }
.wa-fab-ico .ico{ width:28px; height:28px; stroke-width:1.7 }
.wa-badge{ position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px; border-radius:20px; background:var(--bad); color:#fff; font:600 .7rem/20px var(--f-body); text-align:center; box-shadow:0 0 0 2px #fff }
.wa.seen .wa-badge{ display:none }
.wa.open .wa-fab::before,.wa.open .wa-fab::after{ animation:none }
@keyframes wa-ring{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.45,1.9); opacity:0 } }
@keyframes wa-in{ from{ transform:translateY(90px) scale(.6); opacity:0 } }
@keyframes wa-wiggle{ 0%,86%,100%{ transform:none } 89%{ transform:rotate(-14deg) } 92%{ transform:rotate(12deg) } 95%{ transform:rotate(-8deg) } 98%{ transform:rotate(5deg) } }
.wa-card{ width:min(340px,calc(100vw - 36px)); border-radius:22px; overflow:hidden; background:var(--white); color:var(--ink); box-shadow:0 30px 70px -20px rgba(10,18,56,.55), 0 0 0 1px rgba(10,18,56,.06); transform-origin:100% 100%; animation:wa-pop .45s var(--ease) both }
@keyframes wa-pop{ from{ transform:scale(.6) translateY(30px); opacity:0 } }
.wa-head{ display:flex; align-items:center; gap:.75rem; padding:14px 14px 14px 16px; background:linear-gradient(140deg,#128c4a,#0b6b38); color:#fff }
.wa-ava{ width:44px; height:44px; border-radius:50%; background:#fff; display:grid; place-items:center; flex:none; overflow:hidden }
.wa-ava img{ width:34px; height:34px; object-fit:contain }
.wa-head b{ display:block; font:500 .95rem/1.2 var(--f-display); letter-spacing:-.01em }
.wa-head small{ display:flex; align-items:center; gap:.4rem; font-size:.78rem; opacity:.9; margin-top:.2rem }
.wa-head small i{ width:8px; height:8px; border-radius:50%; background:#7dffb0; box-shadow:0 0 0 3px rgba(125,255,176,.25) }
.wa-x{ margin-inline-start:auto; width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; cursor:pointer; display:grid; place-items:center; flex:none }
.wa-x:hover{ background:rgba(255,255,255,.3) }
.wa-body{ padding:16px; display:flex; flex-direction:column; gap:.55rem; background:linear-gradient(180deg,#eef4ee,#e6efe8) }
.wa-msg{ margin:0; align-self:flex-start; max-width:92%; padding:.6rem .8rem; border-radius:4px 14px 14px 14px; background:#fff; font-size:.9rem; line-height:1.4; box-shadow:0 2px 6px -3px rgba(10,18,56,.3); animation:wa-msg .5s var(--ease) both }
.wa-msg:nth-child(2){ animation-delay:.35s }
@keyframes wa-msg{ from{ transform:translateY(10px); opacity:0 } }
.wa-chips{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:flex-end; margin-top:.3rem; animation:wa-msg .5s var(--ease) .7s both }
.wa-chips a{ text-decoration:none; padding:.5em .85em; border-radius:999px; background:#d9fdd3; color:#0b4a27; font:600 .82rem/1.2 var(--f-body); box-shadow:inset 0 0 0 1px rgba(18,140,74,.3); transition:background .3s, color .3s }
.wa-chips a:hover{ background:var(--wa); color:#fff }
.wa-foot{ padding:12px 16px 16px; display:flex; flex-direction:column; gap:.6rem; align-items:stretch }
.wa-foot .btn{ width:100% }
.wa-call{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; text-decoration:none; font-weight:600; font-size:.9rem; color:var(--royal) }
.wa-call:hover{ text-decoration:underline }

body:has(.wa.open) .totop{ opacity:0; pointer-events:none }

/* ---------- consent ---------- */
.consent{ position:fixed; left:18px; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); z-index:99; width:min(420px,calc(100vw - 36px)); padding:16px 18px; border-radius:18px; background:var(--white); color:var(--ink); box-shadow:0 24px 60px -20px rgba(10,18,56,.5), 0 0 0 1px rgba(10,18,56,.08); display:flex; flex-direction:column; gap:.8rem; font-size:.9rem; animation:wa-pop .5s var(--ease) both; transform-origin:0 100% }
.consent p{ margin:0; color:var(--ink-2); line-height:1.45 }
.consent a{ color:var(--royal) }

/* ---------- form extras ---------- */
.hp{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none }
.ready.ok{ box-shadow:inset 0 0 0 1.5px var(--good); background:#f0fbf6 }
.ready.ok h3{ display:flex; align-items:center; gap:.5rem; color:#08754b }
.btn[disabled]{ opacity:.6; pointer-events:none }

/* ---------- animated stills ---------- */
.kb{ animation:kb 22s ease-in-out infinite alternate; transform-origin:50% 60% }
@keyframes kb{ from{ transform:scale(1.02) } to{ transform:scale(1.16) translate(-1.5%,-1%) } }
.ind-media .kb{ width:100%; height:100%; object-fit:cover }

/* ---------- camera ecosystem ---------- */
.pipe{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(18px,2.4vw,34px) }
.pipe li{ position:relative; display:flex; flex-direction:column; gap:.5rem; padding:1.2rem 1.1rem; border-radius:var(--r-md); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) }
.pipe b{ font:500 .98rem/1.2 var(--f-display); letter-spacing:-.02em; color:#fff }
.pipe small{ font-size:.84rem; line-height:1.4; color:var(--on-night-2) }
.pipe-ico{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(140deg,var(--royal),var(--royal-deep)); color:#fff }
.pipe-ico .ico{ width:22px; height:22px }
.pipe li:last-child .pipe-ico{ background:linear-gradient(140deg,#c98708,#f0bd47); color:#231700 }
.pipe li:not(:last-child)::before{ content:""; position:absolute; inset-inline-start:100%; top:42px; width:clamp(18px,2.4vw,34px); height:2px; background:linear-gradient(90deg,rgba(61,184,255,.15),rgba(61,184,255,.6)) }
.pipe li:not(:last-child)::after{ content:""; position:absolute; inset-inline-start:100%; top:38px; width:10px; height:10px; border-radius:50%; background:var(--sky); box-shadow:0 0 12px 2px rgba(61,184,255,.8); animation:pipe-dot 1.8s linear infinite; animation-delay:calc(var(--i)*.36s) }
@keyframes pipe-dot{ from{ transform:translateX(-6px); opacity:0 } 20%{ opacity:1 } 80%{ opacity:1 } to{ transform:translateX(clamp(12px,2.4vw,28px)); opacity:0 } }
.cam{ border-radius:var(--r-lg); background:#070d2b; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); padding:clamp(12px,1.8vw,22px); display:flex; flex-direction:column; gap:clamp(12px,1.6vw,18px) }
.cam-tabs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.cam-tabs button{ border:0; cursor:pointer; text-align:start; padding:.85rem 1rem; border-radius:14px; background:rgba(255,255,255,.05); color:var(--on-night); font:600 .95rem/1.2 var(--f-body); display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; position:relative; overflow:hidden; transition:background .3s, box-shadow .3s }
.cam-tabs button span{ font:400 .78rem/1.2 var(--f-body); color:var(--on-night-2); flex-basis:100%; padding-inline-start:1.85rem; margin-top:-.2rem }
.cam-tabs button[aria-pressed="true"]{ background:var(--royal); box-shadow:0 14px 30px -16px rgba(26,72,216,.9) }
.cam-tabs button[aria-pressed="true"] span{ color:#dbe6ff }
.cam-tabs button[aria-pressed="true"]::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--lamp-soft); transform-origin:0 50%; animation:cam-bar var(--dur,14s) linear both }
.cam.manual .cam-tabs button[aria-pressed="true"]::after{ animation:none; transform:scaleX(0) }
@keyframes cam-bar{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.cam-main{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:clamp(12px,1.6vw,18px) }
.cam-screen{ position:relative; border-radius:var(--r-md); overflow:hidden; background:#03061a; aspect-ratio:16/10; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
.cam-screen canvas{ position:absolute; inset:0; width:100%; height:100% }
.cam-screen::after{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px); mix-blend-mode:overlay }
.cam-solo{ box-shadow:var(--shadow); border-radius:var(--r-lg) }
.cam-hud{ position:absolute; z-index:2; left:12px; right:12px; top:10px; display:flex; align-items:center; gap:.8rem; font:500 .66rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.8) }
.cam-hud span:last-child:not(:first-child){ margin-left:auto }
.rec{ display:inline-flex; align-items:center; gap:.4rem; padding:.45em .6em; border-radius:6px; background:rgba(0,0,0,.45) }
.rec i{ width:8px; height:8px; border-radius:50%; background:#ff4a55; animation:pulse2 1.2s infinite }
.cam-kpis{ position:absolute; z-index:2; left:12px; bottom:12px; right:12px; display:flex; flex-wrap:wrap; gap:6px; pointer-events:none }
.cam-kpi{ padding:.5rem .7rem; border-radius:10px; background:rgba(5,10,34,.82); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); color:#fff; display:flex; flex-direction:column; gap:.25rem; min-width:84px }
.cam-kpi small{ font:500 .56rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:#a9b8e4 }
.cam-kpi b{ font:500 1.02rem/1 var(--f-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.cam-kpi.warn{ box-shadow:inset 0 0 0 1.5px #ffb347; background:rgba(60,30,0,.78) }
.cam-kpi.warn b{ color:#ffd08a }
.cam-note{ position:absolute; z-index:2; right:10px; top:38px; font:400 .58rem/1 var(--f-mono); letter-spacing:.08em; color:rgba(255,255,255,.6); text-transform:uppercase }
.cam-side{ border-radius:var(--r-md); background:#0a1236; padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.7rem; min-width:0; color:var(--on-night) }
.cam-side p{ margin:0; font-size:.92rem; color:var(--on-night-2); line-height:1.5 }
.cam-side h4{ margin:.4rem 0 0; font:500 .66rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sky) }
.cam-log{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; min-height:236px; max-height:236px; overflow:hidden }
.cam-log li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.2rem .6rem; align-items:baseline; padding:.55rem .7rem; border-radius:10px; background:rgba(255,255,255,.05); font-size:.82rem; line-height:1.3; animation:log-in .5s var(--ease) both }
.cam-log time{ font:400 .66rem/1 var(--f-mono); color:#8fa0d0 }
.cam-log b{ font-weight:600; color:#fff }
.cam-log small{ grid-column:2; color:var(--on-night-2); font-size:.76rem }
.cam-log li.alert{ box-shadow:inset 0 0 0 1px #ffb347; background:rgba(255,179,71,.1) }
.cam-log li.alert b{ color:#ffd08a }
@keyframes log-in{ from{ transform:translateY(-10px); opacity:0 } }
.nlist.on-night li{ color:var(--on-night) }
.nlist.on-night li:not(:last-child)::after{ background:rgba(255,255,255,.15) }

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .nav-links,.nav .btn{ display:none }
  .lang{ margin-inline-start:auto }
  .nav-burger{ display:flex }
  .bento .c2,.bento .c3,.bento .c4{ grid-column:span 6 }
  .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .foot-brand{ grid-column:1/-1 }
  .phases{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .dash-row{ grid-template-columns:minmax(0,1fr) }
  .pipe{ grid-template-columns:minmax(0,1fr) }
  .pipe li{ display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:.9rem; row-gap:.15rem; align-items:center }
  .pipe li .pipe-ico{ grid-row:span 2 }
  .pipe li:not(:last-child)::before{ inset-inline-start:42px; top:100%; width:2px; height:clamp(18px,2.4vw,34px); background:linear-gradient(180deg,rgba(61,184,255,.15),rgba(61,184,255,.6)) }
  .pipe li:not(:last-child)::after{ inset-inline-start:38px; top:100%; animation-name:pipe-dot-v }
  .cam-main{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:860px){
  body{ font-size:16px }
  .grid-2,.demo,.contact,.ind-panel,.tabs-x,.versus,.road{ grid-template-columns:minmax(0,1fr) }
  .grid-3{ grid-template-columns:minmax(0,1fr) }
  .sticky-col{ position:static }
  .js [data-reveal="left"]{ transform:translate3d(-18px,0,0) } .js [data-reveal="right"]{ transform:translate3d(18px,0,0) }
  .js [data-reveal="left"].in,.js [data-reveal="right"].in{ transform:none }
  .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .tour{ grid-template-columns:minmax(0,1fr); gap:0 }
  .tour-stick{ height:auto; top:0; z-index:3; padding-top:calc(env(safe-area-inset-top,0px) + 86px); padding-bottom:14px; background:linear-gradient(180deg,var(--ice) 88%,transparent) }
  .tour-stick .bot{ --w:min(36vw,17vh,170px) }
  .tour-stick::before{ display:none }
  .tour-steps{ padding-block:8vh 20vh }
  .tour-step{ min-height:0; padding-block:5vh 9vh; justify-content:flex-start }
  .tour-dots{ display:none }
  .float{ display:none }
  .stage{ height:140vh; height:140svh }
  .hs-pin{ position:static; height:auto; padding-block:clamp(60px,10vw,90px) }
  .hs-track{ width:auto; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; transform:none !important; scrollbar-width:none }
  .hs-track::-webkit-scrollbar{ display:none }
  .hs-card{ width:84vw; aspect-ratio:4/4.4; scroll-snap-align:center }
  .hs-end{ width:78vw; scroll-snap-align:center }
  .cols2,.kpis{ grid-template-columns:minmax(0,1fr) }
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .form{ grid-template-columns:minmax(0,1fr) }
  .ticket-body{ grid-template-columns:minmax(0,1fr) }
  .road .card ul{ grid-template-columns:minmax(0,1fr) }
  .orbit-node>div{ width:92px; font-size:.68rem } .orbit-node b{ width:44px; height:44px; border-radius:14px }
  .demo-stage .bot{ --w:min(70vw,290px) }
  .seq{ height:250vh }
  .pills li:not(:last-child)::after{ display:none } .pills{ gap:.4rem }
}
@keyframes pipe-dot-v{ from{ transform:translateY(-6px); opacity:0 } 20%{ opacity:1 } 80%{ opacity:1 } to{ transform:translateY(22px); opacity:0 } }
@media (max-width:520px){
  .consent{ bottom:calc(env(safe-area-inset-bottom,0px) + 88px) }
  .wa-fab{ padding:0; width:58px; height:58px; justify-content:center }
  .wa-fab-txt{ display:none }
  .cam-tabs button{ padding:.7rem .6rem; font-size:.82rem }
  .cam-tabs button span{ display:none }
  .cam-tabs button .ico{ display:none }
  .cam-kpi{ min-width:0; padding:.4rem .5rem }
  .cam-kpi b{ font-size:.85rem }
  .cam-screen{ aspect-ratio:4/3.4 }
  .totop{ right:22px; bottom:calc(env(safe-area-inset-bottom,0px) + 88px) }
  .wide-only{ display:none }
  .foot{ padding-bottom:124px }
  .phases{ grid-template-columns:minmax(0,1fr) }
  .foot-grid{ grid-template-columns:minmax(0,1fr) }
  .steps5 li{ font-size:.52rem; letter-spacing:.04em }
  .versus-nums{ gap:.7rem }
  .flow-step{ flex-basis:100% } .flow-step::after{ display:none }
  .hbars li{ grid-template-columns:minmax(0,6em) minmax(0,1fr) auto }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important }
  .js [data-reveal],.js [data-reveal]>*,.split .w>span{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important }
  .stage,.seq{ height:auto } .stage-pin,.seq-pin{ position:relative }
  .stage-frame{ transform:none !important; border-radius:0 !important } .stage-shade,.stage-cap{ opacity:1 !important } .floats{ display:none }
  .statement .fw{ opacity:1 }
  .orbit-node,.orbit-node>div,.orbit-ring{ animation:none !important }
  .viz-qr i{ animation:none !important; opacity:var(--o,1) }
  .kb,.ribbons,.wa-fab,.wa-fab::before,.wa-fab::after,.wa-fab-ico,.pipe li::after{ animation:none !important }
  .pipe li::after{ opacity:0 }
  .viz-journey::after{ animation:none !important }
}

/* =====================================================================
   Arabic: right-to-left layout and Arabic typefaces
   Most of the layout mirrors by itself (flex, grid and the "inline-start / inline-end" rules above).
   The rules below cover what does not: typefaces, arrows, and effects with a built-in direction.
   ===================================================================== */
:root[lang="ar"]{ --f-display:"Noto Kufi Arabic","Unbounded","Segoe UI",Tahoma,sans-serif; --f-body:"IBM Plex Sans Arabic","Onest","Segoe UI",Tahoma,sans-serif; --f-mono:"JetBrains Mono","IBM Plex Sans Arabic",ui-monospace,Tahoma,monospace }
[lang="ar"] *{ letter-spacing:0 !important }                          /* letter-spacing breaks the joins between Arabic letters */
[lang="ar"] body{ line-height:1.75 }
[lang="ar"] .display{ line-height:1.32; font-weight:600 }
[lang="ar"] .h-xl{ font-size:clamp(2.2rem,6vw,5rem) } [lang="ar"] .phero .h-xl{ font-size:clamp(2rem,4.6vw,3.9rem) }
[lang="ar"] .h-lg{ font-size:clamp(1.8rem,4.2vw,3.3rem) } [lang="ar"] .grid-2 .h-lg{ font-size:clamp(1.65rem,2.9vw,2.5rem) }
[lang="ar"] .h-md{ line-height:1.4 } [lang="ar"] .h-sm{ line-height:1.5; font-weight:600 }
[lang="ar"] .statement{ line-height:1.55; font-weight:600; font-size:clamp(1.4rem,3.3vw,2.8rem) }
[lang="ar"] .eyebrow,[lang="ar"] .tagline,[lang="ar"] .tour-step .k,[lang="ar"] .note,[lang="ar"] .field label,[lang="ar"] .field legend,[lang="ar"] .steps5 li,[lang="ar"] .pills li,[lang="ar"] .listcard h3,[lang="ar"] .kpi small,[lang="ar"] .cam-kpi small,[lang="ar"] .foot h4,[lang="ar"] .ticket-cell small,[lang="ar"] .dash-head,[lang="ar"] .hs-n,[lang="ar"] .seq-meter,[lang="ar"] .float small,[lang="ar"] .cam-side h4{ font-family:var(--f-body); font-size:.86rem; line-height:1.5; font-weight:600 }
[lang="ar"] .float small,[lang="ar"] .cam-kpi small,[lang="ar"] .kpi small,[lang="ar"] .steps5 li{ font-size:.74rem }
[lang="ar"] .split .w{ padding-block:.18em .3em; margin-block:-.18em -.3em }
[lang="ar"] .split .w>span{ transform-origin:100% 100% }
[lang="ar"] .screen{ font-size:calc(var(--w)*.036) } [lang="ar"] .ui-h{ line-height:1.5 } [lang="ar"] .screen-top{ font-family:var(--f-body) }
[dir="rtl"] .ico.arr,[dir="rtl"] .tlink .ico{ transform:scaleX(-1) }
[dir="rtl"] .btn:hover svg.arr,[dir="rtl"] .tlink:hover svg{ transform:scaleX(-1) translateX(4px) }
[dir="rtl"] .progress,[dir="rtl"] .flow-step:not(:last-child)::after,[dir="rtl"] .phase::before,[dir="rtl"] .seq-meter b::after,[dir="rtl"] .cam-tabs button[aria-pressed="true"]::after{ transform-origin:100% 50% }
[dir="rtl"] .hbars i,[dir="rtl"] .vbars i,[dir="rtl"] .shares i{ border-radius:4px 0 0 4px; transform-origin:100% 50% }
[dir="rtl"] .pills li:not(:last-child)::after{ content:"‹" }
[dir="rtl"] .marquee-track{ animation-name:marq-rtl }
@keyframes marq-rtl{ to{ transform:translateX(50%) } }
[dir="rtl"] .pipe li:not(:last-child)::before{ background:linear-gradient(270deg,rgba(61,184,255,.15),rgba(61,184,255,.6)) }
[dir="rtl"] .pipe li:not(:last-child)::after{ animation-name:pipe-dot-rtl }
@keyframes pipe-dot-rtl{ from{ transform:translateX(6px); opacity:0 } 20%{ opacity:1 } 80%{ opacity:1 } to{ transform:translateX(calc(clamp(12px,2.4vw,28px)*-1)); opacity:0 } }
[dir="rtl"] .viz-journey::after{ left:auto; right:8%; --run:calc(10px - 84cqw) }
[dir="rtl"] .wa-msg{ border-radius:14px 4px 14px 14px }
[dir="rtl"] .ui-bubble{ border-radius:1.1em 1.1em 1.1em .3em } [dir="rtl"] .ui-bubble.bot-b{ border-radius:1.1em 1.1em .3em 1.1em }
[dir="rtl"] .btn::before{ display:none }
[dir="rtl"] .copyline code,[dir="rtl"] .ready pre,[dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"]{ direction:ltr; text-align:right }
[dir="rtl"] .faq summary{ text-align:start }
@media (max-width:1020px){ [dir="rtl"] .pipe li:not(:last-child)::before{ background:linear-gradient(180deg,rgba(61,184,255,.15),rgba(61,184,255,.6)) } [dir="rtl"] .pipe li:not(:last-child)::after{ animation-name:pipe-dot-v } }
[dir="rtl"] .wa{ right:auto; left:18px; align-items:flex-start } [dir="rtl"] .wa-card{ transform-origin:0 100% } [dir="rtl"] .wa-badge{ right:auto; left:-3px }
[dir="rtl"] .totop{ right:auto; left:24px }
@media (max-width:640px){ [dir="rtl"] .wa{ left:12px } [dir="rtl"] .totop{ left:18px } }

/* =====================================================================
   LIVE ECOSYSTEM (home): cameras -> robot -> CRM -> the business
   Everything that moves here uses transform and opacity only.
   ===================================================================== */
.eco{ position:relative; border-radius:var(--r-lg); background:radial-gradient(120% 80% at 50% 0%,#14277a 0%,var(--night-2) 40%,var(--night) 82%); color:var(--on-night); padding:clamp(14px,2.2vw,28px); display:flex; flex-direction:column; gap:clamp(14px,1.8vw,22px); box-shadow:var(--shadow); overflow:hidden; overflow:clip; isolation:isolate }
.eco::before{ content:""; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px); background-size:22px 22px; mask-image:linear-gradient(180deg,#000,transparent 70%); -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%) }
.eco-head{ display:flex; align-items:center; gap:.9rem; font:500 .68rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--on-night-2) }
.eco-live{ display:inline-flex; align-items:center; gap:.6em; color:#fff }
.eco-live i{ width:8px; height:8px; border-radius:50%; background:#ff5a67; box-shadow:0 0 0 4px rgba(255,90,103,.2); animation:pulse2 1.6s infinite }
.eco.paused .eco-live i{ animation:none; background:var(--on-night-2); box-shadow:none }
.eco-toggle{ margin-inline-start:auto; border:0; cursor:pointer; padding:.7em 1.1em; border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font:500 .68rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; transition:background .3s }
.eco-toggle:hover{ background:rgba(255,255,255,.2) }
.eco-stage{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) clamp(34px,5vw,72px) minmax(0,1fr) clamp(34px,5vw,72px) minmax(0,1.12fr); align-items:stretch }
.eco-node{ position:relative; border-radius:var(--r-md); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); padding:clamp(12px,1.4vw,18px); display:flex; flex-direction:column; gap:.85rem; min-width:0; transition:box-shadow .5s, background .5s }
.eco-node.on{ background:rgba(61,184,255,.1); box-shadow:inset 0 0 0 1.5px var(--sky), 0 0 60px -14px rgba(61,184,255,.75) }
.eco-node header,.eco-outh{ display:flex; align-items:center; gap:.7rem }
.eco-n{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none; font:500 .8rem/1 var(--f-display); background:linear-gradient(140deg,var(--royal),var(--royal-deep)); color:#fff; box-shadow:0 0 0 3px rgba(61,184,255,.18) }
.eco-node header b,.eco-outh b{ display:block; font:500 1rem/1.2 var(--f-display); letter-spacing:-.02em; color:#fff }
.eco-node header small,.eco-outh small{ display:block; color:var(--on-night-2); font-size:.8rem; line-height:1.3; margin-top:.15rem }
.eco-tags{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem }
.eco-tags li{ font:500 .6rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; padding:.65em .7em; border-radius:8px; background:rgba(255,255,255,.07); color:var(--on-night-2); transition:background .4s, color .4s }
.eco-tags li.on{ background:var(--sky); color:#04122e }
.eco-port{ position:absolute; z-index:2; width:12px; height:12px; border-radius:50%; background:#0c1744; box-shadow:0 0 0 2px var(--sky); top:50%; margin-top:-6px }
.eco-port.in{ inset-inline-start:-6px } .eco-port.out{ inset-inline-end:-6px }
.eco-port.down{ top:auto; bottom:-6px; inset-inline-start:50%; margin:0 0 0 -6px }
.eco-port.top{ top:-6px; inset-inline-start:50%; margin:0 0 0 -6px; box-shadow:0 0 0 2px var(--lamp) }
[dir="rtl"] .eco-port.down,[dir="rtl"] .eco-port.top{ margin:0 -6px 0 0 }
.eco-link{ position:relative; align-self:center; height:2px; background:rgba(61,184,255,.22); overflow:hidden }
.eco-link i{ position:absolute; inset:0 -20px; background:repeating-linear-gradient(90deg,var(--sky) 0 8px,transparent 8px 20px); opacity:.75; animation:eco-flow 1.1s linear infinite }
@keyframes eco-flow{ to{ transform:translateX(20px) } }
@keyframes eco-flow-v{ to{ transform:translateY(20px) } }
[dir="rtl"] .eco-link i{ animation-direction:reverse }
.eco.paused .eco-link i{ animation-play-state:paused }
.eco-pkt{ position:absolute; left:0; top:0; z-index:5; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(61,184,255,.55), 0 0 22px 6px rgba(61,184,255,.9); pointer-events:none; will-change:transform,opacity }
.eco-pkt.gold{ box-shadow:0 0 0 3px rgba(240,189,71,.6), 0 0 22px 6px rgba(240,189,71,.95) }
.eco-pkt.red{ box-shadow:0 0 0 3px rgba(255,120,90,.6), 0 0 22px 6px rgba(255,120,90,.95) }

/* camera viewfinder */
.eco-view{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:#050a22; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
.eco-view svg{ position:absolute; inset:0; width:100%; height:100% }
.eco-view .ev-t{ font:500 6.4px/1 var(--f-mono); letter-spacing:.06em; fill:#cfe0ff }
.eco-view .ev-tt{ fill:#04122e; font-weight:600 }
.ev-therm{ opacity:0; transition:opacity .7s }
.eco-view.thermal .ev-therm{ opacity:1 }
.ev-p{ transform:translate(100px,2px); opacity:0; transition:transform 1.5s var(--ease), opacity .5s }
.ev-p.p1{ transform:translate(100px,44px); opacity:1 }
.ev-p.p2{ transform:translate(100px,90px); opacity:1 }
.ev-p.p3{ transform:translate(64px,120px); opacity:1 }
.ev-tag{ opacity:0; transition:opacity .4s }
.ev-tag rect{ fill:var(--sky) }
.ev-p.tag .ev-tag{ opacity:1 }
.ev-p.vip>rect{ stroke:#f0bd47; fill:rgba(240,189,71,.22) } .ev-p.vip .ev-tag rect{ fill:#f0bd47 }
.ev-spill{ opacity:0; transition:opacity .6s }
.eco-view.spill .ev-spill{ opacity:1 }
.ev-alert{ fill:#ffd08a }
.ev-ring{ transform-box:fill-box; transform-origin:50% 50% }
.eco-view.spill .ev-ring{ animation:ev-ring 1.6s ease-out infinite }
@keyframes ev-ring{ from{ transform:scale(.9); opacity:1 } to{ transform:scale(1.9); opacity:0 } }
.ev-hud{ position:absolute; inset-inline:8px; top:7px; display:flex; align-items:center; justify-content:space-between; gap:.5rem; font:500 .56rem/1 var(--f-mono); letter-spacing:.1em; color:#dfe9ff }
.ev-hud .rec{ display:inline-flex; align-items:center; gap:.4em }
.ev-hud .rec i{ width:6px; height:6px; border-radius:50%; background:#ff5a67; animation:pulse2 1.2s infinite }
.ev-hud b{ font-weight:500; white-space:nowrap }
.eco-view::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 46%,rgba(61,184,255,.22) 50%,transparent 54%); animation:sweep 4.2s linear infinite; pointer-events:none }
.eco.paused .eco-view::after{ animation-play-state:paused }

/* robot */
.eco-botwrap{ display:grid; place-items:center; flex:1; padding-block:.2rem }
.eco .screen-top i{ animation:none }
.eco.idle *,.eco.idle *::before,.eco.idle *::after{ animation-play-state:paused !important }   /* nothing runs while the panel is off screen */
.eco .bot{ --w:clamp(150px,15.5vw,196px) }
.eco .bot::after{ background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent) }
.eco .screen{ font-size:calc(var(--w)*.06); aspect-ratio:3/3.5 }
.eco-chat{ position:absolute; inset:0; padding:.2em .75em .8em; display:flex; flex-direction:column; justify-content:flex-end; gap:.5em; overflow:hidden }
.eco-chat .ui-bubble{ animation:eco-pop .45s var(--ease) both; font-size:.9em }
@keyframes eco-pop{ from{ transform:translateY(8px) scale(.94); opacity:0 } }

/* CRM */
.eco-kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.1) }
.eco-kpis div{ background:#0a1236; padding:.7rem .7rem .75rem; display:flex; flex-direction:column; gap:.4rem; min-width:0 }
.eco-kpis small{ font:500 .56rem/1.25 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--on-night-2) }
.eco-kpis b{ font:500 clamp(.95rem,1.5vw,1.25rem)/1 var(--f-display); letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap; transition:color .4s }
.eco-kpis b.up{ color:var(--lamp-soft) }
.eco-read{ margin-top:auto } .eco-read+.eco-tags{ margin-top:0 }
.eco-read b{ font-size:clamp(.9rem,1.25vw,1.08rem) }
.eco-feed{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; flex:1; min-height:178px; max-height:178px; overflow:hidden }
.eco-feed li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.1rem .6rem; align-items:center; padding:.5rem .65rem; border-radius:10px; background:rgba(255,255,255,.06); font-size:.8rem; line-height:1.3; animation:log-in .5s var(--ease) both }
.eco-feed li::before{ content:""; grid-row:span 2; width:8px; height:8px; border-radius:50%; background:var(--sky); box-shadow:0 0 0 3px rgba(61,184,255,.2) }

.eco-feed li.k-bot::before{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.2) }
.eco-feed li.alert{ background:rgba(255,179,71,.12); box-shadow:inset 0 0 0 1px #ffb347 }
.eco-feed li.alert::before{ background:#ffb347; box-shadow:0 0 0 3px rgba(255,179,71,.25) }
.eco-feed b{ font-weight:600; color:#fff }
.eco-feed small{ grid-column:2; color:var(--on-night-2); font-size:.74rem }

/* what the business gets back */
.eco-out{ display:grid; grid-template-columns:minmax(0,.9fr) repeat(3,minmax(0,1fr)); gap:clamp(10px,1.4vw,16px); align-items:stretch }
.eco-act{ position:relative; display:flex; gap:.7rem; align-items:flex-start; padding:.9rem 1rem; border-radius:var(--r-sm); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); transition:box-shadow .5s, background .5s }
.eco-act>.ico{ flex:none; width:34px; height:34px; padding:7px; border-radius:10px; background:rgba(240,189,71,.16); color:var(--lamp-soft) }
.eco-act b{ display:block; font:500 .92rem/1.2 var(--f-display); letter-spacing:-.02em; color:#fff }
.eco-act small{ display:block; margin-top:.2rem; color:var(--on-night-2); font-size:.8rem; line-height:1.35 }
.eco-act.on{ background:rgba(240,189,71,.12); box-shadow:inset 0 0 0 1.5px var(--lamp), 0 0 50px -16px rgba(240,189,71,.8) }

/* the explanation */
.eco-cap{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(12px,2vw,24px); align-items:center; padding:clamp(14px,1.8vw,20px) clamp(14px,2vw,24px); border-radius:var(--r-md); background:#fff; color:var(--ink); min-height:118px }
.eco-capn{ font:500 clamp(2rem,4.4vw,3.4rem)/1 var(--f-display); letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px var(--royal) }
.eco-cap p{ margin:.35rem 0 0; color:var(--ink-2); max-width:78ch; font-size:.98rem }
.eco-cap.swap>div{ animation:eco-swap .5s var(--ease) both }
@keyframes eco-swap{ from{ transform:translateY(10px); opacity:0 } }
.eco-steps{ display:flex; gap:6px }
.eco-steps button{ position:relative; flex:1; min-width:0; border:0; cursor:pointer; padding:.95em .3em; border-radius:10px; background:rgba(255,255,255,.08); color:var(--on-night-2); font:500 .62rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; transition:background .3s, color .3s }
.eco-steps button:hover{ background:rgba(255,255,255,.16); color:#fff }
.eco-steps button.done{ color:#fff }
.eco-steps button.on{ background:var(--royal); color:#fff }
.eco-steps button.on::after{ content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--lamp-soft); transform-origin:0 50%; animation:eco-prog var(--dur,5s) linear both }
[dir="rtl"] .eco-steps button.on::after{ transform-origin:100% 50% }
.eco.paused .eco-steps button.on::after{ animation-play-state:paused }
@keyframes eco-prog{ from{ transform:scaleX(0) } }

/* =====================================================================
   FOUNDER (home section and founder page)
   ===================================================================== */
.founder{ align-items:center }
.fport{ position:relative; margin:0; justify-self:center; width:min(430px,86%); aspect-ratio:985/1271 }
.fring{ position:absolute; inset:-5px; border-radius:37px; overflow:hidden }
.fring::before{ content:""; position:absolute; left:50%; top:50%; width:176%; aspect-ratio:1; margin:-88% 0 0 -88%; background:conic-gradient(#f0bd47,#fff3c4 10%,#c98708 22%,rgba(201,135,8,0) 38%,rgba(26,72,216,0) 55%,#1a48d8 70%,#3db8ff 86%,#f0bd47); animation:fspin 10s linear infinite; will-change:transform }
@keyframes fspin{ to{ transform:rotate(1turn) } }
.fimg{ position:absolute; inset:0; border-radius:32px; overflow:hidden; background:var(--night); box-shadow:0 44px 80px -40px rgba(10,18,56,.75); isolation:isolate }
.fimg img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; animation:fkb 26s ease-in-out infinite alternate; transform-origin:50% 28% }
@keyframes fkb{ from{ transform:scale(1.01) } to{ transform:scale(1.09) } }
.fimg::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.4) 50%,transparent 64%); transform:translateX(-130%) }
.fport.in .fimg::after{ transform:translateX(130%); transition:transform 1.7s var(--ease) .55s }
.fbadge{ position:absolute; z-index:2; display:inline-flex; align-items:center; gap:.55em; padding:.65em .95em; border-radius:14px; background:#fff; color:var(--ink); font:600 .8rem/1.2 var(--f-body); box-shadow:0 18px 40px -18px rgba(10,18,56,.55), 0 0 0 1px rgba(10,18,56,.06); white-space:nowrap; animation:fbob 7s ease-in-out infinite }
.fbadge .ico{ width:18px; height:18px; color:var(--lamp) }
.fb1{ top:9%; inset-inline-start:-11% }
.fb2{ bottom:19%; inset-inline-end:-13%; animation-delay:-2.3s }
.fb2 .ico{ color:var(--royal) }
.fb3{ bottom:-3.5%; inset-inline-start:7%; animation-delay:-4.6s; background:var(--ink); color:#fff }
@keyframes fbob{ 50%{ transform:translateY(-9px) } }
.fstats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,26px); padding-block:.3rem }
.fstats div{ display:flex; flex-direction:column; gap:.45rem; padding-inline-start:clamp(10px,1.2vw,16px); border-inline-start:2px solid var(--mist) }
.fstats b{ font:500 clamp(1.8rem,3.4vw,2.9rem)/1 var(--f-display); letter-spacing:-.04em; color:var(--royal); font-variant-numeric:tabular-nums }
.fstats small{ color:var(--ink-2); font-size:.86rem; line-height:1.35 }

.fhero{ padding-bottom:clamp(56px,7vw,100px) }
.fhero .founder{ align-items:center }
.fhero .h-xl{ font-size:clamp(2.1rem,4.7vw,4rem) }
.fchips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem }
.fchips li{ display:inline-flex; align-items:center; gap:.5em; padding:.55em .95em; border-radius:999px; background:var(--white); box-shadow:inset 0 0 0 1px var(--line); font:500 .86rem/1.2 var(--f-body); color:var(--ink) }
.fchips .ico{ width:16px; height:16px; color:var(--royal) }
.glance{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,2vw,28px) }
.glance div{ display:flex; flex-direction:column; gap:.6rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.16) }
.glance b{ font:500 clamp(2rem,4vw,3.4rem)/1 var(--f-display); letter-spacing:-.04em; font-variant-numeric:tabular-nums; background:linear-gradient(100deg,#f7d580,#dd9a12); -webkit-background-clip:text; background-clip:text; color:transparent }
.glance small{ color:var(--on-night-2); font-size:.88rem; line-height:1.4 }
.facts{ margin:0; border-radius:var(--r-lg); background:var(--ice); box-shadow:inset 0 0 0 1px var(--line); padding:clamp(8px,1.2vw,14px) clamp(18px,2.4vw,30px); position:sticky; top:110px }
.facts div{ display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:1rem; padding-block:.95rem; border-bottom:1px solid var(--line) }
.facts div:last-child{ border-bottom:0 }
.facts dt{ font:500 .68rem/1.5 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--royal) }
.facts dd{ margin:0; font-weight:500; color:var(--ink) }
.facts-plain{ position:static; background:transparent; box-shadow:none; padding:0 }
.creed article{ display:flex; flex-direction:column; gap:.8rem; padding:clamp(20px,2.4vw,32px); border-radius:var(--r-lg); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
.creed span{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(140deg,#c98708,#f0bd47); color:#231700 }
.creed span .ico{ width:22px; height:22px }
.creed h3{ color:#fff }
.creed p{ margin:0; color:var(--on-night-2) }
.depts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px) }
.dept{ position:relative; display:flex; flex-direction:column; gap:.75rem; padding:clamp(18px,2.2vw,28px); border-radius:var(--r-lg); background:var(--white); box-shadow:inset 0 0 0 1px var(--line); transition:transform .5s var(--ease), box-shadow .5s }
.dept:hover{ transform:translateY(-5px); box-shadow:inset 0 0 0 1px rgba(26,72,216,.35), var(--shadow) }
.dept-ico{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--mist); color:var(--royal) }
.dept-ico .ico{ width:22px; height:22px }
.dept p{ margin:0; color:var(--ink-2); font-size:.94rem }
.dept ul{ list-style:none; margin:auto 0 0; padding:.3rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem }
.dept li{ padding:.45em .8em; border-radius:999px; background:var(--ice); box-shadow:inset 0 0 0 1px var(--line); font:500 .78rem/1.25 var(--f-body); color:var(--ink) }
.dept-more{ background:linear-gradient(150deg,var(--night-2),var(--night)); box-shadow:none; color:var(--on-night) }
.dept-more .dept-ico{ background:rgba(255,255,255,.1); color:var(--lamp-soft) }
.dept-more li{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); color:#fff }
.dept-more ul{ margin-top:0 }
.listcard li>span b{ font-weight:600 }
.listcard.dk{ background:var(--night-2) } .listcard.dk ul{ color:var(--on-night) }
.pillars{ display:flex; flex-direction:column; gap:.7rem }
.pillars article{ display:flex; gap:.9rem; align-items:flex-start; padding:1.1rem 1.2rem; border-radius:var(--r-md); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
.pillars h3{ color:#fff } .pillars p{ margin:.3rem 0 0; color:var(--on-night-2); font-size:.94rem }
.sectors{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem }
.sectors li{ padding:.5em .85em; border-radius:999px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); font:500 .78rem/1.25 var(--f-body); color:var(--on-night) }
.night .tbc b{ font:500 1.05rem/1.35 var(--f-display); letter-spacing:-.02em }
.cert-row{ align-items:center }
.cert{ position:relative; display:block; border-radius:var(--r-md); overflow:hidden; background:#fff; padding:clamp(8px,1vw,14px); box-shadow:var(--shadow), inset 0 0 0 1px var(--line); transform-style:preserve-3d; transition:transform .5s var(--ease) }
.cert img{ width:100%; height:auto; border-radius:8px }
.cert::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%); transform:translateX(-130%); transition:transform 1.1s var(--ease); pointer-events:none }
.cert:hover::after,.cert.in::after{ transform:translateX(130%) }
.cert-zoom{ position:absolute; inset-inline-end:18px; bottom:18px; display:inline-flex; align-items:center; gap:.45em; padding:.6em .95em; border-radius:999px; background:var(--ink); color:#fff; font:600 .8rem/1 var(--f-body); box-shadow:0 12px 26px -12px rgba(10,18,56,.8) }
.cert-zoom .ico{ width:15px; height:15px }
.honours .card{ gap:.7rem }
.tl{ list-style:none; margin:0; padding:0; position:relative; display:flex; flex-direction:column; gap:clamp(18px,2.4vw,28px) }
.tl::before{ content:""; position:absolute; inset-block:8px; inset-inline-start:7px; width:2px; background:linear-gradient(180deg,var(--royal),var(--sky) 60%,var(--mist)) }
.tl li{ position:relative; padding-inline-start:38px; display:flex; flex-direction:column; align-items:flex-start; gap:.45rem }
.tl li::before{ content:""; position:absolute; inset-inline-start:0; top:4px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px var(--royal), 0 0 0 8px rgba(26,72,216,.12) }
.tl time{ font:500 .7rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2) }
.tl-k{ padding:.4em .75em; border-radius:999px; background:var(--mist); font:600 .7rem/1 var(--f-body); color:var(--royal-deep) }
.tl-gold{ background:linear-gradient(120deg,#c98708,#f0bd47); color:#231700 }
.tl p{ margin:0; color:var(--ink-2); max-width:58ch }
.tl-head{ position:sticky; top:120px }
#offices .card p a{ color:var(--ink); text-decoration:none; font-weight:500 } #offices .card p a:hover{ color:var(--royal) }
#offices .card .tlink{ align-self:flex-start }

@media (max-width:1020px){
  .eco-stage{ grid-template-columns:minmax(0,1fr); }
  .eco-link{ width:2px; height:34px; justify-self:center }
  .eco-link i{ inset:-20px 0; background:repeating-linear-gradient(180deg,var(--sky) 0 8px,transparent 8px 20px); animation-name:eco-flow-v }
  [dir="rtl"] .eco-link i{ animation-direction:normal }
  .eco-port{ top:auto; margin:0 0 0 -6px; inset-inline-start:50% }
  [dir="rtl"] .eco-port{ margin:0 -6px 0 0 }
  .eco-port.in{ top:-6px; inset-inline-start:50% } .eco-port.out{ bottom:-6px; inset-inline-end:auto; inset-inline-start:50% }
  .eco-node[data-node="cam"]{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center }
  .eco-node[data-node="cam"] header,.eco-node[data-node="cam"] .eco-tags{ grid-column:1/-1 }
  .eco-node[data-node="cam"] .eco-tags{ margin:0 }
  .eco-read{ grid-template-columns:minmax(0,1fr); margin:0 } .eco-read div{ flex-direction:row; align-items:baseline; justify-content:space-between; padding:.6rem .7rem }
  .eco-node[data-node="bot"]{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center }
  .eco-node[data-node="bot"] header{ grid-column:1/-1 }
  .eco-node[data-node="bot"] .eco-tags{ margin:0 }
  .eco .bot{ --w:clamp(140px,34vw,190px) }
  .eco-feed{ min-height:124px; max-height:124px }
  .eco-out{ grid-template-columns:repeat(3,minmax(0,1fr)) } .eco-outh{ grid-column:1/-1 }
  .eco-cap{ min-height:150px; order:-1; position:sticky; top:84px; z-index:6; box-shadow:0 18px 40px -18px rgba(0,0,0,.7) }
  .eco-head{ order:-2 }
  .glance{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .depts{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .facts,.tl-head{ position:static }
  .fb1{ inset-inline-start:-5% } .fb2{ inset-inline-end:-6% }
  .fhero .fport{ margin-top:clamp(24px,5vw,48px) }
}
@media (max-width:860px){
  .eco-steps{ flex-wrap:wrap } .eco-steps button{ flex:1 1 22% }
  .eco-port.top{ display:none }
  .eco-cap{ min-height:0; align-items:start }
  .eco-cap p{ font-size:.9rem; line-height:1.45 }
  .eco-act small{ display:none } .eco-out{ grid-template-columns:repeat(3,minmax(0,1fr)) } .eco-act{ flex-direction:column; align-items:flex-start; gap:.5rem; padding:.75rem } .eco-act b{ font-size:.8rem }
  .fport{ width:min(380px,78%) }
}
@media (max-width:520px){
  .eco-node[data-node="cam"],.eco-node[data-node="bot"]{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) }
  .eco-kpis small{ font-size:.5rem }
  .eco-steps button{ flex:1 1 30% }
  .eco-cap{ grid-template-columns:auto minmax(0,1fr); gap:.8rem; min-height:158px; padding:12px 14px; top:78px }
  .eco-capn{ font-size:1.5rem; align-self:start; margin-top:.15rem }
  .eco-cap h3{ font-size:1rem } .eco-cap p{ font-size:.86rem; margin-top:.25rem }
  .eco .screen{ font-size:calc(var(--w)*.07) }
  .eco-act b{ font-size:.74rem } .eco-act{ padding:.65rem }
  .glance{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .depts{ grid-template-columns:minmax(0,1fr) }
  .fstats{ grid-template-columns:minmax(0,1fr); gap:.9rem } .fstats div{ flex-direction:row; align-items:baseline; gap:.8rem } .fstats b{ min-width:2.6em }
  .fbadge{ font-size:.72rem; padding:.55em .8em }
  .fb1{ inset-inline-start:-8% } .fb2{ inset-inline-end:-10% }
  .facts div{ grid-template-columns:minmax(0,1fr); gap:.25rem }
}
@media (prefers-reduced-motion:reduce){
  .eco-link i,.eco-view::after,.ev-ring,.eco-live i,.fring::before,.fimg img,.fbadge,.eco-steps button.on::after,.eco-chat .ui-bubble,.eco-feed li{ animation:none !important }
  .ev-p,.fimg::after,.cert::after{ transition:none !important }
}
[lang="ar"] .eco-head,[lang="ar"] .eco-toggle,[lang="ar"] .eco-tags li,[lang="ar"] .eco-kpis small,[lang="ar"] .eco-steps button,[lang="ar"] .facts dt,[lang="ar"] .tl time{ font-family:var(--f-body); font-size:.76rem; text-transform:none }
[lang="ar"] .eco-kpis small{ font-size:.66rem } [lang="ar"] .eco-tags li{ font-size:.7rem }
[lang="ar"] .eco-node header b,[lang="ar"] .eco-outh b,[lang="ar"] .eco-act b{ line-height:1.5 }
[lang="ar"] .fhero .h-xl{ font-size:clamp(1.9rem,4vw,3.4rem) }
[dir="rtl"] .fimg::after,[dir="rtl"] .cert::after{ display:none }
[dir="rtl"] .fname{ text-align:right; font-family:"Unbounded","Noto Kufi Arabic",sans-serif } [dir="rtl"] .fname .w>span{ transform-origin:0 100% }

/* Release fixes: resilient six-language menus and contained illustrations. */
.lang:not([open]) > .lang-menu{display:none}
.lang summary::marker{content:""}
.lang summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-inline-start:3px;margin-top:-3px;transition:transform .2s}
.lang[open] summary::after{transform:rotate(225deg);margin-top:3px}
.lang-menu{min-width:190px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 110px);overflow-y:auto;z-index:101}
.lang-menu a{min-height:42px;white-space:nowrap}
.lang-menu a:focus-visible{outline:2px solid var(--royal);outline-offset:-2px;background:var(--ice)}
.menu{overflow-y:auto;overscroll-behavior:contain}
.menu-lang{padding-bottom:1rem}
.eco,.eco-stage,.eco-view{min-width:0;max-width:100%}
.eco-view{width:100%;min-height:0;isolation:isolate}
.eco-view>svg{display:block;width:100%;height:100%;max-width:100%;overflow:hidden}
.eco-head{flex-wrap:wrap;line-height:1.4}
.eco-kpis small,.eco-act b,.eco-tags li{overflow-wrap:anywhere}
.eco-steps button{white-space:normal;line-height:1.35;min-height:42px}
.eco-cap{overflow-wrap:break-word}
:root[lang="zh"]{--f-body:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--f-display:var(--f-body);--f-mono:var(--f-body)}
[lang="zh"] .display,[lang="zh"] .statement{letter-spacing:0;line-height:1.4}
[lang="zh"] .eyebrow,[lang="zh"] .eco-tags li,[lang="zh"] .eco-steps button{letter-spacing:.03em}
[lang="ru"] .nav-links{gap:clamp(8px,1vw,16px)}
[lang="ru"] .nav-links a{font-size:.78rem}
@media (max-width:520px){
  .eco-node[data-node="cam"],.eco-node[data-node="bot"]{grid-template-columns:minmax(0,1fr)}
  .eco-read{grid-template-columns:repeat(3,minmax(0,1fr))}
  .eco-read div{flex-direction:column;align-items:flex-start;gap:.35rem}
  .eco-kpis small{font-size:.62rem;line-height:1.45}
  .eco-cap{position:relative;top:auto;min-height:0}
  .eco-out{grid-template-columns:minmax(0,1fr)}
  .eco-act{flex-direction:row;align-items:center}
  .eco-act small{display:block}
  .eco-act b{font-size:.85rem}
  .eco-toggle{margin-inline-start:auto}
  .menu .menu-lang a{font-size:.88rem;padding:.7em .9em}
}

@media (max-width:520px){.eco-steps{order:-1}}
@media (max-height:720px){.menu{justify-content:flex-start}}

#lang-demo .seg{flex-wrap:wrap;border-radius:16px}
#lang-demo .seg button{white-space:nowrap}

@media (prefers-reduced-motion:reduce){.eco-cap.swap>div{animation:none}}

/* Self-hosted CJK glyphs cover all Chinese copy and the native language label. */
@font-face{font-family:"Aladino Chinese";src:url("fonts/aladino-chinese.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
:root[lang="zh"]{--f-body:"Aladino Chinese","PingFang SC","Microsoft YaHei",sans-serif;--f-display:var(--f-body);--f-mono:var(--f-body)}
.lang-menu a[lang="zh"],.menu-lang a[lang="zh"],.foot-lang a[lang="zh"],#lang-demo [lang="zh"]{font-family:"Aladino Chinese","PingFang SC","Microsoft YaHei",sans-serif}

@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}