/* =========================================================
   WCI FRONTPAGE — tokens + components
   Deep purple surfaces · gold trust · FIFA rainbow accents
   ========================================================= */

:root {
  /* Surfaces */
  --bg-deep:     #0A0615;
  --bg-surface:  #141028;
  --bg-elevated: #1D1740;
  --bg-card:     #221a48;

  /* Gold / trust */
  --gold:        #F5D020;
  --gold-hi:     #FFE668;
  --gold-lo:     #C99B00;
  --coral:       #E8392C;
  --lime:        #9FD634;

  /* FIFA palette */
  --fifa-red:     #E8392C;
  --fifa-orange:  #FF7A1F;
  --fifa-yellow:  #F5D020;
  --fifa-lime:    #9FD634;
  --fifa-teal:    #00B9B2;
  --fifa-cyan:    #4ED1E6;
  --fifa-blue:    #2E6FE6;
  --fifa-purple:  #8B47D6;
  --fifa-magenta: #E637A8;

  /* Text */
  --t1: #F4F1FF;
  --t2: #B7AED8;
  --t3: #6E66A3;

  /* Accents used dynamically */
  --halo-opacity: 0.14;
  --arcs-opacity: 0.12;

  /* Fonts */
  --font-display: "Bricolage Grotesque", "Archivo Black", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* COLOR TEMPERATURE VARIANTS (via Tweaks) */
body[data-temp="deep"] {
  --bg-deep:     #07041a;
  --bg-surface:  #0f0a26;
  --bg-elevated: #170f3a;
  --arcs-opacity: 0.08;
}
body[data-temp="rainbow"] {
  --bg-deep:     #0C0720;
  --bg-surface:  #191133;
  --bg-elevated: #221852;
  --arcs-opacity: 0.22;
  --halo-opacity: 0.22;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--t1);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- PAGE BACKGROUND LAYERS -----
   Anchored to the top of the page (absolute, not fixed) so the rainbow
   stays in the hero region. Downstream sections sit on the body's deep bg. */
.page-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140vh;       /* ~hero + a bit of next section transition */
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Page background — the user-provided rainbow Background.png lives here,
   covered by stacked dark/colored overlays so it sets the WC26 vibe but
   never fights content for attention. */
.page-bg::before {
  content: "";
  position: absolute; inset: 0;
  /* Layer order (top → bottom): dark wash → ambient glows → rainbow image → deep base */
  background:
    /* uniform dark wash for content legibility (gets denser toward bottom) */
    linear-gradient(180deg, rgba(8,4,18,0.62) 0%, rgba(8,4,18,0.78) 50%, rgba(8,4,18,0.96) 100%),
    /* warm ambient color glows */
    radial-gradient(1200px 800px at 15% -10%, rgba(139,71,214,0.32), transparent 60%),
    radial-gradient(1000px 700px at 90% 10%,  rgba(46,111,230,0.22), transparent 60%),
    radial-gradient(900px  700px at 50% 110%, rgba(230,55,168,0.18), transparent 60%),
    /* the rainbow itself — desaturated + dim so it reads as ambiance */
    url("assets/wci-bg.png") center top / cover no-repeat,
    /* fallback deep bg if image fails */
    linear-gradient(180deg, var(--bg-deep) 0%, #0c0720 100%);
}
/* Soften the rainbow image specifically — done on a dedicated ::after so the
   filter doesn't bleed onto the dark wash above. */
.page-bg::after {
  content: "";
  position: absolute; inset: 0;
  /* Vignette: keep ambient at top, fade to fully dark at bottom so downstream
     sections sit on a solid surface. */
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, transparent 0%, rgba(8,4,18,0.45) 60%, rgba(8,4,18,0.95) 100%);
}
.page-bg-chibi { display: none; }

/* ---------- Page ambient layer ----------
   Sits BELOW page-bg in the stack but covers the entire document height.
   Drops one soft, low-opacity radial blob roughly where each section lands so
   downstream sections aren't on a flat black plane. The blobs bleed across
   section boundaries, creating the visual flow between sections. */
.page-ambient {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    /* hero region — extra warm reinforcement (overlaps page-bg) */
    radial-gradient(900px 600px at 50% 8%,    rgba(245,140,32,0.06), transparent 60%),
    /* jumbotron region — stadium green/cyan */
    radial-gradient(1100px 700px at 12% 18%,  rgba(46,200,150,0.07), transparent 60%),
    /* HowToBuy region — magenta/pink */
    radial-gradient(1100px 700px at 88% 28%,  rgba(214,51,163,0.10), transparent 60%),
    /* Oracle Data Feed region — terminal green */
    radial-gradient(1000px 700px at 18% 40%,  rgba(60,210,140,0.07), transparent 60%),
    /* Pari Mutuel region — gold */
    radial-gradient(1100px 700px at 88% 52%,  rgba(245,208,32,0.08), transparent 60%),
    /* Socials region — pink */
    radial-gradient(1000px 700px at 12% 64%,  rgba(255,90,200,0.08), transparent 60%),
    /* Cope card region — purple */
    radial-gradient(1000px 700px at 88% 76%,  rgba(139,71,214,0.10), transparent 60%),
    /* Tokenomics region — gold */
    radial-gradient(1100px 700px at 18% 86%,  rgba(245,208,32,0.10), transparent 60%),
    /* Final CTA / footer — warm magenta */
    radial-gradient(900px 500px at 50% 96%,   rgba(214,51,163,0.10), transparent 60%);
  /* very subtle horizontal noise to break up the blobs slightly */
  filter: saturate(1.05);
}

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  animation: grainFlicker 8s infinite;
}
@keyframes grainFlicker { 0%,100%{opacity:.03;} 50%{opacity:.05;} }

main.page {
  position: relative;
  z-index: 2;
  /* full-viewport width so section backgrounds bleed edge-to-edge.
     Inner content widths are capped per-section via .htb-grid, .tk-grid,
     .pm-inner, etc. */
  width: 100%;
  margin: 0;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t3);
}
.eyebrow .dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--lime);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--lime);
  animation: dotPulse 1.4s infinite;
}
@keyframes dotPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.3); opacity: 0.55; }
}

.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.88;
  color: var(--t1);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 5.2vw, 80px);
  letter-spacing: -0.025em;
  line-height: 0.96;
  margin: 0;
}
.lead {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.3vw, 22px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--t2);
  max-width: 54ch;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-3d {
  --h: 64px;
  position: relative;
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h);
  padding: 0 28px;
  border: none;
  border-radius: 18px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a0e00;
  cursor: pointer;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 50%, var(--gold-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -6px 0 rgba(124,78,0,0.45),
    0 8px 0 rgba(124,78,0,0.6),
    0 18px 40px -12px rgba(245,208,32,0.45);
  transition: transform 140ms cubic-bezier(.22,.61,.36,1), box-shadow 140ms;
  white-space: nowrap;
}
.btn-3d:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -6px 0 rgba(124,78,0,0.45),
    0 10px 0 rgba(124,78,0,0.6),
    0 28px 56px -12px rgba(245,208,32,0.65);
}
.btn-3d:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(124,78,0,0.4),
    0 2px 0 rgba(124,78,0,0.6),
    0 8px 20px -8px rgba(245,208,32,0.5);
}

.btn-ghost {
  color: var(--gold);
  background: rgba(245,208,32,0.06);
  box-shadow:
    inset 0 0 0 1.5px rgba(245,208,32,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -4px 0 rgba(245,208,32,0.12);
}
.btn-ghost:hover {
  background: rgba(245,208,32,0.12);
  box-shadow:
    inset 0 0 0 1.5px rgba(245,208,32,0.85),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 30px -12px rgba(245,208,32,0.45);
}

/* "Coming soon" disabled state — desaturate, dim, freeze, show small caption */
.btn-3d.is-soon,
.tj-connect.is-soon {
  position: relative;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.85) brightness(0.65);
  opacity: 0.7;
  background: linear-gradient(180deg, #6a6a6a 0%, #4a4a4a 50%, #2a2a2a 100%);
  color: rgba(255,255,255,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -3px 0 rgba(0,0,0,0.45),
    0 3px 0 rgba(0,0,0,0.55);
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
.btn-3d.is-soon.btn-ghost,
.tj-connect.is-soon {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6);
}
.btn-3d.is-soon::after,
.tj-connect.is-soon::after {
  content: "Coming soon";
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  background: rgba(8,4,22,0.85);
  border: 1px solid rgba(245,208,32,0.4);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: none;
  white-space: nowrap;
  pointer-events: none;
}
.tj-connect.is-soon::after {
  bottom: -20px;
  font-size: 8px;
  padding: 2px 7px;
}
.btn-3d.is-soon:hover { transform: none; }

/* =========================================================
   CHIPS
   ========================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t2);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.chip-gold {
  color: #1a0e00;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border: 1px solid rgba(201,155,0,0.6);
  box-shadow: 0 4px 16px -4px rgba(245,208,32,0.45), inset 0 1px 0 rgba(255,255,255,0.55);
}
.chip-live {
  color: var(--coral);
  background: rgba(232,57,44,0.1);
  border-color: rgba(232,57,44,0.35);
}
.chip-live .dot { background: var(--coral); box-shadow: 0 0 12px var(--coral); }
.chip-lime { color: var(--lime); background: rgba(159,214,52,0.08); border-color: rgba(159,214,52,0.3); }
.chip-warn { color: var(--coral); background: rgba(232,57,44,0.08); border-color: rgba(232,57,44,0.3); }

/* =========================================================
   CARD
   ========================================================= */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 32px;
  padding: 32px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 0 rgba(0,0,0,0.3),
    0 24px 48px -12px rgba(0,0,0,0.6);
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), box-shadow 260ms;
}
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 32px;
  padding: 1px;
  background: conic-gradient(from 0deg,
    var(--fifa-red), var(--fifa-orange), var(--fifa-yellow),
    var(--fifa-lime), var(--fifa-teal), var(--fifa-blue),
    var(--fifa-purple), var(--fifa-magenta), var(--fifa-red));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  animation: haloSpin 40s linear infinite;
}
.card:hover { transform: translateY(-6px); }
.card:hover::before { opacity: 0.55; }

/* =========================================================
   ALT NAV  ·  sticky glass-pill capsule (memey + clean)
   ========================================================= */
.alt-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 32px 0;
  pointer-events: none;            /* let inner pill catch clicks */
  transition: padding 240ms ease;
}
.alt-nav-inner {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 10px 12px 10px 16px;
  /* glass dark capsule */
  background:
    linear-gradient(180deg, rgba(28,16,52,0.78) 0%, rgba(10,5,24,0.86) 100%);
  border: 1px solid rgba(245,208,32,0.25);
  border-radius: 999px;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.05),
    0 14px 30px -10px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.4),
    0 0 60px -20px rgba(245,208,32,0.4);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1.2),
              border-color 240ms,
              box-shadow 280ms,
              max-width 280ms ease;
}
.alt-nav.is-scrolled .alt-nav-inner {
  border-color: rgba(245,208,32,0.5);
  background:
    linear-gradient(180deg, rgba(20,10,42,0.92) 0%, rgba(8,4,20,0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.06),
    0 18px 38px -12px rgba(0,0,0,0.7),
    0 0 0 1px rgba(0,0,0,0.45),
    0 0 80px -16px rgba(245,208,32,0.5);
}
/* rainbow seam under the pill — subtle WC26 accent */
.alt-nav-inner::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%;
  bottom: -1px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--fifa-red) 0%, var(--fifa-orange) 16%, var(--fifa-yellow) 32%,
    var(--fifa-lime) 48%, var(--fifa-teal) 60%, var(--fifa-blue) 74%,
    var(--fifa-purple) 87%, var(--fifa-magenta) 100%);
  opacity: 0.45;
  pointer-events: none;
}

/* ---- Brand block ---- */
.alt-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  text-decoration: none;
  border-radius: 999px;
  position: relative;
  flex: 0 0 auto;
}
.ab-paul {
  font-size: 22px;
  display: inline-block;
  filter: drop-shadow(0 0 8px rgba(168,89,229,0.55));
  animation: abPaulWiggle 6s ease-in-out infinite;
}
@keyframes abPaulWiggle {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  25%      { transform: rotate(8deg)  translateY(-2px); }
  50%      { transform: rotate(-4deg) translateY(0); }
  75%      { transform: rotate(6deg)  translateY(-2px); }
}
.alt-brand:hover .ab-paul { animation-duration: 1.6s; }
.ab-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.025em;
  background: linear-gradient(180deg, #fff7d6 0%, #f5d020 50%, #b88a10 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(245,208,32,0.4));
}
.ab-name i {
  color: #ff6b3d;
  -webkit-text-fill-color: #ff6b3d;
  font-style: normal;
  margin-left: 1px;
  filter: drop-shadow(0 0 8px rgba(255,107,61,0.6));
}
.ab-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: rgba(74,232,158,0.10);
  border: 1px solid rgba(74,232,158,0.4);
  border-radius: 999px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10px;
  color: var(--lime);
  white-space: nowrap;
}
.ab-streak strong {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0;
}
.ab-streak-k {
  color: rgba(255,255,255,0.55);
  font-size: 9px;
}
.ab-streak-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: dotPulse 1.4s ease-in-out infinite;
}

/* ---- Links ---- */
.alt-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  justify-content: center;
}
.alt-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,0.78);
  border: 1px solid transparent;
  transition: color 200ms, background 200ms, border-color 200ms, transform 220ms;
  white-space: nowrap;
}
.alt-links .al-emoji {
  font-size: 14px;
  filter: grayscale(0.2);
  transition: filter 220ms, transform 220ms;
}
.alt-links a:hover {
  color: var(--gold);
  background: linear-gradient(180deg, rgba(245,208,32,0.18), rgba(245,208,32,0.04));
  border-color: rgba(245,208,32,0.35);
  transform: translateY(-1px);
}
.alt-links a:hover .al-emoji {
  filter: grayscale(0);
  transform: rotate(-8deg) scale(1.12);
}
.alt-links a.is-active {
  color: var(--gold);
  background: linear-gradient(180deg, rgba(245,208,32,0.28), rgba(245,208,32,0.08));
  border-color: rgba(245,208,32,0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 22px -4px rgba(245,208,32,0.55);
}
/* memey hover quip — appears below the link */
.alt-links a::after {
  content: attr(data-quip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 5px 10px;
  background: rgba(8,4,22,0.96);
  border: 1px solid rgba(245,208,32,0.35);
  border-radius: 8px;
  font-family: "Caveat", "Bradley Hand", "Marker Felt", cursive;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(.2,.8,.2,1.2);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.6);
  z-index: 6;
}
.alt-links a:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- Right side ---- */
.alt-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.alt-connect {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms, border-color 180ms, color 180ms;
}
.alt-connect:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.32);
  color: #fff;
}
.alt-buy {
  appearance: none;
  border: none;
  cursor: pointer;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #fff2a8 0%, #f5d020 50%, #c79008 100%);
  color: #1a0c08;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,0.18),
    inset 0 2px 0 rgba(255,255,255,0.45),
    0 6px 16px rgba(245,208,32,0.45),
    0 0 0 1px rgba(120,80,8,0.4);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1.2), filter 180ms, box-shadow 220ms;
  animation: altBuyHum 4s ease-in-out infinite;
}
@keyframes altBuyHum {
  0%, 100% { box-shadow:
    inset 0 -2px 0 rgba(0,0,0,0.18),
    inset 0 2px 0 rgba(255,255,255,0.45),
    0 6px 16px rgba(245,208,32,0.45),
    0 0 0 1px rgba(120,80,8,0.4); }
  50%      { box-shadow:
    inset 0 -2px 0 rgba(0,0,0,0.18),
    inset 0 2px 0 rgba(255,255,255,0.45),
    0 6px 22px rgba(245,208,32,0.65),
    0 0 0 1px rgba(120,80,8,0.4); }
}
.alt-buy:hover { transform: translateY(-2px); filter: brightness(1.06); }
.alt-buy-emoji { font-size: 14px; }
.alt-buy-arrow { font-weight: 900; }

/* ---- Live ticker under the pill ---- */
.alt-ticker {
  pointer-events: none;
  margin: 8px auto 0;
  max-width: 1480px;
  padding: 0 32px;
  height: 24px;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  opacity: 0.85;
  transition: opacity 240ms, max-height 280ms, height 280ms, margin 280ms;
}
.alt-nav.is-scrolled .alt-ticker {
  opacity: 0;
  height: 0;
  margin-top: 0;
}
.alt-ticker-track {
  display: flex;
  white-space: nowrap;
  animation: altTick 50s linear infinite;
  will-change: transform;
}
@keyframes altTick {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.alt-ticker-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-right: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,208,32,0.85);
  text-shadow: 0 0 10px rgba(245,208,32,0.25);
}
.alt-ticker-row em {
  color: rgba(245,208,32,0.4);
  font-style: normal;
  font-size: 9px;
}
.alt-ticker-row .att-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: dotPulse 1.4s ease-in-out infinite;
}

/* ---- Mobile / narrow viewport ---- */
@media (max-width: 1100px) {
  .alt-nav { padding: 10px 16px 0; }
  .alt-nav-inner { padding: 8px 8px 8px 12px; gap: 12px; }
  .alt-links { display: none; }     /* simplified — just brand + buy */
  .alt-connect { display: none; }
  .alt-buy { padding: 0 14px; font-size: 11px; }
  .ab-streak-k { display: none; }
}

/* =========================================================
   STADIUM JUMBOTRON NAV  ·  live broadcast bar + LED nav cells
   ========================================================= */
.topnav-jumbo {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 32px 0;
  pointer-events: none;
}
.topnav-jumbo .topnav-inner {
  pointer-events: auto;
  position: relative;
  border-radius: 14px;
  background:
    radial-gradient(60% 100% at 78% 100%, rgba(139,71,214,0.32), transparent 70%),
    radial-gradient(45% 100% at 18% 100%, rgba(168,89,229,0.18), transparent 70%),
    linear-gradient(180deg, #1a0a2a 0%, #100624 50%, #08041a 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  border: 2px solid #1a0e30;
  box-shadow:
    inset 0 2px 0 rgba(196,138,255,0.22),
    inset 0 -3px 0 rgba(0,0,0,0.85),
    inset 0 0 0 1px rgba(168,89,229,0.18),
    0 4px 0 rgba(0,0,0,0.85),
    0 24px 40px -10px rgba(0,0,0,0.75),
    0 0 60px -16px rgba(168,89,229,0.5);
  overflow: hidden;
  isolation: isolate;
  height: auto;
  display: block;
  font-family: "JetBrains Mono", monospace;
  /* explicit defaults override the legacy .topnav-inner styles below */
  padding: 0;
  -webkit-mask: none;
          mask: none;
}
/* corner screws */
.tj-screws { position: absolute; inset: 6px; pointer-events: none; z-index: 4; }
.tj-screws i {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d6d6d6 0%, #888 40%, #2a2a2a 100%);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.6);
}
.tj-screws i:nth-child(1) { top: 0; left: 0; }
.tj-screws i:nth-child(2) { top: 0; right: 0; }
.tj-screws i:nth-child(3) { bottom: 0; left: 0; }
.tj-screws i:nth-child(4) { bottom: 0; right: 0; }

/* fresh-cut pitch grass band along the bottom */
.tj-grass {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32%;
  background:
    repeating-linear-gradient(96deg,
      rgba(86,178,108,0.55) 0 28px,
      rgba(46,116,68,0.55) 28px 56px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 70%, #000 100%);
  mix-blend-mode: overlay;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
/* purple stadium spotlight under the row */
.tj-purple-glow {
  position: absolute;
  left: 50%; bottom: -40%;
  width: 70%; height: 120%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(168,89,229,0.45), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

/* Broadcast LIVE ribbon — same shape as the StadiumJumbotron section */
.tj-live-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 32px;
  padding: 0 14px 0 12px;
  background: linear-gradient(180deg, #b8101a 0%, #7a0410 100%);
  border-bottom: 1px solid rgba(0,0,0,0.55);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,180,180,0.4);
  overflow: hidden;
  z-index: 3;
}
.tj-live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  flex: 0 0 auto;
}
.tj-live-pill i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #ff8080;
  animation: tjBlink 1.1s infinite;
}
@keyframes tjBlink { 0%,55%,100%{opacity:1}25%{opacity:.25} }
.tj-live-track {
  flex: 1;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.tj-live-row {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
  flex: 0 0 auto;
  animation: tjTick 50s linear infinite;
}
@keyframes tjTick {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.tj-live-row em { color: rgba(255,200,200,0.8); font-style: normal; }
.tj-live-clock {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  background: rgba(0,0,0,0.4);
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  flex: 0 0 auto;
}

/* Main row */
.tj-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 22px;
  z-index: 2;
}
.tj-logo { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.tj-logo-disc {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  text-decoration: none;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1.2), filter 280ms;
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,0.65))
    drop-shadow(0 0 14px rgba(168,89,229,0.45));
}
.tj-logo-disc:hover {
  transform: rotate(-6deg) scale(1.06);
  filter:
    drop-shadow(0 6px 12px rgba(0,0,0,0.7))
    drop-shadow(0 0 22px rgba(168,89,229,0.7));
}
.tj-logo-disc img {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.tj-logo-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168,89,229,0.5), transparent 70%);
  filter: blur(6px);
  z-index: 1;
  animation: tjLogoPulse 4s ease-in-out infinite;
}
@keyframes tjLogoPulse {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50%     { opacity: 0.95; transform: scale(1.08); }
}
.tj-logo-text { display: flex; flex-direction: column; gap: 3px; }
.tj-logo-mark {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1;
  background: linear-gradient(180deg, #fff7d6 0%, #f5d020 50%, #b88a10 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.55));
  white-space: nowrap;
}
.tj-logo-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: rgba(245,208,32,0.75);
  text-transform: uppercase;
  white-space: nowrap;
}

/* LED nav cells — each one gets a tone */
.tj-links { display: flex; gap: 10px; flex: 1; justify-content: center; }
.tj-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #050505 0%, #100410 100%);
  border-radius: 6px;
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c, #b3ff52);
  text-shadow: 0 0 4px var(--c, #b3ff52), 0 0 10px rgba(180,255,90,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    inset 0 0 12px rgba(0,0,0,0.6);
  transition: all 200ms;
}
.tj-link[data-tone="0"] { --c: #b3ff52; }       /* lime */
.tj-link[data-tone="1"] { --c: #4ad8ff; }       /* cyan */
.tj-link[data-tone="2"] { --c: #f5d020; }       /* gold */
.tj-link[data-tone="3"] { --c: #ff5cb0; }       /* magenta */
.tj-link[data-tone="4"] { --c: #ff6b6b; }       /* coral */
.tj-link-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c, #b3ff52);
  box-shadow: 0 0 6px var(--c, #b3ff52);
}
.tj-link:hover {
  text-shadow: 0 0 6px var(--c), 0 0 16px var(--c);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    inset 0 0 16px rgba(0,0,0,0.6),
    0 0 18px -4px var(--c);
}
.tj-link.is-active {
  border-color: var(--c);
  text-shadow: 0 0 6px var(--c), 0 0 18px var(--c);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    inset 0 0 18px rgba(0,0,0,0.5),
    0 0 22px -4px var(--c);
}

/* CTAs */
.tj-cta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* Small social icon chips — square, glassy, hover-lit */
.tj-social {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1.2),
              background 180ms, border-color 180ms, color 180ms,
              box-shadow 200ms;
  flex: 0 0 auto;
}
.tj-social svg { width: 16px; height: 16px; }
.tj-social:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.45);
  color: #fff;
  box-shadow: 0 8px 16px -6px rgba(0,0,0,0.55);
}
.tj-social-x:hover {
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 8px 16px -6px rgba(0,0,0,0.55), 0 0 16px -4px rgba(255,255,255,0.35);
}
.tj-social-tg {
  background: linear-gradient(180deg, rgba(34,158,217,0.18), rgba(22,129,176,0.10));
  border-color: rgba(74,200,240,0.4);
  color: #6dd0f5;
}
.tj-social-tg:hover {
  background: linear-gradient(180deg, rgba(34,158,217,0.32), rgba(22,129,176,0.18));
  border-color: rgba(74,200,240,0.75);
  color: #fff;
  box-shadow: 0 8px 16px -6px rgba(0,0,0,0.55), 0 0 18px -4px rgba(74,200,240,0.55);
}
/* hairline divider between socials and main CTAs */
.tj-cta-divider {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: linear-gradient(180deg, transparent, rgba(245,208,32,0.45), transparent);
  flex: 0 0 auto;
}
.tj-connect {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 180ms;
}
.tj-connect:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.45);
  color: #fff;
}
.tj-buy {
  appearance: none;
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  background: radial-gradient(140% 100% at 30% 25%, #fff2a8 0%, #f5d020 35%, #b07a10 100%);
  border: 1px solid #5a3a04;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #1a0a04;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 0 rgba(0,0,0,0.3),
    0 4px 0 #5a3a04,
    0 8px 18px rgba(245,208,32,0.4);
  transition: transform 160ms;
}
.tj-buy:hover { transform: translateY(-1px); }
.tj-buy-arrow { font-size: 9px; }

/* Responsive */
@media (max-width: 1100px) {
  .topnav-jumbo { padding: 10px 16px 0; }
  .tj-row { padding: 12px 14px; gap: 12px; }
  .tj-links { display: none; }
  .tj-connect { display: none; }
  .tj-logo-text { display: none; }
  .tj-cta-divider { display: none; }
  .tj-social { width: 32px; height: 32px; }
  .tj-social svg { width: 14px; height: 14px; }
}

/* =========================================================
   NAV + LOGOORB — LEGACY (kept for design review, unused)
   ========================================================= */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 22px 40px 110px; /* bottom pad reserves space for hanging orb + tentacles */
  transition: transform 300ms cubic-bezier(.22,.61,.36,1);
  perspective: 1400px;
}
body.nav-hidden .topnav { transform: translateY(-110%); }

