/* =====================================================================
   GLOWJAK ($GLOW), styles
   Surveillance neon × challenge page. Near-black void, Glow Green,
   Cloudflare Orange on the NET side only, greyscale suit. Black Ops One
   headlines, Inter body, Share Tech Mono readouts. Mobile-first.
   ===================================================================== */

/* ---------- Tokens (from docs/BRAND_PACKAGE.md §5) ---------- */
:root {
  /* Glow */
  --glo-green:      #39FF14;
  --glo-green-soft: #B6FF9E;
  --glo-green-deep: #22A80D;
  --glo-green-sig:  #146B08;

  /* Pair (NET side only) */
  --glo-orange:     #F38020;
  --glo-amber:      #FAAD3F;

  /* Neutrals */
  --glo-void:       #050807;
  --glo-elev:       #0C1410;
  --glo-ink:        #0B0B0B;
  --glo-cream:      #EAF7E6;
  --glo-dust:       #8FA394;

  /* Suit greyscale */
  --glo-suit:       #2A2E2C;
  --glo-suit-mid:   #4A524E;
  --glo-shirt:      #C9D3CC;

  /* Gradients */
  --glo-glow:       linear-gradient(90deg, #39FF14 0%, #B6FF9E 100%);
  --glo-pair:       linear-gradient(90deg, #39FF14 0%, #F38020 100%);

  /* Glow effects, use these, don't hand-roll shadows */
  --glo-halo-sm:    0 0 8px  rgba(57, 255, 20, .55);
  --glo-halo:       0 0 24px rgba(57, 255, 20, .45);
  --glo-halo-lg:    0 0 64px rgba(57, 255, 20, .35);

  /* Semantic aliases, the site reskins by swapping ONLY these */
  --bg:       var(--glo-void);
  --bg-elev:  var(--glo-elev);
  --fg:       var(--glo-cream);
  --fg-muted: var(--glo-dust);
  --accent:   var(--glo-green);
  --accent-2: var(--glo-orange);
  --link:     var(--glo-green);

  --font-display: "Black Ops One", Impact, "Arial Black", sans-serif;
  --font-body:    Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "Share Tech Mono", "Courier New", monospace;

  --t-hero: clamp(3.25rem, 11vw, 6rem);
  --t-h1:   clamp(2.5rem, 6vw, 3.75rem);
  --t-h2:   clamp(1.75rem, 4vw, 2.5rem);

  --container: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 18px;

  --outline: 0 0 0 3px var(--glo-ink);
  --shadow-hard: 6px 6px 0 var(--glo-ink);
  --shadow-glow: var(--glo-halo);
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  /* no overflow on body: html{overflow-x:clip} clips without making body a
     scroll container (which would break the sticky nav) */
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1; }
p { margin: 0 0 1rem; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--glo-green-soft); outline-offset: 3px; }

/* ---------- Background atmosphere ---------- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 60% 40% at 82% 0%, rgba(57, 255, 20, .16), transparent 62%),
    radial-gradient(ellipse 55% 45% at 0% 100%, rgba(243, 128, 32, .10), transparent 62%),
    radial-gradient(ellipse 70% 50% at 50% 45%, rgba(57, 255, 20, .05), transparent 70%),
    linear-gradient(160deg, var(--glo-void) 0%, var(--glo-elev) 100%);
}
/* faint glow-dot / radiating-dash / orange-cloud field, in the spirit of assets/glow-pattern.svg */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg stroke='%2339FF14' stroke-linecap='round'%3E%3Ccircle cx='40' cy='44' r='10' fill='none' stroke-width='1' opacity='0.10'/%3E%3Cpath d='M40 26v-7M40 69v7M18 44h-7M62 44h7' stroke-width='1.5' opacity='0.16'/%3E%3Cpath d='M120 116v-6M120 140v6M104 128h-6M136 128h6' stroke-width='1.5' opacity='0.10'/%3E%3C/g%3E%3Ccircle cx='40' cy='44' r='2.6' fill='%2339FF14' opacity='0.34'/%3E%3Ccircle cx='120' cy='128' r='2' fill='%2339FF14' opacity='0.22'/%3E%3Cpath d='M104 34a7 7 0 0 1 13-2.6a5.5 5.5 0 0 1 8 5.6h-24.5z' fill='%23F38020' opacity='0.10'/%3E%3Cpath d='M20 120a5 5 0 0 1 9.5-1.8a4 4 0 0 1 5.5 4h-17z' fill='%23F38020' opacity='0.07'/%3E%3C/svg%3E");
}

/* ---------- Utilities ---------- */
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--narrow { max-width: 820px; }
.mono { font-family: var(--font-mono); }
.cream { color: var(--glo-cream); }
.orange { color: var(--glo-amber) !important; }
.grad {
  background: var(--glo-pair);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  letter-spacing: .03em;
  color: var(--glo-cream);
  text-shadow: 3px 3px 0 var(--glo-ink);
  margin-bottom: 1rem;
}
.h1 .grad { text-shadow: none; filter: drop-shadow(3px 3px 0 var(--glo-ink)); }
.eyebrow {
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--glo-green-soft);
  margin-bottom: .75rem;
}
.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--fg);
  max-width: 62ch;
  margin-bottom: 2.5rem;
}
.section { padding: clamp(4rem, 10vw, 7.5rem) 0; position: relative; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 3px solid var(--glo-ink);
  border-radius: 999px;
  padding: .65em 1.4em;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--glo-cream);
  background: var(--glo-elev);
  box-shadow: var(--shadow-hard);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--glo-ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--glo-ink); }
.btn--glow { background: var(--glo-green); color: var(--glo-ink); box-shadow: var(--shadow-hard), var(--glo-halo-sm); }
.btn--glow:hover { background: var(--glo-green-soft); }
.btn--edge { background: var(--glo-green-soft); color: var(--glo-ink); }
.btn--ghost {
  background: transparent;
  border-color: var(--glo-cream);
  box-shadow: 6px 6px 0 rgba(234,247,230, .25);
}
.btn--ghost:hover { box-shadow: 8px 8px 0 rgba(234,247,230, .35); background: rgba(234,247,230,.06); }
.btn--sm { font-size: 1.05rem; padding: .5em 1.1em; border-width: 2px; box-shadow: 4px 4px 0 var(--glo-ink); }
.btn--lg { font-size: clamp(1.25rem, 2vw, 1.6rem); padding: .7em 1.6em; }
a.btn.is-soon .soon-tag { font-family: var(--font-mono); font-size: .6em; letter-spacing: .2em; opacity: .8; }
.btn:disabled, .btn.is-soon {
  opacity: .55; cursor: not-allowed; transform: none !important;
  box-shadow: 3px 3px 0 var(--glo-ink) !important;
  filter: grayscale(.4);
}
a.is-soon { pointer-events: none; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(5,8,7, .72);
  border-bottom: 2px solid transparent;
  transition: border-color .2s, background .2s;
}
.nav.is-scrolled { border-bottom-color: rgba(57,255,20, .25); background: rgba(5,8,7, .88); }
.nav__inner {
  width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 72px; gap: 1rem;
}
.nav__brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--glo-cream); }
.nav__brand img { width: 40px; height: 40px; filter: drop-shadow(0 0 10px rgba(57,255,20,.35)); }
.nav__ticker { font-family: var(--font-mono); font-weight: 700; letter-spacing: .12em; font-size: 1.125rem; }
.nav__links { display: flex; align-items: center; gap: 1.5rem; }
.nav__links > a:not(.btn) {
  color: var(--glo-cream); font-weight: 600; font-size: .95rem;
  position: relative; padding: .25rem 0;
}
.nav__links > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--glo-pair); transform: scaleX(0); transform-origin: left; transition: transform .2s;
}
.nav__links > a:not(.btn):hover::after { transform: scaleX(1); }
.nav__burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 2px solid var(--glo-cream); border-radius: 10px; padding: 8px 9px;
}
.nav__burger span { display: block; width: 22px; height: 3px; background: var(--glo-cream); border-radius: 2px; }

@media (max-width: 820px) {
  .nav__burger { display: inline-flex; }
  .nav__links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--glo-void);
    border-bottom: 3px solid var(--glo-green);
    z-index: 60;
    box-shadow: 0 20px 40px rgba(0,0,0,.5);
    padding: .5rem var(--gutter) 1.25rem;
  }
  .nav__links.is-open { display: flex; }
  .nav__links > a:not(.btn) { padding: .9rem 0; border-bottom: 1px solid rgba(234,247,230,.1); font-size: 1.1rem; }
  .nav__links > .btn { margin-top: 1rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 8vw, 6rem); }
.hero__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 78% 45%, rgba(57,255,20, .22), transparent 32%),
    radial-gradient(circle at 78% 45%, rgba(57,255,20, .10), transparent 45%);
}
/* orange bleed from the lava lamp, roughly under where .lava-lamp sits in
   .hero__art (bottom-right of the art column): the halo tokens give it the
   same rim-glow language as the rest of the site, the radial gives it color */
.hero__bg::after {
  content: "";
  position: absolute; right: 2%; bottom: -8%;
  width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(243,128,32,.4), transparent 70%);
  box-shadow: var(--glo-halo), var(--glo-halo-lg);
  filter: blur(26px);
}
.hero__inner {
  width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center;
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.15fr .85fr; gap: 3rem; }
}

.pair-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 2px solid var(--glo-green-soft); border-radius: 999px;
  padding: .4rem 1rem .4rem .7rem;
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--glo-green-soft); background: rgba(57,255,20,.06);
  box-shadow: var(--shadow-glow);
  margin-bottom: 1.5rem;
}
.pair-badge strong { color: var(--glo-cream); font-weight: 700; }
.pair-badge__dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--glo-green-soft);
  box-shadow: 0 0 0 4px rgba(57,255,20,.2);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(57,255,20,0); } }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: .9;
  letter-spacing: .02em;
  color: var(--glo-green);
  text-shadow: 4px 4px 0 var(--glo-ink), 8px 8px 0 rgba(0,0,0,.35);
  -webkit-text-stroke: 1.5px var(--glo-ink);
  display: flex; flex-direction: column;
  margin-bottom: 1.5rem;
}
.hero__title > span { display: block; }
.hero__title .hero__glow { display: block; }
.hero__title .hero__glow .qmark { margin-left: .12em; }

