/* ============================================================
   TheStadiumAI — Website Design System
   Deep navy + champagne gold. Premium, restrained, cinematic.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Surfaces — Stadium Black (black dominates the surface) */
  --bg-deep:    #03050C;
  --bg:         #07090D;
  --bg-2:       #0D1018;
  --surface:    #11151F;
  --surface-2:  #131826;
  --card:       #151B29;

  /* Electric Blue — primary / brand (canonical pitch tokens, mapped onto legacy --gold* names) */
  --gold:        #2A5CFF;
  --gold-bright: #5B82FF;
  --gold-light:  #8BAFFF;
  --gold-deep:   #1842D6;

  /* Premium Gold — canonical "Stand" tier hint, sparing use only */
  --champ:        #FFC93F;
  --champ-bright: #FFE08A;
  --champ-deep:   #E0A411;
  --champ-glow:   0 0 40px rgba(255,201,63,0.45);

  /* Signal Red — canonical secondary */
  --secondary:        #FF2D4B;
  --secondary-bright: #FF6075;
  --red:              #FF2D4B;
  --red-bright:       #FF6075;
  --red-light:        #FFB0B6;
  --live:             #3DDC84;

  /* Energy glows — blue + red, the twin engines */
  --red-glow:  0 0 46px rgba(255,45,75,0.45);
  --glow-hot:  0 0 60px rgba(255,45,75,0.4);

  /* Ink (on dark) */
  --white:    #FFFFFF;
  --text:     rgba(255,255,255,0.92);
  --text-dim: rgba(255,255,255,0.64);
  --muted:    rgba(255,255,255,0.42);

  /* Lines — borders are rare; rely on surface lift */
  --line:        rgba(255,255,255,0.08);
  --line-gold:   rgba(42,92,255,0.30);
  --line-strong: rgba(255,255,255,0.16);

  /* Glow — signal, not fill (CTA + live dot only) */
  --glow-gold: 0 0 44px rgba(42,92,255,0.5);

  /* Type — canonical Montserrat display / Manrope UI */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --display-stretch: 100%;
  --display-spacing: 0.005em;

  /* Rhythm */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 11vh, 150px);
  --radius: 16px;
  --radius-lg: 20px;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Type pairing variants (Tweaks) — stay within the Electric Arena family */
:root[data-type="editorial"] {
  --font-display: 'Montserrat', system-ui, sans-serif;
  --display-spacing: -0.012em;
}
:root[data-type="statement"] {
  --font-display: 'Saira Condensed', 'Montserrat', system-ui, sans-serif;
  --display-spacing: 0.01em;
}

/* Accent variant (Tweaks) — brighter electric blue */
:root[data-accent="bright"] {
  --gold:        #5B82FF;
  --gold-bright: #8BAFFF;
  --gold-light:  #BAD0FF;
  --gold-deep:   #2A5CFF;
  --line-gold:   rgba(91,130,255,0.34);
  --glow-gold:   0 0 50px rgba(91,130,255,0.5);
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
body { padding-bottom: 42px; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--gold); color: var(--white); }

/* ---------- Type helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-spacing);
  line-height: 0.92;
  color: var(--white);
  text-wrap: balance;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.lede { font-size: clamp(17px, 1.5vw, 21px); color: var(--text-dim); line-height: 1.62; text-wrap: pretty; }
.gold { color: var(--gold); }
.gold-grad {
  background: linear-gradient(100deg, var(--gold-bright), #fff 46%, var(--red-bright) 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .display { font-size: clamp(34px, 5vw, 60px); margin: 18px 0 20px; }
.center { text-align: center; margin-inline: auto; }
.center .eyebrow::before { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-stretch: 105%;
  font-size: 15px; letter-spacing: 0.02em;
  padding: 15px 26px; border-radius: 999px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  position: relative; white-space: nowrap;
}
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(42,92,255,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(42,92,255,0.65), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-ghost { color: var(--white); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-light); }
.btn-lg { padding: 18px 34px; font-size: 16px; }

/* ---------- Live dot ---------- */
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--secondary); position: relative; display: inline-block; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--secondary); opacity: .5; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }

/* ============================================================
   HEADER
   ============================================================ */
.header-wrap { position: sticky; top: 0; left: 0; right: 0; z-index: 80; }
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  transition: background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(8,17,28,0.78);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--line);
  padding-block: 11px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; flex: none; border-radius: 9px; object-fit: cover; }
.orbit-center .mk { width: 96px; height: 96px; border-radius: 20px; object-fit: cover; filter: drop-shadow(0 0 30px rgba(42,92,255,0.6)); }
.member-badge { width: 56px; height: 56px; border-radius: 13px; object-fit: cover; }

/* Opening Day countdown */
.openingday { position: relative; overflow: hidden; text-align: center;
  background: radial-gradient(70% 90% at 20% 120%, rgba(42,92,255,0.18), transparent 55%), radial-gradient(70% 90% at 80% 120%, rgba(255,45,75,0.16), transparent 55%), var(--bg-2); }
.countdown { display: flex; justify-content: center; gap: clamp(10px, 2vw, 22px); flex-wrap: wrap; }
.timebox { min-width: clamp(80px, 12vw, 138px); padding: clamp(16px,2vw,26px) clamp(10px,1.5vw,18px); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line-gold);
  box-shadow: 0 20px 50px -28px rgba(0,0,0,0.7); text-align: center; }
.timebox strong { display: block; font-family: var(--font-display); font-weight: 800; font-stretch: 108%;
  font-size: clamp(36px, 5.5vw, 66px); color: var(--gold-light); line-height: 1; font-variant-numeric: tabular-nums; }
.timebox span { display: block; margin-top: 9px; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }
.brand-name { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.02em; font-size: 21px; color: var(--white); white-space: nowrap; }
.brand-name .ai { color: var(--gold); }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { padding: 9px 13px; font-size: 13.5px; color: var(--text-dim); border-radius: 999px; white-space: nowrap; position: relative; transition: color .25s, background .25s; }
.nav a:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.nav a.active { color: var(--gold-light); }
.nav a.active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light)); box-shadow: 0 0 10px rgba(42,92,255,0.6); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.header-cta .btn { padding: 11px 20px; font-size: 14px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-strong); align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content:""; display:block; width: 18px; height: 1.6px; background: var(--white); position: relative; transition: .3s; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* Ask COACH horizontal bar (under ticker) */
.ask-coach-bar { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(42,92,255,0.1), rgba(8,17,28,0.92)); border-bottom: 1px solid var(--line);
  padding: 10px var(--gutter); }
