/* ============================================================
   DChat landing — layout-only CSS.
   ALL neon / glow / motion is rendered on <canvas> (2D + WebGL),
   matching the reference video's bloom. CSS here is structure,
   type and color tokens only.
   ============================================================ */
:root{
  --bg:#0B0B0C; --bg1:#181819; --bg2:#1E1E1F; --bg3:#232326; --surface:#1C1C1E;
  --nav:#111113; --accent:#2796C3; --accent2:#5BB8D4;
  --t1:#FFFFFF; --t2:#CCCCCC; --t3:#AAAAAA; --t4:#777777;
  --f-head:'Space Grotesk',sans-serif; --f-body:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--t2);font-family:var(--f-body);overflow-x:hidden}
canvas.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
section{position:relative;overflow:hidden}
h1,h2,h3{font-family:var(--f-head);color:var(--t1);font-weight:600}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;cursor:pointer;background:none;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px;position:relative;z-index:3}

/* real 3D phone (three.js) — sits above the FX canvas, under the copy */
#phone3D{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s}
#hero.s1.sl1 #phone3D{opacity:1}
#phone3D canvas{width:100%;height:100%;display:block}

/* hero eyebrow: quiet caps, borderless accent chip (no emoji) */
#eyebrow{border:0;background:none;display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--t4)}
#eyebrow .chip{background:rgba(39,150,195,.16);border:0;border-radius:6px;
  padding:4px 10px;color:var(--accent2);letter-spacing:.18em;font-weight:600}

/* ---------- preloader ---------- */
#preload{position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease,visibility .7s}
#preload.done{opacity:0;visibility:hidden;pointer-events:none}
#preload::after{content:'';position:absolute;left:50%;top:50%;width:min(70vw,760px);height:min(70vw,760px);
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(39,150,195,.16),rgba(116,43,238,.07) 45%,transparent 70%);
  animation:plGlow 3.2s ease-in-out infinite}
@keyframes plGlow{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.pl-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px}
.pl-mark{overflow:visible;background:none;filter:drop-shadow(0 0 22px rgba(91,184,212,.45));
  animation:plPulse 2.4s ease-in-out infinite}
@keyframes plPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.06);filter:brightness(1.25)}}
.pl-name{font-family:var(--f-head);font-weight:600;font-size:19px;color:var(--t1);letter-spacing:.02em}
.pl-bar{width:210px;height:2px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.pl-bar i{display:block;height:100%;width:0%;border-radius:2px;
  background:linear-gradient(90deg,#742bee,#443aee,#4dc4ee);
  box-shadow:0 0 12px rgba(77,196,238,.7);transition:width .35s cubic-bezier(.4,0,.2,1)}
.pl-pct{font-size:11.5px;color:var(--t4);letter-spacing:.16em;font-variant-numeric:tabular-nums}

/* ---------- nav ---------- */
#nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;padding:16px 34px;font-size:13px;color:var(--t3);white-space:nowrap}
#nav .brand{display:flex;align-items:center;gap:9px;color:var(--t1);font-family:var(--f-head);font-weight:600;font-size:17px}
#nav .brand canvas{width:26px;height:26px}
/* --- nav: capsule around the links group only (no full-width background) --- */
#nav .brand .mark{filter:drop-shadow(0 0 9px rgba(91,184,212,.45))}
#nav .links{display:flex;align-items:center;gap:4px;padding:5px 10px 5px 6px;border-radius:10px;
  background:linear-gradient(90deg,rgba(15,17,18,.72) 55%,rgba(15,17,18,0) 96%);
  backdrop-filter:blur(10px);border:0;margin-left:16px;margin-right:auto}
#nav .links .login{border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:8px 16px;margin-left:8px}
#nav .links .login:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05)}
#nav .lang{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 14px;color:var(--t2)}
#nav .links a{position:relative;padding:8px 14px;border-radius:8px;font-size:13px;color:var(--t3);
  transition:color .18s ease,background .18s ease}
#nav .links a:hover{color:var(--t1);background:rgba(255,255,255,.05)}
#nav .links a.on{color:var(--t1);background:rgba(255,255,255,.09)}
#nav .links a.on::before{content:'◈ ';color:var(--accent2);font-size:10px}
#nav .right{display:flex;align-items:center;gap:12px}
#nav .lang{color:var(--t4);padding:8px 6px;font-size:12.5px;cursor:pointer;transition:color .18s}
#nav .lang:hover{color:var(--t1)}
/* --- buttons: reference style — white pill CTA, squircle arrow chip, glow bloom --- */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:10px;padding:10px 20px;font-size:13.5px;font-weight:600;
  position:relative;transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .25s ease}