/* Headline glitch / shimmer */
.glitch {
  position: relative; display: inline-block;
  background: var(--glo-pair);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: drop-shadow(4px 4px 0 var(--glo-ink));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  background: inherit; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  opacity: 0; pointer-events: none;
}
.glitch::before { animation: glitchA 4s steps(1) infinite; color: var(--glo-green-soft); -webkit-text-fill-color: var(--glo-green-soft); background: none; }
.glitch::after  { animation: glitchB 4s steps(1) infinite; color: var(--glo-orange); -webkit-text-fill-color: var(--glo-orange); background: none; }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes glitchA {
  0%, 88%, 100% { opacity: 0; transform: none; clip-path: none; }
  89% { opacity: .8; transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); }
  91% { opacity: .8; transform: translate(5px, -3px); clip-path: inset(60% 0 5% 0); }
  93% { opacity: 0; }
}
@keyframes glitchB {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: none; }
  91% { opacity: .8; transform: translate(6px, -2px); clip-path: inset(40% 0 20% 0); }
  94% { opacity: .8; transform: translate(-4px, 3px); clip-path: inset(0 0 70% 0); }
  96% { opacity: 0; }
}
.qmark {
  color: var(--glo-cream);
  display: inline-block;
  transform-origin: 50% 80%;
  animation: wobble 2.6s ease-in-out infinite;
}
@keyframes wobble {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(10deg) translateY(-6px); }
}

.hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 56ch; margin-bottom: 1.75rem; color: var(--glo-cream); }
.hero__sub .mono { font-size: .92em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; }
.hero__strip {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted);
  border-top: 1px dashed rgba(143,163,148,.35);
  padding-top: 1rem;
  margin: 0;
}
.hero__strip span span { color: var(--glo-green-soft); }

/* Mascot + orbits */
.hero__art {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid; place-items: center;
}
.hero__mascot {
  width: 78%;
  position: relative; z-index: 2;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(57,255,20,.35));
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}
.orbit {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--glo-void), var(--glo-void)) padding-box,
    conic-gradient(from 0deg, #39FF14, #F38020, transparent 60%, #39FF14) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .9;
}
.orbit--a { transform: rotateX(72deg); animation: spin 9s linear infinite; }
.orbit--b { inset: 8%; transform: rotateX(72deg) rotateZ(60deg); animation: spin 14s linear infinite reverse; opacity: .6; }
.orbit--c { inset: -4%; transform: rotate(-25deg) scaleY(.35); animation: spinFlat 22s linear infinite; opacity: .5; }
@keyframes spin { to { transform: rotateX(72deg) rotate(360deg); } }
@keyframes spinFlat { to { transform: rotate(335deg) scaleY(.35); } }
.qubit {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--glo-green); box-shadow: 0 0 16px var(--glo-green), 0 0 4px #fff inset;
  z-index: 3;
}
.qubit--1 { top: 12%; left: 8%;  animation: drift 6s ease-in-out infinite; }
.qubit--2 { top: 70%; right: 4%; background: var(--glo-orange); box-shadow: 0 0 16px var(--glo-orange); animation: drift 7s ease-in-out infinite reverse; }
.qubit--3 { bottom: 6%; left: 30%; width: 9px; height: 9px; background: var(--glo-amber); box-shadow: 0 0 16px var(--glo-amber); animation: drift 5s ease-in-out infinite 1s; }
@keyframes drift { 50% { transform: translate(10px, -14px) scale(1.25); } }

/* ---------- Hero: lava lamp (CSS/SVG placeholder, artist swaps this SVG
   later without touching the markup or the class contract). Sits beside
   .hero__mascot inside .hero__art. Blobs reuse the existing drift/float
   keyframes at staggered, negative-delayed durations so no two ever move
   in lockstep; the glass reads as a translucent vessel around them; the
   whole lamp bleeds an orange halo onto .hero__bg behind it. ---------- */
.lava-lamp {
  position: absolute;
  z-index: 1;
  right: 2%;
  bottom: -2%;
  width: clamp(84px, 22%, 128px);
  aspect-ratio: 3 / 7;
  pointer-events: none;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.5));
}
.lava-lamp svg { width: 100%; height: 100%; display: block; overflow: visible; }

.lava-lamp__blob {
  fill: var(--glo-orange);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: drift 9s ease-in-out infinite, float 11s ease-in-out infinite;
}
/* staggered, never-syncing durations + negative delays per blob */
.lava-lamp__blob:nth-child(1) { animation-duration: 9s, 13s;  animation-delay: -1.4s, -3.1s; }
.lava-lamp__blob:nth-child(2) { fill: var(--glo-amber); animation-duration: 11s, 9s;  animation-delay: -4.2s, -.8s; }
.lava-lamp__blob:nth-child(3) { animation-duration: 13s, 15s; animation-delay: -.6s, -6.5s; }
.lava-lamp__blob:nth-child(4) { fill: var(--glo-amber); animation-duration: 10s, 12s; animation-delay: -2.8s, -1.9s; }
.lava-lamp__blob:nth-child(5) { animation-duration: 8s, 10s;  animation-delay: -3.9s, -5.2s; }

/* glass vessel: thin stroke, faint fill, so the blobs read as inside it */
.lava-lamp__glass {
  fill: rgba(234, 247, 230, .06);
  stroke: rgba(234, 247, 230, .38);
  stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
  .lava-lamp__blob { animation: none; }
}

@media (max-width: 480px) {
  /* lamp scales down with .hero__art and never overhangs the column */
  .lava-lamp { width: clamp(56px, 18vw, 84px); right: 1%; bottom: 0; }
}

.sticker {
  position: absolute; z-index: 4;
  font-family: var(--font-display);
  font-size: 1.35rem; line-height: 1; letter-spacing: .04em; text-align: center;
  background: var(--glo-cream); color: var(--glo-ink);
  border: 3px solid var(--glo-ink); border-radius: 12px;
  padding: .5rem .8rem;
  box-shadow: var(--shadow-hard);
}
.sticker--tl { top: 4%; left: -2%; transform: rotate(-9deg); }
.sticker--br {
  bottom: 8%; right: -2%; transform: rotate(7deg);
  background: var(--glo-green-soft); font-family: var(--font-mono); font-weight: 700; font-size: 1rem; letter-spacing: .1em;
}

/* Page-load reveal */
.reveal { opacity: 0; transform: translateY(18px); animation: rise .7s cubic-bezier(.2,.8,.2,1) forwards; }
.reveal[data-delay="0"] { animation-delay: .05s; }
.reveal[data-delay="1"] { animation-delay: .15s; }
.reveal[data-delay="2"] { animation-delay: .25s; }
.reveal[data-delay="3"] { animation-delay: .35s; }
.reveal[data-delay="4"] { animation-delay: .5s; }
.reveal[data-delay="5"] { animation-delay: .62s; }
.reveal[data-delay="6"] { animation-delay: .75s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Marquee ---------- */
.marquee-wrap { overflow: hidden; padding: 1.25rem 0 2rem; }
.marquee {
  overflow: hidden;
  background: var(--glo-green);
  border-top: 4px solid var(--glo-ink); border-bottom: 4px solid var(--glo-ink);
  transform: rotate(-1.5deg);
  width: calc(100% + 4rem);
  margin-left: -2rem;
  box-shadow: 0 10px 40px rgba(57,255,20,.35);
}
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.marquee__item {
  font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--glo-cream); padding: .55em .9em; white-space: nowrap;
  text-shadow: 2px 2px 0 var(--glo-ink);
}
.marquee__sep { color: var(--glo-ink); font-size: .9rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ---------- Cards / The joke ---------- */
.joke__grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .joke__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "meme sign stock"
      "pair pair pair";
  }
  .card--tilt-l { grid-area: meme; }
  .card--sign   { grid-area: sign; }
  .card--tilt-r { grid-area: stock; }
  .card--wide   { grid-area: pair; }
}
.card {
  position: relative;
  background: var(--bg-elev);
  border: 3px solid var(--glo-ink);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-hard), 0 0 0 1px rgba(57,255,20,.15) inset;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.card:hover { transform: translate(-3px, -3px) rotate(0) !important; box-shadow: 9px 9px 0 var(--glo-ink), 0 0 0 1px rgba(57,255,20,.3) inset; }
.card__num { position: absolute; top: 1rem; right: 1.25rem; font-size: .75rem; color: var(--fg-muted); letter-spacing: .12em; }
.card__icon { font-size: 2rem; margin-bottom: .75rem; line-height: 1; }
.card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.15rem, 2.2vw, 1.6rem); letter-spacing: .03em; color: var(--glo-cream); margin-bottom: .6rem; text-shadow: 2px 2px 0 var(--glo-ink); }
.card p { margin: 0; color: var(--fg); }
.card p em { color: var(--glo-green-soft); font-style: normal; font-family: var(--font-mono); font-size: .95em; }
@media (min-width: 760px) {
  .card--tilt-l { transform: rotate(-1.5deg); }
  .card--tilt-r { transform: rotate(1.5deg); }
}
.card--sign {
  padding: 1rem; display: grid; place-items: center;
  background: linear-gradient(180deg, #0C1410 0%, #12201A 100%);
  overflow: hidden;
}
.card--sign img { width: min(100%, 260px); filter: drop-shadow(0 12px 24px rgba(0,0,0,.5)); }
.card--sign::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background: radial-gradient(ellipse at 50% 100%, rgba(57,255,20,.25), transparent 70%);
  pointer-events: none;
}
.card--wide {
  background: linear-gradient(120deg, var(--glo-green) 0%, var(--glo-green-sig) 100%);
  border-color: var(--glo-cream);
  box-shadow: 8px 8px 0 var(--glo-ink);
}
.card--wide h3, .card--wide p { color: var(--glo-cream); }
.card--wide .card__num { color: rgba(234,247,230,.7); }
.card--wide .grad { font-weight: 700; }