.acb-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gold-light); white-space: nowrap; }
.acb-label svg { flex: none; }
.acb-form { display: flex; gap: 8px; width: 100%; max-width: 460px; }
.acb-form input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; font-size: 13.5px; color: var(--text); }
.acb-form input:focus { outline: none; border-color: var(--gold); }
.acb-form button { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px;
  background: var(--gold); color: #fff; font-size: 13.5px; font-weight: 600; transition: background .2s; }
.acb-form button:hover { background: var(--gold-bright); }
@media (max-width: 640px) { .acb-label span:last-child, .acb-label { font-size: 12px; } .ask-coach-bar { justify-content: flex-start; } }

/* Live ticker — fixed footer bar */
.live-ticker { position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; gap: 16px; background: rgba(8,17,28,0.94);
  backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 8px var(--gutter); overflow: hidden; }
.lt-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); flex: none; white-space: nowrap; }
.lt-track { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); flex: 1; }
.lt-row { display: flex; gap: 10px; flex: none; animation: lt-scroll 38s linear infinite; padding-right: 10px; }
.live-ticker:hover .lt-row { animation-play-state: paused; }
@keyframes lt-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.lt-game { display: flex; align-items: center; gap: 9px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); font-family: var(--font-mono); font-size: 12px;
  color: var(--text); white-space: nowrap; flex: none; }
.lt-game .lt-sport { color: var(--gold-light); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.lt-game .lt-live { display: flex; align-items: center; gap: 5px; color: var(--secondary); font-size: 10px; font-weight: 700; }
.lt-game .lt-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--secondary);
  box-shadow: 0 0 8px var(--secondary); animation: pulse 1.4s ease-in-out infinite; }
.lt-game .lt-time { color: var(--text-dim); font-size: 11px; }
.lt-headline { display: inline-flex; align-items: center; gap: 8px; padding-inline: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--champ); font-weight: 600; white-space: nowrap; flex: none; }
@media (max-width: 640px) { .lt-label span:last-child { display: none; } }
.coach-ask-banner { max-width: 560px; margin: 18px auto 26px; padding: 22px 26px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line-gold);
  box-shadow: 0 24px 54px -26px rgba(0,0,0,0.75); text-align: center; }
.coach-ask-q { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px,2.6vw,26px);
  color: var(--white); margin: 12px 0 10px; }
.coach-ask-note { font-size: 14px; color: var(--text-dim); margin-bottom: 16px; }
.coach-ask-answer { font-size: 15px; color: var(--text); line-height: 1.6; text-align: left; margin: 0 0 16px; white-space: pre-wrap; }
.coach-ask-answer.loading { color: var(--text-dim); font-style: italic; text-align: center; }

/* ============================================================
   HERO  (3 directions via [data-hero])
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: 40px; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg .void { position: absolute; inset: 0; background:
  radial-gradient(120% 90% at 50% 8%, rgba(42,92,255,0.20), transparent 42%),
  radial-gradient(70% 80% at 4% 62%, rgba(42,92,255,0.16), transparent 55%),
  radial-gradient(70% 80% at 96% 62%, rgba(255,45,75,0.16), transparent 55%),
  linear-gradient(180deg, var(--bg-deep), var(--bg) 60%, var(--bg-2)); }
.hero-bg .beam { position: absolute; top: -10%; left: 50%; width: 2px; height: 60%; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(91,130,255,0.55), rgba(91,130,255,0.18) 40%, transparent); opacity: .8; }
.hero-bg .stands { position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background-image:
    radial-gradient(2px 2px at var(--x,20%) 40%, rgba(91,130,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(42,92,255,0.4), transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
  mask-image: linear-gradient(180deg, transparent, #000 60%); }
.hero-grain { position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; pointer-events: none;
  background-image: var(--grain); z-index: 1; }
.hero-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 -120px 120px -60px var(--bg), inset 0 80px 80px -40px rgba(7,9,13,0.6); }

.hero .wrap { position: relative; z-index: 5; width: 100%; }
.hero-inner { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero h1 { font-size: clamp(48px, 9vw, 116px); margin: 22px 0; }
.hero .lede { max-width: 36ch; }

/* hero animated app-icon (tunnel direction) */
.hero-logo { display: none; }
[data-hero="tunnel"] .hero-logo { display: block; width: clamp(96px, 11vw, 142px); margin: 0 auto 4px; }
.hero-logo img { width: 100%; border-radius: 26px; filter: drop-shadow(0 0 46px rgba(42,92,255,0.4)); }

/* New primary lockup image (The Stadium FC) */
.hero-lockup { display: block; width: min(760px, 94%); margin: 0 auto 6px; border-radius: 18px;
  box-shadow: 0 50px 130px -46px rgba(42,92,255,0.55), 0 40px 110px -60px rgba(255,45,75,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  animation: lockupGlow 5.5s var(--ease) infinite; }
@keyframes lockupGlow {
  0%,100% { box-shadow: 0 50px 130px -46px rgba(42,92,255,0.55), 0 40px 110px -60px rgba(255,45,75,0.42), 0 0 0 1px rgba(255,255,255,0.05); }
  50%     { box-shadow: 0 50px 130px -40px rgba(42,92,255,0.42), 0 40px 110px -52px rgba(255,45,75,0.6),  0 0 0 1px rgba(255,255,255,0.06); }
}
/* Secondary-page hero banner (smaller) */
.page-lockup { display: block; width: min(460px, 82%); margin: 0 auto 22px; border-radius: 14px;
  box-shadow: 0 34px 90px -44px rgba(42,92,255,0.5), 0 28px 80px -54px rgba(255,45,75,0.45), 0 0 0 1px rgba(255,255,255,0.05); }
:root[data-motion="off"] .hero-lockup { animation: none; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.spots { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 13px; color: var(--text-dim); }
.spots b { color: var(--gold-light); font-family: var(--font-mono); }

/* tunnel sparks (floating particles) */
.sparks { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.spark { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold-light); box-shadow: 0 0 6px 1px rgba(91,130,255,0.6);
  animation: rise linear infinite; opacity: 0; }
.sparks.paused .spark { animation-play-state: paused; }
@keyframes rise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  10% { opacity: .9; }
  90% { opacity: .7; }
  100% { transform: translateY(-90vh) scale(1); opacity: 0; }
}

/* Direction: TUNNEL (default) — centered */
[data-hero="tunnel"] .hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
[data-hero="tunnel"] .hero-art { display: none; }
[data-hero="tunnel"] .hero-ctas, [data-hero="tunnel"] .spots { justify-content: center; }
[data-hero="tunnel"] .hero .lede { max-width: 50ch; }

/* Direction: BROADCAST — split, product shot right */
[data-hero="broadcast"] .hero-inner { grid-template-columns: 1.05fr 0.95fr; }
[data-hero="broadcast"] .hero { padding-top: 54px; }
[data-hero="broadcast"] .hero h1 { font-size: clamp(44px, 6.4vw, 88px); }

/* Direction: EDITORIAL — huge type, minimal */
[data-hero="editorial"] .hero-inner { grid-template-columns: 1fr; }
[data-hero="editorial"] .hero-art { display: none; }
[data-hero="editorial"] .hero h1 { font-size: clamp(54px, 13vw, 190px); line-height: 0.9; }
[data-hero="editorial"] .hero .lede { max-width: 44ch; }
[data-hero="editorial"] .hero-bg .void { background:
  radial-gradient(80% 60% at 78% 30%, rgba(42,92,255,0.16), transparent 50%),
  linear-gradient(180deg, var(--bg-deep), var(--bg)); }

/* Hero product art (broadcast) */
.hero-art { position: relative; display: grid; place-items: center; }
.phone {
  position: relative; width: min(340px, 78%); border-radius: 40px; overflow: hidden;
  border: 1px solid var(--line-gold);
  box-shadow: 0 50px 120px -30px rgba(0,0,0,0.8), var(--glow-gold);
  background: #000;
}
.phone img { width: 100%; }
.hero-art .float-card {
  position: absolute; background: rgba(13,27,42,0.82); backdrop-filter: blur(14px);
  border: 1px solid var(--line-gold); border-radius: 14px; padding: 12px 15px;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,0.7); font-size: 13px;
}