.topnav-inner {
  position: relative;
  height: 104px;
  background:
    linear-gradient(180deg,
      rgba(54,30,108,0.96) 0%,
      rgba(34,18,68,0.95) 38%,
      rgba(20,12,42,0.97) 70%,
      rgba(8,4,18,0.98) 100%),
    linear-gradient(90deg,
      rgba(139,71,214,0.32) 0%,
      rgba(46,111,230,0.18) 28%,
      rgba(20,16,40,0.0) 50%,
      rgba(232,57,44,0.18) 78%,
      rgba(245,208,32,0.28) 100%);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 30px;
  /* DEEP 3D box-shadow stack — pronounced edges, real lift off the page */
  box-shadow:
    /* sharp inner highlights — top-light + side bevels */
    inset 0  3px 0   rgba(255,255,255,0.32),
    inset 0  6px 14px -6px rgba(255,255,255,0.18),
    inset 1px 0 0 rgba(255,255,255,0.10),
    inset -1px 0 0 rgba(255,255,255,0.10),
    /* inner shadows along the bottom — feels like volume */
    inset 0 -3px 0  rgba(0,0,0,0.55),
    inset 0 -22px 38px -14px rgba(0,0,0,0.68),
    /* OUTER stack: tight rim, near drop, wide soft drop, ambient color glow */
    0 1px 0 rgba(255,255,255,0.10),
    0 4px 0 rgba(0,0,0,0.55),
    0 14px 22px -6px rgba(0,0,0,0.7),
    0 40px 80px -24px rgba(0,0,0,0.92),
    0 0 0 1px rgba(0,0,0,0.45),
    0 0 80px -10px rgba(168,89,229,0.55),
    0 0 140px -40px rgba(245,208,32,0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  transform-style: preserve-3d;
  /* CIRCULAR socket cut in the CENTER — orb sits flush like a porthole */
  -webkit-mask: radial-gradient(circle 67px at 50% 50%, transparent 98%, #000 99%);
          mask: radial-gradient(circle 67px at 50% 50%, transparent 98%, #000 99%);
}

/* Bevels — chunkier, brighter top + deeper bottom for real 3D extrusion */
.topnav-bevel-top {
  position: absolute;
  left: 12px; right: 12px;
  top: 1px;
  height: 26px;
  border-radius: 28px 28px 50% 50% / 28px 28px 100% 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.16) 35%, rgba(255,255,255,0.02) 70%, transparent 100%);
  pointer-events: none;
  z-index: 3;
  /* a thin extra hairline of pure white at the very top edge */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.topnav-bevel-bottom {
  position: absolute;
  left: 12px; right: 12px;
  bottom: 2px;
  height: 30px;
  border-radius: 50% 50% 28px 28px / 100% 100% 28px 28px;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
  filter: blur(0.4px);
}

/* Tentacle drapes — flop OVER the nav from above (decorative, behind interactive content) */
.topnav-inner > .nav-tentacle {
  position: absolute !important;
  top: -90px;
  width: 200px;
  height: 220px;
  display: block;
  pointer-events: auto;     /* clickable */
  cursor: pointer;
  z-index: 8;
  filter: drop-shadow(0 22px 26px rgba(0,0,0,0.55))
          drop-shadow(0 0 28px rgba(168,89,229,0.35));
  transform-origin: top center;
  opacity: 1;
  overflow: visible;
  text-decoration: none;
  transition:
    transform 360ms cubic-bezier(.2,.8,.2,1.2),
    filter 360ms ease;
  -webkit-tap-highlight-color: transparent;
}
.topnav-inner > .nav-tentacle svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.topnav-inner > .nav-tentacle-l { left:  -38px !important; right: auto  !important; animation: navTentSway 7s ease-in-out infinite; }
.topnav-inner > .nav-tentacle-r { right: -38px !important; left:  auto  !important; animation: navTentSway 7s ease-in-out infinite reverse 0.6s; }

/* Hover: lift, brighter glow, subtle wiggle */
.topnav-inner > .nav-tentacle:hover {
  filter: drop-shadow(0 28px 30px rgba(0,0,0,0.65))
          drop-shadow(0 0 42px rgba(196,131,255,0.7));
}
.topnav-inner > .nav-tentacle-l:hover { transform: translateY(6px) rotate(-6deg) scale(1.04); }
.topnav-inner > .nav-tentacle-r:hover { transform: translateY(6px) rotate(6deg)  scale(1.04); }
/* Quick squish on click for tactile feedback */
.topnav-inner > .nav-tentacle:active { transform: translateY(10px) scale(0.98); }
/* Pulse the suction cups on hover */
.topnav-inner > .nav-tentacle:hover .nt-cup { animation: tentCupPop 1.2s ease-in-out infinite; }
.topnav-inner > .nav-tentacle:hover .nt-cup:nth-child(2) { animation-delay: 0.12s; }
.topnav-inner > .nav-tentacle:hover .nt-cup:nth-child(3) { animation-delay: 0.24s; }
.topnav-inner > .nav-tentacle:hover .nt-cup:nth-child(4) { animation-delay: 0.36s; }
.topnav-inner > .nav-tentacle:hover .nt-cup:nth-child(5) { animation-delay: 0.48s; }
.topnav-inner > .nav-tentacle:hover .nt-cup:nth-child(6) { animation-delay: 0.6s; }
@keyframes tentCupPop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
/* Glow blob pulses faster on hover */
.topnav-inner > .nav-tentacle:hover .nt-glow {
  animation: tentGlowPulse 1.6s ease-in-out infinite;
}
@keyframes tentGlowPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}
/* Wordmark + buttons sit ABOVE the tentacle ends so they're never obscured */
.nav-left, .nav-right { z-index: 9 !important; }
@keyframes navTentSway {
  0%,100% { transform: rotate(-2deg) translateY(0); }
  50%     { transform: rotate(2deg)  translateY(3px); }
}

/* Rainbow seam along bottom edge, sides of the notch */
.topnav-seam {
  position: absolute;
  left: 18px; right: 18px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--fifa-red) 0%, var(--fifa-orange) 12%, var(--fifa-yellow) 25%,
    var(--fifa-lime) 38%, transparent 42%, transparent 58%,
    var(--fifa-teal) 62%, var(--fifa-blue) 75%, var(--fifa-purple) 88%, var(--fifa-magenta) 100%);
  border-radius: 2px;
  opacity: 0.75;
  pointer-events: none;
}

/* Fine tech-pattern behind content */
.topnav-inner::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 20px);
  pointer-events: none;
  border-radius: 22px;
}

.nav-left {
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0;
  margin-right: 16px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.03em;
  color: var(--t1);
  /* chunky chrome treatment so it pops on the busy nav */
  background: linear-gradient(180deg, #fff7d6 0%, #f5d020 45%, #b88a10 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.55)) drop-shadow(0 0 14px rgba(245,208,32,0.45));
  position: relative;
  z-index: 5;
}
.wordmark .accent {
  color: #ff6b3d;
  -webkit-text-fill-color: #ff6b3d;
  filter: drop-shadow(0 0 10px rgba(255,107,61,0.7));
}
.nav-tagline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  border-left: 1px solid rgba(245,208,32,0.25);
  padding-left: 14px;
  position: relative;
  z-index: 5;
  text-shadow: 0 0 12px rgba(245,208,32,0.5);
}

/* Live status pill next to the wordmark — mirrors the betting-desk vocabulary */
.nav-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(245,208,32,0.35);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(245,208,32,0.10), rgba(245,208,32,0.02));
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(0,0,0,0.4),
    0 0 22px -8px rgba(245,208,32,0.5);
}
.nav-status > * { white-space: nowrap; }
.nav-status .ns-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime), 0 0 0 1px rgba(0,0,0,0.4);
  animation: dotPulse 1.4s ease-in-out infinite;
}
.nav-status .ns-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(245,208,32,0.5);
}
.nav-status .ns-meta {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.16em;
  padding-left: 8px;
  border-left: 1px solid rgba(245,208,32,0.25);
}

.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  /* fill the space between .nav-left and .nav-right so the notch lines up with the orb */
  flex: 1 1 auto;
  position: relative;
  z-index: 5;
}
.nav-links .notch-gap {
  width: 200px;          /* wider than the 134px orb so links never touch it */
  display: inline-block;
  flex: 0 0 200px;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  position: relative;
  z-index: 5;
  white-space: nowrap;
  /* dashboard-style chip pill */
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  transition: color 180ms, background 180ms, border-color 180ms, box-shadow 180ms, text-shadow 180ms, transform 220ms;
}
/* tiny gold underline marker — appears on hover, stays under active link */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 220ms cubic-bezier(.2,.8,.2,1.2);
  pointer-events: none;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--gold);
  background: linear-gradient(180deg, rgba(245,208,32,0.16), rgba(245,208,32,0.04));
  border-color: rgba(245,208,32,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 18px -6px var(--gold);
  text-shadow: 0 0 10px rgba(245,208,32,0.5);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  width: 60%;
}
/* Active state — the section currently in view gets a brighter, persistent chip */
.nav-links a.is-active {
  color: var(--gold);
  background: linear-gradient(180deg, rgba(245,208,32,0.26), rgba(245,208,32,0.08));
  border-color: rgba(245,208,32,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 0 24px -4px rgba(245,208,32,0.55);
  text-shadow: 0 0 12px rgba(245,208,32,0.7);
}
.nav-links a.is-active::after {
  width: 70%;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  box-shadow: 0 0 8px rgba(245,208,32,0.7);
}

.nav-right { display: flex; align-items: center; gap: 10px; position: relative; z-index: 6; flex-shrink: 0; margin-left: 16px; }
.nav-left { position: relative; z-index: 6; }
/* Dashboard-style brighter Connect Wallet — purple gradient, gold-tinted text */
.btn-connect {
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #7e3fc2 0%, #5d2799 50%, #3a1465 100%);
  color: #fff;
  border: 1px solid rgba(196, 138, 255, 0.55);
  cursor: pointer;
  transition: all 160ms;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 4px 14px rgba(120, 60, 200, 0.45),
    0 0 0 1px rgba(0,0,0,0.4);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.btn-connect:hover {
  background: linear-gradient(180deg, #9555d9 0%, #6e2fb0 50%, #471880 100%);
  border-color: rgba(220, 170, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 6px 20px rgba(150, 80, 230, 0.55),
    0 0 28px -4px rgba(180, 110, 255, 0.6);
}
.btn-buy {
  --h: 44px;
  padding: 0 20px;
  font-size: 13px;
  border-radius: 12px;
}

/* LogoOrb — big mechanical porthole socketed into the navbar gap */
.orb-wrap {
  position: absolute;
  top: 74px;        /* exact vertical center of .topnav-inner (22px padding-top + 52px half-height) */
  left: 50%;
  transform: translate(-50%, -50%) scale(1) translateZ(0);
  transform-origin: center center;
  width: 134px;
  height: 134px;
  z-index: 4;
  pointer-events: auto;     /* enable hover */
  cursor: pointer;
  transition:
    transform 420ms cubic-bezier(.2, .9, .25, 1.25),
    filter   420ms cubic-bezier(.2, .9, .25, 1.25),
    z-index  0ms;
  will-change: transform, filter;
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,0.55))
    drop-shadow(0 0 20px rgba(245,208,32,0.18));
}
/* HOVER POP — orb lifts forward, scales, intensifies glow + halo */
.orb-wrap:hover {
  transform: translate(-50%, -50%) scale(1.16);
  z-index: 10;
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,0.7))
    drop-shadow(0 0 40px rgba(245,208,32,0.55))
    drop-shadow(0 0 70px rgba(155,108,255,0.4));
}
.orb-wrap:hover .orb-halo {
  opacity: 0.95;
  filter: blur(14px) saturate(1.3);
}
.orb-wrap:hover .orb-ring {
  animation-duration: 14s;  /* spin faster on hover */
  filter: saturate(1.4) drop-shadow(0 0 14px rgba(245,208,32,0.75));
}
.orb-wrap:active {
  transform: translate(-50%, -50%) scale(1.10);
  transition-duration: 80ms;
}
/* Outer rainbow halo glow */
.orb-halo {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--fifa-red), var(--fifa-orange), var(--fifa-yellow),
    var(--fifa-lime), var(--fifa-teal), var(--fifa-blue),
    var(--fifa-purple), var(--fifa-magenta), var(--fifa-red));
  filter: blur(10px);
  opacity: 0.55;
  animation: haloSpin 40s linear infinite;
}
/* Spinning rainbow inner ring — visible through the cut bezel */
.orb-ring {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--fifa-red), var(--fifa-orange), var(--fifa-yellow),
    var(--fifa-lime), var(--fifa-teal), var(--fifa-blue),
    var(--fifa-purple), var(--fifa-magenta), var(--fifa-red));
  animation: haloSpin 40s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 70%, #000 71%);
          mask: radial-gradient(circle, transparent 70%, #000 71%);
  filter: saturate(1.15) drop-shadow(0 0 8px rgba(245,208,32,0.45));
}
/* Mechanical bezel + bolts: 6 dots arranged in a hexagon pattern around the hub */
.orb-wrap::before {
  /* Inner brushed-metal bezel — sits between rainbow ring and hub */
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%,  rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,0.5), transparent 55%),
    linear-gradient(180deg, #2a223e 0%, #14102a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -3px 0 rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(245,208,32,0.20);
  z-index: 1;
}
.orb-wrap::after {
  /* 8 brass bolts at compass + ordinal points — sit ON the rainbow ring rim */
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(circle 5px at 50%   4%,  #fff7c4 0%, #f5d020 30%, #6e5300 70%, transparent 80%),
    radial-gradient(circle 5px at 50%  96%,  #fff7c4 0%, #f5d020 30%, #6e5300 70%, transparent 80%),
    radial-gradient(circle 5px at 4%   50%,  #fff7c4 0%, #f5d020 30%, #6e5300 70%, transparent 80%),
    radial-gradient(circle 5px at 96%  50%,  #fff7c4 0%, #f5d020 30%, #6e5300 70%, transparent 80%),
    radial-gradient(circle 4px at 18%  18%,  #fff7c4 0%, #f5d020 30%, #6e5300 70%, transparent 80%),
    radial-gradient(circle 4px at 82%  18%,  #fff7c4 0%, #f5d020 30%, #6e5300 70%, transparent 80%),
    radial-gradient(circle 4px at 18%  82%,  #fff7c4 0%, #f5d020 30%, #6e5300 70%, transparent 80%),
    radial-gradient(circle 4px at 82%  82%,  #fff7c4 0%, #f5d020 30%, #6e5300 70%, transparent 80%);
  filter: drop-shadow(0 0 5px rgba(245,208,32,0.85)) drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
.orb-hub {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.35), transparent 38%),
    radial-gradient(circle at 60% 70%, rgba(245,208,32,0.32), transparent 55%),
    linear-gradient(180deg, #1D1740 0%, #0A0615 100%);
  border: 1.5px solid rgba(245,208,32,0.7);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.25),
    inset 0 -10px 22px rgba(0,0,0,0.75),
    inset 0 0 0 2px rgba(0,0,0,0.6),
    0 14px 38px -8px rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}
.orb-hub img { width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); }

/* Socket bezel on the navbar — adds metallic recess depth where the hole is cut */
.topnav-inner::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 148px;
  height: 148px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  /* concave-rim look: dark inner ring plus a thin highlight ring */
  background:
    radial-gradient(closest-side, transparent 47%, rgba(0,0,0,0.65) 49%, rgba(0,0,0,0) 56%),
    radial-gradient(closest-side, transparent 56%, rgba(255,255,255,0.18) 58%, rgba(255,255,255,0) 60%);
  filter: blur(0.6px);
}
/* The Jumbotron nav has no central orb — kill the legacy ring on this variant */
.topnav-jumbo .topnav-inner::after { content: none; display: none; }
.topnav-jumbo .topnav-inner::before { content: none; display: none; }

/* Rainbow HeaderWave tracing bottom of notch — hidden; replaced by seam */
.headerwave { display: none; }

/* Orb tether lines — little tech tick marks flanking the orb */
.orb-tick {
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,208,32,0.6), transparent);
  pointer-events: none;
  z-index: 1;
}
.orb-tick.left  { left: calc(50% - 148px); }
.orb-tick.right { right: calc(50% - 148px); }
.orb-tick::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}
.orb-tick.left::after  { right: 0; }
.orb-tick.right::after { left: 0; }

@keyframes haloSpin { to { transform: rotate(360deg); } }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 24px 72px 0;
  display: flex;
  flex-direction: column;
}
.hero-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-top: 8px;
  /* keep content tight at HD widths — section bg still spans full viewport */
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
body[data-hero="centered"] .hero-split {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}
body[data-hero="centered"] .hero-paul { order: -1; }
body[data-hero="centered"] .hero-cta-row { justify-content: center; }
body[data-hero="centered"] .lead { margin: 0 auto; }
body[data-hero="centered"] .hero-eyebrow { justify-content: center; }

body[data-hero="stacked"] .hero-split {
  grid-template-columns: 1fr 1.2fr;
}
body[data-hero="stacked"] .hero-paul { transform: scale(1.05); }

.hero-eyebrow { display: flex; align-items: center; }

.hero-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(72px, 9.5vw, 152px);
  letter-spacing: -0.035em;
  line-height: 0.84;
  margin: 20px 0 24px;
  color: var(--t1);
  text-wrap: balance;
}
.hero-h1 .rainbow-under {
  position: relative;
  display: inline-block;
}
.hero-h1 .rainbow-under::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 8px;
  background: linear-gradient(90deg,
    var(--fifa-red), var(--fifa-orange), var(--fifa-yellow),
    var(--fifa-lime), var(--fifa-teal), var(--fifa-blue),
    var(--fifa-purple), var(--fifa-magenta));
  border-radius: 4px;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'><path d='M0 8 Q 25 0 50 8 T 100 8 T 150 8 T 200 8 T 250 8 T 300 8 T 350 8 T 400 8' stroke='black' stroke-width='8' fill='none' stroke-linecap='round'/></svg>");
  mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'><path d='M0 8 Q 25 0 50 8 T 100 8 T 150 8 T 200 8 T 250 8 T 300 8 T 350 8 T 400 8' stroke='black' stroke-width='8' fill='none' stroke-linecap='round'/></svg>");
  -webkit-mask-size: 100% 100%;
}

.hero-cta-row {
  display: flex;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.trust-strip {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  opacity: 0.85;
}
.trust-strip .tr-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t3);
}
.trust-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--t2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 180ms;
}
.trust-lockup:hover { color: var(--t1); }
.trust-lockup .lk-ico {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--t2);
}

/* Hero Paul */
.hero-paul {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 620px;
  justify-self: center;
}
.paul-halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--fifa-red), var(--fifa-orange), var(--fifa-yellow),
    var(--fifa-lime), var(--fifa-teal), var(--fifa-blue),
    var(--fifa-purple), var(--fifa-magenta), var(--fifa-red));
  filter: blur(30px);
  opacity: var(--halo-opacity);
  animation: haloSpin 60s linear infinite reverse;
}
.paul-halo-2 {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px dashed rgba(245,208,32,0.3);
  animation: haloSpin 80s linear infinite;
}
.paul-img {
  position: absolute;
  inset: 5% 5% 0 5%;
  width: 90%;
  height: 95%;
  object-fit: contain;
  animation: orbFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.7));
  z-index: 2;
}
@keyframes orbFloat {
  0%,100% { transform: translateY(-4px); }
  50%     { transform: translateY(8px); }
}

.juggle-ball {
  position: absolute;
  width: 42px; height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff, #e5e5e5 60%, #9a9a9a);
  box-shadow:
    inset 0 -6px 10px rgba(0,0,0,0.25),
    0 12px 24px -8px rgba(0,0,0,0.6);
  z-index: 3;
}
.juggle-ball::after {
  content: "";
  position: absolute; inset: 5px;
  border-radius: 50%;
  background-image:
    radial-gradient(circle at 50% 50%, #111 0 7px, transparent 8px),
    conic-gradient(from 30deg, transparent 0 20deg, #111 20deg 24deg, transparent 24deg 92deg,
                   #111 92deg 96deg, transparent 96deg 164deg, #111 164deg 168deg,
                   transparent 168deg);
  opacity: 0.65;
}
.jb-1 { top: 12%;  left: 8%;  animation: juggle1 6s ease-in-out infinite; }
.jb-2 { top: 28%;  right: 6%; animation: juggle2 7s ease-in-out infinite 0.5s; }
.jb-3 { bottom: 20%; left: 14%; animation: juggle3 8s ease-in-out infinite 1s; }
@keyframes juggle1 {
  0%,100% { transform: translate(0,0) rotate(0); }
  50%     { transform: translate(16px,-18px) rotate(180deg); }
}
@keyframes juggle2 {
  0%,100% { transform: translate(0,0) rotate(0); }
  50%     { transform: translate(-20px,14px) rotate(-180deg); }
}
@keyframes juggle3 {
  0%,100% { transform: translate(0,0) rotate(0); }
  50%     { transform: translate(14px,-12px) rotate(180deg); }
}

/* floating chips on hero paul */
.paul-chip-conf {
  position: absolute;
  top: 16%;
  right: -6%;
  z-index: 4;
}
.paul-chip-match {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(29,23,64,0.92), rgba(10,6,21,0.92));
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--t1);
  z-index: 4;
  box-shadow: 0 12px 36px -10px rgba(0,0,0,0.6);
}
.paul-chip-match .stripe {
  width: 3px; height: 20px;
  background: var(--fifa-red); border-radius: 2px;
}

/* =========================================================
   COUNTDOWN STRIP
   ========================================================= */
