@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&family=Barlow:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

  :root {
    --ink: #080A10;
    --field: #0C1420;
    --lime: #C8F135;
    --ember: #FF4C1A;
    --chalk: #F0F2F5;
    --mid: #141E30;
    --muted: #6B7B8D;
    --white: #FFFFFF;
    --gold: #E8B84B;
    --zblue: #1565FF;
    --zcyan: #00CFFF;
    --zgrad: linear-gradient(135deg, #1565FF 0%, #00CFFF 100%);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Barlow', sans-serif;
    background: var(--ink);
    color: var(--chalk);
    overflow-x: hidden;
  }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(8,10,16,0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(21,101,255,0.25);
    padding: 0 32px;
    display: flex; align-items: center; justify-content: space-between;
    height: 68px;
    gap: 16px;
    overflow: visible;
  }

  .nav-logo {
    text-decoration: none;
    flex-shrink: 0;
    display: flex; align-items: center;
    outline: none;
  }
  .nav-logo img {
    height: 46px; width: auto; object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), filter .3s ease;
  }
  .nav-logo:hover img { transform: scale(1.04); filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(0,207,255,.5)); }
  .nav-links {
    display: flex; gap: 24px; list-style: none;
    align-items: center; flex-wrap: nowrap;
    flex: 1; justify-content: flex-end;
  }
  .nav-links a {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: #8899aa; text-decoration: none;
    transition: color 0.2s; white-space: nowrap;
  }
  .nav-links a:hover { color: var(--zcyan); }
  .nav-links .nav-cta a {
    background: var(--zgrad); color: var(--white);
    padding: 9px 18px; border-radius: 2px; white-space: nowrap;
    font-size: 12px;
  }
  .nav-links .nav-cta a:hover { opacity: 0.9; }

  /* ── PAGE SYSTEM ── */
  .page { display: none; padding-top: 68px; min-height: 100vh; }
  .page.active { display: block; }

  /* ── SHARED COMPONENTS ── */
  .section { padding: 96px 40px; max-width: 1200px; margin: 0 auto; }
  .section-full { padding: 96px 40px; }
  .section-full > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

  .eyebrow {
    font-family: 'Space Mono', monospace;
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--zcyan); margin-bottom: 16px; display: block;
  }
  .eyebrow-ember { color: var(--ember); }
  .eyebrow-gold { color: var(--gold); }

  h1, h2, h3, h4 {
    font-family: 'Barlow Condensed', sans-serif;
    line-height: 1.0;
  }
  h1 { font-size: clamp(52px, 8vw, 100px); font-weight: 900; text-transform: uppercase; }
  h2 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; text-transform: uppercase; }
  h3 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; }
  h4 { font-size: 20px; font-weight: 700; }

  p { font-size: 16px; line-height: 1.7; color: #b0b8b2; }

  .btn {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 14px 28px; text-decoration: none; cursor: pointer;
    border: none; transition: all 0.2s;
  }
  .btn-lime { background: var(--zgrad); color: var(--white); }
  .btn-lime:hover { background: linear-gradient(135deg, #2575ff 0%, #20dfff 100%); color: var(--white); }
  .btn-ember { background: var(--ember); color: var(--white); }
  .btn-ember:hover { background: #ff6140; }
  .btn-outline { background: transparent; color: var(--chalk); border: 1px solid rgba(245,242,234,0.3); }
  .btn-outline:hover { border-color: var(--lime); color: var(--lime); }
  .btn-gold { background: var(--gold); color: var(--ink); }
  .btn-gold:hover { background: #f0c86b; }

  /* pitch line divider */
  .pitch-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(21,101,255,0.5) 30%, rgba(0,207,255,0.5) 70%, transparent 100%);
    margin: 0 40px;
  }

  /* ── TAG/BADGE ── */
  .badge {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 2px;
  }
  .badge-lime { background: rgba(21,101,255,0.12); color: var(--zcyan); }
  .badge-ember { background: rgba(255,76,26,0.12); color: var(--ember); }
  .badge-gold { background: rgba(232,184,75,0.12); color: var(--gold); }

  /* ── CARDS ── */
  .card {
    background: var(--field);
    border: 1px solid rgba(21,101,255,0.15);
    padding: 32px;
    transition: border-color 0.2s;
  }
  .card:hover { border-color: rgba(21,101,255,0.4); }

  /* ── GRID ── */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

  /* ── STAT BLOCK ── */
  .stat-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 56px; font-weight: 900; line-height: 1;
    background: var(--zgrad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  }
  .stat-label {
    font-family: 'Space Mono', monospace;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); margin-top: 6px;
  }

  /* ────────────────────────────────────────
     HOME PAGE
  ──────────────────────────────────────── */

  /* hero */
  .hero {
    min-height: 100vh;
    background: var(--field);
    position: relative; overflow: hidden;
    display: flex; align-items: center;
    padding: 120px 40px 80px;
  }

  .hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(21,101,255,0.05) 60px),
      repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(21,101,255,0.05) 60px);
    pointer-events: none;
  }

  .hero-crease {
    position: absolute; right: 0; top: 0; bottom: 0; width: 4px;
    background: var(--zgrad); opacity: 0.8;
  }
  .hero-crease::before {
    content: ''; position: absolute; top: 0; left: -200px; right: -200px; height: 100%;
    background: radial-gradient(ellipse at right, rgba(21,101,255,0.1) 0%, transparent 60%);
  }

  .hero-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; width: 100%; }

  .hero-sub {
    font-family: 'Space Mono', monospace;
    font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--zcyan); margin-bottom: 24px;
  }

  .hero h1 { margin-bottom: 24px; }
  .hero h1 em { background: var(--zgrad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; }
  .hero h1 .hero-line2 { color: var(--ember); -webkit-text-stroke: 0px; }

  .hero-tagline {
    font-size: 20px; font-weight: 500; color: #8a9c8c;
    margin-bottom: 48px; max-width: 560px; line-height: 1.5;
  }

  .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

  .hero-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: rgba(200,241,53,0.1);
    margin-top: 80px;
    border-top: 1px solid rgba(200,241,53,0.2);
  }
  .hero-stat {
    background: var(--field);
    padding: 32px 24px;
  }


  /* ── INTERACTIVE / HOVER ANIMATIONS ── */
  .btn{ transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .28s ease; will-change: transform; }
  .btn:hover{ transform: translateY(-3px) scale(1.035); box-shadow: 0 12px 30px rgba(0,0,0,.45); filter: brightness(1.06); }
  .btn:active{ transform: translateY(-1px) scale(.99); }

  .nav-links li:not(.nav-cta) > a{ position:relative; }
  .nav-links li:not(.nav-cta) > a::after{
    content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0;
    background:var(--zgrad); transition:width .26s cubic-bezier(.2,.8,.2,1);
  }
  .nav-links li:not(.nav-cta) > a:hover::after{ width:100%; }
  .nav-cta a{ transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease, opacity .26s ease; }
  .nav-cta a:hover{ transform: translateY(-2px); box-shadow:0 8px 22px rgba(21,101,255,.45); }

  .track-card,.pillar-card,.champ-box,.launch-item,.journey-step,.ground-card,
  .perk-card,.tier-card,.league-card,.why-stat-block,
  .quickplay-stat,.hero-stat,.process-step,.footer-col{
    transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease, background .32s ease;
    will-change: transform;
  }
  .track-card:hover,.pillar-card:hover,.champ-box:hover,.launch-item:hover,
  .journey-step:hover,.ground-card:hover,.perk-card:hover,
  .tier-card:hover,.league-card:hover,.why-stat-block:hover,.quickplay-stat:hover{
    transform: translateY(-7px);
    box-shadow: 0 18px 44px rgba(0,0,0,.42), 0 0 0 1px rgba(0,207,255,.35);
    border-color: rgba(0,207,255,.55);
  }
  .hero-stat:hover{ transform: translateY(-4px); background:#10243c; }
  .stat-num{ transition: transform .3s cubic-bezier(.2,.8,.2,1), color .3s ease; }
  .hero-stat:hover .stat-num{ transform: scale(1.08); color: var(--zcyan); }

  /* scroll reveal */
  .reveal{ opacity:0; transform: translateY(22px); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
  .reveal.in{ opacity:1; transform:none; }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  }

  /* marquee */

  .marquee-wrap {
    background: var(--zgrad); padding: 14px 0; overflow: hidden;
    position: relative;
  }
  .marquee-track {
    display: flex; width: max-content;
    animation: marquee 28s linear infinite;
  }
  .marquee-item {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ink);
    padding: 0 40px; white-space: nowrap;
  }
  .marquee-dot {
    color: var(--ember); margin-right: -32px;
  }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* problem section */
  .problem-section {
    background: #070F08;
    padding: 96px 40px;
  }
  .problem-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .problem-list { list-style: none; margin-top: 32px; }
  .problem-list li {
    display: flex; gap: 16px; padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 16px; color: #8a9c8c;
  }
  .problem-list li::before {
    content: '✕'; color: var(--ember);
    font-family: 'Space Mono', monospace;
    font-size: 14px; flex-shrink: 0; margin-top: 1px;
  }
  .solution-list { list-style: none; margin-top: 32px; }
  .solution-list li {
    display: flex; gap: 16px; padding: 20px 0;
    border-bottom: 1px solid rgba(200,241,53,0.08);
    font-size: 16px; color: #b0b8b2;
  }
  .solution-list li::before {
    content: '→'; color: var(--lime);
    font-family: 'Space Mono', monospace;
    font-size: 14px; flex-shrink: 0; margin-top: 1px;
  }

  /* pillars */
  .pillars-section { padding: 96px 40px; max-width: 1200px; margin: 0 auto; }
  .pillar-card {
    background: rgba(12, 20, 32, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 3px solid var(--lime);
    padding: 48px 32px;
    position: relative; overflow: hidden;
  }
  .pillar-card:nth-child(2) { border-top-color: var(--ember); }
  .pillar-card:nth-child(3) { border-top-color: var(--gold); }
  .pillar-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 96px; font-weight: 900; line-height: 1;
    position: absolute; right: 16px; top: 8px;
    color: rgba(200,241,53,0.07);
    pointer-events: none;
  }
  .pillar-card:nth-child(2) .pillar-num { color: rgba(255,76,26,0.07); }
  .pillar-card:nth-child(3) .pillar-num { color: rgba(232,184,75,0.07); }
  .pillar-icon { font-size: 36px; margin-bottom: 20px; }
  .pillar-card h3 { margin-bottom: 12px; }
  .pillar-card p { font-size: 15px; }

  /* journey strip */
  .journey-section { padding: 96px 40px; background: var(--field); }
  .journey-inner { max-width: 1200px; margin: 0 auto; }
  .journey-steps {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 0; margin-top: 64px; position: relative;
  }
  .journey-steps::before {
    content: '';
    position: absolute; top: 32px; left: 10%; right: 10%;
    height: 2px; background: linear-gradient(90deg, var(--lime), var(--ember));
  }
  .journey-step { text-align: center; padding: 0 16px; }
  .step-dot {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--ink); border: 2px solid var(--lime);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px; font-weight: 900; color: var(--lime);
    position: relative; z-index: 1;
  }
  .journey-step:nth-child(3) .step-dot { border-color: var(--ember); color: var(--ember); }
  .journey-step:nth-child(5) .step-dot { border-color: var(--gold); color: var(--gold); }
  .journey-step h4 { font-size: 16px; margin-bottom: 8px; color: var(--chalk); }
  .journey-step p { font-size: 13px; }


  /* ── ENHANCED PILLAR-CARD HOVER ── */
  .pillar-card{
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, background .4s ease, border-top-width .25s ease;
    will-change: transform;
  }
  .pillar-card::after{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
    background: radial-gradient(120% 90% at 82% -10%, rgba(0,207,255,0.12), transparent 60%);
    transition: opacity .4s ease;
  }
  .pillar-card:hover{
    transform: translateY(-12px) scale(1.018);
    box-shadow: 0 28px 64px rgba(0,0,0,0.55);
    background: rgba(14, 26, 43, 0.65); border-top-width: 5px;
  }
  .pillar-card:hover::after{ opacity:1; }
  .pillar-card:nth-child(1):hover{ border-top-color: var(--lime); box-shadow: 0 28px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(200,241,53,.4); }
  .pillar-card:nth-child(2):hover{ border-top-color: var(--ember); box-shadow: 0 28px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(255,76,26,.4); }
  .pillar-card:nth-child(3):hover{ border-top-color: var(--gold); box-shadow: 0 28px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(232,184,75,.4); }

  .pillar-num{ transition: color .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
  .pillar-card:hover .pillar-num{ transform: scale(1.14) translate(-4px,2px); }
  .pillar-card:nth-child(1):hover .pillar-num{ color: rgba(200,241,53,0.22); }
  .pillar-card:nth-child(2):hover .pillar-num{ color: rgba(255,76,26,0.22); }
  .pillar-card:nth-child(3):hover .pillar-num{ color: rgba(232,184,75,0.20); }

  .pillar-icon{ display:inline-block; transition: transform .4s cubic-bezier(.2,.7,.2,1.5), filter .4s ease; }
  .pillar-card:hover .pillar-icon{ transform: translateY(-4px) scale(1.2) rotate(-6deg); filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
  .pillar-card h3{ transition: transform .4s cubic-bezier(.2,.8,.2,1); }
  .pillar-card:hover h3{ transform: translateX(4px); }

  /* ── JOURNEY STEPS : reveal one-by-one + dot pop ── */
  .journey-step.reveal {
    transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
  }
  .journey-step .step-dot{
    transition: transform .85s cubic-bezier(.2,.9,.3,1.4), opacity .85s ease, box-shadow .28s ease, background .28s ease;
  }
  .journey-step.reveal .step-dot{ transform: scale(.4); opacity:0; transition-delay: inherit; }
  .journey-step.reveal.in .step-dot{ transform: scale(1); opacity:1; }
  .journey-step:hover{ transform:none; box-shadow:none; border-color:transparent; }
  .journey-step:hover .step-dot{ transform: scale(1.15); box-shadow: 0 0 0 7px rgba(0,207,255,0.08), 0 10px 22px rgba(0,0,0,0.45); transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, background .28s ease; }
  .journey-step h4, .journey-step p{ transition: color .3s ease; }
  .journey-step:hover h4{ color: var(--zcyan); }

  /* home CTA */
  .home-cta {
    background: var(--zgrad);
    padding: 80px 40px;
    text-align: center;
  }
  .home-cta h2 { color: var(--white); margin-bottom: 16px; }
  .home-cta p { color: rgba(255,255,255,0.75); max-width: 560px; margin: 0 auto 40px; }
  .home-cta .btn-ember { font-size: 16px; padding: 18px 40px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.4); color: var(--white); }

  /* ────────────────────────────────────────
     COMPETITIONS PAGE
  ──────────────────────────────────────── */
  .comp-hero {
    background:
      linear-gradient(180deg, rgba(12,20,32,0.55) 0%, rgba(12,20,32,0.25) 42%, rgba(8,10,16,0.92) 88%, var(--ink) 100%),
      url('assets/competitions-hero.png') no-repeat center top / cover,
      var(--field);
    padding: 120px 40px 80px;
    text-align: center;
    position: relative; overflow: hidden;
  }
  .comp-hero::after {
    content: 'COMPETE';
    position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 200px; font-weight: 900; letter-spacing: -0.02em;
    color: rgba(200,241,53,0.03); pointer-events: none; white-space: nowrap;
  }
  .comp-hero > * { position: relative; z-index: 2; }
  .comp-hero p { max-width: 600px; margin: 24px auto 0; font-size: 18px; }

  .league-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: rgba(21,101,255,0.08); margin: 64px 0; }
  .league-card {
    background: var(--field);
    padding: 48px 40px;
    position: relative; overflow: hidden;
    cursor: pointer; transition: background 0.2s;
  }
  .league-card:hover { background: #111f13; }
  .league-tier {
    font-family: 'Space Mono', monospace;
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 12px;
  }
  .league-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 48px; font-weight: 900; text-transform: uppercase;
    margin-bottom: 8px; line-height: 1;
  }
  .league-sub { font-size: 14px; color: var(--muted); margin-bottom: 28px; }
  .league-meta { display: flex; gap: 32px; margin-bottom: 28px; }
  .meta-item label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 4px;
  }
  .meta-item span {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px; font-weight: 700; color: var(--chalk);
  }
  .league-accent {
    position: absolute; right: 0; top: 0; bottom: 0; width: 4px;
  }
  .warriors .league-name { color: var(--lime); }
  .warriors .league-accent { background: var(--lime); }
  .commanders .league-name { color: #4FC3F7; }
  .commanders .league-accent { background: #4FC3F7; }
  .kings .league-name { color: var(--gold); }
  .kings .league-accent { background: var(--gold); }
  .lords .league-name { color: var(--ember); }
  .lords .league-accent { background: var(--ember); }

  .quickplay-section {
    background: var(--ember);
    padding: 80px 40px;
  }
  .quickplay-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .quickplay-section h2 { color: var(--white); }
  .quickplay-section p { color: rgba(255,255,255,0.7); }
  .winchain-box {
    background: rgba(0,0,0,0.2);
    padding: 32px; margin-top: 32px;
  }
  .winchain-box p { color: rgba(255,255,255,0.85); font-size: 15px; }
  .winchain-rule {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px; font-weight: 700; color: var(--white);
    margin-top: 16px; line-height: 1.3;
  }
  .quickplay-stat {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 80px; font-weight: 900; line-height: 1;
    color: var(--white);
  }
  .quickplay-stat small { font-size: 20px; display: block; color: rgba(255,255,255,0.6); letter-spacing: 0.1em; text-transform: uppercase; font-family: 'Space Mono', monospace; margin-top: 8px; }

  .champ-section { padding: 96px 40px; max-width: 1200px; margin: 0 auto; }
  .champ-path { margin-top: 64px; }
  .champ-path-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 24px;
  }
  .champ-row { display: flex; gap: 2px; margin-bottom: 2px; }
  .champ-box {
    flex: 1; padding: 28px 24px;
    background: var(--field);
    border-bottom: 3px solid transparent;
    transition: border-color 0.2s;
  }
  .champ-box:hover { border-bottom-color: var(--zcyan); }
  .champ-scope {
    font-family: 'Space Mono', monospace;
    font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
  }
  .champ-box h4 { font-size: 22px; color: var(--chalk); margin-bottom: 6px; }
  .champ-box p { font-size: 13px; }
  .team-path .champ-box { border-bottom-color: rgba(21,101,255,0.3); }
  .individual-path .champ-box { border-bottom-color: rgba(0,207,255,0.3); }
  .arrow-right {
    display: flex; align-items: center; padding: 0 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 24px; color: var(--muted);
  }

  /* ────────────────────────────────────────
     CLUBS PAGE
  ──────────────────────────────────────── */
  .clubs-hero {
    background:
      linear-gradient(180deg,
        rgba(7,15,8,0.45) 0%,
        rgba(7,15,8,0.20) 38%,
        rgba(7,15,8,0.78) 80%,
        rgba(7,15,8,0.96) 93%,
        #070F08 100%),
      url('assets/clubs.png') no-repeat center center / cover,
      #070F08;
    padding: 120px 40px 120px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end;
    max-width: 100%; margin: 0;   /* full-bleed so the image + fade span the viewport edge-to-edge */
  }
  .clubs-hero > div {
    max-width: 600px;
  }
  .clubs-hero > div:first-child { justify-self: end; width: 100%; }
  .clubs-hero > div:last-child  { justify-self: start; width: 100%; }
  .clubs-hero-right {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  }
  .club-type-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex; gap: 18px; align-items: center;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    transition: transform 0.3s cubic-bezier(.22,.61,.36,1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
    cursor: pointer;
  }
  .club-type-card.featured {
    background: linear-gradient(135deg, rgba(200, 241, 53, 0.06) 0%, rgba(200, 241, 53, 0.02) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(200, 241, 53, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2), 0 0 15px rgba(200, 241, 53, 0.03);
  }
  .club-type-icon {
    font-size: 26px;
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1.5), background 0.3s ease;
  }
  .club-type-card.featured .club-type-icon {
    background: rgba(200, 241, 53, 0.08);
    border-color: rgba(200, 241, 53, 0.2);
  }
  .club-type-content h4 {
    font-family: 'Space Mono', monospace;
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    color: var(--chalk); letter-spacing: 0.08em;
    margin: 0;
    transition: color 0.3s ease;
  }
  .club-type-card.featured .club-type-content h4 {
    color: var(--lime);
  }
  .club-type-content p {
    font-family: 'Barlow', sans-serif;
    font-size: 12px; color: rgba(255, 255, 255, 0.65);
    margin: 4px 0 0 0; line-height: 1.3;
  }
  
  /* Hover effects */
  .club-type-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  }
  .club-type-card.featured:hover {
    background: rgba(200, 241, 53, 0.06);
    border-color: rgba(200, 241, 53, 0.4);
    box-shadow: 0 12px 30px rgba(200, 241, 53, 0.08);
  }
  .club-type-card:hover .club-type-icon {
    transform: scale(1.1) rotate(-5deg);
    background: rgba(255, 255, 255, 0.08);
  }
  .club-type-card.featured:hover .club-type-icon {
    transform: scale(1.1) rotate(5deg);
    background: rgba(200, 241, 53, 0.15);
  }
  .club-type-card:hover h4 {
    color: var(--zcyan);
  }
  .club-type-card.featured:hover h4 {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(200, 241, 53, 0.5);
  }

  .advantage-section { padding: 96px 40px; background: #070F08; }
  .advantage-inner { max-width: 1200px; margin: 0 auto; }
  .advantage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; background: transparent; margin-top: 64px; }
  .advantage-card {
    background: linear-gradient(180deg, #0b140e 0%, #060d08 100%);
    border: 1px solid rgba(200,241,53,0.06);
    border-radius: 16px;
    padding: 40px 32px;
    transition: transform 0.35s cubic-bezier(.22,.61,.36,1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
    will-change: transform;
  }
  .advantage-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(200,241,53,0.45);
    box-shadow: 0 20px 46px rgba(0,0,0,.65), 0 0 24px rgba(200,241,53,0.14);
    z-index: 2;
  }
  .advantage-icon {
    font-size: 32px; margin-bottom: 20px;
    display: inline-block;
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1.5);
  }
  .advantage-card:hover .advantage-icon {
    transform: translateY(-4px) scale(1.2) rotate(-6deg);
  }
  .advantage-card h4 { font-size: 20px; margin-bottom: 12px; color: var(--chalk); transition: color 0.3s ease; }
  .advantage-card:hover h4 { color: var(--lime); }
  .advantage-card p { font-size: 14px; }

  .entry-section { padding: 96px 40px; max-width: 1200px; margin: 0 auto; }
  .entry-table { width: 100%; border-collapse: collapse; margin-top: 48px; }
  .entry-table th {
    font-family: 'Space Mono', monospace;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); padding: 16px 20px; text-align: left;
    border-bottom: 1px solid rgba(21,101,255,0.25);
  }
  .entry-table td { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 15px; color: #b0b8b2; }
  .entry-table td:first-child { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700; color: var(--chalk); }
  .entry-table tr:hover td { background: rgba(200,241,53,0.03); }
  .yes-mark { color: var(--lime); font-weight: 700; }
  .no-mark { color: var(--muted); }

  .register-cta {
    background: var(--field);
    border: 1px solid rgba(21,101,255,0.25);
    padding: 64px 40px;
    text-align: center;
    margin: 0 40px 96px;
  }

  /* ────────────────────────────────────────
     BRANDS PAGE
  ──────────────────────────────────────── */
  .brands-hero {
    background: linear-gradient(90deg, #080A10 0%, rgba(8, 10, 16, 0.88) 45%, rgba(8, 10, 16, 0.3) 100%), url('assets/billboard.png') no-repeat right 30% / cover;
    padding: 120px 40px 80px;
    position: relative; overflow: hidden;
  }
  .brands-hero::before {
    content: '';
    position: absolute; right: -200px; top: -200px;
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(232,184,75,0.08) 0%, transparent 70%);
    pointer-events: none;
  }
  .brands-hero::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 200px;
    background: linear-gradient(to bottom, transparent 0%, var(--field) 100%);
    pointer-events: none; z-index: 1;
  }
  .brands-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
  .brands-hero h1 em { color: var(--gold); font-style: normal; }

  .why-section { padding: 96px 40px; background: var(--field); }
  .why-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .why-stat-block { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .why-stat-item { padding: 32px; background: var(--ink); }

  .tiers-section { padding: 96px 40px; max-width: 1200px; margin: 0 auto; }
  .tier-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(232,184,75,0.1); margin-top: 64px; }
  .tier-card { background: var(--field); padding: 48px 32px; position: relative; overflow: hidden; }
  .tier-card-num {
    position: absolute; right: 20px; top: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 100px; font-weight: 900;
    color: rgba(232,184,75,0.05); pointer-events: none;
  }
  .tier-card h3 { margin-bottom: 8px; }
  .tier-price {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px; font-weight: 800; color: var(--gold);
    margin: 16px 0 24px;
  }
  .tier-features { list-style: none; }
  .tier-features li {
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 14px; color: #8a9c8c;
    display: flex; gap: 10px;
  }
  .tier-features li::before { content: '→'; color: var(--gold); flex-shrink: 0; }

  .cascade-section { padding: 96px 40px; background: #070F08; }
  .cascade-inner { max-width: 1200px; margin: 0 auto; }
  .cascade-visual { margin-top: 64px; }
  .cascade-row {
    display: flex; align-items: center; gap: 16px;
    padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .cascade-level {
    font-family: 'Space Mono', monospace;
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); width: 120px; flex-shrink: 0;
  }
  .cascade-bar { flex: 1; height: 36px; background: rgba(232,184,75,0.1); position: relative; overflow: hidden; }
  .cascade-fill { height: 100%; background: linear-gradient(90deg, var(--gold), rgba(232,184,75,0.3)); }
  .cascade-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px; font-weight: 700; color: var(--chalk);
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  }
  .cascade-count {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px; font-weight: 700; color: var(--gold);
    width: 120px; text-align: right; flex-shrink: 0;
  }
  .brands-cta {
    background: linear-gradient(135deg, #1a1a2e 0%, #0c1420 100%); border-top: 1px solid rgba(232,184,75,0.3);
    padding: 80px 40px; text-align: center;
  }
  .brands-cta h2 { color: var(--white); margin-bottom: 16px; }
  .brands-cta p { color: rgba(255,255,255,0.6); max-width: 520px; margin: 0 auto 40px; }

  /* ────────────────────────────────────────
     BATTLEGROUND PAGE
  ──────────────────────────────────────── */
  .ground-hero {
    background:
      linear-gradient(180deg,
        rgba(8,10,16,0.50) 0%,
        rgba(8,10,16,0.32) 34%,
        rgba(8,10,16,0.80) 78%,
        rgba(8,10,16,0.96) 92%,
        #080A10 100%),
      url('assets/ground.png') no-repeat center center / cover,
      #080A10;
    padding: 130px 40px 110px;
    text-align: center;
  }
  .ground-hero p { max-width: 520px; margin: 24px auto 40px; font-size: 18px; }

  .search-bar-wrap {
    max-width: 600px; margin: 0 auto;
    display: flex; gap: 0; background: var(--ink);
    border: 1px solid rgba(21,101,255,0.4);
  }
  .search-bar-wrap input {
    flex: 1; padding: 18px 24px;
    background: transparent; border: none; outline: none;
    font-family: 'Barlow', sans-serif; font-size: 16px; color: var(--chalk);
  }
  .search-bar-wrap button {
    padding: 18px 28px;
    background: var(--zgrad); border: none; cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink);
  }

  .map-placeholder {
    background: #0A1A0B;
    height: 420px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    border-top: 1px solid rgba(21,101,255,0.2);
  }
  .map-grid {
    position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(21,101,255,0.07) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(21,101,255,0.07) 40px);
  }
  .map-pin {
    position: absolute;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--zcyan);
    box-shadow: 0 0 0 4px rgba(0,207,255,0.2), 0 0 16px rgba(0,207,255,0.5);
    cursor: pointer;
    transition: transform 0.2s;
  }
  .map-pin:hover { transform: scale(1.4); }
  .map-label {
    position: absolute; background: var(--ink); border: 1px solid rgba(200,241,53,0.3);
    padding: 6px 12px; white-space: nowrap;
    font-family: 'Space Mono', monospace; font-size: 10px; color: var(--zcyan);
    transform: translate(-50%, -36px);
  }
  .map-pin-wrap { position: absolute; }
  .map-center-text {
    position: relative; z-index: 1; text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px; color: rgba(200,241,53,0.3); letter-spacing: 0.1em;
  }

  .grounds-list { padding: 64px 40px; max-width: 1200px; margin: 0 auto; }
  .grounds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
  .ground-card {
    background: var(--field);
    border: 1px solid rgba(21,101,255,0.15);
    padding: 28px;
    transition: border-color 0.2s;
  }
  .ground-card.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.38s cubic-bezier(.21, .6, .35, 1), transform 0.38s cubic-bezier(.21, .6, .35, 1);
  }
  .ground-card.reveal.in {
    opacity: 1;
    transform: translateY(0);
  }
  .ground-card:hover { border-color: rgba(21,101,255,0.5); }
  .ground-card h4 { font-size: 20px; margin-bottom: 4px; }
  .ground-area {
    font-family: 'Space Mono', monospace;
    font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 16px;
  }
  .ground-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
  .ground-card .btn { width: 100%; text-align: center; font-size: 12px; }

  .ground-cta-section {
    padding: 80px 40px;
    background: var(--field);
    text-align: center;
  }

  /* ────────────────────────────────────────
     UMPIRE PAGE
  ──────────────────────────────────────── */
  .umpire-hero-wrap {
    background:
      linear-gradient(180deg,
        rgba(8,10,16,0.45) 0%,
        rgba(8,10,16,0.20) 38%,
        rgba(8,10,16,0.78) 80%,
        rgba(8,10,16,0.96) 93%,
        var(--ink) 100%),
      url('assets/upmire.png') no-repeat center center / cover,
      var(--ink);
  }
  .umpire-hero {
    background: transparent;
    padding: 120px 40px 80px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
    max-width: 1280px; margin: 0 auto;   /* 1280 = 1200 content + 40px padding each side → text aligns with home/brands hero */
  }
  .umpire-hero h1 em { color: var(--ember); font-style: normal; }

  .umpire-perks { padding: 96px 40px; background: var(--field); }
  .umpire-perks-inner { max-width: 1200px; margin: 0 auto; }
  .perks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 64px;
  }
  .perk-card {
    background: #0b1420;
    border: 1px solid rgba(255, 76, 26, 0.15);
    padding: 36px 28px;
    border-radius: 8px;
  }
  .perk-card h4 { margin-bottom: 12px; color: var(--chalk); }

  .requirements-section { padding: 96px 40px; max-width: 1200px; margin: 0 auto; }
  .req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 64px; }
  .req-list { list-style: none; }
  .req-list li {
    padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 15px; color: #b0b8b2;
    display: flex; gap: 14px; align-items: flex-start;
  }
  .req-list li::before {
    content: '✓'; color: var(--ember);
    font-family: 'Space Mono', monospace;
    font-size: 13px; flex-shrink: 0; margin-top: 2px;
  }

  .process-section { padding: 96px 40px; background: #070F08; }
  .process-inner { max-width: 1200px; margin: 0 auto; }
  .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 64px; position: relative; }
  .process-steps::before {
    content: ''; position: absolute;
    top: 24px; left: 12%; right: 12%; height: 1px;
    background: rgba(255,76,26,0.3);
  }
  .process-step { padding: 0 20px; text-align: center; }
  .process-num {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--ink); border: 1px solid var(--zblue);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px; font-weight: 900; color: var(--zcyan);
    position: relative; z-index: 1;
  }
  .process-step h4 { font-size: 16px; margin-bottom: 8px; }
  .process-step p { font-size: 13px; }

  .umpire-form-section {
    padding: 96px 40px;
    background: var(--ember);
    text-align: center;
  }
  .umpire-form-section h2 { color: var(--white); margin-bottom: 16px; }
  .umpire-form-section p { color: rgba(255,255,255,0.7); max-width: 480px; margin: 0 auto 48px; }
  .form-wrap { max-width: 560px; margin: 0 auto; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
  .form-row.single { grid-template-columns: 1fr; }
  .form-input {
    width: 100%; padding: 16px 20px;
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.2);
    color: var(--white); font-family: 'Barlow', sans-serif; font-size: 15px;
    outline: none;
  }
  .form-input::placeholder { color: rgba(255,255,255,0.4); }
  .form-input:focus { border-color: rgba(255,255,255,0.6); }
  .form-submit {
    width: 100%; padding: 18px;
    background: var(--ink); color: var(--chalk); border: none; cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    margin-top: 4px; transition: background 0.2s;
  }
  .form-submit:hover { background: #1a1a1a; }

  /* ────────────────────────────────────────
     EARLY ACCESS PAGE
  ──────────────────────────────────────── */
  .access-hero {
    background: var(--field);
    padding: 120px 40px 80px;
    text-align: center;
    position: relative; overflow: hidden;
  }
  .access-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(200,241,53,0.08) 0%, transparent 60%);
    pointer-events: none;
  }
  .access-hero h1 { position: relative; }
  .access-hero h1 em { color: var(--lime); font-style: normal; }
  .access-hero p { max-width: 560px; margin: 24px auto 0; font-size: 18px; position: relative; }

  .access-tracks { padding: 96px 40px; max-width: 1200px; margin: 0 auto; }
  .tracks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(21,101,255,0.08); margin-top: 64px; }
  .track-card {
    background: var(--field);
    padding: 48px 36px;
    position: relative;
  }
  .track-card.featured {
    background: var(--zgrad);
  }
  .track-card.featured h3 { color: var(--white); }
  .track-card.featured p { color: rgba(255,255,255,0.75); }
  .track-card.featured .track-cta { background: rgba(255,255,255,0.15); color: var(--white); border: 1px solid rgba(255,255,255,0.3); }
  .track-icon { font-size: 40px; margin-bottom: 24px; }
  .track-card h3 { margin-bottom: 12px; font-size: 32px; }
  .track-card p { font-size: 15px; margin-bottom: 32px; }
  .track-cta {
    display: block; width: 100%; padding: 16px;
    background: rgba(21,101,255,0.12); border: 1px solid rgba(21,101,255,0.25);
    color: var(--zcyan); text-align: center; text-decoration: none; cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    transition: all 0.2s; border: none;
  }
  .track-cta:hover { opacity: 0.85; }

  .main-form-section {
    padding: 96px 40px;
    background: var(--ink);
  }
  .main-form-inner { max-width: 700px; margin: 0 auto; }
  .main-form-inner h2 { margin-bottom: 12px; }
  .main-form-inner .eyebrow { margin-bottom: 12px; }
  .main-form-inner > p { margin-bottom: 48px; }
  .access-form-input {
    width: 100%; padding: 18px 20px; margin-bottom: 12px;
    background: var(--field); border: 1px solid rgba(21,101,255,0.2);
    color: var(--chalk); font-family: 'Barlow', sans-serif; font-size: 15px; outline: none;
  }
  .access-form-input:focus { border-color: rgba(21,101,255,0.6); }
  .access-form-input::placeholder { color: var(--muted); }
  .access-form-select {
    width: 100%; padding: 18px 20px; margin-bottom: 12px;
    background: var(--field); border: 1px solid rgba(21,101,255,0.2);
    color: var(--chalk); font-family: 'Barlow', sans-serif; font-size: 15px; outline: none;
    appearance: none;
  }
  .access-form-submit {
    width: 100%; padding: 20px;
    background: var(--zgrad); border: none; cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink); margin-top: 8px; transition: background 0.2s;
  }
  .access-form-submit:hover { background: linear-gradient(135deg, #2575ff 0%, #20dfff 100%); }

  .launch-info { padding: 96px 40px; background: var(--field); }
  .launch-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
  .launch-item {
    padding: 48px 32px;
    border-right: 1px solid rgba(21,101,255,0.15);
  }
  .launch-item:last-child { border-right: none; }

  /* ────────────────────────────────────────
     FOOTER
  ──────────────────────────────────────── */
  footer {
    position: relative;
    background: linear-gradient(180deg, #0b1422 0%, #06090f 100%);
    padding: 92px 40px 40px;
    border-top: 1px solid rgba(21,101,255,0.18);
  }
  footer::before {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,207,255,0.55) 50%, transparent 100%);
  }
  .footer-inner { max-width: 1200px; margin: 0 auto; }
  .footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 16px; align-items: start; }
  .footer-brand h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px; font-weight: 900; color: var(--chalk); margin-bottom: 12px;
  }
  .footer-brand h3 span { color: var(--lime); }
  .footer-brand p {
    font-family: 'Barlow', sans-serif;
    font-size: 15px; line-height: 1.65; color: #9fb0c2;
    max-width: 300px; margin-bottom: 26px;
  }
  .footer-col h5 {
    font-family: 'Space Mono', monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--zcyan); margin-bottom: 18px;
  }
  .footer-col ul { list-style: none; }
  .footer-col ul li { margin-bottom: 13px; }
  .footer-col ul li a {
    font-family: 'Barlow', sans-serif;
    font-size: 15px; font-weight: 500; color: #9fb0c2; text-decoration: none;
    position: relative; display: inline-block;
    transition: color 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
  }
  .footer-col ul li a::after {
    content: ''; position: absolute; left: 0; bottom: -3px; height: 1.5px; width: 100%;
    background: var(--zcyan);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.32s cubic-bezier(0.16,1,0.3,1);
  }
  .footer-col ul li a:hover { color: var(--zcyan); transform: translateX(6px); }
  .footer-col ul li a:hover::after { transform: scaleX(1); }
  .footer-col ul li a:focus-visible { color: var(--zcyan); outline: none; }
  .footer-col ul li a:focus-visible::after { transform: scaleX(1); }
  .footer-bottom {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.07);
  }
  .footer-bottom p {
    font-family: 'Space Mono', monospace;
    font-size: 11px; letter-spacing: 0.12em; color: var(--muted);
  }
  .footer-tagline {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px; font-weight: 700; color: rgba(0,207,255,0.55);
    letter-spacing: 0.14em; text-transform: uppercase;
  }

  /* Footer Big Typography Logo with Staggered Roll Hover Effect */
  .footer-big-text {
    text-align: right;
    margin-top: -24px;   /* sits lower, just above the divider line */
    margin-bottom: -15px; /* pulls the divider line up to overlap the baseline of the logo */
    padding-top: 0;
    border-top: none;
    user-select: none;
    overflow: hidden;
  }
  .zinga-reveal {
    display: inline-block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(60px, 15.5vw, 210px);
    font-weight: 900;
    font-style: italic;   /* match Zinga logo */
    text-transform: uppercase;
    letter-spacing: -0.05em;  /* tighter spacing to match Zinga logo */
    line-height: 0.8;
    color: rgba(255, 255, 255, 0.08); /* subtle dark grey watermark */
    cursor: pointer;
    transition: color 0.35s ease;
    white-space: nowrap;      /* prevent character wrapping inside the line-height box */
  }
  .zinga-reveal:hover {
    color: var(--zcyan);
  }
  .zinga-reveal-inner {
    display: inline-flex;
    overflow: hidden;
    position: relative;
    height: 1em;
  }
  .zinga-reveal-char {
    display: inline-block;
    position: relative;
    will-change: transform;
    text-shadow: 0 1em currentColor;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .zinga-reveal:hover .zinga-reveal-char {
    transform: translateY(-1em);
  }

  /* ── RESPONSIVE ── */
  /* ── HAMBURGER BUTTON ── */
  .nav-hamburger {
    display: none;
    flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; cursor: pointer;
    background: none; border: none; padding: 8px;
    flex-shrink: 0; z-index: 1002;
  }
  .nav-hamburger span {
    display: block; height: 2px; width: 28px; background: var(--chalk);
    transition: all 0.25s; transform-origin: center; border-radius: 2px;
  }
  .nav-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ── TABLET ── */
  @media (max-width: 1024px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .why-stat-block { grid-template-columns: 1fr 1fr; }
    .perks-grid { grid-template-columns: 1fr 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; }
    .process-steps { grid-template-columns: 1fr 1fr; gap: 32px; }
    .process-steps::before { display: none; }
    .launch-inner { grid-template-columns: 1fr; }
    .launch-item { border-right: none; border-bottom: 1px solid rgba(200,241,53,0.1); }
    .launch-item:last-child { border-bottom: none; }
  }

  /* ── MOBILE ── */
  @media (max-width: 768px) {
    /* Nav — hamburger */
    nav {
      padding: 0 16px;
      height: 60px;
      overflow: visible;
    }
    .nav-logo img {
      height: 36px !important;
      width: auto !important;
    }
    .nav-hamburger {
      display: flex !important;
    }
    .nav-links {
      display: flex;
      position: fixed;
      top: 60px; bottom: 0;
      left: 0; right: 0;
      background: rgba(8,10,16,0.98);
      backdrop-filter: blur(18px);
      flex-direction: column;
      align-items: stretch;
      padding: 0;
      gap: 0;
      overflow-y: auto;
      z-index: 999;
      opacity: 0;
      transform: translateY(-16px);
      pointer-events: none;
      transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .nav-links.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .nav-links li {
      width: 100%;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      margin: 0; padding: 0;
    }
    .nav-links li a {
      display: block;
      padding: 22px 28px;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--chalk);
      text-transform: uppercase;
    }
    .nav-links .nav-cta {
      border-bottom: none;
      padding: 24px 28px;
    }
    .nav-links .nav-cta a {
      display: inline-block;
      background: var(--zgrad);
      color: var(--white);
      padding: 16px 32px;
      font-size: 16px;
      border-radius: 2px;
    }
    .page { padding-top: 60px; }

    /* Global spacing */
    .section, .section-full { padding: 56px 20px; }

    /* Typography */
    h1 { font-size: clamp(40px, 11vw, 56px); }
    h2 { font-size: clamp(28px, 8vw, 40px); }
    h3 { font-size: 24px; }

    /* All multi-col grids → single col */
    .grid-2, .grid-3, .grid-4,
    .league-grid, .tier-cards, .advantage-grid,
    .perks-grid, .tracks-grid, .grounds-grid,
    .problem-inner, .why-inner, .clubs-hero,
    .quickplay-inner, .umpire-hero,
    .journey-steps, .process-steps,
    .champ-row, .req-grid, .form-row,
    .footer-top, .launch-inner,
    .why-stat-block { grid-template-columns: 1fr !important; gap: 20px; }

    /* Override flex-based layouts */
    .champ-row { flex-direction: column; }
    .arrow-right { transform: rotate(90deg); align-self: center; }
    .hero-actions { flex-direction: column; gap: 12px; }
    .hero-actions .btn { width: 100%; text-align: center; padding: 16px; }

    /* Hero */
    .hero { padding: 90px 20px 56px; min-height: auto; }
    .hero-stats { grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 48px; }
    .hero-stat { padding: 20px 16px; }
    .stat-num { font-size: 36px; }

    /* Marquee */
    .marquee-item { font-size: 15px; padding: 0 24px; }

    /* Problem section */
    .problem-section { padding: 56px 20px; }
    .problem-inner { gap: 40px; }

    /* Pillars */
    .pillars-section { padding: 56px 20px; }

    /* Journey */
    .journey-section { padding: 56px 20px; }
    .journey-steps { gap: 24px; }
    .journey-steps::before { display: none; }
    .journey-step { text-align: left; display: flex; gap: 16px; align-items: flex-start; padding: 0; }
    .step-dot { margin: 0; flex-shrink: 0; width: 48px; height: 48px; font-size: 18px; }

    /* Home CTA */
    .home-cta { padding: 56px 20px; }

    /* Competitions */
    .comp-hero { padding: 90px 20px 56px; }
    .comp-hero::after { font-size: 80px; bottom: -10px; }
    .league-grid { gap: 12px; background: transparent; }
    .league-card { padding: 32px 24px; }
    .league-name { font-size: 36px; }
    .league-meta { gap: 20px; flex-wrap: wrap; }
    .quickplay-section { padding: 56px 20px; }
    .quickplay-stat { font-size: 56px; }
    .champ-section { padding: 56px 20px; }
    .champ-box { padding: 20px 18px; }

    /* Clubs */
    .clubs-hero { padding: 90px 20px 56px; gap: 40px; }
    .clubs-hero-right { grid-template-columns: 1fr 1fr; gap: 10px; }
    .club-type-card { padding: 14px 18px; gap: 12px; }
    .club-type-icon { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; }
    .club-type-content h4 { font-size: 12px; }
    .club-type-content p { font-size: 11px; margin-top: 2px; }
    .advantage-section { padding: 56px 20px; }
    .advantage-grid { gap: 12px; background: transparent; }
    .advantage-card { padding: 28px 20px; }
    .entry-section { padding: 56px 20px; }
    .entry-table { font-size: 13px; }
    .entry-table th, .entry-table td { padding: 12px 10px; }
    .entry-table td:first-child { font-size: 15px; }
    /* Stack table on very small screens */
    .register-cta { margin: 0 20px 56px; padding: 40px 24px; }

    /* Lime callout inside clubs */
    div[style*="background:var(--lime)"] .grid-2-lime,
    div[style*="background:var(--lime)"] > div { flex-direction: column; }

    /* Brands */
    .brands-hero {
      background:
        linear-gradient(180deg, rgba(8,10,16,0.93) 0%, rgba(8,10,16,0.74) 32%, rgba(8,10,16,0.56) 60%, rgba(8,10,16,0.9) 100%),
        url('assets/billboard.png') no-repeat center 42% / cover;
      padding: 84px 22px 64px;
    }
    .brands-hero h1 { font-size: 40px; line-height: 1.04; }
    .brands-hero-inner p { font-size: 16px !important; margin-top: 18px !important; }
    .brands-hero .btn-gold {
      width: 100%; text-align: center; margin-top: 30px !important;
      font-size: 14px !important; padding: 16px 24px !important;
    }
    .brands-hero::after { height: 130px; }
    .why-section { padding: 56px 20px; }
    .why-inner { gap: 40px; }
    .tiers-section { padding: 56px 20px; }
    .tier-cards { gap: 12px; background: transparent; }
    .tier-card { padding: 32px 24px; }
    .cascade-section { padding: 56px 20px; }
    .cascade-row { flex-wrap: wrap; gap: 8px; }
    .cascade-level { width: 100%; margin-bottom: 4px; }
    .cascade-bar { width: 100%; min-width: 0; }
    .cascade-count { width: 100%; text-align: left; }
    .cascade-label { font-size: 12px; }
    .brands-cta { padding: 56px 20px; }

    /* Battleground */
    .ground-hero { padding: 90px 20px 56px; }
    .search-bar-wrap { flex-direction: row; }
    .search-bar-wrap input { font-size: 14px; padding: 14px 16px; }
    .search-bar-wrap button { padding: 14px 18px; font-size: 12px; white-space: nowrap; }
    .map-placeholder { height: 300px; }
    .grounds-list { padding: 48px 20px; }
    .grounds-grid { grid-template-columns: 1fr; gap: 12px; }
    .ground-cta-section { padding: 56px 20px; }

    /* Umpire */
    .umpire-hero { padding: 90px 20px 56px; gap: 32px; }
    .umpire-perks { padding: 56px 20px; }
    .perks-grid { gap: 12px; background: transparent; }
    .perk-card { padding: 28px 20px; }
    .requirements-section { padding: 56px 20px; }
    .process-section { padding: 56px 20px; }
    .process-step { text-align: left; display: flex; gap: 16px; align-items: flex-start; }
    .process-num { flex-shrink: 0; margin: 0; }
    .umpire-form-section { padding: 56px 20px; }
    .form-wrap { padding: 0; }

    /* Early Access */
    .access-hero { padding: 90px 20px 56px; }
    .access-tracks { padding: 56px 20px; }
    .tracks-grid { gap: 12px; background: transparent; }
    .track-card { padding: 32px 24px; }
    .main-form-section { padding: 56px 20px; }
    .launch-info { padding: 56px 20px; }
    .launch-item { border-right: none; border-bottom: 1px solid rgba(21,101,255,0.15); padding: 32px 0; }
    .launch-item:last-child { border-bottom: none; }

    /* Footer */
    footer { padding: 56px 20px 32px; }
    .footer-top { gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

    /* Inline grid overrides that use style attribute */
    [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }

    /* Stat blocks used inline */
    div[style*="display:grid"][style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  }

  @media (max-width: 420px) {
    h1 { font-size: 36px; }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .clubs-hero-right { grid-template-columns: 1fr; }
    .league-meta { flex-direction: row; gap: 20px; }
  }

  /* ════════ COOLER CARD HOVERS (overrides, kept last so they win) ════════ */
  .track-card,.champ-box,.launch-item,.ground-card,.perk-card,.tier-card,.why-stat-block{
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
  }
  .track-card:hover,.champ-box:hover,.launch-item:hover,.ground-card:hover,
  .perk-card:hover,.tier-card:hover,.why-stat-block:hover{
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(0,207,255,.4), 0 0 26px rgba(0,207,255,.18);
    border-color: rgba(0,207,255,.55);
    z-index: 2;
  }
  /* don't darken the featured (ember) track card */
  .track-card.featured:hover{ box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.35), 0 0 30px rgba(255,76,26,.3); }
  .tier-card-num{ transition: color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
  .tier-card:hover .tier-card-num{ transform: scale(1.12) translateY(-3px); }

  /* ════════ LEAGUE CARDS — colour-aware cool hover ════════ */
  .league-card{ transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, background .4s ease; }
  .league-card .league-accent{ transition: width .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
  .league-name{ transition: transform .4s cubic-bezier(.2,.8,.2,1), text-shadow .4s ease; }
  .league-card::after{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s ease;
    background: radial-gradient(140% 130% at 100% 0%, rgba(255,255,255,0.06), transparent 55%);
  }
  .league-card:hover{ transform: translateY(-8px) scale(1.012); background:#0d1722; }
  .league-card:hover::after{ opacity:1; }
  .league-card:hover .league-accent{ width:9px; }
  .league-card:hover .league-name{ transform: translateX(6px) scale(1.03); }
  .warriors:hover{ box-shadow: 0 24px 56px rgba(0,0,0,.55), 0 0 0 1px rgba(200,241,53,.5), 0 0 34px rgba(200,241,53,.22); }
  .warriors:hover .league-accent{ box-shadow: 0 0 18px var(--lime); }
  .warriors:hover .league-name{ text-shadow: 0 0 26px rgba(200,241,53,.5); }
  .commanders:hover{ box-shadow: 0 24px 56px rgba(0,0,0,.55), 0 0 0 1px rgba(79,195,247,.5), 0 0 34px rgba(79,195,247,.22); }
  .commanders:hover .league-accent{ box-shadow: 0 0 18px #4FC3F7; }
  .commanders:hover .league-name{ text-shadow: 0 0 26px rgba(79,195,247,.5); }
  .kings:hover{ box-shadow: 0 24px 56px rgba(0,0,0,.55), 0 0 0 1px rgba(232,184,75,.5), 0 0 34px rgba(232,184,75,.22); }
  .kings:hover .league-accent{ box-shadow: 0 0 18px var(--gold); }
  .kings:hover .league-name{ text-shadow: 0 0 26px rgba(232,184,75,.5); }
  .lords:hover{ box-shadow: 0 24px 56px rgba(0,0,0,.55), 0 0 0 1px rgba(255,76,26,.5), 0 0 34px rgba(255,76,26,.22); }
  .lords:hover .league-accent{ box-shadow: 0 0 18px var(--ember); }
  .lords:hover .league-name{ text-shadow: 0 0 26px rgba(255,76,26,.5); }

  /* ════════ QUICK PLAY — remove ugly hover box, add motion + in-pop ════════ */
  .quickplay-stat{ transition: transform .45s cubic-bezier(.2,.9,.3,1.4), text-shadow .4s ease; will-change: transform; transform-origin:left center; }
  .quickplay-stat:hover{ transform: scale(1.06); box-shadow:none !important; border:none !important; text-shadow: 0 10px 30px rgba(0,0,0,.35); }
  .quickplay-stat.reveal{ opacity:0; transform: scale(.55); }
  .quickplay-stat.reveal.in{ opacity:1; transform: scale(1); }

  /* ════════ POLISH PASS 2 ════════ */

  /* make every interactive transition smooth by default */
  a, .btn, .card, .step-dot, .badge, .entry-table tr { transition-timing-function: cubic-bezier(.2,.8,.2,1); }

  /* ── TABLE: keep original design, just colour Yes / No ── */
  .entry-table td.yes-mark { color: #38c46f; font-weight: 700; }
  .entry-table td.no-mark  { color: #ff5a3c; font-weight: 700; }


  /* ── WHY GRASSROOTS — hover each box, not the whole block ── */
  .why-stat-block:hover { transform: none !important; box-shadow: none !important; border-color: transparent !important; }
  .why-stat-item { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease; }
  .why-stat-item:hover {
    transform: translateY(-6px);
    background: #0c1626;
    box-shadow: 0 16px 38px rgba(0,0,0,.5), 0 0 0 1px rgba(0,207,255,.4), 0 0 22px rgba(0,207,255,.16);
  }
  .why-stat-item .stat-num { transition: transform .35s cubic-bezier(.2,.8,.2,1); display:inline-block; }
  .why-stat-item:hover .stat-num { transform: scale(1.1); }

  /* ── SPONSORSHIP TIER CARDS — colour-aware cool hover ── */
  .tier-cards .tier-card { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, background .4s ease; }
  .tier-card::after {
    content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s ease;
    background: radial-gradient(130% 120% at 100% 0%, rgba(232,184,75,0.12), transparent 55%);
  }
  .tier-card:hover { transform: translateY(-10px) scale(1.015); background:#0f1929; }
  .tier-card:hover::after { opacity:1; }
  .tier-card .tier-card-num { transition: color .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
  .tier-card:hover .tier-card-num { transform: scale(1.12) translateY(-4px); }
  .tier-card:hover .badge { transform: scale(1.06); }
  .badge { transition: transform .35s cubic-bezier(.2,.8,.2,1); display:inline-block; }
  .tier-cards .tier-card:nth-child(1):hover { box-shadow: 0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(232,184,75,.5), 0 0 32px rgba(232,184,75,.2); }
  .tier-cards .tier-card:nth-child(1):hover .tier-card-num { color: rgba(232,184,75,0.20); }
  .tier-cards .tier-card:nth-child(2):hover { box-shadow: 0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,207,255,.5), 0 0 32px rgba(0,207,255,.2); }
  .tier-cards .tier-card:nth-child(2):hover::after { background: radial-gradient(130% 120% at 100% 0%, rgba(0,207,255,0.12), transparent 55%); }
  .tier-cards .tier-card:nth-child(2):hover .tier-card-num { color: rgba(0,207,255,0.18); }
  .tier-cards .tier-card:nth-child(3):hover { box-shadow: 0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,76,26,.5), 0 0 32px rgba(255,76,26,.2); }
  .tier-cards .tier-card:nth-child(3):hover::after { background: radial-gradient(130% 120% at 100% 0%, rgba(255,76,26,0.12), transparent 55%); }
  .tier-cards .tier-card:nth-child(3):hover .tier-card-num { color: rgba(255,76,26,0.18); }

  /* ── LET'S TALK TERRITORY ── */
  .brands-cta { background: radial-gradient(120% 150% at 50% 0%, #1c2740 0%, #0c1420 62%) !important; position:relative; overflow:hidden; }
  .brands-cta h2 {
    color: var(--white) !important;
    background: linear-gradient(90deg, #ffffff 0%, var(--gold) 120%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 6px 40px rgba(232,184,75,0.18);
  }
  .brands-cta .btn {
    background: linear-gradient(135deg, var(--gold) 0%, #f4d588 100%) !important;
    color: var(--ink) !important; border: none !important;
    box-shadow: 0 10px 30px rgba(232,184,75,0.25);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, filter .3s ease;
  }
  .brands-cta .btn:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 18px 46px rgba(232,184,75,0.42); filter: brightness(1.05); }

  /* ── INFINITY (∞) running sheen + pulse ── */
  @keyframes zinfSheen { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
  @keyframes zinfPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
  .stat-num.zinf {
    background: linear-gradient(90deg, var(--zblue), var(--zcyan), #ffffff, var(--zcyan), var(--zblue));
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    display: inline-block;
    animation: zinfSheen 2.6s linear infinite, zinfPulse 2.6s ease-in-out infinite;
  }

  /* ════════ POLISH PASS 3 ════════ */

  /* remove the blue crease line on the hero's right edge */
  .hero-crease { display: none !important; }

  /* ── TOP BAR / NAV ── */
  nav {
    height: 68px;
    background: linear-gradient(180deg, rgba(8,10,16,0.98) 0%, rgba(11,15,23,0.92) 100%);
    border-bottom: 1px solid rgba(0,207,255,0.16);
    box-shadow: 0 8px 30px rgba(0,0,0,0.40);
  }
  .nav-logo img { height: 46px; }
  .nav-cta a { border-radius: 4px; box-shadow: 0 6px 18px rgba(21,101,255,0.32); }
  .nav-links { gap: 26px; }
  .nav-links li:not(.nav-cta) > a { color: #9fb0c2; }
  .nav-links li:not(.nav-cta) > a:hover { color: #ffffff; }
  .nav-links li:not(.nav-cta) > a.active { color: var(--zcyan); }
  .nav-links li:not(.nav-cta) > a.active::after { width: 100%; }
  .nav-cta a { border-radius: 4px; box-shadow: 0 6px 18px rgba(21,101,255,0.32); }

  /* ── UMPIRE HERO : tidy stat cards + hover ── */
  .umpire-hero { align-items: center; }
  .umpire-hero > div:last-child { align-self: center; }
  .umpire-hero .card {
    padding: 26px 30px;
    display: flex; flex-direction: column; justify-content: center;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
  }
  .umpire-hero .card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,76,26,0.6) !important;
    background: #12161d;
    box-shadow: 0 18px 42px rgba(0,0,0,.5), 0 0 26px rgba(255,76,26,0.18);
  }
  .umpire-hero .card .stat-num { display:inline-block; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .umpire-hero .card:hover .stat-num { transform: scale(1.08); }

  /* ── UMPIRE PERKS : ember hover + icon pop ── */
  .perk-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease; }
  .perk-card:hover {
    transform: translateY(-8px); background: #12161d;
    box-shadow: 0 20px 46px rgba(0,0,0,.5), 0 0 0 1px rgba(255,76,26,.45), 0 0 26px rgba(255,76,26,.18);
  }
  .perk-card > div:first-child { display:inline-block; transition: transform .4s cubic-bezier(.2,.7,.2,1.5); }
  .perk-card:hover > div:first-child { transform: translateY(-4px) scale(1.25) rotate(-6deg); }
  .perk-card h4 { transition: color .3s ease; }
  .perk-card:hover h4 { color: var(--ember); }

  /* ════════ POLISH PASS 4 ════════ */
  .page { padding-top: 70px; }              /* match the 70px nav */
  .hero { align-items: flex-start; padding-top: 48px; }   /* pull hero content up */

  /* ════════ POLISH PASS 5 ════════ */

  /* LEAGUE CARDS — smooth scaled entrance (only while hidden, so hover stays intact) */
  .league-card.reveal:not(.in) { opacity: 0; transform: translateY(40px) scale(.96); }
  .league-card .league-meta { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
  .league-card:hover .league-meta { transform: translateX(5px); }
  .league-card:hover .league-name { letter-spacing: .004em; }

  /* GOLD LADDER BARS — grow-in + moving sheen + row hover */
  .cascade-fill {
    transition: width 1.1s cubic-bezier(.2,.8,.2,1);
  }
  .cascade-bar { transition: box-shadow .35s ease; }
  .cascade-row .cascade-count { transition: transform .35s ease, text-shadow .35s ease; }
  .cascade-row:hover .cascade-bar { box-shadow: 0 0 0 1px rgba(232,184,75,.4), 0 0 22px rgba(232,184,75,.18); }
  .cascade-row:hover .cascade-count { transform: scale(1.06); text-shadow: 0 0 18px rgba(232,184,75,.5); }

  /* STARTING-SMALL CARDS (grid-4 .card) — cool hover + icon pop */
  .grid-4 .card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease; }
  .grid-4 .card:hover {
    transform: translateY(-8px);
    border-color: rgba(0,207,255,.5);
    background: #0e1a2b;
    box-shadow: 0 20px 46px rgba(0,0,0,.5), 0 0 24px rgba(0,207,255,.16);
  }
  .grid-4 .card > div:first-child { display:inline-block; transition: transform .4s cubic-bezier(.2,.7,.2,1.5); }
  .grid-4 .card:hover > div:first-child { transform: translateY(-4px) scale(1.25) rotate(-6deg); }
  .grid-4 .card h4 { transition: color .3s ease; }
  .grid-4 .card:hover h4 { color: var(--zcyan); }

  /* nudge hero buttons up */
  .hero-tagline { margin-bottom: 28px; }

  /* ════════ POLISH PASS 6 ════════ */
  .advantage-grid { background: #070F08; }
  .entry-table tbody tr.reveal { transition-duration: .55s; }

  /* ════ POLISH PASS 7 ════ */
  .umpire-hero .card.reveal:not(.in) { opacity: 0; transform: translateX(44px) scale(.96); }

  /* ════════ POLISH PASS 8 — snappier hovers ════════ */
  .track-card, .pillar-card, .champ-box, .launch-item,
  .perk-card, .tier-card, .league-card, .why-stat-block, .quickplay-stat,
  .grid-4 .card, .umpire-hero .card,
  .pillar-icon, .pillar-num, .tier-card-num, .league-name, .league-accent,
  .perk-card > div:first-child, .grid-4 .card > div:first-child,
  .grid-4 .card h4, .perk-card h4, .hero-stat .stat-num {
    transition-duration: .28s !important;
    transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
  }

  /* ════════ POLISH PASS 9 — league box hover: fast + smooth ════════ */
  .league-card,
  .league-card .league-name,
  .league-card .league-accent,
  .league-card .league-meta,
  .league-card::after {
    transition-duration: .16s !important;
    transition-timing-function: ease-out !important;
  }

  /* ════════ POLISH PASS 10 — league cards: no box entrance, smooth lift, no overlap pop ════════ */

  /* the box never fades / slides in — it's just there; only the numbers count up (handled in JS) */
  .league-card,
  .league-card.reveal,
  .league-card.reveal:not(.in){
    opacity: 1 !important;
    transform: none !important;
  }

  /* clean stacking so a lifted card sits cleanly ABOVE its neighbours instead of clipping into them */
  .league-grid{ position: relative; }
  .league-card{
    position: relative;
    z-index: 1;
    border-radius: 4px;
    transform: translateY(0) translateZ(0);
    backface-visibility: hidden;
    transition:
      transform .34s cubic-bezier(.22,.61,.36,1),
      background .34s ease,
      box-shadow .34s ease !important;
  }
  .league-card .league-name,
  .league-card .league-accent,
  .league-card .league-meta,
  .league-card::after{
    transition-duration: .34s !important;
    transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
  }

  /* hover: smooth, contained lift (no scale, no jump) + the colour glow already defined per league */
  .league-card:hover{
    z-index: 3;
    transform: translateY(-6px) translateZ(0) !important;
    background: #0e1a2a !important;
  }
  .league-card:hover .league-accent{ width: 8px; }
  .league-card:hover .league-name{ transform: translateX(5px) !important; }
  .league-card:hover .league-meta{ transform: translateX(4px); }

  @media (prefers-reduced-motion: reduce){
    .league-card, .league-card:hover{ transform: none !important; }
  }

  /* ════════════════════════════════════════════════════════════════════
     POLISH PASS 11 — GET EARLY ACCESS PAGE (full visual refresh, copy unchanged)
     All rules scoped to #page-access so no other page is affected.
     ════════════════════════════════════════════════════════════════════ */

  @keyframes zaFloat   { 0%,100%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(0,-18px,0); } }
  @keyframes zaDrift   { 0%,100%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(20px,12px,0); } }
  @keyframes zaSheen   { 0%{ background-position: -120% 0; } 100%{ background-position: 220% 0; } }

  /* ── HERO ───────────────────────────────────────────────────────── */
  #page-access .access-hero{
    background:
      linear-gradient(180deg, rgba(8,10,16,0.65) 0%, rgba(8,10,16,0.4) 40%, rgba(8,10,16,0.9) 85%, var(--ink) 100%),
      url('assets/contact.png') no-repeat center center / cover;
    padding: 140px 40px 110px;
    text-align: center;
  }
  #page-access .access-hero-inner{ max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
  #page-access .access-hero p{ max-width: 560px; margin: 24px auto 0; }
  #page-access .access-hero::before{
    content:''; position:absolute; width: 480px; height: 480px; border-radius: 50%;
    left: -160px; top: -160px;
    background: radial-gradient(circle, rgba(21,101,255,.18) 0%, transparent 70%);
    filter: blur(10px); animation: zaDrift 14s ease-in-out infinite;
  }
  #page-access .access-hero::after{
    content:''; position:absolute; width: 420px; height: 420px; border-radius: 50%;
    right: -140px; bottom: -180px; pointer-events:none;
    background: radial-gradient(circle, rgba(200,241,53,.14) 0%, transparent 70%);
    filter: blur(8px); animation: zaFloat 12s ease-in-out infinite;
  }
  #page-access .access-hero > *{ position: relative; z-index: 1; }
  #page-access .access-hero .eyebrow{
    display:inline-block;
    color: var(--zcyan); letter-spacing: .14em;
  }
  #page-access .access-hero h1{ margin-top: 22px; line-height: .92; }
  #page-access .access-hero h1 em{
    background: linear-gradient(100deg, var(--lime) 0%, #e6ff7a 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 0 40px rgba(200,241,53,.25);
  }

  /* ── TRACK CARDS ────────────────────────────────────────────────── */
  #page-access .tracks-grid{
    background: transparent; gap: 20px;
  }
  @media (min-width: 769px) {
    #page-access .tracks-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
    }
    #page-access .track-card {
      grid-column: span 2;
    }
    #page-access .tracks-grid .track-card:nth-child(4) {
      grid-column: 2 / span 2;
    }
    #page-access .tracks-grid .track-card:nth-child(5) {
      grid-column: 4 / span 2;
    }
  }
  #page-access .track-card{
    background: linear-gradient(180deg, #0e1828 0%, #0b1320 100%);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 44px 34px 38px;
    overflow: hidden;
    transition: transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s ease, border-color .34s ease, background .34s ease;
  }
  /* top accent line per track */
  #page-access .track-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height: 3px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
  }
  #page-access .tracks-grid .track-card:nth-child(1)::before{ background: linear-gradient(90deg, var(--zblue), var(--zcyan)); }
  #page-access .tracks-grid .track-card:nth-child(2)::before{ background: linear-gradient(90deg, #fff, rgba(255,255,255,.4)); }
  #page-access .tracks-grid .track-card:nth-child(3)::before{ background: linear-gradient(90deg, var(--gold), #f4d588); }
  #page-access .tracks-grid .track-card:nth-child(4)::before{ background: linear-gradient(90deg, var(--ember), #ff734d); }
  #page-access .tracks-grid .track-card:nth-child(5)::before{ background: linear-gradient(90deg, var(--lime), #d4ff66); }
  #page-access .track-card:hover::before{ transform: scaleX(1); }

  #page-access .track-card.featured{
    background: linear-gradient(150deg, #1565FF 0%, #00CFFF 100%);
    border-color: transparent;
    box-shadow: 0 18px 50px rgba(21,101,255,.30);
  }
  #page-access .track-card.featured::after{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.18), transparent 55%);
  }
  #page-access .track-card.featured > *{ position: relative; z-index:1; }

  /* icon badge */
  #page-access .track-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width: 64px; height: 64px; margin-bottom: 24px; font-size: 30px;
    border-radius: 16px;
    background: rgba(0,207,255,.10);
    border: 1px solid rgba(0,207,255,.22);
    transition: transform .4s cubic-bezier(.2,.7,.2,1.5), box-shadow .4s ease;
  }
  #page-access .tracks-grid .track-card:nth-child(3) .track-icon{
    background: rgba(232,184,75,.10); border-color: rgba(232,184,75,.26);
  }
  #page-access .tracks-grid .track-card:nth-child(4) .track-icon{
    background: rgba(255,76,26,.10); border-color: rgba(255,76,26,.26);
  }
  #page-access .tracks-grid .track-card:nth-child(5) .track-icon{
    background: rgba(200,241,53,.10); border-color: rgba(200,241,53,.26);
  }
  #page-access .track-card.featured .track-icon{
    background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34);
  }
  #page-access .track-card:hover .track-icon{ transform: translateY(-4px) scale(1.08) rotate(-4deg); }

  #page-access .track-card h3{ font-size: 34px; }
  #page-access .track-card p{ line-height: 1.55; }

  /* CTA buttons */
  #page-access .track-cta{
    border-radius: 10px; padding: 15px 16px;
    background: rgba(0,207,255,.10);
    border: 1px solid rgba(0,207,255,.30);
    color: var(--zcyan);
    transition: transform .26s cubic-bezier(.22,.61,.36,1), background .26s ease, box-shadow .26s ease, color .26s ease;
  }
  #page-access .tracks-grid .track-card:nth-child(3) .track-cta{
    background: rgba(232,184,75,.10); border: 1px solid rgba(232,184,75,.30); color: var(--gold);
  }
  #page-access .tracks-grid .track-card:nth-child(4) .track-cta{
    background: rgba(255,76,26,.10); border: 1px solid rgba(255,76,26,.30); color: var(--ember);
  }
  #page-access .tracks-grid .track-card:nth-child(5) .track-cta{
    background: rgba(200,241,53,.10); border: 1px solid rgba(200,241,53,.30); color: var(--lime);
  }
  #page-access .track-cta:hover{
    opacity: 1; transform: translateY(-2px);
    background: rgba(0,207,255,.18);
    box-shadow: 0 10px 26px rgba(0,207,255,.22);
  }
  #page-access .tracks-grid .track-card:nth-child(3) .track-cta:hover{
    background: rgba(232,184,75,.18); box-shadow: 0 10px 26px rgba(232,184,75,.22);
  }
  #page-access .tracks-grid .track-card:nth-child(4) .track-cta:hover{
    background: rgba(255,76,26,.18); box-shadow: 0 10px 26px rgba(255,76,26,.22);
  }
  #page-access .tracks-grid .track-card:nth-child(5) .track-cta:hover{
    background: rgba(200,241,53,.18); box-shadow: 0 10px 26px rgba(200,241,53,.22);
  }
  #page-access .track-card.featured .track-cta{
    background: #ffffff !important; color: var(--zblue) !important; border: none !important;
  }
  #page-access .track-card.featured .track-cta:hover{ box-shadow: 0 12px 30px rgba(0,0,0,.28); }

  /* track-card hover lift (override global) */
  #page-access .track-card:hover{
    transform: scale(1.025);
    border-color: rgba(0,207,255,.40);
    box-shadow: 0 24px 56px rgba(0,0,0,.45), 0 0 26px rgba(0,207,255,.14);
  }
  #page-access .track-card:hover .track-cta {
    background: rgba(0,207,255,.18);
    box-shadow: 0 10px 26px rgba(0,207,255,.22);
    transform: translateY(-2px);
  }
  #page-access .tracks-grid .track-card:nth-child(3):hover{
    transform: scale(1.025);
    border-color: rgba(232,184,75,.40);
    box-shadow: 0 24px 56px rgba(0,0,0,.45), 0 0 26px rgba(232,184,75,.14);
  }
  #page-access .tracks-grid .track-card:nth-child(3):hover .track-cta {
    background: rgba(232,184,75,.18);
    box-shadow: 0 10px 26px rgba(232,184,75,.22);
    transform: translateY(-2px);
  }
  #page-access .tracks-grid .track-card:nth-child(4):hover{
    transform: scale(1.025);
    border-color: rgba(255,76,26,.40);
    box-shadow: 0 24px 56px rgba(0,0,0,.45), 0 0 26px rgba(255,76,26,.14);
  }
  #page-access .tracks-grid .track-card:nth-child(4):hover .track-cta {
    background: rgba(255,76,26,.18);
    box-shadow: 0 10px 26px rgba(255,76,26,.22);
    transform: translateY(-2px);
  }
  #page-access .tracks-grid .track-card:nth-child(5):hover{
    transform: scale(1.025);
    border-color: rgba(200,241,53,.40);
    box-shadow: 0 24px 56px rgba(0,0,0,.45), 0 0 26px rgba(200,241,53,.14);
  }
  #page-access .tracks-grid .track-card:nth-child(5):hover .track-cta {
    background: rgba(200,241,53,.18);
    box-shadow: 0 10px 26px rgba(200,241,53,.22);
    transform: translateY(-2px);
  }
  #page-access .track-card.featured:hover{
    transform: scale(1.025);
    box-shadow: 0 28px 66px rgba(21,101,255,.42), 0 0 30px rgba(0,207,255,.22);
  }
  #page-access .track-card.featured:hover .track-cta {
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
    transform: translateY(-2px);
  }

  /* ── REGISTRATION FORM (panel + polished fields) ────────────────── */
  #page-access .main-form-section{
    background:
      radial-gradient(90% 60% at 50% 0%, rgba(21,101,255,.07) 0%, transparent 60%),
      var(--ink);
  }
  #page-access .main-form-inner{
    max-width: 900px;
    background: linear-gradient(180deg, #0e1828 0%, #0b1320 100%);
    border: 1px solid rgba(0,207,255,.12);
    border-radius: 20px;
    padding: 52px 48px 44px;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    transition: transform 0.2s ease;
  }
  #page-access .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
  }
  #page-access .form-group {
    position: relative;
    width: 100%;
  }
  #page-access .form-group.full-width {
    grid-column: span 2;
  }
  #page-access .form-group .floating-label {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    pointer-events: none;
    transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  #page-access .form-group textarea + .floating-label {
    top: 24px;
    transform: none;
  }

  #page-access .access-form-input,
  #page-access .access-form-select{
    border-radius: 11px;
    background: #0a1220;
    border: 1px solid rgba(255,255,255,.10);
    margin-bottom: 0;
    padding: 24px 18px 10px;
    height: 58px;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  }
  #page-access textarea.access-form-input {
    height: auto;
    padding-top: 28px;
  }

  #page-access .access-form-input:focus,
  #page-access .access-form-select:focus{
    border-color: rgba(0,207,255,.65);
    background: #0b1422;
    box-shadow: 0 0 0 3px rgba(0,207,255,.14);
  }

  /* Floating label active states */
  #page-access .access-form-input:focus ~ .floating-label,
  #page-access .access-form-input.has-value ~ .floating-label,
  #page-access .access-form-select:focus ~ .floating-label,
  #page-access .access-form-select.has-value ~ .floating-label {
    top: 10px;
    font-size: 11px;
    color: var(--zcyan);
    transform: translateY(0);
  }
  #page-access textarea.access-form-input:focus ~ .floating-label,
  #page-access textarea.access-form-input.has-value ~ .floating-label {
    top: 10px;
    font-size: 11px;
    color: var(--zcyan);
    transform: translateY(0);
  }

  /* Validation Error States */
  #page-access .form-group.invalid .access-form-input,
  #page-access .form-group.invalid .access-form-select {
    border-color: rgba(255, 76, 26, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 76, 26, 0.15);
  }
  #page-access .form-group.invalid .floating-label {
    color: var(--ember);
  }

  /* Shake animation for errors */
  @keyframes formShake {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(-6px); }
    30%, 60%, 90% { transform: translateX(6px); }
  }
  #page-access .main-form-inner.shake {
    animation: formShake 0.45s ease;
  }

  /* Success state bounce in */
  @keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); opacity: 0.8; }
    70% { transform: scale(0.9); opacity: 0.9; }
    100% { transform: scale(1); opacity: 1; }
  }
  
  /* Success state premium layout and animations */
  .form-success-state {
    position: relative;
    z-index: 1;
  }
  .success-glow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 207, 255, 0.08) 0%, rgba(178, 199, 58, 0.02) 50%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: ambientPulse 6s infinite ease-in-out;
  }
  @keyframes ambientPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.15) rotate(180deg); opacity: 1; }
  }
  @keyframes rocketPulse {
    0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 0px rgba(0,207,255,0)); }
    50% { transform: scale(1.08) translateY(-6px); filter: drop-shadow(0 10px 15px rgba(0,207,255,0.3)); }
  }
  @keyframes badgePulse {
    0%, 100% { transform: scale(1); opacity: 0.5; box-shadow: 0 0 4px #b2c73a; }
    50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 12px #b2c73a; }
  }
  @keyframes confFramer {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(180px) rotate(360deg); opacity: 0; }
  }


  @media (max-width: 768px) {
    #page-access .form-grid {
      grid-template-columns: 1fr !important;
      gap: 16px;
    }
    #page-access .form-group.full-width {
      grid-column: span 1 !important;
    }
  }
  #page-access .access-form-select{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300CFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 46px;
  }
  #page-access .access-form-select option{ background: #0b1422; color: var(--chalk); }
  #page-access .access-form-submit{
    border-radius: 12px; margin-top: 14px;
    box-shadow: 0 12px 30px rgba(21,101,255,.30);
    transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, filter .28s ease;
  }
  #page-access .access-form-submit:hover{
    transform: translateY(-3px);
    filter: brightness(1.05);
    box-shadow: 0 18px 44px rgba(21,101,255,.45);
  }

  /* ── LAUNCH INFO (divider strip → spaced stat cards) ────────────── */
  #page-access .launch-info{
    background: linear-gradient(180deg, var(--field) 0%, #0a111d 100%);
  }
  #page-access .launch-inner{ gap: 20px; }
  #page-access .launch-item{
    background: linear-gradient(180deg, #0e1828 0%, #0b1320 100%);
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px;
    padding: 40px 32px;
    transition: transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s ease, border-color .34s ease;
  }
  #page-access .launch-item:hover{
    transform: translateY(-6px);
    border-color: rgba(0,207,255,.35) !important;
    box-shadow: 0 22px 50px rgba(0,0,0,.45), 0 0 24px rgba(0,207,255,.12);
  }
  #page-access .launch-item .eyebrow{ color: var(--zcyan); }
  #page-access .launch-item .stat-num{
    background: linear-gradient(100deg, var(--zcyan) 0%, var(--zblue) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block;
  }

  /* ── FAQ CARDS ──────────────────────────────────────────────────── */
  #page-access .grid-2{ background: transparent !important; gap: 18px !important; }
  #page-access .grid-2 > div{
    background: linear-gradient(180deg, #0e1828 0%, #0b1320 100%) !important;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
  }
  #page-access .grid-2 > div:hover{
    transform: translateY(-4px);
    border-color: rgba(0,207,255,.30);
    box-shadow: 0 18px 40px rgba(0,0,0,.40);
  }
  #page-access .grid-2 > div h4{ transition: color .3s ease; }
  #page-access .grid-2 > div:hover h4{ color: var(--zcyan); }

  @media (max-width: 760px){
    #page-access .main-form-inner{ padding: 34px 22px; border-radius: 16px; }
    #page-access .access-hero{ padding: 104px 20px 64px; }
  }

  /* ════════ MOBILE AND TABLET ANIMATION & RESPONSIVENESS OPTIMIZATIONS ════════ */

  /* 1. Reset touch hover sticky states globally on devices without pointer hover */
  @media (hover: none) {
    /* Reset transforms and shadows on hover to prevent touch stickiness */
    .track-card:hover, .pillar-card:hover, .champ-box:hover, .launch-item:hover,
    .journey-step:hover, .ground-card:hover, .perk-card:hover, .tier-card:hover,
    .league-card:hover, .why-stat-block:hover, .quickplay-stat:hover, .advantage-card:hover,
    .club-type-card:hover, .hero-stat:hover, .why-stat-item:hover, #page-access .launch-item:hover,
    #page-access .grid-2 > div:hover, #page-access .track-card:hover,
    #page-access .tracks-grid .track-card:nth-child(3):hover,
    #page-access .tracks-grid .track-card:nth-child(4):hover,
    #page-access .tracks-grid .track-card:nth-child(5):hover {
      transform: none !important;
      box-shadow: none !important;
      border-color: rgba(255, 255, 255, 0.06) !important;
      background: var(--field) !important;
    }

    /* Preserve special card theme accents/borders on hover */
    .pillar-card:nth-child(1):hover { border-top-color: var(--lime) !important; }
    .pillar-card:nth-child(2):hover { border-top-color: var(--ember) !important; }
    .pillar-card:nth-child(3):hover { border-top-color: var(--gold) !important; }
    .track-card.featured:hover { background: var(--zgrad) !important; box-shadow: 0 18px 50px rgba(21,101,255,.30) !important; }

    .club-type-card:hover {
      background: rgba(255, 255, 255, 0.02) !important;
      border-color: rgba(255, 255, 255, 0.06) !important;
    }
    .club-type-card.featured:hover {
      background: linear-gradient(135deg, rgba(200, 241, 53, 0.04) 0%, rgba(200, 241, 53, 0.01) 100%) !important;
      border-color: rgba(200, 241, 53, 0.15) !important;
    }
    
    /* snappier hover triggers on touch inputs */
    * {
      transition-delay: 0s !important;
    }
  }

  /* 2. Optimize scroll reveal animations for mobile/tablet to avoid GPU lag */
  @media (max-width: 1024px) {
    .reveal {
      transform: translateY(10px) !important;
      transition-duration: 0.35s !important;
    }
    .reveal.in {
      transform: none !important;
    }
    .journey-step.reveal,
    .journey-step .step-dot {
      transition-duration: 0.45s !important;
    }
  }

  /* 3. Balanced Grid layouts for tablet screens (768px to 1024px) */
  @media (min-width: 769px) and (max-width: 1024px) {
    /* 3-column elements balance to 2 columns with centered last child */
    .grid-3, .tier-cards, .advantage-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 16px !important;
    }
    
    .grid-3 > *:nth-child(3):last-child,
    .tier-cards .tier-card:last-child,
    .advantage-grid .advantage-card:last-child {
      grid-column: span 2 !important;
    }
  }

  /* ── 5. Responsive Comparison Tables ── */
  .table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 48px;
    box-shadow: inset -15px 0 15px -15px rgba(0,207,255,0.15);
  }
  .table-wrap .entry-table {
    margin-top: 0;
    min-width: 650px;
  }

  /* ── 6. Guaranteed Matches Lime Callout Block ── */
  .lime-callout {
    background: var(--lime);
    padding: 64px 40px;
    margin: 0 auto 96px;
    max-width: 1200px;
  }
  .lime-callout-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  @media (max-width: 768px) {
    .lime-callout {
      padding: 40px 24px;
      margin: 0 20px 56px;
      border-radius: 8px;
    }
    .lime-callout-inner {
      grid-template-columns: 1fr !important;
      gap: 32px !important;
      text-align: left;
    }
  }

  /* ── 7. Journey/Process Step Flex Text Alignments ── */
  .journey-step-content, .process-step-content {
    text-align: inherit;
    flex: 1;
  }

  /* ── 8. Icon & Heading Alignment (same line) for Cards ── */
  .pillar-icon, .advantage-icon, .perk-card > div:first-child, .track-icon {
    display: inline-flex !important;
    vertical-align: middle !important;
    margin-right: 14px !important;
    margin-bottom: 0 !important;
  }
  .pillar-card h3, .advantage-card h4, .perk-card h4, .track-card h3 {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .pillar-card p, .advantage-card p, .perk-card p, .track-card p {
    margin-top: 16px !important;
  }

  /* ════════════════════════════════════════════════════════════════════
     RESPONSIVE POLISH — FINAL PASS
     ════════════════════════════════════════════════════════════════════ */

    /* ── TABLET 1024px ── */
    @media (max-width: 1024px) {
      /* Responsive Grids for Tablet */
      .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
      .grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }

      /* Nav tighten */
      nav { padding: 0 24px; }
      .nav-links { gap: 16px; }
      .nav-links a { font-size: 12px; }

      /* Section padding */
      .section, .section-full { padding: 72px 32px; }

      /* Hero overlay */
      .hero-scroll__overlay { padding: 80px 32px 0; }
      .hero-scroll__overlay .hero-tagline { font-size: 18px; }

      /* Footer brand column */
      .footer-brand p { max-width: 100%; }
      .footer-top { gap: 40px; }

      /* Player section */
      .product-grid { grid-template-columns: 1fr; gap: 40px; }
      .phone-wrap { transform: scale(0.60); margin: -80px auto; }
    }

    /* ── MOBILE 768px ── */
    @media (max-width: 768px) {
      /* Responsive Grids for Mobile */
      .grid-4, .grid-3, .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
      }

      /* ── NAV ── */
      nav { padding: 0 16px; height: 60px; }

      /* ── HERO OVERLAY ── */
      .hero-scroll { height: 150vh; }
      .hero-scroll__overlay {
        padding: 70px 20px 0;
        text-align: left;
      }
      .hero-scroll__overlay h1 { font-size: clamp(38px, 11vw, 56px); }
      .hero-scroll__overlay .hero-tagline { font-size: 15px; max-width: 100%; margin-bottom: 28px; }
      .hero-scroll__cue { display: none; }

      /* ── HERO STATS ── */
      .hero-stats { grid-template-columns: 1fr 1fr; }

      /* ── SECTION PADDING ── */
      .section, .section-full { padding: 52px 18px; }

      /* ── TYPOGRAPHY ── */
      h1 { font-size: clamp(36px, 10vw, 52px); }
      h2 { font-size: clamp(26px, 8vw, 40px); }
      h3 { font-size: 22px; }

      /* ── PLAYER APP SECTION ── */
      .player-section { padding: 64px 0; }
      .product-grid { width: min(1200px, calc(100% - 36px)); grid-template-columns: 1fr; gap: 24px; }
      .product-copy h2 { font-size: clamp(30px, 9vw, 48px); }
      .phone-wrap { transform: scale(0.46); margin: -120px auto; }
      .product-copy { max-width: 100%; }

      /* ── FOOTER ── */
      footer { padding: 48px 18px 28px; }
      .footer-top { grid-template-columns: 1fr !important; gap: 28px; }
      .footer-brand p { font-size: 13px; max-width: 100%; }
      .footer-brand h3 { font-size: 26px; }
      .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
      .footer-tagline { font-size: 12px; }

      /* ── PITCH DIVIDER ── */
      .pitch-divider { margin: 0 18px; }

      /* ── COMPETITIONS PAGE ── */
      .comp-hero { padding: 80px 18px 48px; }
      .league-card { padding: 28px 20px; }
      .league-name { font-size: clamp(28px, 9vw, 48px); }

      /* ── BRANDS/CLUBS/UMPIRE/BATTLEGROUND ── */
      .brands-hero, .ground-hero, .umpire-perks { padding: 80px 18px 48px; }
      .clubs-hero { padding: 80px 18px 48px; }
      .access-hero { padding: 90px 18px 52px; }

      /* ── CARDS ── */
      .card { padding: 24px 20px; }
      .grid-4 .card { padding: 24px 20px; }

      /* ── BUTTONS ── */
      .btn { font-size: 13px; padding: 13px 22px; }
      .hero-actions .btn { width: 100%; text-align: center; padding: 16px 22px; }

      /* ── MARQUEE ── */
      .marquee-item { font-size: 14px; padding: 0 18px; }

      /* ── ENTRY TABLE overflow ── */
      .table-wrap { margin-top: 28px; }
      .entry-table th, .entry-table td { padding: 10px 8px; font-size: 12px; }
    }

    /* ── EXTRA SMALL 420px ── */
    @media (max-width: 420px) {
      nav { padding: 0 12px; height: 56px; }
      .nav-logo img { height: 30px !important; }
      .page { padding-top: 56px; }

      h1 { font-size: 32px; }
      h2 { font-size: 26px; }

      .hero-scroll { height: 140vh; }
      .hero-scroll__overlay { padding: 60px 16px 0; }
      .hero-scroll__overlay .hero-tagline { font-size: 14px; }

      .section, .section-full { padding: 44px 16px; }

      .phone-wrap { transform: scale(0.40); margin: -138px auto; }

      .hero-stats { grid-template-columns: 1fr 1fr; gap: 1px; }
      .hero-stat { padding: 16px 12px; }
      .stat-num { font-size: 32px; }

      .clubs-hero-right { grid-template-columns: 1fr; }
      .league-meta { flex-wrap: wrap; gap: 12px; }
      .league-name { font-size: 28px; }
      
      footer { padding: 40px 16px 24px; }
      .footer-col ul li { margin-bottom: 10px; }

      /* Buttons full width on tiny phones */
      .hero-actions { gap: 10px; }
      .btn-outline, .btn-lime { width: 100%; text-align: center; }
    }

  /* ════════════ HERO ENTRANCE ANIMATION (smooth fade-up on load) ════════════ */
  @keyframes heroIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Static-page heroes: stagger each text element in */
  .access-hero-inner > *,
  .comp-hero > *,
  .brands-hero-inner > *,
  .ground-hero > *,
  .clubs-hero > div:first-child > *,
  .umpire-hero > div:first-child > * {
    animation: heroIn .85s cubic-bezier(.22,.61,.36,1) both;
  }
  .access-hero-inner > *:nth-child(1),
  .comp-hero > *:nth-child(1),
  .brands-hero-inner > *:nth-child(1),
  .ground-hero > *:nth-child(1),
  .clubs-hero > div:first-child > *:nth-child(1),
  .umpire-hero > div:first-child > *:nth-child(1) { animation-delay: .08s; }
  .access-hero-inner > *:nth-child(2),
  .comp-hero > *:nth-child(2),
  .brands-hero-inner > *:nth-child(2),
  .ground-hero > *:nth-child(2),
  .clubs-hero > div:first-child > *:nth-child(2),
  .umpire-hero > div:first-child > *:nth-child(2) { animation-delay: .20s; }
  .access-hero-inner > *:nth-child(3),
  .comp-hero > *:nth-child(3),
  .brands-hero-inner > *:nth-child(3),
  .ground-hero > *:nth-child(3),
  .clubs-hero > div:first-child > *:nth-child(3),
  .umpire-hero > div:first-child > *:nth-child(3) { animation-delay: .32s; }
  .access-hero-inner > *:nth-child(4),
  .comp-hero > *:nth-child(4),
  .brands-hero-inner > *:nth-child(4),
  .ground-hero > *:nth-child(4),
  .clubs-hero > div:first-child > *:nth-child(4),
  .umpire-hero > div:first-child > *:nth-child(4) { animation-delay: .44s; }
  .access-hero-inner > *:nth-child(5),
  .comp-hero > *:nth-child(5),
  .brands-hero-inner > *:nth-child(5),
  .ground-hero > *:nth-child(5),
  .clubs-hero > div:first-child > *:nth-child(5),
  .umpire-hero > div:first-child > *:nth-child(5) { animation-delay: .56s; }

  /* Home (scroll-driven) hero: container layout styling only.
     Entrance animation is handled staggered per-element natively. */
  .hero-scroll__overlay {
  }

  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .access-hero-inner > *, .comp-hero > *, .brands-hero-inner > *,
    .ground-hero > *, .clubs-hero > div:first-child > *,
    .umpire-hero > div:first-child > *, .hero-scroll__overlay {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }