/* ==========================================================================
   SLOPCOIN - $SLOP
   The palette is lifted straight from the logo and banner: toxic slime
   green and dripping gold on near-black, lit by green smoke.
     --slime = the stock side (NVDAx, rewards, "up")
     --gold  = the slop side  (brainrot, the cast, the tax)
   Neutrals are biased toward green so nothing reads as default grey.
   Deliberately single-theme: this is a brand surface, not a document.
   ========================================================================== */

:root{
  color-scheme: dark;

  --ground:      #050805;
  --ground-2:    #0A0F08;
  --surface:     #0F170D;
  --surface-2:   #152113;
  --line:        #26391D;
  --line-soft:   #1A2816;

  --paper:       #F3FAE8;
  --haze:        #A9BA9E;
  --haze-dim:    #6F8166;

  --slime:       #8CFF2E;
  --slime-deep:  #4DB814;
  --gold:        #FFC61A;
  --gold-deep:   #A87400;
  --pale:        #D2FF85;
  --amber:       #FFA31A;
  --outline:     #030503;

  --wrap:        1160px;
  --gutter:      clamp(16px, 4vw, 40px);
  --radius:      16px;

  /* a fat rounded face, close to the bubble lettering in the logo */
  --f-display: "Titan One", "Arial Rounded MT Bold", Impact, sans-serif;
  --f-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* emoji faces are named explicitly: DM Mono has no glyphs for them and the
     generic fallback does not reliably reach a colour emoji font */
  --f-mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo,
               "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body{
  margin: 0;
  background: var(--ground);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; }
a{ color: inherit; }

