:root{
  /* Robinhood Chain palette: black, white, Robin Neon */
  --bg:#000000;
  --bg2:#0a0a0a;
  --surface:#141414;
  --text:#ffffff;
  --muted:#a3a3a3;
  --neon:#CCFF00;
  --neon-dim:#CCFF00;
  --green:#CCFF00;
  --green2:#CCFF00;
  --yellow:#CCFF00;
  --blue:#CCFF00;
  --line: rgba(255,255,255,.12);
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --radius: 12px;
  --radius2: 16px;
  --max: 1120px;
  --header-h: 72px;
  --scroll: 0; /* set by JS */
}

*{box-sizing:border-box}
html{
  height: 100%;
  overflow-x: hidden;
}
body{
  margin:0;
  min-height: 100%;
  height: auto;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 800px at 12% -8%, rgba(204,255,0,.14), transparent 55%),
    radial-gradient(900px 700px at 92% 8%, rgba(204,255,0,.08), transparent 58%),
    radial-gradient(1000px 800px at 50% 110%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.container{width: min(var(--max), calc(100% - 40px)); margin: 0 auto}

.skip-link{
  position:absolute; left:-999px; top:10px;
  background:#000; padding:10px 12px; border-radius:10px; z-index:9999;
}
.skip-link:focus{left:10px}

/* Futuristic background FX */
.fx{position:fixed; inset:0; pointer-events:none; z-index:0}
.fx__stars{position:absolute; inset:0; width:100%; height:100%}
.fx__grid{
  position:absolute; inset:-40%;
  background:
    linear-gradient(to right, rgba(204,255,0,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(204,255,0,.08) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(900px) rotateX(58deg) translateY(20%);
  opacity:.28;
  animation: gridMove 14s linear infinite;
}
@keyframes gridMove{
  0%{background-position: 0 0, 0 0}
  100%{background-position: 0 360px, 360px 0}
}
.fx__scanlines{
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.05) 0px,
    rgba(255,255,255,.05) 1px,
    transparent 2px,
    transparent 7px
  );
  opacity:.12;
  mix-blend-mode: overlay;
  animation: scan 8s linear infinite;
}
@keyframes scan{0%{transform: translateY(0)}100%{transform: translateY(18px)}}
.fx__glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(700px 500px at 15% 20%, rgba(204,255,0,.18), transparent 60%),
    radial-gradient(800px 600px at 80% 15%, rgba(204,255,0,.14), transparent 60%),
    radial-gradient(900px 700px at 60% 95%, rgba(204,255,0,.10), transparent 62%);
  filter: blur(30px);
  opacity:.85;
}

/* Smooth background palette crossfade */
.fx__wash{
  position:absolute;
  inset:-20%;
  filter: blur(34px);
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity;
}
.fx__wash--a{opacity: .0}
.fx__wash--b{opacity: .0}
.fx[data-wash="a"] .fx__wash--a{opacity: .70}
.fx[data-wash="b"] .fx__wash--b{opacity: .70}

main{position:relative; z-index:1}

/* Scroll progress */
.scrollbar{
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  z-index: 200;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
}
.scrollbar__bar{
  height: 100%;
  width: 0%;
  background: #CCFF00;
  box-shadow: 0 0 18px rgba(204,255,0,.35);
  transform-origin: left center;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 12px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand__logo{
  width:44px; height:44px; border-radius: 14px; object-fit:cover;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border:1px solid rgba(204,255,0,.35);
  background: #CCFF00;
}
.brand__text{display:flex; flex-direction:column; line-height:1.05}
.brand__name{
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  font-size: 20px; letter-spacing: .6px;
}
.brand__symbol{font-size: 12px; color: var(--neon)}

.nav{display:flex; gap:16px; align-items:center}
.nav__link{
  color: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: 14px;
  padding: 10px 10px;
  border-radius: 12px;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.nav__link:hover{
  background: rgba(204,255,0,.10);
  box-shadow: none;
  transform: translateY(-1px);
}
.topbar__cta{display:flex; gap:10px; align-items:center}

/* Buttons */
.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}
.btn--primary{
  background: #CCFF00;
  color: #000000;
  border-color: #CCFF00;
  box-shadow: 0 14px 30px rgba(204,255,0,.18);
}
.btn--primary:hover{
  filter:none;
  background: #CCFF00;
  box-shadow: 0 18px 34px rgba(204,255,0,.28);
}
.btn--ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.22);
  color: #ffffff;
}
.btn--lg{padding: 12px 16px; border-radius: 16px; font-size: 15px}
.hero .btn--lg{padding: 15px 20px; font-size: 16px}

.burger{
  display:none;
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  cursor:pointer;
}
.burger span{
  display:block;
  width:20px; height:2px;
  background: rgba(255,255,255,.92);
  margin: 4px auto;
  border-radius: 99px;
}

