:root{
  --bg:#050708;
  --bg-elevated:#0a0e12;
  --text:#ffffff;
  --text-soft:rgba(255,255,255,.72);
  --text-mute:rgba(255,255,255,.48);
  --amber:#ffb547;
  --cyan:#2ef2ff;
  --line:rgba(255,255,255,.1);
  --nav-h:64px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.nav-brand span,.giant-mark,.eco-title{
  font-family:"Inter Tight",Inter,system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-.035em;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--amber)}
img{display:block}
.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.skip{
  position:fixed;left:12px;top:-80px;z-index:100;
  padding:10px 14px;background:#111;color:#fff;border-radius:8px;
}
.skip:focus{top:12px}
a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* FLOATING NAV */
.nav{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  z-index:50;display:flex;align-items:center;gap:28px;
  padding:10px 12px 10px 16px;
  background:rgba(10,14,18,.72);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.nav-brand{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:700;letter-spacing:-.03em;
}
.nav-brand img{border-radius:7px}
.nav-links{display:flex;gap:20px}
.nav-links a{
  font-size:13px;font-weight:500;color:var(--text-soft);
  transition:color .2s;
}
.nav-links a:hover{color:var(--text)}
.nav-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 16px;border-radius:999px;
  background:#fff;color:#0a0a0a;
  font-size:13px;font-weight:600;
  transition:transform .2s var(--ease),background .2s;
}
.nav-pill:hover{background:var(--amber);color:#14100a;transform:translateY(-1px)}

/* STORY / SCRUB */
.story{
  position:relative;
  height:500vh;
}
.story-sticky{
  position:sticky;top:0;
  height:100vh;height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:var(--bg);
  /* vignette matching video edges */
  box-shadow:inset 0 0 120px 40px rgba(0,0,0,.55);
}
.scrub-img,.scrub-canvas,.scrub-fallback{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.scrub-canvas{z-index:1}

.scrub-img{z-index:1}
.scrub-fallback[hidden],.scrub-fallback{display:none!important}
.scrub-fallback.is-visible{display:block!important;z-index:1}

.scrub-fallback{z-index:1;object-fit:cover}
.story-sticky::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, transparent 35%, rgba(5,7,8,.55) 100%),
    linear-gradient(90deg, rgba(5,7,8,.72) 0%, rgba(5,7,8,.25) 38%, rgba(5,7,8,.15) 62%, rgba(5,7,8,.45) 100%);
}

.story-copy{
  position:relative;z-index:3;
  width:min(1120px,calc(100% - 48px));
  height:100%;
  display:flex;align-items:center;
  pointer-events:none;
}
.step{
  position:absolute;left:0;top:50%;
  transform:translateY(-50%);
  max-width:min(420px,42vw);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.step.is-active{opacity:1;pointer-events:auto}
.step-kicker{
  font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);
  margin-bottom:14px;
}
.step h2{
  font-size:clamp(32px,4.2vw,52px);
  line-height:1.08;
  margin-bottom:14px;
  color:var(--text);
}
.step-body{
  font-size:16px;line-height:1.65;color:var(--text-soft);
  max-width:36ch;
}
.step-ctas{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;
  pointer-events:auto;
}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:999px;
  font-size:14px;font-weight:600;
  transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s;
}
.pill:hover{transform:translateY(-2px)}
.pill-solid{background:#fff;color:#0a0a0a}
.pill-solid:hover{background:var(--amber);color:#14100a}
.pill-outline{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.35);
}
.pill-outline:hover{border-color:var(--cyan);color:var(--cyan)}

.story-progress{
  position:absolute;left:0;right:0;bottom:0;z-index:4;height:2px;
  background:rgba(255,255,255,.08);
}
.story-progress-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--amber),var(--cyan));
  transition:width .05s linear;
}

