/* =====================================================================
   JWFFC — JOHN WALL FAMILY FOUNDATION COIN
   Design system + components
   ---------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons
   6.  Surfaces (cards / glass / gold borders)
   7.  Navigation
   8.  Hero + coin
   9.  Stats
   10. Mission
   11. Flow diagram
   12. Allocation / tokenomics donut
   13. Transparency
   14. Tables -> mobile cards
   15. Legacy editorial
   16. Direct support
   17. Rewards (dashboard / tiers / leaderboard)
   18. Collectibles (rarity / cards / locked grid)
   19. Community
   20. Footer
   21. Utilities, dev markers, motion
   ===================================================================== */

/* =====================  1. TOKENS  ================================= */
:root {
  /* Core palette */
  --black:        #05050a;
  --black-2:      #0a0a12;
  --black-3:      #101019;
  --ink:          #16161f;

  --gold:         #c9a227;
  --gold-bright:  #e8c766;
  --gold-light:   #f5d98b;
  --gold-pale:    #fdf3d6;
  --gold-deep:    #8a6b14;

  --orange:       #e2661f;
  --orange-soft:  #ff8a3d;

  --white:        #ffffff;
  --text:         #ece9e3;
  --text-dim:     #a5a19a;
  --text-faint:   #6f6b64;

  --line:         rgba(201, 162, 39, 0.16);
  --line-soft:    rgba(255, 255, 255, 0.07);

  /* Gradients */
  --grad-gold: linear-gradient(135deg, #8a6b14 0%, #c9a227 18%, #f5d98b 42%, #e8c766 58%, #a37f18 82%, #f0d284 100%);
  --grad-gold-text: linear-gradient(180deg, #fdf3d6 0%, #e8c766 38%, #c9a227 72%, #8a6b14 100%);
  --grad-surface: linear-gradient(165deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 100%);

  /* Effects */
  --glow-gold: 0 0 40px rgba(201, 162, 39, 0.28);
  --glow-gold-strong: 0 0 80px rgba(232, 199, 102, 0.4);
  --shadow-card: 0 24px 60px -20px rgba(0, 0, 0, 0.9);

  /* Metrics */
  --nav-h: 76px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 10px;
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Fonts */
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

/* =====================  2. RESET & BASE  =========================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;          /* no horizontal page overflow, ever */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient page atmosphere: gold pools + faint basketball texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 50% -6%, rgba(201, 162, 39, 0.16), transparent 65%),
    radial-gradient(700px 700px at 105% 22%, rgba(226, 102, 31, 0.07), transparent 62%),
    radial-gradient(760px 620px at -8% 68%, rgba(201, 162, 39, 0.07), transparent 60%),
    var(--black);
}

body::after {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(115deg, rgba(201,162,39,0.045) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(-115deg, rgba(201,162,39,0.03) 0 1px, transparent 1px 132px);
  animation: texture-drift 90s linear infinite;
}

@keyframes texture-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-88px, 66px, 0); }
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: rgba(201, 162, 39, 0.35); color: var(--white); }

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

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--black-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-deep), var(--gold));
  border-radius: 20px;
}

/* =====================  3. TYPOGRAPHY  ============================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0 0 0.6em;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.9rem, 9vw, 6.4rem); }
h2 { font-size: clamp(2.1rem, 5.6vw, 4.1rem); }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.85rem); }
h4 { font-size: clamp(1.05rem, 1.8vw, 1.25rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.gold-text {
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before {
  content: '';
  width: clamp(24px, 5vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: '';
  width: clamp(24px, 5vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.lead {
  font-size: clamp(1.05rem, 1.9vw, 1.32rem);
  color: var(--text-dim);
  line-height: 1.72;
  max-width: 62ch;
}
.lead strong { color: var(--text); font-weight: 600; }

.section-title { margin-bottom: 1.2rem; }
.mono { font-family: var(--font-mono); }

/* =====================  4. LAYOUT  ================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(4.5rem, 11vh, 9rem);
}
.section--tight { padding-block: clamp(3rem, 7vh, 5rem); }

.section--hairline::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .lead { margin-inline: auto; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* =====================  5. BUTTONS  ================================ */
.btn {
  --btn-pad-y: 1.05rem;
  --btn-pad-x: 2.1rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
              background 0.4s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease);
  overflow: hidden;
  isolation: isolate;
}

/* Primary: metallic gold with a travelling shimmer */
.btn--primary {
  background: var(--grad-gold);
  background-size: 220% 100%;
  color: #180f00;
  box-shadow: 0 10px 34px -12px rgba(201, 162, 39, 0.7), inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.65) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.85s var(--ease-out);
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px -14px rgba(232, 199, 102, 0.85), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn--primary:hover::after { transform: translateX(120%); }

/* Ghost: gold hairline */
.btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(201, 162, 39, 0.42);
  color: var(--gold-light);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  transform: translateY(-3px);
  border-color: var(--gold-bright);
  background: rgba(201, 162, 39, 0.1);
  box-shadow: var(--glow-gold);
  color: var(--gold-pale);
}

/* Foundation: deliberately distinct from the purchase button */
.btn--foundation {
  background: linear-gradient(135deg, #16223a 0%, #1f3357 55%, #17253f 100%);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--white);
  box-shadow: 0 12px 40px -16px rgba(70, 120, 220, 0.55), inset 0 1px 0 rgba(255,255,255,0.16);
}
.btn--foundation:hover {
  transform: translateY(-3px);
  border-color: var(--white);
  box-shadow: 0 20px 54px -16px rgba(90, 145, 250, 0.7), inset 0 1px 0 rgba(255,255,255,0.24);
}

.btn--sm { --btn-pad-y: 0.7rem; --btn-pad-x: 1.35rem; font-size: 0.7rem; }
.btn--lg { --btn-pad-y: 1.2rem; --btn-pad-x: 2.6rem; font-size: 0.88rem; }
.btn--block { width: 100%; }
.btn[aria-disabled='true'], .btn:disabled {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.6);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* Quiet text link with animated gold underline */
.link-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  position: relative;
  padding-bottom: 3px;
  transition: color 0.3s var(--ease);
}
.link-sub::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.link-sub:hover { color: var(--gold-light); }
.link-sub:hover::after { transform: scaleX(1); }

/* =====================  6. SURFACES  =============================== */
.card {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--grad-surface), rgba(10, 10, 18, 0.72);
  box-shadow: var(--shadow-card);
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease),
              box-shadow 0.5s var(--ease);
  overflow: hidden;
}

/* Gold sheen along the top edge */
.card::before {
  content: '';
  position: absolute;
  inset-inline: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,199,102,0.5), transparent);
  opacity: 0.65;
  transition: opacity 0.4s var(--ease), inset-inline 0.5s var(--ease);
}

.card--hover:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 39, 0.4);
  box-shadow: var(--shadow-card), 0 0 44px -14px rgba(201, 162, 39, 0.42);
}
.card--hover:hover::before { inset-inline: 0; opacity: 1; }

.card--glass {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-color: rgba(255, 255, 255, 0.11);
}

