/* ---------- fonts ---------- */
@font-face{font-family:Bungee;src:url(/fonts/bungee.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo Black';src:url(/fonts/archivoblack.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Grotesk;src:url(/fonts/grotesk500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Grotesk;src:url(/fonts/grotesk700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Space Mono';src:url(/fonts/mono700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --sky-1:#2E7FD1; --sky-2:#5CACE8; --sky-3:#9BD0F5; --sky-4:#D6ECFB;
  --red:#E0261A; --red-hot:#FF4433; --orange:#FF7A1A; --motor:#1E9AD6;
  --night:#08131F; --night-2:#0E2033; --ink:#0B1622; --bone:#F6FAFF;
  --amber:#FFC53D; --green:#37D67A;
  --display:Bungee,'Archivo Black',Impact,sans-serif;
  --heavy:'Archivo Black',Arial Black,sans-serif;
  --body:Grotesk,'Helvetica Neue',Arial,sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--body);font-weight:500;line-height:1.55;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(1120px,92vw);margin:0 auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--heavy);font-size:.86rem;letter-spacing:.03em;
  text-decoration:none;padding:.66em 1.1em;border-radius:999px;
  background:var(--red);color:#fff;border:3px solid var(--ink);
  box-shadow:0 4px 0 var(--ink);transition:transform .09s ease,box-shadow .09s ease
}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.btn.big{font-size:1.05rem;padding:.72em 1.4em}
.btn.ghost{background:#fff;color:var(--ink)}

/* ---------- top bar ---------- */
.top{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.55rem clamp(.8rem,3vw,1.6rem);
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  border-bottom:3px solid var(--ink)
}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--display);font-size:1.1rem;letter-spacing:.02em}
.brand img{border-radius:8px;border:2px solid var(--ink)}
.top nav{display:flex;align-items:center;gap:clamp(.5rem,2vw,1.3rem)}
.top nav a:not(.btn){font-family:var(--heavy);font-size:.8rem;text-decoration:none;letter-spacing:.02em}
.top nav a:not(.btn):hover{color:var(--red)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;padding:clamp(2.4rem,7vw,5rem) 0 0;
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 38%,var(--sky-3) 72%,var(--sky-4) 100%);
  border-bottom:4px solid var(--ink)
}
.clouds{position:absolute;inset:0;pointer-events:none}
.clouds .c{
  position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle at 50% 55%,#fff 0%,#fff 55%,rgba(255,255,255,0) 72%);
  filter:blur(.4px);opacity:.9;animation:drift linear infinite
}
.clouds .c1{--rest:38vw;width:34vw;height:14vw;top:6%;left:-30vw;animation-duration:64s}
.clouds .c2{--rest:76vw;width:22vw;height:10vw;top:22%;left:-24vw;animation-duration:47s;animation-delay:-12s;opacity:.75}
.clouds .c3{--rest:62vw;width:44vw;height:16vw;top:48%;left:-46vw;animation-duration:88s;animation-delay:-30s;opacity:.8}
.clouds .c4{--rest:24vw;width:18vw;height:8vw;top:64%;left:-20vw;animation-duration:39s;animation-delay:-5s;opacity:.7}
.clouds .c5{--rest:88vw;width:28vw;height:12vw;top:78%;left:-30vw;animation-duration:72s;animation-delay:-44s}
.clouds .c6{--rest:52vw;width:15vw;height:7vw;top:36%;left:-16vw;animation-duration:33s;animation-delay:-20s;opacity:.6}
.clouds .c::before,.clouds .c::after{
  content:'';position:absolute;border-radius:50%;
  background:radial-gradient(circle at 50% 55%,#fff 0%,#fff 58%,rgba(255,255,255,0) 75%)
}
.clouds .c::before{width:54%;height:118%;left:10%;top:-40%}
.clouds .c::after{width:38%;height:92%;right:13%;top:-20%}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(150vw)}}