.mobile{
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.92);
}
.mobile__inner{padding: 14px 0; display:grid; gap:10px}
.mobile__link{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-weight: 900;
}
.mobile__row{display:flex; gap:10px; align-items:center}

/* Hero */
.hero{
  position:relative;
  padding: 0;
  min-height: calc(100svh - var(--header-h)); /* sticky header space */
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero__inner{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(40px, 7.5vh, 92px) 0;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(18px, 3vw, 40px);
  align-items:center;
}

.hero__copy{
  max-width: 720px;
  justify-self: center;
  text-align: left;
  position: relative;
  transform: translateY(-10px);
}
.hero__copy > :not(.hero-float){
  position: relative;
  z-index: 2;
}

.hero__actions{justify-content:flex-start}
.chip{margin-left: 0; margin-right: 0}
.ca{justify-content:flex-start}
.ca__copy{margin-left: auto}
.badges{justify-content:flex-start}
.hero__bg{position:absolute; inset:0; pointer-events:none; overflow:hidden}

.marquee{
  border: 1px solid rgba(204,255,0,.22);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  overflow:hidden;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 0 0 1px rgba(204,255,0,.10) inset;
}
.marquee__track{
  display:flex;
  gap: 18px;
  padding: 8px 14px;
  color: rgba(255,255,255,.85);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  animation: marquee 14s linear infinite;
}
@keyframes marquee{0%{transform: translateX(0)}100%{transform: translateX(-50%)}}

.chip{
  display:inline-flex;
  gap:8px;
  align-items:center;
  background: #CCFF00;
  border:1px solid #CCFF00;
  color: #000000;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
}
.chip--pulse{position:relative}
.chip--pulse:after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius: 999px;
  border:1px solid rgba(204,255,0,.35);
  opacity:0;
  animation: pulse 2.8s ease-out infinite;
}
@keyframes pulse{
  0%{transform: scale(.92); opacity:0}
  20%{opacity:.55}
  100%{transform: scale(1.14); opacity:0}
}

.hero__title{margin: 14px 0 10px; line-height: .92}
.hero__titleTop{
  display:block;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  letter-spacing: 1.2px;
  font-size: clamp(44px, 6.4vw, 78px);
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.hero__titleBottom{
  display:block;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  letter-spacing: 2px;
  font-size: clamp(66px, 8.7vw, 122px);
  color: var(--neon);
  text-shadow: none;
}
.hero__subtitle{
  margin: 0 0 18px;
  color: rgba(163,163,163,.92);
  font-size: 20px;
  line-height: 1.55;
  max-width: 56ch;
}
.hero__actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

/* Glitch overlay text */
.glitch{position:relative}
.glitch:before,
.glitch:after{
  content: attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  opacity:.14;
  pointer-events:none;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  mix-blend-mode: screen;
}
.glitch:before{
  transform: translate(2px, -1px);
  color: rgba(204,255,0,.95);
  animation: glitch 3.8s infinite;
}
.glitch:after{
  transform: translate(-2px, 1px);
  color: rgba(204,255,0,.92);
  animation: glitch 4.4s infinite;
}
@keyframes glitch{
  0%, 88%, 100%{clip-path: inset(0 0 0 0)}
  89%{clip-path: inset(12% 0 60% 0)}
  91%{clip-path: inset(62% 0 18% 0)}
  93%{clip-path: inset(28% 0 44% 0)}
}

.ca{
  margin-top: 16px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px 14px;
}
.ca__label{color: rgba(163,163,163,.92); font-weight: 800; font-size: 14px}
.ca__value{color: rgba(255,255,255,.96); font-weight: 800; font-size: 14px}
.ca__copy{
  margin-left:auto;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid #CCFF00;
  background: #CCFF00;
  color: #000000;
  font-weight: 700;
  cursor:pointer;
}
.ca__copy:hover{transform: translateY(-1px)}

.badges{margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap}
.badge{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 10px 12px;
  display:flex; gap:10px; align-items:baseline;
}
.badge__k{font-size: 12px; color: rgba(163,163,163,.90); font-weight: 900}
.badge__k{font-size: 12px; color: rgba(163,163,163,.90); font-weight: 800}
.badge__v{font-size: 14px; font-weight: 950}
.badge__v{font-size: 14px; font-weight: 900}

/* Cards / holo */
.hero__art{display:flex; justify-content:center}
.card{
  background: rgba(20,20,20,.72);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 18px;
  position:relative;
  overflow:hidden;
  will-change: transform;
  transform-style: preserve-3d;
}

/* Animated border glow (applies to all "boxes") */
.card::before,
.gcard::before,
.embed::before,
.callout::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  padding: 1px;
  background: conic-gradient(
    from calc((var(--scroll) * 1turn) + 30deg),
    rgba(204,255,0,.0),
    rgba(204,255,0,.35),
    rgba(204,255,0,.22),
    rgba(204,255,0,.18),
    rgba(204,255,0,.0)
  );
  opacity: .18;
  filter: blur(.2px);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  transition: opacity .25s ease;
}
.card:hover::before,
.gcard:hover::before,
.embed:hover::before,
.callout:hover::before{
  opacity: .38;
}
.is-in.card::before,
.is-in .gcard::before,
.is-in.embed::before,
.is-in.callout::before{
  opacity: .26;
}