/* ============================================================
   MOMENTUM / TRUST BAR
   ============================================================ */
.momentum { border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,32,51,0.5), transparent); }
.momentum .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding-block: 0; }
.momentum-item { padding: 26px clamp(8px,2vw,24px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; position: relative; }
.momentum-item + .momentum-item::before { content:""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
.momentum-item .num { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: clamp(24px, 3vw, 36px); color: var(--white); }
.momentum-item .lbl { font-size: 15px; color: var(--text); font-weight: 600; }

/* ============================================================
   GENERIC CARDS
   ============================================================ */
.card-surface {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius);
}
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature {
  padding: 26px 24px 30px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .4s, background .4s;
}
.feature:hover { transform: translateY(-5px); border-color: var(--line-gold); }
.feature .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(42,92,255,0.1); border: 1px solid var(--line-gold); margin-bottom: 18px; color: var(--gold); }
.feature h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--white); margin-bottom: 7px; }
.feature p { font-size: 14.5px; color: var(--text-dim); }

/* ============================================================
   PROBLEM — split screen
   ============================================================ */
.problem { background: var(--bg-deep); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.split-panel { border-radius: var(--radius-lg); padding: clamp(26px,3vw,40px); position: relative; overflow: hidden; }
.panel-fragmented { background: #0A0D14; border: 1px solid var(--line); }
.panel-unified { background:
  radial-gradient(120% 120% at 50% 0%, rgba(42,92,255,0.14), transparent 60%), var(--bg-2);
  border: 1px solid var(--line-gold); }
.split-panel h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin-bottom: 22px; display:flex; align-items:center; gap:10px; }
.panel-fragmented h3 { color: var(--muted); }
.panel-unified h3 { color: var(--gold-light); }
.frag-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.frag-tags span { font-size: 13.5px; padding: 8px 13px; border-radius: 9px; border: 1px solid var(--line);
  color: var(--muted); background: rgba(255,255,255,0.02); }
.unified-list { display: flex; flex-direction: column; gap: 13px; }
.unified-list li { list-style: none; display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text); }
.unified-list .chk { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: rgba(42,92,255,0.14); color: var(--gold); border: 1px solid var(--line-gold); }
.problem-close { text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3.4vw, 40px); color: var(--white); margin-top: clamp(40px,5vw,64px); }
.problem-close .dim { color: var(--text-dim); display:block; font-size: .62em; font-weight: 500; font-family: var(--font-body); margin-bottom: 8px; }

/* ============================================================
   PRODUCT SPLIT (Solution / Live / Home Field / Fanatar)
   ============================================================ */