.hero-inner{position:relative;z-index:2;width:min(1120px,92vw);margin:0 auto;text-align:center}
.eyebrow{
  display:inline-block;margin:0 0 1rem;padding:.4em .9em;border-radius:999px;
  background:var(--ink);color:#fff;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase
}
.eyebrow b{color:var(--amber)}
.hero h1{
  font-family:var(--display);font-weight:400;margin:0;color:#fff;
  font-size:clamp(3.2rem,13vw,8.5rem);line-height:.88;letter-spacing:-.01em;
  text-shadow:0 6px 0 var(--ink),0 0 42px rgba(9,30,55,.35)
}
.sub{
  margin:1.15rem auto 0;max-width:44ch;color:#0a2338;font-size:clamp(1rem,2.1vw,1.16rem);
  text-shadow:0 1px 0 rgba(255,255,255,.5)
}
.sub b{color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.5rem}

.cat{margin:clamp(-1rem,-2vw,0rem) auto 0;position:relative;z-index:1;width:min(1113px,104vw);padding:0 0 clamp(1rem,3vw,2.4rem)}
.cat img{width:100%;height:auto;animation:hover 5.2s ease-in-out infinite;filter:drop-shadow(0 26px 26px rgba(6,32,60,.28))}
@keyframes hover{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-16px) rotate(.4deg)}}