.card::after,
.embed::after,
.callout::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(520px 240px at calc(20% + (var(--scroll) * 60%)) 0%, rgba(204,255,0,.10), transparent 60%);
  opacity:.35;
}

.card--art{
  padding: 14px;
  width: min(480px, 100%);
  aspect-ratio: 4 / 5;
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.card.card--art{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.card.card--art::before,
.card.card--art::after{
  content: none !important;
}
.card--art .art__shine{display:none !important;}
.card--art::after{
  opacity: 0; /* remove hover/scroll wash behind logo */
}
.art__img{
  width:100%;
  height:100%;
  object-fit:contain;
  transform: translateY(8px);
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.35));
}
/* Logo orb */
.logo-orb{
  width: min(340px, 78%);
  aspect-ratio: 1 / 1;
  margin: 18px auto 0;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(255,255,255,.03) 55%, rgba(0,0,0,.10));
  border: 1px solid rgba(204,255,0,.22);
  box-shadow:
    0 0 0 6px rgba(204,255,0,.06),
    0 18px 40px rgba(0,0,0,.35),
    0 0 26px rgba(204,255,0,.18);
  position: relative;
  animation: logoBob 3.6s ease-in-out infinite;
}
.logo-orb--hero{
  margin-top: 64px; /* move it down */
  width: min(380px, 86%);
}
.logo-orb:before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  background: conic-gradient(from calc((var(--scroll) * 1turn) + 30deg), rgba(204,255,0,.0), rgba(204,255,0,.28), rgba(204,255,0,.16), rgba(204,255,0,.14), rgba(204,255,0,.0));
  opacity:.45;
  filter: blur(.2px);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  pointer-events:none;
}
.logo-orb__img{
  width: 74%;
  height: 74%;
  object-fit: cover;
  border-radius: 999px;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.28));
}
@keyframes logoBob{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-8px)}
}
.art__sticker{
  position:absolute;
  right: -22px;
  bottom: -18px;
  width: 170px;
  transform: rotate(6deg);
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.38));
}

/* Floating hero sticker next to about text */
.hero-float{
  position:absolute;
  right: -6px;
  top: calc(86px - 4.5cm); /* lift above title text */
  width: 240px;
  height: 200px;
  pointer-events:none;
  opacity: .95;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.45));
  z-index: 1; /* stay behind title text */
}
.hero-float__shrek{
  position:absolute;
  right: 22px;
  bottom: 0;
  width: 150px;
  height: auto;
  animation: jumpy 1.9s ease-in-out infinite;
}
.hero-float__donkey{
  position:absolute;
  left: 0;
  bottom: 10px;
  width: 100px;
  height: auto;
  transform: rotate(-4deg);
  animation: jumpy2 2.2s ease-in-out infinite;
}
@keyframes jumpy{
  0%,100%{transform: translateY(0) rotate(0deg)}
  50%{transform: translateY(-14px) rotate(1deg)}
}
@keyframes jumpy2{
  0%,100%{transform: translateY(0) rotate(-4deg)}
  50%{transform: translateY(-10px) rotate(-2deg)}
}
.art__shine{
  position:absolute;
  inset:-40% -70% auto auto;
  width: 320px; height: 320px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%);
  transform: rotate(18deg);
}
.holo__rim{
  position:absolute;
  inset: 10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(204,255,0,.14) inset;
  pointer-events:none;
}

.card__title{margin:0 0 8px; font-size: 18px; font-weight: 950}
.card__title{margin:0 0 8px; font-size: 18px; font-weight: 900}
.card__text{margin:0 0 14px; color: rgba(163,163,163,.92); line-height: 1.5}

