/* ============================================================
   NOOK — landing system
   Warm-charcoal canvas, vivid mint→teal→violet brand accents.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* warm charcoal canvas */
  --bg:#24201b;
  --bg-deep:#1b1813;
  --panel:#2c271f;
  --panel-2:#332d24;
  --panel-3:#3a3329;

  --text:#f6f1e9;
  --muted:#b7ac9c;
  --faint:#8a7f6f;

  --line:rgba(246,241,233,.08);
  --line-2:rgba(246,241,233,.14);
  --line-3:rgba(246,241,233,.22);

  /* brand */
  --green:#35e6a4;
  --mint:#8effd1;
  --teal:#2fd4c4;
  --violet:#9a8cff;
  --amber:#ffd166;
  --coral:#ff7a6b;
  --blue:#6da2ff;

  --grad:linear-gradient(110deg,var(--mint),var(--green) 36%,var(--teal) 64%,var(--violet));
  --grad-soft:linear-gradient(110deg,rgba(142,255,209,.16),rgba(53,230,164,.12) 40%,rgba(154,140,255,.14));

  --glow-green:0 0 0 1px rgba(53,230,164,.22),0 18px 60px -18px rgba(53,230,164,.45);
  --shadow:0 30px 80px -28px rgba(0,0,0,.7);

  --max:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* cursor spotlight (set by JS) */
  --mx:50%;
  --my:14%;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
section{scroll-margin-top:90px}
body{
  font-family:Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}

/* layered ambient background */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(55% 45% at var(--mx) var(--my),rgba(53,230,164,.12),transparent 62%),
    radial-gradient(50% 42% at 86% 4%,rgba(154,140,255,.11),transparent 60%),
    radial-gradient(70% 55% at 4% 96%,rgba(255,176,92,.10),transparent 62%),
    radial-gradient(120% 90% at 50% -10%,#2b261e,transparent 60%),
    var(--bg);
}
/* fading dot grid */
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(246,241,233,.05) 1px,transparent 1.4px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 0%,transparent 78%);
          mask-image:radial-gradient(120% 100% at 50% 0%,#000 0%,transparent 78%);
}
/* film grain */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:19px;height:19px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.02em;line-height:1.02}
h1{font-size:clamp(44px,7vw,84px);font-weight:700;max-width:14ch}
h2{font-size:clamp(30px,4.4vw,50px);font-weight:700;letter-spacing:-.022em}
h3{font-size:21px;font-weight:700}
p{color:var(--muted)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--green);font-family:"Space Grotesk",Inter,sans-serif;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.eyebrow::before{content:"";width:24px;height:1px;background:linear-gradient(90deg,var(--green),transparent)}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:60;background:var(--grad);box-shadow:0 0 12px rgba(53,230,164,.6)}

/* ---------- nav ---------- */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:.3s var(--ease)}
.site-nav::after{content:"";position:absolute;inset:0;opacity:0;transition:.3s;background:rgba(22,20,18,.72);border-bottom:1px solid var(--line);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
.site-nav.scrolled::after{opacity:1}
.nav-inner{position:relative;z-index:1;height:72px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:"Space Grotesk",Inter,sans-serif;font-size:21px;font-weight:700;letter-spacing:-.01em}
.brand img{border-radius:50%;box-shadow:0 3px 14px -4px rgba(53,230,164,.5)}
.nav-links{display:flex;align-items:center;gap:30px;color:var(--muted);font-size:14.5px}
.nav-links a{position:relative;transition:.2s;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--green);transition:.25s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}