/* Animated gold border (used sparingly on flagship panels) */
.card--gold-border {
  border-color: rgba(201, 162, 39, 0.34);
  background:
    linear-gradient(165deg, rgba(201,162,39,0.09), rgba(201,162,39,0.01)),
    rgba(8, 8, 14, 0.86);
}
.card--gold-border::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle, 0deg),
    transparent 0deg, rgba(232,199,102,0.75) 40deg, transparent 110deg,
    transparent 180deg, rgba(201,162,39,0.5) 220deg, transparent 300deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-spin 8s linear infinite;
  pointer-events: none;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes border-spin { to { --angle: 360deg; } }

.divider {
  height: 1px;
  border: 0;
  margin: clamp(2rem, 5vw, 3.5rem) 0;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* =====================  7. NAVIGATION  ============================= */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
              backdrop-filter 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.nav.is-scrolled {
  background: rgba(5, 5, 10, 0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 40px -24px rgba(0, 0, 0, 1);
}

.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  min-width: 0;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  flex-shrink: 0;
}
.nav__brand-coin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(201,162,39,0.5), 0 0 18px -4px rgba(201,162,39,0.7);
  transition: transform 0.6s var(--ease), box-shadow 0.4s var(--ease);
}
.nav__brand:hover .nav__brand-coin {
  transform: rotate(18deg) scale(1.06);
  box-shadow: 0 0 0 1px var(--gold-bright), 0 0 26px -2px rgba(232,199,102,0.9);
}
.nav__brand-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  letter-spacing: 0.12em;
  line-height: 1;
}
/* Wordmark hides on the tightest desktop widths so the links never wrap */
@media (max-width: 1240px) and (min-width: 1081px) {
  .nav__brand-name { display: none; }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 1.5vw, 1.35rem);
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.nav__link {
  position: relative;
  font-size: clamp(0.68rem, 0.78vw, 0.74rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.5rem 0;
  transition: color 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.45s var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--gold-light); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

/* Trophy icon on the REWARDS nav item */
.nav__link .icon-trophy {
  width: 13px;
  height: 13px;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(201,162,39,0.8));
  flex-shrink: 0;
}

.nav__cta { flex-shrink: 0; }

.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  padding: 0;
  place-items: center;
}
.nav__burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 3px auto;
  background: var(--gold-light);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* =====================  8. HERO + COIN  ============================ */
.hero {
  position: relative;
  /* Clears the fixed nav so the coin can never sit on top of the
     navigation links or the Buy button. */
  padding-top: calc(var(--nav-h) + clamp(0.75rem, 2.5vw, 2rem));
  padding-bottom: clamp(3rem, 8vh, 6rem);
  text-align: center;
  overflow: visible;                      /* never clip the coin */
}

.hero__coin-wrap {
  position: relative;
  width: min(500px, 82vw);
  margin: 0 auto clamp(1rem, 2.6vw, 1.9rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 1400px;
  /* Below the nav (z-index 100) so nav links and the Buy button always
     render above it, and pointer-events:none so the coin's square box
     never intercepts clicks meant for the header. */
  z-index: 2;
  pointer-events: none;
}

/* Soft gold pool behind the coin */
.hero__coin-glow {
  position: absolute;
  inset: -22% -18% -18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, rgba(245, 217, 139, 0.34) 0%, rgba(201, 162, 39, 0.2) 34%, transparent 68%);
  filter: blur(24px);
  animation: glow-breathe 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.07); }
}

/* Thin orbiting ring for depth */
.hero__coin-ring {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.22);
  animation: ring-spin 26s linear infinite;
  pointer-events: none;
}
.hero__coin-ring::before {
  content: '';
  position: absolute;
  top: 50%; left: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 14px 3px rgba(245, 217, 139, 0.9);
}
@keyframes ring-spin { to { transform: rotate(360deg); } }

/* The coin itself: float + tilt/parallax + shimmer */
.hero__coin {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  animation: coin-float 6.5s ease-in-out infinite;
  will-change: transform;
}

.hero__coin-tilt {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.35s var(--ease-out);
  transform-style: preserve-3d;
}

.hero__coin img {
  width: 100%;
  filter:
    drop-shadow(0 34px 54px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 44px rgba(201, 162, 39, 0.34));
}

/* Trims the artwork's square black corners.
   The supplied render is inscribed exactly to the canvas edge (gold at
   pixel 0), so `closest-side` = 100% is precisely the coin's own rim:
   the corners disappear and not one pixel of the coin, the rim
   lettering, John's face or the "#2" is touched. */
.hero__coin img.is-masked {
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%,
    #000 0 99.5%, rgba(0,0,0,0.6) 99.8%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 50% 50%,
    #000 0 99.5%, rgba(0,0,0,0.6) 99.8%, transparent 100%);
}

.hero__coin.is-rotating img { animation: coin-spin 26s linear infinite; }

@keyframes coin-float {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-16px) }
}
@keyframes coin-spin {
  to { transform: rotateY(360deg); }
}

/* Travelling light reflection across the coin face */
.hero__coin-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
}
.hero__coin-shine::before {
  content: '';
  position: absolute;
  top: -60%; left: -60%;
  width: 60%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 248, 224, 0.5), transparent);
  filter: blur(10px);
  transform: rotate(18deg);
  animation: coin-shimmer 7s ease-in-out infinite;
}
@keyframes coin-shimmer {
  0%        { transform: translateX(-40%) rotate(18deg); opacity: 0; }
  12%       { opacity: 0.9; }
  55%, 100% { transform: translateX(320%) rotate(18deg); opacity: 0; }
}

/* Reflected pool under the coin */
.hero__coin-floor {
  position: absolute;
  bottom: -3%;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(201,162,39,0.34), transparent 72%);
  filter: blur(9px);
  animation: floor-pulse 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes floor-pulse {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.85; transform: translateX(-50%) scale(0.9); }
}

/* Hero copy */
.hero__wordmark {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 12vw, 7.6rem);
  line-height: 0.84;
  letter-spacing: 0.03em;
  margin: 0 0 0.65rem;
  text-transform: uppercase;
}

.hero__subtitle {
  font-size: clamp(0.72rem, 1.7vw, 0.92rem);
  font-weight: 600;
  letter-spacing: clamp(0.16em, 0.55vw, 0.34em);
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 clamp(2.2rem, 5vw, 3.4rem);
  position: relative;
  padding-bottom: clamp(1.4rem, 3vw, 2rem);
}
/* Hairline rule separating the wordmark block from the headline */
.hero__subtitle::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(56px, 12vw, 120px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.hero__headline {
  font-size: clamp(1.9rem, 5.8vw, 4.1rem);
  line-height: 0.98;
  margin: 0 0 1.3rem;
}

.hero__support {
  max-width: 60ch;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  color: var(--text-dim);
}
.hero__support strong { color: var(--text); font-weight: 600; }

.hero__scroll {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.hero__scroll span {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scroll-hint 2.4s ease-in-out infinite;
}
@keyframes scroll-hint {
  0%, 100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.5; }
  50%      { transform: scaleY(1);    transform-origin: top; opacity: 1; }
}

/* =====================  9. STATS  ================================== */
.stats { position: relative; z-index: 2; }

.stat {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  text-align: left;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.9rem;
  min-height: 2.2em;
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1;
  margin: 0;
  word-break: break-word;
}
.stat__meta {
  margin: 0.65rem 0 0;
  font-size: 0.78rem;
  color: var(--text-faint);
}
.stat__icon {
  position: absolute;
  top: clamp(1.4rem, 2.4vw, 2rem);
  right: clamp(1.4rem, 2.4vw, 2rem);
  width: 20px; height: 20px;
  color: rgba(201, 162, 39, 0.45);
}

/* ===================== 10. MISSION  =============================== */
.mission__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 62% 26%, rgba(226, 102, 31, 0.24), transparent 58%),
    radial-gradient(circle at 28% 76%, rgba(201, 162, 39, 0.24), transparent 58%),
    var(--black-2);
  display: grid;
  place-items: center;
}
.mission__visual svg { width: 78%; opacity: 0.95; }
.mission__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.24) 0 2px, transparent 2px 5px);
  opacity: 0.3;
  pointer-events: none;
}

.pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}
.pillar {
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(201, 162, 39, 0.05);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.pillar:hover {
  transform: translateY(-3px);
  background: rgba(201, 162, 39, 0.14);
  border-color: rgba(201, 162, 39, 0.5);
}

/* ===================== 11. FLOW DIAGRAM  ========================== */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(1rem, 2.6vw, 2.2rem);
  position: relative;
}

.flow__node {
  position: relative;
  text-align: center;
  padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1rem, 2vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(201,162,39,0.07), rgba(255,255,255,0.01)), rgba(8,8,14,0.8);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s var(--ease);
}
.flow__node:hover {
  transform: translateY(-6px);
  border-color: rgba(201,162,39,0.45);
  box-shadow: 0 0 46px -16px rgba(201,162,39,0.55);
}

.flow__badge {
  width: 62px; height: 62px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid rgba(201, 162, 39, 0.35);
  box-shadow: inset 0 0 22px rgba(201,162,39,0.16);
}
.flow__badge svg { width: 28px; height: 28px; color: var(--gold-light); }

.flow__step {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  color: var(--text-faint);
  margin: 0 0 0.5rem;
}
.flow__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}
.flow__copy { font-size: 0.87rem; color: var(--text-dim); margin: 0; }

/* Connector between flow nodes.
   Desktop: a horizontal track with a gold pulse travelling along it.
   Mobile:  collapses to a bobbing downward arrow (see media query). */
.flow__arrow {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-width: clamp(26px, 5vw, 70px);
  font-size: 0;                 /* hides the ↓ glyph on desktop */
  color: transparent;
}
.flow__arrow::before {          /* track */
  content: '';
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: rgba(201, 162, 39, 0.16);
}
.flow__arrow::after {           /* travelling pulse */
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 45%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  box-shadow: 0 0 10px rgba(232, 199, 102, 0.8);
  animation: flow-pulse 2.6s linear infinite;
  animation-delay: var(--delay, 0s);
}
.flow__arrow:nth-of-type(2)::after { animation-delay: 0.9s; }

@keyframes flow-pulse {
  from { transform: translateX(-110%); }
  to   { transform: translateX(340%); }
}
@keyframes arrow-bob {
  0%, 100% { transform: translateY(-3px); opacity: 0.55; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

.flow__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.2rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.8rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line-soft);
}
.flow__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.35s var(--ease), transform 0.4s var(--ease);
}
.flow__logo svg { width: 24px; height: 24px; }
.flow__logo:hover { color: var(--gold-light); transform: translateY(-2px); }

/* ===================== 12. ALLOCATION / DONUT  ==================== */
.alloc { align-items: center; }

.donut-wrap {
  position: relative;
  width: min(420px, 84vw);
  margin-inline: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.donut-wrap::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,0.16), transparent 70%);
  filter: blur(18px);
}
.donut { width: 100%; transform: rotate(-90deg); overflow: visible; }