/* Sections */
.section{
  padding: 56px 0;
  position:relative;
}
.section:before{content:none}
.section::after{
  content:"";
  position:absolute;
  inset:-1px 0;
  pointer-events:none;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.2,.8,.2,1);
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(204,255,0,.10), transparent 60%),
    radial-gradient(900px 700px at 90% 25%, rgba(204,255,0,.08), transparent 62%),
    radial-gradient(1000px 800px at 55% 110%, rgba(204,255,0,.07), transparent 65%);
}
.section.is-active::after{opacity: 1}
.section > .container{position:relative; z-index:1}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.section--chart{
  isolation: isolate;
  overflow: hidden;
  border-top: 0;
  border-bottom: 0;
  background:
    radial-gradient(1000px 560px at 50% -10%, rgba(204,255,0,.14), transparent 58%),
    radial-gradient(820px 480px at 8% 80%, rgba(204,255,0,.08), transparent 55%),
    radial-gradient(760px 420px at 92% 70%, rgba(255,255,255,.04), transparent 55%),
    linear-gradient(180deg, #000000 0%, #0a0a0a 40%, #0c1000 70%, #000000 100%);
}
.section--chart::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(204,255,0,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 55%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(204,255,0,.12) 0 1px, transparent 2px);
  background-size: 140px 140px, 180px 180px, 220px 220px;
}
.section--chart::after{
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), transparent 18%),
    linear-gradient(0deg, rgba(0,0,0,.55), transparent 18%),
    radial-gradient(700px 360px at 50% 100%, rgba(204,255,0,.10), transparent 70%);
}
.section--gallery{
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid rgba(204,255,0,.22);
  border-bottom: 1px solid rgba(204,255,0,.22);
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(204,255,0,.18), transparent 58%),
    radial-gradient(780px 480px at 92% 100%, rgba(204,255,0,.12), transparent 55%),
    linear-gradient(180deg, #0a0a0a 0%, #111400 45%, #0a0a0a 100%);
}
.section--gallery::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    linear-gradient(rgba(204,255,0,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204,255,0,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.section--gallery::after{
  opacity: 1;
  background:
    radial-gradient(620px 340px at 50% 110%, rgba(204,255,0,.16), transparent 70%);
}
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 18px;
  flex-wrap:wrap;
}
.section__title{
  margin:0;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  letter-spacing: .5px;
  font-size: 34px;
  text-transform: none;
}
.section__subtitle{margin:0; color: rgba(163,163,163,.92); font-weight: 700}

.grid{display:grid; gap:14px}
.grid--3{grid-template-columns: repeat(3, 1fr)}
.grid--4{grid-template-columns: repeat(4, 1fr)}

.callout{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius2);
  border: 1px solid rgba(204,255,0,.35);
  background: rgba(204,255,0,.08);
}
.callout__title{margin:0 0 6px; font-size: 16px; font-weight: 950}
.callout__text{margin:0; color: rgba(255,255,255,.92); line-height:1.5}

.card--stat{padding: 16px}
.stat{display:flex; flex-direction:column; gap:6px}
.stat__k{
  color: rgba(163,163,163,.92);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing:.9px
}
.stat__v{font-weight: 1000; font-size: 18px}

.token-split{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items:stretch;
}
.token-split__chart{
  display:grid;
  grid-template-columns: 220px 1fr;
  align-items:center;
  gap: 18px;
}
.donut{position:relative; width: 220px; height: 220px; display:grid; place-items:center}
.donut__ring{
  width: 220px; height: 220px;
  border-radius: 999px;
  background:
    conic-gradient(
      var(--green) 0 80%,
      var(--yellow) 80% 95%,
      var(--blue) 95% 100%
    );
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}
.donut__hole{
  position:absolute;
  width: 138px; height: 138px;
  border-radius: 999px;
  background: rgba(0,0,0,.85);
  border:1px solid rgba(255,255,255,.08);
  display:grid; place-items:center;
}
.donut__center{display:flex; flex-direction:column; align-items:center; gap:2px}
.donut__title{
  color: rgba(163,163,163,.92);
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px
}
.donut__value{font-weight: 1000; font-size: 26px}

.legend{display:grid; gap:10px}
.legend__row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.legend__dot{width:12px; height:12px; border-radius:999px; background: var(--c); box-shadow: 0 0 0 4px rgba(255,255,255,.04)}
.legend__label{color: rgba(255,255,255,.92); font-weight: 900}
.legend__label{color: rgba(255,255,255,.92); font-weight: 900}
.legend__value{color: rgba(163,163,163,.92); font-weight: 900}

.list{margin: 0; padding-left: 18px; color: rgba(163,163,163,.92); line-height: 1.6}
.list{margin: 0; padding-left: 18px; color: rgba(163,163,163,.92); line-height: 1.6}
.list li{margin: 6px 0}

.step{display:flex; flex-direction:column; gap:6px}
.step__num{
  width: 34px; height: 34px;
  border-radius: 10px;
  display:grid; place-items:center;
  background: #CCFF00;
  border: 1px solid #CCFF00;
  color: #000000;
  font-weight: 800;
}

.howcard{
  position:relative;
  height: 100%;
}
.howcard .step{
  height: 100%;
}
.howcard:before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(204,255,0,.0), rgba(204,255,0,.22), rgba(204,255,0,.14), rgba(204,255,0,.0));
  opacity:.0;
  filter: blur(.2px);
  pointer-events:none;
  transition: opacity .25s ease;
}
.howcard:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: radial-gradient(420px 220px at 30% 10%, rgba(204,255,0,.14), transparent 60%);
  opacity:.25;
  pointer-events:none;
}
.howcard:hover:before{opacity:1}

