:root{--paper:#F1F7F9;--ink:#0A2433;--ink2:#143B50;--teal:#0F8CA3;--mint:#BFE9E4;--line:rgba(10,36,51,.14);--mut:#4B6676;
--d:"Bricolage Grotesque",system-ui,sans-serif;--b:"Instrument Sans",system-ui,sans-serif;--pad:clamp(20px,5vw,72px);--gut:max(var(--pad),calc((100vw - 1440px)/2))}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--b);overflow-x:clip;-webkit-font-smoothing:antialiased}
[dir=rtl],[lang=ar]{font-family:"IBM Plex Sans Arabic",var(--b)}
a{color:inherit;text-decoration:none}
section{padding:clamp(72px,10vw,150px) var(--gut);position:relative}
h1,h2,h3{font-family:var(--d);font-weight:600;letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
h2{font-size:clamp(34px,4.8vw,76px);max-width:14em}
p{max-width:56ch}
.eyebrow{font-size:14px;color:var(--teal);font-weight:500;margin-bottom:28px}
.eyebrow.light{color:var(--mint)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}.w>span{display:inline-block}

/* buttons */
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 28px;border-radius:999px;background:var(--ink);color:#fff;font-weight:500;position:relative;overflow:hidden;transition:transform .3s,background .3s}
.btn:hover{transform:translateY(-2px);background:var(--teal)}
.btn-sm{min-height:40px;padding:0 20px;font-size:15px}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink)}.btn-light:hover{background:var(--mint);color:var(--ink)}
.btn-ghost.light{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);background:transparent}
.btn-ghost.light:hover{background:#fff;color:var(--ink)}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:32px;padding:22px var(--gut);transition:.4s}
.nav.compact{padding-block:10px;background:rgba(241,247,249,.96);border-bottom:1px solid var(--line)}
.brand{font-family:var(--d);font-size:18px;margin-inline-end:auto}.brand span{color:var(--teal);margin-inline-start:6px}
.nav-links{display:flex;gap:32px;font-size:15px}
.nav-links a{position:relative}.nav-links a:after{content:"";position:absolute;inset:auto 0 -4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:.3s}
.nav-links a:hover:after{transform:scaleX(1)}
.burger{display:none;width:44px;height:44px;background:none;border:0;position:relative}
.burger i{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);transition:.3s}.burger i:first-child{top:18px}.burger i:last-child{top:25px}