/* ---------- Steps ---------- */
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.5rem; counter-reset: step;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  position: relative;
  padding: 2.5rem 1.5rem 1.75rem;
  border: 2px dashed rgba(57,255,20,.4);
  border-radius: var(--radius);
  background: rgba(12,20,16,.6);
}
.step__num {
  position: absolute; top: -1.25rem; left: 1.25rem;
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1; letter-spacing: .04em;
  min-width: 2.5rem; height: 2.5rem; padding: 0 .55rem; display: grid; place-items: center;
  background: var(--glo-green-soft); color: var(--glo-ink);
  border: 3px solid var(--glo-ink); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--glo-ink);
}
.step__tag { display: inline-block; font-size: .7rem; letter-spacing: .2em; color: var(--glo-green-soft); margin-bottom: .5rem; }
.step h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.15rem, 2.2vw, 1.6rem); letter-spacing: .03em; margin-bottom: .5rem; text-shadow: 2px 2px 0 var(--glo-ink); }
.step p { margin: 0; color: var(--fg); }
.step p span { color: var(--glo-green-soft); font-family: var(--font-mono); font-size: .95em; }
.step:nth-child(2) h3 { color: var(--glo-green-soft); }
.step:nth-child(3) h3 { color: var(--glo-orange); }

/* ---------- Tokenomics ---------- */
.stats {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 2rem;
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  background: var(--bg-elev);
  border: 3px solid var(--glo-ink);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: var(--shadow-hard);
  display: flex; flex-direction: column; gap: .25rem;
  min-width: 0;
}
.stat--big { grid-column: 1 / -1; background: linear-gradient(120deg, var(--glo-green), var(--glo-green-sig)); }
@media (min-width: 760px) { .stat--big { grid-column: span 2; } }
.stat__label { font-size: .75rem; letter-spacing: .16em; color: var(--glo-green-soft); }
.stat--big .stat__label { color: var(--glo-cream); }
.stat__value {
  font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1; letter-spacing: .03em;
  color: var(--glo-cream); text-shadow: 3px 3px 0 var(--glo-ink);
  overflow-wrap: anywhere;
}
.stat__value--sm { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.stat__unit { font-size: .75rem; color: var(--fg-muted); letter-spacing: .08em; text-transform: uppercase; }
.stat--big .stat__unit { color: rgba(234,247,230,.75); }

.contract {
  border: 3px solid var(--glo-green-soft); border-radius: var(--radius);
  background: rgba(5,8,7,.7);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-glow);
}
.contract__label { font-size: .75rem; letter-spacing: .16em; color: var(--glo-green-soft); display: block; margin-bottom: .6rem; }
.contract__row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.contract__addr {
  flex: 1 1 200px; min-width: 0;
  font-size: clamp(.9rem, 2vw, 1.125rem); font-weight: 700; letter-spacing: .06em;
  color: var(--glo-cream); background: var(--glo-void);
  padding: .8rem 1rem; border-radius: 10px; border: 1px dashed rgba(143,163,148,.4);
  overflow-wrap: anywhere; word-break: break-all;
}
.contract__note { margin: .9rem 0 0; font-size: .875rem; color: var(--fg-muted); }
.placeholder-note {
  margin: 1.25rem 0 0; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--glo-amber); border-left: 3px solid var(--glo-amber); padding-left: .75rem;
}

/* ---------- Roadmap: the road, the markers, the van ----------
   The road is a mono-dashed line down the middle of the phase list with a
   small orange edge marker at each phase; the van is positioned along it
   by scroll progress (transform only, written in app.js). --road-x is the
   one place the road's horizontal position is set: everything on the road
   reads it. */
.road {
  position: relative; margin-top: 2rem;
  --road-x: 50%;
  --van-scale: .62;
}
.road__line {
  position: absolute; left: var(--road-x); top: 0; bottom: 0; z-index: 0;
  width: 3px; transform: translateX(-50%); pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--glo-dust) 0 12px, transparent 12px 26px);
  background-size: 3px 26px;
  opacity: .5;
  animation: roadflow 2.6s linear infinite;
}
@keyframes roadflow { to { background-position: 0 26px; } }
.road__markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.road__marker {
  position: absolute; left: var(--road-x); top: 0;
  width: 14px; height: 14px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--glo-orange); border: 3px solid var(--glo-ink);
  box-shadow: 0 0 12px rgba(243, 128, 32, .5);
  transition: background .35s ease, box-shadow .35s ease;
}
.road__marker.is-lit {
  background: var(--glo-green);
  box-shadow: 0 0 20px var(--glo-green);
}
.road__van {
  position: absolute; left: var(--road-x); top: 0; z-index: 3;
  width: 320px; height: 160px;
  transform: translate(-50%, 0);
  pointer-events: none;
  will-change: transform;
}
.road__note { margin: 1.25rem 0 0; font-size: .68rem; letter-spacing: .06em; line-height: 1.6; color: var(--fg-muted); }

.phases {
  list-style: none; margin: 0 auto; padding: 0; position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  width: min(100%, 980px);
}
.phase {
  position: relative;
  width: min(100%, 440px);
  background: var(--bg-elev);
  border: 3px solid var(--glo-ink); border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-hard);
}
.phase--l { justify-self: start; transform: rotate(-1deg); }
.phase--r { justify-self: end; transform: rotate(1deg); }
.phase__tag {
  display: inline-block; font-size: .75rem; letter-spacing: .16em;
  color: var(--glo-green-soft); border: 1px solid currentColor; border-radius: 999px;
  padding: .2rem .7rem; margin-bottom: .75rem;
}
.phase h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 1.45rem); letter-spacing: .03em; margin-bottom: .5rem; text-shadow: 2px 2px 0 var(--glo-ink); }
.phase p { margin: 0; color: var(--fg); }
.phase--inf {
  background: linear-gradient(120deg, rgba(57,255,20,.15), rgba(243,128,32,.2)), var(--bg-elev);
  border-color: var(--glo-orange);
  justify-self: center; transform: none;
}
.phase--inf h3 { background: var(--glo-pair); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(2px 2px 0 var(--glo-ink)); }
.phase:nth-child(3) h3 { color: var(--glo-amber); }
.phase:nth-child(4) h3 { color: var(--fg-muted); }
@media (max-width: 640px) {
  /* the road moves to the left margin and the phases indent past it, so the
     van never sits on top of the copy and never overhangs the viewport */
  .road { --road-x: 58px; --van-scale: .4; padding-left: 84px; }
  .phase { width: 100%; transform: none; }
  .phase--inf { justify-self: stretch; }
}

/* ---------- Meme gallery ---------- */
.memes {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .memes { grid-template-columns: repeat(3, 1fr); } }
.meme {
  margin: 0;
  transform: rotate(var(--rot, 0deg));
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.meme:hover { transform: rotate(0) scale(1.03); z-index: 2; }
.meme__frame {
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 60%, rgba(57,255,20,.25), transparent 60%),
    repeating-linear-gradient(45deg, rgba(57,255,20,.05) 0 10px, transparent 10px 20px),
    var(--bg-elev);
  border: 3px solid var(--glo-ink); border-radius: 14px 14px 0 0;
  display: grid; place-items: center; overflow: hidden;
  box-shadow: var(--shadow-hard);
}
.meme__frame img { width: 70%; height: auto; }
.meme--real .meme__frame img { width: 100%; height: 100%; object-fit: cover; }
.meme__cap {
  font-family: var(--font-display); font-size: clamp(1rem, 2.2vw, 1.5rem); letter-spacing: .05em;
  text-align: center; text-transform: uppercase;
  background: var(--glo-cream); color: var(--glo-ink);
  border: 3px solid var(--glo-ink); border-top: 0; border-radius: 0 0 14px 14px;
  padding: .5rem .5rem;
  box-shadow: var(--shadow-hard);
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .75rem; }
.faq__item {
  background: var(--bg-elev);
  border: 2px solid rgba(234,247,230,.15);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s;
}
.faq__item[open] { border-color: var(--glo-green-soft); box-shadow: 0 0 0 1px rgba(57,255,20,.15), var(--shadow-glow); }
.faq__item summary {
  cursor: pointer; list-style: none;
  padding: 1.1rem 3rem 1.1rem 1.25rem;
  font-weight: 800; font-size: 1.05rem; color: var(--glo-cream);
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "?";
  position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1;
  color: var(--glo-green-soft);
  transition: transform .25s, color .2s;
}
.faq__item[open] summary::after { content: "!"; color: var(--glo-green-soft); transform: translateY(-50%) rotate(12deg); }
.faq__item p { margin: 0; padding: 0 1.25rem 1.25rem; color: var(--fg); }
.faq__item p span { color: var(--glo-green-soft); font-family: var(--font-mono); font-size: .95em; }