.step__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.step__icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 16px 34px rgba(0,0,0,.25);
  transform: translateZ(10px);
}
.step__icon svg{
  width: 22px;
  height: 22px;
  stroke: rgba(255,255,255,.95);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.howcard:hover .step__icon{
  border-color: rgba(204,255,0,.22);
  box-shadow: 0 18px 42px rgba(204,255,0,.16);
}

.how-net{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius2);
  border: 1px solid rgba(204,255,0,.22);
  background: rgba(204,255,0,.06);
}
.how-net__item{
  display:flex;
  flex-direction:column;
  gap: 4px;
  min-width: 0;
}
.how-net__k{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(163,163,163,.95);
}
.how-net__v{
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  overflow-wrap: anywhere;
}
.how-net__v--mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: var(--neon);
}

.step__tag{
  margin-top: 8px;
  width: fit-content;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #000000;
  padding: 6px 10px;
  border-radius: 999px;
  background: #CCFF00;
  border: 1px solid #CCFF00;
}

.timeline{display:grid; gap: 14px}
.timeline__item{display:grid; grid-template-columns: 26px 1fr; align-items:start; gap: 10px}
.timeline__dot{
  width: 14px; height: 14px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--neon);
  box-shadow: 0 0 0 6px rgba(204,255,0,.10);
}
.timeline__item:not(:last-child) .timeline__dot{position:relative}
.timeline__item:not(:last-child) .timeline__dot:after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 18px;
  width: 2px;
  height: calc(100% + 40px);
  background: rgba(204,255,0,.35);
}