:focus-visible{
  outline: 2px solid var(--slime);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- shared bits --------------------------------------------- */

.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec{ padding-block: clamp(72px, 9vw, 124px); position: relative; }
.sec--alt{ background: var(--ground-2); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--haze-dim);
  margin: 0 0 18px;
}
.eyebrow::before{
  content: "";
  width: 9px; height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.eyebrow--stock::before{ background: var(--slime); }

h1, h2, h3{ text-wrap: balance; margin: 0; }

/* Section heads are built like the logo's "SLOP": glossy slime face, gold
   rim, black extrude. Money sections (.h2--slime) invert it - gold face on
   a slime rim - so the two halves of the loop stay legible.
   drop-shadow, not text-shadow: a background-clip:text face is painted at
   the background stage, and text-shadow would land on top of it. */
.h2{
  --h2-face: linear-gradient(180deg,
    #F4FFDF 0%, #C4FF7A 26%, #8CFF2E 52%, #5FD11A 74%, #B9FF6E 100%);
  --h2-rim: var(--gold);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  background: var(--h2-face);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(2px 2px 0 var(--h2-rim))
    drop-shadow(4px 5px 0 var(--outline))
    drop-shadow(0 0 22px rgba(140,255,46,.28));
}
.h2--slime{
  --h2-face: linear-gradient(180deg,
    #FFFBE6 0%, #FFE48A 24%, #FFC61A 50%, #D99300 70%, #FFE08A 100%);
  --h2-rim: var(--slime);
}

.deck{
  color: var(--haze);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  max-width: 58ch;
  margin: 18px 0 0;
}

.sec-head{ margin-bottom: clamp(40px, 5vw, 64px); }

.mono{ font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.slime{ color: var(--slime); }
.berry{ color: var(--gold); }

/* ---------- ambient wash --------------------------------------------- */

.ambient{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* vignette first: every AI render is darker at the corners than it should be */
    radial-gradient(ellipse 118% 86% at 50% 46%, transparent 38%, rgba(0,0,0,.62) 100%),
    radial-gradient(760px 520px at 12% -6%,  rgba(140,255,46,.20),  rgba(140,255,46,0) 68%),
    radial-gradient(700px 560px at 92% 6%,   rgba(255,198,26,.14),  rgba(255,198,26,0) 66%),
    radial-gradient(820px 640px at 50% 44%,  rgba(140,255,46,.09),  rgba(140,255,46,0) 70%),
    radial-gradient(900px 700px at 50% 104%, rgba(90,200,30,.20),   rgba(90,200,30,0) 70%);
}
.ambient::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(243,250,232,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(243,250,232,.028) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(ellipse 120% 70% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 120% 70% at 50% 0%, #000 20%, transparent 78%);
}

#page{ position: relative; z-index: 1; }

/* a permanent, low-level scanline haze - the page should always read
   slightly cursed, even before anyone touches the deep fry switch */
.grain{
  position: fixed;
  inset: 0;
  z-index: 54;
  pointer-events: none;
  opacity: .07;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.55) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(140,255,46,.35)  0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

/* ---------- sunburst ---------------------------------------------------- */

/* ---------- the lighting rig -------------------------------------------- */
/* Golden-hour volumetrics, a lens flare and floating bokeh. None of this is
   information - it is the lighting every AI render ships with whether the
   scene calls for it or not, which is the entire point. */

.stage{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.godrays{
  position: absolute;
  top: -58%;
  left: 52%;
  width: 150vmax;
  aspect-ratio: 1;
  opacity: .5;
  /* rgba(...,0) not `transparent`: `transparent` is rgba(0,0,0,0), so
     interpolating to it drags every gradient through black and leaves
     dirty grey fringes */
  background: repeating-conic-gradient(from 186deg at 50% 50%,
    rgba(190,255,120,.20) 0deg 1.4deg, rgba(190,255,120,0) 1.4deg 7.5deg);
  filter: blur(7px);
  -webkit-mask-image: radial-gradient(closest-side, #000 14%, rgba(0,0,0,0) 60%);
  mask-image: radial-gradient(closest-side, #000 14%, rgba(0,0,0,0) 60%);
  animation: rayspin 150s linear infinite;
}
@keyframes rayspin{
  from{ transform: translateX(-50%) rotate(0deg); }
  to  { transform: translateX(-50%) rotate(360deg); }
}

.flare{
  position: absolute;
  top: 2%;
  right: 8%;
  width: min(48vw, 640px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,246,200,.50) 0%, rgba(255,210,70,.24) 16%,
    rgba(140,255,46,.12) 36%, rgba(140,255,46,0) 64%);
  filter: blur(10px);
  animation: flarepulse 9s ease-in-out infinite;
}
/* the ghost orb every lens flare drops on the opposite diagonal */
.flare::after{
  content: "";
  position: absolute;
  left: -34%;
  top: 64%;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150,255,225,.45), rgba(150,255,225,0) 68%);
  filter: blur(5px);
}
@keyframes flarepulse{ 0%,100%{ opacity: .7; } 50%{ opacity: 1; } }

.bokeh{
  position: absolute;
  width: var(--w, 60px);
  aspect-ratio: 1;
  border-radius: 50%;
  top:   var(--t, auto);
  left:  var(--lt, auto);
  right: var(--rt, auto);
  opacity: .55;
  /* centred and heavily blurred: an off-centre origin reads as a lit solid
     sphere, which is the opposite of an out-of-focus highlight */
  background: radial-gradient(circle,
    rgba(214,255,150,.55) 0%, rgba(160,255,80,.22) 40%, rgba(160,255,80,0) 72%);
  filter: blur(6px);
  animation: drift var(--dur, 19s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes drift{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  50%     { transform: translate3d(16px, -30px, 0); }
}

@keyframes sunspin{
  from{ transform: translate(-50%, -50%) rotate(0deg); }
  to  { transform: translate(-50%, -50%) rotate(360deg); }
}

/* the watermark an AI video leaves in the corner */
.ai-mark{
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(243,250,232,.52);
  padding: 6px 12px 5px;
  border-radius: 999px;
  background: rgba(3,5,3,.38);
  border: 1px solid rgba(243,250,232,.14);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ---------- the cast, floating ------------------------------------------ */
/* Real character images, slapped on as square photo stickers: hard offset
   shadow, black keyline, rotated, rocking gently. They sit in a layer per
   section so they never land on top of body copy. */

.chr-layer{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.chr-layer--front{ z-index: 2; }
.sec > .wrap{ position: relative; z-index: 1; }

.chr{
  position: absolute;
  width: var(--w, 96px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  top:    var(--t, auto);
  left:   var(--lt, auto);
  right:  var(--rt, auto);
  bottom: var(--bt, auto);
  border: 3px solid var(--outline);
  border-radius: 14px;
  box-shadow: 5px 7px 0 rgba(3,5,3,.5), 0 0 30px rgba(140,255,46,.30);
  filter: saturate(1.3) contrast(1.05);
  transform: rotate(var(--rot, 0deg));
  animation: bob var(--dur, 7s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes bob{
  0%, 100%{ transform: rotate(var(--rot, 0deg)) translateY(0); }
  50%     { transform: rotate(calc(var(--rot, 0deg) * -0.85)) translateY(-15px); }
}

/* sparks are CSS-drawn, not images - a clipped four-point star */
.chr.spark{
  width: var(--w, 22px);
  background: currentColor;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  filter: drop-shadow(0 0 10px currentColor);
  animation: twinkle var(--dur, 3.5s) ease-in-out var(--dl, 0s) infinite;
  color: var(--slime);
}
.chr.spark[data-c="pale"]{ color: var(--pale); }
.chr.spark[data-c="gold"]{ color: var(--gold); }
.chr.spark[data-c="amber"]{ color: var(--amber); }
@keyframes twinkle{
  0%, 100%{ transform: scale(.55) rotate(0deg);   opacity: .35; }
  50%     { transform: scale(1.1) rotate(90deg);  opacity: 1; }
}

/* ---------- the parade -------------------------------------------------- */

.parade{
  display: flex;
  overflow: hidden;
  padding-block: 14px;
  border-block: 3px solid var(--outline);
  background: linear-gradient(90deg,
    var(--gold), var(--amber), var(--slime), var(--pale), var(--gold));
  -webkit-user-select: none;
  user-select: none;
}
.parade-row{
  display: flex;
  align-items: flex-end;
  gap: clamp(22px, 4vw, 58px);
  padding-right: clamp(22px, 4vw, 58px);
  flex: none;
  animation: tape 30s linear infinite;
}
.walker{
  width: clamp(54px, 7vw, 92px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  flex: none;
  border: 3px solid var(--outline);
  border-radius: 12px;
  box-shadow: 3px 5px 0 rgba(3,5,3,.45);
  filter: saturate(1.25) contrast(1.04);
  animation: walk 1.5s ease-in-out infinite;
}
.walker:nth-child(2n){ animation-delay: -.25s; }
.walker:nth-child(3n){ animation-delay: -.5s; }
.walker:nth-child(4n){ animation-delay: -.75s; }
@keyframes walk{
  0%, 100%{ transform: translateY(0)     rotate(-6deg); }
  50%     { transform: translateY(-10px) rotate(6deg); }
}

/* ---------- nav -------------------------------------------------------- */

.nav{
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: rgba(5,8,5,.84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.nav-progress{
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold), var(--slime));
}

.nav-bar{
  display: flex;
  align-items: center;
  gap: 18px;
  height: 64px;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.brand-mark{
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(140,255,46,.5);
}
.brand-name{
  font-family: var(--f-display);
  font-size: 1.32rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-tick{
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  color: var(--ground);
  background: var(--slime);
  padding: 3px 6px 2px;
  border-radius: 4px;
  line-height: 1;
}

.nav-links{
  display: flex;
  gap: 4px;
  margin-inline: auto;
  list-style: none;
  padding: 0;
  margin-block: 0;
}
.nav-links a{
  display: block;
  padding: 8px 12px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--haze);
  text-decoration: none;
  border-radius: 8px;
  transition: color .16s, background .16s;
}
.nav-links a:hover{ color: var(--paper); background: var(--surface); }

.nav-actions{ display: flex; align-items: center; gap: 10px; flex: none; }

/* X links: the account is the product, so the handle gets real estate */
.nav-x{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--paper);
  transition: color .16s, border-color .16s, background .16s;
}
.nav-x:hover{ color: var(--ground); background: var(--slime); border-color: var(--slime); }
.nav-x svg{ width: 15px; height: 15px; fill: currentColor; }

.hero-handle{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: .95rem;
  color: var(--haze);
  text-decoration: none;
  transition: color .16s;
}
.hero-handle svg{ width: 14px; height: 14px; fill: currentColor; flex: none; }
.hero-handle:hover{ color: var(--slime); }

.x-handle{ color: var(--slime); text-decoration: none; font-weight: 600; }
.x-handle:hover{ text-decoration: underline; text-underline-offset: 3px; }

.fry{
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--haze-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px 6px;
  cursor: pointer;
  transition: color .16s, border-color .16s, background .16s;
  white-space: nowrap;
}
.fry:hover{ color: var(--paper); border-color: var(--haze-dim); }
.fry[aria-pressed="true"]{
  color: var(--ground);
  background: var(--gold);
  border-color: var(--gold);
}

.nav-toggle{
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--paper);
  padding: 7px 10px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: .72rem;
}

/* ---------- buttons ---------------------------------------------------- */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .14s ease, box-shadow .16s, background .16s, color .16s;
}
.btn--primary{
  background: var(--slime);
  color: #0A1404;
  box-shadow: 0 0 0 0 rgba(140,255,46,.5);
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(140,255,46,.65); }
.btn--ghost{
  background: transparent;
  color: var(--paper);
  border-color: var(--line);
}
.btn--ghost:hover{ border-color: var(--haze-dim); background: var(--surface); }
.btn--sm{ padding: 9px 16px; font-size: .84rem; }
.btn--soon{ opacity: .5; pointer-events: none; }

/* ---------- hero ------------------------------------------------------- */

.hero{
  padding-block: clamp(20px, 3vw, 36px) clamp(56px, 7vw, 96px);
  overflow: hidden; /* contains the lighting rig and any sticker that hangs off */
}

/* The hero is laid out like the X profile the coin actually is: the banner
   across the top, the logo as an avatar biting into its bottom edge, and
   the name beside it. */
.hero-banner{
  position: relative;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 2px solid var(--gold-deep);
  box-shadow:
    0 0 0 1px rgba(255,198,26,.25),
    0 30px 90px -34px rgba(140,255,46,.55),
    0 12px 40px -18px rgba(0,0,0,.9);
}
.hero-banner img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

.hero-id{
  --av: clamp(92px, 15vw, 196px);
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 2.4vw, 28px);
  margin-top: 14px;
  padding-left: clamp(10px, 2.4vw, 32px);
  position: relative;
  z-index: 2;
}
.hero-avatar{
  flex: none;
  width: var(--av);
  height: var(--av);
  /* pulls half its height up over the banner; a negative margin shrinks
     the flex item's outer box, so the name never rides up onto the image */
  margin-top: calc(var(--av) * -0.5 - 14px);
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--ground);
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 36px 4px rgba(140,255,46,.45),
    0 14px 30px -10px rgba(0,0,0,.9);
}
.hero-name{ min-width: 0; padding-bottom: 4px; }
.hero-name .eyebrow{ margin-bottom: 8px; }

.hero-title{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 7vw, 5.6rem);
  line-height: .98;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--paper);
}
/* Built like the logo's "SLOP": glossy slime face, a gold layer and a hard
   black extrude. The extrudes live on the h1, not on the span - a
   background-clip:text face is painted as a background, so a negative
   z-index child of the SAME element would cover it instead of sitting
   behind it. */
.hero-title{ position: relative; z-index: 0; }
.hero-title::before,
.hero-title::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
}
.hero-title::before{                /* black extrude, furthest back */
  z-index: -2;
  color: var(--outline);
  -webkit-text-fill-color: var(--outline);
  transform: translate(.024em, .028em);
  animation: extrude-b 1s cubic-bezier(.2,.8,.2,1) both;
}
.hero-title::after{                 /* gold layer, between */
  z-index: -1;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  transform: translate(.012em, .014em);
  animation: extrude-a 1s cubic-bezier(.2,.8,.2,1) both;
}
.hero-title span{
  position: relative;
  display: inline-block;
  background: linear-gradient(180deg,
    #F4FFDF 0%, #C4FF7A 26%, #8CFF2E 52%, #5FD11A 74%, #B9FF6E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@keyframes extrude-b{
  from{ transform: translate(.14em, .16em); }
  to  { transform: translate(.024em, .028em); }
}
@keyframes extrude-a{
  from{ transform: translate(.07em, .08em); }
  to  { transform: translate(.012em, .014em); }
}

.hero-body{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 68px);
  align-items: start;
  margin-top: clamp(26px, 3vw, 40px);
}
.hero-deck{
  font-size: clamp(1.25rem, 2.7vw, 1.95rem);
  line-height: 1.22;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
.hero-sub{
  color: var(--haze);
  margin: 0;
}

.hero-cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.ca{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 100%;
}
.ca-label{
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--haze-dim);
  flex: none;
}
.ca-value{
  font-family: var(--f-mono);
  font-size: .82rem;
  color: var(--paper);
  overflow-wrap: anywhere;
  min-width: 0;
  flex: 1 1 200px;
}
.ca-copy{
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--haze);
  border-radius: 8px;
  padding: 7px 12px 6px;
  cursor: pointer;
  flex: none;
  transition: color .16s, border-color .16s;
}
.ca-copy:hover{ color: var(--slime); border-color: var(--slime-deep); }
.ca-copy[disabled]{ opacity: .45; cursor: not-allowed; }

/* four tiles, stepped explicitly rather than auto-fit: auto-fit lands on a
   3-column row around tablet width and strands the fourth tile on its own */
.stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 46px 0 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}
.stat{ background: var(--ground); padding: 18px 20px; }
.stat dt{
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--haze-dim);
  margin: 0 0 6px;
}
.stat dd{
  margin: 0;
  font-family: var(--f-mono);
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}

/* ---------- ticker tape ------------------------------------------------ */

.tape{
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  background: var(--surface);
  padding-block: 11px;
  -webkit-user-select: none;
  user-select: none;
}
.tape-row{
  display: flex;
  gap: 40px;
  padding: 0 40px 0 0;
  margin: 0;
  list-style: none;
  flex: none;
  animation: tape 52s linear infinite;
}
.tape li{
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--haze-dim);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tape li::after{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .8;
}
.tape li:nth-child(even){ color: var(--slime); }
.tape li:nth-child(even)::after{ background: var(--slime); }
@keyframes tape{ to{ transform: translateX(-100%); } }
#tape-2 .tape-row{ animation-direction: reverse; animation-duration: 64s; }

/* ---------- the loop --------------------------------------------------- */

.loop-fig{
  margin: 0 0 clamp(36px, 4.5vw, 56px);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  border-radius: var(--radius);
  padding: clamp(16px, 3vw, 34px);
  overflow-x: auto;
}
.loop-fig svg{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-width: 480px;
  color: var(--haze);
}
.loop-fig figcaption{
  margin-top: 18px;
  font-family: var(--f-mono);
  font-size: .72rem;
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--haze-dim);
  min-width: 480px;
}
.n-box{ fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
.n-title{ fill: var(--paper); font-family: var(--f-body); font-size: 17px; font-weight: 700; }
.n-sub{ fill: var(--haze-dim); font-family: var(--f-mono); font-size: 11px; }
.n-slop .n-box{ stroke: var(--gold-deep); }
.n-stock .n-box{ stroke: var(--slime-deep); }
.a-line{ stroke: var(--haze-dim); stroke-width: 1.6; fill: none; }
.a-line--key{ stroke: var(--slime); stroke-width: 2.4; }
.ah{ fill: var(--haze-dim); }
.ah-key{ fill: var(--slime); }
.a-label{ fill: var(--haze); font-family: var(--f-mono); font-size: 12px; }
.a-label--key{ fill: var(--slime); }
.hub{ fill: var(--ground); stroke: var(--line); stroke-width: 1.5; }
.hub-a{ fill: var(--paper); font-family: var(--f-display); font-size: 25px; }
.hub-b{ fill: var(--haze-dim); font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.6px; }

.steps{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.step{ background: var(--ground); padding: 24px 22px 26px; }
.sec--alt .step{ background: var(--ground-2); }
.step-n{
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--gold);
  display: block;
  margin-bottom: 12px;
}
.step:nth-child(n+3) .step-n{ color: var(--slime); }
.step h3{
  font-family: var(--f-body);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.step p{ margin: 0; color: var(--haze); font-size: .94rem; line-height: 1.55; }

/* ---------- the tax ---------------------------------------------------- */

.tax-top{
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(38px, 4.5vw, 58px);
}
.tax-num{
  display: flex;
  flex-direction: column;
  font-family: var(--f-display);
  font-size: clamp(4.6rem, 13vw, 9rem);
  /* a full line-height, not a tight display one: Titan One's glyphs are
     taller than its em box, so anything under ~1.1 lets the numeral
     overhang whatever comes next */
  line-height: 1.1;
  color: var(--gold);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
/* sized in rem, not em: at .1em the label became unreadable on a phone */
.tax-num small{
  font-family: var(--f-mono);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--haze-dim);
  letter-spacing: .2em;
  margin-top: 16px;
  text-transform: uppercase;
}

.tax-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.tax-card{
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 22px 24px;
}
.tax-card:nth-child(2){ border-left-color: var(--amber); }
.tax-card:nth-child(3){ border-left-color: var(--slime); }
.tax-card h3{
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 10px;
}
.tax-card p{ margin: 0; color: var(--haze); font-size: .94rem; line-height: 1.58; }

.table-note{ font-size: .84rem; color: var(--haze-dim); margin: 14px 0 0; max-width: 64ch; }

/* ---------- the feed --------------------------------------------------- */

.chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.chip{
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--haze-dim);
  border-radius: 999px;
  padding: 7px 14px 6px;
  cursor: pointer;
  transition: color .16s, border-color .16s, background .16s;
}
.chip:hover{ color: var(--paper); border-color: var(--haze-dim); }
.chip[aria-pressed="true"]{ background: var(--paper); border-color: var(--paper); color: var(--ground); }

.feed{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cast-card{
  background: var(--surface);
  border: 2px solid var(--outline);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 5px 6px 0 rgba(3,5,3,.5);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cast-card:hover{ transform: translate(-3px, -4px); box-shadow: 9px 11px 0 rgba(3,5,3,.55); }

.cast-art{
  position: relative;
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 2px solid var(--outline);
  /* every card gets its own oversaturated render-slop gradient */
  background:
    radial-gradient(120% 95% at 22% 4%,  hsl(var(--h) 94% 60% / .95), hsl(var(--h) 94% 60% / 0) 62%),
    radial-gradient(120% 95% at 84% 98%, hsl(calc(var(--h) + 155) 96% 54% / .9), hsl(calc(var(--h) + 155) 96% 54% / 0) 64%),
    #0F170D;
}
.cast-art img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* push the render toward the oversaturated look the genre is made of */
  filter: saturate(1.28) contrast(1.06);
  transition: transform .3s ease;
}
.cast-card:hover .cast-art img{ transform: scale(1.06); }

.cast-body{ padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.cast-tag{
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.cast-name{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0;
  color: var(--paper);
  text-shadow: 2px 2px 0 rgba(3,5,3,.7);
}
.cast-line{ margin: 0; color: var(--haze); font-size: .9rem; line-height: 1.5; }

/* ---------- buy -------------------------------------------------------- */

.buy{
  counter-reset: buy;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.buy li{
  counter-increment: buy;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
}
.buy li::before{
  content: counter(buy, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--slime);
  display: block;
  margin-bottom: 12px;
}
.buy h3{ font-size: 1.02rem; font-weight: 700; margin: 0 0 8px; }
.buy p{ margin: 0; color: var(--haze); font-size: .94rem; line-height: 1.55; }
.buy code{
  font-family: var(--f-mono);
  font-size: .86em;
  background: var(--surface-2);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--slime);
}

/* ---------- roadmap ---------------------------------------------------- */

.phases{ display: grid; }
.phase{
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 40px);
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--line-soft);
}
.phase:last-child{ border-bottom: 1px solid var(--line-soft); }
.phase-tag{
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--haze-dim);
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 6px;
}
.dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--haze-dim); flex: none; }
.dot--live{ background: var(--slime); box-shadow: 0 0 0 4px rgba(140,255,46,.16); }
.phase h3{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-transform: uppercase;
  line-height: 1.04;
  margin: 0 0 8px;
}
.phase p{ margin: 0; color: var(--haze); max-width: 56ch; }

/* ---------- faq -------------------------------------------------------- */

.faq{ border-top: 1px solid var(--line-soft); }
.faq details{ border-bottom: 1px solid var(--line-soft); }
.faq summary{
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  font-weight: 600;
  font-size: 1.04rem;
  position: relative;
  transition: color .16s;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary:hover{ color: var(--slime); }
.faq summary::after{
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-mono);
  font-size: 1.3rem;
  color: var(--haze-dim);
  line-height: 1;
}
.faq details[open] summary::after{ content: "\2013"; color: var(--gold); }
.faq p{ margin: 0 0 22px; color: var(--haze); max-width: 68ch; font-size: .98rem; }

/* ---------- footer ----------------------------------------------------- */

.foot{
  border-top: 1px solid var(--line-soft);
  background: var(--ground-2);
  padding-block: clamp(46px, 6vw, 72px) 40px;
}
.foot-top{ display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.foot-tag{ font-family: var(--f-display); font-size: 1.9rem; text-transform: uppercase; line-height: 1; margin: 0; }
.foot-tag span{ color: var(--haze-dim); }
.foot-links{ display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.foot-links a, .foot-links span{
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 15px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--haze);
  text-decoration: none;
  transition: color .16s, border-color .16s;
}
.foot-links a:hover{ color: var(--slime); border-color: var(--slime-deep); }
.foot-links span{ opacity: .4; }
/* two class names so this wins regardless of source order against .legal */
.legal.legal--credit{ margin-top: 14px; padding-top: 0; border-top: 0; opacity: .8; }

.legal{
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  color: var(--haze-dim);
  font-size: .82rem;
  line-height: 1.7;
  max-width: 80ch;
}

/* ---------- deep fry --------------------------------------------------- */

#page{ transition: filter .28s ease; }
body.fried #page{ filter: saturate(2.6) contrast(1.35) hue-rotate(-10deg) brightness(1.05); }
.fry-overlay{
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,198,26,.07) 0 2px, rgba(140,255,46,.05) 2px 4px);
  mix-blend-mode: overlay;
}
body.fried .fry-overlay{ opacity: 1; }