.btn.pri{background:var(--accent);color:#fff}
.btn.pri:hover{background:var(--accent2);box-shadow:0 0 26px rgba(91,184,212,.4)}
.btn.sec{border:1px solid rgba(255,255,255,.16);color:var(--t2)}
.btn.sec:hover{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.05)}
.btn.glow{border-radius:999px;color:#fff;background:rgba(39,150,195,.12)} /* animated border painted by canvas ring behind it */
/* white pill + rounded-square accent arrow chip + soft glow halo behind (like the reference) */
.btn.white{background:#fff;color:#0B0B0C;padding:7px 7px 7px 20px;
  box-shadow:0 0 0 5px rgba(91,184,212,.10),0 0 24px rgba(39,150,195,.35)}
.btn.white .arr{width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;
  transition:background .2s ease,transform .2s ease}
.btn.white:hover{box-shadow:0 0 0 6px rgba(91,184,212,.16),0 0 40px rgba(39,150,195,.6)}
.btn.white:hover .arr{background:var(--accent2);transform:translateX(2px)}

/* ---------- hero ---------- */
#hero{height:100vh;min-height:640px;position:sticky;top:0;z-index:1;background:var(--bg)}
#nebGL{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:1;z-index:1}
/* no CSS fade — the shader itself animates the entrance/dismiss wipe */
#hero .content{transition:opacity .6s}
#hero.s1 .content{opacity:0;pointer-events:none}
#phoneFX{opacity:0;transition:opacity .6s;z-index:3}
#hero.s1 #phoneFX{opacity:1}
.scopy{position:absolute;left:clamp(40px,11vw,230px);top:50%;transform:translateY(calc(-50% + 22px));z-index:4;max-width:640px;opacity:0;pointer-events:none;transition:opacity .6s,transform .6s}
.scopy.on{opacity:1;pointer-events:auto;transform:translateY(-50%)}
.scopy h1{font-size:clamp(30px,3.4vw,50px);line-height:1.16;white-space:nowrap}
.scopy h1 .l2{color:var(--accent2)}
.scopy p{margin:18px 0 26px;color:var(--t3);font-size:15px;line-height:1.68;max-width:430px}
/* slide copy: left-aligned CTAs + word-by-word rise-through-floor entrance (mirrors slide-1 headline) */
.scopy .dl-row{justify-content:flex-start}
.scopy h1 .ln{display:block;width:max-content;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.scopy h1 .w{display:inline-block;transform:translateY(118%);text-shadow:0 0 18px rgba(190,234,247,.18)}
.scopy h1 .l2 .w{text-shadow:0 0 22px rgba(91,184,212,.4)}
.scopy p,.scopy .dl-row{opacity:0;transform:translateY(16px)}
.scopy.on h1 .w{animation:pcWordRise 1.4s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*.18s)}
.scopy.on p{animation:pcBlockIn .8s cubic-bezier(.16,1,.3,1) both;animation-delay:.7s}
.scopy.on .dl-row{animation:pcBlockIn .8s cubic-bezier(.16,1,.3,1) both;animation-delay:.9s}
@keyframes pcWordRise{0%{opacity:.25;transform:translateY(118%)}45%{opacity:1}100%{opacity:1;transform:translateY(0)}}
@keyframes pcBlockIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* dismiss: copy drops back through the floor when leaving the slide (mirrors slide-1 reverse) */
.scopy.on.out h1 .w{animation:pcWordFall .5s cubic-bezier(.5,0,.85,.35) both;animation-delay:calc((6 - var(--i,0))*.045s)}
.scopy.on.out p,.scopy.on.out .dl-row{animation:pcBlockOut .4s ease both}
@keyframes pcWordFall{from{opacity:1;transform:translateY(0)}to{opacity:.2;transform:translateY(118%)}}
@keyframes pcBlockOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(14px)}}
#heroDots{position:absolute;bottom:78px;left:50%;transform:translateX(-50%);z-index:6;display:flex;gap:10px}
#heroDots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;transition:background .3s,transform .3s}
#heroDots span.on{background:var(--accent2);transform:scale(1.25)}
/* --- hero slider arrows: glass discs with a spinning neon arc, revealed only on hero hover --- */
.hero-arrow{position:absolute;top:50%;z-index:7;width:52px;height:52px;border:0;padding:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.hero-arrow.prev{left:clamp(14px,2.4vw,40px);transform:translateY(-50%) translateX(-22px)}
.hero-arrow.next{right:clamp(14px,2.4vw,40px);transform:translateY(-50%) translateX(22px)}
#hero:hover .hero-arrow{opacity:1;pointer-events:auto}
#hero:hover .hero-arrow.prev,#hero:hover .hero-arrow.next{transform:translateY(-50%) translateX(0)}
.hero-arrow::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:rgba(16,24,28,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 22px rgba(0,0,0,.35);
  transition:border-color .3s ease,background .3s ease}
.hero-arrow .ring{position:absolute;inset:-2px;border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg,transparent 0 62%,var(--accent2) 82%,#fff 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  animation:heroRingSpin 2.6s linear infinite;transition:opacity .3s ease}
.hero-arrow:hover .ring{opacity:1}
.hero-arrow:hover::before{border-color:transparent;background:rgba(39,150,195,.2)}
.hero-arrow svg{position:relative;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease,transform .3s ease}
.hero-arrow:hover svg{stroke:var(--accent2)}
.hero-arrow.prev:hover svg{transform:translateX(-2px)}
.hero-arrow.next:hover svg{transform:translateX(2px)}
@keyframes heroRingSpin{to{transform:rotate(360deg)}}
#hero .content{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 20px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.12);border-radius:999px;
  padding:7px 16px;font-size:12px;color:var(--t3);letter-spacing:.03em;margin-bottom:18px;background:rgba(255,255,255,.03);overflow:hidden;position:relative}
#hero h1{font-family:'Figtree','Plus Jakarta Sans',var(--f-head);font-weight:400;font-size:clamp(32px,4.4vw,64px);line-height:1.12;letter-spacing:-.015em}
#hero .badges{font-size:11.5px}
#hero .dl-row .btn{padding:9px 18px;font-size:13px}
#hero .dl-row .btn.white{padding:7px 7px 7px 18px}
#hero h1 .l2{color:var(--accent2)}
#hero .sub{max-width:560px;margin:22px auto 30px;font-size:15.5px;line-height:1.65;color:var(--t3)}
.dl-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.store{display:flex;align-items:center;gap:11px;padding:10px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.03);text-align:left;cursor:pointer}
.store:hover{border-color:var(--accent)}
.store svg{width:22px;height:22px;fill:#fff;flex:none}
.store small{display:block;font-size:10px;color:var(--t4);letter-spacing:.04em}
.store b{font-size:14px;color:var(--t1);font-family:var(--f-head)}
.badges{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;font-size:12.5px;color:var(--t3)}
.badges span{display:inline-flex;align-items:center;gap:7px}
.badges i{width:5px;height:5px;border-radius:50%;background:var(--accent2);display:inline-block}
#scrollhint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;font-size:11.5px;letter-spacing:.14em;color:var(--t4);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
#scrollhint canvas{width:14px;height:22px}

/* ---------- stats (cover-reveal over hero) ---------- */
#stats{min-height:100vh;background:var(--bg);z-index:5;display:flex;align-items:center;border-top:1px solid #000}
#stats .head{text-align:center;margin-bottom:70px}
#stats .head h2{font-family:'Figtree','Plus Jakarta Sans',var(--f-head);font-weight:400;font-size:clamp(26px,3.4vw,44px);max-width:720px;margin:14px auto 0;line-height:1.25}
#stats .grid{position:relative;max-width:1020px;height:540px;margin:0 auto}
#stats .cell{position:absolute;padding:0}
#stats .num{font-family:'Figtree','Plus Jakarta Sans',var(--f-head);font-weight:500;font-size:clamp(26px,2.4vw,36px);color:var(--t1)}
#stats .num i{color:var(--accent2);font-style:normal}
#stats .lbl{margin-top:10px;font-size:12.5px;color:var(--t4);max-width:230px;line-height:1.5}

/* ---------- kinetic marquee + value prop ---------- */
#intro{min-height:170vh;background:var(--bg);z-index:5}
#intro .pin{position:sticky;top:0;height:100vh}
#introMarquee{position:absolute;top:4vh;left:0;width:100%;height:82vh;z-index:6;pointer-events:none}
#intro .split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:14vh 7vw 0;gap:5vw;margin-top:200px}
#polyBox{position:relative;height:64vh;margin-top:200px}
#intro .copy .pill{display:inline-block;border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:6px 14px;font-size:12px;color:var(--t3);margin-bottom:18px}
#intro .copy h2{font-size:clamp(26px,3vw,40px);line-height:1.22;margin-bottom:20px}
#intro .copy p{font-size:14.5px;line-height:1.7;color:var(--t3);max-width:460px;margin-bottom:16px}

/* ---------- how it works ---------- */
#how{min-height:320vh;background:var(--bg);z-index:5}
#how .pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
#how .head{text-align:center;position:relative;z-index:3;margin-bottom:34px}
#how .head h2{font-size:clamp(28px,3.4vw,44px)}
#how .head h2 .w{opacity:0;display:inline-block}
#how .head h2 .acc{color:var(--accent2)}
#how .head p{margin-top:10px;font-size:13.5px;color:var(--t4)}
#howCard{position:relative;width:min(1060px,90vw);height:min(560px,58vh);border-radius:26px;overflow:hidden;
  background:var(--bg2);border:1px solid rgba(255,255,255,.07);z-index:3}