/* ---------- Final CTA ---------- */
.section--final { padding-top: 2rem; }
.final {
  text-align: center;
  border: 3px solid var(--glo-ink); border-radius: 28px;
  background: linear-gradient(160deg, var(--glo-elev), #12201A);
  box-shadow: 10px 10px 0 var(--glo-green);
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  display: grid; gap: 2rem; justify-items: center;
}
.final__logo { width: min(100%, 720px); filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.final .hero__ctas { justify-content: center; margin: 0; }

/* ---------- Footer ---------- */
.footer { border-top: 3px solid var(--glo-ink); background: rgba(5,8,7,.85); padding: 3rem 0 2rem; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem; margin-bottom: 2rem; }
.footer__social { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__social a { color: var(--glo-cream); font-weight: 600; font-family: var(--font-mono); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
.footer__social a:hover { color: var(--glo-green-soft); }
.footer__social a.is-soon { color: var(--fg-muted); }
.footer__social a.is-soon::before { content: attr(data-label) " · "; }
.footer__legal { font-size: .75rem; line-height: 1.7; color: var(--fg-muted); max-width: 90ch; }
.footer__made { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); margin: 1.5rem 0 0; }

/* ---------- Scroll reveal ---------- */
.will-reveal { opacity: 0; translate: 0 22px; transition: opacity .6s ease, translate .6s cubic-bezier(.2,.8,.2,1); }
.will-reveal.in { opacity: 1; translate: 0 0; }
.will-reveal:nth-child(2) { transition-delay: .08s; }
.will-reveal:nth-child(3) { transition-delay: .16s; }
.will-reveal:nth-child(4) { transition-delay: .24s; }

/* ---------- Nav price pill ---------- */
.nav__price {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  color: var(--glo-green-soft); border: 1px solid rgba(57,255,20,.4); border-radius: 999px;
  padding: .15rem .55rem; background: rgba(57,255,20,.08);
}

/* ---------- Hero: CA boxes + status pill ---------- */
.ca-boxes { display: grid; gap: .6rem; max-width: 640px; }
.ca-box {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem;
  border: 2px solid var(--glo-green-soft); border-radius: 14px;
  background: rgba(5,8,7,.75); padding: .55rem .6rem .55rem .85rem;
  box-shadow: 0 0 24px rgba(57,255,20,.12);
  min-width: 0;
}
.ca-box--net { border-color: rgba(243,128,32,.7); box-shadow: 0 0 24px rgba(243,128,32,.12); }
.ca-box__label { font-size: .75rem; font-weight: 700; letter-spacing: .16em; color: var(--glo-green-soft); }
.ca-box--net .ca-box__label { color: var(--glo-orange); }
.ca-box__addr {
  min-width: 0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--glo-cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca-box__addr--tba { white-space: normal; font-weight: 400; font-size: .75rem; color: var(--fg-muted); }
.ca-box .btn--sm { font-size: .95rem; padding: .45em .9em; }
.ca-box__note {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin: .35rem 0 0; font-size: .72rem; letter-spacing: .06em; color: var(--fg-muted);
}
.status-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid rgba(250,173,63,.6); color: var(--glo-amber); border-radius: 999px;
  padding: .2rem .7rem; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem;
}
.is-live .status-pill { border-color: rgba(57,255,20,.6); color: var(--glo-green-soft); }
.status-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pulse 1.8s ease-in-out infinite; }
@media (max-width: 480px) {
  .ca-box { grid-template-columns: auto 1fr; }
  .ca-box .btn--sm { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Live pair panel ---------- */
.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .5rem; vertical-align: middle;
  background: var(--glo-green-soft); box-shadow: 0 0 12px var(--glo-green-soft); animation: pulse 1.6s ease-in-out infinite;
}
.is-live .live-dot { background: var(--glo-green-soft); box-shadow: 0 0 12px var(--glo-green-soft); }
.pair { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 980px) { .pair { grid-template-columns: 1fr 1fr; align-items: start; } }
.pair__stats { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin: 0; }
.pair__stats .stat--big { grid-column: 1 / -1; }
.pair__chart { min-width: 0; }
.chart-embed {
  position: relative; width: 100%; padding-bottom: 125%;
  border: 3px solid var(--glo-ink); border-radius: var(--radius); overflow: hidden;
  background: var(--glo-void); box-shadow: var(--shadow-hard);
}
@media (min-width: 980px) { .chart-embed { padding-bottom: 90%; } }
@media (min-width: 1400px) { .chart-embed { padding-bottom: 65%; } }
.chart-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pair-stub {
  position: relative; overflow: hidden;
  border: 3px dashed rgba(57,255,20,.45); border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 35%, rgba(57,255,20,.22), transparent 55%),
    repeating-linear-gradient(-45deg, rgba(57,255,20,.04) 0 12px, transparent 12px 24px),
    rgba(12,20,16,.7);
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
  display: grid; justify-items: center; text-align: center; gap: .5rem;
  min-height: 360px;
}
.pair-stub__mascot { width: min(48%, 220px); filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)) grayscale(.15); animation: float 5s ease-in-out infinite; }
.pair-stub__eyebrow { font-size: .72rem; letter-spacing: .22em; color: var(--glo-amber); margin: .5rem 0 0; }
.pair-stub__count {
  font-family: var(--font-display); font-size: clamp(1.9rem, 4.5vw, 2.75rem); letter-spacing: .04em; line-height: 1;
  color: var(--glo-cream); text-shadow: 3px 3px 0 var(--glo-ink); margin: 0;
}
.pair-stub__sub { max-width: 42ch; color: var(--fg-muted); font-size: .95rem; margin: .25rem 0 .5rem; }
.pair-stub__sub span { color: var(--glo-green-soft); font-family: var(--font-mono); font-size: .9em; }
.pair-stub__links { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.pair__source { margin: .9rem 0 0; font-size: .7rem; letter-spacing: .04em; color: var(--fg-muted); }

/* ---------- The Underlying: price card ---------- */
.card--price {
  display: flex; flex-direction: column; gap: .35rem;
  background: linear-gradient(160deg, rgba(57,255,20,.12), rgba(243,128,32,.12)), var(--bg-elev);
  border-color: var(--glo-green-soft);
}
.card--price .stat__value { font-size: clamp(2.4rem, 5vw, 3.5rem); margin-top: .5rem; }
.card__foot { font-size: .7rem; letter-spacing: .06em; color: var(--fg-muted); }
.card__foot a { color: var(--glo-green-soft); }
@media (min-width: 760px) {
  .joke__grid {
    grid-template-areas:
      "meme sign stock"
      "price price stock"
      "pair pair pair";
  }
  .card--price { grid-area: price; }
}
@media (min-width: 1000px) {
  .joke__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "meme sign stock price"
      "pair pair pair pair";
  }
}

/* ---------- How it works: mode pill, fee table, footnote ---------- */
.how-pill {
  display: inline-block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--glo-amber); border: 1px solid rgba(250,173,63,.6); border-radius: 999px;
  padding: .25rem .8rem; margin-bottom: .9rem;
}
.how__bottom { display: grid; gap: 1.5rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .how__bottom { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.stats--three { grid-template-columns: repeat(3, 1fr); margin: 0; }
@media (max-width: 560px) { .stats--three { grid-template-columns: 1fr 1fr; } .stats--three .stat:last-child { grid-column: 1 / -1; } }
.fee-table-wrap {
  overflow-x: auto; border: 3px solid var(--glo-ink); border-radius: var(--radius);
  background: var(--bg-elev); box-shadow: var(--shadow-hard);
}
.fee-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 320px; }
.fee-table caption { text-align: left; padding: .9rem 1.1rem .4rem; font-size: .72rem; letter-spacing: .18em; color: var(--glo-green-soft); }
.fee-table th, .fee-table td { text-align: left; padding: .7rem 1.1rem; border-top: 1px solid rgba(234,247,230,.1); vertical-align: top; }
.fee-table thead th { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); font-family: var(--font-mono); border-top: 0; }
.fee-table tbody th { font-weight: 700; color: var(--glo-cream); }
.fee-table td.mono { color: var(--glo-green-soft); font-weight: 700; white-space: nowrap; }
.fee-table td:last-child { color: var(--fg-muted); font-size: .85rem; }
.contract-row, .vault-row { margin-top: 1.5rem; border: 3px solid var(--glo-green-soft); border-radius: var(--radius); background: rgba(5,8,7,.7); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-glow); }
.how__footnote { margin: 1.5rem 0 0; font-size: .75rem; letter-spacing: .04em; color: var(--fg-muted); border-left: 3px solid var(--glo-green); padding-left: .75rem; max-width: 80ch; }

/* ---------- Numbers: badges ---------- */
.badges { display: flex; flex-wrap: wrap; gap: .6rem; }
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--glo-cream); background: var(--bg-elev);
  border: 2px solid var(--glo-green-soft); border-radius: 999px; padding: .45rem .9rem;
  box-shadow: 3px 3px 0 var(--glo-ink);
}
.badge span { color: var(--glo-green-soft); }
a.badge:hover { background: rgba(57,255,20,.12); }
.badge--pending { border-style: dashed; color: var(--fg-muted); }
.badge--muted { border-color: rgba(143,163,148,.4); color: var(--fg-muted); font-weight: 400; text-transform: none; letter-spacing: .02em; }

/* ---------- How to buy ---------- */
.buy-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; counter-reset: buy; }
@media (min-width: 760px) { .buy-steps { grid-template-columns: repeat(2, 1fr); } }
.buy-step {
  position: relative; min-width: 0;
  background: var(--bg-elev); border: 3px solid var(--glo-ink); border-radius: var(--radius);
  padding: 2.25rem 1.5rem 1.5rem; box-shadow: var(--shadow-hard);
}
.buy-step__num {
  position: absolute; top: -1.1rem; left: 1.25rem;
  font-family: var(--font-display); font-size: 1.9rem; line-height: 1;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  background: var(--glo-green); color: var(--glo-cream);
  border: 3px solid var(--glo-ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--glo-ink);
}
.buy-step h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.15rem, 2.2vw, 1.6rem); letter-spacing: .03em; margin-bottom: .5rem; text-shadow: 2px 2px 0 var(--glo-ink); }
.buy-step h3 span { color: var(--glo-green-soft); }
.buy-step p { margin: 0 0 .75rem; color: var(--fg); }
.buy-step p:last-child { margin-bottom: 0; }
.buy-step p a { text-decoration: underline; text-underline-offset: 3px; }
.buy-step .mono { color: var(--glo-green-soft); font-size: .95em; }
.buy-step__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.buy-step__status { min-height: 1.2em; font-size: .78rem; color: var(--glo-amber); margin: .6rem 0 .5rem; }
.netdetails { margin: 0; display: grid; gap: .3rem; font-size: .75rem; }
.netdetails div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .5rem; min-width: 0; }
.netdetails dt { color: var(--fg-muted); letter-spacing: .1em; text-transform: uppercase; }
.netdetails dd { margin: 0; color: var(--glo-cream); overflow-wrap: anywhere; }
.callout {
  margin-top: 2rem;
  border: 2px solid rgba(250,173,63,.7); border-left-width: 8px; border-radius: 14px;
  background: rgba(250,173,63,.07); padding: 1rem 1.25rem;
  font-size: .92rem; color: var(--fg); max-width: 90ch;
}
.callout strong.mono { display: block; color: var(--glo-amber); letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; margin-bottom: .35rem; }