.countdown {
  margin: 40px -72px 0;
  height: 140px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.45));
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg,
    var(--fifa-red), var(--fifa-orange), var(--fifa-yellow),
    var(--fifa-lime), var(--fifa-teal), var(--fifa-blue),
    var(--fifa-purple), var(--fifa-magenta)) 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 72px;
  gap: 36px;
  position: relative;
}
.countdown-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.cd-eyebrow-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff2a8 0%, #f5d020 50%, #b07a10 100%);
  font-size: 18px;
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,0.25),
    inset 0 2px 0 rgba(255,255,255,0.45),
    0 6px 14px rgba(245,208,32,0.4);
}
.cd-eyebrow-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.cd-eyebrow-line1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1;
  background: linear-gradient(180deg, #fff7d6 0%, #f5d020 60%, #b88a10 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  white-space: nowrap;
}
.cd-eyebrow-line2 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.countdown-digits {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: clamp(48px, 7vw, 104px);
  color: var(--t1);
  line-height: 1;
  text-shadow: 0 0 32px rgba(245,208,32,0.25);
  font-variant-numeric: tabular-nums;
}
.countdown-digits .unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t3);
  margin-left: 4px;
  font-weight: 600;
}
.countdown-digits .colon {
  animation: colonPulse 1s infinite;
  color: var(--gold);
  padding: 0 4px;
}
@keyframes colonPulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.countdown-right {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(245,208,32,0.35);
  padding-bottom: 4px;
  transition: color 180ms, border-color 180ms;
}
.countdown-right:hover { color: var(--gold-hi); border-color: var(--gold-hi); }

/* =========================================================
   TICKER
   ========================================================= */
.ticker {
  position: relative;
  height: 72px;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(10,6,21,0.6);
  backdrop-filter: blur(8px);
}
.ticker-track {
  display: flex;
  gap: 40px;
  align-items: center;
  height: 100%;
  padding: 0 40px;
  animation: marquee 60s linear infinite;
  width: max-content;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--t2);
  white-space: nowrap;
}
.ticker-item .tick-ico { font-size: 16px; }
.ticker-item .tick-sep {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  margin: 0 8px;
}
.ticker-item b { color: var(--t1); font-weight: 700; }
.ticker-item .acc-gold { color: var(--gold); font-weight: 700; }
.ticker-item .acc-lime { color: var(--lime); font-weight: 700; }
.ticker-item .acc-coral { color: var(--coral); font-weight: 700; }

/* =========================================================
   ORACLE SECTION
   ========================================================= */
.section { padding: 128px 72px; position: relative; }
.section-header { max-width: 960px; margin-bottom: 64px; }
.section-header .eyebrow { display: block; margin-bottom: 18px; }
.section-header .lead { margin-top: 22px; }

.oracle {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.oracle-left { position: relative; aspect-ratio: 1/1; max-width: 520px; justify-self: center; width: 100%; }
.oracle-left .paul-halo { inset: 10%; }
.oracle-left .paul-img { filter: drop-shadow(0 30px 40px rgba(139,71,214,0.35)); animation-duration: 8s; }
.oracle-caption {
  position: absolute;
  bottom: -28px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--t3);
  font-size: 14px;
}
.oracle-right p { font-size: 18px; line-height: 1.6; color: var(--t2); max-width: 56ch; margin: 0 0 16px; }
.oracle-right p b { color: var(--t1); font-weight: 700; }

.next-match-card {
  margin-top: 36px;
  max-width: 560px;
  display: grid;
  gap: 18px;
}
.nmc-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.nmc-flags {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-weight: 900; font-size: 28px;
}
.nmc-flags .vs {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--t3);
  letter-spacing: 0.2em;
  padding: 0 4px;
}
.nmc-kickoff {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
}
.nmc-conf-row { display: flex; align-items: center; gap: 14px; }
.nmc-conf-bar {
  flex: 1;
  height: 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,0.06);
}
.nmc-conf-fill {
  height: 100%;
  width: 78%;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold), var(--gold-hi));
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(245,208,32,0.4);
}
.nmc-conf-pct {
  font-family: var(--font-mono); font-weight: 800; font-size: 18px; color: var(--gold);
}
.nmc-pick {
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(159,214,52,0.08);
  border: 1px solid rgba(159,214,52,0.3);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--lime);
  letter-spacing: 0.1em;
}
.nmc-pick b { color: var(--t1); font-weight: 800; }

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.hiw-card {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: 36px 32px;
  animation: breathe 6s ease-in-out infinite;
}
.hiw-card:nth-child(2) { animation-delay: 2s; }
.hiw-card:nth-child(3) { animation-delay: 4s; }
@keyframes breathe {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-3px) scale(1.006); }
}
.hiw-illo-wrap {
  position: relative;
  height: 220px;
  display: grid; place-items: center;
  margin-bottom: 8px;
}
.hiw-illo-wrap .halo {
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--fifa-red), var(--fifa-orange), var(--fifa-yellow),
    var(--fifa-lime), var(--fifa-teal), var(--fifa-blue),
    var(--fifa-purple), var(--fifa-magenta), var(--fifa-red));
  filter: blur(28px);
  opacity: 0.22;
  animation: haloSpin 50s linear infinite;
}
.hiw-illo-wrap img {
  position: relative;
  width: 210px; height: 210px;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
}
.hiw-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  color: #1a0e00;
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 14px -4px rgba(245,208,32,0.5);
}
.hiw-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--t1);
}
.hiw-title .tick { color: var(--gold); font-family: var(--font-mono); font-weight: 800; }
.hiw-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--t2);
  margin: 0 0 24px;
  flex: 1;
}
.hiw-btn {
  --h: 48px;
  font-size: 13px;
  padding: 0 20px;
  align-self: flex-start;
}

/* =========================================================
   PARI-MUTUEL
   ========================================================= */
.parimutuel {
  position: relative;
  background:
    radial-gradient(1000px 600px at 50% 50%, rgba(139,71,214,0.25), transparent 70%),
    linear-gradient(180deg, rgba(10,6,21,0.6), rgba(10,6,21,0.9));
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pm-header { text-align: center; max-width: 900px; margin: 0 auto 56px; }
.pm-header .eyebrow { justify-content: center; display: inline-flex; }
.pm-header .h2 { margin-top: 18px; }

.pm-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}

.pm-illo {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 460px;
  justify-self: center;
  width: 100%;
}
.pm-illo .paul-halo { inset: 10%; filter: blur(30px); opacity: 0.28; }
.pm-illo img { position: relative; width: 100%; height: 100%; object-fit: contain; z-index: 2; filter: drop-shadow(0 30px 50px rgba(139,71,214,0.4)); animation: orbFloat 7s ease-in-out infinite; }
.pm-jar-left, .pm-jar-right {
  position: absolute;
  bottom: 8%;
  width: 30%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  filter: blur(28px);
  z-index: 1;
}
.pm-jar-left  { left: -8%;  background: radial-gradient(circle, rgba(46,111,230,0.6), transparent 70%); }
.pm-jar-right { right: -8%; background: radial-gradient(circle, rgba(232,57,44,0.55), transparent 70%); }

.pm-demo { display: grid; gap: 24px; }
.pm-pool-size {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t3);
}
.pm-pool-size b { color: var(--gold); font-size: 22px; letter-spacing: 0.02em; }

.pm-bar {
  display: flex;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.pm-seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 14px;
  color: #0A0615;
  transition: flex 600ms cubic-bezier(.22,.61,.36,1);
  min-width: 32px;
}
.pm-seg.home { background: linear-gradient(180deg, #b5ec4f, var(--lime)); }
.pm-seg.draw { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.pm-seg.away { background: linear-gradient(180deg, #f25a4d, var(--coral)); }

.pm-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.btn-outcome {
  position: relative;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  color: var(--t1);
  transition: transform 180ms, border-color 180ms, box-shadow 240ms;
}
.btn-outcome::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 4px;
  border-radius: 4px;
  background: var(--accent, var(--t3));
}
.btn-outcome[data-pick="home"] { --accent: var(--lime); }
.btn-outcome[data-pick="draw"] { --accent: var(--gold); }
.btn-outcome[data-pick="away"] { --accent: var(--coral); }
.btn-outcome .ot-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
  padding-left: 10px;
}
.btn-outcome .ot-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--t1);
  padding-left: 10px;
}
.btn-outcome .ot-odds {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gold);
  padding-left: 10px;
}
.btn-outcome:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.18); }
.btn-outcome.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 20px 40px -16px var(--accent);
}

.pm-stake-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px;
  background: rgba(10,6,21,0.55);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.06);
}
.pm-stake-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 10px;
}
.pm-stake-val {
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 28px;
  color: var(--t1);
  margin-bottom: 14px;
}
.pm-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  outline: none;
}
.pm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  box-shadow: 0 0 0 4px rgba(245,208,32,0.18), 0 6px 14px -2px rgba(245,208,32,0.5);
  cursor: pointer;
  border: none;
}
.pm-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  cursor: pointer;
  border: none;
}
.pm-payout {
  text-align: right;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.pm-payout-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 6px;
}
.pm-payout-val {
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 36px;
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 0 24px rgba(245,208,32,0.35);
}
.pm-payout-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--t2);
  margin-top: 6px;
}

.pm-trust {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Pari-mutuel visual variants */
body[data-pm="jars"] .pm-bar { display: none; }
body[data-pm="jars"] .pm-jars {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  height: 220px;
}
body:not([data-pm="jars"]) .pm-jars { display: none; }

.pm-jar {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px 16px 22px 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px;
}
.pm-jar::before {
  content: "";
  position: absolute; top: 0; left: 10%; right: 10%;
  height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: 0 0 6px 6px;
}
.pm-jar-fill {
  background: var(--accent);
  border-radius: 12px;
  transition: height 600ms cubic-bezier(.22,.61,.36,1);
  box-shadow: inset 0 8px 16px rgba(255,255,255,0.15);
  position: relative;
}
.pm-jar-fill::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -4px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  filter: brightness(1.15);
  opacity: 0.9;
}
.pm-jar[data-team="home"] { --accent: var(--lime); }
.pm-jar[data-team="draw"] { --accent: var(--gold); }
.pm-jar[data-team="away"] { --accent: var(--coral); }
.pm-jar-label {
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--t1);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  letter-spacing: 0.1em;
}

/* Split-scales variant */
body[data-pm="scales"] .pm-bar { display: none; }
body[data-pm="scales"] .pm-scales {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px 0;
}
body:not([data-pm="scales"]) .pm-scales { display: none; }
.pm-scale {
  text-align: center;
}
.pm-scale-bar {
  width: 100%;
  height: 140px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px 8px 0 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: flex-end;
}
.pm-scale-fill {
  width: 100%;
  background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 100%);
  transition: height 600ms cubic-bezier(.22,.61,.36,1);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.3);
}
.pm-scale[data-team="home"] { --accent: var(--lime); --accent-hi: #c1ff6b; }
.pm-scale[data-team="draw"] { --accent: var(--gold); --accent-hi: var(--gold-hi); }
.pm-scale[data-team="away"] { --accent: var(--coral); --accent-hi: #ff6558; }
.pm-scale-base {
  height: 8px;
  background: var(--accent);
  border-radius: 0 0 4px 4px;
}
.pm-scale-pct {
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 22px;
  color: var(--t1);
  margin-top: 10px;
}
.pm-scale-team {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t3);
  margin-top: 4px;
}

/* =========================================================
   3D SOCCER / BETTING DECORATIONS
   ========================================================= */
.hero-deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.hero-deco.ball-1 { top: 14%; left: 2%; width: 110px; animation: decoFloat 9s ease-in-out infinite; }
.hero-deco.ball-2 { bottom: 22%; left: 38%; width: 70px; animation: decoFloat 11s ease-in-out infinite 1.2s; opacity: 0.7; }
.hero-deco.ticket  { top: 22%; left: -40px; width: 240px; transform: rotate(-12deg); animation: decoFloat 12s ease-in-out infinite 0.8s; }
.hero-deco.coin    { bottom: 20%; left: -20px; width: 120px; animation: coinSpin 14s linear infinite; }
.hero-deco.whistle { top: 30%; right: 2%; width: 90px; transform: rotate(18deg); animation: decoFloat 10s ease-in-out infinite 0.4s; opacity: 0.8; }
@keyframes decoFloat {
  0%,100% { transform: translateY(0) rotate(var(--r,0deg)); }
  50%     { transform: translateY(-18px) rotate(calc(var(--r,0deg) + 6deg)); }
}
@keyframes coinSpin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* Stadium-light radial accents */
.stadium-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(500px 200px at 12% 0%, rgba(245,208,32,0.12), transparent 70%),
    radial-gradient(500px 200px at 88% 0%, rgba(78,209,230,0.12), transparent 70%);
}

/* =========================================================
   HOST NATIONS SQUAD
   ========================================================= */
.squad {
  position: relative;
  padding: 128px 72px;
  background:
    radial-gradient(900px 500px at 50% 50%, rgba(46,111,230,0.22), transparent 70%),
    linear-gradient(180deg, rgba(10,6,21,0.8), rgba(10,6,21,0.95));
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.squad::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 80px);
  pointer-events: none;
}
.squad-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1560px;
  margin: 0 auto;
}
.squad-art {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 1000px;
  justify-self: center;
  width: 100%;
}
.squad-art .pitch-rings {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.12);
  animation: haloSpin 120s linear infinite;
}
.squad-art .pitch-rings.inner {
  inset: 18%;
  border-style: solid;
  border-color: rgba(245,208,32,0.2);
  animation-duration: 80s;
  animation-direction: reverse;
}
.squad-art .spotlight {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.2), transparent 60%),
    conic-gradient(from 0deg,
      var(--fifa-red), var(--fifa-orange), var(--fifa-yellow),
      var(--fifa-lime), var(--fifa-teal), var(--fifa-blue),
      var(--fifa-purple), var(--fifa-magenta), var(--fifa-red));
  filter: blur(50px);
  opacity: 0.38;
  animation: haloSpin 60s linear infinite;
}
.squad-art .squad-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,0.6));
  animation: orbFloat 7s ease-in-out infinite;
}
.squad-flag-chip {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(29,23,64,0.95), rgba(10,6,21,0.95));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--t1);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.6);
  z-index: 3;
}
.squad-flag-chip .flag { font-size: 20px; }
.squad-flag-chip .dot-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 10px var(--lime);
  animation: dotPulse 1.4s infinite;
}
.squad-flag-chip .stripe { width:3px; height:20px; border-radius:2px; }
.squad-chip-usa { top: 8%; left: -2%; }
.squad-chip-usa .stripe { background: #3B7BFF; }
.squad-chip-mex { top: 42%; right: -4%; }
.squad-chip-mex .stripe { background: #4AE89E; }
.squad-chip-can { bottom: 10%; left: 6%; }
.squad-chip-can .stripe { background: #FF3B5C; }

.squad-right h2 { margin-top: 18px; }
.squad-right .lead { margin: 24px 0 40px; }

.nation-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.nation-card {
  position: relative;
  padding: 18px 18px 18px 56px;
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  font-family: var(--font-body);
  color: var(--t1);
  cursor: pointer;
  transition: transform 200ms, border-color 200ms, box-shadow 280ms;
  overflow: hidden;
}
.nation-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--nc-accent);
}
.nation-card::after {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--nc-accent);
  opacity: 0.18;
  filter: blur(2px);
}
.nation-card:hover {
  transform: translateY(-4px);
  border-color: var(--nc-accent);
  box-shadow: 0 16px 40px -16px var(--nc-accent);
}
.nation-flag {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  z-index: 1;
}
.nc-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  display: flex; justify-content: space-between; align-items: center;
}
.nc-name .nc-pool {
  font-family: var(--font-mono); font-size: 11px; color: var(--t3);
  font-weight: 600; letter-spacing: 0.08em;
}
.nc-meta {
  display: flex; gap: 14px;
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--t2); letter-spacing: 0.06em;
}
.nc-meta .m-val { color: var(--nc-accent); font-weight: 700; }

.nation-card[data-n="usa"]    { --nc-accent: #3B7BFF; }
.nation-card[data-n="mex"]    { --nc-accent: #4AE89E; }
.nation-card[data-n="can"]    { --nc-accent: #FF3B5C; }
.nation-card[data-n="global"] { --nc-accent: var(--gold); }

.squad-cta-row { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

/* ---------- Floating odds chips on the squad image ---------- */
.bet-float-chip {
  position: absolute;
  z-index: 4;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(20,12,42,0.95), rgba(8,4,22,0.95));
  border: 1px solid rgba(245,208,32,0.45);
  border-radius: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 14px 28px -10px rgba(0,0,0,0.7),
    0 0 24px -8px rgba(245,208,32,0.4);
  backdrop-filter: blur(8px);
  animation: bfcBob 6s ease-in-out infinite;
}
.bet-float-chip .bfc-k {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--lime);
  letter-spacing: -0.02em;
  line-height: 1;
}
.bet-float-chip .bfc-v {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t3);
  margin-top: 4px;
}
.bet-float-odds { top: 22%; right: -4%; transform: rotate(3deg); }
.bet-float-conf { bottom: 18%; left: -2%;  transform: rotate(-3deg); animation-delay: 1.2s; }
@keyframes bfcBob {
  0%,100% { transform: translateY(0) rotate(var(--r,0deg)); }
  50%     { transform: translateY(-6px) rotate(var(--r,0deg)); }
}

/* ---------- Memey betting quote ---------- */
.bet-quote {
  position: relative;
  margin: 0 0 28px;
  padding: 18px 20px 18px 28px;
  border-left: 3px solid var(--gold);
  background:
    linear-gradient(90deg, rgba(245,208,32,0.06), transparent 70%);
  border-radius: 0 12px 12px 0;
  font-family: "Caveat", "Bradley Hand", "Marker Felt", cursive;
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.15;
  color: var(--t1);
}
.bet-quote em {
  font-style: italic;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(245,208,32,0.25);
}
.bet-quote .bq-mark {
  position: absolute;
  top: -16px; left: 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.45;
}
.bet-quote .bq-attr {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t3);
  font-weight: 500;
}

/* ---------- Track-record stats row ---------- */
.bet-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(20,12,42,0.7), rgba(10,6,28,0.85));
  border: 1px solid rgba(245,208,32,0.18);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.bs-cell {
  flex: 1;
  text-align: center;
}
.bs-v {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--gold);
}
.bs-vsm {
  font-size: 16px;
  font-weight: 700;
  color: var(--t3);
  letter-spacing: 0;
  margin-left: 1px;
}
.bs-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t3);
  margin-top: 4px;
}
.bs-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, rgba(245,208,32,0.35), transparent);
}

/* ---------- Bet cards (replaces nation cards) ---------- */
.nation-card {
  position: relative;
  padding: 18px 18px 44px;          /* extra bottom padding for the hover CTA */
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  font-family: var(--font-body);
  color: var(--t1);
  cursor: pointer;
  text-align: left;
  transition: transform 220ms, border-color 220ms, box-shadow 320ms, background 320ms;
  overflow: hidden;
}
.nation-card.is-pauls-pick {
  border-color: rgba(245,208,32,0.55);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(245,208,32,0.1), transparent 70%),
    linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
  box-shadow:
    inset 0 0 0 1px rgba(245,208,32,0.18),
    0 12px 30px -14px rgba(245,208,32,0.4);
}
/* "PAUL'S PICK" gold ribbon top-left */
.nc-paul-tag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  padding: 4px 9px;
  background: linear-gradient(180deg, #fff2a8 0%, #f5d020 50%, #c79008 100%);
  color: #2a1a04;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 4px 10px rgba(245,208,32,0.35);
}
/* Status pill (LIVE / TODAY / TMRW / OPEN POOL) — top right */
.nc-status {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nc-status-live  { background: rgba(255,60,80,0.12); border: 1px solid rgba(255,60,80,0.55); color: #ff6b78; }
.nc-status-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff4060; box-shadow: 0 0 8px #ff4060;
  animation: dotPulse 1.4s ease-in-out infinite;
}
.nc-status-today { background: rgba(74,232,158,0.10); border: 1px solid rgba(74,232,158,0.45); color: var(--lime); }
.nc-status-tmrw  { background: rgba(245,208,32,0.10); border: 1px solid rgba(245,208,32,0.45); color: var(--gold); }
.nc-status-open  { background: rgba(139,71,214,0.12); border: 1px solid rgba(139,71,214,0.55); color: #c399ff; }

/* Match row — flag + name vs. flag + name */
.nc-match {
  display: flex; align-items: center; gap: 10px;
  margin-top: 28px;
}
.nc-team {
  display: inline-flex; align-items: center; gap: 8px;
}
.nc-team-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--t1);
}
.nc-team .nation-flag {
  position: static;
  transform: none;
  font-size: 22px;
}
.nc-vs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t3);
  font-weight: 600;
}
.nc-away .nc-team-name { color: var(--t2); }

/* Confidence bar */
.nc-conf-row {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 10px;
}
.nc-conf-bar {
  flex: 1; height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.nc-conf-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--nc-accent), var(--gold));
  box-shadow: 0 0 8px var(--nc-accent);
}
.nc-conf-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.04em;
}

/* Meta row — picks · pool · odds */
.nc-meta {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--t3); letter-spacing: 0.06em;
}
.nc-meta .m-val { color: var(--t1); font-weight: 700; }
.nc-meta .nc-odds {
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(245,208,32,0.12);
  border: 1px solid rgba(245,208,32,0.35);
  border-radius: 6px;
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Hover "Tap to bet →" reveal — slides up from bottom */
.nc-bet-cta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 18px;
  background: linear-gradient(180deg, transparent, rgba(245,208,32,0.18));
  border-top: 1px solid rgba(245,208,32,0.32);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: right;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1.2);
}
.nation-card:hover {
  transform: translateY(-4px);
  border-color: var(--nc-accent);
  box-shadow: 0 16px 40px -16px var(--nc-accent);
}
.nation-card:hover .nc-bet-cta { transform: translateY(0); }
.nation-card.is-pauls-pick:hover {
  border-color: var(--gold);
  box-shadow: 0 18px 50px -18px rgba(245,208,32,0.55);
}
/* Override the older ::after circle blur — we no longer use it for the card */
.nation-card::after { display: none; }
.nation-card::before { /* keep accent stripe */ display: block; }

/* =========================================================
   FINAL CTA
   ========================================================= */

@media (max-width: 1100px) {
  .squad { padding: 96px 40px; }
  .squad-inner { grid-template-columns: 1fr; gap: 48px; }
  .nation-cards { grid-template-columns: 1fr 1fr; }
}
.final-cta {
  padding: 160px 72px 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(255,255,255,0.06);
  /* extra height so the selfie's top doesn't crowd the section above */
  min-height: 1060px;
}
.final-cta-inner {
  position: relative;
  z-index: 3;
  max-width: 1440px;
  margin: 0 auto;
}
.final-cta-copy {
  text-align: left;
  max-width: 620px;
  position: relative;
  z-index: 3;
}
.final-cta h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 8vw, 128px);
  letter-spacing: -0.035em;
  margin: 0 0 16px;
  line-height: 0.9;
}
.final-cta .lead { margin: 0 0 40px; max-width: 540px; }
.final-cta-row {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* the giant squad selfie — pinned to the very bottom-right of the section
   (and therefore the very bottom of the page). Tentacles touch the page edge. */
.final-cta-selfie {
  position: absolute;
  right: 0;
  bottom: -2px;                 /* small negative offset kills any sub-pixel gap */
  width: min(51vw, 1024px);
  height: auto;
  z-index: 2;
  display: block;
  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(0 32px 52px rgba(0,0,0,0.6))
    drop-shadow(0 0 70px rgba(139,71,214,0.26));
}

/* responsive */
@media (max-width: 1100px) {
  .final-cta { padding: 88px 32px 0; min-height: 720px; }
  .final-cta-copy { max-width: none; text-align: center; margin: 0 auto; }
  .final-cta .lead { margin: 0 auto 32px; }
  .final-cta-row { justify-content: center; }
  .final-cta-selfie { position: relative; right: auto; bottom: 0; width: min(86vw, 560px); margin: 32px auto -1px; }
}

/* =========================================================
   PAUL IS WATCHING
   ========================================================= */
.peek-tentacle {
  position: fixed;
  right: 0;
  bottom: 15%;
  z-index: 60;
  transform: translateX(100%);
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.peek-tentacle.show { transform: translateX(0); pointer-events: auto; }
.peek-tentacle .tent-body {
  width: 260px;
  padding: 18px 20px 18px 52px;
  background: linear-gradient(180deg, rgba(29,23,64,0.96), rgba(10,6,21,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  border-right: none;
  border-radius: 20px 0 0 20px;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.6);
  position: relative;
}
.peek-tentacle .tent-body::before {
  content: "🐙";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  filter: drop-shadow(0 2px 6px rgba(139,71,214,0.6));
}
.peek-tentacle p {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--t1);
  line-height: 1.3;
}
.peek-tentacle .tent-actions { display: flex; gap: 8px; align-items: center; }
.peek-tentacle .btn-3d { --h: 36px; padding: 0 14px; font-size: 11px; border-radius: 10px; }
.peek-tentacle .tent-dismiss {
  background: none;
  border: none;
  color: var(--t3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.peek-tentacle .tent-dismiss:hover { color: var(--t1); }

/* =========================================================
   TWEAKS PANEL
   ========================================================= */
.tweaks {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 70;
  width: 320px;
  max-height: 72vh;
  overflow: auto;
  background: linear-gradient(180deg, rgba(29,23,64,0.95), rgba(10,6,21,0.98));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 20px;
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px -16px rgba(0,0,0,0.7);
  color: var(--t1);
  display: none;
}
.tweaks.open { display: block; }
.tweaks h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tweaks h3 button {
  background: none; border: none; color: var(--t3); font-size: 18px; cursor: pointer;
}
.tweak-group { margin-bottom: 14px; }
.tweak-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 8px;
}
.tweak-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.tweak-opts button {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--t2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms;
  letter-spacing: 0.04em;
}
.tweak-opts button:hover { background: rgba(255,255,255,0.08); color: var(--t1); }
.tweak-opts button.active {
  background: var(--gold);
  color: #1a0e00;
  border-color: var(--gold);
  font-weight: 700;
}
.tweak-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--t1);
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* floating toggle button when closed */
.tweaks-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 69;
  height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(29,23,64,0.92), rgba(10,6,21,0.92));
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--t1);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.5);
  display: flex; align-items: center; gap: 8px;
}
.tweaks-toggle:hover { border-color: var(--gold); color: var(--gold); }
.tweaks.open ~ .tweaks-toggle { display: none; }