/* ---------- hud ---------- */
.hud{background:var(--ink);color:#fff;padding:clamp(1.1rem,3vw,1.6rem) 0 1rem;border-bottom:4px solid var(--ink)}
.hud-inner{
  width:min(1120px,92vw);margin:0 auto;display:grid;gap:.55rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))
}
.gauge{
  background:linear-gradient(180deg,#132437,#0d1b29);border:2px solid #29405a;border-radius:12px;
  padding:.6rem .75rem;display:flex;flex-direction:column;gap:.1rem
}
.gauge .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#7fb4e0}
.gauge .v{font-family:var(--mono);font-size:clamp(1.05rem,2.4vw,1.35rem);color:var(--amber);line-height:1.2;word-break:break-word}
.gauge .v.up{color:var(--green)}
.gauge .v.down{color:var(--red-hot)}
.gauge .u{font-size:.68rem;color:#8aa3bb}
.hud-note{width:min(1120px,92vw);margin:.7rem auto 0;font-family:var(--mono);font-size:.68rem;color:#6d88a3}

/* ---------- shared section furniture ---------- */
.kicker{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 .6rem;color:var(--red)
}
section h2{
  font-family:var(--display);font-weight:400;margin:0 0 1rem;
  font-size:clamp(2.2rem,7vw,4.4rem);line-height:.92
}

/* ---------- squeeze ---------- */
.squeeze{
  background:
    radial-gradient(900px 400px at 82% -10%,rgba(224,38,26,.22),transparent 60%),
    radial-gradient(700px 380px at 8% 110%,rgba(30,154,214,.2),transparent 62%),
    var(--night);
  color:#eaf3fb;padding:clamp(3rem,8vw,5.5rem) 0;border-bottom:4px solid var(--ink)
}
.squeeze h2{color:#fff}
.squeeze .lede{max-width:52ch;color:#a9c2d8;margin:0 0 1.8rem;font-size:1.05rem}
.score{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:0 0 2.2rem;
  border:2px solid #2b455f;border-radius:14px;padding:.9rem 1.1rem;background:rgba(255,255,255,.03)
}
.score b{font-family:var(--display);font-size:clamp(2rem,5vw,2.8rem);color:var(--amber);line-height:1}
.score span{font-family:var(--mono);font-size:.84rem;color:#b6cde2}
.score em{color:#fff;font-style:normal}

.nums{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.n{border-top:3px solid var(--red);padding-top:.9rem}
.n b{display:block;font-family:var(--display);font-size:clamp(2.4rem,6.4vw,3.6rem);line-height:1;color:#fff}
.n h3{font-family:var(--heavy);font-size:.86rem;letter-spacing:.05em;text-transform:uppercase;margin:.55rem 0 .35rem;color:var(--amber)}
.n p{margin:0;color:#a9c2d8;font-size:.95rem}
.fineprint{margin:2.2rem 0 0;font-family:var(--mono);font-size:.7rem;color:#6d88a3;max-width:70ch}
.fineprint b{color:#9ab5cd}

/* ---------- lore ---------- */
.lore{
  padding:clamp(3rem,8vw,5.5rem) 0;border-bottom:4px solid var(--ink);
  background:
    linear-gradient(180deg,var(--sky-4),#fff 55%),
    #fff
}
.cards{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:1.6rem}
.cards article{
  background:#fff;border:3px solid var(--ink);border-radius:18px;padding:1.2rem 1.15rem;
  box-shadow:0 6px 0 var(--ink)
}
.cards h3{font-family:var(--display);font-size:1.25rem;margin:0 0 .5rem;color:var(--red)}
.cards p{margin:0;font-size:.97rem}
.punch{
  font-family:var(--display);font-size:clamp(1.4rem,4.4vw,2.4rem);line-height:1.08;
  margin:2.2rem 0 0;text-align:center
}

/* ---------- steps ---------- */
.steps{padding:clamp(3rem,8vw,5.5rem) 0;background:linear-gradient(180deg,#fff,var(--sky-4));border-bottom:4px solid var(--ink)}
.steps ol{list-style:none;counter-reset:s;padding:0;margin:1.4rem 0 0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.steps li{counter-increment:s;position:relative;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:1.5rem 1.15rem 1.15rem;box-shadow:0 6px 0 var(--ink)}
.steps li::before{
  content:counter(s);position:absolute;top:-.9rem;left:1rem;
  font-family:var(--display);font-size:1rem;background:var(--red);color:#fff;
  border:3px solid var(--ink);border-radius:999px;width:2.1rem;height:2.1rem;
  display:grid;place-items:center
}
.steps li b{display:block;font-family:var(--heavy);font-size:1rem;margin-bottom:.3rem}
.steps li p{margin:0;font-size:.95rem;color:#33475c}

.ca{
  margin:1.8rem 0 1.4rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:var(--ink);color:#fff;border-radius:14px;padding:.85rem 1rem
}
.ca .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#7fb4e0}
.ca code{font-family:var(--mono);font-size:.8rem;word-break:break-all;flex:1 1 240px;color:var(--amber)}
.ca button{
  font-family:var(--heavy);font-size:.75rem;cursor:pointer;color:var(--ink);background:#fff;
  border:2px solid var(--ink);border-radius:999px;padding:.45em .95em
}
.ca button:hover{background:var(--amber)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#9ab5cd;padding:clamp(2.2rem,6vw,3.4rem) 0;text-align:center}
footer img{margin:0 auto 1rem;border-radius:14px;border:3px solid #29405a}
footer nav{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.2rem}
footer nav a{font-family:var(--heavy);font-size:.8rem;color:#fff;text-decoration:none}
footer nav a:hover{color:var(--amber)}
footer p{max-width:66ch;margin:0 auto;font-size:.78rem;line-height:1.6}
footer .tiny{margin-top:1rem;font-family:var(--mono);font-size:.7rem;color:#5f7c97}

@media (max-width:640px){
  .top nav a:not(.btn){display:none}
  /* no bleed on a phone: the propellers are the joke, don't crop them off */
  .cat{width:100vw}
}
@media (prefers-reduced-motion:reduce){
  /* keep the sky populated — without a transform the clouds park off-screen left */
  .clouds .c{animation:none;transform:translateX(var(--rest,50vw))}
  .cat img{animation:none}
}

/* ---------- arcade band ---------- */
.arcade-band{
  padding:clamp(3rem,8vw,5.5rem) 0;border-bottom:4px solid var(--ink);
  background:
    radial-gradient(800px 380px at 85% 0%,rgba(30,154,214,.28),transparent 62%),
    var(--night)
}
.arcade-band h2{color:#fff}
.arcade-band .lede{max-width:50ch;color:#a9c2d8;margin:0 0 1.6rem;font-size:1.02rem}
.arcade-band .rg{max-width:560px;margin:0 auto}
.arcade-more{text-align:center;margin:1.1rem 0 0;font-family:var(--mono);font-size:.78rem}
.arcade-more a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(255,197,61,.4)}
.arcade-more a:hover{color:#fff}