.donut__track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 14; }
.donut__seg {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.8s var(--ease-out), stroke-width 0.3s var(--ease);
}
.donut__seg--community { stroke: url(#gradCommunity); }
.donut__seg--burn {
  stroke: url(#gradBurn);
  filter: drop-shadow(0 0 8px rgba(255, 138, 61, 0.7));
}
.donut__seg--john {
  stroke: url(#gradJohn);
  filter: drop-shadow(0 0 10px rgba(245,217,139,0.85));
}
.donut__center {
  position: absolute;
  text-align: center;
  inset: 26%;
  display: grid;
  place-content: center;
  gap: 0.2rem;
}
.donut__center-value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  line-height: 1;
}
.donut__center-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.legend { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.legend li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-size: 0.92rem;
}
.legend__dot {
  width: 11px; height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
  transform: translateY(2px);
}
.legend__dot--john { background: var(--grad-gold); box-shadow: 0 0 12px rgba(201,162,39,0.8); }
.legend__dot--community { background: linear-gradient(135deg, #3a3a48, #6a6a7c); }
.legend__dot--burn {
  background: linear-gradient(135deg, #ff8a3d, #8f3406);
  box-shadow: 0 0 12px rgba(255, 138, 61, 0.7);
}
.legend__pct { font-family: var(--font-display); font-size: 1.05rem; margin-right: 0.2rem; }

/* Data readout rows (wallet address / balance / etc.) */
.readout { display: grid; gap: 0; margin-top: 1.6rem; }
.readout__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.readout__row:last-child { border-bottom: 0; }
.readout__key {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.readout__val {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--text);
  text-align: right;
  word-break: break-all;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
}
.readout__val a { color: var(--gold-light); }
.readout__val a:hover { text-decoration: underline; }

/* Copy-to-clipboard button */
.copy-btn {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--gold-light);
  flex-shrink: 0;
  transition: all 0.3s var(--ease);
}
.copy-btn svg { width: 13px; height: 13px; }
.copy-btn:hover {
  border-color: var(--gold);
  background: rgba(201,162,39,0.14);
  transform: translateY(-1px);
}
.copy-btn.is-copied { color: #7ee29a; border-color: rgba(126,226,154,0.5); }

/* ===================== 13. TRANSPARENCY  ========================== */
.metric {
  padding: clamp(1.15rem, 2vw, 1.6rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.022);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
.metric:hover {
  border-color: rgba(201,162,39,0.34);
  background: rgba(201,162,39,0.05);
  transform: translateY(-3px);
}
.metric__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.6rem;
}
.metric__value {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1;
  margin: 0;
  color: var(--gold-light);
  word-break: break-word;
}

/* ===================== 14. TABLES -> CARDS  ======================== */
.table-wrap {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(8,8,14,0.6);
  overflow: hidden;
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 720px;
}
.data-table thead th {
  position: sticky;
  top: 0;
  background: rgba(12, 12, 20, 0.96);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: left;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 1.05rem 1.15rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  color: var(--text-dim);
}
.data-table tbody tr { transition: background 0.3s var(--ease); }
.data-table tbody tr:hover { background: rgba(201, 162, 39, 0.045); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table__num { font-family: var(--font-mono); color: var(--text); white-space: nowrap; }
.data-table__strong { color: var(--text); font-weight: 600; }

/* Type pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill--fee       { color: var(--gold-light); background: rgba(201,162,39,0.12); border-color: rgba(201,162,39,0.32); }
.pill--contrib   { color: #8fe0b0; background: rgba(80,200,140,0.1);  border-color: rgba(80,200,140,0.3); }
.pill--alloc     { color: var(--orange-soft); background: rgba(226,102,31,0.12); border-color: rgba(226,102,31,0.34); }
.pill--neutral   { color: var(--text-dim); background: rgba(255,255,255,0.05); border-color: var(--line-soft); }

.addr {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--gold-light);
  white-space: nowrap;
}
a.addr:hover { text-decoration: underline; }
.addr--muted { color: var(--text-faint); }

.tx-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gold-light);
}
.tx-link svg { width: 11px; height: 11px; }
.tx-link:hover { text-decoration: underline; }

/* Empty state */
.empty-state {
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  text-align: center;
  color: var(--text-faint);
}
.empty-state svg {
  width: 42px; height: 42px;
  margin: 0 auto 1.2rem;
  color: rgba(201,162,39,0.35);
}
.empty-state h4 { color: var(--text-dim); margin-bottom: 0.5rem; }
.empty-state p { font-size: 0.88rem; max-width: 46ch; margin-inline: auto; }

/* Mobile card rendition of a table row */
.row-cards { display: none; }
.row-card {
  padding: 1.15rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.022);
  margin-bottom: 0.8rem;
}
.row-card:last-child { margin-bottom: 0; }
.row-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line-soft);
}
.row-card__date { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-faint); }
.row-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
.row-card__cell { min-width: 0; }
.row-card__k {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.25rem;
}
.row-card__v {
  font-size: 0.85rem;
  color: var(--text);
  margin: 0;
  word-break: break-word;
}
.row-card__foot { margin-top: 0.9rem; }

/* ===================== 15. LEGACY EDITORIAL  ====================== */
.legacy { position: relative; }
.legacy__quote {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.1vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 1.6rem;
  text-transform: none;
  max-width: 30ch;
}
.legacy__cols {
  columns: 2;
  column-gap: clamp(1.8rem, 4vw, 3.2rem);
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.8;
}
.legacy__cols p { margin: 0 0 1.15em; break-inside: avoid; }

.legacy__frame {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(circle at 50% 30%, rgba(201,162,39,0.28), transparent 60%),
    linear-gradient(180deg, var(--black-3), var(--black));
  display: grid;
  place-items: center;
}
.legacy__frame svg { width: 82%; }
.legacy__frame-caption {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: 2.5rem 1.5rem 1.4rem;
  background: linear-gradient(180deg, transparent, rgba(5,5,10,0.95));
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
  margin: 2.2rem 0;
  padding: 1.5rem 0;
  border-block: 1px solid var(--line-soft);
}
.stat-strip__item { text-align: center; }
.stat-strip__value {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1;
  margin: 0 0 0.35rem;
}
.stat-strip__label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text-faint);
  margin: 0;
  max-width: 22ch;
  margin-inline: auto;
}

/* ===================== 16. DIRECT SUPPORT  ======================== */
.direct {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(135deg, rgba(31, 51, 87, 0.55) 0%, rgba(10, 10, 18, 0.9) 55%, rgba(22, 34, 58, 0.5) 100%);
  text-align: center;
  overflow: hidden;
}
.direct::before {
  content: '';
  position: absolute;
  inset: -50% -10% auto;
  height: 200%;
  background: radial-gradient(circle at 50% 0%, rgba(120, 170, 255, 0.14), transparent 60%);
  pointer-events: none;
}
.direct > * { position: relative; }
.direct .lead { margin-inline: auto; }

/* ===================== 17. REWARDS  =============================== */
.rewards-dash { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

.wallet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.2rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(201,162,39,0.08), rgba(255,255,255,0.01)), rgba(8,8,14,0.8);
}
.wallet-bar__state { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.wallet-bar__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.wallet-bar.is-connected .wallet-bar__dot {
  background: #6ee7a0;
  box-shadow: 0 0 12px 2px rgba(110, 231, 160, 0.7);
}
.wallet-bar__text { min-width: 0; }
.wallet-bar__title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.2rem;
}
.wallet-bar__addr {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--gold-light);
  margin: 0;
  word-break: break-all;
}

.reward-metric {
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.022);
}
.reward-metric__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.55rem;
}
.reward-metric__value {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  line-height: 1.05;
  margin: 0;
  color: var(--gold-light);
}
.reward-metric__sub { font-size: 0.76rem; color: var(--text-faint); margin: 0.4rem 0 0; }

/* Qualification status chip */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.status-chip--yes { color: #8fe0b0; background: rgba(80,200,140,0.1); border: 1px solid rgba(80,200,140,0.34); }
.status-chip--no  { color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft); }

/* Progress toward the next milestone */
.progress {
  margin-top: 1rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--grad-gold);
  box-shadow: 0 0 14px rgba(201,162,39,0.7);
  transition: width 1.6s var(--ease-out);
}

/* Tier cards */
.tier {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(175deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008)), rgba(8,8,14,0.75);
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.tier::before {
  content: '';
  position: absolute;
  inset-inline: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tier-accent, var(--gold)), transparent);
}
.tier:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--tier-accent, var(--gold)) 45%, transparent);
  box-shadow: 0 0 48px -18px var(--tier-accent, var(--gold));
}
.tier__rank {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--text-faint);
  margin: 0 0 0.7rem;
}
.tier__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0 0 0.8rem;
  color: var(--tier-accent, var(--gold-light));
}
.tier__req { font-size: 0.9rem; color: var(--text-dim); margin: 0 0 1.2rem; }
.tier__thresholds {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 1.2rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
}
.tier__thresholds li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-faint);
}
.tier__thresholds b { color: var(--text-dim); font-weight: 500; }
.tier__rewards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.tier__rewards li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.tier__rewards li::before { content: '◆'; color: var(--tier-accent, var(--gold)); font-size: 0.6rem; line-height: 1.9; }
.tier.is-current {
  border-color: var(--tier-accent, var(--gold));
  box-shadow: 0 0 54px -20px var(--tier-accent, var(--gold));
}
.tier__you {
  position: absolute;
  top: 1rem; right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--grad-gold);
  color: #180f00;
}

/* Reward catalogue cards */
.reward-card { text-align: left; }
.reward-card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
  background: rgba(201,162,39,0.09);
  border: 1px solid rgba(201,162,39,0.3);
}
.reward-card__icon svg { width: 24px; height: 24px; color: var(--gold-light); }
.reward-card h4 { margin-bottom: 0.7rem; }
.reward-card p { font-size: 0.9rem; color: var(--text-dim); margin: 0; }

/* "POTENTIAL" / "NOT SECURED" marker */
.tag-potential {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-soft);
  background: rgba(226,102,31,0.1);
  border: 1px solid rgba(226,102,31,0.3);
  line-height: 1.5;
}

/* Leaderboard filters */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.filter-btn {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255,255,255,0.025);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: all 0.35s var(--ease);
}
.filter-btn:hover { border-color: rgba(201,162,39,0.4); color: var(--gold-light); }
.filter-btn.is-active {
  background: var(--grad-gold);
  border-color: transparent;
  color: #180f00;
  box-shadow: 0 6px 22px -10px rgba(201,162,39,0.8);
}