#ribbonGL{position:absolute;inset:0;width:100%;height:100%}
#howCard .inner{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;padding:0 54px;gap:40px}
#howViz{position:relative;height:78%}
#howCard .copy h3{font-size:24px;margin-bottom:14px}
#howCard .copy p{font-size:14px;line-height:1.7;color:var(--t2);max-width:400px}
#howSteps{display:flex;gap:36px;margin-top:26px;position:relative;z-index:3;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
#howSteps .s{color:var(--t4);position:relative;padding-bottom:8px}
#howSteps .s.on{color:var(--t1)}
#howSteps .s i{position:absolute;left:0;bottom:0;height:2px;width:0%;background:var(--accent);display:block;font-style:normal}
/* stacked feature cards (replaces the video's visa/program cards, same fan animation) */
.fcard{position:absolute;left:50%;top:50%;width:min(340px,26vw);height:200px;border-radius:18px;padding:20px 22px;
  background:linear-gradient(135deg,#232326,#151516);border:1px solid rgba(91,184,212,.25);transform:translate(-50%,-50%)}
.fcard .tag{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent2)}
.fcard h4{font-family:var(--f-head);color:var(--t1);font-size:19px;margin:8px 0 6px}
.fcard p{font-size:12px;color:var(--t3);line-height:1.55}
.fcard .chip{position:absolute;right:20px;top:18px;width:34px;height:26px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent2));opacity:.85}
.fcard .id{position:absolute;left:22px;bottom:16px;font-size:11px;color:var(--t4);font-family:monospace}
/* mockups */
.mock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#161617;border:1px solid rgba(255,255,255,.09);border-radius:16px;overflow:hidden}
.mock .bar{height:30px;background:#1d1d1f;display:flex;align-items:center;gap:6px;padding:0 12px}
.mock .bar i{width:8px;height:8px;border-radius:50%;background:#333;display:block}
.mock .row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.04)}
.mock .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#7a5bd4);flex:none}
.mock .nm{font-size:12px;color:var(--t1)}
.mock .st{font-size:10.5px;color:var(--accent2)}
.mock .bub{max-width:70%;padding:8px 12px;border-radius:14px;font-size:11.5px;line-height:1.4;margin:6px 12px}
.mock .bub.in{background:var(--bg2);color:var(--t2);border-bottom-left-radius:4px}
.mock .bub.out{background:var(--accent);color:#fff;margin-left:auto;border-bottom-right-radius:4px}

/* ---------- platforms (repurposed pricing table) ---------- */
#platforms{padding:16vh 0;background:var(--bg);z-index:5}
#platforms .head{text-align:center;margin-bottom:54px}
#platforms .head h2{font-size:clamp(26px,3.2vw,42px)}
#platforms .head p{margin-top:10px;color:var(--t4);font-size:13.5px}
#platforms .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1080px;margin:0 auto}
.pcol{border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:28px 24px;background:var(--bg1);position:relative;text-align:left}
.pcol.hot{background:var(--bg2)}
.pcol .os{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t4)}
.pcol h3{font-size:22px;margin:8px 0 18px}
.pcol ul{list-style:none;font-size:12.5px;color:var(--t3);line-height:2.1;margin-bottom:22px}
.pcol ul b{color:var(--t2);font-weight:500}
.pcol .btn{width:100%;justify-content:center}
.pcol canvas.border-fx{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);pointer-events:none;border-radius:20px}