.product { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.product.reverse .product-media { order: 2; }
.product-copy h2 { font-family: var(--font-display); font-weight: 800; font-style: italic; font-stretch: var(--display-stretch);
  font-size: clamp(30px, 4vw, 52px); color: var(--white); margin: 18px 0 20px; line-height: 1.02; letter-spacing: var(--display-spacing); }
.product-media { position: relative; display: grid; place-items: center; }
.media-glow { position: absolute; inset: -8% -4%; background: radial-gradient(60% 55% at 50% 45%, rgba(42,92,255,0.20), rgba(42,92,255,0.10) 45%, transparent 72%); z-index:0; }
.device {
  position: relative; z-index: 1; border-radius: 38px; overflow: hidden;
  border: 1px solid var(--line-gold);
  box-shadow: 0 50px 110px -34px rgba(0,0,0,0.85), 0 0 60px -20px rgba(42,92,255,0.4);
  max-width: 330px;
}
.device.wide { max-width: 560px; border-radius: 18px; }
.device img { width: 100%; }
.callouts { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.callout { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 13px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line); }
.callout .v { font-family: var(--font-mono); font-weight: 700; color: var(--gold-light); font-size: 18px; min-width: 78px; }
.callout .t { font-size: 14.5px; color: var(--text-dim); }
.list-checks { display:flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.list-checks li { list-style:none; display:flex; gap: 13px; align-items:flex-start; font-size: 15.5px; color: var(--text); }
.list-checks .chk { margin-top: 2px; width: 22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; background: rgba(42,92,255,0.14); border:1px solid var(--line-gold); color: var(--gold); }
.list-checks b { color: var(--white); font-weight: 600; }

/* floating product chips */
.chip {
  position: absolute; z-index: 2; background: rgba(7,9,13,0.86); backdrop-filter: blur(12px);
  border: 1px solid var(--line-gold); border-radius: 12px; padding: 11px 14px;
  box-shadow: 0 18px 44px -16px rgba(0,0,0,0.75); font-size: 12.5px; color: var(--text);
  display: flex; align-items: center; gap: 9px;
}
.chip .mono { font-family: var(--font-mono); color: var(--gold-light); }

/* ============================================================
   DIGITAL STADIUMS — sport-accurate cards
   ============================================================ */
.sport-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; max-width: 880px; margin-inline: auto; }
.sport-card {
  position: relative; aspect-ratio: 1 / 0.94; border-radius: 50% / 44%; overflow: hidden;
  border: 2px solid var(--gold); padding: 13% 12%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center;
  box-shadow: inset 0 0 0 5px rgba(7,9,13,0.5), inset 0 0 26px rgba(0,0,0,0.55), 0 24px 54px -26px rgba(0,0,0,0.85), 0 0 26px -6px rgba(42,92,255,0.4);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.sport-card:hover { transform: translateY(-6px); border-color: var(--gold-light);
  box-shadow: inset 0 0 0 5px rgba(7,9,13,0.5), inset 0 0 26px rgba(0,0,0,0.55), 0 30px 64px -26px rgba(0,0,0,0.9), 0 0 40px -6px rgba(42,92,255,0.6); }
.sport-card::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: radial-gradient(125% 100% at 50% 50%, rgba(3,5,12,0.16) 28%, rgba(3,5,12,0.5) 68%, rgba(3,5,12,0.86) 100%); }
.sport-card .field { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.sc-top, .sc-score, .sc-bottom { position: relative; z-index: 2; }
.sc-top { display: flex; justify-content: center; align-items: center; gap: 8px; }
.sc-sport { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); text-shadow: 0 1px 6px rgba(0,0,0,0.85); }
.sc-live { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--secondary); display: flex; gap: 6px; align-items: center; }
.sc-score { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sc-team { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 13.5px; text-shadow: 0 1px 7px rgba(0,0,0,0.85); white-space: nowrap; }
.sc-team b { font-size: 25px; font-weight: 800; }
.sc-clock { font-family: var(--font-mono); font-size: 11px; color: #fff; background: rgba(0,0,0,0.5); padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.sc-bottom { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.sc-fans { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.85); text-shadow: 0 1px 5px rgba(0,0,0,0.85); }
.sc-stat { font-family: var(--font-mono); font-size: 11px; color: var(--gold-light); background: rgba(42,92,255,0.18); padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.dot-team { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.35); flex: none; }

/* --- Sport surfaces (CSS-drawn line markings) --- */
.field--football { background: repeating-linear-gradient(90deg, #1d5e34 0 12.5%, #226a3c 12.5% 25%), linear-gradient(180deg, #1f6238, #163f24); }
.field--football::before { content: ""; position: absolute; inset: 14% 7%; border: 2px solid rgba(255,255,255,0.45); }
.field--football::after { content: ""; position: absolute; left: 50%; top: 14%; bottom: 14%; width: 2px; background: rgba(255,255,255,0.6); transform: translateX(-50%); box-shadow: -3px 0 0 rgba(255,255,255,0.6), 3px 0 0 rgba(255,255,255,0.6); }

.field--basketball { background: linear-gradient(180deg, #c79a52, #b07f3a); }
.field--basketball::before { content: ""; position: absolute; inset: 12% 8%; border: 2px solid rgba(255,255,255,0.55); }
.field--basketball::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,0.55); border-radius: 50%; transform: translate(-50%,-50%); }

.field--hockey { background: linear-gradient(180deg, #e2ecf6, #c2d5e8); }
.field--hockey::before { content: ""; position: absolute; inset: 10% 7%; border: 2px solid rgba(40,80,140,0.45); border-radius: 46px / 64px; }
.field--hockey::after { content: ""; position: absolute; left: 50%; top: 10%; bottom: 10%; width: 3px; background: rgba(200,40,40,0.75); transform: translateX(-50%); box-shadow: -36px 0 0 rgba(40,90,200,0.6), 36px 0 0 rgba(40,90,200,0.6); }

.field--soccer { background: repeating-linear-gradient(180deg, #1f6a3a 0 11%, #246f3e 11% 22%), linear-gradient(180deg, #1f6238, #163f24); }
.field--soccer::before { content: ""; position: absolute; inset: 12% 8%; border: 2px solid rgba(255,255,255,0.5); }
.field--soccer::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,0.5); border-radius: 50%; transform: translate(-50%,-50%); }

.field--racing { background: radial-gradient(circle at 50% 45%, #1a1e24, #0c0e12); }
.field--racing::before { content: ""; position: absolute; inset: 16% 12%; border: 11px solid #3a4049; border-radius: 50% / 44%; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18); }
.field--racing::after { content: ""; position: absolute; left: 50%; top: 16%; width: 11px; height: 13%; transform: translateX(-50%); background: repeating-linear-gradient(#fff 0 3px, #1a1e24 3px 6px); }

.field--tennis { background: linear-gradient(180deg, #1f6fae, #184f7e); }
.field--tennis::before { content: ""; position: absolute; inset: 12% 17%; border: 2px solid rgba(255,255,255,0.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.field--tennis::after { content: ""; position: absolute; left: 12%; right: 17%; top: 50%; height: 2px; background: rgba(255,255,255,0.9); }

.field--ring { background: linear-gradient(180deg, #26334a, #18233a); }
.field--ring::before { content: ""; position: absolute; inset: 16%; border: 3px solid rgba(42,92,255,0.65);
  box-shadow: inset 0 0 0 7px rgba(255,255,255,0.07), inset 0 0 0 9px rgba(42,92,255,0.3), inset 0 0 0 16px rgba(255,255,255,0.05); }
.field--ring::after { content: ""; position: absolute; inset: 16%;
  background:
    radial-gradient(circle at 0 0, var(--gold) 5px, transparent 6px) 0 0/22px 22px no-repeat,
    radial-gradient(circle at 100% 0, var(--gold) 5px, transparent 6px) 100% 0/22px 22px no-repeat,
    radial-gradient(circle at 0 100%, var(--gold) 5px, transparent 6px) 0 100%/22px 22px no-repeat,
    radial-gradient(circle at 100% 100%, var(--gold) 5px, transparent 6px) 100% 100%/22px 22px no-repeat; }

.field--baseball { background: radial-gradient(125% 105% at 50% 100%, #246f3e 0 55%, #1c5733 55%, #163f24); }
.field--baseball::before { content: ""; position: absolute; left: 50%; bottom: 16%; width: 46%; aspect-ratio: 1; background: #9c5a2e; border: 2px solid rgba(255,255,255,0.55); transform: translateX(-50%) rotate(45deg); border-radius: 4px; }
.field--baseball::after { content: ""; position: absolute; left: 50%; bottom: 16%; width: 22%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,0.4); border-bottom: none; border-right: none; transform: translateX(-50%) rotate(45deg); }

/* ============================================================
   COACH
   ============================================================ */
.coach { background:
  radial-gradient(70% 60% at 88% 0%, rgba(255,45,75,0.10), transparent 55%),
  radial-gradient(70% 60% at 8% 10%, rgba(42,92,255,0.12), transparent 55%), var(--bg-deep); }
.coach-banner { width: min(560px, 86%); margin: 0 auto 22px; border-radius: 16px; box-shadow: 0 30px 70px -34px rgba(0,0,0,0.7); }
.coach-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 40px; }
.coach-cap { padding: 22px 20px 26px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), var(--bg-2)); transition: border-color .4s, transform .4s var(--ease); }
.coach-cap:hover { border-color: var(--line-gold); transform: translateY(-4px); }
.coach-cap .ic { width: 38px; height: 38px; border-radius: 10px; display:grid; place-items:center; color: var(--gold);
  background: rgba(42,92,255,0.1); border: 1px solid var(--line-gold); margin-bottom: 16px; }
.coach-cap h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--white); margin-bottom: 6px; }
.coach-cap p { font-size: 13.5px; color: var(--text-dim); }
.coach-badge { display:inline-flex; align-items:center; gap:7px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; color: var(--gold); border: 1px solid var(--line-gold); padding: 5px 10px; border-radius: 7px; }

/* ============================================================
   FAN COVENANT
   ============================================================ */
.covenant { background: var(--bg-2); }
.covenant-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cov-card { padding: 30px 26px 34px; border-radius: var(--radius-lg); position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--bg-2)); border: 1px solid var(--line-gold); }
.cov-card::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.5; }
.cov-card .ic { width: 46px; height: 46px; border-radius: 12px; display:grid; place-items:center; color: var(--gold);
  background: rgba(42,92,255,0.12); border: 1px solid var(--line-gold); margin-bottom: 20px; }
.cov-card h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.55vw, 19px); white-space: nowrap; color: var(--gold-light); margin-bottom: 9px; }
.cov-card p { font-size: 14px; color: var(--text-dim); }

/* ============================================================
   EVERY SPORT — mosaic
   ============================================================ */
.everysport { text-align: center; position: relative; overflow: hidden; }
.orbit { position: relative; width: min(620px, 92vw); aspect-ratio: 1; margin: 10px auto 0; }
.orbit .ring { position: absolute; inset: 0; border: 1px solid var(--champ); opacity: .5; border-radius: 50%; }
.orbit .ring.r2 { inset: 15%; opacity: .3; }
.orbit .ring.r3 { inset: 30%; opacity: .18; }
.orbit-center { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; }
.orbit-center .mk { width: 92px; height: 92px; filter: drop-shadow(0 0 30px rgba(42,92,255,0.6)); }
.orbit .node { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px;
  border-radius: 50%; display: grid; place-items: center; color: var(--champ); z-index: 2;
  background: linear-gradient(180deg, var(--surface-2), var(--bg-2)); border: 1px solid var(--champ);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6); }
.orbit .node svg { width: 26px; height: 26px; }
.orbit-spokes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.orbit-spokes line { stroke: var(--champ); stroke-width: 0.4; opacity: .55; vector-effect: non-scaling-stroke; }
.sports-line { font-family: var(--font-display); font-weight: 600; color: var(--text-dim); font-size: clamp(15px,1.7vw,19px);
  letter-spacing: .01em; max-width: 720px; margin: 30px auto 0; line-height: 1.8; }
.sports-line b { color: var(--white); font-weight: 700; }

/* ============================================================
   FOUNDING FANS
   ============================================================ */
.founding { background:
  radial-gradient(70% 80% at 18% 120%, rgba(42,92,255,0.16), transparent 55%),
  radial-gradient(70% 80% at 82% 120%, rgba(255,45,75,0.14), transparent 55%), var(--bg-deep); }
.founding-grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(36px,5vw,72px); align-items: center; }
.member-card { position: relative; border-radius: 22px; padding: 4px;
  background: linear-gradient(160deg, var(--gold-light), var(--gold) 30%, var(--gold-deep) 70%, var(--gold)); }
.member-card .inner { border-radius: 19px; background: linear-gradient(170deg, #11151F, #0A0D14); padding: clamp(26px,3vw,38px); position: relative; overflow: hidden; }
.member-card .shine { position: absolute; top: -40%; left: -20%; width: 60%; height: 180%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(91,130,255,0.14), transparent); }
.member-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.member-tier { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--gold); }
.member-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px,3vw,36px); color: var(--white); margin-top: 6px; }
.member-badge { width: 56px; height: 56px; }
.member-price { display: flex; align-items: baseline; gap: 8px; margin: 22px 0; }
.member-price .amt { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px,5vw,60px); color: var(--gold-light); }
.member-price .per { color: var(--text-dim); font-size: 15px; }
.member-perks { display: grid; gap: 11px; }
.member-perks li { list-style:none; display:flex; gap:11px; align-items:center; font-size: 14.5px; color: var(--text); }
.member-perks .chk { width:20px; height:20px; border-radius:50%; flex:none; display:grid; place-items:center; background: rgba(42,92,255,0.16); color: var(--gold); border:1px solid var(--line-gold); }
.counter-wrap { margin-top: 30px; }
.counter-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.counter-row .claimed { font-family: var(--font-mono); font-size: clamp(26px,3.4vw,40px); color: var(--white); font-weight: 700; }
.counter-row .total { font-family: var(--font-mono); color: var(--text-dim); font-size: 14px; }
.progress { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; border: 1px solid var(--line); }
.progress > i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light)); box-shadow: 0 0 18px rgba(42,92,255,0.6); }
.counter-sub { margin-top: 10px; font-size: 13px; color: var(--text-dim); font-family: var(--font-mono); }

/* ============================================================
   OWNER'S BOX
   ============================================================ */
.ownersbox { background: var(--bg-2); }
.ob-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(36px,5vw,72px); align-items: center; }
.ob-panel { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-gold);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.8); }
.ob-features { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.ob-feature { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  padding: 16px 18px; border-radius: 13px; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line); }
.ob-feature .rank { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--gold); width: 22px; }
.ob-feature .name { font-weight: 600; color: var(--white); font-size: 15px; }
.ob-feature .name span { display:block; font-weight: 400; color: var(--text-dim); font-size: 13px; }
.ob-feature .votes { font-family: var(--font-mono); color: var(--gold-light); font-size: 14px; text-align: right; }
.ob-feature .votes span { display:block; color: var(--text-dim); font-size: 11px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final { position: relative; text-align: center; overflow: hidden; padding-block: clamp(100px, 16vh, 200px); }
.final-bg { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(60% 90% at 22% 110%, rgba(42,92,255,0.30), transparent 55%),
  radial-gradient(60% 90% at 78% 110%, rgba(255,45,75,0.26), transparent 55%),
  radial-gradient(50% 40% at 50% 0%, rgba(42,92,255,0.12), transparent),
  linear-gradient(180deg, var(--bg-2), var(--bg-deep)); }
.final .tunnel-lines { position: absolute; inset: 0; z-index: 1; overflow: hidden; opacity: .5; }
.final .wrap { position: relative; z-index: 3; }
.final .mk { width: 80px; height: 80px; margin: 0 auto 26px; filter: drop-shadow(0 0 36px rgba(42,92,255,0.7)); }
.final .mk-img { display: block; width: min(320px, 74%); height: auto; border-radius: 0; margin: 0 auto 26px;
  filter: drop-shadow(0 18px 44px rgba(42,92,255,0.42)) drop-shadow(0 8px 30px rgba(255,45,75,0.22)); }
.final h2 { font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-stretch: var(--display-stretch); letter-spacing: var(--display-spacing);
  font-size: clamp(46px, 9vw, 120px); color: var(--white); margin-bottom: 18px; }
.final p { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); font-size: clamp(12px,1.4vw,15px); margin-bottom: 38px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--bg-deep); border-top: 1px solid var(--line); padding-top: clamp(56px,7vw,84px); }
.footer-top { display: flex; flex-direction: column; padding-bottom: 54px; border-bottom: 1px solid var(--line); }
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand p { font-size: 14px; color: var(--text-dim); max-width: 42ch; }
.footer-social { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.footer-social a { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--text-dim); transition: .25s; }
.footer-social a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.footer-social .handle { width: auto; padding: 0 14px; font-family: var(--font-mono); font-size: 12px; }
.footer-nav-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-bottom: 36px; }
.footer-col { border: 0; background: none; }
.footer-col summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 2px 0; }
.footer-col summary::-webkit-details-marker { display: none; }
.footer-col summary h4 { margin: 0; }
.footer-col .fc-chev { width: 14px; height: 14px; color: var(--text-dim); transition: transform .25s var(--ease); flex: none; }
.footer-col[open] .fc-chev { transform: rotate(180deg); }
.footer-col-links { display: flex; flex-direction: column; padding-top: 6px; }
.footer-social-block { border: 0; background: none; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.footer-social-block summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; }
.footer-social-block summary::-webkit-details-marker { display: none; }
.footer-social-block .fc-chev { width: 16px; height: 16px; color: var(--text-dim); transition: transform .25s var(--ease); flex: none; margin-left: auto; }
.footer-social-block[open] .fc-chev { transform: rotate(180deg); }
.footer-social-tagline { color: var(--text-dim); font-size: 14px; margin: 16px 0 20px; max-width: 60ch; }
.footer-social-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.footer-social-row > a, .reddit-group > a { height: 40px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; transition: .25s; }
.footer-social-row > a:hover, .reddit-group > a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.reddit-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 10px 6px 4px; border: 1px dashed var(--line-strong); border-radius: 14px; }
.reddit-group .rg-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); padding: 0 6px; }
@media (max-width: 900px) { .footer-nav-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-nav-grid { grid-template-columns: 1fr; row-gap: 4px; } .footer-col { border-bottom: 1px solid var(--line); padding-bottom: 10px; } .footer-col:last-child { border-bottom: 0; } }
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer-col a { display: block; font-size: 14px; color: var(--text-dim); padding: 6px 0; transition: color .2s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 0 40px; flex-wrap: wrap; }
.footer-bottom p { font-size: 13px; color: var(--muted); }
.footer-bottom .legal { display: flex; gap: 22px; }
.footer-bottom .legal a { font-size: 13px; color: var(--text-dim); }