.rank-badge {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
}
.rank-badge--1 { background: var(--grad-gold); color: #180f00; border-color: transparent; box-shadow: 0 0 18px -4px rgba(232,199,102,0.9); }
.rank-badge--2 { background: linear-gradient(135deg,#b9bcc4,#7c8089); color: #10131a; border-color: transparent; }
.rank-badge--3 { background: linear-gradient(135deg,#c98b4b,#8a5a2a); color: #1a0f06; border-color: transparent; }

.tier-tag {
  display: inline-flex;
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  opacity: 0.95;
}

/* ===================== 18. COLLECTIBLES  ========================== */
.rarity-row { display: grid; gap: 0.9rem; grid-template-columns: repeat(5, minmax(0,1fr)); }

.rarity {
  position: relative;
  padding: 1.4rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: rgba(255,255,255,0.022);
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.rarity:hover { transform: translateY(-5px); }
.rarity__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin: 0 0 0.5rem;
}
.rarity__blurb { font-size: 0.78rem; color: var(--text-faint); margin: 0; }
.rarity__edition {
  margin: 0.8rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Escalating visual treatment per rarity */
.rarity--common    { }
.rarity--common .rarity__name { color: var(--text-dim); }

.rarity--rare      { border-color: rgba(201,162,39,0.26); background: linear-gradient(165deg, rgba(201,162,39,0.07), transparent); }
.rarity--rare .rarity__name { color: var(--gold); }

.rarity--epic      { border-color: rgba(226,102,31,0.34); background: linear-gradient(165deg, rgba(226,102,31,0.12), transparent); }
.rarity--epic .rarity__name { color: var(--orange-soft); }
.rarity--epic:hover { box-shadow: 0 0 40px -14px rgba(226,102,31,0.7); }

.rarity--legendary { border-color: rgba(232,199,102,0.5); background: linear-gradient(165deg, rgba(232,199,102,0.16), rgba(201,162,39,0.04)); }
.rarity--legendary .rarity__name { color: var(--gold-light); }
.rarity--legendary:hover { box-shadow: 0 0 52px -14px rgba(232,199,102,0.85); }
.rarity--legendary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: sheen 4.5s ease-in-out infinite;
  pointer-events: none;
}

.rarity--one-of-one {
  border-color: rgba(255,255,255,0.6);
  background:
    linear-gradient(165deg, rgba(255,255,255,0.16), rgba(201,162,39,0.1)),
    rgba(10,10,18,0.9);
}
.rarity--one-of-one .rarity__name { color: var(--white); }
.rarity--one-of-one:hover { box-shadow: 0 0 60px -12px rgba(255,255,255,0.55); }
.rarity--one-of-one::after {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg,
    rgba(255,120,180,0.16), rgba(120,200,255,0.16), rgba(255,235,150,0.2),
    rgba(140,255,190,0.16), rgba(255,120,180,0.16));
  mix-blend-mode: screen;
  opacity: 0.6;
  animation: holo-rotate 9s linear infinite;
  pointer-events: none;
}

@keyframes sheen {
  0%, 55% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
@keyframes holo-rotate { to { transform: rotate(360deg) scale(1.6); } }

/* Collectible cards (basketball-card format, 3D tilt) */
.cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.8rem);
}

.tcard {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 16px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  background: linear-gradient(170deg, var(--black-3), var(--black));
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease);
  will-change: transform;
}
.tcard:hover { box-shadow: 0 30px 70px -30px rgba(0,0,0,1), 0 0 40px -16px rgba(201,162,39,0.6); }

.tcard__holo {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  transition: opacity 0.45s var(--ease);
  /* Prismatic film: hue bands sweep as the pointer moves */
  background: linear-gradient(
    var(--holo-angle, 110deg),
    transparent 8%,
    rgba(255, 90, 160, 0.22) 24%,
    rgba(120, 200, 255, 0.26) 38%,
    rgba(255, 245, 200, 0.34) 50%,
    rgba(150, 255, 200, 0.26) 62%,
    rgba(190, 130, 255, 0.22) 76%,
    transparent 92%);
  background-size: 260% 260%;
  background-position: var(--holo-x, 50%) var(--holo-y, 50%);
}
.tcard:hover .tcard__holo { opacity: 0.85; }

/* Second layer: a tight specular streak that follows the cursor */
.tcard__shine {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 0.45s var(--ease);
  background: radial-gradient(
    circle at var(--holo-x, 50%) var(--holo-y, 50%),
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 236, 180, 0.14) 22%,
    transparent 46%);
}
.tcard:hover .tcard__shine { opacity: 1; }

/* Rarity scales the intensity */
.tcard--rare .tcard__holo { filter: saturate(1.15); }
.tcard--epic .tcard__holo { filter: saturate(1.45) brightness(1.1); }
.tcard--legendary .tcard__holo { filter: saturate(1.7) brightness(1.2); }
.tcard--legendary:hover .tcard__holo { opacity: 1; }
.tcard--one-of-one .tcard__holo { filter: saturate(2) brightness(1.3); }
.tcard--one-of-one:hover .tcard__holo { opacity: 1; }

.tcard__frame {
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  border: 1px solid rgba(201,162,39,0.22);
  pointer-events: none;
}

.tcard__top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  z-index: 2;
}
.tcard__collection {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
  max-width: 60%;
}
.tcard__rarity {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  padding: 0.22rem 0.5rem;
  border-radius: 5px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.tcard__art {
  position: relative;
  flex: 1;
  margin: 0.9rem 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(201,162,39,0.24), transparent 62%),
    rgba(255,255,255,0.022);
  overflow: hidden;
  z-index: 2;
}
.tcard__art svg { width: 62%; opacity: 0.9; }
.tcard__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.96;
}
.tcard__art-label {
  position: absolute;
  bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.tcard__subject {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
  margin: 0 0 0.25rem;
  position: relative;
  z-index: 2;
}
.tcard__position {
  position: relative;
  z-index: 2;
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.tcard__example {
  position: absolute;
  top: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.42rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffb37a;
  background: rgba(12, 6, 2, 0.82);
  border: 1px solid rgba(226, 102, 31, 0.45);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.tcard:hover .tcard__example { opacity: 1; }
.tcard__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.6rem;
  margin: 0;
  position: relative;
  z-index: 2;
}
.tcard__meta div { min-width: 0; }
.tcard__meta dt {
  font-family: var(--font-mono);
  font-size: 0.46rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.tcard__meta dd {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  margin: 0;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tcard__foot {
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
}
.tcard__auth {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.tcard__auth svg { width: 9px; height: 9px; }
.tcard__view {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid rgba(201,162,39,0.35);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  transition: all 0.3s var(--ease);
}
.tcard__view:hover { background: rgba(201,162,39,0.14); border-color: var(--gold); }

/* Rarity treatments on cards */
.tcard--rare      { border-color: rgba(201,162,39,0.3); }
.tcard--epic      { border-color: rgba(226,102,31,0.4); }
.tcard--epic .tcard__frame { border-color: rgba(226,102,31,0.4); }
.tcard--legendary { border-color: rgba(232,199,102,0.55); }
.tcard--legendary .tcard__frame { border-color: rgba(232,199,102,0.6); }
.tcard--legendary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,240,200,0.2) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: sheen 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
.tcard--one-of-one { border-color: rgba(255,255,255,0.7); }
.tcard--one-of-one .tcard__frame { border-color: rgba(255,255,255,0.5); }
.tcard--one-of-one::after {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg,
    rgba(255,120,180,0.2), rgba(120,200,255,0.2), rgba(255,235,150,0.24),
    rgba(140,255,190,0.2), rgba(255,120,180,0.2));
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: holo-rotate 11s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Physical + digital pairing callout */
.pairing {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  text-align: center;
}
.pairing__side {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px dashed rgba(201,162,39,0.3);
  border-radius: var(--radius);
  background: rgba(201,162,39,0.035);
}
.pairing__plus {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--gold);
  line-height: 1;
}
.pairing__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.6rem;
}
.pairing__value { font-family: var(--font-display); font-size: clamp(1rem, 2.2vw, 1.35rem); margin: 0; }

/* Locked / coming soon grid */
.locked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(0.8rem, 1.8vw, 1.3rem);
}
.locked {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 50% 34%, rgba(201,162,39,0.14), transparent 62%),
    linear-gradient(180deg, var(--black-3), var(--black));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.locked:hover {
  transform: translateY(-5px);
  border-color: rgba(201,162,39,0.42);
  box-shadow: 0 0 44px -18px rgba(201,162,39,0.7);
}
.locked__silhouette {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.32;
  filter: blur(0.4px);
}
.locked__silhouette svg { width: 58%; color: var(--gold); }
.locked__lock {
  position: absolute;
  top: 0.8rem; right: 0.8rem;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(5,5,10,0.7);
  border: 1px solid rgba(201,162,39,0.34);
}
.locked__lock svg { width: 11px; height: 11px; color: var(--gold); }
.locked__name {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.05;
  margin: 0 0 0.35rem;
}
.locked__soon {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

/* Teaser cards on the homepage */
.teaser-card { text-align: left; }
.teaser-card__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  background: rgba(201,162,39,0.09);
  border: 1px solid rgba(201,162,39,0.28);
}
.teaser-card__icon svg { width: 21px; height: 21px; color: var(--gold-light); }

/* ===================== 19. COMMUNITY  ============================= */
.social-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
.social {
  padding: clamp(1.3rem, 2.4vw, 1.9rem) 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.022);
  text-align: center;
  transition: all 0.45s var(--ease);
}
.social__icon {
  width: 46px; height: 46px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--line-soft);
  transition: all 0.45s var(--ease);
}
.social__icon svg { width: 21px; height: 21px; color: var(--text-dim); transition: color 0.4s var(--ease); }
.social__name {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}
.social:hover {
  transform: translateY(-5px);
  border-color: rgba(201,162,39,0.4);
  box-shadow: 0 0 40px -16px rgba(201,162,39,0.6);
}
.social:hover .social__icon {
  border-color: var(--gold);
  background: rgba(201,162,39,0.14);
}
.social:hover .social__icon svg { color: var(--gold-light); }
.social:hover .social__name { color: var(--gold-light); }

