/* The League — scroll-story landing. Palette + type sampled from thefiberleague.com */
:root{
  --bg: oklch(0.13 0.005 270);
  --bg-2: oklch(0.17 0.005 270);
  --surface: oklch(0.24 0.005 270);
  --line: oklch(0.32 0.008 270);
  --text: oklch(0.97 0 0);
  --muted: oklch(0.70 0.008 270);
  --accent: oklch(0.72 0.16 55);
  --accent-hot: oklch(0.75 0.183 55.9);

  /* 8 size tokens, locked */
  --t-mega: clamp(3.4rem, 12vw, 10.5rem);
  --t-h1:   clamp(2.6rem, 8.2vw, 7rem);
  --t-h2:   clamp(1.9rem, 4.4vw, 3.6rem);
  --t-num:  clamp(2.1rem, 5vw, 4rem);
  --t-h3:   clamp(1.05rem, 1.5vw, 1.3rem);
  --t-lede: clamp(1rem, 1.35vw, 1.2rem);
  --t-body: 0.975rem;
  --t-micro: 0.75rem;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter, system-ui, sans-serif; font-size:var(--t-body); line-height:1.6;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
section{position:relative}

.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* type primitives */
.eyebrow{
  font-family:Inter; font-size:var(--t-micro); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 1rem;
}
.h1{
  font-family:Sora, sans-serif; font-weight:800; font-size:var(--t-h1);
  letter-spacing:-.05em; line-height:.92; margin:0;
}
.h2{
  font-family:Sora, sans-serif; font-weight:700; font-size:var(--t-h2);
  letter-spacing:-.04em; line-height:1.02; margin:0;
}
.lede{ font-size:var(--t-lede); color:var(--muted); margin:1.1rem 0 0; max-width:46ch }

/* ---------- nav + HUD ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1rem,4vw,3rem);
  transition:border-color .3s;
  background:color-mix(in oklab, var(--bg) 94%, transparent);
  backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;
}
.nav.is-solid{ border-color:var(--line) }
.nav__logo img{ height:22px; width:auto }
.nav__links{ display:flex; align-items:center; gap:clamp(.9rem,2vw,1.9rem); font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; font-weight:600 }
.nav__links a{ text-decoration:none; color:var(--muted); transition:color .2s }
.nav__links a:hover{ color:var(--text) }
.nav__cta{
  color:var(--bg) !important; background:var(--accent); padding:.6rem 1.1rem; border-radius:999px;
}
.nav__cta:hover{ background:var(--accent-hot) }

.hud{
  position:fixed; z-index:45; left:clamp(1rem,4vw,3rem); bottom:1.6rem;
  display:flex; align-items:center; gap:.7rem; opacity:0; transition:opacity .4s;
  padding:.5rem .9rem; border-radius:999px; border:1px solid var(--line);
  background:color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter:blur(14px);
}
.hud.is-on{ opacity:1 }
.hud__rail{ position:relative; width:clamp(90px,14vw,190px); height:2px; background:var(--line); display:block }
.hud__fill{ position:absolute; inset:0 auto 0 0; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left }
.hud__label{ font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }

/* ---------- BEAT 1 hero ---------- */
.hero{ height:calc(100vh + 2600px) }
.hero__pin{ position:sticky; top:0; height:100vh; overflow:hidden }
#fiber{ position:absolute; inset:0; width:100%; height:100% }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, color-mix(in oklab, var(--bg) 92%, transparent) 2%, color-mix(in oklab, var(--bg) 55%, transparent) 26%, transparent 48%),
    radial-gradient(88% 78% at 50% 50%, transparent 6%, color-mix(in oklab, var(--bg) 55%, transparent) 34%, color-mix(in oklab, var(--bg) 92%, transparent) 62%, var(--bg) 78%);
}
.hero__copy{
  position:absolute; z-index:3; left:clamp(1.2rem,6vw,5.5rem); top:50%; transform:translateY(-50%);
  max-width:min(46rem, 82vw);
}
.hero__device{
  position:absolute; z-index:2; right:-2vw; bottom:-4vh; width:min(47vw,600px);
  opacity:0; will-change:transform,opacity;
}
.hero__device img{ border-radius:1.4rem }
.hero__cue{
  position:absolute; z-index:4; left:50%; bottom:2.2rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.hero__cue i{ width:1px; height:34px; background:linear-gradient(var(--accent), transparent); display:block }

/* ---------- BEAT 2 band ---------- */
.band{ padding:clamp(5rem,12vh,9rem) clamp(1.2rem,6vw,5.5rem) clamp(4rem,9vh,7rem) }
.band__line{
  font-family:Sora; font-weight:700; font-size:var(--t-h2); letter-spacing:-.04em; line-height:1.05;
  margin:0 0 clamp(2.4rem,6vh,4rem); max-width:24ch;
}
.band__line span{ display:inline-block; will-change:transform,opacity }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line) }
.stat{ background:var(--bg); padding:clamp(1.4rem,3vw,2.2rem) }
.stat__n{
  display:block; font-family:Sora; font-weight:800; font-size:var(--t-num);
  letter-spacing:-.05em; color:var(--accent); font-variant-numeric:tabular-nums;
}
.stat__k{ display:block; margin-top:.5rem; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
.band__src{ margin:1.2rem 0 0; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
.band__src a{ color:var(--muted) }

/* ---------- BEAT 3 ranks ---------- */
.ranks{ height:calc(100vh + 5200px) }
.ranks__pin{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(1rem,3vh,2.2rem);
  padding:5rem clamp(1.2rem,6vw,5.5rem) 4rem; text-align:center; overflow:hidden;
}
/* badge carousel */
.car{ position:relative; width:100%; height:clamp(120px,17vh,190px) }
.car{
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}
.car__track{
  position:absolute; top:0; left:50%; height:100%; display:flex; align-items:center;
  gap:clamp(1.4rem,3vw,2.6rem); will-change:transform;
}
.car__cell{ flex:0 0 auto; display:grid; place-items:center; will-change:transform,opacity }
.car__cell img{ width:clamp(78px,10vw,124px); height:auto; will-change:transform }
.car__spot{
  position:absolute; left:50%; top:50%; width:clamp(120px,15vw,190px); height:clamp(120px,15vw,190px);
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in oklab, var(--accent) 26%, transparent), transparent 68%);
}
/* tier detail */
.tier{ display:grid; gap:.7rem; justify-items:center; min-height:11rem; align-content:start }
.tier__meta{ margin:0; color:var(--muted); font-size:var(--t-lede) }
.tier__meta b{ color:var(--text); font-variant-numeric:tabular-nums }
.tier__prizes{
  list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-wrap:wrap;
  gap:.5rem; justify-content:center;
}
.tier__prizes li{
  border:1px solid var(--line); border-radius:999px; padding:.42rem 1rem;
  font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.tier__gold{
  margin:.2rem 0 0; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); opacity:0;
}
.ranks__rail{ position:relative; width:min(420px,70vw); height:2px; background:var(--line) }
.ranks__rail i{ position:absolute; inset:0 auto 0 0; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left }
.ranks__quote{ margin:0; max-width:66ch; color:var(--muted); font-size:var(--t-body) }
.ranks__quote a{ color:var(--accent) }