/* hero */
.hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center;padding-top:clamp(110px,15vh,150px);padding-bottom:clamp(48px,8vh,96px);overflow:hidden}
.hero-lines{position:absolute;inset:0;width:100%;height:100%;color:var(--teal);opacity:.35;pointer-events:none}
.hero-copy,.hero-ui{position:relative}
h1{font-size:clamp(40px,5.5vw,90px);max-width:10.5em}
h1 em{font-style:normal;color:var(--teal)}
.lede{font-size:clamp(17px,1.4vw,20px);color:var(--mut);margin-top:32px}
.hero-ui{height:clamp(520px,74vh,700px)}
.hero-ui:after{content:"";position:absolute;inset:18px -16px -18px 14%;border:1px solid var(--teal);opacity:.45;clip-path:polygon(0 0,100% 0,100% 100%,18% 100%,0 82%)}
.hero-photo{position:absolute;inset:0 0 0 14%;z-index:1;background:linear-gradient(160deg,var(--mint),#DCEFF3);overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,18% 100%,0 82%)}
.hero-photo img{position:absolute;inset:-4% 0 0;width:100%;height:104%;object-fit:cover;object-position:50% 25%}
.tutor{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 40px 80px -30px rgba(10,36,51,.35);padding:20px;position:relative;z-index:2}
.hero-ui .tutor{position:absolute;z-index:3;left:0;bottom:7%;width:min(80%,440px)}
.tutor-bar{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;padding-bottom:16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tutor-bar em{font-style:normal;color:var(--mut)}.meta{margin-inline-start:auto;color:var(--mut);font-size:13px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--teal);position:relative;flex:none}.dot.live:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--teal);animation:ping 2s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.5}to{transform:scale(3);opacity:0}}
.msg{margin-top:14px;padding:14px 16px;border-radius:4px;font-size:16px;line-height:1.5}
.msg small{display:block;font-size:12px;color:var(--mut);margin-bottom:4px}
.msg.q{background:var(--ink);color:#fff;margin-inline-start:18%}.msg.q small{color:var(--mint)}
.msg.a{background:var(--paper);border-inline-start:3px solid var(--teal)}
.caret{display:inline-block;width:2px;height:1em;background:var(--teal);vertical-align:-2px;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.tutor-foot{margin-top:14px;font-size:13px;color:var(--teal);font-weight:500}
.chips{list-style:none;padding:0;position:absolute;z-index:3;top:7%;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.chips li{background:var(--ink);color:#fff;font-size:13px;padding:7px 14px 7px 10px;border-radius:999px;width:max-content;animation:bob 5s ease-in-out infinite;animation-delay:calc(var(--i)*-1.2s)}
.chips b{color:var(--mint);margin-inline-end:4px}
@keyframes bob{50%{transform:translateY(-6px)}}

/* rail */
.rail{padding:0;background:var(--ink);color:var(--mint);overflow:hidden;border-block:1px solid var(--ink2)}
.rail-track{display:flex;width:max-content;animation:marq 40s linear infinite}
.rail span{font:500 15px var(--d);padding:22px 36px;white-space:nowrap;border-inline-end:1px solid var(--ink2)}
@keyframes marq{to{transform:translateX(-50%)}}

/* idea */
.idea{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:center}
.idea h2{max-width:none;font-size:clamp(36px,5.2vw,84px)}
.idea-r p{color:var(--mut);font-size:19px}
.stack{list-style:none;padding:0;margin-top:48px;border-inline-start:1px solid var(--ink);margin-inline-start:12px}
.stack li{padding:16px 0 16px 32px;position:relative;font:500 20px var(--d);border-bottom:1px solid var(--line)}
.stack li:before{content:"";position:absolute;inset-inline-start:-5px;top:50%;width:9px;height:9px;background:var(--paper);border:1px solid var(--ink);border-radius:50%}
.stack li:not(:last-child):after{content:"↓";position:absolute;inset-inline-end:0;color:var(--teal)}
.stack .core{color:var(--teal);font-size:28px}.stack .core:before{background:var(--teal);border-color:var(--teal)}
[dir=rtl] .stack li{padding:16px 32px 16px 0}

/* governance */
.gov{background:var(--ink);color:#fff;overflow:hidden;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,90px);align-items:center}
.gov h2{font-size:clamp(34px,4.2vw,68px)}
.gov-sub{color:#9FB9C6;margin-top:24px}
.gov-list{list-style:none;padding:0;margin-top:40px;border-top:1px solid rgba(255,255,255,.18)}
.gov-list li{padding:13px 0 13px 24px;border-bottom:1px solid rgba(255,255,255,.18);font:500 18px var(--d);position:relative}
.gov-list li:before{content:"";position:absolute;inset-inline-start:0;top:50%;width:7px;height:7px;margin-top:-3px;background:var(--teal);border-radius:50%}
.gov-stage{width:100%}
.gov-svg{width:100%;height:auto;color:var(--teal);overflow:visible;display:block}
.gov-svg .links path{stroke-dasharray:6 6}
.core-node circle{fill:var(--teal);stroke:var(--mint);stroke-width:1}
.core-node text{fill:#fff;font:600 20px var(--d)}
.node circle{fill:var(--ink);stroke:var(--mint);stroke-width:1;transition:fill .3s}
.node text{fill:#fff;font:500 14px var(--b)}
.node:hover circle{fill:var(--teal)}

/* how */
.how{background:var(--ink2);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--pad);align-items:start;padding-block:0}
.how-pin{position:sticky;top:0;align-self:start;height:100svh;display:flex;flex-direction:column;justify-content:center}
.how-prog{display:flex;gap:8px;margin-top:28px;max-width:420px}.how-prog i{flex:1;height:2px;background:rgba(255,255,255,.2);transition:background .4s}.how-prog i.on{background:var(--mint)}
.big-num{font:700 clamp(120px,22vw,340px)/.85 var(--d);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--mint)}
.how-viz{position:relative;height:150px;margin-top:32px;max-width:420px}
.v{position:absolute;inset:0;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;opacity:0;transition:.5s;font-size:14px}
.how-viz[data-step="1"] .v1,.how-viz[data-step="2"] .v2,.how-viz[data-step="3"] .v3,.how-viz[data-step="4"] .v4{opacity:1}
.v span,.v b,.v em{border:1px solid var(--mint);padding:8px 14px;font-style:normal;font-weight:500}
.v b{background:var(--teal);border-color:var(--teal)}
.v3{align-items:center;position:absolute}.scan{position:absolute;inset-block:0;width:2px;background:var(--mint);animation:scan 2.4s linear infinite}
@keyframes scan{from{left:0}to{left:100%}}
.v4 i{width:34px;height:var(--h);background:var(--teal)}.v4 small{width:100%;color:var(--mint)}
.how-steps article{min-height:100svh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid rgba(255,255,255,.12)}
.how-steps article:first-child{border-top:0}
.how-steps h3{font-size:clamp(32px,4vw,60px)}
.how-steps p{color:#B5CDD8;margin-top:20px;font-size:19px;max-width:30em}

/* product */
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,100px);align-items:center}
.product-copy p{margin-top:28px;color:var(--mut)}
.product-ui{position:relative;padding:30px}
.mini{box-shadow:0 50px 90px -30px rgba(10,36,51,.4)}
.note{position:absolute;font-size:13px;font-weight:500;background:var(--mint);padding:6px 12px;border-radius:2px;z-index:3}
.note:before{content:"";position:absolute;inset-inline-start:-34px;top:50%;width:30px;height:1px;background:var(--teal)}
.n1{top:0;inset-inline-end:-8px}.n2{top:46%;inset-inline-end:-30px}.n3{bottom:0;inset-inline-end:10px}

/* features */
.feat{padding:0;overflow:hidden;background:#fff}
.feat-track{display:flex;height:100svh;width:max-content;padding-inline-end:var(--gut)}
.feat-intro{flex:none;width:clamp(320px,34vw,520px);padding:0 var(--pad) 0 var(--gut);display:flex;align-items:center}
.feat-intro h2{font-size:clamp(30px,3.6vw,56px)}
.f{flex:none;width:clamp(320px,34vw,520px);padding:clamp(80px,14vh,130px) clamp(24px,3vw,48px) clamp(40px,8vh,80px);border-inline-start:1px solid var(--line);display:flex;flex-direction:column}
.f:last-child{border-inline-end:1px solid var(--line)}
.fl{font-size:14px;color:var(--teal);font-weight:500}
.f h3{font-size:clamp(26px,2.7vw,44px);margin:20px 0}
.f p{color:var(--mut);font-size:16px}
.fv{margin-top:auto;height:clamp(110px,18vh,170px);width:100%;display:flex;gap:10px;align-items:flex-end}
.fv b{flex:1;border:1px solid var(--line);padding:14px;font-weight:500;transition:.4s}.fv b.on{background:var(--ink);color:#fff}
.fv:hover b{background:var(--mint);color:var(--ink)}
.gate i{flex:1;background:var(--line);height:100%;position:relative}.gate i:after{content:"✓";position:absolute;inset:auto auto 8px 10px;color:var(--teal)}
.gate i:nth-child(2){height:70%}.gate i:nth-child(3){height:45%}
.meter{align-items:center;background:linear-gradient(var(--line),var(--line)) center/100% 14px no-repeat}.meter i{height:14px;background:var(--teal);width:100%;transform-origin:left;animation:fill 4s ease-in-out infinite alternate}
@keyframes fill{from{transform:scaleX(.55)}to{transform:scaleX(1)}}
.lines{flex-direction:column;justify-content:center;align-items:stretch}.lines i{height:2px;background:var(--ink);transform-origin:left;animation:sc 3s ease-in-out infinite alternate}.lines i:nth-child(2){animation-delay:.4s}.lines i:nth-child(3){animation-delay:.8s}
@keyframes sc{from{transform:scaleX(.3)}}
.lang b,.aed b{font:700 clamp(64px,8vw,110px)/1 var(--d);border:0;padding:0}.lang b:last-child{color:var(--teal);font-family:"IBM Plex Sans Arabic"}
.aed b{color:var(--teal)}
.feat-bar{position:absolute;inset:auto var(--gut) 28px;height:2px;background:var(--line)}
.feat-bar i{display:block;height:100%;background:var(--teal);transform:scaleX(.08);transform-origin:left}

/* language */
.lang-sec{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,90px);align-items:center}
.toggle{display:inline-flex;margin:36px 0 24px;border:1px solid var(--ink);border-radius:999px;padding:4px}
.toggle button{border:0;background:none;padding:10px 26px;border-radius:999px;font:500 16px var(--b);cursor:pointer;color:var(--ink);min-height:44px}
.toggle .on{background:var(--ink);color:#fff}
.lang-demo{display:flex;gap:28px;background:#fff;border:1px solid var(--line);padding:clamp(20px,3vw,40px);min-height:360px;box-shadow:0 40px 80px -40px rgba(10,36,51,.3)}
.lang-demo aside{width:clamp(56px,9vw,110px);display:flex;flex-direction:column;gap:14px;padding-top:6px;flex:none}.lang-demo aside i{height:10px;background:var(--line)}.lang-demo aside i:first-child{background:var(--teal)}
.ld-main{flex:1;min-width:0}
.lang-note{color:var(--mut)}

/* uae */
.uae{background:var(--mint);overflow:hidden;padding-bottom:260px}
.skyline{position:absolute;inset:auto 0 0;width:100%;height:200px;fill:var(--ink);opacity:.9}
.uae dl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;border-top:1px solid var(--ink)}
.uae dl div{padding:20px 20px 0 0}.uae dt{font-size:14px;color:var(--ink2)}.uae dd{font:600 clamp(20px,2.2vw,30px)/1.2 var(--d);margin-top:6px}

/* privacy */
.big{font:600 clamp(24px,2.8vw,42px)/1.12 var(--d);letter-spacing:-.025em;max-width:16em}
.p-sub{margin-top:24px;color:var(--mut)}
.p-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:end}
.boundary{display:grid;grid-template-columns:1fr 120px 1fr;margin-top:64px;border:1px solid var(--ink)}
.side{padding:36px}.side h4{font:600 28px var(--d)}.side p{margin-top:12px;color:var(--mut)}
.side.c{background:var(--ink);color:#fff}.side.c p{color:var(--mint)}
.wall{background:repeating-linear-gradient(90deg,var(--teal) 0 1px,transparent 1px 8px);display:flex;align-items:center;justify-content:center}
.wall span{writing-mode:vertical-rl;font:600 18px var(--d);background:var(--paper);padding:14px 6px;border:1px solid var(--teal)}

/* statement + cta */
.statement{background:var(--paper);padding-block:clamp(120px,18vw,260px)}
.statement p{font:700 clamp(36px,8vw,140px)/.98 var(--d);letter-spacing:-.045em;max-width:none}
.statement .alt{color:var(--teal);padding-inline-start:12vw}
.cta{background:var(--ink);color:#fff}
.cta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:end}.cta h2{max-width:12em}.cta p{color:#9FB9C6}.cta .ctas{margin-top:32px}
.foot{background:#06161F;color:#9FB9C6;padding:56px var(--gut);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;font-size:15px}
.foot b{display:block;font:600 28px var(--d);color:#fff}.foot nav{display:flex;flex-direction:column;gap:8px}.foot a:hover{color:#fff}

/* performance */
.rail-track,.hero-photo img,.hero-ui .tutor,.product-ui .tutor,.skyline,.statement .alt,.feat-track,.hero-lines{will-change:transform}
.off,.off *{animation-play-state:paused!important}

/* responsive */
@media(max-width:1100px){
 .hero{grid-template-columns:1fr}.hero-ui{height:clamp(480px,70vw,620px)}h1{max-width:12em}
}
@media(max-width:900px){
 .idea,.product,.gov,.lang-sec,.p-head,.cta,.how{grid-template-columns:1fr}
 .hero{padding-top:100px}.hero-ui{height:clamp(500px,120vw,600px)}.hero-photo{inset:0 0 0 22%}.hero-ui:after{inset:14px -10px -14px 22%}
 .hero-ui .tutor{width:min(92%,420px);bottom:4%}.chips{top:4%;right:8px}.chips li{font-size:12px}
 .how-pin{position:sticky;top:0;z-index:2;height:auto;background:var(--ink2);padding:84px 0 20px}
 .big-num{font-size:26vw}.how-viz{height:96px;margin-top:16px}.how-prog{margin-top:14px}
 .how-steps article{min-height:72svh}
 .gov-stage{order:2}.node text{font-size:21px}.node circle{r:58px}
 .product-ui{padding:20px 0 40px}.note{position:static;display:inline-block;margin:8px 8px 0 0}.note:before{display:none}
 .feat-track{flex-direction:column;height:auto;width:100%;padding:0}
 .feat-intro,.f{width:100%}.feat-intro{padding:72px var(--pad) 24px}.f{padding:40px var(--pad) 48px;border-inline-start:0;border-top:1px solid var(--line);min-height:380px}.feat-bar{display:none}
 .uae dl{grid-template-columns:1fr 1fr}.boundary{grid-template-columns:1fr}.wall{height:70px}.wall span{writing-mode:horizontal-tb}
 .statement .alt{padding-inline-start:0}
 .foot{grid-template-columns:1fr}
 .nav-links{position:fixed;inset:0;background:var(--ink);color:#fff;flex-direction:column;justify-content:center;align-items:center;font:600 34px var(--d);transform:translateY(-100%);transition:.5s;z-index:-1}
 .nav-links.open{transform:none}.nav .btn-sm{display:none}.burger{display:block}.nav.open .brand{color:#fff}.nav.open .burger i{background:#fff}
}
@media(max-width:520px){.lang-demo{flex-direction:column;min-height:0}.lang-demo aside{flex-direction:row;width:100%}.lang-demo aside i{flex:1}.uae dl{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}