/* ---------- buttons ---------- */
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px;border-radius:10px;border:1px solid var(--line-2);font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;font-size:15px;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s,background .22s;white-space:nowrap;overflow:hidden}
.button .icon{transition:transform .25s var(--ease)}
.button.small{min-height:42px;padding:0 16px;font-size:14px;border-radius:9px}
.button.primary{background:var(--grad);color:#06120d;border-color:transparent;box-shadow:0 10px 30px -10px rgba(53,230,164,.55)}
.button.primary::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.button.primary:hover::before{transform:translateX(120%)}
.button.ghost{background:rgba(246,241,233,.04);color:var(--text)}
.button.ghost:hover{background:rgba(246,241,233,.07);border-color:var(--line-3)}
.button:hover{transform:translateY(-2px)}
.button.primary:hover{box-shadow:0 16px 40px -10px rgba(53,230,164,.7)}
.button:hover .icon{transform:translate(2px,-2px)}

/* copy chip (echoes the npm install pill) */
.copy-chip{display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 8px 0 16px;border:1px solid var(--line-2);border-radius:10px;background:rgba(0,0,0,.28);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--muted);cursor:pointer;transition:.2s}
.copy-chip:hover{border-color:var(--line-3);color:var(--text)}
.copy-chip .ca{color:var(--mint)}
.copy-chip .cbtn{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;background:rgba(246,241,233,.05);color:var(--muted)}
.copy-chip.copied .cbtn{color:var(--green)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:120px 0 70px}
.home-hero{border-bottom:1px solid var(--line)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-copy{position:relative;z-index:3;max-width:620px}
.badge{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 14px;border:1px solid var(--line-2);border-radius:100px;background:rgba(246,241,233,.03);font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:24px}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(53,230,164,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(53,230,164,.5)}70%{box-shadow:0 0 0 8px rgba(53,230,164,0)}100%{box-shadow:0 0 0 0 rgba(53,230,164,0)}}
.hero h1{margin:0 0 22px}
.lead{font-size:clamp(17px,1.6vw,20px);max-width:540px;color:#cabfae}
.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-meta{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero-meta div{display:flex;flex-direction:column;gap:2px}
.hero-meta b{font-family:"Space Grotesk",Inter,sans-serif;font-size:22px;color:var(--text)}
.hero-meta span{font-size:12.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}

/* ---------- the orb (hero centerpiece) ---------- */
.orb-wrap{position:relative;z-index:1;justify-self:center;width:min(560px,92vw);aspect-ratio:1}
.orb{position:absolute;inset:0;display:grid;place-items:center}
.orb-glow{position:absolute;inset:6%;border-radius:50%;filter:blur(36px);opacity:.85;
  background:conic-gradient(from 0deg,rgba(53,230,164,.5),rgba(47,212,196,.4),rgba(154,140,255,.5),rgba(255,209,102,.35),rgba(53,230,164,.5));
  animation:spin 26s linear infinite}
.orb-glow::after{content:"";position:absolute;inset:14%;border-radius:50%;background:var(--bg);filter:blur(8px)}
.orb-svg{position:relative;width:100%;height:100%;overflow:visible}
.spin{transform-origin:300px 300px}
.ring-ticks{animation:spin 90s linear infinite;transform-origin:300px 300px}
.ring-ticks line{stroke:var(--line-3)}
.ring-ticks line.major{stroke:rgba(246,241,233,.4)}
.ring-dotted{animation:spin-rev 60s linear infinite;transform-origin:300px 300px}
.ring-mid{animation:spin 120s linear infinite;transform-origin:300px 300px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-rev{to{transform:rotate(-360deg)}}

.arc{fill:none;stroke-linecap:round;opacity:.95;filter:drop-shadow(0 0 6px currentColor)}
.arc.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.5s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.participant{transform-box:fill-box;transform-origin:center;animation:bob 3.2s ease-in-out infinite}
.participant.finisher{filter:drop-shadow(0 0 5px var(--green))}
@keyframes bob{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

.radar{transform-origin:300px 300px;animation:spin 5.5s linear infinite;mix-blend-mode:screen;opacity:.7}

.core-lines line{stroke:url(#coreGrad);stroke-width:2}
.core-scan{animation:scan 4.4s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translateY(-54px);opacity:0}30%{opacity:.45}50%{transform:translateY(54px);opacity:0}70%{opacity:.45}}
.core-pulse{transform-origin:300px 300px;animation:corepulse 4s ease-in-out infinite}
@keyframes corepulse{0%,100%{opacity:.6;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}

.orbit-dot{filter:drop-shadow(0 0 8px var(--mint))}

/* center readout */
.orb-readout{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.orb-readout .rc{display:flex;flex-direction:column;align-items:center;gap:2px}
.orb-readout .rk{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--faint);text-shadow:0 2px 14px rgba(0,0,0,.8)}
.orb-readout .rv{font-family:"Space Grotesk",Inter,sans-serif;font-size:34px;font-weight:700;color:var(--text);line-height:1;text-shadow:0 2px 18px rgba(0,0,0,.85)}
.orb-readout .rv .grad-text{font-weight:700}
.orb-readout .rs{font-size:12px;color:var(--green);font-weight:600}

/* ============================================================
   PACT HERO — scroll-scrubbed
   ============================================================ */
.pact{position:relative}
.pact-pin{display:flex;align-items:center;padding:112px 0 56px}
@media(min-width:961px){
  .pact{height:460vh}
  .pact-pin{position:sticky;top:0;min-height:100svh;height:100svh;align-items:safe center;padding:96px 0 40px}
}
.pact-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;width:100%}
.pact-copy{max-width:600px;position:relative;z-index:2}
.phase-track{display:flex;gap:10px;margin:30px 0 16px;flex-wrap:wrap}
.phase{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid var(--line);border-radius:100px;font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;font-size:13px;color:var(--faint);transition:.35s var(--ease)}
.phase b{font-size:12px;color:var(--faint);transition:.35s}
.phase.done{color:var(--muted);border-color:var(--line-2)}
.phase.done b{color:var(--teal)}
.phase.active{color:var(--text);border-color:rgba(53,230,164,.5);background:rgba(53,230,164,.08);box-shadow:0 0 18px -6px rgba(53,230,164,.5)}
.phase.active b{color:var(--green)}
.phase-caption{font-size:16px;line-height:1.6;color:#cabfae;max-width:46ch;min-height:5.1em}
.pact-stats{display:flex;gap:30px;margin-top:24px}
.pact-stats>div{display:flex;flex-direction:column;gap:3px}
.pact-stats b{font-family:"Space Grotesk",Inter,sans-serif;font-size:26px;color:var(--text);font-variant-numeric:tabular-nums;display:inline-block;transform-origin:left center}
.pact-stats span{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.09em}
.pact-stage{position:relative;justify-self:center;width:min(540px,88vw,60vh);aspect-ratio:1}
.stage-glow{position:absolute;inset:9%;border-radius:50%;filter:blur(48px);opacity:.5;background:conic-gradient(from 0deg,rgba(53,230,164,.5),rgba(47,212,196,.35),rgba(154,140,255,.5),rgba(255,209,102,.3),rgba(53,230,164,.5));animation:spin 30s linear infinite}
#stage{position:relative;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 30px 80px rgba(0,0,0,.4))}
.amb-ring{transform-box:view-box;transform-origin:300px 300px;animation:spin 80s linear infinite}
#ringDot{filter:drop-shadow(0 0 9px #8effd1);transition:opacity .3s}
.coin,#goalCard,.proof-badge{transform-box:fill-box;transform-origin:center}
.stage-readout{position:absolute;left:0;right:0;top:57%;text-align:center;pointer-events:none}
.sr-val{font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;font-size:clamp(34px,4.6vw,46px);color:var(--text);line-height:1;display:inline-block;transform-origin:center;font-variant-numeric:tabular-nums;text-shadow:0 2px 26px rgba(0,0,0,.75)}
.sr-label{margin-top:7px;font-size:13px;color:var(--green);font-weight:600;text-shadow:0 2px 16px rgba(0,0,0,.75)}
.scroll-cue{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--faint);font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:.04em;transition:opacity .4s;white-space:nowrap}
.scroll-cue .icon{width:15px;height:15px;animation:cueBob 1.8s ease-in-out infinite}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(max-width:960px){
  .pact-inner{grid-template-columns:1fr;gap:14px}
  .pact-stage{order:-1;width:min(420px,76vw)}
  .pact-copy{max-width:none}
  .phase-caption{min-height:0}
  .scroll-cue{display:none}
}
/* short desktop / laptop heights — keep the pinned hero clear of the nav */
@media(min-width:961px) and (max-height:880px){
  .pact h1{font-size:clamp(38px,5.2vw,58px)}
  .pact .lead{font-size:16px}
  .phase-caption{min-height:0;font-size:15px}
  .pact-copy .badge{margin-bottom:14px}
  .phase-track{margin:18px 0 12px}
  .pact-stats{margin-top:16px}
  .pact-stats b{font-size:22px}
  .pact-stage{width:min(440px,42vw,52vh)}
  .pact-pin{padding-top:90px}
}
@media(min-width:961px) and (max-height:720px){
  .pact h1{font-size:clamp(30px,4.4vw,44px);margin-bottom:14px}
  .pact .lead{display:none}
  .phase-caption{display:none}
  .pact-pin{align-items:safe center;padding-top:84px}
  .pact-stage{width:min(380px,38vw,48vh)}
}

/* ---------- marquee trust strip ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(0,0,0,.18);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:0;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:14px;padding:18px 34px;font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;font-size:15px;color:var(--muted);white-space:nowrap}
.marquee-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.7}
.marquee-track b{color:var(--text)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:clamp(72px,9vw,120px) 0;position:relative}
.section.soft{background:rgba(0,0,0,.16);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:680px;margin-bottom:54px}
.sec-head h2{margin-top:16px}
.sec-head p{font-size:18px;margin-top:18px}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:start}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.proof-panel,.market-panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}
.section h2{margin-top:0}
.section-copy{font-size:18px;margin-top:22px;max-width:570px}

/* generic card */
.card{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,rgba(246,241,233,.04),rgba(246,241,233,.012));border-radius:14px;padding:26px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad-soft);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card:hover::before{opacity:1}
.card-icon{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:12px;color:var(--green);background:rgba(53,230,164,.08);margin-bottom:22px}
.card h3{margin-bottom:10px}
.card p{font-size:15px}

/* ---------- how it works: scrollytelling ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.story-steps{display:flex;flex-direction:column;gap:18px}
.story-step{position:relative;border:1px solid var(--line);border-radius:16px;padding:28px 28px 28px 30px;background:linear-gradient(180deg,rgba(246,241,233,.03),transparent);transition:.4s var(--ease);opacity:.45}
.story-step::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--line-2);transition:.4s var(--ease)}
.story-step.active{opacity:1;border-color:var(--line-2);background:linear-gradient(180deg,rgba(53,230,164,.06),rgba(246,241,233,.02))}
.story-step.active::before{background:var(--grad)}
.story-step .num{font-family:"Space Grotesk",Inter,sans-serif;font-size:13px;font-weight:700;color:var(--green);letter-spacing:.1em}
.story-step h3{margin:8px 0 10px;font-size:26px}
.story-step p{font-size:15.5px;max-width:42ch}
.story-step .tag{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--faint);font-family:ui-monospace,Menlo,monospace}
.story-step .tag .icon{width:16px;height:16px;color:var(--green)}

.story-stage{position:sticky;top:120px;height:min(520px,70vh);border:1px solid var(--line-2);border-radius:20px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,rgba(53,230,164,.08),transparent 60%),var(--panel);box-shadow:var(--shadow)}
.stage-svg{width:100%;height:100%}
.stage-ring{transition:stroke-dashoffset 1s var(--ease)}
.stage-dot{transition:opacity .5s,fill .5s}
.stage-label{position:absolute;left:24px;bottom:22px;right:24px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.stage-label .sl-k{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--faint)}
.stage-label .sl-v{font-family:"Space Grotesk",Inter,sans-serif;font-size:28px;color:var(--text);margin-top:4px}
.stage-pill{font-family:"Space Grotesk",Inter,sans-serif;font-size:13px;font-weight:700;padding:7px 13px;border-radius:100px;border:1px solid var(--line-2);color:var(--green);background:rgba(53,230,164,.08)}

/* ---------- proof tiles ---------- */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proof-tile{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;gap:4px 14px;padding:22px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(246,241,233,.04),rgba(246,241,233,.01));transition:.28s var(--ease);position:relative;overflow:hidden}
.proof-tile::after{content:"";position:absolute;right:-30%;top:-60%;width:90%;height:160%;background:radial-gradient(circle,rgba(53,230,164,.14),transparent 60%);opacity:0;transition:.3s}
.proof-tile:hover{transform:translateY(-4px);border-color:var(--line-3)}
.proof-tile:hover::after{opacity:1}
.proof-tile span{grid-row:1/3;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:11px;color:var(--green);background:rgba(53,230,164,.08)}
.proof-tile b{font-family:"Space Grotesk",Inter,sans-serif;font-size:16px}
.proof-tile small{color:var(--muted);font-size:13px}
.proof-tile .icon-arrow{position:absolute;right:18px;top:18px;color:var(--faint);transition:.25s}
.proof-tile:hover .icon-arrow{color:var(--green);transform:translate(2px,-2px)}

/* ---------- mini list / fairness ---------- */
.mini-list{display:grid;gap:12px}
.mini-list div{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:18px;background:rgba(246,241,233,.025);color:#ddd4c6;transition:.25s}
.mini-list div:hover{border-color:var(--line-2);background:rgba(53,230,164,.04)}
.mini-list .icon{color:var(--green);margin-top:2px;flex:none}

/* ---------- daily skill pacts ---------- */
.skill-section{position:relative;overflow:visible;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(0,0,0,.13)}
.skill-pin{display:flex;align-items:center;padding:clamp(76px,9vw,120px) 0}
@media(min-width:961px){
  .skill-section{height:360vh}
  .skill-pin{position:sticky;top:0;min-height:100svh;height:100svh;padding:96px 0 42px;align-items:safe center}
}
.skill-showcase{display:grid;grid-template-columns:.86fr 1.14fr;gap:54px;align-items:center;width:100%}
.skill-copy{max-width:570px;position:relative;z-index:2}
.skill-phase-track{display:flex;gap:10px;margin:28px 0 18px;flex-wrap:wrap}
.skill-phase{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid var(--line);border-radius:100px;font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;font-size:13px;color:var(--faint);transition:.35s var(--ease)}
.skill-phase b{font-size:12px;color:var(--faint);transition:.35s}
.skill-phase.done{color:var(--muted);border-color:var(--line-2)}
.skill-phase.done b{color:var(--teal)}
.skill-phase.active{color:var(--text);border-color:rgba(53,230,164,.5);background:rgba(53,230,164,.08);box-shadow:0 0 18px -6px rgba(53,230,164,.5)}
.skill-phase.active b{color:var(--green)}
.skill-stats{display:flex;gap:30px;margin-top:22px}
.skill-stats>div{display:flex;flex-direction:column;gap:3px}
.skill-stats b{font-family:"Space Grotesk",Inter,sans-serif;font-size:26px;color:var(--text);font-variant-numeric:tabular-nums;display:inline-block;transform-origin:left center}
.skill-stats span{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.09em}
.daily-device{position:relative;justify-self:center;width:min(600px,92vw,68vh)}
.device-glow{position:absolute;inset:6%;border-radius:34px;filter:blur(42px);opacity:.55;background:conic-gradient(from 70deg,rgba(53,230,164,.48),rgba(47,212,196,.3),rgba(154,140,255,.42),rgba(255,209,102,.22),rgba(53,230,164,.48));animation:spin 24s linear infinite}
.device-shell{position:relative;border:1px solid var(--line-2);border-radius:26px;padding:22px;background:radial-gradient(90% 65% at 50% 0%,rgba(53,230,164,.13),transparent 60%),linear-gradient(180deg,rgba(246,241,233,.055),rgba(246,241,233,.014)),var(--panel);box-shadow:var(--shadow);overflow:hidden}
.device-shell::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(246,241,233,.06) 1px,transparent 1.3px);background-size:22px 22px;opacity:.35;-webkit-mask-image:radial-gradient(70% 70% at 50% 35%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 35%,#000,transparent)}
.device-shell>*{position:relative}
.device-top,.seed-card{display:flex;align-items:center;justify-content:space-between;gap:16px}
.device-top span,.seed-card span{display:block;color:var(--green);font-family:"Space Grotesk",Inter,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase}
.device-top b{display:block;margin-top:3px;font-family:"Space Grotesk",Inter,sans-serif;font-size:22px;color:var(--text)}
.device-top strong{font-family:"Space Grotesk",Inter,sans-serif;font-size:15px;color:var(--text);padding:8px 13px;border:1px solid var(--line-2);border-radius:100px;background:rgba(0,0,0,.2);white-space:nowrap}
.seed-card{margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.2)}
.seed-card b{font-family:"Space Grotesk",Inter,sans-serif;font-size:15px;color:var(--text);font-variant-numeric:tabular-nums}
.tile-stack{position:relative;height:342px;margin-top:18px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(80% 70% at 50% 38%,rgba(53,230,164,.08),transparent 68%),rgba(0,0,0,.22);overflow:hidden}
.tile-stack::after{content:"";position:absolute;left:22px;right:22px;bottom:18px;height:44px;border-radius:14px;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.26));border:1px solid rgba(246,241,233,.07);opacity:.65}
.tile{position:absolute;width:64px;height:64px;border-radius:14px;border:1px solid rgba(246,241,233,.16);background:linear-gradient(160deg,#f7efe1,#c9b99d);box-shadow:0 16px 26px -16px rgba(0,0,0,.8),inset 0 -10px 16px rgba(61,47,31,.18);display:grid;place-items:center;transform:translate3d(0,0,0) rotate(var(--r,0deg));transform-origin:center;transition:opacity .35s var(--ease),filter .35s var(--ease)}
.tile span{position:relative;width:30px;height:30px;display:block}
.tile span::before,.tile span::after{content:"";position:absolute;inset:0;margin:auto}
.mark-a span::before{width:24px;height:24px;border:4px solid #1aa879;border-radius:50%}
.mark-b span::before{width:24px;height:24px;background:#8e8cff;transform:rotate(45deg);border-radius:6px}
.mark-c span::before{width:26px;height:6px;background:#d9922d;border-radius:8px;box-shadow:0 10px 0 #d9922d,0 20px 0 #d9922d}
.mark-d span::before{width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:27px solid #2f8fdb;top:2px}
.mark-e span::before{width:26px;height:26px;background:linear-gradient(135deg,#35e6a4 50%,transparent 50%);border:3px solid #1aa879;border-radius:7px}
.mark-f span::before{width:26px;height:26px;border-radius:8px;background:radial-gradient(circle at 50% 50%,#ff7a6b 0 5px,transparent 6px),radial-gradient(circle at 20% 20%,#ff7a6b 0 4px,transparent 5px),radial-gradient(circle at 80% 80%,#ff7a6b 0 4px,transparent 5px)}
.tile-1{left:12%;top:9%;--r:-8deg}.tile-2{left:28%;top:4%;--r:5deg}.tile-3{left:44%;top:8%;--r:-3deg}.tile-4{left:60%;top:5%;--r:7deg}.tile-5{left:75%;top:12%;--r:-6deg}.tile-6{left:20%;top:26%;--r:3deg}.tile-7{left:36%;top:23%;--r:-7deg}.tile-8{left:52%;top:27%;--r:4deg}.tile-9{left:68%;top:25%;--r:-2deg}.tile-10{left:10%;top:45%;--r:6deg}.tile-11{left:26%;top:48%;--r:-5deg}.tile-12{left:42%;top:44%;--r:2deg}.tile-13{left:58%;top:49%;--r:-8deg}.tile-14{left:74%;top:44%;--r:5deg}.tile-15{left:18%;top:66%;--r:-4deg}.tile-16{left:34%;top:68%;--r:8deg}.tile-17{left:50%;top:65%;--r:-3deg}.tile-18{left:66%;top:68%;--r:4deg}
.tile.cleared{filter:drop-shadow(0 0 12px rgba(53,230,164,.5))}
.tile-stack.is-clear .tile{opacity:.52}
.tile-stack.is-clear .tile-3,.tile-stack.is-clear .tile-8,.tile-stack.is-clear .tile-13{opacity:1;filter:drop-shadow(0 0 12px rgba(53,230,164,.55))}
.tile-stack.is-settle .tile{opacity:.34;filter:saturate(.7)}
.tile-tray{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:13px;padding:9px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.22)}
.tray-slot{height:34px;border-radius:9px;border:1px dashed rgba(246,241,233,.16);background:rgba(246,241,233,.025)}
.tray-slot.active{border-style:solid;background:rgba(53,230,164,.1);border-color:rgba(53,230,164,.28)}
.skill-ledger{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.skill-ledger div{border:1px solid var(--line);border-radius:13px;padding:14px;background:rgba(0,0,0,.2)}
.skill-ledger span{display:block;color:var(--faint);font-size:12px;margin-bottom:4px}
.skill-ledger b{font-family:"Space Grotesk",Inter,sans-serif;font-size:20px;color:var(--text)}
.skill-ledger em{display:block;height:5px;margin-top:10px;border-radius:5px;background:rgba(246,241,233,.08);overflow:hidden}
.skill-ledger em::after{content:"";display:block;width:var(--w);height:100%;border-radius:5px;background:var(--grad)}
.settle-card{position:absolute;right:22px;bottom:126px;min-width:148px;padding:14px 16px;border:1px solid rgba(53,230,164,.36);border-radius:16px;background:rgba(20,33,27,.92);box-shadow:0 18px 50px -22px rgba(53,230,164,.75);opacity:0;transform:translateY(14px) scale(.96);will-change:transform,opacity}
.settle-card span{display:block;color:var(--green);font-size:12px;font-weight:700}
.settle-card b{display:block;margin-top:2px;font-family:"Space Grotesk",Inter,sans-serif;font-size:32px;color:var(--text)}
.skill-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
.skill-cards.compact .skill-card{padding:16px;min-height:0}
.skill-cards.compact .skill-card span{width:34px;height:34px;border-radius:9px;margin-bottom:12px}
.skill-cards.compact .skill-card h3{font-size:15px}
.skill-cards.compact .skill-card p{font-size:13px}
.skill-card,.format-card{position:relative;border:1px solid var(--line);border-radius:16px;padding:24px;background:linear-gradient(180deg,rgba(246,241,233,.04),rgba(246,241,233,.012));transition:.28s var(--ease);overflow:hidden}
.skill-card::after,.format-card::after{content:"";position:absolute;right:-25%;top:-55%;width:80%;height:150%;background:radial-gradient(circle,rgba(53,230,164,.13),transparent 60%);opacity:0;transition:.28s}
.skill-card:hover,.format-card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow)}
.skill-card:hover::after,.format-card:hover::after{opacity:1}
.skill-card span,.format-icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:12px;color:var(--green);background:rgba(53,230,164,.08);margin-bottom:18px}
.skill-card h3,.format-card h3{margin-bottom:10px}
.skill-card p,.format-card p{font-size:14.5px;position:relative}

/* ---------- stats band ---------- */
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{border:1px solid var(--line);border-radius:16px;padding:28px 24px;background:linear-gradient(180deg,rgba(246,241,233,.04),rgba(246,241,233,.01));transition:.3s var(--ease)}
.stat:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow)}
.stat .stat-n{font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(30px,3.4vw,42px);font-weight:700;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .stat-l{margin-top:12px;color:var(--text);font-weight:600;font-size:15px}
.stat .stat-s{margin-top:4px;color:var(--faint);font-size:13px}

/* ---------- launch CTA panel ---------- */
.launch-panel{position:relative;display:flex;align-items:center;justify-content:space-between;gap:36px;border:1px solid var(--line-2);border-radius:22px;padding:48px;overflow:hidden;background:radial-gradient(120% 160% at 0% 0%,rgba(53,230,164,.12),transparent 55%),radial-gradient(120% 160% at 100% 100%,rgba(154,140,255,.12),transparent 55%),var(--panel)}
.launch-panel::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(246,241,233,.06) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent);mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent);opacity:.6}
.launch-panel>*{position:relative}
.launch-panel h2{max-width:16ch}
.launch-panel p{max-width:54ch;margin-top:16px;font-size:17px}

/* ---------- FAQ ---------- */
.narrow{max-width:840px}
.faq h2{margin:16px 0 30px}
details{border:1px solid var(--line);border-radius:14px;padding:4px 22px;margin-bottom:12px;background:rgba(246,241,233,.02);transition:.25s}
details[open]{border-color:var(--line-2);background:rgba(246,241,233,.035)}
summary{cursor:pointer;font-family:"Space Grotesk",Inter,sans-serif;font-size:19px;font-weight:700;list-style:none;padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:11px;height:11px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);transition:.25s;flex:none;margin-right:4px}
details[open] summary::after{transform:rotate(-135deg);border-color:var(--green)}
details p{padding-bottom:20px;max-width:680px}

/* ============================================================
   PRODUCT — illustrated walkthrough
   ============================================================ */
.page-head{padding:148px 0 48px;border-bottom:1px solid var(--line);position:relative}
.page-title{font-size:clamp(34px,5vw,58px);margin:16px 0 18px;max-width:17ch}
.page-head .lead{max-width:62ch;font-size:18px}
.head-chips{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.hchip{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid var(--line-2);border-radius:100px;font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;font-size:13px;color:var(--muted)}
.hchip b{color:var(--green)}

.flow-wrap{padding:24px 0 40px}
.flow-step{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:60px 0;border-bottom:1px solid var(--line)}
.flow-step:last-child{border-bottom:0}
.flow-step:nth-child(even) .flow-art{order:-1}
.flow-num{display:inline-block;font-family:"Space Grotesk",Inter,sans-serif;font-size:13px;font-weight:700;color:var(--green);letter-spacing:.14em;padding:5px 11px;border:1px solid rgba(53,230,164,.3);border-radius:100px;background:rgba(53,230,164,.07)}
.flow-text h2{font-size:clamp(26px,3vw,38px);margin:16px 0 16px}
.flow-text>p{font-size:17px;max-width:46ch;color:var(--muted)}
.flow-text>p b{color:var(--text);font-weight:600}
.flow-points{list-style:none;margin-top:24px;display:grid;gap:11px}
.flow-points li{display:flex;align-items:center;gap:11px;color:#ddd4c6;font-size:14.5px}
.flow-points .icon{color:var(--green);width:17px;height:17px;flex:none}
.flow-art{position:relative}
.art-svg{width:100%;height:auto;border:1px solid var(--line);border-radius:22px;background:radial-gradient(120% 110% at 50% 0,rgba(53,230,164,.06),transparent 58%),var(--panel);box-shadow:var(--shadow)}
.art-svg text{fill:#f6f1e9;font-family:Inter,sans-serif}
.art-h{font-family:"Space Grotesk",sans-serif!important;font-size:18px;font-weight:700}
.art-tag{font-family:"Space Grotesk",sans-serif!important;font-size:11px;font-weight:700;letter-spacing:1px;fill:#8a7f6f}
.art-label{font-size:14px;fill:#8a7f6f}
.art-val{font-family:"Space Grotesk",sans-serif!important;font-size:15.5px;font-weight:600}
.art-mint{fill:#8effd1!important}
.art-amber{fill:#ffd166!important}
.art-coin{font-family:"Space Grotesk",sans-serif!important;font-size:11px;font-weight:700}
.art-big{font-family:"Space Grotesk",sans-serif!important;font-size:36px;font-weight:700}
.art-sub{font-size:12.5px;fill:#8a7f6f}
.art-node-k{font-family:"Space Grotesk",sans-serif!important;font-size:12px;font-weight:700;fill:#b7ac9c}
.art-node-v{font-family:"Space Grotesk",sans-serif!important;font-size:13.5px;font-weight:600}
.art-svg [data-anim]{transform-box:fill-box;transform-origin:center}
.art-svg [data-anim="bar"]{transform-origin:left center}

.gtype-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gtype{border:1px solid var(--line);border-radius:16px;padding:24px;background:linear-gradient(180deg,rgba(246,241,233,.04),rgba(246,241,233,.01));transition:.28s var(--ease)}
.gtype:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow)}
.gtype span{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:12px;color:var(--green);background:rgba(53,230,164,.08)}
.gtype b{display:block;margin-top:18px;font-family:"Space Grotesk",Inter,sans-serif;font-size:16px}
.gtype small{display:block;margin-top:4px;color:var(--muted);font-size:13px}

.format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.format-card small{display:block;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:var(--faint);font-size:13px;line-height:1.5;position:relative}
.guardrail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.guardrail-grid>div{border:1px solid var(--line);border-radius:14px;padding:18px;background:rgba(246,241,233,.025);transition:.25s}
.guardrail-grid>div:hover{border-color:var(--line-2);background:rgba(53,230,164,.04)}
.guardrail-grid b{display:block;font-family:"Space Grotesk",Inter,sans-serif;font-size:14px;color:var(--text)}
.guardrail-grid span{display:block;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.45}

.trust-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:start}
.trust-list{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(246,241,233,.04),rgba(246,241,233,.01))}
.trust-list>div{display:grid;grid-template-columns:128px 1fr;gap:18px;padding:20px 22px;border-top:1px solid var(--line);align-items:baseline}
.trust-list>div:first-child{border-top:0}
.trust-list b{font-family:"Space Grotesk",Inter,sans-serif;color:var(--text);font-size:15px}
.trust-list span{color:var(--muted);font-size:14.5px}

@media(max-width:900px){
  .flow-step{grid-template-columns:1fr;gap:30px;padding:48px 0}
  .flow-step:nth-child(even) .flow-art{order:0}
  .gtype-grid{grid-template-columns:repeat(2,1fr)}
  .format-grid{grid-template-columns:1fr}
  .guardrail-grid{grid-template-columns:repeat(2,1fr)}
  .trust-split{grid-template-columns:1fr;gap:30px}
}
@media(max-width:560px){
  .gtype-grid{grid-template-columns:1fr}
  .guardrail-grid{grid-template-columns:1fr}
  .trust-list>div{grid-template-columns:1fr;gap:4px}
}

/* ============================================================
   TOKEN — proof dashboard
   ============================================================ */
.token-head{padding:148px 0 46px;border-bottom:1px solid var(--line)}
.verify-badge{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border:1px solid rgba(53,230,164,.32);border-radius:100px;background:rgba(53,230,164,.08);color:var(--green);font-size:12.5px;font-weight:600;margin-bottom:22px}
.verify-badge .icon{width:15px;height:15px}
.token-head .lead{max-width:62ch;font-size:18px}
.ca-bar{display:flex;align-items:center;gap:14px;margin-top:28px;width:100%;max-width:660px;padding:0 8px 0 16px;height:54px;border:1px solid var(--line-2);border-radius:12px;background:rgba(0,0,0,.3);cursor:pointer;transition:.2s}
.ca-bar:hover{border-color:var(--line-3)}
.ca-bar .ca-k{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:700;color:var(--green);letter-spacing:1px;flex:none}
.ca-bar .ca{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left}
.ca-bar .cbtn{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:rgba(246,241,233,.05);color:var(--muted)}
.ca-bar.copied .cbtn{color:var(--green)}

.proof-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;padding:26px;background:linear-gradient(180deg,rgba(246,241,233,.04),rgba(246,241,233,.01));transition:.28s var(--ease)}
.pcard:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow)}
.pstatus{position:absolute;top:22px;right:22px;display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--green);font-weight:600}
.pstatus i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.picon{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:12px;color:var(--green);background:rgba(53,230,164,.08);margin-bottom:20px}
.pcard b{font-family:"Space Grotesk",Inter,sans-serif;font-size:15px;color:var(--muted);font-weight:600}
.pbig{font-family:"Space Grotesk",Inter,sans-serif;font-size:25px;font-weight:700;color:var(--text);margin:6px 0 10px}
.pcard small{color:var(--faint);font-size:13px;line-height:1.55;flex:1}
.plink{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:var(--green);font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;font-size:14px}
.plink .icon{width:15px;height:15px}

.viz-split{display:grid;grid-template-columns:.95fr 1.05fr;gap:54px;align-items:center}
.supply-num{margin-top:26px;font-family:"Space Grotesk",Inter,sans-serif;font-size:34px;font-weight:700;color:var(--text)}
.supply-num em{font-style:normal;font-size:15px;color:var(--faint);font-family:Inter,sans-serif}
.alloc-stack{display:flex;gap:4px;height:32px;border-radius:8px}
.alloc-seg{display:block;height:100%;border-radius:5px;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.reveal.in .alloc-seg{transform:scaleX(1)}
.alloc-seg:nth-child(1){transition-delay:.05s}.alloc-seg:nth-child(2){transition-delay:.13s}.alloc-seg:nth-child(3){transition-delay:.21s}.alloc-seg:nth-child(4){transition-delay:.29s}.alloc-seg:nth-child(5){transition-delay:.37s}.alloc-seg:nth-child(6){transition-delay:.45s}
.alloc-legend{display:grid;grid-template-columns:1fr 1fr;gap:13px 28px;margin-top:26px}
.alloc-legend div{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--muted)}
.alloc-legend i{width:11px;height:11px;border-radius:3px;flex:none}
.alloc-legend b{margin-left:auto;color:var(--text);font-family:"Space Grotesk",Inter,sans-serif}

.unlock{display:grid;grid-template-columns:1.45fr .55fr;gap:40px;align-items:end;border:1px solid var(--line);border-radius:20px;padding:30px;background:linear-gradient(180deg,rgba(246,241,233,.03),transparent)}
.unlock-cliff{border-left:2px dashed rgba(255,209,102,.5);padding-left:10px;margin-bottom:14px}
.unlock-cliff span{font-size:12px;color:var(--amber);font-weight:600}
.unlock-bars{display:flex;align-items:flex-end;gap:4px;height:140px}
.ub{flex:1;height:100%;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--green),rgba(47,212,196,.35));transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.reveal.in .ub{transform:scaleY(1)}
.unlock-facts{display:grid;gap:18px}
.unlock-facts div span{display:block;font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.unlock-facts div b{font-family:"Space Grotesk",Inter,sans-serif;font-size:20px;color:var(--text)}
.unlock-link{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;font-size:14px}
.unlock-link .icon{width:15px;height:15px}

.spec{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(246,241,233,.04),rgba(246,241,233,.01))}
.spec-row{display:grid;grid-template-columns:200px 1fr 40px;gap:18px;align-items:center;padding:16px 22px;border-top:1px solid var(--line)}
.spec-row:first-child{border-top:0}
.spec-row>span{color:var(--faint);font-size:14px}
.spec-row b{font-family:"Space Grotesk",Inter,sans-serif;color:var(--text);font-weight:600;word-break:break-all}
.spec-row .mono{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;font-weight:400}
.spec-row .ok{color:var(--green)}
.spec-row>i{display:block}
.copy-mini{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--line-2);background:rgba(246,241,233,.04);color:var(--muted);cursor:pointer;transition:.2s}
.copy-mini:hover{color:var(--text);border-color:var(--line-3)}
.copy-mini.copied{color:var(--green);border-color:rgba(53,230,164,.4)}
.copy-mini .icon{width:16px;height:16px}

.market-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mcard{border:1px solid var(--line);border-radius:14px;padding:22px;background:linear-gradient(180deg,rgba(246,241,233,.04),rgba(246,241,233,.01));transition:.25s var(--ease)}
.mcard:hover{border-color:var(--line-2);transform:translateY(-3px)}
.mcard>span{display:block;color:var(--faint);font-size:13px}
.mcard b{display:block;margin-top:8px;font-family:"Space Grotesk",Inter,sans-serif;font-size:18px;color:var(--text)}
.mcard .mono{font-family:ui-monospace,Menlo,monospace;font-size:16px}
.mcard small{display:block;margin-top:6px;color:var(--muted);font-size:13px}

@media(max-width:900px){
  .proof-cards{grid-template-columns:1fr}
  .viz-split{grid-template-columns:1fr;gap:32px}
  .unlock{grid-template-columns:1fr;gap:24px}
  .spec-row{grid-template-columns:150px 1fr 36px}
  .market-grid{grid-template-columns:1fr}
  .alloc-legend{grid-template-columns:1fr}
}
@media(max-width:560px){
  .ca-bar .ca{font-size:11px}
  .spec-row{grid-template-columns:1fr;gap:5px}
  .spec-row .copy-mini{display:none}
}

/* ============================================================
   ROADMAP — the journey
   ============================================================ */
.journey{padding:48px 0 24px}
.milestones{position:relative;display:grid;gap:26px;padding-left:64px;max-width:860px}
.journey-track{position:absolute;left:23px;top:14px;bottom:14px;width:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
.journey-fill{position:absolute;inset:0;transform-origin:top center;transform:scaleY(0);background:var(--grad);box-shadow:0 0 14px rgba(53,230,164,.6)}
.milestone{position:relative}
.m-node{position:absolute;left:-49px;top:26px;width:16px;height:16px;border-radius:50%;border:2px solid var(--line-3);background:var(--bg-deep);transition:.45s var(--ease);z-index:2}
.milestone.reached .m-node{border-color:var(--green);background:var(--green);box-shadow:0 0 0 5px rgba(53,230,164,.16)}
.m-card{border:1px solid var(--line);border-radius:18px;padding:26px 28px;background:linear-gradient(180deg,rgba(246,241,233,.04),rgba(246,241,233,.012));transition:border-color .4s}
.milestone.reached .m-card{border-color:var(--line-2)}
.m-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:4px}
.m-top time{font-family:"Space Grotesk",Inter,sans-serif;color:var(--green);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.12em}
.m-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 12px;border-radius:100px;border:1px solid var(--line-2);color:var(--faint)}
.m-status .icon{width:13px;height:13px}
.m-status.done{color:var(--green);border-color:rgba(53,230,164,.35);background:rgba(53,230,164,.08)}
.m-card h3{font-size:23px;margin:6px 0 16px}
.m-card ul{list-style:none;display:grid;gap:10px}
.m-card li{position:relative;padding-left:22px;color:var(--muted);font-size:14.5px;line-height:1.5}
.m-card li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--green);opacity:.55}
@media(max-width:560px){
  .milestones{padding-left:42px}
  .journey-track{left:13px}
  .m-node{left:-37px}
  .m-card{padding:22px}
}