/* ---------- Roadmap: the milestone line (NET accumulated for holders) ---------- */
.phase__float { margin-top: .6rem !important; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--glo-green-soft) !important; }
/* lit for a beat as the van passes this phase's marker. CSS only: app.js
   adds the class, the animation does the rest, and it never loops. */
.phase__float.is-lit { animation: phase-lit 1.2s ease-out 1; }
@keyframes phase-lit {
  0%   { color: var(--glo-green-soft); text-shadow: none; }
  18%  { color: var(--glo-green); text-shadow: var(--glo-halo-sm); }
  100% { color: var(--glo-green-soft); text-shadow: none; }
}
.phase--current { border-color: var(--glo-green-soft); box-shadow: var(--shadow-hard), var(--shadow-glow); }
.phase--current .phase__tag { background: var(--glo-green-soft); color: var(--glo-ink); border-color: var(--glo-green-soft); }

/* ---------- Generator: PFP + MEME ---------- */
.gen { margin-top: 3rem; }
.gen > .eyebrow { margin-bottom: .35rem; }
.gen__lead { margin: .35rem 0 1.1rem; max-width: 62ch; }
.gen__modes { display: inline-flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.gen__mode {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em;
  font-size: 1.05rem; line-height: 1; padding: .6em 1.5em;
  color: var(--glo-cream); background: var(--glo-elev);
  border: 3px solid var(--glo-ink); border-radius: 999px;
  box-shadow: 4px 4px 0 var(--glo-ink); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.gen__mode:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--glo-ink); }
.gen__mode:focus-visible { outline: 3px solid var(--glo-green-soft); outline-offset: 3px; }
.gen__mode.is-on { background: var(--glo-green); color: var(--glo-ink); box-shadow: 4px 4px 0 var(--glo-ink), var(--glo-halo-sm); }
.gen .pfp { margin-top: 0; }
.gen__pane { display: grid; gap: .9rem; align-content: start; min-width: 0; }
.gen__pane[hidden] { display: none; }
.pfp__preview canvas[hidden] { display: none; }
.gen__label { margin: 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--glo-green-soft); }
.gen__field { display: grid; gap: .45rem; min-width: 0; }
.gen__err {
  margin: 0; padding: .6rem .8rem; font-size: .8rem; letter-spacing: .06em;
  color: var(--glo-amber); background: rgba(243,128,32,.08);
  border: 2px solid rgba(243,128,32,.5); border-radius: 12px;
}
.gen__toy { margin-top: .25rem; opacity: .8; }

/* Template strip */
.gen__strip {
  display: flex; gap: .6rem; overflow-x: auto; overflow-y: hidden;
  padding: .25rem .25rem .6rem; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.gen__tpl {
  flex: 0 0 auto; width: 96px; display: grid; gap: .3rem; scroll-snap-align: start;
  padding: .3rem; cursor: pointer; text-align: center;
  background: var(--glo-void); color: var(--fg-muted);
  border: 2px solid rgba(234,247,230,.22); border-radius: 12px;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.gen__tpl img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; background: var(--glo-elev); }
.gen__tpl img[hidden] { display: none; }
.gen__tplname { font-size: .62rem; line-height: 1.25; letter-spacing: .04em; overflow-wrap: anywhere; }
.gen__tpl:hover { border-color: var(--glo-green-soft); color: var(--glo-cream); }
.gen__tpl:focus-visible { outline: 3px solid var(--glo-green-soft); outline-offset: 2px; }
.gen__tpl.is-on { border-color: var(--glo-green); color: var(--glo-cream); box-shadow: var(--glo-halo-sm); }

/* Slot inputs */
.gen__slots { display: grid; gap: .8rem; min-width: 0; }
.gen__slots textarea {
  font: 600 .95rem var(--font-body); letter-spacing: 0; text-transform: none;
  color: var(--glo-cream); background: var(--glo-void);
  border: 2px solid rgba(234,247,230,.25); border-radius: 12px;
  padding: .65rem .8rem; min-width: 0; width: 100%; resize: vertical;
}
.gen__slots textarea:focus { border-color: var(--glo-green-soft); outline: none; }

/* Watermark controls */
.wm {
  display: grid; gap: .7rem;
  border: 2px dashed rgba(57,255,20,.35); border-radius: 14px;
  padding: .85rem .9rem; background: rgba(57,255,20,.03);
}
.wm__out { color: var(--glo-green); }
.wm__row input[type="range"] { width: 100%; accent-color: var(--glo-green); min-width: 0; }
.wm__place { border: 0; margin: 0; padding: 0; min-width: 0; }
.wm__place legend { padding: 0 0 .4rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--glo-green-soft); }
.wm__opts { display: flex; flex-wrap: wrap; gap: .4rem .9rem; min-width: 0; }
.wm__opts label { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; letter-spacing: .05em; color: var(--fg-muted); cursor: pointer; }
.wm__opts input[type="radio"] { accent-color: var(--glo-green); margin: 0; }
.wm__opts label:has(input:checked) { color: var(--glo-cream); }

.gen__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.gen__actions .btn { flex: 0 0 auto; }

/* ---------- PFP generator ---------- */
.pfp {
  margin-top: 3rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr;
  border: 3px solid var(--glo-ink); border-radius: 24px; background: var(--bg-elev);
  padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 10px 10px 0 var(--glo-green);
}
@media (min-width: 760px) { .pfp { grid-template-columns: minmax(0, 420px) 1fr; align-items: start; } }
.pfp__preview { min-width: 0; }
.pfp__preview canvas {
  width: 100%; height: auto; aspect-ratio: 1; display: block;
  border: 3px solid var(--glo-ink); border-radius: 18px; box-shadow: var(--shadow-hard); background: var(--glo-void);
}
.pfp__controls { display: grid; gap: .9rem; align-content: start; min-width: 0; }
.pfp__controls .eyebrow { margin-bottom: 0; }
.pfp__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: .03em; color: var(--glo-cream); text-shadow: 2px 2px 0 var(--glo-ink); }
.pfp__field { display: grid; gap: .35rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--glo-green-soft); }
.pfp__field select, .pfp__field input {
  font: 600 .95rem var(--font-body); letter-spacing: 0; text-transform: none;
  color: var(--glo-cream); background: var(--glo-void);
  border: 2px solid rgba(234,247,230,.25); border-radius: 12px; padding: .65rem .8rem; min-width: 0; width: 100%;
}
.pfp__field select:focus, .pfp__field input:focus { border-color: var(--glo-green-soft); outline: none; }
.pfp__note { margin: 0; font-size: .7rem; color: var(--fg-muted); letter-spacing: .04em; }
.pfp .btn { justify-self: start; }

/* ---------- Community tiles ---------- */
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile-link {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .5rem; text-align: center;
  min-height: 5.5rem; padding: 1rem .75rem; min-width: 0; overflow-wrap: anywhere;
  font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.7rem); letter-spacing: .05em; text-transform: uppercase;
  color: var(--glo-cream); background: var(--bg-elev);
  border: 3px solid var(--glo-ink); border-radius: var(--radius); box-shadow: var(--shadow-hard);
  text-shadow: 2px 2px 0 var(--glo-ink);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s;
}
.tile-link:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--glo-ink); background: rgba(57,255,20,.08); }
.tile-link--wide { grid-column: 1 / -1; background: linear-gradient(120deg, rgba(57,255,20,.15), rgba(243,128,32,.2)), var(--bg-elev); }
.tile-link.is-soon { opacity: .5; filter: grayscale(.4); transform: none !important; box-shadow: 3px 3px 0 var(--glo-ink) !important; }
.tile-link .soon-tag { font-family: var(--font-mono); font-size: .55em; letter-spacing: .2em; opacity: .8; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .will-reveal { opacity: 1; translate: 0 0; }
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; }
  .marquee__group[aria-hidden] { display: none; }
  .glitch::before, .glitch::after { display: none; }
}

/* ---------- Interstitial (challenge-page) treatment ----------
   The flat, mono, faintly polite voice of the "verify you are human"
   wall. Sentence case, no exclamation marks, Dust on Elevated. ----- */
.interstitial-line {
  font-family: var(--font-mono);
  font-size: .85rem; line-height: 1.5; letter-spacing: .04em;
  color: var(--fg-muted);
  margin: 0 0 .9rem;
}
.interstitial-line::before {
  content: "☑";
  color: var(--glo-green);
  margin-right: .5rem;
  text-shadow: var(--glo-halo-sm);
}
.interstitial {
  font-family: var(--font-mono);
  background: var(--bg-elev);
  border: 1px solid rgba(143,163,148,.45);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  color: var(--fg-muted);
  box-shadow: var(--glo-halo-sm);
}

/* =====================================================================
   CLOUDFLARE-SURFACE PASS
   Challenge gate, status board, analytics strip, error cards, Ray ID
   lines. Palette unchanged: green is us and the glow, orange is the
   pair/NET side only, near-black is the ground. Every system string is
   Share Tech Mono, sentence case, no exclamation marks.
   ===================================================================== */