/* ---------- horizon CTA ---------- */
#horizon{height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--bg);z-index:5}
#horizon .c{position:relative;z-index:3;max-width:760px;padding:0 24px}
#horizon h2{font-size:clamp(30px,4vw,52px);line-height:1.18}
#horizon .row{margin-top:34px;display:flex;gap:14px;justify-content:center}

/* ---------- why ---------- */
#why{padding:16vh 0;background:var(--bg);z-index:5}
#why .head{text-align:center;margin-bottom:56px}
#why .head h2{font-size:clamp(26px,3.2vw,42px);max-width:560px;margin:0 auto;line-height:1.25}
#why .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:960px;margin:0 auto}
.wcard{border:1px solid rgba(255,255,255,.07);border-radius:20px;background:var(--bg1);padding:30px;min-height:230px;position:relative;overflow:hidden}
.wcard h3{font-size:18px;margin-bottom:10px;position:relative;z-index:2}
.wcard p{font-size:13px;line-height:1.65;color:var(--t3);max-width:330px;position:relative;z-index:2}
.wcard canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- story ---------- */
#who{height:90vh;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:5}
#who h2{position:relative;z-index:3;font-size:clamp(34px,5vw,64px)}
#story{min-height:220vh;background:var(--bg);z-index:5}
#story .pin{position:sticky;top:0;height:100vh}
#story .headline{position:absolute;top:10vh;width:100%;text-align:center;z-index:3;padding:0 20px}
#story .headline h2{font-size:clamp(24px,3vw,40px);line-height:1.3}
#story .headline .acc{color:var(--accent2)}
#story .paras{position:absolute;left:7vw;bottom:12vh;width:min(360px,80vw);z-index:3}
#story .paras p{font-size:13px;line-height:1.7;color:var(--t3);margin-bottom:18px;opacity:.15}
#story .paras p b{color:var(--accent2);font-weight:500}