/* ============================================================
   INVESTORS + MODAL
   ============================================================ */
.investors { background:
  radial-gradient(70% 70% at 12% 0%, rgba(42,92,255,0.10), transparent 55%), var(--bg-deep); }
.inv-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px,5vw,72px); align-items: center; }
.inv-room { border-radius: var(--radius-lg); border: 1px solid var(--line-gold); overflow: hidden;
  background: linear-gradient(170deg, var(--surface-2), var(--bg-2)); box-shadow: 0 40px 100px -44px rgba(0,0,0,0.85); }
.inv-locked { padding: clamp(30px,3.5vw,46px); text-align: center; }
.inv-lock { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 16px; display: grid; place-items: center;
  color: var(--gold); background: rgba(42,92,255,0.1); border: 1px solid var(--line-gold); }
.inv-locked h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px,2.6vw,30px); color: var(--white); margin-bottom: 10px; }
.inv-locked p { color: var(--text-dim); font-size: 15px; max-width: 38ch; margin: 0 auto 26px; }
.inv-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.inv-actions .btn { justify-content: center; }
.inv-unlocked { padding: clamp(26px,3vw,38px); }
.inv-u-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); letter-spacing: .08em; }
.inv-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.inv-tile { padding: 16px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); }
.inv-tile .k { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.inv-tile .v { display: block; font-family: var(--font-display); font-weight: 700; color: var(--gold-light); font-size: 15px; }
.inv-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.inv-doc { font-family: var(--font-mono); font-size: 13px; color: var(--text); padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); transition: .25s; }
.inv-doc:hover { color: var(--gold-light); border-color: var(--line-gold); background: rgba(42,92,255,0.06); }