/* ============================================================
   INNER PAGES (preserved)
   ============================================================ */
.page-hero{min-height:60svh;border-bottom:1px solid var(--line);padding:148px 0 70px}
.page-hero .lead{max-width:720px}
.page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.table-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(246,241,233,.04),rgba(246,241,233,.01))}
.fact-row{display:grid;grid-template-columns:210px 1fr;gap:18px;padding:18px 20px;border-top:1px solid var(--line)}
.fact-row:first-child{border-top:0}
.fact-row span{color:var(--muted)}
.fact-row b{font-family:"Space Grotesk",Inter,sans-serif;word-break:break-word}
.allocation{display:grid;gap:14px;margin-top:24px}
.alloc-row{display:grid;grid-template-columns:180px 1fr 70px;align-items:center;gap:14px}
.alloc-bar{height:10px;border-radius:8px;background:rgba(246,241,233,.07);overflow:hidden}
.alloc-bar span{display:block;height:100%;border-radius:8px;background:var(--grad)}
.timeline{display:grid;gap:16px}
.timeline-item{display:grid;grid-template-columns:170px 1fr;gap:20px;border:1px solid var(--line);border-radius:16px;padding:24px;background:rgba(246,241,233,.025);transition:.3s var(--ease)}
.timeline-item:hover{border-color:var(--line-2);transform:translateY(-3px)}
.timeline-item time{font-family:"Space Grotesk",Inter,sans-serif;color:var(--green);font-weight:700}
.timeline-item ul{margin-top:10px;color:var(--muted);padding-left:18px}
.timeline-item li{margin:6px 0}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stat-card{min-height:148px;border:1px solid var(--line);border-radius:14px;padding:22px;background:linear-gradient(180deg,rgba(246,241,233,.04),rgba(246,241,233,.01));transition:.3s var(--ease)}
.stat-card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow)}
.stat-card span{display:block;color:var(--muted);font-size:13px;margin-bottom:10px}
.stat-card b{display:block;font-family:"Space Grotesk",Inter,sans-serif;font-size:21px;line-height:1.16;word-break:break-word}
.stat-card small{display:block;margin-top:12px;color:var(--faint);font-size:13px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:64px 0 30px;background:rgba(0,0,0,.2)}
.footer-grid{display:grid;grid-template-columns:1.3fr .85fr 1fr 1fr;gap:34px}
.footer p{max-width:310px;margin-top:14px;font-size:14px}
.footer h4{font-family:"Space Grotesk",Inter,sans-serif;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-bottom:14px}
.footer a:not(.brand){display:block;color:var(--muted);padding:5px 0;font-size:14.5px;transition:.2s}
.footer a:not(.brand):hover{color:var(--green)}
.fine-print{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:960px){
  .nav-links{display:none}
  .hero{min-height:auto;padding:120px 0 60px}
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .orb-wrap{order:-1;width:min(420px,80vw);margin-bottom:8px}
  .hero-copy{max-width:none}
  .story{grid-template-columns:1fr;gap:36px}
  .story-stage{position:relative;top:0;height:340px;order:-1}
  .split,.two-col,.proof-panel,.market-panel{grid-template-columns:1fr;gap:36px}
  .skill-showcase{grid-template-columns:1fr;gap:34px}
  .daily-device{order:-1;width:min(520px,88vw)}
  .proof-grid,.steps,.page-grid{grid-template-columns:1fr}
  .skill-cards{grid-template-columns:1fr}
  .stats-band{grid-template-columns:repeat(2,1fr)}
  .launch-panel{flex-direction:column;align-items:flex-start;padding:36px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .fact-row{grid-template-columns:1fr;gap:4px}
  .timeline-item{grid-template-columns:1fr}
  .alloc-row{grid-template-columns:1fr;gap:6px}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .site-nav .button{display:none}
  .hero-meta{gap:18px}
  .stats-band,.stat-grid,.footer-grid{grid-template-columns:1fr}
  .actions .button,.actions .copy-chip{width:100%}
  .copy-chip{justify-content:space-between}
  .launch-panel{padding:28px}
  .device-shell{padding:16px;border-radius:22px}
  .tile-stack{height:300px}
  .tile{width:50px;height:50px;border-radius:11px}
  .tile span{width:24px;height:24px}
  .mark-a span::before{width:20px;height:20px;border-width:3px}
  .mark-b span::before{width:20px;height:20px;border-radius:5px}
  .mark-c span::before{width:21px;height:5px;box-shadow:0 8px 0 #d9922d,0 16px 0 #d9922d}
  .mark-d span::before{border-left-width:12px;border-right-width:12px;border-bottom-width:22px}
  .mark-e span::before,.mark-f span::before{width:22px;height:22px}
  .skill-ledger{grid-template-columns:1fr}
  .settle-card{right:16px;bottom:168px}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .arc.draw{stroke-dashoffset:0}
}