/* ---------- Nav: room for the extra Status link ---------- */
@media (min-width: 821px) {
  .nav__links { flex-wrap: wrap; justify-content: flex-end; gap: 1.15rem; }
}
@media (min-width: 821px) and (max-width: 1080px) {
  .nav__links { gap: .9rem; }
  .nav__links > a:not(.btn) { font-size: .875rem; }
}

/* ---------- Challenge-page entry moment ----------
   A parody captcha: tick, fail with a joke, tick, verified as a glowie.
   Never gates anything: the page is fully rendered underneath, Escape,
   a click outside, a scroll or a hard timer removes it, and it is skipped
   entirely for reduced motion or a second visit. States on .gate:
   is-busy (spinner), is-fail (cross, cream), is-ok (check, green). ---- */
.gate {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 1.25rem;
  background: rgba(5, 8, 7, .93);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 1; transition: opacity .35s ease;
}
.gate[hidden] { display: none; }
.gate.is-out { opacity: 0; pointer-events: none; }
.gate__card {
  width: min(470px, 100%);
  border: 1px solid rgba(143, 163, 148, .45);
  border-radius: 14px;
  background: var(--bg-elev);
  padding: 1.1rem 1.3rem 1rem;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .65), var(--glo-halo-sm);
}
.gate__host { margin: 0 0 .9rem; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--glo-green-soft); }
.gate__row {
  display: flex; align-items: center; gap: .85rem;
  padding-bottom: .85rem; border-bottom: 1px solid rgba(143, 163, 148, .25);
}
.gate__box {
  position: relative; flex: 0 0 auto; width: 34px; height: 34px;
  display: grid; place-items: center; padding: 0; font: inherit; cursor: pointer;
  border: 2px solid rgba(143, 163, 148, .55); border-radius: 7px;
  background: rgba(5, 8, 7, .7); color: var(--glo-green);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gate__box:disabled { cursor: default; }
.gate__box:not(:disabled):hover { border-color: var(--glo-green-soft); }
.gate__box:focus-visible { outline: 3px solid var(--glo-green-soft); outline-offset: 3px; }
.gate__spin {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(143, 163, 148, .3); border-top-color: var(--glo-green);
  animation: gate-spin .9s linear infinite;
}
.gate__check {
  position: absolute; opacity: 0; transform: scale(.55);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .9, .3, 1.5);
}
.gate:not(.is-busy) .gate__spin { display: none; }
.gate__cross {
  position: absolute; opacity: 0; transform: scale(.55); color: var(--glo-cream);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .9, .3, 1.5);
}
.gate.is-fail .gate__cross { opacity: 1; transform: scale(1); }
.gate.is-fail .gate__box { border-color: var(--glo-cream); border-style: dashed; }
.gate.is-fail .gate__label { color: var(--glo-cream); }
.gate.is-busy .gate__cross, .gate.is-busy .gate__check { opacity: 0; }
.gate.is-ok .gate__check { opacity: 1; transform: scale(1); }
.gate.is-ok .gate__box { border-color: var(--glo-green); box-shadow: var(--glo-halo-sm); }
.gate__label { margin: 0; font-size: 1rem; letter-spacing: .04em; color: var(--fg); }
.gate.is-ok .gate__label { color: var(--glo-green-soft); }
.gate__sub, .gate__joke, .gate__foot {
  margin: .7rem 0 0; font-size: .74rem; line-height: 1.5; letter-spacing: .04em; color: var(--fg-muted);
}
.gate__joke { color: rgba(143, 163, 148, .7); }
.gate__foot {
  margin-top: .85rem; padding-top: .65rem; font-size: .68rem;
  border-top: 1px solid rgba(143, 163, 148, .2);
}
.gate__foot span { color: var(--glo-green-soft); }
@keyframes gate-spin { to { transform: rotate(360deg); } }

/* ---------- Error-code chrome (real Cloudflare codes only) ---------- */
.err-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid rgba(243, 128, 32, .6); border-radius: 6px;
  padding: .28rem .65rem;
  background: rgba(243, 128, 32, .07);
  color: var(--glo-amber);
  text-transform: uppercase; letter-spacing: .14em;
}
.pair-stub__eyebrow.err-chip { font-size: .68rem; margin: .5rem 0 0; }
.pair-stub__err { max-width: 42ch; margin: .15rem 0 .3rem; font-size: .76rem; letter-spacing: .05em; color: var(--fg-muted); }
.soon-tag { border: 1px solid currentColor; border-radius: 4px; padding: 0 .3em; }

/* ---------- Ray ID lines ---------- */
.ray-line, .footer__ray {
  margin: .35rem 0 0; font-size: .7rem; letter-spacing: .06em; color: var(--fg-muted);
}
.footer__ray { margin-top: .25rem; }
.ray-line span, .footer__ray span { color: var(--glo-green-soft); }

/* ---------- Analytics strip (The Numbers) ---------- */
.analytics {
  border: 1px solid rgba(143, 163, 148, .3);
  border-radius: 14px;
  background: rgba(12, 20, 16, .55);
  padding: .9rem 1rem 1rem;
  margin: 0 0 2rem;
}
.analytics__head {
  display: flex; flex-wrap: wrap; align-items: center;
  margin: 0 0 .85rem;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--glo-green-soft);
}
.analytics__row { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .analytics__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .analytics__row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.an-card {
  display: flex; flex-direction: column; gap: .3rem; min-width: 0;
  border: 1px solid rgba(143, 163, 148, .22); border-radius: 10px;
  background: rgba(5, 8, 7, .6);
  padding: .7rem .75rem;
}
.an-card__k { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.an-card__v {
  font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; line-height: 1.15;
  color: var(--glo-cream); overflow-wrap: anywhere;
}
.an-card--none .an-card__v { color: var(--fg-muted); }
.an-card__s { font-size: .62rem; letter-spacing: .05em; line-height: 1.45; color: rgba(143, 163, 148, .8); }
.analytics__foot { margin: .8rem 0 0; font-size: .66rem; letter-spacing: .05em; color: var(--fg-muted); }

/* ---------- System status board ---------- */
.status-board {
  border: 1px solid rgba(143, 163, 148, .3);
  border-radius: var(--radius);
  background: rgba(12, 20, 16, .55);
  overflow: hidden;
}
.status-board__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(143, 163, 148, .22);
  background: rgba(57, 255, 20, .06);
}
.status-board__dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--glo-green); box-shadow: 0 0 12px var(--glo-green);
  animation: pulse 1.8s ease-in-out infinite;
}
.status-board__head { margin: 0; font-size: .85rem; letter-spacing: .05em; color: var(--glo-green-soft); }
.status-board__time { margin: 0; font-size: .68rem; letter-spacing: .06em; color: var(--fg-muted); }
@media (min-width: 720px) { .status-board__time { margin-left: auto; } }
.status-board__time span { color: var(--glo-green-soft); }