/* Modal */
.modal-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px;
  background: rgba(5,10,18,0.78); backdrop-filter: blur(10px); animation: fadeIn .3s ease; }
.modal-overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { position: relative; width: min(440px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--bg-2)); border: 1px solid var(--line-gold);
  padding: clamp(28px,4vw,40px); box-shadow: 0 50px 120px -30px rgba(0,0,0,0.9), var(--glow-gold); }
.modal-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border-radius: 10px;
  font-size: 22px; color: var(--text-dim); border: 1px solid var(--line); transition: .2s; }
.modal-close:hover { color: var(--white); border-color: var(--line-strong); }
.modal-mark { width: 56px; height: 56px; margin-bottom: 18px; }
.modal-mark img { width: 100%; border-radius: 13px; }
.modal h3 { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--white); margin-bottom: 8px; }
.modal-sub { color: var(--text-dim); font-size: 14.5px; margin-bottom: 22px; }
.field-label { display: block; font-size: 12px; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
.field-label input, .field-label select { display: block; width: 100%; margin-top: 7px; padding: 13px 15px; border-radius: 11px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--line-strong); color: var(--white); font-family: var(--font-body); font-size: 15px; transition: border-color .2s; }
.field-label select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.field-label input:focus, .field-label select:focus { outline: none; border-color: var(--gold); }
.modal-err { color: #E8927C; font-size: 13px; margin: -4px 0 14px; }
.modal-note { margin-top: 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); text-align: center; }
.modal-note b { color: var(--gold); }