/* =========================================================
   STATE VARIANTS
   ========================================================= */
body[data-state="prelaunch"] .state-badge-prelaunch,
body[data-state="live"]      .state-badge-live,
body[data-state="oracle-offline"] .state-badge-offline {
  display: inline-flex;
}
.state-badge-prelaunch, .state-badge-live, .state-badge-offline { display: none; }

body[data-state="oracle-offline"] .nmc-conf-fill { background: linear-gradient(90deg, #6a5a1a, #8a7420); }
body[data-state="oracle-offline"] .paul-halo    { opacity: 0.04; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .hero { padding: 72px 40px 0; }
  .countdown { margin: 40px -40px 0; padding: 0 40px; }
  .section { padding: 96px 40px; }
  .hero-split { grid-template-columns: 1fr; gap: 40px; }
  .oracle { grid-template-columns: 1fr; gap: 40px; }
  .hiw-grid { grid-template-columns: 1fr; }
  .pm-inner { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 640px) {
  .hero-h1 { font-size: clamp(56px, 14vw, 72px); }
  .countdown-digits { font-size: 48px; }
  .pm-stake-row { grid-template-columns: 1fr; }
  .pm-payout { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0 0; text-align: left; }
  .topnav { padding: 12px 16px; }
  .topnav-inner { padding: 0 16px; height: 72px; }
  .orb-wrap { width: 84px; height: 84px; }
  .hero { padding: 56px 20px 0; }
  .section { padding: 72px 20px; }
  .countdown { margin: 32px -20px 0; padding: 0 20px; height: 120px; }
  .trust-strip { gap: 14px; }
}

/* =========================================================
   SCROLL TENTACLES — animated SVG tentacles draping across page
   ========================================================= */
.scroll-tentacles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
  opacity: 0.42;
}

/* =========================================================
   SECTION DIVIDER  ·  hairline + diamond glyph + soft halo
   Used between sections to give clean separation/transition
   ========================================================= */
.section-divider {
  position: relative;
  height: 1px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 5;
  pointer-events: none;
}
/* large soft halo behind the line that bleeds into adjacent sections */
.sd-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 70vw);
  height: 240px;
  pointer-events: none;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(245,208,32,0.07), transparent 70%);
  z-index: -1;
}
.sd-line {
  width: min(280px, 24vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,208,32,0.5), rgba(245,208,32,0.5), transparent);
}
.sd-line-l {
  background: linear-gradient(90deg, transparent, rgba(245,208,32,0.5));
}
.sd-line-r {
  background: linear-gradient(270deg, transparent, rgba(245,208,32,0.5));
}
.sd-glyph {
  width: 9px;
  height: 9px;
  background: linear-gradient(135deg, #fff2a8 0%, #f5d020 50%, #b07a10 100%);
  transform: rotate(45deg);
  box-shadow:
    0 0 14px rgba(245,208,32,0.7),
    0 0 0 1px rgba(245,208,32,0.35);
  animation: sdSpin 14s linear infinite;
  flex: 0 0 auto;
}
@keyframes sdSpin {
  0%   { transform: rotate(45deg); }
  100% { transform: rotate(405deg); }
}
.scroll-tentacles svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* =========================================================
   HOW TO BUY  ·  "Paul will guide you"
   ========================================================= */
.how-to-buy {
  position: relative;
  padding: 96px 56px 96px;
  overflow: hidden;
  isolation: isolate;
  z-index: 2;
}
/* full-bleed section background — fills the entire section width */
.htb-panel {
  position: absolute;
  inset: 0;
  background:
    /* magenta/pink ambient on the right */
    radial-gradient(50% 70% at 82% 50%, rgba(214,51,163,0.20), transparent 65%),
    /* purple ambient on the left */
    radial-gradient(45% 70% at 18% 50%, rgba(120,60,200,0.20), transparent 65%),
    /* dark base gradient */
    linear-gradient(180deg, rgba(20,12,42,0) 0%, rgba(20,12,42,0.55) 18%, rgba(14,8,32,0.85) 50%, rgba(20,12,42,0.55) 82%, rgba(20,12,42,0) 100%);
  z-index: 0;
  pointer-events: none;
}
/* faint architectural grid — fades softly toward all edges so it never butts hard */
.htb-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,208,32,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,208,32,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000 30%, transparent 95%);
          mask-image: radial-gradient(60% 70% at 50% 50%, #000 30%, transparent 95%);
  pointer-events: none;
}

.htb-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  align-items: center;
}

/* LEFT: hero art with floating bills + receipt */
.htb-art {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.htb-img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 32px 36px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(139,71,214,0.18));
  animation: orbFloat 6s ease-in-out infinite;
}
/* graffiti dollar tags */
.htb-bill {
  position: absolute;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 40px;
  letter-spacing: -0.03em;
  color: #b3ff52;
  text-shadow:
    0 0 18px rgba(140,255,80,0.55),
    0 0 4px rgba(0,0,0,0.6);
  -webkit-text-stroke: 1px rgba(0,0,0,0.35);
  transform: rotate(-8deg);
  pointer-events: none;
  animation: htbBob 5s ease-in-out infinite;
}
.htb-bill-1   { top: 12%;  left: 4%;   font-size: 36px;  animation-delay: 0.1s; }
.htb-bill-10  { top: 22%;  left: 52%;  font-size: 48px;  animation-delay: 0.6s; transform: rotate(8deg); }
.htb-bill-100 { top: 58%;  left: -2%;  font-size: 56px;  animation-delay: 1.2s; transform: rotate(-12deg); }
@keyframes htbBob {
  0%,100% { transform: var(--r, rotate(-8deg)) translateY(0); }
  50%     { transform: var(--r, rotate(-8deg)) translateY(-8px); }
}

/* tear-edge receipt at the bottom */
.htb-receipt {
  position: absolute;
  bottom: 4%;
  left: 22%;
  z-index: 4;
  width: 240px;
  padding: 14px 16px 14px;
  background: #f7f4ea;
  color: #1a1430;
  border-radius: 4px;
  transform: rotate(-3deg);
  box-shadow:
    0 18px 30px -8px rgba(0,0,0,0.5),
    0 4px 10px rgba(0,0,0,0.3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* perforated tape on top */
.htb-receipt::before {
  content: "";
  position: absolute;
  top: -10px; left: -3px; right: -3px;
  height: 14px;
  background:
    repeating-linear-gradient(135deg,
      #f5d020 0 10px,
      #1a1430 10px 20px);
  border-radius: 3px;
  transform: rotate(-1deg);
}
.htb-receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(26,20,48,0.22);
  font-weight: 700;
}
.htb-receipt-row:last-child { border-bottom: none; }
.htb-r-k { color: #1a1430; opacity: 0.7; }
.htb-r-v { color: #1a1430; font-weight: 800; letter-spacing: 0.04em; }
.htb-r-ok { color: #2a8a3e; font-weight: 800; }

/* RIGHT: copy + steps */
.htb-copy { position: relative; z-index: 2; }
.htb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 18px;
}
.htb-eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #b3ff52;
  box-shadow: 0 0 10px rgba(140,255,80,0.7);
  animation: tkBlink 1.4s ease-in-out infinite;
}
@keyframes tkBlink { 0%,60%,100% { opacity: 1; } 30% { opacity: 0.25; } }

.htb-h2 {
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.htb-strike {
  display: inline;
  font-style: italic;
  background: linear-gradient(180deg, #fff2a8 0%, #f5d020 50%, #b07a10 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  text-decoration: line-through;
  text-decoration-color: #f5d020;
  text-decoration-thickness: 4px;
}
.htb-lead {
  margin: 18px 0 28px;
  color: var(--t3);
  font-size: 16px;
}

.htb-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.htb-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 18px 18px 16px;
  background: rgba(20,14,42,0.62);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  transition: border-color 220ms, transform 220ms;
}
.htb-step:hover {
  border-color: rgba(245,208,32,0.4);
  transform: translateY(-2px);
}
.htb-step-num {
  width: 36px; height: 36px;
  display: flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff2a8 0%, #f5d020 50%, #c79008 100%);
  color: #2a1a04;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,0.18),
    inset 0 2px 0 rgba(255,255,255,0.45),
    0 4px 10px rgba(245,208,32,0.3);
}
.htb-step-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.htb-step-icon {
  font-size: 16px;
  filter: grayscale(0);
  opacity: 0.95;
}
.htb-step-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--t1);
  letter-spacing: -0.01em;
}
.htb-step-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.42;
  color: var(--t3);
}

.htb-ctas {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.htb-cta {
  appearance: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  padding: 16px 26px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 200ms, box-shadow 200ms, filter 200ms;
}
.htb-cta-buy {
  background: linear-gradient(180deg, #ff7ad6 0%, #d633a3 50%, #911771 100%);
  color: #fff;
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,0.25),
    inset 0 2px 0 rgba(255,255,255,0.35),
    0 14px 26px -10px rgba(214,51,163,0.6);
}
.htb-cta-buy:hover { transform: translateY(-2px); filter: brightness(1.08); }
.htb-cta-chart {
  background: rgba(20,14,42,0.6);
  color: var(--gold);
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 0 rgba(245,208,32,0.0);
}
.htb-cta-chart:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(245,208,32,0.35);
  background: rgba(245,208,32,0.06);
}
.htb-arrow { font-weight: 900; }

.htb-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--t3);
  flex-wrap: wrap;
}
.htb-foot-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(245,208,32,0.5);
  display: inline-block;
}

/* responsive */
@media (max-width: 1100px) {
  .htb-grid { grid-template-columns: 1fr; gap: 32px; }
  .htb-art { min-height: 480px; }
  .how-to-buy { padding: 80px 32px; }
}
@media (max-width: 640px) {
  .htb-steps { grid-template-columns: 1fr; }
  .htb-receipt { left: 50%; transform: rotate(-3deg) translateX(-50%); }
}

/* =========================================================
   TOKENOMICS  ·  "painfully boring"
   ========================================================= */
.tokenomics {
  position: relative;
  padding: 96px 56px 96px;
  overflow: hidden;
  isolation: isolate;
  z-index: 2;
}
/* full-bleed gold-themed section background */
.tk-panel {
  position: absolute;
  inset: 0;
  background:
    /* warm gold ambient on the right (under the squad) */
    radial-gradient(50% 70% at 78% 50%, rgba(245,180,40,0.16), transparent 65%),
    /* deeper amber ambient on the left (under the headline) */
    radial-gradient(50% 70% at 22% 50%, rgba(245,140,32,0.12), transparent 65%),
    /* dark base gradient — fades softly into neighbors */
    linear-gradient(180deg, rgba(20,12,42,0) 0%, rgba(20,12,42,0.55) 18%, rgba(14,8,28,0.85) 50%, rgba(20,12,42,0.55) 82%, rgba(20,12,42,0) 100%);
  z-index: 0;
  pointer-events: none;
}
.tk-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,208,32,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,208,32,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000 30%, transparent 95%);
          mask-image: radial-gradient(60% 70% at 50% 50%, #000 30%, transparent 95%);
  pointer-events: none;
}

.tk-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  align-items: center;
}

/* LEFT: copy + contract bar */
.tk-copy { position: relative; z-index: 2; }
.tk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 18px;
}
.tk-eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #b3ff52;
  box-shadow: 0 0 10px rgba(140,255,80,0.7);
  animation: tkBlink 1.4s ease-in-out infinite;
}
.tk-h2 {
  font-size: clamp(44px, 5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.tk-italic-gold {
  display: inline;
  font-style: italic;
  background: linear-gradient(180deg, #fff2a8 0%, #f5d020 50%, #b07a10 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tk-lead {
  margin: 18px 0 8px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--t3);
  max-width: 520px;
}
.tk-comment {
  margin: 0 0 28px;
  font-family: var(--font-mono);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--gold);
}
.tk-comment-arrow {
  color: rgba(245,208,32,0.6);
  margin-right: 6px;
}

/* contract bar */
.tk-contract-bar {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 18px;
  background: rgba(8,5,22,0.7);
  border: 1px solid rgba(245,208,32,0.2);
  border-radius: 14px;
  font-family: var(--font-mono);
  max-width: 100%;
  flex-wrap: wrap;
}
.tk-contract-label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--t3);
}
.tk-contract-addr {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--t1);
  background: transparent;
  flex: 1;
  min-width: 140px;
}
.tk-contract-copy {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 8px 14px;
  background: linear-gradient(180deg, #fff2a8 0%, #f5d020 50%, #c79008 100%);
  color: #2a1a04;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 8px;
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,0.2),
    inset 0 2px 0 rgba(255,255,255,0.4);
  transition: filter 180ms, transform 180ms;
}
.tk-contract-copy:hover { transform: translateY(-1px); filter: brightness(1.05); }
.tk-contract-scan {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t2);
  text-decoration: none;
  padding: 8px 4px;
  transition: color 180ms;
}
.tk-contract-scan:hover { color: var(--gold); }

/* RIGHT: squad + floating tags */
.tk-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
}
.tk-art-img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 32px 36px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(245,140,32,0.16));
  animation: orbFloat 6s ease-in-out infinite;
}

.tk-tag {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: rgba(8,5,22,0.85);
  border: 1px solid rgba(245,208,32,0.4);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  box-shadow: 0 8px 20px -12px rgba(0,0,0,0.6);
  white-space: nowrap;
}
.tk-tag-tax { top: 6%;   right: -2%;  transform: rotate(4deg); }
.tk-tag-lp  { bottom: 18%; left: -4%;  transform: rotate(-3deg); }
.tk-tag-vc  { bottom: 6%;  right: 4%;  transform: rotate(3deg); }

/* responsive */
@media (max-width: 1100px) {
  .tk-grid { grid-template-columns: 1fr; gap: 32px; }
  .tokenomics { padding: 80px 32px; }
  .tk-art { min-height: 380px; }
}
@media (max-width: 600px) {
  .tk-tag { font-size: 10px; padding: 6px 10px; letter-spacing: 0.18em; }
}

/* Hero atmosphere — stadium light-sweep */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 80% 30%, rgba(245,208,32,0.10), transparent 65%),
    radial-gradient(600px 300px at 15% 70%, rgba(46,111,230,0.12), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 2; }

/* Hero confidence chip — bigger and animated */
.paul-chip-conf .chip-gold {
  font-size: 14px;
  height: 38px;
  padding: 0 18px;
}

/* Hero ledger card — small "live" indicator on hero */
.hero-ledger {
  position: absolute;
  bottom: 14%;
  right: -10px;
  width: 240px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(29,23,64,0.95), rgba(10,6,21,0.95));
  border: 1px solid rgba(245,208,32,0.25);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.6), 0 0 24px -8px rgba(245,208,32,0.4);
  font-family: var(--font-mono);
  z-index: 5;
  transform: rotate(2deg);
}
.hero-ledger .hl-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 6px;
}
.hero-ledger .hl-streak {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px;
}
.hero-ledger .hl-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  color: var(--gold);
  line-height: 1;
}
.hero-ledger .hl-sub { font-size: 11px; color: var(--t2); }
.hero-ledger .hl-row {
  display: flex;
  gap: 4px;
  font-size: 12px;
}
.hero-ledger .hl-w { color: var(--lime); font-weight: 700; }
.hero-ledger .hl-l { color: var(--coral); font-weight: 700; opacity: 0.4; }
@media (max-width: 1100px) { .hero-ledger { display: none; } }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* =========================================================
   STADIUM JUMBOTRON — video as massive scoreboard
   ========================================================= */
.jumbotron {
  position: relative;
  padding: 160px 56px 56px;      /* slim bottom padding — props sit on a clean floor */
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 50% 50%, rgba(46,111,230,0.18), transparent 70%),
    linear-gradient(180deg, #050310 0%, #0a0418 100%);
}
/* (removed dark stadium-tier gradient strip — it was clouding the foreground props) */
.jumbo-header {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 56px;
  position: relative;
  z-index: 2;
}
.jumbo-frame {
  position: relative;
  max-width: 1380px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  background: #000;
  /* steel scoreboard chassis */
  padding: 28px;
  background:
    linear-gradient(180deg, #1a1530 0%, #0d0822 100%);
  border: 1px solid rgba(245,208,32,0.35);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.08),
    inset 0 -3px 0 rgba(0,0,0,0.6),
    0 40px 80px -20px rgba(0,0,0,0.8),
    0 0 80px -20px rgba(46,111,230,0.4);
}
.jumbo-frame::before, .jumbo-frame::after {
  /* corner bolts */
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6b6280, #1a1428);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.6);
}
.jumbo-frame::before { top: 8px; left: 8px; }
.jumbo-frame::after { top: 8px; right: 8px; }
.jumbo-bolt-bl, .jumbo-bolt-br {
  position: absolute;
  bottom: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6b6280, #1a1428);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.6);
}
.jumbo-bolt-bl { left: 8px; }
.jumbo-bolt-br { right: 8px; }

.jumbo-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

/* === Foreground props (couch + Paul-lights) that sit IN FRONT of the
       stat strip, anchored to the section so they overflow naturally.
       The section provides positioning context. */
.jumbotron { position: relative; }
.jumbo-frame { overflow: visible; }

/* === Floor row: couch + Paul-rig sit BELOW the cards on a clean floor.
       They flow naturally after the stat strip, no overlap with anything. */
.jumbo-floor {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1380px;
  margin: 36px auto 0;
  padding: 0 8px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.jumbo-floor img { display: block; height: auto; }
.jumbo-couch {
  width: clamp(300px, 32vw, 480px);
  filter:
    drop-shadow(0 24px 22px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 40px rgba(0, 0, 0, 0.4));
  animation: jumboFloat 7s ease-in-out infinite;
}
.jumbo-paulrig {
  width: clamp(280px, 30vw, 440px);
  filter:
    drop-shadow(0 24px 22px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 40px rgba(245, 208, 32, 0.18));
  animation: jumboFloat 6s ease-in-out infinite reverse;
}
@keyframes jumboFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(0.4deg); }
}

@media (max-width: 1100px) {
  .jumbo-couch   { width: clamp(220px, 28vw, 340px); }
  .jumbo-paulrig { width: clamp(200px, 26vw, 320px); }
}
@media (max-width: 720px) {
  .jumbo-floor   { gap: 8px; padding: 0; }
  .jumbo-couch   { width: clamp(140px, 38vw, 200px); }
  .jumbo-paulrig { width: clamp(130px, 34vw, 180px); }
}
.jumbo-screen video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* CRT scanlines + RGB pixel grid overlay */
.jumbo-screen::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.18) 0 1px,
      transparent 1px 3px),
    repeating-linear-gradient(90deg,
      rgba(255,0,0,0.04) 0 1px,
      rgba(0,255,0,0.04) 1px 2px,
      rgba(0,0,255,0.04) 2px 3px);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 3;
}
.jumbo-screen::after {
  /* glass curve glare */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% -20%, rgba(255,255,255,0.12), transparent 50%),
    radial-gradient(ellipse at 50% 120%, rgba(0,0,0,0.5), transparent 50%);
  pointer-events: none;
  z-index: 4;
}
/* Live scoreboard chrome — corner overlays */
/* === broadcast-style red LIVE bar across the top of the jumbo-screen === */
.jumbo-live-bar {
  position: absolute;
  top: 14px; left: 14px; right: 14px;
  height: 36px;
  z-index: 5;
  display: flex;
  align-items: stretch;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #fff;
  background:
    linear-gradient(180deg,
      #d2261d 0%,
      #b41c14 55%,
      #8a120c 100%);
  border: 1px solid rgba(0,0,0,0.45);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 8px 22px rgba(180,28,20,0.5),
    0 2px 0 rgba(0,0,0,0.4);
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
.jumbo-live-bar::after {
  /* faint scanline sheen so it reads as a screen overlay */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.7;
}
.jumbo-live-bar .jlb-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 14px;
  background: linear-gradient(180deg, #2a0707 0%, #160202 100%);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.22em;
  border-right: 1px solid rgba(0,0,0,0.5);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.06);
  flex-shrink: 0;
  z-index: 2;
}
.jumbo-live-bar .jlb-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff4040;
  box-shadow: 0 0 8px #ff4040, 0 0 14px rgba(255,64,64,0.5);
  animation: jlb-blink 1.1s infinite ease-in-out;
}
@keyframes jlb-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.jumbo-live-bar .jlb-marquee {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.jumbo-live-bar .jlb-track {
  display: inline-flex;
  white-space: nowrap;
  gap: 36px;
  padding-left: 36px;
  animation: jlb-scroll 38s linear infinite;
}
.jumbo-live-bar .jlb-item {
  display: inline-block;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
@keyframes jlb-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.jumbo-live-bar .jlb-clock {
  display: inline-flex; align-items: center;
  padding: 0 16px;
  background: linear-gradient(180deg, #2a0707 0%, #160202 100%);
  color: #ffd0d0;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid rgba(0,0,0,0.5);
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.06);
  flex-shrink: 0;
  z-index: 2;
}

.jumbo-chrome {
  position: absolute;
  z-index: 5;
  font-family: var(--font-mono);
  pointer-events: none;
}
.jumbo-chrome-tl {
  top: 16px; left: 16px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(232,57,44,0.5);
  border-radius: 10px;
  padding: 6px 12px;
}
.jumbo-chrome-tl .live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 12px var(--coral);
  animation: livePulse 1.1s ease-in-out infinite;
}
.jumbo-chrome-tl .live-text {
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; color: #fff;
}
@keyframes livePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.jumbo-chrome-tr {
  top: 50px; right: 16px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245,208,32,0.4);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--gold); font-weight: 700;
}

.jumbo-chrome-bl {
  bottom: 16px; left: 16px;
  display: flex; gap: 8px;
  align-items: center;
}
.jumbo-score-box {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 8px 14px;
}
.jumbo-flag { font-size: 18px; }
.jumbo-team { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: #fff; }
.jumbo-num { font-size: 22px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }

.jumbo-chrome-br {
  bottom: 16px; right: 16px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(159,214,52,0.4);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--lime);
  font-weight: 700;
}