/* ---------- join cta ---------- */
#join{height:90vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--bg);z-index:5}
#join .c{position:relative;z-index:3;max-width:640px;padding:0 24px}
#join .logo{width:74px;height:74px;margin:0 auto 26px}
#join h2{font-size:clamp(26px,3.4vw,44px);line-height:1.22}
#join p{margin-top:14px;color:var(--t3);font-size:14px}
#join .row{margin-top:30px;display:flex;gap:14px;justify-content:center}

/* ---------- faq ---------- */
#faq{padding:16vh 0;background:var(--bg);z-index:5}
#faq h2{text-align:center;font-size:clamp(26px,3.2vw,40px);margin-bottom:50px}
#faq .list{max-width:720px;margin:0 auto}
.q{border-bottom:1px solid rgba(255,255,255,.07)}
.q button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 4px;font-size:14.5px;color:var(--t1);text-align:left}
.q .plus{color:var(--t4);font-size:18px;flex:none;margin-left:16px}
.q .a{max-height:0;overflow:hidden;font-size:13px;line-height:1.7;color:var(--t3)}
.q .a div{padding:0 4px 20px;max-width:640px}

/* ---------- all in one place ---------- */
#allinone{min-height:130vh;background:var(--bg);z-index:5}
#allinone .pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
#allinone .head{text-align:center;position:relative;z-index:3;margin-bottom:40px;max-width:560px;padding:0 20px}
#allinone .head h2{font-size:clamp(26px,3.2vw,42px)}
#allinone .head p{margin-top:12px;font-size:13.5px;color:var(--t3);line-height:1.7}
#appMock{position:relative;z-index:3;width:min(880px,88vw);height:min(500px,52vh);background:#131315;border:1px solid rgba(255,255,255,.1);
  border-radius:18px;overflow:hidden;display:grid;grid-template-columns:270px 1fr}
#appMock .side{border-right:1px solid rgba(255,255,255,.06);background:#161618;overflow:hidden}
#appMock .chat{display:flex;flex-direction:column;background:#121214}
#appMock .chead{height:52px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:12px;padding:0 18px}
#appMock .msgs{flex:1;padding:16px 8px;overflow:hidden}
#appMock .inbar{height:52px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;padding:0 16px;font-size:12.5px;color:var(--t4)}