/* ===================== 20. FOOTER  ================================ */
.footer {
  position: relative;
  padding-top: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(201,162,39,0.11), transparent 62%),
    linear-gradient(180deg, rgba(10,10,18,0.6), var(--black));
  overflow: hidden;
}

.footer__top { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  line-height: 0.9;
  margin: 0 0 0.6rem;
}
.footer__tagline {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.6vw, 1.6rem);
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: 0;
  text-transform: uppercase;
}

/* Ecosystem icon row — 7 destinations */
.eco {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.6vw, 1.4rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.eco__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
  padding: 0.5rem 0.25rem;
  min-width: 0;
}

.eco__badge {
  position: relative;
  width: clamp(64px, 8.5vw, 96px);
  aspect-ratio: 1;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease),
              box-shadow 0.5s var(--ease), background 0.4s var(--ease);
  overflow: hidden;
}
.eco__badge svg {
  width: 52%;
  height: 52%;
  transition: transform 0.5s var(--ease), filter 0.4s var(--ease);
}

.eco__name {
  font-family: var(--font-mono);
  font-size: clamp(0.52rem, 0.9vw, 0.62rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.4s var(--ease);
  line-height: 1.4;
}

.eco__item:hover .eco__badge {
  transform: translateY(-8px);
  border-color: var(--brand, var(--gold));
  background: linear-gradient(165deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
  box-shadow:
    0 18px 40px -18px rgba(0,0,0,0.9),
    0 0 34px -6px color-mix(in srgb, var(--brand, var(--gold)) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.eco__item:hover .eco__badge svg {
  transform: scale(1.09);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--brand, var(--gold)) 75%, transparent));
}
.eco__item:hover .eco__name { color: var(--gold-light); }

/* Footer link columns */
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0,1fr));
  gap: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__col h5 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer__col a {
  font-size: 0.88rem;
  color: var(--text-dim);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
  display: inline-block;
}
.footer__col a:hover { color: var(--gold-light); transform: translateX(3px); }
.footer__about p { font-size: 0.9rem; color: var(--text-dim); max-width: 40ch; }

/* Disclosure block */
.disclosure {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.018);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.disclosure h5 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
  font-weight: 500;
}
.disclosure p {
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--text-faint);
  max-width: 90ch;
}
.disclosure p strong { color: var(--text-dim); font-weight: 500; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 0 2.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem;
  color: var(--text-faint);
}
.footer__bottom p { margin: 0; }

/* ===================== 21. UTILITIES / MOTION  ==================== */