/* ---------- toast ------------------------------------------------------ */

.toast{
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px);
  z-index: 80;
  background: var(--slime);
  color: #0A1404;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 11px 18px 10px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }

/* ---------- slop finish ------------------------------------------------- */
/* Chunky sticker buttons, glossy panel tops, a ticker that cycles the
   full palette. Applied last so it sits on top of the base components. */

.btn--primary{
  background-image: linear-gradient(180deg, #DCFFB0 0%, var(--slime) 46%, #56C414 100%);
  border: 2px solid var(--outline);
  box-shadow: 0 4px 0 #2A6E08, 0 12px 26px -12px rgba(140,255,46,.8);
}
.btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #2A6E08, 0 18px 32px -12px rgba(140,255,46,.9);
}
.btn--primary:active{ transform: translateY(2px); box-shadow: 0 1px 0 #2A6E08; }

.btn--ghost{
  border: 2px solid var(--outline);
  background: var(--surface-2);
  box-shadow: 0 4px 0 rgba(3,5,3,.6);
}
.btn--ghost:hover{ transform: translateY(-2px); box-shadow: 0 6px 0 rgba(3,5,3,.6); background: var(--surface-2); }
.btn--ghost:active{ transform: translateY(2px); box-shadow: 0 1px 0 rgba(3,5,3,.6); }

/* Every panel is moulded plastic: a specular line along the top edge, a
   sheen falling off by a third of the way down, and a darker pool at the
   bottom. Cheap 3D-render lighting, applied to flat rectangles. */
.stat,
.step,
.tax-card,
.buy li,
.loop-fig,
.ca{
  background-image: linear-gradient(180deg,
    rgba(255,255,255,.11), rgba(255,255,255,.018) 32%, rgba(0,0,0,.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 16px 32px -22px rgba(0,0,0,.95);
}
/* cast cards keep their sticker offset, and gain the same top specular */
.cast-card{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 5px 6px 0 rgba(3,5,3,.5);
}
.cast-card:hover{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 9px 11px 0 rgba(3,5,3,.55);
}
/* ---------- slime drips ------------------------------------------------- */
/* A band of the banner's green slime that hangs off the bottom of a strip
   and drips into the next section. One SVG tile, repeated across. */
.drip{
  position: relative;
  z-index: 3;
  height: 38px;
  margin-bottom: -38px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 38' preserveAspectRatio='none'%3E%3Cpath fill='%238CFF2E' d='M0 0H200V9Q196 9 195 15V26Q195 32 191 32Q187 32 187 26V15Q186 9 182 9H150Q146 9 145 13V18Q145 22 142 22Q139 22 139 18V13Q138 9 134 9H104Q100 9 99 15V31Q99 38 94 38Q89 38 89 31V15Q88 9 84 9H56Q52 9 51 13V22Q51 27 47 27Q43 27 43 22V13Q42 9 38 9H20Q16 9 15 12V16Q15 19 12 19Q9 19 9 16V12Q8 9 4 9H0Z'/%3E%3Cpath fill='%23E4FFB8' opacity='.55' d='M0 2H200V4H0Z'/%3E%3C/svg%3E") repeat-x;
  background-size: 200px 38px;
  filter: drop-shadow(0 4px 0 rgba(3,5,3,.55)) drop-shadow(0 0 16px rgba(140,255,46,.45));
}

.tax-card{ border-left-width: 5px; }
.tax-num{ text-shadow: 4px 4px 0 var(--outline), 8px 8px 0 rgba(255,198,26,.35); }
/* text-shadow inherits: without this the label below the numeral gets the
   same two offset copies and reads as doubled, blurry text */
.tax-num small{ text-shadow: none; }

.brand-tick{ border: 2px solid var(--outline); box-shadow: 0 2px 0 rgba(3,5,3,.6); }

/* ticker cycles the whole palette rather than two colours */
.tape li:nth-child(4n+1){ color: var(--gold); }
.tape li:nth-child(4n+2){ color: var(--slime); }
.tape li:nth-child(4n+3){ color: var(--pale); }
.tape li:nth-child(4n+4){ color: var(--amber); }
.tape li:nth-child(4n+1)::after{ background: var(--gold); }
.tape li:nth-child(4n+2)::after{ background: var(--slime); }
.tape li:nth-child(4n+3)::after{ background: var(--pale); }
.tape li:nth-child(4n+4)::after{ background: var(--amber); }

.chip[aria-pressed="true"]{
  background: linear-gradient(180deg, #E4FFB8, var(--slime));
  border-color: var(--outline);
  color: var(--outline);
  box-shadow: 0 3px 0 rgba(3,5,3,.6);
}

.foot-tag{ text-shadow: 3px 3px 0 var(--gold), 6px 6px 0 rgba(3,5,3,.6); }

/* ---------- responsive ------------------------------------------------- */

@media (max-width: 640px){
  /* at phone width the 3:1 banner is a sliver - crop in on the coin and
     the SLOP lettering in the middle instead */
  .hero-banner img{ aspect-ratio: 2 / 1; }
  .hero-banner{ border-radius: 16px; }
}

@media (max-width: 1300px){
  /* this one sits beside the hero paragraph - it needs the most room */
  .chr--xwide{ display: none; }
}

@media (max-width: 1100px){
  /* edge stickers get clipped into the text column below this width */
  .sec:not(.hero) .chr:not(.spark){ display: none; }
}

@media (max-width: 900px){
  .nav-bar{ position: relative; }
  .nav-links{
    display: none;
    position: absolute;
    left: calc(var(--gutter) * -1);
    right: calc(var(--gutter) * -1);
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--ground);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 16px;
  }
  .nav-links.open{ display: flex; }
  .nav-links a{ padding: 12px 4px; font-size: 1rem; }
  .nav-toggle{ display: block; }
  .nav-actions{ margin-left: auto; }
  /* stickers that need room either side of the text column */
  .chr--wide{ display: none; }
  .tax-top{ grid-template-columns: 1fr; align-items: start; }
  .phase{ grid-template-columns: 1fr; gap: 10px; }
  .phase-tag{ padding-top: 0; }
}

@media (max-width: 820px){
  .hero-body{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px){
  .stats{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .nav-actions .btn{ display: none; }
  .hero-deck{ max-width: none; }
  .foot-tag{ font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .tape-row{ animation: none; }
}