/* Side LED ribbons */
.jumbo-led {
  position: absolute;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.jumbo-led-left {
  left: -12px;
  top: 50%;
  transform: rotate(-90deg) translateX(50%);
  transform-origin: left center;
  background: rgba(0,0,0,0.7);
  padding: 4px 12px;
  border-radius: 6px;
}

/* =========================================================
   STADIUM JUMBOTRON STAT STRIP — compact LED tabs attached to the screen
   ========================================================= */
.jumbo-statbar-wrap {
  position: relative;
  margin: -2px auto 0;        /* attach directly to the bottom of the frame */
  max-width: 1380px;
  perspective: 1600px;
  z-index: 4;
}
.jumbo-statbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  transform: rotateX(0deg);
  transform-origin: top center;
}

/* Each card = a compact LED tab attached to the screen,
   sharper top corners (because it abuts the frame) than bottom. */
.jumbo-stat {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, #3a2670 0%, #251748 50%, #14092e 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-top: none;
  border-radius: 0 0 14px 14px;     /* squared at top, rounded at bottom */
  padding: 6px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 -1px 0 rgba(0,0,0,0.55) inset,
    0 10px 22px rgba(0,0,0,0.55),
    0 28px 38px -14px rgba(0,0,0,0.6);
}
/* hide the corner screws on the now-attached top edge */
.jumbo-stat .js-screw.tl,
.jumbo-stat .js-screw.tr { display: none; }

/* Screws in the four corners of the bezel */
.jumbo-stat .js-screw {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7e8295 0%, #2c2e44 55%, #0a0b15 100%);
  box-shadow:
    inset 0 0 0 0.5px rgba(255,255,255,0.18),
    0 1px 0 rgba(0,0,0,0.65);
  z-index: 3;
}
.jumbo-stat .js-screw::after {
  content: "";
  position: absolute; inset: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 47%, rgba(0,0,0,0.7) 47% 53%, transparent 53%);
}
.jumbo-stat .js-screw.tl { top: 6px; left: 6px; }
.jumbo-stat .js-screw.tr { top: 6px; right: 6px; }
.jumbo-stat .js-screw.bl { bottom: 6px; left: 6px; }
.jumbo-stat .js-screw.br { bottom: 6px; right: 6px; }

/* Status LED (pulsing) — green default, red on coral card */
.jumbo-stat .js-led {
  position: absolute;
  top: 12px; right: 26px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime, #a3ff5e);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 0 8px rgba(163,255,94,0.95),
    0 0 16px rgba(163,255,94,0.4);
  z-index: 3;
  animation: js-led-blink 2.4s infinite ease-in-out;
}
.jumbo-stat .js-led.red {
  background: var(--coral, #ff5757);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 0 8px rgba(255,87,87,0.95),
    0 0 16px rgba(255,87,87,0.4);
}
@keyframes js-led-blink {
  0%, 78%, 100% { opacity: 1; }
  82% { opacity: 0.25; }
  88% { opacity: 1; }
}

/* The actual "screen" inset inside the bezel — compact */
.jumbo-stat .js-screen {
  position: relative;
  border-radius: 0 0 9px 9px;
  padding: 12px 14px 11px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(180, 130, 255, 0.18) 0%, transparent 65%),
    linear-gradient(180deg, #1a1138 0%, #0e0820 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    inset 0 0 22px rgba(0,0,0,0.5);
  overflow: hidden;
  font-family: var(--font-mono);
  text-align: center;
}
/* faint dot-matrix LED grid */
.jumbo-stat .js-screen::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 4px 4px;
  pointer-events: none;
  opacity: 0.6;
}
/* CRT scanlines */
.jumbo-stat .js-scan {
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.03) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.7;
}

.jumbo-stat .lbl {
  position: relative;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: rgba(220, 200, 255, 0.62);
  text-transform: uppercase;
  z-index: 1;
}
.jumbo-stat .val {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.005em;
  line-height: 1.04;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
.jumbo-stat .quip {
  position: relative;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: rgba(220, 200, 255, 0.55);
  margin-top: 4px;
  font-style: italic;
  z-index: 1;
}
/* override the gold tone's bigger value size since the IMMACULATE word is wide */
.jumbo-stat.tone-gold .val { font-size: 16px; }

/* === per-tone color treatments (LED + value glow + screen halo) === */
.jumbo-stat.tone-lime .js-led {
  background: var(--lime, #a3ff5e);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 8px rgba(163,255,94,0.95), 0 0 16px rgba(163,255,94,0.4);
}
.jumbo-stat.tone-lime .val { color: var(--lime, #a3ff5e); text-shadow: 0 0 1px rgba(163,255,94,0.7), 0 0 14px rgba(163,255,94,0.5), 0 0 28px rgba(163,255,94,0.22); }
.jumbo-stat.tone-lime .js-screen { background: radial-gradient(ellipse at 50% 0%, rgba(163,255,94,0.18) 0%, transparent 65%), linear-gradient(180deg, #122a18 0%, #0a1a10 100%); }

.jumbo-stat.tone-magenta .js-led {
  background: #ff4fd0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 8px rgba(255,79,208,0.95), 0 0 16px rgba(255,79,208,0.4);
}
.jumbo-stat.tone-magenta .val { color: #ff7be0; text-shadow: 0 0 1px rgba(255,123,224,0.7), 0 0 14px rgba(255,79,208,0.5), 0 0 28px rgba(255,79,208,0.22); }
.jumbo-stat.tone-magenta .js-screen { background: radial-gradient(ellipse at 50% 0%, rgba(255,79,208,0.20) 0%, transparent 65%), linear-gradient(180deg, #2a103a 0%, #160820 100%); }

.jumbo-stat.tone-coral .js-led {
  background: var(--coral, #ff5757);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 8px rgba(255,87,87,0.95), 0 0 16px rgba(255,87,87,0.4);
}
.jumbo-stat.tone-coral .val { color: #ff8a8a; text-shadow: 0 0 1px rgba(255,138,138,0.7), 0 0 14px rgba(255,87,87,0.5), 0 0 28px rgba(255,87,87,0.22); }
.jumbo-stat.tone-coral .js-screen { background: radial-gradient(ellipse at 50% 0%, rgba(255,87,87,0.20) 0%, transparent 65%), linear-gradient(180deg, #2a1018 0%, #18080c 100%); }

.jumbo-stat.tone-gold .js-led {
  background: var(--gold, #f5d020);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 8px rgba(245,208,32,0.95), 0 0 16px rgba(245,208,32,0.4);
}
.jumbo-stat.tone-gold .val { color: var(--gold, #f5d020); font-size: 22px; text-shadow: 0 0 1px rgba(245,208,32,0.7), 0 0 14px rgba(245,208,32,0.55), 0 0 28px rgba(245,208,32,0.25); }
.jumbo-stat.tone-gold .js-screen { background: radial-gradient(ellipse at 50% 0%, rgba(245,208,32,0.18) 0%, transparent 65%), linear-gradient(180deg, #2c2410 0%, #18120a 100%); }

/* status LED stays animated regardless of tone */
.jumbo-stat .js-led { animation: js-led-blink 2.4s infinite ease-in-out; }

@media (max-width: 900px) {
  .jumbotron { padding: 80px 20px 56px; }
  .jumbo-frame { padding: 14px; }
  .jumbo-statbar { grid-template-columns: repeat(2, 1fr); transform: none; }
  .jumbo-led { display: none; }
}

/* =========================================================
   ORACLE DATA FEED — live terminal-style readout
   ========================================================= */
.oracle-feed {
  position: relative;
  padding: 128px 56px;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(46,111,230,0.15), transparent 70%),
    linear-gradient(180deg, var(--bg-deep), #0c0820);
}
.feed-grid {
  max-width: 1380px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.feed-terminal {
  background: linear-gradient(180deg, #06040f, #0a0820);
  border: 1px solid rgba(46,111,230,0.4);
  border-radius: 18px;
  overflow: hidden;
  font-family: var(--font-mono);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 24px 48px -16px rgba(0,0,0,0.6),
    0 0 40px -10px rgba(46,111,230,0.3);
}
.feed-term-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--t2);
  text-transform: uppercase;
}
.feed-term-bar .dots { display: flex; gap: 6px; }
.feed-term-bar .dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.feed-term-bar .dot.r { background: #ff5f56; }
.feed-term-bar .dot.y { background: #ffbd2e; }
.feed-term-bar .dot.g { background: #27c93f; }
.feed-term-body {
  padding: 18px 20px;
  height: 360px;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.7;
  position: relative;
}
.feed-line {
  display: flex;
  gap: 12px;
  white-space: nowrap;
  animation: feedAppear 400ms cubic-bezier(.22,.61,.36,1) backwards;
}
@keyframes feedAppear {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.feed-time { color: var(--t3); }
.feed-tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.feed-tag.info  { background: rgba(46,111,230,0.2); color: #6da6ff; }
.feed-tag.ok    { background: rgba(159,214,52,0.18); color: var(--lime); }
.feed-tag.warn  { background: rgba(255,122,31,0.18); color: var(--fifa-orange); }
.feed-tag.err   { background: rgba(232,57,44,0.18); color: var(--coral); }
.feed-tag.bet   { background: rgba(245,208,32,0.18); color: var(--gold); }
.feed-msg { color: var(--t1); }
.feed-msg .hex { color: var(--fifa-purple); }
.feed-msg .num { color: var(--gold); font-weight: 700; }

.feed-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--lime);
  vertical-align: middle;
  animation: cursorBlink 1s steps(2) infinite;
}
@keyframes cursorBlink { 50% { opacity: 0; } }

/* Oracle confidence gauge */
.feed-gauge {
  background: linear-gradient(180deg, rgba(29,23,64,0.85), rgba(10,6,21,0.95));
  border: 1px solid rgba(245,208,32,0.25);
  border-radius: 18px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.gauge-svg {
  width: 100%;
  height: 280px;
  display: block;
}
.gauge-readout {
  display: flex;
  justify-content: space-around;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono);
}
.gauge-stat .lbl {
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--t3); text-transform: uppercase;
}
.gauge-stat .val {
  font-family: var(--font-display); font-weight: 900;
  font-size: 24px; color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* Block height row */
.feed-blockrow {
  margin-top: 24px;
  display: flex; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t2);
  letter-spacing: 0.1em;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(255,255,255,0.04);
}
.feed-blockrow .k { color: var(--t3); }
.feed-blockrow .v { color: var(--lime); }

/* =========================================================
   FISHTANK — full-bleed specimen tank holding Paul
   ========================================================= */
.tank-wrap {
  position: relative;
  margin: 56px auto 0;
  max-width: 1480px;
  padding: 0 24px;
}
.fishtank {
  position: relative;
  width: 100%;
  height: 760px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  /* Glass body */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(120,170,255,0.18), transparent 60%),
    radial-gradient(140% 100% at 50% 110%, rgba(46,80,180,0.55), transparent 70%),
    linear-gradient(180deg, #0a0a22 0%, #0d1448 35%, #0a1f6b 70%, #050a30 100%);
  border: 2px solid rgba(180,210,255,0.18);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.22),
    inset 0 -3px 0 rgba(0,0,0,0.55),
    inset 8px 0 30px rgba(70,130,255,0.15),
    inset -8px 0 30px rgba(70,130,255,0.15),
    0 60px 120px -30px rgba(46,111,230,0.55),
    0 100px 120px -40px rgba(0,0,0,0.85);
}

/* Back wall — distant grid + depth */
.tank-backwall {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(120,180,255,0.06) 1px, transparent 1px) 0 0/80px 80px,
    linear-gradient(90deg, rgba(120,180,255,0.06) 1px, transparent 1px) 0 0/80px 80px,
    radial-gradient(closest-side at 50% 50%, rgba(80,120,220,0.3), transparent 75%);
  mask-image: radial-gradient(75% 75% at 50% 50%, #000 30%, transparent 95%);
  z-index: 0;
  transform: perspective(1200px) rotateX(0deg);
}

/* Water — fills the entire tank */
.tank-water {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(120,180,255,0.12) 0%,
      rgba(70,140,230,0.18) 18%,
      rgba(50,90,200,0.22) 50%,
      rgba(20,40,140,0.32) 100%);
  overflow: hidden;
}
.tank-caustics {
  position: absolute; inset: -10%;
  background:
    radial-gradient(120px 50px at 12% 18%, rgba(255,255,255,0.16), transparent 70%),
    radial-gradient(160px 70px at 38% 42%, rgba(180,220,255,0.14), transparent 70%),
    radial-gradient(140px 60px at 70% 30%, rgba(255,255,255,0.12), transparent 70%),
    radial-gradient(180px 80px at 25% 78%, rgba(180,220,255,0.12), transparent 70%),
    radial-gradient(140px 60px at 78% 82%, rgba(255,255,255,0.10), transparent 70%),
    radial-gradient(120px 50px at 88% 55%, rgba(180,220,255,0.10), transparent 70%);
  filter: blur(3px);
  mix-blend-mode: screen;
  animation: tankCaustics 11s ease-in-out infinite alternate;
  opacity: 0.9;
}
.tank-caustics-2 {
  animation-duration: 16s;
  animation-direction: alternate-reverse;
  opacity: 0.55;
  filter: blur(8px);
}
@keyframes tankCaustics {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-5%, 3%) scale(1.1); }
}

/* God rays */
.tank-rays {
  position: absolute; inset: -5% 0 0 0;
  background:
    linear-gradient(170deg, rgba(180,220,255,0.18) 0%, transparent 25%) 12% 0/8% 100% no-repeat,
    linear-gradient(170deg, rgba(180,220,255,0.14) 0%, transparent 25%) 28% 0/6% 100% no-repeat,
    linear-gradient(170deg, rgba(180,220,255,0.20) 0%, transparent 28%) 48% 0/10% 100% no-repeat,
    linear-gradient(170deg, rgba(180,220,255,0.12) 0%, transparent 25%) 70% 0/7% 100% no-repeat,
    linear-gradient(170deg, rgba(180,220,255,0.16) 0%, transparent 25%) 86% 0/9% 100% no-repeat;
  mix-blend-mode: screen;
  filter: blur(2px);
  animation: tankRays 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes tankRays {
  0%   { opacity: 0.55; transform: translateX(0); }
  100% { opacity: 0.85; transform: translateX(2%); }
}

/* Bubbles */
.tank-bubble {
  position: absolute;
  bottom: -16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.05) 80%);
  box-shadow: inset 0 0 4px rgba(255,255,255,0.6);
  opacity: 0.85;
  animation: tankBubbleRise linear infinite;
  pointer-events: none;
}
@keyframes tankBubbleRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 0.9; }
  50%  { transform: translateY(-380px) translateX(10px); }
  92%  { opacity: 0.9; }
  100% { transform: translateY(-760px) translateX(-8px); opacity: 0; }
}

.tank-particle {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(180,220,255,0.7);
  box-shadow: 0 0 4px rgba(180,220,255,0.9);
  animation: tankParticleDrift linear infinite;
  pointer-events: none;
  opacity: 0.7;
}
@keyframes tankParticleDrift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-12px, -18px); }
  100% { transform: translate(8px, -36px); opacity: 0; }
}

/* Paul fills the tank edge to edge */
.tank-paul {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: center;
  pointer-events: none;
  /* Subtle aqua tint + light from above */
  filter:
    drop-shadow(0 30px 50px rgba(0,0,0,0.7))
    drop-shadow(0 0 80px rgba(155,108,255,0.4));
  animation: tankFloat 9s ease-in-out infinite;
}
.tank-paul img {
  /* Cover the entire tank — top of head touches top, jaw touches bottom */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  filter:
    hue-rotate(-2deg)
    saturate(1.04)
    contrast(1.04)
    brightness(0.96);
}
@keyframes tankFloat {
  0%, 100% { transform: translate(0, 0) rotate(-0.6deg); }
  50%      { transform: translate(0, -8px) rotate(0.6deg); }
}

/* Front glass overlay */
.tank-glass-front {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: 22px;
  /* Aqua tint + cool front-glass refraction */
  background:
    linear-gradient(180deg, rgba(120,200,255,0.08) 0%, transparent 25%, transparent 80%, rgba(20,40,120,0.18) 100%),
    radial-gradient(80% 30% at 22% 14%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(60% 25% at 85% 88%, rgba(255,255,255,0.06), transparent 60%);
  mix-blend-mode: screen;
}
.tank-meniscus {
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 32px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 80%),
    radial-gradient(ellipse at 50% 100%, rgba(180,220,255,0.6), transparent 70%);
  border-bottom: 1px solid rgba(200,230,255,0.35);
  pointer-events: none;
}
.tank-rim-top {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 0 rgba(0,0,0,0.4);
}
.tank-rim-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.55), transparent),
    linear-gradient(180deg, transparent, rgba(0,20,80,0.4));
}
.tank-shine {
  position: absolute;
  background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
  filter: blur(2px);
  border-radius: 40px;
  mix-blend-mode: screen;
}
.tank-shine-1 {
  left: 8%; top: 4%;
  width: 26%; height: 70%;
  transform: skewX(-12deg);
  opacity: 0.18;
}
.tank-shine-2 {
  right: 24%; top: 10%;
  width: 4%; height: 40%;
  transform: skewX(-12deg);
  opacity: 0.45;
}
.tank-edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 14px;
  pointer-events: none;
}
.tank-edge-l {
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(0,0,0,0.5) 60%, transparent);
}
.tank-edge-r {
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,0.18), rgba(0,0,0,0.5) 60%, transparent);
}
.tank-corner {
  position: absolute;
  width: 60px; height: 60px;
  border: 1px solid var(--gold);
  opacity: 0.45;
  pointer-events: none;
}
.tank-corner-tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.tank-corner-tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
.tank-corner-bl { bottom: 14px; left: 14px; border-right: none; border-top: none; }
.tank-corner-br { bottom: 14px; right: 14px; border-left: none; border-top: none; }

/* HUD */
.tank-hud {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  padding: 28px;
}
.tank-hud .hk { font-size: 10px; color: rgba(255,255,255,0.55); }
.tank-hud .hv { font-size: 13px; color: #fff; font-weight: 700; margin-top: 4px; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.tank-hud .hv-num { color: var(--gold); font-size: 22px; }
.tank-hud .hv-ok { color: var(--lime); }
.tank-hud .hv-bars {
  display: flex; gap: 3px; align-items: flex-end; margin-top: 6px;
}
.tank-hud .hv-bars span {
  display: block;
  width: 6px;
  background: var(--lime);
  box-shadow: 0 0 6px var(--lime);
  border-radius: 1px;
}
.tank-hud .hv-bars span:nth-child(1) { height: 6px; }
.tank-hud .hv-bars span:nth-child(2) { height: 10px; }
.tank-hud .hv-bars span:nth-child(3) { height: 14px; }
.tank-hud .hv-bars span:nth-child(4) { height: 18px; }
.tank-hud .hv-bars span:nth-child(5) { height: 22px; opacity: 0.4; background: rgba(159,214,52,0.4); box-shadow: none; }
.tank-hud-tl { left: 0; top: 0; }
.tank-hud-tr { right: 0; top: 0; align-items: flex-end; text-align: right; }
.tank-hud-bl { left: 0; bottom: 56px; }
.tank-hud-br { right: 0; bottom: 56px; align-items: flex-end; text-align: right; }

.tank-target {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 540px; height: 540px;
  z-index: 4;
  pointer-events: none;
  animation: tankTargetSpin 40s linear infinite;
  opacity: 0.55;
  mix-blend-mode: screen;
}
@keyframes tankTargetSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Slow scan line */
.tank-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background:
    linear-gradient(90deg, transparent, rgba(159,214,52,0.5) 30%, rgba(159,214,52,0.85) 50%, rgba(159,214,52,0.5) 70%, transparent);
  box-shadow: 0 0 18px rgba(159,214,52,0.7);
  z-index: 6;
  animation: tankScan 6s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes tankScan {
  0%   { top: -4px; opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

/* Stat tape — marquee across the bottom */
.tank-tape {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  z-index: 7;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.7));
  border-top: 1px solid rgba(245,208,32,0.3);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.tape-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: tapeScroll 38s linear infinite;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}
.tape-row {
  display: flex;
  gap: 40px;
  padding-right: 40px;
}
.tape-row span { display: inline-flex; align-items: center; gap: 8px; }
.tape-row span b { color: var(--gold); font-weight: 800; }
@keyframes tapeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}



/* =========================================================
   PROBABILITY BRACKET — interactive tree
   ========================================================= */
.bracket {
  position: relative;
  padding: 128px 56px;
  background: linear-gradient(180deg, #0c0820, var(--bg-deep));
}
.bracket-canvas {
  position: relative;
  max-width: 1380px;
  margin: 56px auto 0;
  height: 540px;
  background:
    repeating-linear-gradient(0deg, rgba(245,208,32,0.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(245,208,32,0.04) 0 1px, transparent 1px 40px),
    linear-gradient(180deg, rgba(29,23,64,0.5), rgba(10,6,21,0.7));
  border: 1px solid rgba(245,208,32,0.2);
  border-radius: 22px;
  overflow: hidden;
}
.bracket-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.bracket-node {
  position: absolute;
  width: 130px;
  background: rgba(20,16,40,0.95);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: transform 240ms, border-color 240ms, box-shadow 240ms;
  z-index: 2;
}
.bracket-node:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 12px 24px -8px rgba(245,208,32,0.4);
}
.bracket-node.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 12px 28px -8px rgba(245,208,32,0.5);
}
.bracket-node .team {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: #fff;
  letter-spacing: 0.06em;
}
.bracket-node .pct {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 900;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.bracket-node .pct.lo { color: var(--coral); }
.bracket-node .bar {
  margin-top: 6px;
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.bracket-node .bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-hi), var(--gold));
  box-shadow: 0 0 8px var(--gold);
}

.bracket-tooltip {
  position: absolute;
  background: rgba(10,6,21,0.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t1);
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 12px 28px rgba(0,0,0,0.6);
  max-width: 220px;
}

@media (max-width: 1100px) {
  .bracket { padding: 80px 20px; }
  .bracket-canvas { height: 460px; }
}

/* =========================================================
   HOLOGRAPHIC COPE CARD
   ========================================================= */
.cope {
  position: relative;
  padding: 128px 56px;
  background:
    radial-gradient(900px 500px at 50% 50%, rgba(139,71,214,0.18), transparent 70%),
    linear-gradient(180deg, var(--bg-deep), #0a0418);
}
.cope-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  max-width: 1380px;
  margin: 56px auto 0;
  flex-wrap: wrap;
}
.cope-card-wrap {
  perspective: 1400px;
  width: 340px;
  height: 480px;
}
.cope-card {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(.22,.61,.36,1);
  cursor: pointer;
}
.cope-card.flipped { transform: rotateY(180deg); }

.cope-face {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #221945, #0d0828) padding-box,
    conic-gradient(from var(--ang, 0deg),
      var(--fifa-magenta), var(--fifa-red), var(--fifa-orange),
      var(--fifa-yellow), var(--fifa-lime), var(--fifa-cyan),
      var(--fifa-blue), var(--fifa-purple), var(--fifa-magenta)) border-box;
  animation: holoSpin 8s linear infinite;
  box-shadow: 0 30px 60px -16px rgba(0,0,0,0.7), 0 0 30px -8px rgba(245,208,32,0.4);
}
@property --ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes holoSpin {
  to { --ang: 360deg; }
}
.cope-face::before {
  /* holographic sheen */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg,
      transparent 30%,
      rgba(255,255,255,0.08) 45%,
      rgba(255,255,255,0.18) 50%,
      rgba(255,255,255,0.08) 55%,
      transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(255,0,150,0.04) 0 6px,
      rgba(0,255,200,0.04) 6px 12px,
      rgba(150,100,255,0.04) 12px 18px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 4;
}
.cope-face.back { transform: rotateY(180deg); }
.cope-front {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  padding: 18px 18px 16px;
  z-index: 2;
}
.cope-bar {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em;
  color: var(--gold);
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(245,208,32,0.3);
}
.cope-match {
  display: flex; justify-content: space-around;
  align-items: center;
  margin: 14px 0;
  font-family: var(--font-display);
  font-weight: 900;
}
.cope-team { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cope-team .flag { font-size: 28px; }
.cope-team .nm { font-size: 13px; color: #fff; letter-spacing: 0.06em; }
.cope-score {
  font-size: 36px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.cope-paul {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cope-paul img {
  width: 78%;
  filter: drop-shadow(0 12px 20px rgba(232,57,44,0.4));
}
.cope-roast {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  color: var(--t1);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.cope-meta {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--t3); text-transform: uppercase;
}
.cope-meta .rare {
  color: var(--fifa-magenta);
  font-weight: 700;
}

.cope-back {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  padding: 24px;
  z-index: 2;
}
.cope-back h4 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 16px;
}
.cope-back .row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cope-back .row .k { color: var(--t3); letter-spacing: 0.1em; }
.cope-back .row .v { color: var(--t1); font-weight: 700; }
.cope-back .row .v.gold { color: var(--gold); }
.cope-back .row .v.coral { color: var(--coral); }
.cope-qr {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.cope-qr svg { width: 80px; height: 80px; }
.cope-qr .ttl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--t2);
  text-transform: uppercase;
}

.cope-side {
  flex: 1;
  max-width: 480px;
  min-width: 320px;
}
.cope-side .eyebrow { color: var(--fifa-magenta); }
.cope-side .h2 { margin-top: 18px; }

/* Rarity counter row */
.cope-rarity {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.cope-rar {
  padding: 12px;
  border-radius: 12px;
  font-family: var(--font-mono);
  text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.3);
}
.cope-rar .nm {
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
}
.cope-rar .ct {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 900;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.cope-rar.common .ct  { color: var(--t1); }
.cope-rar.rare .ct    { color: var(--fifa-cyan); }
.cope-rar.epic .ct    { color: var(--fifa-purple); }
.cope-rar.mythic .ct  { color: var(--fifa-magenta); text-shadow: 0 0 12px var(--fifa-magenta); }

@media (max-width: 900px) {
  .cope { padding: 80px 20px; }
  .cope-stage { gap: 32px; }
}

/* =========================================================
   PARTICLE LAYER (canvas fixed bg)
   ========================================================= */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
  .particles { display: none; }
}

/* =========================================================
   FISHTANK HERO — Paul much bigger, framed by glass tank,
   3 thick suckered tentacles curling out of the open top
   ========================================================= */
.hero-paul.fishtank-mode {
  position: relative;
  aspect-ratio: auto;
  max-width: none;
  width: 100%;
  height: clamp(560px, 64vw, 820px);
  justify-self: stretch;
  overflow: visible;
}

/* The tank itself — a tall rounded glass box with depth */
.tank {
  position: absolute;
  inset: 6% 6% 4% 6%;
  perspective: 1600px;
  z-index: 2;
}
.tank-glass {
  position: absolute;
  inset: 0;
  border-radius: 28px 28px 22px 22px;
  background:
    /* soft inner water tint */
    linear-gradient(180deg,
      rgba(120,170,255,0.10) 0%,
      rgba(60,100,200,0.18) 40%,
      rgba(30,60,160,0.28) 100%);
  border: 1.5px solid rgba(180,210,255,0.32);
  box-shadow:
    /* glass thickness */
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 6px 0 18px -6px rgba(255,255,255,0.18),
    inset -6px 0 18px -6px rgba(255,255,255,0.10),
    inset 0 -16px 32px -10px rgba(0,0,0,0.45),
    /* exterior glow */
    0 50px 90px -30px rgba(0,0,0,0.85),
    0 0 80px -10px rgba(80,140,255,0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Water column — slightly lower than glass so there's "air" above */
.tank-water {
  position: absolute;
  inset: 18% 4px 4px 4px;
  border-radius: 4px 4px 20px 20px;
  background:
    radial-gradient(140% 80% at 50% 100%, rgba(20,40,120,0.55), transparent 60%),
    linear-gradient(180deg, rgba(80,140,220,0.20) 0%, rgba(30,60,140,0.35) 100%);
  overflow: hidden;
  box-shadow: inset 0 4px 18px rgba(0,0,0,0.3);
}
/* Caustic light playing on water surface */
.caustic {
  position: absolute;
  top: -12px; left: -10%; right: -10%;
  height: 38px;
  background: repeating-linear-gradient(90deg,
    transparent 0 22px,
    rgba(255,255,255,0.18) 22px 26px,
    transparent 26px 48px);
  filter: blur(3px);
  animation: causticDrift 9s linear infinite;
}
@keyframes causticDrift { to { transform: translateX(48px); } }

/* Bubbles rising in the water */
.tank-water .bubble {
  position: absolute;
  bottom: -20px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.25) 60%, transparent);
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
  opacity: 0.85;
}
.tank-water .b1 { left: 12%; animation: bubbleRise 7s linear infinite; }
.tank-water .b2 { left: 28%; width: 8px;  height: 8px;  animation: bubbleRise 9s linear infinite 1.2s; }
.tank-water .b3 { left: 48%; width: 18px; height: 18px; animation: bubbleRise 8s linear infinite 0.4s; }
.tank-water .b4 { left: 64%; width: 10px; height: 10px; animation: bubbleRise 10s linear infinite 2s; }
.tank-water .b5 { left: 78%; width: 12px; height: 12px; animation: bubbleRise 7.5s linear infinite 0.8s; }
.tank-water .b6 { left: 88%; width: 6px;  height: 6px;  animation: bubbleRise 6.5s linear infinite 2.4s; }
@keyframes bubbleRise {
  0%   { transform: translateY(0)    translateX(0); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { transform: translateY(-100%) translateX(8px); opacity: 0; }
}

/* Frame — chunky black metal corners + rivets */
.tank-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 28px 28px 22px 22px;
}
.tf-corner {
  position: absolute;
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #2a2030, #0c0816);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 4px rgba(0,0,0,0.6),
    0 6px 14px rgba(0,0,0,0.5);
}
.tf-corner.tl { top: -2px; left: -2px;  border-radius: 28px 0 12px 0;  clip-path: polygon(0 0, 100% 0, 60% 0, 0 60%, 0 100%, 0 0); }
.tf-corner.tr { top: -2px; right: -2px; border-radius: 0 28px 0 12px;  clip-path: polygon(40% 0, 100% 0, 100% 100%, 100% 60%, 0 0, 0 0); }
.tf-corner.bl { bottom: -2px; left: -2px;  border-radius: 12px 0 22px 0; clip-path: polygon(0 40%, 60% 100%, 0 100%); }
.tf-corner.br { bottom: -2px; right: -2px; border-radius: 0 12px 0 22px; clip-path: polygon(40% 100%, 100% 40%, 100% 100%); }
.tf-rivet {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f5d020, #8a6a08 70%, #2a1f00);
  box-shadow: 0 1px 2px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.4);
}
.tf-rivet.r1 { top: 14px; left: 14px; }
.tf-rivet.r2 { top: 14px; right: 14px; }
.tf-rivet.r3 { bottom: 14px; left: 14px; }
.tf-rivet.r4 { bottom: 14px; right: 14px; }

/* Tank base — thicker plinth under the glass */
.tank-base {
  position: absolute;
  bottom: -22px;
  left: -3%; right: -3%;
  height: 46px;
  pointer-events: none;
}
.tb-front {
  position: absolute; inset: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #1a1224 0%, #0a0612 60%, #0a0612 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 0 rgba(0,0,0,0.7),
    0 18px 30px -6px rgba(0,0,0,0.7);
}
.tb-side {
  position: absolute; inset: 6px 16px;
  background: repeating-linear-gradient(90deg,
    rgba(245,208,32,0.0) 0 14px,
    rgba(245,208,32,0.55) 14px 16px,
    rgba(245,208,32,0.0) 16px 28px);
  opacity: 0.7;
  border-radius: 4px;
}
.tb-shadow {
  position: absolute;
  bottom: -18px; left: 8%; right: 8%;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%);
  filter: blur(4px);
}

/* Light fixture above the tank */
.tank-light {
  position: absolute;
  top: -22px;
  left: 12%; right: 12%;
  height: 30px;
  pointer-events: none;
}
.tl-fixture {
  position: absolute; inset: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #2a2030 0%, #0a0612 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 6px 14px rgba(0,0,0,0.5);
}
.tl-beam {
  position: absolute;
  top: 100%;
  left: 6%; right: 6%;
  height: 80px;
  background: linear-gradient(180deg, rgba(255,235,160,0.32), transparent 80%);
  filter: blur(8px);
  animation: lightFlicker 5s ease-in-out infinite;
}
@keyframes lightFlicker {
  0%,100% { opacity: 1; }
  47%     { opacity: 0.85; }
  50%     { opacity: 1; }
}

/* PAUL — much bigger inside the tank */
.fishtank-mode .paul-img {
  position: absolute;
  inset: 12% 0 0 0;
  width: 100%;
  height: 92%;
  object-fit: contain;
  z-index: 6;
  filter:
    drop-shadow(0 30px 50px rgba(0,0,0,0.7))
    drop-shadow(0 0 30px rgba(120,160,255,0.25));
  animation: orbFloat 6s ease-in-out infinite;
}

/* Halos + dashed ring re-positioned for tank */
.fishtank-mode .paul-halo  { inset: 18% 12%; opacity: 0.45; z-index: 1; }
.fishtank-mode .paul-halo-2 { inset: 28% 22%; opacity: 0.6;  z-index: 1; }

/* Glass reflection — diagonal sheen on TOP of everything */
.tank-reflect {
  position: absolute;
  inset: 0;
  border-radius: 28px 28px 22px 22px;
  pointer-events: none;
  z-index: 7;
  background:
    linear-gradient(118deg,
      transparent 0%,
      rgba(255,255,255,0.0) 22%,
      rgba(255,255,255,0.16) 30%,
      rgba(255,255,255,0.04) 36%,
      transparent 50%,
      transparent 70%,
      rgba(255,255,255,0.10) 78%,
      transparent 86%);
  mix-blend-mode: screen;
  opacity: 0.9;
}
.tank-reflect::after {
  content: "";
  position: absolute;
  top: 6%; left: 8%; width: 14%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.6), transparent 60%);
  filter: blur(6px);
}