.card--link{
  display:block;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.card--link:hover{
  transform: translateY(-2px);
  border-color: rgba(204,255,0,.25);
  box-shadow: 0 22px 64px rgba(0,0,0,.60);
}
.card__arrow{margin-top: 8px; font-weight: 1000; color: rgba(204,255,0,.92)}

/* Tokenomics redesign */
.tok{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
  justify-items: center;
}
.tok__stats{
  width: 100%;
  max-width: var(--max);
}
.tok__grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  width: 100%;
}
.tok__card{padding: 16px}
.tokstat{
  display:flex;
  gap: 12px;
  align-items:center;
}
.tokstat__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.25);
}
.tokstat__icon svg{
  width: 22px;
  height: 22px;
  stroke: rgba(255,255,255,.95);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tokstat__k{
  color: rgba(163,163,163,.92);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .9px;
  text-transform: uppercase;
}
.tokstat__v{
  font-weight: 1000;
  font-size: 20px;
  margin-top: 4px;
}
a.tokstat__v{
  color: inherit;
  text-decoration: none;
}
a.tokstat__v:hover{
  color: var(--neon);
}
.tok__actions{padding: 18px}
.tok__btns{display:flex; gap:10px; flex-wrap:wrap}
.tok__mini{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.tok__pill{
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.tok__mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

/* Paid to Holders */
.pth{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  padding: 28px 28px;
  min-height: 140px;
  overflow: hidden;
}
.pth__left{
  display:flex;
  flex-direction:column;
  gap: 4px;
  flex-shrink: 0;
}
.pth__label{
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.pth__value{
  margin: 6px 0 4px;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -1px;
}
.pth__sub{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.pth__sym{
  color: var(--neon);
  font-weight: 800;
}
.pth__desc{
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(163,163,163,.7);
}
.pth__calc{
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  display: inline-block;
  filter: blur(5px);
  opacity: .72;
  user-select: none;
  animation: pthBlurPulse 1.6s ease-in-out infinite;
}
@keyframes pthBlurPulse{
  0%, 100%{ filter: blur(4px); opacity: .62 }
  50%{ filter: blur(7px); opacity: .85 }
}
.pth__value .pth__calc{
  filter: blur(6px);
}
@media (prefers-reduced-motion: reduce){
  .pth__calc{ animation: none; filter: blur(5px); opacity: .7 }
}
.pth__dots::after{
  content: "";
  animation: pthDots 1.2s steps(4, end) infinite;
}
@keyframes pthDots{
  0%{ content: "" }
  25%{ content: "." }
  50%{ content: ".." }
  75%{ content: "..." }
}
.pth__right{
  flex: 1;
  min-width: 0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.pth__chart{
  width: 100%;
  max-width: 340px;
  height: 100px;
  display:block;
}
@media (max-width: 600px){
  .pth{ flex-direction: column; align-items: flex-start; gap: 16px }
  .pth__right{ width: 100%; justify-content: flex-start }
  .pth__chart{ max-width: 100% }
}

/* SHREK / NFLX pair */
.pair{
  margin-top: 16px;
  padding: 26px 28px 28px;
  position: relative;
  overflow: hidden;
}
.pair__glow{
  position: absolute;
  inset: -20% -10% auto auto;
  width: 420px;
  height: 280px;
  background: radial-gradient(circle, rgba(229,9,20,.18), transparent 68%);
  pointer-events: none;
}
.pair__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.pair__eyebrow{
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.pair__fee{
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: #CCFF00;
  color: #000000;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
}
.pair__arena{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin: 22px 0 18px;
  position: relative;
  z-index: 1;
}
.pair__side{
  display: flex;
  align-items: center;
  gap: 14px;
}
.pair__side--netflix{
  justify-content: flex-end;
  text-align: right;
}
.pair__side--netflix .pair__meta{ align-items: flex-end }
.pair__orb{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #0a0a0a;
  border: 1px solid rgba(204,255,0,.35);
  box-shadow: 0 0 0 6px rgba(204,255,0,.06), 0 16px 36px rgba(0,0,0,.35);
  overflow: hidden;
  flex-shrink: 0;
}
.pair__orb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pair__orb--netflix{
  background: #000000;
  border-color: rgba(229,9,20,.85);
  box-shadow: 0 0 0 6px rgba(229,9,20,.12), 0 16px 36px rgba(0,0,0,.35);
  padding: 14px;
}
.pair__orb--netflix img{
  object-fit: contain;
  width: 58%;
  height: auto;
}
.pair__meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pair__ticker{
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  font-size: clamp(22px, 3.4vw, 34px);
  letter-spacing: .4px;
  line-height: 1;
  color: #ffffff;
}
.pair__name{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.pair__mid{
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
}
.pair__slash{
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  font-size: 28px;
  color: #CCFF00;
  line-height: 1;
  z-index: 1;
}
.pair__pulse{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(204,255,0,.35);
  animation: pairPulse 2.4s ease-out infinite;
}
@keyframes pairPulse{
  0%{ transform: scale(.7); opacity: .7 }
  100%{ transform: scale(1.35); opacity: 0 }
}
.pair__copy{
  margin: 0;
  position: relative;
  z-index: 1;
  color: rgba(163,163,163,.95);
  font-size: 15px;
  line-height: 1.55;
  max-width: 72ch;
}
.pair__copy strong{ color: #ffffff; font-weight: 800 }
@media (max-width: 720px){
  .pair{ padding: 22px 18px 22px }
  .pair__arena{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 12px;
  }
  .pair__side,
  .pair__side--netflix{
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }
  .pair__side--netflix .pair__meta{ align-items: center }
  .pair__meta{ align-items: center }
}

/* Chart placeholder */
.chart-empty{
  padding: 56px 28px;
  text-align: center;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    radial-gradient(600px 240px at 50% 0%, rgba(204,255,0,.10), transparent 70%),
    rgba(20,20,20,.72);
}
.chart-empty__kicker{
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.chart-empty__title{
  margin: 0;
  font-family: "Archivo Black", "Space Grotesk", sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  color: #CCFF00;
  letter-spacing: .4px;
}
.chart-empty__text{
  margin: 4px 0 0;
  max-width: 42ch;
  color: rgba(163,163,163,.95);
  font-size: 15px;
  line-height: 1.5;
}

/* Embed */
.embed{
  border-radius: var(--radius2);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  position:relative;
}
.embed iframe{
  width: 100%;
  height: min(72vh, 720px);
  border: 0;
  display:block;
}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.gcard{
  grid-column: span 4;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius2);
  padding: 0;
  cursor:pointer;
  overflow:hidden;
  position:relative;
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}
.gcard img{
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.03);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease;
}
.gcard:nth-child(1) img,
.gcard:nth-child(2) img{
  object-fit: contain;
  background: rgba(0,0,0,.18);
  transform: none;
}
.gcard__shine{
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.26), transparent 55%);
  transform: rotate(18deg);
  opacity: .0;
  transition: opacity .35s ease;
  pointer-events:none;
}
.gcard:hover{
  border-color: rgba(204,255,0,.22);
  transform: translateY(-2px);
}
.gcard:hover img{
  transform: scale(1.07);
  filter: saturate(1.12) contrast(1.06);
}
.gcard:nth-child(1):hover img,
.gcard:nth-child(2):hover img{
  transform: scale(1.02);
}
.gcard:hover .gcard__shine{opacity:.55}

/* Staggered "float" for extra life */
.gcard:nth-child(3n+1){animation: floatCard 6.8s ease-in-out infinite}
.gcard:nth-child(3n+2){animation: floatCard 7.6s ease-in-out infinite}
.gcard:nth-child(3n){animation: floatCard 8.4s ease-in-out infinite}
@keyframes floatCard{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-6px)}
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index: 120;
  display:grid;
  place-items:center;
}
.lightbox[hidden]{display:none}
.lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  border:0;
}
.lightbox__panel{
  position:relative;
  width: min(980px, calc(100% - 32px));
  margin: 0;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.78);
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  animation: pop .18s ease-out;
}
@keyframes pop{
  from{transform: translateY(10px) scale(.98); opacity:.0}
  to{transform: translateY(0) scale(1); opacity:1}
}
.lightbox__img{
  width:100%;
  height: auto;
  max-height: min(72vh, 760px);
  object-fit: contain;
  display:block;
  background: rgba(0,0,0,.22);
}
.lightbox__cap{
  padding: 12px 14px;
  color: rgba(163,163,163,.92);
  font-weight: 800;
}
.lightbox__x{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.95);
  cursor:pointer;
  font-weight: 1000;
}

/* Reveal animation */
[data-reveal]{
  opacity:0;
  transform: translateY(14px) scale(.98);
}
.is-in{
  opacity:1 !important;
  transform: translateY(0) scale(1) !important;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}

/* Footer + toast */
.site-footer{
  padding-bottom: 28px;
}
.footer{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
  flex-wrap:wrap;
}
.footer__brand{display:flex; align-items:center; gap:10px; font-weight: 950}
.footer__brand img{width:34px; height:34px; border-radius: 12px; object-fit:cover; border:1px solid rgba(204,255,0,.35); background:#CCFF00}
.footer__disclaimer{margin:10px 0 0; color: rgba(163,163,163,.85); max-width: 64ch; line-height: 1.55}

.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 80;
}
.toast__inner{
  padding: 12px 14px;
  background: rgba(0,0,0,.86);
  border:1px solid rgba(204,255,0,.25);
  border-radius: 16px;
  box-shadow: var(--shadow);
  font-weight: 950;
}

/* Responsive */
@media (max-width: 980px){
  html{ overflow-x: hidden; }
  body{ overflow-x: hidden; min-height: 100%; height: auto; }

  .container{ width: min(var(--max), calc(100% - 28px)); }

  .topbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: env(safe-area-inset-top);
  }
  .topbar__inner{ padding: 10px 0; }
  .brand__text{ display:flex !important; }
  .brand__name{ font-size: 16px; }
  .brand__symbol{ font-size: 11px; }
  .nav, .topbar__cta{ display:none; }
  .burger{ display:block; }

  main{ padding-top: calc(var(--header-h) + env(safe-area-inset-top)); }

  /* Home = exactly 1 mobile screen; tokenomics starts on next scroll */
  .hero{
    height: calc(100svh - var(--header-h) - env(safe-area-inset-top));
    max-height: calc(100svh - var(--header-h) - env(safe-area-inset-top));
    min-height: 0;
    padding: 0;
    align-items: center;
    overflow: hidden;
  }
  .hero__inner{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 0 16px;
    height: 100%;
    align-content: center;
    justify-items: center;
  }
  .hero__copy{
    max-width: 100%;
    text-align: center;
    transform: none;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero__title{ margin: 8px 0 6px; }
  .hero__titleTop{ font-size: clamp(28px, 7.5vw, 40px); }
  .hero__titleBottom{ font-size: clamp(44px, 11vw, 68px); }
  .hero__subtitle{
    margin: 0 auto 12px;
    font-size: 14px;
    line-height: 1.45;
    max-width: 34ch;
  }
  .hero__actions{
    justify-content: center;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    margin-top: 2px;
  }
  .hero__actions .btn{
    width: 100%;
  }
  .hero .btn--lg{
    padding: 12px 14px;
    font-size: 15px;
  }
  .chip{
    margin-left:auto;
    margin-right:auto;
    padding: 8px 12px;
    font-size: 12px;
  }
  .hero-float{ display:none !important; }
  .hero__art{
    display:flex !important;
    justify-content:center;
    order: 0;
    overflow: visible;
    background: transparent;
  }
  .hero__copy{ order: 1; }
  .card--art{
    width: min(132px, 34vw);
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .logo-orb--hero{
    margin-top: 0;
    width: min(120px, 32vw);
    background: transparent;
    border: 0;
    box-shadow:
      0 0 0 5px rgba(204,255,0,.08),
      0 0 28px rgba(204,255,0,.28);
  }
  .logo-orb--hero:before{ display: none; }
  .logo-orb__img{
    width: 100%;
    height: 100%;
    border-radius: 999px;
  }
  .logo-orb{ margin: 0 auto; overflow: visible; }

  .section{ padding: 40px 0; }
  .section__head{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 14px;
  }
  .section__title{ font-size: 28px; }
  .section__subtitle{ font-size: 14px; }

  .grid--3, .grid--4{ grid-template-columns: 1fr; }
  .tok, .tok__grid{ grid-template-columns: 1fr; }
  .tok__card{ padding: 14px; }
  .tokstat__v{ font-size: 17px; word-break: break-word; }

  .how-net{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }
  .how-net__item{
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .how-net__item:last-child{
    padding-bottom: 0;
    border-bottom: 0;
  }
  .how-net__v, .how-net__v--mono{
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  /* Pair: keep orbs tiny, stack cleanly */
  .pair{
    margin-top: 14px;
    padding: 18px 16px 20px;
  }
  .pair__top{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .pair__fee{
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  .pair__arena{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 14px;
    margin: 18px 0 14px;
  }
  .pair__side,
  .pair__side--netflix{
    width: 100%;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 10px;
  }
  .pair__side--netflix .pair__meta,
  .pair__meta{ align-items: center; }
  .pair__orb,
  .pair__orb--netflix{
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    overflow: hidden !important;
    margin: 0 auto;
  }
  .pair__orb img,
  .pair__orb--netflix img,
  .pair__netflix{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
  }
  .pair__orb--netflix img,
  .pair__netflix{
    object-fit: contain !important;
    width: 58% !important;
    height: auto !important;
  }
  .pair__ticker{ font-size: 26px; }
  .pair__copy{ font-size: 14px; }

  .pth{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 16px;
    min-height: 0;
  }
  .pth__value{ font-size: clamp(30px, 10vw, 44px); }
  .pth__right{ width: 100%; justify-content: stretch; }
  .pth__chart{ max-width: 100%; height: 88px; }

  .chart-empty{
    min-height: 200px;
    padding: 36px 18px;
  }
  .chart-empty__title{ font-size: clamp(24px, 7vw, 34px); }

  .howcard{ padding: 16px; }
  .gallery{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .gcard{ grid-column: span 1; }

  .footer{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .mobile{
    max-height: min(70vh, 520px);
    overflow: auto;
  }
  .mobile__row{
    flex-direction: column;
    align-items: stretch;
  }
  .mobile__row .btn{ width: 100%; }

  /* Background washes */
  .fx__wash{ display:none !important; }
  .section::after{ display:none !important; }
  .fx__glow{ opacity:.7; }
  .fx__grid{
    opacity: .14;
    transform: perspective(900px) rotateX(58deg) translateY(28%) scale(1.08);
  }
  .fx__scanlines{ opacity: .08; }
  .section--alt{
    background: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
  }
  .section{
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
  .section--gallery{
    border-top: 1px solid rgba(204,255,0,.22) !important;
    border-bottom: 1px solid rgba(204,255,0,.22) !important;
    background:
      radial-gradient(700px 420px at 20% 0%, rgba(204,255,0,.16), transparent 58%),
      radial-gradient(640px 380px at 90% 100%, rgba(204,255,0,.10), transparent 55%),
      linear-gradient(180deg, #0a0a0a 0%, #111400 45%, #0a0a0a 100%) !important;
  }
  .section--gallery::before{
    display:block !important;
    content:"" !important;
    opacity:.26;
  }
  .section--gallery::after{
    display:block !important;
    content:"" !important;
    opacity: 1 !important;
    background:
      radial-gradient(520px 280px at 50% 110%, rgba(204,255,0,.14), transparent 70%) !important;
  }
  .section--chart{
    border-top: 0 !important;
    border-bottom: 0 !important;
    background:
      radial-gradient(900px 480px at 50% -10%, rgba(204,255,0,.14), transparent 58%),
      radial-gradient(700px 400px at 10% 80%, rgba(204,255,0,.08), transparent 55%),
      linear-gradient(180deg, #000000 0%, #0a0a0a 40%, #0c1000 70%, #000000 100%) !important;
  }
  .section--chart::before{
    display:block !important;
    content:"" !important;
    opacity:.2;
  }
  .section--chart::after{
    display:block !important;
    content:"" !important;
    opacity: 1 !important;
    background:
      linear-gradient(180deg, rgba(0,0,0,.45), transparent 18%),
      linear-gradient(0deg, rgba(0,0,0,.45), transparent 18%),
      radial-gradient(520px 280px at 50% 100%, rgba(204,255,0,.10), transparent 70%) !important;
  }

  .card::before,
  .card::after,
  .gcard::before,
  .gcard::after,
  .embed::before,
  .embed::after,
  .callout::before,
  .callout::after{
    content: none !important;
  }

  [data-reveal]{
    opacity: 1 !important;
    transform: none !important;
  }
  .is-in{ transition: none !important; }
}

@media (max-width: 520px){
  .container{ width: min(var(--max), calc(100% - 24px)); }
  .gallery{ grid-template-columns: 1fr; }
  .hero__titleTop{ font-size: clamp(26px, 7vw, 36px); }
  .hero__titleBottom{ font-size: clamp(40px, 11vw, 58px); }
  .hero__subtitle{ font-size: 13px; max-width: 32ch; }
  .section__title{ font-size: 26px; }
  .logo-orb--hero{ width: min(108px, 30vw); }
  .card--art{ width: min(118px, 32vw); }
  .brand__name{ display:none; }
  .pair__orb,
  .pair__orb--netflix{
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .fx__grid,.fx__scanlines{animation:none !important}
  .gcard{animation:none !important}
  .scrollbar{display:none}
  .logo-orb,
  .pair__pulse,
  .hero-float__shrek,
  .hero-float__donkey,
  .pth__calc,
  .pth__dots::after{animation:none !important}
  .btn, .card--link, .nav__link{transition:none !important}
}