/* Dev-data markers */
.dev-banner {
  position: relative;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.4rem 2.6rem 0.4rem 1rem;
  text-align: center;
  line-height: 1.4;
  background: repeating-linear-gradient(45deg,
    rgba(226,102,31,0.16) 0 12px, rgba(226,102,31,0.09) 12px 24px);
  border-bottom: 1px solid rgba(226,102,31,0.34);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: #ffb37a;
  text-transform: uppercase;
}
.dev-banner strong { color: #ffd0ad; }
.dev-banner__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 68vw;
}
.dev-banner__close {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(226,102,31,0.4);
  border-radius: 6px;
  background: transparent;
  color: #ffb37a;
  padding: 0;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.dev-banner__close:hover { background: rgba(226,102,31,0.2); border-color: #ffb37a; }
.dev-banner__close svg { width: 10px; height: 10px; }

body.has-dev-banner { padding-top: 30px; }
body.has-dev-banner .nav { top: 30px; }

@media (max-width: 640px) {
  .dev-banner { font-size: 0.54rem; padding-block: 0.35rem; }
  .dev-banner__text { max-width: 60vw; }
}

.dev-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.42rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffb37a;
  background: rgba(226,102,31,0.14);
  border: 1px solid rgba(226,102,31,0.34);
  vertical-align: middle;
  white-space: nowrap;
}

.note {
  font-size: 0.8rem;
  color: var(--text-faint);
  line-height: 1.7;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid rgba(201,162,39,0.4);
  background: rgba(201,162,39,0.035);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: 1.5rem;
}
.note strong { color: var(--text-dim); font-weight: 600; }
.note--warn {
  border-left-color: rgba(226,102,31,0.6);
  background: rgba(226,102,31,0.05);
}

.center { text-align: center; }
.mt-lg { margin-top: clamp(2rem, 4vw, 3rem); }
.mt-md { margin-top: clamp(1.2rem, 2.5vw, 2rem); }
.mb-md { margin-bottom: clamp(1.2rem, 2.5vw, 2rem); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ===================== RESPONSIVE  ================================ */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }

  /* Mobile drawer */
  .nav__links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    inset-inline: 0;
    top: var(--nav-h);
    padding: 1rem var(--gutter) 1.75rem;
    background: rgba(5, 5, 10, 0.97);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,1);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  body.has-dev-banner .nav__links.is-open { top: calc(var(--nav-h) + 30px); }
  .nav__links.is-open .nav__link {
    padding: 1rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav__links.is-open .nav__link::after { display: none; }

  .footer__cols { grid-template-columns: 1fr 1fr; }
  .legacy__cols { columns: 1; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rarity-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mission__visual { aspect-ratio: 16 / 11; }
  .legacy__frame { aspect-ratio: 4 / 3; }

  /* Flow becomes a vertical chain with arrows */
  .flow { grid-template-columns: 1fr; }
  .flow__arrow {
    font-size: 1.5rem;
    color: var(--gold);
    min-width: 0;
    padding: 0.2rem 0;
    overflow: visible;
    animation: arrow-bob 2s ease-in-out infinite;
  }
  .flow__arrow::before,
  .flow__arrow::after { display: none; }

  .pairing { grid-template-columns: 1fr; }
  .pairing__plus { transform: rotate(0deg); }

  /* Ecosystem row wraps on tablet */
  .eco { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  :root { --nav-h: 66px; }

  .hero__coin-wrap { width: min(340px, 88vw); }
  .hero__wordmark { font-size: clamp(3rem, 19vw, 5rem); }

  /* Stacked CTAs */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .btn-row--center { align-items: center; }

  /* Stats become a 2x2 grid */
  .grid-4, .grid-3, .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat { padding: 1.1rem; }
  .stat__icon { display: none; }
  .stat__label { font-size: 0.58rem; letter-spacing: 0.14em; }

  /* Tables collapse into cards */
  .table-scroll { display: none; }
  .row-cards { display: block; padding: 0.9rem; }

  .rarity-row { grid-template-columns: 1fr; }
  .cards-row { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; gap: 1.4rem; }

  /* Ecosystem icons: clean 3-across grid, no page overflow */
  .eco {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1rem 0.5rem;
  }
  .eco__badge { width: min(74px, 20vw); border-radius: 20px; }

  .footer__cols { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: center; text-align: center; }

  .readout__row { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .readout__val { text-align: left; }
}

@media (max-width: 380px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .eco { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Print */
@media print {
  body::before, body::after, .nav, .hero__coin-glow, .hero__coin-ring { display: none; }
  body { background: #fff; color: #000; }
}


/* ===================== CONTRACT ADDRESS STRIP  ==================== */
.ca {
  position: relative;
  text-align: center;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(201,162,39,0.09), rgba(255,255,255,0.008)),
    rgba(6, 6, 12, 0.86);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}
.ca::before {
  content: '';
  position: absolute;
  inset-inline: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}
.ca__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
}
.ca__value {
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 2.1vw, 1.05rem);
  color: var(--text);
  margin: 0;
  word-break: break-all;
  line-height: 1.5;
}
.ca__value--pending {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  letter-spacing: 0.04em;
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ca-pulse 3.6s ease-in-out infinite;
}
@keyframes ca-pulse {
  0%, 100% { opacity: 0.82; filter: drop-shadow(0 0 0 rgba(201,162,39,0)); }
  50%      { opacity: 1;    filter: drop-shadow(0 0 18px rgba(232,199,102,0.45)); }
}
.ca__note {
  margin: 1rem auto 0;
  max-width: 56ch;
  font-size: 0.8rem;
  color: var(--text-faint);
  line-height: 1.7;
}
.ca__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}


/* ===================== PREMIUM FINISH  ===========================
   1. Film grain — breaks up the large flat blacks so gradients read
      as printed metal rather than banded screen fill.
   2. Kinetic ticker — a slow engraved marquee, like a stadium ribbon.
   ================================================================= */

html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Kinetic ticker ---------------------------------------------- */
.ticker {
  position: relative;
  overflow: hidden;
  padding: clamp(0.9rem, 1.8vw, 1.3rem) 0;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(201,162,39,0.06), rgba(201,162,39,0.02) 50%, rgba(201,162,39,0.06));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  animation: ticker-scroll 42s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.1vw, 1.5rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, #fdf3d6 0%, #e8c766 45%, #a37f18 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.ticker__star {
  font-size: 0.6em;
  color: var(--orange-soft);
  -webkit-text-fill-color: currentColor;
  filter: drop-shadow(0 0 8px rgba(226,102,31,0.7));
}
@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}


/* ===================== BACKGROUND SKETCHES  ======================
   Faint black-and-white line-art scenes sitting behind sections:
   DC skyline, a game in play, a charity/donation event, an arena
   crowd. Deliberately whisper-quiet - grayscale, very low opacity,
   masked at the edges so they fade into the black rather than ending
   on a hard line. Never interactive, never printed.
   ================================================================= */

.section--sketch { position: relative; isolation: isolate; }

.sketch-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.sketch-bg img {
  position: absolute;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(0.85);
  opacity: 0.055;                 /* the "faint" in faint sketches */
  /* Feather every edge so the artwork dissolves into the background */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent),
    linear-gradient(to right,  transparent, #000 14%, #000 86%, transparent);
  mask-image:
    linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent),
    linear-gradient(to right,  transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* --- Per-scene placement ---------------------------------------- */

/* DC skyline: anchored along the bottom of the section */
.sketch-bg--skyline img {
  bottom: 0;
  left: -4%;
  width: 108%;
  opacity: 0.07;
}

/* Game in play: large, offset right, bled off the edge */
.sketch-bg--game img {
  top: 50%;
  right: -14%;
  width: 78%;
  transform: translateY(-50%);
  opacity: 0.05;
}

/* Charity event: centered low behind the panel */
.sketch-bg--charity img {
  bottom: -8%;
  left: 50%;
  width: 96%;
  transform: translateX(-50%);
  opacity: 0.06;
}

/* Arena crowd: across the top, so section type sits over the quiet part */
.sketch-bg--crowd img {
  top: -6%;
  left: -3%;
  width: 106%;
  opacity: 0.05;
}

/* Slightly stronger on very large screens where the art gets small */
@media (min-width: 1600px) {
  .sketch-bg img { opacity: 0.07; }
  .sketch-bg--skyline img { opacity: 0.085; }
}

/* Mobile: pull them back further - less room, more chance of clutter */
@media (max-width: 640px) {
  .sketch-bg img { opacity: 0.04; }
  .sketch-bg--game img { width: 150%; right: -40%; }
  .sketch-bg--skyline img { width: 150%; left: -25%; }
  .sketch-bg--charity img { width: 150%; }
  .sketch-bg--crowd img { width: 150%; left: -25%; }
}

@media print { .sketch-bg { display: none; } }


/* ===================== VESTING SCHEDULE  ========================= */
.vest__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.vest__summary { text-align: right; }
.vest__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.35rem;
}
.vest__headline {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1;
  margin: 0;
}
.vest__list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.vest__row {
  display: grid;
  grid-template-columns: 4.5rem 3rem 1fr auto auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}