@media (max-width: 900px) { .inv-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .inv-tiles, .inv-docs { grid-template-columns: 1fr; } }

/* Waitlist success + video modal */
.modal-wide { width: min(880px, 100%); }
.video-frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-gold); background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.success-ring { width: 76px; height: 76px; margin: 4px auto 20px; border-radius: 50%; display: grid; place-items: center;
  color: var(--bg-deep); background: linear-gradient(180deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  box-shadow: 0 0 50px rgba(42,92,255,0.6); position: relative; z-index: 2; }
.success-burst { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); width: 76px; height: 76px; pointer-events: none; }
.success-burst span { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: ringOut 1.6s var(--ease) forwards; }
.success-burst span:nth-child(2) { animation-delay: .2s; }
.success-burst span:nth-child(3) { animation-delay: .4s; }
@keyframes ringOut { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(3.4); opacity: 0; } }
.success-detail { margin: 16px 0 4px; padding: 14px 16px; border-radius: 12px; background: rgba(42,92,255,0.08); border: 1px solid var(--line-gold);
  font-family: var(--font-mono); font-size: 13px; color: var(--gold-light); text-align: center; }
.success-detail b { color: var(--white); }

/* focus visibility (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   LANGUAGE SWITCHER (Google Translate engine, custom UI)
   ============================================================ */
.lang-switch { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--text); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; transition: .2s; }
.lang-btn:hover { border-color: var(--gold); color: var(--gold-light); }
.lang-btn .chev { transition: transform .25s; }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 180px;
  background: rgba(10,18,28,0.97); backdrop-filter: blur(18px); border: 1px solid var(--line-gold); border-radius: 14px;
  padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 120;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8); max-height: 64vh; overflow: auto; }