/* ECOSYSTEM — airy large-type list */
.ecosystem{
  padding:160px 0 120px;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(255,181,71,.06), transparent 60%),
    var(--bg);
}
.eco-inner{max-width:900px}
.ecosystem .eyebrow{
  color:var(--amber);margin-bottom:16px;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.eco-title{
  font-size:clamp(40px,6vw,72px);line-height:1.05;
  margin-bottom:72px;
}
.eco-list{list-style:none;border-top:1px solid var(--line)}
.eco-item{
  display:flex;align-items:baseline;justify-content:space-between;gap:32px;
  padding:42px 0;
  border-bottom:1px solid var(--line);
}
.eco-item h3{
  font-size:clamp(28px,3.5vw,40px);line-height:1.1;margin-bottom:8px;
}
.eco-item p{color:var(--text-soft);font-size:15px;max-width:42ch}
.eco-item-links{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  flex-shrink:0;
}
.eco-item-links a{
  font-size:14px;font-weight:500;color:var(--amber);
  border-bottom:1px solid rgba(255,181,71,.35);
}
.eco-item-links a:hover{color:var(--cyan);border-color:var(--cyan)}
.soon-label{
  font-size:12px;color:var(--text-mute);
  border:1px dashed rgba(255,255,255,.22);
  border-radius:999px;padding:5px 12px;
}

/* FINAL CTA */
.final-cta{
  padding:140px 0 120px;
  text-align:center;
  background:
    radial-gradient(700px 400px at 50% 50%, rgba(255,181,71,.1), transparent 65%),
    var(--bg);
}
.final-inner h2{
  font-size:clamp(36px,5.5vw,64px);line-height:1.08;
  margin-bottom:36px;
}
.final-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.pill-light{
  background:#fff;color:#0a0a0a;padding:14px 26px;border-radius:999px;
  font-size:15px;font-weight:600;
  transition:transform .2s var(--ease),background .2s;
}
.pill-light:hover{background:var(--amber);color:#14100a;transform:translateY(-2px)}
.pill-outline-light{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.35);
  padding:14px 26px;border-radius:999px;
  font-size:15px;font-weight:600;
  transition:transform .2s var(--ease),border-color .2s,color .2s;
}
.pill-outline-light:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}

/* GIANT FOOTER */
.giant-footer{
  padding:56px 0 64px;
  border-top:1px solid var(--line);
  background:var(--bg);
  overflow-x:hidden;
}
.giant-mark{
  font-size:26vw;
  line-height:.8;letter-spacing:-.08em;
  margin:0 0 44px;
  width:100%;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-align:center;
  background:linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,.5) 70%,rgba(255,181,71,.35) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 40px rgba(255,181,71,.12));
}
.giant-links{
  display:flex;flex-wrap:wrap;gap:12px 28px;
  margin-bottom:28px;
}
.giant-links a{
  font-size:14px;font-weight:500;color:var(--text-soft);
  transition:color .2s;
}
.giant-links a:hover{color:var(--amber)}
.giant-legal{
  font-size:12px;color:var(--text-mute);line-height:1.6;
  max-width:60ch;
}

@media (max-width:800px){
  .nav{gap:14px;padding:8px 10px 8px 12px;top:12px}
  .nav-links{display:none}
  .story{height:420vh}
  .step{max-width:min(100%,78vw)}
  .step h2{font-size:clamp(26px,7vw,36px)}
  .step-body{font-size:15px}
  .eco-item{flex-direction:column;align-items:flex-start;gap:16px;padding:28px 0}
  .story-sticky::after{
    background:
      radial-gradient(ellipse 90% 70% at 50% 40%, transparent 25%, rgba(5,7,8,.65) 100%),
      linear-gradient(180deg, rgba(5,7,8,.35) 0%, rgba(5,7,8,.15) 40%, rgba(5,7,8,.75) 100%);
  }
  .story-copy{align-items:flex-end;padding-bottom:14vh}
  .step{top:auto;bottom:12vh;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .story{height:auto;min-height:100vh}
  .story-sticky{position:relative;height:100vh}
  .step{opacity:0;pointer-events:none}
  .step[data-step="3"]{opacity:1;pointer-events:auto}
}