.components {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 620px) { .components { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .components { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.component {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; min-width: 0;
  padding: .8rem 1rem;
  border-bottom: 1px solid rgba(143, 163, 148, .15);
  border-right: 1px solid rgba(143, 163, 148, .15);
}
.component__name { font-size: .85rem; letter-spacing: .05em; color: var(--fg); min-width: 0; }
.component__sub { display: block; margin-top: .2rem; font-size: .64rem; letter-spacing: .05em; color: var(--fg-muted); }
.pill {
  display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto;
  border-radius: 999px; padding: .2rem .65rem;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.pill--op { color: var(--glo-green-soft); border: 1px solid rgba(57, 255, 20, .55); background: rgba(57, 255, 20, .08); }
.pill--wait { color: var(--glo-amber); border: 1px solid rgba(243, 128, 32, .55); background: rgba(243, 128, 32, .08); }
.pill[hidden] { display: none; }

/* ---------- Collapsed status strip (D3: bar + The Pool row only) ----------
   Matches a .status-board--compact modifier if one lands, and also matches
   structurally (bar + a components list holding only .component--pool, no
   .status-sub) so this holds even if the exact modifier class differs. */
.status-board--compact,
.status-board:has(.component--pool):not(:has(.status-sub)) {
  font-size: .95em;
}
.status-board--compact .status-board__bar,
.status-board:has(.component--pool):not(:has(.status-sub)) .status-board__bar {
  padding: .6rem .85rem;
}
.status-board--compact .components,
.status-board:has(.component--pool):not(:has(.status-sub)) .components {
  grid-template-columns: 1fr;
}
.status-board--compact .component--pool,
.status-board:has(.component--pool):not(:has(.status-sub)) .component--pool {
  border-right: 0;
  padding: .65rem 1rem;
}

.status-sub { padding: 1rem 1rem 1.2rem; }
.status-h {
  margin: 0 0 .35rem;
  font-size: .72rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--glo-green-soft);
}
.incidents { list-style: none; margin: 0; padding: 0; }
.incident { padding: 1rem 0; border-bottom: 1px dashed rgba(143, 163, 148, .22); }
.incident:last-child { border-bottom: 0; padding-bottom: .35rem; }
.incident__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem;
  margin: 0 0 .45rem;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted);
}
.incident__state { border: 1px solid currentColor; border-radius: 4px; padding: .1rem .45rem; }
.incident__state--res { color: var(--glo-green-soft); }
.incident__state--mon { color: var(--glo-amber); }
.incident__title {
  margin: 0 0 .4rem;
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 800; line-height: 1.3; letter-spacing: .005em;
  color: var(--fg);
}
.incident p { margin: 0; max-width: 78ch; font-size: .93rem; color: var(--fg-muted); }
.status-note { margin: 1rem 0 0; font-size: .66rem; line-height: 1.6; letter-spacing: .04em; color: var(--fg-muted); }
.incident__meta > span + span::before { content: "·"; margin-right: .4rem; color: rgba(143, 163, 148, .6); }

/* =====================================================================
   THE OLD INTERNET (section 08), LOIC-era then/now
   Historical exhibit. Reuses .card, .status-board, .incident and the
   interstitial voice; adds only the two-up layout, the absorb diagram
   and two closing lines. The orange arcs are an abstract "edge" shape
   of our own, not a cloud, not a logo, not anyone's trade dress.
   ===================================================================== */
.thennow { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-bottom: 2rem; }
@media (min-width: 860px) { .thennow { grid-template-columns: 1fr 1fr; align-items: start; } }
.card--then { border-color: var(--glo-ink); background: linear-gradient(160deg, rgba(57,255,20,.10), transparent 65%), var(--bg-elev); }
.card--now  { border-color: var(--glo-ink); background: linear-gradient(160deg, rgba(243,128,32,.12), transparent 65%), var(--bg-elev); }
.card--then h3 { color: var(--glo-green-soft); }
.card--now  h3 { color: var(--glo-amber); }
.card--then strong, .card--now strong { color: var(--glo-cream); }
@media (min-width: 860px) {
  .card--then { transform: rotate(-1deg); }
  .card--now  { transform: rotate(1deg); }
}

/* ---------- Absorb diagram ---------- */
.absorb {
  margin: 0 0 1.5rem;
  border: 1px solid rgba(143,163,148,.3); border-radius: var(--radius);
  background: rgba(12,20,16,.55);
  padding: .9rem 1rem 1rem;
}
.absorb__svg { width: 100%; height: auto; }
.absorb__lanes path { fill: none; stroke: rgba(143,163,148,.28); stroke-width: 1; stroke-dasharray: 4 8; }
.absorb__pkts rect { fill: var(--glo-green); }
.absorb__pkts .lane { animation: pkt-flow 2.4s linear infinite; }
.absorb__pkts .lane--2 { animation-delay: -.6s; }
.absorb__pkts .lane--3 { animation-delay: -1.2s; }
.absorb__pkts .lane--4 { animation-delay: -1.8s; }
@keyframes pkt-flow { to { transform: translateX(100px); } }

.absorb__edge .arc { fill: none; stroke: var(--glo-orange); stroke-linecap: round; }
.arc--1 { stroke-width: 5; opacity: .95; animation: arc-breathe 3.2s ease-in-out infinite; }
.arc--2 { stroke-width: 4; opacity: .6;  animation: arc-breathe 3.2s ease-in-out infinite .35s; }
.arc--3 { stroke-width: 3; opacity: .35; animation: arc-breathe 3.2s ease-in-out infinite .7s; }
@keyframes arc-breathe { 50% { opacity: .35; } }

.absorb__card rect { fill: rgba(5,8,7,.85); stroke: rgba(143,163,148,.5); stroke-width: 1.5; }
.absorb__tick { stroke: var(--glo-green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.absorb__ln { fill: rgba(143,163,148,.45) !important; stroke: none !important; }
.absorb__cap { margin: .75rem 0 0; font-size: .66rem; line-height: 1.6; letter-spacing: .05em; color: var(--fg-muted); }

/* ---------- Closing lines ---------- */
.old__quip {
  margin: 0 0 2rem; max-width: 68ch;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--fg);
  border-left: 3px solid var(--glo-green); padding-left: .9rem;
}
.old__quip .mono { color: var(--glo-green-soft); font-size: .95em; }
.status-board--old { margin-bottom: 2rem; }
.status-board--old .status-board__bar { background: rgba(243,128,32,.06); }
.status-board--old .status-board__dot { background: var(--glo-amber); box-shadow: 0 0 12px var(--glo-amber); }
.status-board--old .status-board__head { color: var(--glo-amber); }
.old__tie {
  margin: 0; max-width: 68ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--fg);
}
.old__tie .mono { font-weight: 700; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .absorb__pkts .lane { animation: none; }
  .absorb__edge .arc { animation: none; }
  .arc--2 { opacity: .6; }
  .arc--3 { opacity: .35; }
}

/* =====================================================================
   THE PARTY VAN, it drives down the roadmap as you scroll.
   Greyscale except the green rim glow, the red LED and the orange dish
   rim (orange stays the NET side). Position along the road is written by
   app.js as a transform and nothing else; the bob, the wheels and the
   charge are CSS. Nothing here flashes above 3Hz, nothing here is
   interactive, and reduced motion parks it with the card flat.
   ===================================================================== */
.van-bob, .van { width: 320px; height: 160px; }
.van { position: relative; transform: scale(var(--van-scale, .62)); transform-origin: 50% 50%; }
.van__svg { position: absolute; inset: 0; width: 320px; height: 160px; max-width: none; overflow: visible; }

/* ---- paintwork: greyscale, heavy ink outline ---- */
.van__body { fill: var(--glo-suit-mid); }
.van__skirt, .van__mast, .van__pod, .van__rimring, .van__dish { fill: var(--glo-suit); }
.van__glassfill { fill: var(--glo-elev); }
.van__shadow { fill: rgba(0,0,0,.5); }
.van__handle, .van__tyre { fill: var(--glo-ink); }
.van__lamp, .van__hub, .van__tip, .van__co { fill: var(--glo-shirt); }
.van__co2 { fill: var(--glo-dust); }
.van__co, .van__co2 { font-family: var(--font-mono); }
.van__co { font-size: 11.5px; }
.van__co2 { font-size: 8.5px; }
.van__outline, .van__seam, .van__feed, .van__spoke, .van__whip { fill: none; }
.van__outline { stroke: var(--glo-ink); stroke-width: 4; stroke-linejoin: round; }
.van__seam { stroke: var(--glo-ink); stroke-width: 3; }
.van__feed { stroke: var(--glo-ink); stroke-width: 3; }
.van__mast, .van__pod { stroke: var(--glo-ink); stroke-width: 2.5; }
.van__rimring { stroke: var(--glo-shirt); stroke-width: 2.4; }
.van__spoke { stroke: var(--glo-shirt); stroke-width: 2; }
.van__whip { stroke: var(--glo-shirt); stroke-width: 3; stroke-linecap: round; }
/* the only two things on the van that are not grey: NET-orange dish rim, one red LED */
.van__dish { stroke: var(--glo-orange); stroke-width: 3.5; }
.van__feedtip { fill: var(--glo-orange); }
.van__led {
  fill: #FF3B30; filter: drop-shadow(0 0 4px rgba(255,59,48,.85));
  animation: van-led 2.4s steps(1,end) infinite;
}
@keyframes van-led { 0%,62% { opacity: 1; } 63%,100% { opacity: .16; } }

/* ---- the window: canonical mascot art, cropped by the frame ---- */
.van__glass {
  position: absolute; left: 194px; top: 56px; width: 50px; height: 40px;
  border: 3px solid var(--glo-ink); border-radius: 5px;
  overflow: hidden; background: var(--glo-elev);
}
.van__glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(234,247,230,.16) 0 28%, transparent 30%);
}
.van__mascot { position: absolute; left: -28px; top: -18px; width: 104px; height: auto; max-width: none; }
.van__anchor { position: absolute; left: 172px; top: 20px; width: 1px; height: 1px; }
.emf-ring { fill: none; stroke: var(--glo-green); stroke-width: 2.2; opacity: 0; }
.emf-ring, .van__wheel { transform-box: fill-box; transform-origin: 50% 50%; }

/* ---- bob and wheels: always rolling while the van is on the road ---- */
@keyframes van-bob {
  0%,100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-1.6px) rotate(.35deg); }
  50% { transform: translateY(.6px) rotate(0deg); }
  75% { transform: translateY(-1px) rotate(-.3deg); }
}
@keyframes van-wheel { to { transform: rotate(360deg); } }
@keyframes van-dish { 50% { stroke: var(--glo-amber); stroke-width: 4.5; } }
@keyframes emf { 0% { transform: scale(.3); opacity: 0; } 14% { opacity: 1; } 100% { transform: scale(5); opacity: 0; } }
.road__van .van-bob { animation: van-bob .9s ease-in-out infinite; }
.road__van .van__wheel { animation: van-wheel .6s linear infinite; }
/* charge: LED to ~1.4 Hz (nothing here flashes above 3 Hz), rim pulse, rings */
.section--roadmap.is-charge .van__led { animation-duration: .7s; }
.section--roadmap.is-charge .van__dish { animation: van-dish 1.1s ease-in-out infinite; }
.section--roadmap.is-charge .emf-ring { animation: emf 1.9s ease-out infinite; }
.section--roadmap.is-charge .emf-ring--2 { animation-delay: .63s; }
.section--roadmap.is-charge .emf-ring--3 { animation-delay: 1.26s; }