/* === TENTACLES emerging from open tank top, curling outward === */
.tank-tent {
  position: absolute;
  pointer-events: none;
  z-index: 8;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,0.6));
  transform-origin: bottom center;
}
.tank-tent.tt-1 {
  top: -240px;
  left: -60px;
  width: 260px;
  height: 320px;
  animation: tentSway1 6s ease-in-out infinite;
}
.tank-tent.tt-2 {
  top: -240px;
  right: -90px;
  width: 320px;
  height: 320px;
  animation: tentSway2 7s ease-in-out infinite;
  transform-origin: bottom left;
}
.tank-tent.tt-3 {
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 240px;
  animation: tentSway3 8s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes tentSway1 {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(2deg); }
}
@keyframes tentSway2 {
  0%,100% { transform: rotate(2deg); }
  50%     { transform: rotate(-3deg); }
}
@keyframes tentSway3 {
  0%,100% { transform: translateX(-50%) rotate(-1deg); }
  50%     { transform: translateX(-50%) rotate(2deg); }
}

/* Floating juggle balls inside the tank */
.fishtank-mode .juggle-ball { z-index: 5; }
.fishtank-mode .jb-1 { top: 32%; left: 14%; }
.fishtank-mode .jb-2 { top: 44%; right: 12%; }
.fishtank-mode .jb-3 { bottom: 20%; left: 22%; }

/* Decorative props pushed lower, AROUND the tank */
.fishtank-mode .hero-deco.ticket  { top: auto; bottom: -8px; left: -50px;  z-index: 9; }
.fishtank-mode .hero-deco.coin    { bottom: -22px; left: 32%; z-index: 9; }
.fishtank-mode .hero-deco.whistle { top: 8%; right: -10px;  z-index: 9; }
.fishtank-mode .hero-deco.ball-1  { bottom: 4%; right: 6%;  z-index: 9; }

/* Chips re-anchored to the TANK, not the bare paul container */
.fishtank-mode .paul-chip-conf {
  top: 8%; right: 4%; z-index: 10;
}
.fishtank-mode .paul-chip-match {
  bottom: 14%; left: 50%; transform: translateX(-50%); z-index: 10;
}
.fishtank-mode .hero-ledger {
  bottom: 24%; right: 4%;
  z-index: 10;
}

/* Centered hero variant: keep tank from getting absurdly tall */
body[data-hero="centered"] .hero-paul.fishtank-mode {
  height: clamp(520px, 50vw, 720px);
  max-width: 880px;
}

/* Don't double-apply scale to fishtank in stacked mode */
body[data-hero="stacked"] .hero-paul.fishtank-mode { transform: none; }


@media (max-width: 900px) {
  .oracle-feed { padding: 80px 12px; }
  .tank-wrap { padding: 0 8px; }
  .fishtank { height: 560px; }
  .tank-hud { padding: 16px; }
  .tank-hud .hv-num { font-size: 18px; }
  .tank-target { width: 360px; height: 360px; }
}


/* =========================================================
   HERO SOCCER FIELD overlay — perspective grass + chalk lines
   sits in the hero behind the Paul scene, in front of the bg
   ========================================================= */
.hero-field {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 52%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* perspective squash so the field lies down toward the viewer */
  transform: perspective(1100px) rotateX(58deg) translateY(8%);
  transform-origin: center bottom;
}
.hero-field .hf-grass {
  position: absolute; inset: 0;
  background:
    /* rolling grass color — richer + brighter */
    radial-gradient(ellipse 80% 70% at 50% 100%,
      rgba(96, 198, 88, 0.88) 0%,
      rgba(58, 152, 64, 0.82) 40%,
      rgba(30, 96, 44, 0.80) 100%);
  /* fade into the bg above */
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
  mask-image: linear-gradient(to top, #000 55%, transparent 100%);
}
.hero-field .hf-grass::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0.10) 0 60px,
    rgba(255,255,255,0.07) 60px 120px
  );
  mix-blend-mode: overlay;
  opacity: 0.85;
}
.hero-field .hf-grass::after {
  /* a softer second pass of stripes for depth */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 0 30px,
    rgba(0,0,0,0.06) 30px 60px
  );
  mix-blend-mode: soft-light;
}
.hero-field .hf-lines {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  width: 100%; height: 100%;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
}
@media (max-width: 900px) {
  .hero-field { height: 36%; transform: perspective(900px) rotateX(50deg) translateY(8%); }
}


/* =========================================================
   HERO STAGE MODE — Paul + jars, daylight matchday vibe
   ========================================================= */
.hero-paul.stage-mode {
  position: relative;
  aspect-ratio: auto;
  max-width: none;
  width: 100%;
  height: clamp(620px, 70vw, 880px);
  justify-self: stretch;
  overflow: visible;
}

/* Soft daylight halo — replaces the dark tank water */
.stage-mode .stage-glow {
  position: absolute;
  inset: 6% 8% 12% 8%;
  border-radius: 50%;
  background:
    radial-gradient(60% 50% at 50% 55%,
      rgba(255, 218, 130, 0.55) 0%,
      rgba(255, 180, 120, 0.30) 28%,
      rgba(180, 110, 220, 0.20) 55%,
      rgba(120, 70, 200, 0.0) 80%);
  filter: blur(28px);
  z-index: 0;
  animation: haloPulse 8s ease-in-out infinite;
}
.stage-mode .stage-glow-2 {
  position: absolute;
  inset: 22% 22% 28% 22%;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    rgba(245,208,32,0.0),
    rgba(245,208,32,0.35) 25%,
    rgba(255,90,170,0.30) 50%,
    rgba(110,180,255,0.30) 75%,
    rgba(245,208,32,0.0));
  filter: blur(22px);
  opacity: 0.65;
  z-index: 0;
  animation: haloSpin 90s linear infinite;
}
.stage-mode .stage-spotlight {
  /* a wide soft floor pool for the wooden table to sit on */
  position: absolute;
  left: 8%; right: 8%;
  bottom: 4%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.20) 50%,
    rgba(0,0,0,0) 80%);
  filter: blur(12px);
  z-index: 0;
}
@keyframes haloPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1.0;  transform: scale(1.04); }
}

/* Confetti / sparkle dots floating around */
.stage-mode .hp-spark {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold, #f5d020);
  box-shadow: 0 0 12px var(--gold, #f5d020), 0 0 20px rgba(245,208,32,0.5);
  z-index: 4;
  animation: sparkFloat 5.5s ease-in-out infinite;
}
.stage-mode .hp-spark.s1 { top: 12%; left: 14%; background: #ffce44; animation-delay: 0s; }
.stage-mode .hp-spark.s2 { top: 22%; right: 10%; background: #ff7be0; box-shadow: 0 0 12px #ff7be0; animation-delay: 0.7s; }
.stage-mode .hp-spark.s3 { top: 56%; left: 6%; background: #a3ff5e; box-shadow: 0 0 12px #a3ff5e; animation-delay: 1.4s; }
.stage-mode .hp-spark.s4 { bottom: 18%; right: 14%; background: #6ec1ff; box-shadow: 0 0 12px #6ec1ff; animation-delay: 2.1s; }
.stage-mode .hp-spark.s5 { top: 38%; right: 28%; background: #ffce44; animation-delay: 2.8s; width: 6px; height: 6px; }
@keyframes sparkFloat {
  0%, 100% { transform: translateY(-6px) scale(1); opacity: 0.85; }
  50%      { transform: translateY(8px) scale(1.15); opacity: 1; }
}

/* The Paul-with-jars hero image — XL, with a small bleed past the container */
.stage-mode .paul-jars-img {
  position: absolute;
  inset: -2% -8% -2% -8%;
  width: 116%;
  height: 104%;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 44px 56px rgba(20, 8, 50, 0.6))
          drop-shadow(0 16px 22px rgba(0, 0, 0, 0.5));
  animation: orbFloat 7s ease-in-out infinite;
}

/* Confidence chip floats over the top-right of the scene */
.stage-mode .paul-chip-conf {
  position: absolute;
  top: 6%;
  right: 4%;
  z-index: 5;
}

/* Decorative props — kept light so they don't crowd Paul */
.stage-mode .hero-deco { position: absolute; z-index: 3; pointer-events: none; }
.stage-mode .hero-deco.ticket  { display: none; }
.stage-mode .hero-deco.coin    { top: 6%;    right: -4%; transform: rotate(8deg); }
.stage-mode .hero-deco.whistle { top: 38%;   right: -6%; transform: rotate(14deg); }
.stage-mode .hero-deco.ball-1  { bottom: 0%; left: -2%;  }

@media (max-width: 900px) {
  .hero-paul.stage-mode { height: clamp(420px, 90vw, 560px); }
}


/* =========================================================
   ORACLE HEADLINE — "THE ORACLE IS DEAD ↤ BACK." dramatic intro
   Sits as a section opener above OracleDataFeed. Wide, centered,
   one line per word so each beat lands.
   ========================================================= */
.oracle-headline {
  position: relative;
  padding: 96px 40px 40px;
  text-align: center;
  max-width: 1480px;
  margin: 0 auto;
}
.oh-h {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 8.4vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.06em;
}
.oh-r1, .oh-r2, .oh-r3 {
  display: block;
  white-space: nowrap;
}
.oh-r1 {
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.4),
    0 6px 24px rgba(0,0,0,0.5);
  letter-spacing: -0.025em;
}
/* "IS DEAD" row — IS white, DEAD struck through */
.oh-r2 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.22em;
  white-space: nowrap;
}
.oh-is {
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.4),
    0 6px 24px rgba(0,0,0,0.5);
}
.oh-dead {
  position: relative;
  display: inline-block;
  font-style: italic;
  color: rgba(180, 170, 200, 0.55);
  text-shadow: 0 2px 0 rgba(0,0,0,0.45);
  padding: 0 0.04em;
}
.oh-strike {
  position: absolute;
  left: -3%;
  right: -3%;
  top: 50%;
  width: 106%;
  height: 0.36em;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(255,90,60,0.55));
}
/* "BACK." in gold */
.oh-r3 {
  color: var(--gold, #f5d020);
  text-shadow:
    0 2px 0 rgba(0,0,0,0.45),
    0 0 22px rgba(245,208,32,0.5),
    0 0 60px rgba(245,208,32,0.25);
}

@media (max-width: 900px) {
  .oracle-headline { padding: 64px 20px 36px; }
  .oh-h { font-size: clamp(44px, 12vw, 96px); }
}

/* Subtext that sits beneath the dramatic headline */
.oh-sub {
  text-align: center;
  margin: 28px auto 0;
  max-width: 880px;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  color: rgba(220, 210, 250, 0.88);
}
.oh-sub b {
  color: #fff;
  font-weight: 700;
}
.oh-acc-gold {
  color: var(--gold, #f5d020);
  font-style: italic;
  font-weight: 700;
  text-shadow:
    0 0 18px rgba(245,208,32,0.45),
    0 0 36px rgba(245,208,32,0.18);
}

/* "such oracle. / very comeback. / wow ledger." doge-chip row */
.oh-chips {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 26px auto 0;
  flex-wrap: wrap;
}
.oh-chip {
  font-family: var(--font-mono);
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  color: var(--gold, #f5d020);
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(20, 8, 40, 0.7);
  border: 1.5px dashed rgba(245, 208, 32, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 14px rgba(0,0,0,0.55),
    0 0 22px -6px rgba(245,208,32,0.4);
  text-shadow:
    0 0 10px rgba(245,208,32,0.4);
  transform: rotate(-2deg);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.oh-chip:nth-child(2) { transform: rotate(1.5deg); }
.oh-chip:nth-child(3) { transform: rotate(-1deg); }
.oh-chip:hover {
  transform: rotate(0) translateY(-2px);
  border-color: rgba(245, 208, 32, 1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 6px 18px rgba(0,0,0,0.6),
    0 0 32px -4px rgba(245,208,32,0.65);
}


/* =========================================================
   SOCIALS — Paul's channels: Telegram / X / Instagram / TikTok
   3D cards with WC26 rainbow pattern bg + brand color
   ========================================================= */
.socials {
  position: relative;
  padding: 110px 56px 120px;
  isolation: isolate;
  overflow: hidden;
}
.socials-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 18% 10%,  rgba(168, 89, 229, 0.18), transparent 60%),
    radial-gradient(900px 600px at 85% 80%,  rgba(46, 200, 230, 0.12), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(232, 57, 44, 0.12), transparent 60%);
}
/* === BIG STAGE: full-width field, squad on grass,
       phone shifted right, copy overlaid on the left === */
.ss-stage {
  position: relative;
  margin: 0 auto 80px;
  max-width: 1480px;
  height: clamp(640px, 60vw, 820px);
  isolation: isolate;
}

/* Copy block sits absolute on the upper-left of the stage,
   compact enough that the squad below never overlaps it. */
.ss-copy {
  position: absolute;
  left: 0;
  top: 0;
  width: 44%;
  max-width: 540px;
  z-index: 7;
  padding-right: 16px;
}
.ss-copy .h2 {
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
}
.ss-handle-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 18px;
}
.ss-handle-row .ss-handle {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 20px rgba(168, 89, 229, 0.5);
}
.ss-handle-row .ss-followers {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220, 200, 255, 0.62);
}

/* Soccer field — perspective grass + chalk lines */
.ss-field {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0;
  height: 68%;          /* taller so phone tentacle base lands well inside */
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  transform: perspective(1100px) rotateX(56deg);
  transform-origin: center bottom;
}
.ss-grass {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 100%,
      rgba(102, 200, 96, 0.92) 0%,
      rgba(60, 158, 68, 0.85) 40%,
      rgba(28, 96, 44, 0.85) 100%);
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 100%);
  mask-image: linear-gradient(to top, #000 50%, transparent 100%);
}
.ss-grass::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0.10) 0 64px,
    rgba(255,255,255,0.07) 64px 128px
  );
  mix-blend-mode: overlay;
}
.ss-grass::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 0 32px,
    rgba(0,0,0,0.06) 32px 64px
  );
  mix-blend-mode: soft-light;
}
.ss-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
}