.lang-menu.open { display: flex; }
.lang-menu button { text-align: left; padding: 10px 13px; border-radius: 9px; color: var(--text-dim); font-size: 14px; transition: .18s; display: flex; justify-content: space-between; gap: 10px; }
.lang-menu button .code { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.lang-menu button:hover, .lang-menu button.active { background: rgba(42,92,255,0.12); color: var(--gold-light); }
.lang-menu button.active .code { color: var(--gold); }

/* Hide Google Translate default chrome */
.goog-te-banner-frame, .goog-te-gadget-icon, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-te-gadget { height: 0; overflow: hidden; }
body { top: 0 !important; }
.skiptranslate > iframe { display: none !important; visibility: hidden !important; height: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
#google_translate_element { position: absolute; left: -9999px; top: -9999px; }
@keyframes revealIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
:root[data-js] .reveal { opacity: 0; }
:root[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; }
:root[data-motion="off"] .spark, :root[data-motion="off"] .live-dot::after { animation: none; }

/* sticky mobile CTA */
.mobile-cta { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1320px) {
  .header-cta .btn-ghost { display: none; }
  .nav a { padding: 9px 11px; font-size: 13px; }
}
@media (max-width: 1080px) {
  .feature-grid, .coach-cards, .sport-grid, .covenant-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1150px) {
  .nav, .header-cta .btn-ghost { display: none; }
  .nav-toggle { display: flex; }
  .nav.open { display: flex; position: fixed; inset: 64px 12px auto 12px; flex-direction: column; align-items: stretch;
    background: rgba(10,18,28,0.97); backdrop-filter: blur(20px); border: 1px solid var(--line-gold); border-radius: 18px; padding: 12px; gap: 4px; z-index: 90; }
  .nav.open a { padding: 14px 16px; font-size: 16px; }
  .product, [data-hero="broadcast"] .hero-inner, .founding-grid, .ob-grid { grid-template-columns: 1fr !important; }
  .product.reverse .product-media { order: 0; }
  [data-hero="broadcast"] .hero-art { display: grid; max-width: 360px; margin: 10px auto 0; }
  .product-media { margin-top: 14px; }
  .split { grid-template-columns: 1fr; }
  .momentum .wrap { grid-template-columns: 1fr 1fr; }
  .momentum-item:nth-child(3)::before, .momentum-item:nth-child(odd)::before { display: none; }
  .mobile-cta { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(42px + 12px); z-index: 70; }
  .mobile-cta .btn { width: 100%; justify-content: center; padding: 16px; box-shadow: 0 16px 40px -10px rgba(0,0,0,0.7), 0 10px 30px -8px rgba(42,92,255,0.5); }
  /* the sticky mobile-cta above already covers this action — drop the header's copy so header-cta doesn't overflow narrow screens */
  .header-cta .btn.btn-primary { display: none; }
}
@media (max-width: 480px) {
  .site-header { padding: 12px 14px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: 16px; }
  .header-cta { gap: 6px; }
  .lang-btn { padding: 9px; }
  .lang-btn #langCurrent { display: none; }
  .nav-toggle { width: 38px; height: 38px; }
}
@media (max-width: 560px) {
  .feature-grid, .coach-cards, .sport-grid, .covenant-grid, .momentum .wrap { grid-template-columns: 1fr; }
  .momentum-item::before { display: none !important; }
  .hero h1 { font-size: clamp(40px, 13vw, 64px) !important; }
  .device, .phone { max-width: 280px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* print / static export — never hide content */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   CHAMPAGNE GOLD ACCENTS — highlight premium experiences
   ============================================================ */
.gold-accent { color: var(--champ) !important; }
.gold-text { background: linear-gradient(100deg, var(--champ-bright), var(--champ) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Pills / badges flagged as premium */
.pill-premium, .coach-badge {
  color: var(--champ) !important;
  border-color: rgba(232,181,74,0.45) !important;
  background: rgba(232,181,74,0.10) !important;
}
/* Champagne eyebrow variant */
.eyebrow.is-premium { color: var(--champ); }
.eyebrow.is-premium::before { background: linear-gradient(90deg, var(--champ), transparent); }

/* Founding-fan / premium surfaces get a gold rim + glow */
.card-gold {
  border-color: rgba(232,181,74,0.4) !important;
  box-shadow: var(--champ-glow), 0 30px 80px -50px rgba(0,0,0,0.7) !important;
}
.card-gold:hover { border-color: rgba(232,181,74,0.65) !important; }

/* Gold check marks for premium lists */
.list-checks.is-premium .chk { color: var(--champ); }

/* 60-days-free highlight in hero */
.spots b { color: var(--champ); }

/* ============================================================
   ADAPTIVE HERO — new lockup / store-badge layout
   ============================================================ */
.store-badges { max-width: 100%; }
@media (max-width: 640px) {
  .hero { padding-top: 28px; }
  .live-ticker { padding-block: 7px; }
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
  .store-badges { width: 100%; }
  .store-badge { flex: 1 1 160px; justify-content: center; }
}
@media (max-width: 400px) {
  .hero-ctas .btn { flex: 1 1 100%; }
  .store-badge { flex: 1 1 100%; }
  .store-badge .store-txt strong { font-size: 16px; }
}
/* keep the primary lockup from getting oversized on huge screens */
@media (min-width: 1600px) {
  .hero-lockup { width: min(820px, 60%); }
}


/* ---- Motion cost control ----
   Looping animations and live blur each hold a compositor layer for as long as they
   run. These rules stop work the user cannot see: off-screen loops (.paused, set by
   the IntersectionObserver in site.js) and everything while the tab is backgrounded. */
.paused, .paused * { animation-play-state: paused !important; }
.paused::before, .paused::after, .paused *::before, .paused *::after { animation-play-state: paused !important; }
:root[data-tab-hidden="on"] *, :root[data-tab-hidden="on"] *::before, :root[data-tab-hidden="on"] *::after { animation-play-state: paused !important; }
/* Let the browser skip layout and paint for sections that are scrolled out of view.
   contain-intrinsic-size: auto remembers the real height after first render, so this
   does not shift the scrollbar or break anchor links. */
.section:not(.hero):not(.legal) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
:root[data-motion="off"] .hero-lockup, :root[data-motion="off"] .lt-row, :root[data-motion="off"] .media-glow { animation: none; }

/* Honeypot: a field real fans never see or tab into. Anything in it is a bot,
   and the Worker silently discards the submission. Off-screen rather than
   display:none, because some bots skip undisplayed inputs. */
.hp-wrap { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }

/* Signup form assist: team / country suggestions and phone validation */
.combo-host{position:relative;display:block}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;margin:0;padding:4px;list-style:none;max-height:196px;overflow-y:auto;background:#0d1220;border:1px solid rgba(255,255,255,.14);border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.55)}
.combo-item{padding:8px 10px;border-radius:7px;font-size:14px;color:var(--white);cursor:pointer;font-family:var(--font-body)}
.combo-item:hover,.combo-item.is-active{background:rgba(42,92,255,.22)}
.combo-hint{margin:5px 0 0;font-size:12px;line-height:1.45;color:var(--text-dim);font-family:var(--font-mono)}
.combo-hint.is-err{color:#FF8A93}
.combo-undo{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;cursor:pointer}

/* Sport picker — icon-swatch radio grid in the waitlist modal. Shared: the modal
   appears on every page, so these must not live in a per-page inline <style>. */
.sport-picker { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:6px; margin-top:8px; }
@media (max-width:480px) { .sport-picker { grid-template-columns:repeat(4, minmax(0,1fr)); } }
/* The radio must be contained by its own chip. Without position:relative here the
   absolutely-positioned radio resolves against .modal, and a generic input{width:100%}
   stretches it into a full-width invisible strip — twelve of them stacked on one line,
   so a click near that line selected whichever was last in the DOM rather than the
   icon aimed at. Sizing the radio to fill its chip also makes the whole chip the hit
   target, so this no longer depends on label activation. */
.sport-opt { position:relative; }
.sport-opt .sport-radio { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; appearance:none; -webkit-appearance:none; cursor:pointer; z-index:1; }
.sport-opt { display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 4px 7px; border-radius:11px; border:1px solid var(--line-strong); background:rgba(0,0,0,0.3); color:var(--text-dim); font-size:10px; font-family:var(--font-body); text-transform:none; letter-spacing:normal; text-align:center; cursor:pointer; transition:border-color .2s, color .2s, background .2s; min-width:0; min-height:56px; justify-content:center; overflow-wrap:normal; word-break:normal; line-height:1.15; }
.sport-opt:hover { border-color:var(--line-gold); color:var(--white); }
.sport-opt:has(.sport-radio:checked) { border-color:var(--gold); color:var(--white); background:rgba(42,92,255,0.14); }
.sport-opt:has(.sport-radio:focus-visible) { outline:2px solid var(--gold); outline-offset:2px; }
.sport-swatch { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,0.06); flex:none; color:var(--text-dim); transition:background .2s,color .2s; }
.sport-swatch svg { width:17px; height:17px; }
.sport-opt:has(.sport-radio:checked) .sport-swatch { background:rgba(42,92,255,0.22); color:var(--gold-light); }

/* 18+ attestation — required on every intake form. Deliberately styled like the
   other consent rows rather than as a warning: it is a statement of who we build
   for, not a barrier. */
.field-check.age-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text-dim);margin:14px 0 4px}
.field-check.age-check input{margin-top:3px;flex:none}
.field-check.age-check.is-missing{color:#FF8A93}

/* --- 2026 logo swap: hero/page lockups are now transparent art, not a boxed image --- */
.hero-lockup { width: min(560px, 88%); border-radius: 0; box-shadow: none; animation: none;
  filter: drop-shadow(0 26px 60px rgba(42,92,255,0.45)) drop-shadow(0 10px 40px rgba(255,45,75,0.28)); }
@media (min-width: 900px) { .hero-lockup { width: min(600px, 52%); } }
.page-lockup { width: min(400px, 76%); border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 20px 50px rgba(42,92,255,0.42)) drop-shadow(0 8px 34px rgba(255,45,75,0.24)); }


/* Hero eyebrow: mirrored rule on the right so the centered line is symmetrical */
.hero-text .eyebrow::after { content: ""; width: 22px; height: 1px; background: linear-gradient(270deg, var(--gold), transparent); }

/* Wordmark FC in the brand colors — red F, blue C, mirroring the Fan Club lockup */
.brand-name .ai .f { color: var(--red); }
.brand-name .ai .c { color: var(--gold); }