/* ---------- reviews ---------- */
#reviews{padding:16vh 0;background:var(--bg);z-index:5}
#reviews .head{display:flex;justify-content:space-between;align-items:end;max-width:1080px;margin:0 auto 44px;padding:0 40px}
#reviews h2{font-size:clamp(24px,3vw,38px);line-height:1.25}
#reviews .trust{font-size:12px;color:var(--t3);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:8px 16px}
#reviews .masonry{max-width:1080px;margin:0 auto;padding:0 40px;columns:3;column-gap:16px}
.rev{break-inside:avoid;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:var(--bg1);padding:22px;margin-bottom:16px}
.rev .who{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rev .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#2796C3,#5BB8D4)}
.rev .nm{font-size:13px;color:var(--t1)}
.rev .stars{font-size:10px;color:var(--accent2);letter-spacing:2px}
.rev p{font-size:12.5px;line-height:1.65;color:var(--t3)}

/* ---------- ring pulse ---------- */
#rings{height:90vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--bg);z-index:5}
#rings .c{position:relative;z-index:3}
#rings .logo{width:60px;height:60px;margin:0 auto 18px}
#rings h2{font-size:clamp(24px,3vw,38px)}
#rings .row{margin-top:26px;display:flex;gap:14px;justify-content:center}

/* ---------- final ---------- */
#final{min-height:150vh;background:#0A0A0B;z-index:5}
#final .pin{position:sticky;top:0;height:100vh;overflow:hidden}
#final .bottom{position:absolute;left:0;right:0;bottom:0;z-index:4;text-align:center;padding-bottom:30px}
#final .discord{max-width:520px;margin:0 auto 60px;padding:0 20px}
#final .discord h3{font-size:22px;margin-bottom:12px}
#final .discord p{font-size:12.5px;line-height:1.7;color:var(--t3);margin-bottom:20px}
footer{position:relative;z-index:5;background:#0A0A0B;border-top:1px solid rgba(255,255,255,.06);padding:60px 0 30px}
footer .cols{max-width:1080px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:30px;font-size:12.5px}
footer h5{color:var(--t1);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;font-family:var(--f-head)}
footer a{display:block;color:var(--t4);padding:4px 0}
footer a:hover{color:var(--accent2)}
footer .brandcol .mark{display:flex;align-items:center;gap:10px;color:var(--t1);font-family:var(--f-head);font-weight:600;font-size:17px;margin-bottom:14px}
footer .brandcol canvas,footer .brandcol .logo-svg{width:26px;height:26px}
footer .brandcol .logo-svg{filter:drop-shadow(0 0 8px rgba(91,184,212,.4))}
footer .brandcol p{color:var(--t4);line-height:1.7;max-width:240px}
footer .base{max-width:1080px;margin:44px auto 0;padding:20px 40px 0;border-top:1px solid rgba(255,255,255,.05);
  display:flex;justify-content:space-between;font-size:11.5px;color:var(--t4)}

@media (max-width:900px){
  #nav .links{display:none}
  /* mobile hero = text only: centre every slide's copy like slide 0, kill the object layers */
  #phone3D,#phoneFX{display:none}
  /* nebula orb: lock 1:1 (height = width) pinned to the bottom, so the arch renders square
     instead of being stretched tall by the portrait viewport */
  #nebGL{top:auto;bottom:0;height:100vw}
  .scopy{left:50%;right:auto;width:88vw;max-width:520px;text-align:center;padding:0 20px;
    transform:translate(-50%,calc(-50% + 22px))}
  .scopy.on{transform:translate(-50%,-50%)}
  .scopy p{margin-left:auto;margin-right:auto}
  .scopy .dl-row{justify-content:center;flex-wrap:wrap}
  .scopy h1{white-space:normal}
  .scopy h1 .ln{display:block;width:auto;overflow:visible;padding-bottom:0;margin-bottom:0}
  .scopy h1 .w{transform:translateY(14px)}
  .scopy.on h1 .w{animation:pcBlockIn .7s ease both;animation-delay:calc(var(--i,0)*.09s)}
  .scopy.on.out h1 .w{animation:pcBlockOut .4s ease both;animation-delay:0s}
  .hero-arrow{width:44px;height:44px}
  #intro .split{grid-template-columns:1fr;padding-top:26vh}
  #polyBox{height:34vh}
  #howCard .inner{grid-template-columns:1fr;padding:30px}
  #howViz{display:none}
  #platforms .cols{grid-template-columns:1fr 1fr}
  #why .grid{grid-template-columns:1fr}
  #reviews .masonry{columns:1}
  #appMock{grid-template-columns:1fr}
  #appMock .side{display:none}
  footer .cols{grid-template-columns:1fr 1fr}
}