/* ---- the beam and the card it throws: never interactive, never focusable ---- */
.van-fx { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: none; }
.van-fx__beam {
  position: absolute; left: var(--van-x,50%); top: var(--van-y,60%);
  width: 92vw; margin-left: -46vw; height: 150vh; margin-top: -150vh;
  transform-origin: 50% 100%; transform: rotate(-16deg) scaleY(.15); opacity: 0;
  background: linear-gradient(to top, rgba(57,255,20,.34), rgba(57,255,20,.09) 46%, rgba(57,255,20,0) 78%);
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  mix-blend-mode: screen; filter: blur(7px);
}
@keyframes van-beam {
  0% { opacity: 0; transform: rotate(-16deg) scaleY(.15); }
  16% { opacity: .85; }
  50% { transform: rotate(1deg) scaleY(1); }
  72% { opacity: .6; }
  100% { opacity: 0; transform: rotate(15deg) scaleY(1); }
}
.section--roadmap.is-beam .van-fx__beam { animation: van-beam 1.2s ease-in-out forwards; will-change: transform, opacity; }
.van-fx__card {
  position: absolute; left: 50%; top: 50%; width: min(360px,82vw);
  padding: 1rem 1.15rem .85rem;
  border: 1px solid rgba(143,163,148,.45); border-radius: 14px;
  background: var(--bg-elev);
  box-shadow: 0 26px 70px rgba(0,0,0,.65), var(--glo-halo-sm);
  transform: translate(-50%,-50%) rotate(-2.5deg) scale(.94);
  opacity: 0; visibility: hidden;
}
.van-card__t { margin: 0 0 .55rem; font-size: 1.02rem; color: var(--glo-cream); }
.van-card__c { margin: 0 0 .6rem; font-size: .82rem; color: var(--glo-green-soft); }
.van-card__box { color: var(--glo-green); text-shadow: var(--glo-halo-sm); margin-right: .25rem; }
.van-card__s { margin: 0 0 .55rem; font-size: .72rem; line-height: 1.5; color: var(--fg-muted); }
.van-card__f {
  margin: 0; padding-top: .55rem; border-top: 1px solid rgba(143,163,148,.22);
  font-size: .66rem; letter-spacing: .05em; color: var(--fg-muted);
}
@keyframes van-card {
  0% { opacity: 0; visibility: visible; transform: translate(-50%,-50%) rotate(-2.5deg) scale(.94); }
  12%,74% { opacity: 1; visibility: visible; transform: translate(-50%,-50%) rotate(-2.5deg) scale(1); }
  100% { opacity: 0; visibility: hidden; transform: translate(-50%,-50%) rotate(-2.5deg) scale(1.01); }
}
.section--roadmap.is-card .van-fx__card { animation: van-card 3.2s ease forwards; }

/* ---- parked state: reduced motion. The van still follows the scroll,
        but it does not rotate, bob, ring or beam, and the card is pinned
        flat and faint at the end of the road. ---- */
.road.is-static .van-fx__card {
  position: absolute; left: auto; right: 0; top: auto; bottom: 0;
  width: min(320px, 78%); transform: rotate(-2deg) scale(.9); transform-origin: bottom right;
  opacity: .42; visibility: visible; animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .road__line { animation: none !important; }
  .van-bob, .van__wheel, .van__led, .van__dish { animation: none !important; }
  .emf-ring, .van-fx__beam { display: none !important; }
}

/* =====================================================================
   LORE DROPS, small, scattered, deliberately quiet.
   docs/LORE_EXPANSION.md §0/§7/§9. Nothing here is interactive.
   ===================================================================== */

/* The LINEAGE strip under the three-beat joke grid. */
.lineage {
  margin: 1.75rem 0 0;
  display: grid; gap: .35rem;
  border-left: 3px solid var(--glo-amber);
  padding: .85rem 0 .85rem 1rem;
  background: linear-gradient(90deg, rgba(243,128,32,.06), transparent 70%);
  max-width: 78ch;
}
.lineage__k { font-size: .7rem; letter-spacing: .22em; color: var(--glo-amber); margin: 0; }
.lineage__v {
  margin: 0; color: var(--glo-green-soft);
  font-size: clamp(.9rem, 1.7vw, 1.05rem); letter-spacing: .06em;
  overflow-wrap: anywhere;
}
.lineage__b { margin: 0; color: var(--fg-muted); font-size: .875rem; line-height: 1.65; }

/* The one dated line on the NET price card. */
.card__foot--dated { color: var(--glo-green-soft); opacity: .85; }

/* The aside inside the pre-launch stub, under the 1020 chip. */
.pair-stub__lore {
  max-width: 44ch; margin: .5rem 0 .1rem;
  font-size: .72rem; letter-spacing: .05em; line-height: 1.6;
  color: rgba(143, 163, 148, .72);
}

/* Second footer line, under the Ray ID. */
.footer__ray--lore { color: rgba(143, 163, 148, .62); margin-top: .15rem; }

/* =====================================================================
   THE CLAIM (#claim)
   Deliberately NOT challenge-page chrome. The decorative gate and beam
   cards on this page are mono, faint, bordered in dust and captioned with
   a Ray ID; this one is a product surface: solid card, Inter labels, mono
   numbers, real buttons, and no checkbox anywhere in it. That contrast is
   the point, the only thing on the site that talks to a wallet must not
   look like the joke.
   ===================================================================== */
.section--claim .lead { margin-bottom: 2rem; }

/* --- A. pre-launch tease + dead preview --- */
.claim-tease { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 880px) { .claim-tease { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.claim-tease__card {
  font-family: var(--font-mono);
  background: var(--bg-elev);
  border: 1px solid rgba(143, 163, 148, .45);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  box-shadow: var(--glo-halo-sm);
}
.claim-tease__card .err-chip { font-size: .68rem; }
.claim-tease__h {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  letter-spacing: .04em; color: var(--glo-cream);
  margin: .9rem 0 .6rem; text-shadow: 2px 2px 0 var(--glo-ink);
}
.claim-tease__p { margin: 0; font-size: .82rem; line-height: 1.7; color: var(--fg-muted); }

/* --- the card itself (both the live one and its greyed preview) --- */
.claim-card {
  background: linear-gradient(180deg, rgba(12, 20, 16, .92), rgba(5, 8, 7, .92));
  border: 1px solid rgba(143, 163, 148, .3);
  border-radius: 18px;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .45);
}
.claim-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: .9rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(143, 163, 148, .18);
}
.claim-card__title {
  font-family: var(--font-body); font-weight: 800; font-size: 1.15rem;
  line-height: 1.2; letter-spacing: 0; color: var(--glo-cream); text-shadow: none;
}
.claim-card__chain { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.claim-card__grid { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .claim-card__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.claim-read {
  display: grid; gap: .3rem; align-content: start;
  background: rgba(234, 247, 230, .03);
  border: 1px solid rgba(143, 163, 148, .16);
  border-radius: 12px; padding: .85rem .95rem;
}
.claim-read--hero { grid-column: 1 / -1; border-color: rgba(57, 255, 20, .35); background: rgba(57, 255, 20, .05); }
.claim-read__k {
  font-family: var(--font-body); font-weight: 600;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted);
}
.claim-read__v { font-size: 1.15rem; line-height: 1.25; color: var(--glo-cream); overflow-wrap: anywhere; }
.claim-read--hero .claim-read__v { font-size: clamp(1.6rem, 4vw, 2.25rem); color: var(--glo-green-soft); }
.claim-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.claim-card__addr {
  font-size: .78rem; letter-spacing: .06em; color: var(--glo-green-soft);
  border: 1px solid rgba(57, 255, 20, .3); border-radius: 999px; padding: .3rem .7rem;
}
.claim-card__status { margin: 1rem 0 0; font-size: .78rem; line-height: 1.6; color: var(--fg-muted); overflow-wrap: anywhere; min-height: 1.2em; }
.claim-card__tx { margin: .4rem 0 0; font-size: .78rem; color: var(--fg-muted); }
.claim-card__note {
  margin: 1rem 0 0; padding-top: .8rem; font-size: .7rem; line-height: 1.6; letter-spacing: .04em;
  color: var(--glo-green-soft); border-top: 1px solid rgba(143, 163, 148, .18);
}
/* the pre-launch preview: visible, greyed, and completely inert */
.claim-card--preview { filter: grayscale(.85); opacity: .55; pointer-events: none; user-select: none; }
.claim-legal {
  margin: 1.25rem 0 0; max-width: 88ch;
  font-size: .78rem; line-height: 1.7; color: var(--fg-muted);
}

/* ---------- Play (minigames) ---------- */
.section--play { border-top: 1px solid rgba(57, 255, 20, .12); }
.play-grid { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 760px) { .play-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.play-card {
  position: relative; min-width: 0; min-height: 220px;
  padding: 1.4rem 1.4rem 1.5rem; border-radius: var(--radius);
  background: var(--bg-elev); border: 1px solid rgba(143, 163, 148, .22);
  display: grid; align-content: start; gap: .75rem;
}
.play-card--wide { grid-column: 1 / -1; }
.play-card[hidden] { display: none; }
.play-card__k { margin: 0; font-size: .75rem; letter-spacing: .14em; color: var(--glo-green-soft); }
.play-card__title { margin: 0; font-family: var(--font-display); font-size: var(--t-h2); line-height: 1; letter-spacing: .01em; }
.play-card__p { margin: 0; color: var(--fg-muted); max-width: 52ch; }
.play-card__row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.play-card__foot { margin: .25rem 0 0; font-size: .7rem; letter-spacing: .04em; color: var(--glo-green-soft); border-top: 1px solid rgba(143, 163, 148, .18); padding-top: .7rem; }
.play-card--soon { filter: grayscale(.6); opacity: .7; }
.play-card--soon .play-card__soon { margin: 0; color: var(--fg-muted); }
.play-card--soon .play-card__soon::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: .5em; vertical-align: -.15em; border-radius: 50%; border: 2px solid rgba(57,255,20,.35); border-top-color: var(--glo-green); animation: play-spin 1.1s linear infinite; }
@keyframes play-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .play-card--soon .play-card__soon::after { animation: none; } }
.play__note { margin: 1.5rem 0 0; font-size: .78rem; line-height: 1.7; color: var(--fg-muted); max-width: 88ch; }
.play-canvas { display: block; width: 100%; height: auto; max-width: 420px; border-radius: 10px; background: var(--glo-void); border: 1px solid rgba(143, 163, 148, .22); }
/* ---------- Claim receipt ---------- */
.claim-receipt { margin-top: 1.25rem; display: grid; gap: .75rem; }
.claim-receipt__canvas { max-width: 300px; }
.claim-card--preview .claim-receipt__canvas { filter: grayscale(1); opacity: .8; }
.card--minigame .card__num { color: var(--glo-green-soft); }

/* ---------- hidden always hides ----------
   Author display rules above (grid, flex, block) would otherwise beat the
   user-agent [hidden] rule; the games toggle .hidden on panels that use them. */
[hidden] { display: none !important; }