.vest__row--unlocked { border-color: rgba(126, 226, 154, 0.28); background: rgba(126, 226, 154, 0.05); }
.vest__row--locked { border-color: rgba(201, 162, 39, 0.26); background: rgba(201, 162, 39, 0.04); }
.vest__n { color: var(--text); font-family: var(--font-display); font-size: 0.95rem; }
.vest__pct { color: var(--gold-light); font-weight: 500; }
.vest__tokens { color: var(--text-dim); }
.vest__date { color: var(--text-faint); white-space: nowrap; }
.vest__state {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.vest__state--open { color: #8fe0b0; }
.vest__state--locked { color: var(--gold); }
.vest__state--pending { color: var(--text-faint); }
.vest__next {
  margin: 1.1rem 0 0;
  font-size: 0.84rem;
  color: var(--text-dim);
}
.vest__next b { color: var(--gold-light); }

@media (max-width: 720px) {
  .vest__row {
    grid-template-columns: 1fr auto;
    row-gap: 0.35rem;
  }
  .vest__tokens { grid-column: 1 / -1; }
  .vest__date { grid-column: 1; }
  .vest__state { grid-column: 2; justify-self: end; }
}

/* ===================== DIRECT DONATION PANEL  ==================== */
.donate {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, rgba(201, 162, 39, 0.08), rgba(255, 255, 255, 0.01)),
    rgba(8, 8, 14, 0.85);
}
.donate__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.8rem;
}
.donate__title { margin: 0 0 0.9rem; }
.donate__copy { font-size: 0.92rem; color: var(--text-dim); max-width: 58ch; }
.donate__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin: 1.4rem 0 1.2rem;
}
.donate__field { display: grid; gap: 0.45rem; flex: 1 1 220px; }
.donate__field span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.donate__field input {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.donate__field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}
.donate__presets { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.donate__status {
  margin: 1rem 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-dim);
  min-height: 1.2em;
}
.donate__status.is-warn { color: var(--orange-soft); }
.donate__status.is-info { color: var(--gold-light); }


/* ===================== FREE THROW GAME  ==========================
   Court canvas, HUD, share panel. Free to play - no wagering UI
   exists anywhere in here by design.
   ================================================================= */

.g-challenge {
  max-width: 640px;
  margin: 0 auto 1.6rem;
  padding: 0.85rem 1.2rem;
  text-align: center;
  border: 1px solid rgba(201,162,39,0.35);
  border-radius: var(--radius-sm);
  background: rgba(201,162,39,0.07);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gold-light);
}
.g-challenge b { color: var(--gold-pale); }

.g-hud {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.g-stat {
  padding: 0.8rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.022);
  text-align: center;
}
.g-stat__k {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.35rem;
}
.g-stat__v {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  line-height: 1;
  margin: 0;
}

.g-court {
  position: relative;
  border: 1px solid rgba(201,162,39,0.28);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--black-2);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.05);
  touch-action: manipulation;
}
.g-court canvas { display: block; width: 100%; cursor: pointer; }

.g-help {
  max-width: 62ch;
  margin: 1.2rem auto 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--text-dim);
  line-height: 1.7;
}
.g-help b { color: var(--gold-light); font-weight: 600; }

.g-empty {
  padding: 2rem 1.2rem;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.88rem;
  margin: 0;
}

/* --- Result card ------------------------------------------------- */
.g-result {
  margin-top: 1.6rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(201,162,39,0.34);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, rgba(201,162,39,0.1), rgba(255,255,255,0.01)),
    rgba(8,8,14,0.9);
  text-align: center;
}
.g-result__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.4rem;
}
.g-result__score {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: 1;
  margin: 0 0 0.5rem;
}
.g-result__meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 0 0 1rem;
}
.g-verdict {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.g-verdict--win {
  color: #8fe0b0;
  border-color: rgba(126,226,154,0.45);
  background: rgba(126,226,154,0.08);
}
.g-verdict--loss {
  color: var(--orange-soft);
  border-color: rgba(226,102,31,0.4);
  background: rgba(226,102,31,0.07);
}

/* --- Share panel ------------------------------------------------- */
.g-share {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.g-share__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.8rem;
}
.g-share__row {
  display: flex;
  gap: 0.5rem;
  max-width: 520px;
  margin: 0 auto;
}
.g-share__row input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.45);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.g-share__note {
  max-width: 56ch;
  margin: 0.9rem auto 0;
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--text-faint);
}
.g-share__note b { color: var(--gold-light); }

@media (max-width: 900px) {
  .g-hud { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .g-hud { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.45rem; }
  .g-share__row { flex-direction: column; }
}


/* Server-verification badge on the result card */
.g-verify {
  display: inline-block;
  margin: 1rem 0 0;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.g-verify.is-pending { color: var(--text-faint); }
.g-verify.is-ok {
  color: #8fe0b0;
  border-color: rgba(126,226,154,0.45);
  background: rgba(126,226,154,0.08);
}
.g-verify.is-warn {
  color: var(--orange-soft);
  border-color: rgba(226,102,31,0.4);
  background: rgba(226,102,31,0.07);
}


/* Footer row headings, now that there are two icon rows */
.eco__heading {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin: 0 0 1.2rem;
  opacity: 0.85;
}
.eco--trade {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-bottom: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}
@media (max-width: 900px) {
  .eco--trade { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 380px) {
  .eco--trade { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* ===================== HOW TO BUY  =============================== */
.steps { display: grid; gap: clamp(0.9rem, 2vw, 1.4rem); }

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  padding: clamp(1.4rem, 2.8vw, 2.1rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008)),
              rgba(8,8,14,0.7);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.step:hover { border-color: rgba(201,162,39,0.34); transform: translateY(-3px); }

.step__n {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1;
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.85;
}
.step__title { margin: 0 0 0.8rem; text-transform: none; }
.step__body p { font-size: 0.94rem; color: var(--text-dim); margin: 0 0 0.9rem; }
.step__body p:last-of-type { margin-bottom: 0; }
.step__body b { color: var(--text); font-weight: 600; }

.step__warn,
.step__note {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.86rem !important;
  line-height: 1.65;
}
.step__warn {
  border-left: 2px solid rgba(226,102,31,0.6);
  background: rgba(226,102,31,0.07);
  color: #ffb37a !important;
}
.step__note {
  border-left: 2px solid rgba(201,162,39,0.45);
  background: rgba(201,162,39,0.05);
  color: var(--text-faint) !important;
}

.venues {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.7rem;
  margin: 1.1rem 0;
}
.venue {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  transition: all 0.35s var(--ease);
}
.venue:hover {
  border-color: rgba(201,162,39,0.45);
  background: rgba(201,162,39,0.06);
  transform: translateY(-2px);
}
.venue__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-light);
  margin-bottom: 0.35rem;
}
.venue__desc {
  display: block;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-faint);
}

@media (max-width: 560px) {
  .step { grid-template-columns: 1fr; gap: 0.5rem; }
}