/* Crater/crack at the base of the phone — makes it look planted in the field */
.ss-crack {
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: clamp(280px, 36vw, 520px);
  aspect-ratio: 360 / 100;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.7));
}
.ss-crack svg { width: 100%; height: 100%; display: block; }

/* Phone selfie — shifted FURTHER right, BIGGER,
   sits inside the grass so the tentacle base blends into the field */
/* Goal at the back of the field — soccer net with a cardboard "Socials" sign.
   Shifted to the right so the cardboard reads clear of the headline on the left. */
.ss-goal {
  position: absolute;
  left: 64%;
  bottom: 26%;                        /* sits along the back edge of the perspective field */
  transform: translateX(-50%);
  width: clamp(640px, 64%, 1080px);
  aspect-ratio: 800 / 320;
  z-index: 4;                         /* behind the squad (z 6) but above the field */
  pointer-events: none;
  filter: drop-shadow(0 24px 28px rgba(0,0,0,0.55));
}
.ss-goal-svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* the cardboard sign — hangs from the LEFT side of the crossbar */
.ss-goal-sign {
  position: absolute;
  left: 22%;                          /* matches twine endpoint x≈175/800 in the SVG */
  top: 24%;                           /* lines up with the twine endpoint y */
  transform: translate(-50%, 0) rotate(-5deg);
  padding: 10px 26px 12px;
  font-family: "Caveat", "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 34px);
  letter-spacing: 0.01em;
  color: #2a1808;
  text-align: center;
  /* cardboard tan with a subtle linen texture */
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,235,200,0.35), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, #d8a96c 0%, #b88248 50%, #c79358 100%);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,235,200,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 8px 14px rgba(0,0,0,0.55),
    0 0 0 1px rgba(70,40,12,0.55);
  /* tiny corner nicks via clip-path so it reads as "torn cardboard" */
  clip-path: polygon(
    1% 4%, 12% 0%, 38% 3%, 62% 0%, 88% 2%, 99% 6%,
    100% 95%, 84% 100%, 56% 96%, 28% 100%, 8% 96%, 0% 90%
  );
  white-space: nowrap;
}
/* tiny holes where the twine passes through the cardboard */
.ss-goal-sign::before,
.ss-goal-sign::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #2a1808;
  box-shadow: 0 1px 0 rgba(255,235,200,0.4);
}
.ss-goal-sign::before { left: 18%; }
.ss-goal-sign::after  { right: 18%; }

/* Squad — now the only character image in the section. Bigger and shifted
   toward the right half so it fills the space left by the removed phone. */
.ss-squad {
  position: absolute;
  left: 60%;                          /* anchor near the right half of the stage */
  bottom: 6%;
  transform: translateX(-50%);
  width: clamp(820px, 72%, 1280px);   /* ~25% larger than before */
  max-height: 78%;
  object-fit: contain;
  object-position: center bottom;
  z-index: 6;
  pointer-events: none;
  filter:
    drop-shadow(0 44px 36px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 70px rgba(168, 89, 229, 0.22));
}

.ss-caption {
  position: absolute;
  left: 50%;
  bottom: -56px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 7;
  text-align: center;
}
.ss-caption .ss-handle {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 0 20px rgba(168, 89, 229, 0.5);
}
.ss-caption .ss-followers {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220, 200, 255, 0.6);
}

/* === Follow strip — premium pill buttons attached to the stage === */
.socials-strip {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1380px;
  margin: -32px auto 0;       /* negative margin pulls the strip up so it
                                 visually overlaps the stage's bottom edge */
  padding: 0 16px;
}
/* Each pill is a piece of stadium pitch — fresh-cut grass stripes
   + chalk touchline + brand-color floodlight + 3D bezel */
.social-pill {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 20px;
  border-radius: 16px;
  text-decoration: none;
  overflow: hidden;
  background:
    /* stadium-light glint at the very top */
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 18%),
    /* dark stadium ambient — opaque at the top, fades so the pitch shows below */
    linear-gradient(180deg,
      rgba(16, 8, 36, 0.96) 0%,
      rgba(16, 8, 36, 0.78) 35%,
      rgba(10, 4, 24, 0.42) 75%,
      rgba(10, 4, 24, 0.30) 100%),
    /* fresh-cut grass — alternating mowed stripes (full alpha so it reads as pitch) */
    repeating-linear-gradient(96deg,
      rgb(86, 178, 108) 0px,
      rgb(86, 178, 108) 30px,
      rgb(46, 116, 68) 30px,
      rgb(46, 116, 68) 60px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 26px -8px rgba(0, 0, 0, 0.7),
    0 30px 48px -22px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1.2),
              box-shadow 320ms ease,
              border-color 320ms ease,
              background-color 320ms ease;
  -webkit-tap-highlight-color: transparent;
}
/* Chalk touchline at the very bottom of the pill */
.social-pill::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 8px;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.55) 10%,
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,255,0.55) 90%,
    transparent 100%);
  box-shadow: 0 0 6px rgba(255,255,255,0.4);
  pointer-events: none;
  z-index: 0;
}
/* Brand-color sheen washes from the icon side */
.social-pill .sp-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, var(--sp-color) 0%, var(--sp-color2) 30%, transparent 70%);
  opacity: 0.32;
  z-index: -1;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Branded icon chip */
.social-pill .sp-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--sp-color) 0%, var(--sp-color2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.4);
}
.social-pill .sp-icon svg {
  width: 26px;
  height: 26px;
}
.social-pill .sp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.social-pill .sp-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  line-height: 1.05;
}
.social-pill .sp-handle {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-pill .sp-arrow {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  margin-left: 4px;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1.2);
}
.social-pill:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 18px 32px -8px rgba(0, 0, 0, 0.72),
    0 36px 60px -22px rgba(0, 0, 0, 0.6),
    0 0 36px -6px var(--sp-color);
}
.social-pill:hover .sp-tint  { opacity: 0.45; }
.social-pill:hover .sp-arrow { transform: translate(3px, -3px); }
/* "coming soon" pills — non-clickable, dimmed */
.social-pill.is-soon {
  cursor: default;
  opacity: 0.55;
  filter: saturate(0.55);
}
.social-pill.is-soon:hover {
  transform: none;
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.04),
    0 14px 26px -8px rgba(0,0,0,0.7),
    0 30px 48px -22px rgba(0,0,0,0.55);
}
.social-pill.is-soon .sp-handle { font-style: italic; opacity: 0.7; }
.social-pill.is-soon .sp-arrow { color: rgba(255,255,255,0.35); }
/* Stadium floodlights kick in on hover — pitch brightens, chalk glows more */
.social-pill:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 18%),
    linear-gradient(180deg,
      rgba(16, 8, 36, 0.84) 0%,
      rgba(16, 8, 36, 0.55) 35%,
      rgba(10, 4, 24, 0.20) 75%,
      rgba(10, 4, 24, 0.10) 100%),
    repeating-linear-gradient(96deg,
      rgb(120, 220, 140) 0px,
      rgb(120, 220, 140) 30px,
      rgb(60, 142, 84) 30px,
      rgb(60, 142, 84) 60px);
}
.social-pill:hover::after {
  box-shadow: 0 0 12px rgba(255,255,255,0.7);
}
.social-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 18px;
  border-radius: 22px;
  text-decoration: none;
  overflow: hidden;
  /* 3D bezel: dark base + inner highlight + outer drop */
  background: linear-gradient(180deg, #1f1340 0%, #0c0620 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-top-color: rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.05),
    0 14px 28px -8px rgba(0,0,0,0.7),
    0 36px 60px -24px rgba(0,0,0,0.55);
  cursor: pointer;
  transition:
    transform 360ms cubic-bezier(.2,.8,.2,1.2),
    box-shadow 360ms ease,
    border-color 360ms ease;
  -webkit-tap-highlight-color: transparent;
}
/* WC26 rainbow pattern as the card's surface texture */
.social-card .sc-pattern {
  position: absolute;
  inset: 0;
  background-image: url("assets/wci-bg.png");
  background-size: 240% auto;
  background-position: center 20%;
  background-repeat: no-repeat;
  opacity: 0.5;
  filter: saturate(1.1) blur(0.4px);
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 50%, rgba(0,0,0,0.55) 80%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 50%, rgba(0,0,0,0.55) 80%, transparent 100%);
  z-index: -2;
  transition: opacity 360ms ease, transform 360ms ease;
}
/* Brand color tint over the pattern — per-platform */
.social-card .sc-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, var(--sc-color) 0%, var(--sc-color2) 60%, transparent 100%);
  opacity: 0.62;
  z-index: -1;
  mix-blend-mode: multiply;
  transition: opacity 360ms ease;
}
/* Glossy highlight blob in the upper left */
.social-card .sc-glow {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(255,255,255,0.32) 0%, transparent 65%);
  pointer-events: none;
  filter: blur(8px);
  z-index: 0;
}

/* Icon — branded chip */
.social-card .sc-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--sc-color) 0%, var(--sc-color2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 6px 14px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.4);
  z-index: 1;
}
.social-card .sc-icon svg {
  width: 30px;
  height: 30px;
}

.social-card .sc-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
}
.social-card .sc-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.social-card .sc-handle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.social-card .sc-blurb {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  z-index: 1;
}
.social-card .sc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 14px;
  align-self: flex-start;
  border-radius: 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  z-index: 1;
  transition: transform 240ms ease, background 240ms ease;
}
.social-card .sc-arrow {
  transition: transform 280ms cubic-bezier(.2,.8,.2,1.2);
}

/* Hover: lift, brighten pattern, brighten glow, arrow shoots out */
.social-card:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(255,255,255,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 18px 36px -8px rgba(0,0,0,0.72),
    0 44px 70px -24px rgba(0,0,0,0.6),
    0 0 50px -10px var(--sc-color);
}
.social-card:hover .sc-pattern { opacity: 0.75; transform: scale(1.06); }
.social-card:hover .sc-tint    { opacity: 0.5; }
.social-card:hover .sc-cta     { background: rgba(0,0,0,0.7); }
.social-card:hover .sc-arrow   { transform: translate(3px, -3px); }

@media (max-width: 1100px) {
  /* Copy moves above the stage and re-centers; phone returns to center */
  .ss-stage { height: auto; padding-top: 24px; padding-bottom: clamp(420px, 80vw, 620px); }
  .ss-copy {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    max-width: 720px;
    margin: 0 auto 32px;
    padding: 0 16px;
    text-align: center;
  }
  .ss-copy .h2 br { display: none; }
  .ss-copy .lead { margin-left: auto; margin-right: auto; }
  .ss-handle-row { justify-content: center; }
  .ss-field, .ss-crack, .ss-phone, .ss-squad {
    /* These need a positioning context inside the bottom band of the stage */
    bottom: 0;
  }
  .ss-field { height: clamp(280px, 60vw, 460px); }
  .ss-phone { right: auto; left: 50%; transform: translateX(-50%); bottom: 20%; width: clamp(320px, 56vw, 460px); }
  .ss-phone img { animation: ssPhoneBobCenter 7s ease-in-out infinite; }
  @keyframes ssPhoneBobCenter {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-10px) rotate(1deg); }
  }
  .ss-squad { width: clamp(640px, 100%, 1100px); }
  .socials-strip { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
}
@media (max-width: 760px) {
  .socials { padding: 80px 20px 80px; }
  .socials-strip { grid-template-columns: 1fr; }
  .ss-phone { width: clamp(260px, 64vw, 380px); }
  .ss-squad { max-height: 50%; bottom: 6%; }
}


/* =========================================================
   MEET PAUL · MOOD CAROUSEL — 15 Pauls, one octopus
   ========================================================= */
.paul-moods {
  position: relative;
  padding: 96px 56px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255, 200, 110, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, #15082c 0%, #0c0420 100%);
  overflow: hidden;
}
.paul-moods::before {
  /* faint dot grid like a stadium scoreboard */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0.4;
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 60%, transparent 100%);
}
.paul-moods-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  max-width: 1380px;
  margin: 0 auto;
}
.mood-card {
  position: relative;
  margin: 0;
  padding: 14px 14px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(58, 38, 112, 0.45) 0%, rgba(20, 9, 46, 0.7) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.16);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 18px 32px -12px rgba(0,0,0,0.6),
    0 6px 14px rgba(0,0,0,0.3);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s, border-color 0.4s;
  text-align: center;
}
.mood-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(245, 208, 32, 0.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 28px 44px -14px rgba(0,0,0,0.7),
    0 10px 22px rgba(160, 90, 255, 0.25);
}
.mood-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 50% 35%, rgba(180, 130, 255, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #1a0f3a 0%, #0a0420 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mood-halo {
  position: absolute;
  inset: 14% 14% 28% 14%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(245,208,32,0.45),
    rgba(255,123,224,0.40),
    rgba(110,193,255,0.45),
    rgba(163,255,94,0.40),
    rgba(245,208,32,0.45));
  filter: blur(16px);
  opacity: 0.55;
  z-index: 0;
  animation: haloSpin 24s linear infinite;
  animation-delay: calc(var(--i, 0) * -1.8s);
}
.mood-card:hover .mood-halo { opacity: 0.85; }
.mood-img-wrap img {
  position: relative;
  width: 92%;
  height: 92%;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.55));
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.mood-card:hover .mood-img-wrap img {
  transform: translateY(-4px) scale(1.04);
}
.mood-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  margin-top: 14px;
  letter-spacing: 0.005em;
}
.mood-quip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(220, 200, 255, 0.62);
  margin-top: 6px;
  font-style: italic;
  line-height: 1.5;
  min-height: 33px;
}

@media (max-width: 1180px) {
  .paul-moods-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .paul-moods { padding: 72px 20px; }
  .paul-moods-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .mood-title { font-size: 15px; }
}
@media (max-width: 580px) {
  .paul-moods-grid { grid-template-columns: repeat(2, 1fr); }
}


/* =========================================================
   PAUL HERO — immersive 3D popout header
   ========================================================= */
.paul-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 880px;
  overflow: hidden;
  isolation: isolate;
  background: #04040c;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Allow the model + wordmark to bleed slightly into next section */
}

/* ===== Cosmic background ===== */
.ph-bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% 60%, rgba(60,30,150,0.55), transparent 70%),
    radial-gradient(60% 50% at 22% 35%, rgba(46,111,230,0.35), transparent 70%),
    radial-gradient(60% 50% at 78% 30%, rgba(245,80,180,0.28), transparent 70%),
    linear-gradient(180deg, #02020a 0%, #08051c 40%, #050315 100%);
}

/* Star fields */
.ph-stars {
  position: absolute; inset: -50%;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 80% 70%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.8) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 20%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,0.7) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 50%, rgba(255,220,180,0.9) 50%, transparent 100%),
    radial-gradient(1px 1px at 50% 50%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 30% 10%, rgba(180,200,255,0.8) 50%, transparent 100%),
    radial-gradient(2px 2px at 70% 90%, rgba(255,240,200,0.95) 50%, transparent 100%);
  background-size: 600px 600px;
  background-repeat: repeat;
  animation: phStarsDrift 80s linear infinite;
  opacity: 0.85;
}
.ph-stars-2 {
  background-size: 380px 380px;
  animation-duration: 140s;
  animation-direction: reverse;
  opacity: 0.6;
}
.ph-stars-3 {
  background-size: 200px 200px;
  animation-duration: 200s;
  opacity: 0.4;
  filter: blur(0.5px);
}
@keyframes phStarsDrift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-300px, -200px, 0); }
}

/* Nebula clouds */
.ph-nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: phNebulaPulse 14s ease-in-out infinite;
}
.ph-nebula-1 {
  left: -10%; top: 8%;
  width: 70vw; height: 60vh;
  background: radial-gradient(closest-side, rgba(155,108,255,0.55), transparent 75%);
}
.ph-nebula-2 {
  right: -10%; top: 18%;
  width: 60vw; height: 55vh;
  background: radial-gradient(closest-side, rgba(46,111,230,0.55), transparent 75%);
  animation-delay: -4s;
  animation-duration: 18s;
}
.ph-nebula-3 {
  left: 25%; bottom: -15%;
  width: 75vw; height: 60vh;
  background: radial-gradient(closest-side, rgba(245,80,180,0.45), transparent 75%);
  animation-delay: -8s;
  animation-duration: 22s;
}
@keyframes phNebulaPulse {
  0%, 100% { transform: scale(1) translate(0,0); opacity: 0.85; }
  50%      { transform: scale(1.12) translate(2%, -1%); opacity: 1; }
}

/* Perspective grid floor */
.ph-grid {
  position: absolute;
  left: -10%; right: -10%;
  bottom: -2%;
  height: 55%;
  background:
    linear-gradient(rgba(155,108,255,0.4) 1px, transparent 1px) 0 0/60px 60px,
    linear-gradient(90deg, rgba(155,108,255,0.4) 1px, transparent 1px) 0 0/60px 60px;
  transform: perspective(700px) rotateX(72deg);
  transform-origin: 50% 0%;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  opacity: 0.55;
  animation: phGridPan 16s linear infinite;
}
@keyframes phGridPan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 60px, 60px 0; }
}

/* Volumetric light rays */
.ph-rays {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 1100px; height: 100%;
  background:
    linear-gradient(180deg, rgba(255,220,150,0.10) 0%, transparent 60%) 14% 0/8% 100% no-repeat,
    linear-gradient(180deg, rgba(180,200,255,0.10) 0%, transparent 60%) 32% 0/6% 100% no-repeat,
    linear-gradient(180deg, rgba(255,220,150,0.16) 0%, transparent 60%) 50% 0/10% 100% no-repeat,
    linear-gradient(180deg, rgba(180,200,255,0.10) 0%, transparent 60%) 66% 0/7% 100% no-repeat,
    linear-gradient(180deg, rgba(255,220,150,0.10) 0%, transparent 60%) 84% 0/9% 100% no-repeat;
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: phRays 9s ease-in-out infinite alternate;
}
@keyframes phRays {
  0%   { opacity: 0.5; transform: translateX(-50%) skewX(-3deg); }
  100% { opacity: 0.95; transform: translateX(-50%) skewX(3deg); }
}

/* Aurora ribbons */
.ph-aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.ph-aurora-1 {
  left: -20%; top: 30%;
  width: 90%; height: 120px;
  background: linear-gradient(90deg, transparent, rgba(159,214,52,0.5), rgba(46,111,230,0.5), transparent);
  transform: rotate(-6deg);
  animation: phAuroraSlide 14s ease-in-out infinite;
}
.ph-aurora-2 {
  right: -20%; top: 56%;
  width: 90%; height: 110px;
  background: linear-gradient(90deg, transparent, rgba(245,208,32,0.4), rgba(155,108,255,0.55), transparent);
  transform: rotate(4deg);
  animation: phAuroraSlide 18s ease-in-out -6s infinite reverse;
}
@keyframes phAuroraSlide {
  0%, 100% { transform: translateX(0) rotate(-6deg); opacity: 0.7; }
  50%      { transform: translateX(8%) rotate(-4deg); opacity: 1; }
}

.ph-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(80% 70% at 50% 55%, transparent 50%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

/* ===== Orbiting concentric rings (rotate around model) ===== */
.ph-orbit {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 880px; height: 880px;
  pointer-events: none;
  z-index: 1;
}
.ph-orbit svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ph-orbit-1 { animation: phOrbit 60s linear infinite; }
.ph-orbit-2 { width: 660px; height: 660px; animation: phOrbit 40s linear infinite reverse; }
.ph-orbit-3 { width: 540px; height: 540px; animation: phOrbit 90s linear infinite; opacity: 0.7; }
@keyframes phOrbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== Lightning glints ===== */
.ph-lightning {
  position: absolute;
  width: 2px; height: 0;
  background: linear-gradient(180deg, transparent, #fff, rgba(180,220,255,0.9), transparent);
  filter: blur(0.6px);
  box-shadow: 0 0 18px rgba(180,220,255,0.9), 0 0 30px rgba(155,108,255,0.7);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
.ph-lightning-1 { left: 22%; top: 10%; animation: phStrike 7s ease-in -0s infinite; }
.ph-lightning-2 { right: 16%; top: 14%; animation: phStrike 9s ease-in -3.2s infinite; }
.ph-lightning-3 { left: 50%; top: 6%; animation: phStrike 11s ease-in -5.5s infinite; }
@keyframes phStrike {
  0%, 92%, 100% { height: 0; opacity: 0; }
  93%           { height: 60vh; opacity: 0.95; }
  94%           { opacity: 0.2; }
  95%           { opacity: 0.95; }
  96%           { opacity: 0; }
}

/* ===== Floating runes ===== */
.ph-glyph {
  position: absolute;
  font-family: var(--font-mono);
  color: rgba(245,208,32,0.5);
  text-shadow: 0 0 12px rgba(245,208,32,0.6);
  pointer-events: none;
  z-index: 2;
  animation: phGlyphFloat 10s ease-in-out infinite;
}
.ph-glyph.g1 { top: 14%; left: 12%; font-size: 22px; animation-delay: -1s; }
.ph-glyph.g2 { top: 22%; right: 14%; font-size: 18px; color: rgba(155,108,255,0.55); animation-delay: -3s; }
.ph-glyph.g3 { bottom: 28%; left: 8%; font-size: 16px; color: rgba(159,214,52,0.5); animation-delay: -5s; }
.ph-glyph.g4 { top: 60%; right: 9%; font-size: 24px; color: rgba(245,80,180,0.55); animation-delay: -2s; }
.ph-glyph.g5 { top: 8%; left: 48%; font-size: 14px; color: rgba(180,220,255,0.6); animation-delay: -7s; }
.ph-glyph.g6 { bottom: 18%; right: 28%; font-size: 18px; color: rgba(245,208,32,0.55); animation-delay: -4s; }
@keyframes phGlyphFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
  50%      { transform: translate(6px, -10px) rotate(8deg); opacity: 1; }
}

/* ===== Pedestal & spotlight ===== */
.ph-pedestal {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  width: 720px;
  height: 80px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(245,208,32,0.4), rgba(155,108,255,0.25) 40%, transparent 70%);
  filter: blur(24px);
  z-index: 1;
  pointer-events: none;
  animation: phPedestalPulse 4s ease-in-out infinite;
}
@keyframes phPedestalPulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.06); }
}
.ph-spotlight {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 720px; height: 100%;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(255,240,200,0.18), transparent 70%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.ph-shadow {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: 460px; height: 36px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.7), transparent 70%);
  filter: blur(14px);
  z-index: 2;
}

/* ===== PAUL wordmark — back/front for popout ===== */
.ph-wordmark {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-weight: 900;
  font-size: clamp(220px, 32vw, 480px);
  letter-spacing: -0.04em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  text-transform: uppercase;
}
.ph-wordmark-back {
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(245,208,32,0.95) 0%,
    rgba(245,80,180,0.95) 35%,
    rgba(155,108,255,0.95) 70%,
    rgba(46,111,230,0.95) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 60px rgba(245,208,32,0.45)) drop-shadow(0 0 100px rgba(155,108,255,0.55));
  animation: phWordmarkPulse 6s ease-in-out infinite;
}
@keyframes phWordmarkPulse {
  0%, 100% { filter: drop-shadow(0 8px 60px rgba(245,208,32,0.45)) drop-shadow(0 0 100px rgba(155,108,255,0.55)); }
  50%      { filter: drop-shadow(0 8px 80px rgba(245,80,180,0.55)) drop-shadow(0 0 130px rgba(46,111,230,0.65)); }
}
.ph-wordmark-front {
  z-index: 4;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255,255,255,0.18);
  /* Mask out the bottom half so the model "pops out" through the wordmark */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 38%);
          mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 38%);
  pointer-events: none;
}

/* ===== 3D model wrapper ===== */
.ph-model-wrap {
  position: relative;
  z-index: 3;
  width: min(90vw, 820px);
  height: min(90vh, 820px);
  margin: 0 auto;
  /* Slight float */
  animation: phModelFloat 7s ease-in-out infinite;
  filter: drop-shadow(0 50px 60px rgba(0,0,0,0.8)) drop-shadow(0 0 80px rgba(155,108,255,0.4));
}
@keyframes phModelFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.ph-model-wrap model-viewer {
  width: 100%;
  height: 100%;
  --progress-bar-color: transparent;
  --progress-bar-height: 0;
}