.cut{ height:70vh; display:grid; place-items:center; overflow:hidden; background:var(--bg) }
.cut::before{
  content:""; position:absolute; inset:0; background:var(--accent-hot);
  transform:scaleY(var(--wipe,0)); transform-origin:bottom; will-change:transform;
}
.cut p{
  position:relative; margin:0; z-index:2; color:var(--bg);
  font-family:Sora; font-weight:800; font-size:var(--t-h2); letter-spacing:-.04em; text-transform:uppercase;
  text-align:center; padding:0 1.2rem; opacity:0; will-change:transform,opacity;
}

/* ---------- BEAT 5 app relay ---------- */
.app{ padding:0 clamp(1.2rem,6vw,5.5rem) }
.app__grid{ display:grid; grid-template-columns:1fr .9fr; gap:clamp(2rem,6vw,5rem); align-items:start }
.app__step{ min-height:100vh; display:flex; flex-direction:column; justify-content:center }
.app__stack{ position:sticky; top:0; height:100vh; display:grid; place-items:center }
.app__shot{ position:absolute; margin:0; width:min(34vw,430px); opacity:0; will-change:transform,opacity }
.app__shot img{ border-radius:1.2rem; border:1px solid var(--line) }
.app__shot.is-on{ opacity:1 }
.feats{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:22vh }
.feat{ background:var(--bg); padding:clamp(1.3rem,2.6vw,2rem); will-change:transform,opacity }
.feat h3{ font-family:Sora; font-weight:700; font-size:var(--t-h3); letter-spacing:-.02em; margin:0 0 .6rem }
.feat p{ margin:0; color:var(--muted) }

/* ---------- BEAT 6 territory ---------- */
.territory{ height:calc(100vh + 1400px) }
.territory__pin{
  position:sticky; top:0; height:100vh; padding:6rem clamp(1.2rem,6vw,5.5rem) 4rem;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(1.6rem,4vh,2.6rem); overflow:hidden;
}
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line) }
.tile{ background:var(--bg); padding:clamp(.8rem,1.6vw,1.2rem); will-change:transform,opacity }
.tile__n{ font-family:Sora; font-weight:700; font-size:var(--t-h3); letter-spacing:-.02em; display:block }
.tile__v{ display:block; margin-top:.35rem; color:var(--accent); font-variant-numeric:tabular-nums; font-weight:600 }
.tile__k{ display:block; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }

/* ---------- BEAT 7 sign-off ---------- */
.sign{ height:calc(100vh + 800px) }
.sign__pin{ position:sticky; top:0; height:100vh; display:grid; place-items:center; overflow:hidden }
.sign__svg{ position:absolute; height:min(46vh,320px); color:var(--accent) }
.sign__logo{ position:absolute; width:min(62vw,660px); opacity:0; will-change:opacity,transform }

/* ---------- BEAT 8 close ---------- */
.close{ padding:clamp(5rem,14vh,10rem) clamp(1.2rem,6vw,5.5rem); text-align:center }
.close .lede{ margin-inline:auto }
.close__cta{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2.4rem }
.btn{
  text-decoration:none; border:1px solid var(--line); border-radius:999px;
  padding:.85rem 1.5rem; font-size:var(--t-micro); font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  transition:border-color .2s, background .2s, color .2s;
}
.btn:hover{ border-color:var(--text) }
.btn--primary{ background:var(--accent); border-color:var(--accent); color:var(--bg) }
.btn--primary:hover{ background:var(--accent-hot); border-color:var(--accent-hot) }
.close__ig{ margin:1.6rem 0 0; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
.close__ig a{ color:var(--accent); text-decoration:none }
.close__laurel{ width:min(200px,44vw); margin:clamp(2.6rem,7vh,4.5rem) auto 0; opacity:.85 }

.foot{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  padding:2rem clamp(1.2rem,6vw,5.5rem); border-top:1px solid var(--line);
  font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.foot nav{ display:flex; gap:1.4rem }
.foot a{ text-decoration:none }
.foot a:hover{ color:var(--text) }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{ height:calc(100vh + 2000px) }
  .hero__copy{ top:auto; bottom:38vh; transform:none }
  .hero__device{ width:74vw; right:-16vw; bottom:-6vh }
  .ranks{ height:calc(100vh + 4400px) }
  .ranks__quote{ display:none }
  .tier{ min-height:8.5rem }
  .app__grid{ grid-template-columns:1fr }
  .app__stack{ position:relative; height:auto; top:auto; order:-1; margin-bottom:2.6rem; place-items:center }
  .app__shot{ position:relative; width:min(60vw,290px) }
  .feats{ margin-bottom:8vh }
  .app__step{ min-height:0; padding-block:1rem 2.5rem }
  .tiles{ grid-template-columns:repeat(2,1fr) }
  .territory{ height:calc(100vh + 1200px) }
}
@media (max-width:640px){
  .nav__links a:not(.nav__cta){ display:none }
  .tiles{ grid-template-columns:repeat(2,1fr) }
}

@media (prefers-reduced-motion:reduce){
  .hero{ height:auto }
  .hero__pin{ position:relative; height:auto; padding:9rem 0 3rem }
  .hero__copy{ position:relative; top:auto; bottom:auto; transform:none; padding:0 clamp(1.2rem,6vw,5.5rem) }
  .hero__device{ position:relative; opacity:1 !important; transform:none !important; width:min(80vw,460px); margin:3rem auto 0; right:auto; bottom:auto }
  .hero__cue{ display:none }
  #fiber{ display:none }
  .ranks, .territory, .sign{ height:auto }
  .ranks__pin, .territory__pin, .sign__pin{ position:relative; height:auto; padding-block:5rem }
  .car{ height:auto; overflow:visible }
  .car::before,.car::after,.car__spot{ display:none }
  .car__track{ position:relative; left:auto; transform:none !important; flex-wrap:wrap; justify-content:center }
  .tier{ min-height:0 }
  .tier__gold{ opacity:1 }
  .ranks__rail{ display:none }
  .cut::before{ transform:scaleY(1) }
  .cut p{ opacity:1 !important; transform:none !important }
  .app__stack{ position:relative; height:auto; display:grid; gap:1.4rem; grid-template-columns:repeat(3,1fr); top:auto; order:0 }
  .app__shot{ position:relative; opacity:1 !important; transform:none !important; width:100% }
  .feat{ opacity:1 !important; transform:none !important }
  .feats{ margin-bottom:0 }
  .app__step{ min-height:0; padding-block:3rem }
  .tile{ opacity:1 !important; transform:none !important }
  .sign__svg{ display:none }
  .sign__logo{ position:relative; opacity:1 !important; transform:none !important }
  .stat__n{ }
}