/* ===== Eyebrow + meta ===== */
.ph-eyebrow {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(245,208,32,0.4);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
}
.ph-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime, #9FD634);
  box-shadow: 0 0 12px var(--lime, #9FD634);
  animation: phPulse 1.4s ease-in-out infinite;
}
@keyframes phPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.ph-meta {
  position: absolute;
  left: 0; right: 0;
  bottom: 28px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}
.ph-title-row {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ph-meta-side {
  display: flex; flex-direction: column;
  color: rgba(255,255,255,0.85);
}
.ph-meta-side b {
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-size: 22px;
  font-weight: 900;
  color: var(--gold, #F5D020);
  letter-spacing: 0;
}
.ph-meta-side i {
  font-style: normal;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
  letter-spacing: 0.18em;
}
.ph-meta-side.ph-meta-right { align-items: flex-end; }
.ph-meta-mid {
  font-size: 22px;
  color: rgba(245,208,32,0.7);
  text-shadow: 0 0 12px rgba(245,208,32,0.6);
  animation: phPulse 2s ease-in-out infinite;
}
.ph-scroll-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.ph-arrow {
  display: inline-block;
  animation: phBounce 1.8s ease-in-out infinite;
}
@keyframes phBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(6px); opacity: 1; }
}

@media (max-width: 900px) {
  .paul-hero { height: 720px; min-height: 80vh; }
  .ph-wordmark { font-size: clamp(140px, 36vw, 260px); }
  .ph-orbit-1 { width: 600px; height: 600px; }
  .ph-orbit-2 { width: 460px; height: 460px; }
  .ph-orbit-3 { width: 380px; height: 380px; }
  .ph-pedestal { width: 480px; }
  .ph-title-row { gap: 14px; font-size: 10px; }
  .ph-meta-side b { font-size: 16px; }
}

/* =========================================================
   PaulHero v2 — Premium Cinematic Stage
   These rules override the older .paul-hero look when used with .v2.
   ========================================================= */

.paul-hero.v2 {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 920px;
  overflow: hidden;
  isolation: isolate;
  background: #02020a;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === Deep gradient mesh backdrop === */
.paul-hero.v2 .ph-bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 80% at 50% 100%, rgba(80,40,180,0.6), transparent 70%),
    radial-gradient(60% 40% at 50% 0%,   rgba(40,30,90,0.5),  transparent 70%),
    linear-gradient(180deg, #03030f 0%, #050316 50%, #02020a 100%);
}

/* === Slowly drifting mesh-gradient layer (premium feel) === */
.paul-hero.v2 .ph-mesh {
  position: absolute; inset: -10%;
  background:
    radial-gradient(40% 50% at 30% 35%, rgba(155,108,255,0.45), transparent 65%),
    radial-gradient(35% 45% at 72% 55%, rgba(46,111,230,0.40),  transparent 65%),
    radial-gradient(40% 50% at 50% 80%, rgba(245,80,180,0.35),  transparent 65%),
    radial-gradient(30% 40% at 20% 70%, rgba(245,208,32,0.20),  transparent 65%);
  filter: blur(60px) saturate(1.2);
  mix-blend-mode: screen;
  animation: phMeshDrift 22s ease-in-out infinite alternate;
}
@keyframes phMeshDrift {
  0%   { transform: translate3d(0,0,0) scale(1.0); }
  100% { transform: translate3d(-2%, -1.5%, 0) scale(1.08); }
}

/* === Subtle micro-stars (single fine layer) === */
.paul-hero.v2 .ph-stars-fine {
  position: absolute; inset: -50%;
  background-image:
    radial-gradient(0.8px 0.8px at 20% 30%, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(0.8px 0.8px at 80% 70%, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px   1px   at 65% 22%, rgba(180,200,255,0.9)  50%, transparent 100%),
    radial-gradient(0.6px 0.6px at 35% 80%, rgba(255,255,255,0.7)  50%, transparent 100%),
    radial-gradient(1px   1px   at 90% 50%, rgba(255,220,180,0.8)  50%, transparent 100%),
    radial-gradient(0.8px 0.8px at 12% 60%, rgba(255,255,255,0.7)  50%, transparent 100%);
  background-size: 480px 480px;
  background-repeat: repeat;
  animation: phStarsDriftFine 90s linear infinite;
  opacity: 0.55;
}
@keyframes phStarsDriftFine {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-220px, -160px, 0); }
}

/* === Volumetric god ray from above === */
.paul-hero.v2 .ph-godray {
  position: absolute;
  left: 50%; top: -10%;
  transform: translateX(-50%);
  width: 800px; height: 110%;
  background:
    linear-gradient(180deg,
      rgba(255,235,180,0.18) 0%,
      rgba(255,200,140,0.10) 35%,
      transparent 75%);
  filter: blur(40px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  animation: phGodRayBreathe 7s ease-in-out infinite;
}
@keyframes phGodRayBreathe {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scaleX(0.95); }
  50%      { opacity: 0.85; transform: translateX(-50%) scaleX(1.08); }
}

/* === Animated horizon light sweep === */
.paul-hero.v2 .ph-sweep {
  position: absolute;
  left: -30%; top: 50%;
  width: 160%; height: 6px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), rgba(245,80,180,0.6), rgba(155,108,255,0.6), transparent);
  filter: blur(8px);
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
  animation: phSweep 9s ease-in-out infinite;
  opacity: 0;
}
@keyframes phSweep {
  0%, 30%   { opacity: 0; transform: translateY(0) scaleX(0.6); }
  50%       { opacity: 0.9; transform: translateY(-30px) scaleX(1.0); }
  70%, 100% { opacity: 0; transform: translateY(-60px) scaleX(0.6); }
}

/* === Iridescent stage floor + perspective grid === */
.paul-hero.v2 .ph-floor {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 0;
  height: 50%;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(120,80,255,0.35), transparent 72%),
    linear-gradient(180deg, rgba(46,111,230,0.18), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
.paul-hero.v2 .ph-floor-grid {
  position: absolute;
  left: -10%; right: -10%;
  bottom: -2%;
  height: 48%;
  background:
    linear-gradient(rgba(155,108,255,0.30) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg, rgba(155,108,255,0.30) 1px, transparent 1px) 0 0/56px 56px;
  transform: perspective(800px) rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 78%, transparent 100%);
  opacity: 0.5;
  z-index: 1;
  animation: phGridPan2 18s linear infinite;
  pointer-events: none;
}
@keyframes phGridPan2 {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 56px, 56px 0; }
}

/* === Refined pedestal/spotlight (overrides chunky old ones) === */
.paul-hero.v2 .ph-pedestal {
  position: absolute;
  left: 50%; bottom: 12%;
  transform: translateX(-50%);
  width: 580px; height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255,220,140,0.55), rgba(155,108,255,0.30) 40%, transparent 72%);
  filter: blur(28px);
  z-index: 1;
  pointer-events: none;
  animation: phPedestalPulse2 4.5s ease-in-out infinite;
}
@keyframes phPedestalPulse2 {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(0.96); }
  50%      { opacity: 1.0; transform: translateX(-50%) scale(1.08); }
}
.paul-hero.v2 .ph-spotlight {
  position: absolute;
  left: 50%; top: -10%;
  transform: translateX(-50%);
  width: 600px; height: 105%;
  background:
    radial-gradient(45% 100% at 50% 0%, rgba(255,235,180,0.20), transparent 72%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.paul-hero.v2 .ph-shadow {
  position: absolute;
  left: 50%; bottom: 9%;
  transform: translateX(-50%);
  width: 380px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.78), transparent 70%);
  filter: blur(14px);
  z-index: 2;
  pointer-events: none;
}

/* === Conic rainbow rim-glow halo behind model === */
.paul-hero.v2 .ph-rim-glow {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 720px; height: 720px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  background:
    conic-gradient(from 0deg,
      rgba(245,80,180,0.55) 0deg,
      rgba(245,208,32,0.55) 80deg,
      rgba(159,214,52,0.55) 160deg,
      rgba(46,111,230,0.55) 240deg,
      rgba(155,108,255,0.55) 320deg,
      rgba(245,80,180,0.55) 360deg);
  filter: blur(80px);
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: phRimRotate2 30s linear infinite, phRimPulse2 5s ease-in-out infinite;
}
@keyframes phRimRotate2 { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes phRimPulse2 {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.75; }
}

/* === Cursor-tracked parallax on model wrap === */
.paul-hero.v2 .ph-model-wrap {
  position: relative;
  z-index: 4;
  width: min(96vw, 940px);
  height: min(92vh, 820px);
  margin: 0 auto;
  filter:
    drop-shadow(0 60px 70px rgba(0,0,0,0.85))
    drop-shadow(0 0 90px rgba(155,108,255,0.55))
    drop-shadow(0 0 130px rgba(245,80,180,0.32));
  transform: translate3d(calc(var(--ph-cx, 0) * 14px), calc(var(--ph-cy, 0) * 8px - 14px + 14px * sin(0)), 0);
  animation: phModelFloat2 6.5s ease-in-out infinite;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes phModelFloat2 {
  0%, 100% { transform: translate3d(calc(var(--ph-cx, 0) * 14px),  calc(var(--ph-cy, 0) * 8px), 0); }
  50%      { transform: translate3d(calc(var(--ph-cx, 0) * 14px), calc(var(--ph-cy, 0) * 8px - 14px), 0); }
}

/* === HUD top bar === */
.paul-hero.v2 .ph-hud-top {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(8,6,22,0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 0 30px rgba(155,108,255,0.25);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.paul-hero.v2 .ph-hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.paul-hero.v2 .ph-hud-pill .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime, #9FD634);
  box-shadow: 0 0 10px var(--lime, #9FD634);
  animation: phPulseDot 1.4s ease-in-out infinite;
}
.paul-hero.v2 .ph-hud-pill b {
  color: var(--lime, #9FD634);
  font-weight: 800;
  letter-spacing: 0.22em;
}
.paul-hero.v2 .ph-hud-divider {
  width: 1px; height: 18px;
  background: rgba(255,255,255,0.12);
}
.paul-hero.v2 .ph-hud-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.paul-hero.v2 .ph-hud-stat i {
  font-style: normal;
  font-size: 9px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.22em;
}
.paul-hero.v2 .ph-hud-stat b {
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-size: 16px;
  font-weight: 900;
  color: var(--gold, #F5D020);
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(245,208,32,0.45);
}
@keyframes phPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* === Bottom scroll cue === */
.paul-hero.v2 .ph-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.paul-hero.v2 .ph-scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.5));
}
.paul-hero.v2 .ph-scroll-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.55);
}
.paul-hero.v2 .ph-arrow {
  font-size: 14px;
  color: rgba(245,208,32,0.85);
  text-shadow: 0 0 12px rgba(245,208,32,0.6);
  animation: phBounce2 1.8s ease-in-out infinite;
}
@keyframes phBounce2 {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* === Override — hide v1 elements that aren't used in v2 === */
.paul-hero.v2 .ph-stars,
.paul-hero.v2 .ph-grid,
.paul-hero.v2 .ph-rays,
.paul-hero.v2 .ph-orbit,
.paul-hero.v2 .ph-lightning,
.paul-hero.v2 .ph-glyph,
.paul-hero.v2 .ph-wordmark,
.paul-hero.v2 .ph-eyebrow,
.paul-hero.v2 .ph-meta {
  display: none !important;
}

@media (max-width: 900px) {
  .paul-hero.v2 { height: 760px; min-height: 84vh; }
  .paul-hero.v2 .ph-rim-glow { width: 520px; height: 520px; }
  .paul-hero.v2 .ph-pedestal { width: 420px; }
  .paul-hero.v2 .ph-godray { width: 540px; }
  .paul-hero.v2 .ph-hud-top { gap: 10px; padding: 8px 14px; font-size: 9px; }
  .paul-hero.v2 .ph-hud-stat b { font-size: 13px; }
  .paul-hero.v2 .ph-hud-divider { height: 14px; }
}

/* =========================================================
   PHASE 1 — UI polish tokens (eases, shadows, glass, edges)
   ========================================================= */
:root {
  /* Easing curves — used by all transitions */
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-back:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-quart:cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:      cubic-bezier(0.2, 0.9, 0.25, 1.25);

  /* Shadow stack — layered, paint-order matters (deepest first) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
  --shadow-md: 0 4px 8px rgba(0,0,0,0.45), 0 12px 24px -8px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset;
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.5),  0 24px 48px -12px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.08) inset;
  --shadow-xl: 0 12px 24px rgba(0,0,0,0.55), 0 40px 70px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.10) inset;

  /* Glow tints (gold + purple + magenta) */
  --glow-gold:    0 0 30px rgba(245,208,32,0.25);
  --glow-purple:  0 0 40px rgba(155,108,255,0.30);
  --glow-magenta: 0 0 36px rgba(245,80,180,0.25);

  /* Glass surfaces */
  --glass-bg:    rgba(20,12,38,0.55);
  --glass-bg-2:  rgba(34,18,68,0.55);
  --glass-edge:  rgba(255,255,255,0.08);
  --glass-blur:  blur(14px) saturate(1.18);
}

/* Better text rendering site-wide */
html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { backface-visibility: hidden; }

/* Buttons — unified hover/active polish */
.btn-3d, .btn-connect {
  transition:
    transform   220ms var(--ease-out-back),
    box-shadow  220ms var(--ease-out-quart),
    filter      220ms var(--ease-out-quart),
    color       180ms var(--ease-out-quart),
    background  180ms var(--ease-out-quart);
  will-change: transform, box-shadow;
}
.btn-3d:hover, .btn-connect:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px -8px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.10) inset,
    var(--glow-gold);
}
.btn-3d:active, .btn-connect:active {
  transform: translateY(0);
  transition-duration: 80ms;
}
.btn-3d:focus-visible, .btn-connect:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* All cards — base glass + hover lift + edge highlight */
.card,
.hiw-card,
.jumbo-stat,
.commandment-card,
.commandment-tile,
.host-card,
.bracket-node,
.cope-card,
.pari-table {
  position: relative;
  transition:
    transform   320ms var(--ease-out-quart),
    box-shadow  320ms var(--ease-out-quart),
    border-color 320ms var(--ease-out-quart),
    filter      320ms var(--ease-out-quart);
  will-change: transform, box-shadow;
}

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.45); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(155,108,255,0.6), rgba(245,80,180,0.5));
  border-radius: 8px;
  border: 2px solid rgba(0,0,0,0.4);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(155,108,255,0.85), rgba(245,80,180,0.75));
}

/* Selection */
::selection { background: rgba(245,208,32,0.35); color: #fff; }

/* Focus ring on links/buttons (a11y) */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* =========================================================
   PHASE 2 — Card hover lift + edge highlight (works on top of JS tilt)
   ========================================================= */
.hiw-card,
.jumbo-stat,
.commandment-tile,
.commandment-card,
.cope-card,
.host-card,
.bracket-node {
  /* Layered glass surface for richer depth */
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 0 rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
}
.hiw-card::before,
.jumbo-stat::before,
.commandment-tile::before,
.cope-card::before,
.host-card::before,
.bracket-node::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 30%, transparent 70%, rgba(245,208,32,0.08) 100%);
  opacity: 0.6;
  transition: opacity 320ms var(--ease-out-quart);
}
.hiw-card:hover,
.jumbo-stat:hover,
.commandment-tile:hover,
.cope-card:hover,
.host-card:hover,
.bracket-node:hover {
  border-color: rgba(245,208,32,0.30);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -2px 0 rgba(0,0,0,0.5),
    var(--glow-gold);
  filter: brightness(1.08);
}
.hiw-card:hover::before,
.jumbo-stat:hover::before,
.commandment-tile:hover::before,
.cope-card:hover::before,
.host-card:hover::before,
.bracket-node:hover::before {
  opacity: 1;
}

/* =========================================================
   PHASE 3 — Cursor halo (custom pointer accent)
   ========================================================= */
.ux-cursor-halo { display: none !important; }

/* =========================================================
   PHASE 4 — Scroll-reveal animations
   ========================================================= */
.ux-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   720ms var(--ease-out-quart),
    transform 720ms var(--ease-out-quart);
  will-change: opacity, transform;
}
.ux-in-view {
  opacity: 1;
  transform: none;
}

/* Eyebrow / kicker reveal — slightly different feel */
.eyebrow.ux-reveal,
.ph-eyebrow.ux-reveal {
  transform: translateY(8px);
}

/* =========================================================
   Top-nav refinements — crisper edges + glass refinement
   ========================================================= */
.topnav-inner {
  /* refine the existing rich bg with a subtle inner highlight */
  position: relative;
}
.topnav-inner > * { position: relative; z-index: 2; }

/* Buy $WCI26 button — make it the brightest accent */
.btn-buy {
  position: relative;
  overflow: hidden;
}
.btn-buy::before {
  /* moving sheen */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 700ms var(--ease-out-quart);
}
.btn-buy:hover::before {
  transform: translateX(130%);
}

/* Pari-Mutuel pool/bracket — refined edges */
.pari-table,
.bracket-node {
  border-radius: 18px;
  backdrop-filter: var(--glass-blur);
}

/* Stat boxes — bigger numbers crisp */
.jumbo-stat .val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* LIVE dot — refined pulse */
.live-dot,
.dot {
  position: relative;
}
.live-dot::after,
.ph-eyebrow .dot::after,
.ph-hud-pill .dot::after,
.hero-eyebrow .dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: livePing 1.6s var(--ease-out-quart) infinite;
}
@keyframes livePing {
  0%   { transform: scale(0.4); opacity: 0.7; }
  90%  { transform: scale(1.6); opacity: 0;   }
  100% { transform: scale(1.6); opacity: 0;   }
}

/* Section transitions — horizontal divider sweep */
.section + .section,
.jumbotron + .section,
.hero + .ticker {
  position: relative;
}

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

/* =========================================================
   PHASE 5+ — Hero word stagger, ripples, bracket pulse, parallax
   ========================================================= */

/* Hero h1 word reveal — words visible by default; only hidden once JS arms then revealed */
.hero-h1 .ux-word {
  display: inline-block;
  transition:
    opacity   720ms var(--ease-out-quart),
    transform 720ms var(--ease-out-back),
    filter    720ms var(--ease-out-quart);
  will-change: opacity, transform, filter;
}
.hero-h1.ux-hero-armed .ux-word {
  opacity: 0;
  transform: translateY(38px) rotate(-2deg) scale(0.94);
  filter: blur(8px);
}
.hero-h1.ux-hero-armed.ux-hero-in .ux-word {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Click ripple */
.ux-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,0.55), rgba(245,208,32,0.30) 55%, transparent 75%);
  transform: scale(0);
  animation: uxRipple 600ms var(--ease-out-quart) forwards;
  mix-blend-mode: screen;
}
@keyframes uxRipple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

/* Bracket card pulse — energy on the data viz */
.ux-bracket-pulse {
  animation: uxBracketPulse 4s var(--ease-out-quart) infinite;
  animation-delay: var(--ux-pulse-delay, 0s);
}
@keyframes uxBracketPulse {
  0%, 100% { box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.10); }
  50%      { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.18), 0 0 24px rgba(245,208,32,0.18); }
}

/* Hero CTA secondary feedback */
.hero-cta-row .btn-3d {
  position: relative;
  overflow: hidden;
}

/* Page-bg parallax base — keeps the deep gradient anchored even with translate */
.page-bg, .grain {
  will-change: transform;
}

/* Scroll-tentacles parallax — accept transforms without resetting their own animation */
.scroll-tentacles svg {
  will-change: transform;
}

/* Section header reveal feel — eyebrow slides slightly */
.eyebrow {
  letter-spacing: 0.22em;
}

/* Number readability inside cards */
.hl-num,
.jumbo-stat .val,
.pm-payout .v,
.pm-stake-row .stake-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* HoverCard depth — make cards crisper at edges with a subtle outer ring on hover */
.hiw-card,
.commandment-tile,
.cope-card,
.host-card,
.bracket-node,
.jumbo-stat {
  transform-origin: center center;
}

/* Drift the wavy rainbow underline beneath PAUL PICKS — animate the ::after only */
.hero-h1 .rainbow-under::after {
  background-size: 200% 100%;
  animation: rainbowDrift 8s linear infinite;
  background-image: linear-gradient(90deg,
    var(--fifa-red), var(--fifa-orange), var(--fifa-yellow),
    var(--fifa-lime), var(--fifa-teal), var(--fifa-blue),
    var(--fifa-purple), var(--fifa-magenta), var(--fifa-red));
}
@keyframes rainbowDrift {
  to { background-position: -200% 0%; }
}

/* ===== Sparkles around the model — extra popout ===== */
.ph-sparkle {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0%, rgba(255,255,255,0.9) 30%, rgba(245,208,32,0) 70%);
  box-shadow:
    0 0 12px rgba(255,255,255,0.95),
    0 0 24px rgba(245,208,32,0.7),
    0 0 40px rgba(155,108,255,0.5);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  filter: blur(0.4px);
  animation: phSparkle 5s ease-in-out infinite;
}
.ph-sparkle.s1 { top: 18%; left: 28%; animation-delay: -0.0s; }
.ph-sparkle.s2 { top: 24%; right: 30%; width: 6px; height: 6px; animation-delay: -0.6s; }
.ph-sparkle.s3 { top: 38%; left: 18%; width: 10px; height: 10px; animation-delay: -1.2s;
  background: radial-gradient(closest-side, #fff 0%, rgba(255,200,120,0.95) 35%, transparent 70%); }
.ph-sparkle.s4 { top: 46%; right: 16%; width: 7px; height: 7px; animation-delay: -1.8s;
  background: radial-gradient(closest-side, #fff 0%, rgba(180,220,255,0.95) 35%, transparent 70%); }
.ph-sparkle.s5 { top: 56%; left: 24%; animation-delay: -2.4s; }
.ph-sparkle.s6 { top: 60%; right: 26%; width: 9px; height: 9px; animation-delay: -3.0s;
  background: radial-gradient(closest-side, #fff 0%, rgba(245,80,180,0.95) 35%, transparent 70%); }
.ph-sparkle.s7 { top: 72%; left: 36%; width: 6px; height: 6px; animation-delay: -3.6s; }
.ph-sparkle.s8 { top: 32%; left: 50%; width: 5px; height: 5px; animation-delay: -4.2s;
  background: radial-gradient(closest-side, #fff 0%, rgba(159,214,52,0.95) 35%, transparent 70%); }
@keyframes phSparkle {
  0%, 100% { opacity: 0; transform: scale(0.4) translateY(0); }
  20%      { opacity: 1; transform: scale(1.4) translateY(-6px); }
  40%      { opacity: 0.5; transform: scale(0.9) translateY(-12px); }
  60%      { opacity: 0; transform: scale(0.3) translateY(-18px); }
}

/* ===== Holographic rim glow ring behind the model ===== */
.ph-rim-glow {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 760px; height: 760px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  background:
    conic-gradient(from 0deg,
      rgba(245,80,180,0.55) 0deg,
      rgba(245,208,32,0.55) 80deg,
      rgba(159,214,52,0.55) 160deg,
      rgba(46,111,230,0.55) 240deg,
      rgba(155,108,255,0.55) 320deg,
      rgba(245,80,180,0.55) 360deg);
  filter: blur(70px);
  mix-blend-mode: screen;
  opacity: 0.65;
  animation: phRimRotate 24s linear infinite, phRimPulse 5s ease-in-out infinite;
}
@keyframes phRimRotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes phRimPulse {
  0%, 100% { opacity: 0.55; filter: blur(70px); }
  50%      { opacity: 0.85; filter: blur(60px); }
}

/* ===== Stronger model drop shadow + glow ===== */
.ph-model-wrap {
  filter:
    drop-shadow(0 60px 70px rgba(0,0,0,0.85))
    drop-shadow(0 0 100px rgba(155,108,255,0.55))
    drop-shadow(0 0 140px rgba(245,80,180,0.35)) !important;
}