/* ============================================================
       CSS VARIABLES
    ============================================================ */
    :root {
      --bg-primary:      #0B0F19;
      --bg-secondary:    #111827;
      --accent:          #39FF14;
      --accent-dim:      rgba(57,255,20,0.12);
      --accent-glow:     rgba(57,255,20,0.5);
      --accent-glow-lg:  rgba(57,255,20,0.18);
      --text:            #FFFFFF;
      --text-muted:      #9CA3AF;
      --glass-bg:        rgba(17,24,39,0.55);
      --glass-border:    rgba(57,255,20,0.14);
      --nav-height:      76px;
      --ease:            cubic-bezier(0.4,0,0.2,1);
      --ease-spring:     cubic-bezier(0.34,1.56,0.64,1);
      --ease-out:        cubic-bezier(0,0,0.2,1);
    }

    *, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Poppins', sans-serif;
      background: var(--bg-primary);
      color: var(--text);
      overflow-x: hidden;
    }

    /* ============================================================
       ─── NAVBAR (same as previous) ───
    ============================================================ */
    #navbar {
      position: fixed;
      top:0; left:0; right:0;
      z-index: 1000;
      height: var(--nav-height);
      background: rgba(11,15,25,0.72);
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      border-bottom: 1px solid var(--glass-border);
      transition: background .4s var(--ease), box-shadow .4s var(--ease);
      animation: navbarDrop .8s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    #navbar.scrolled {
      background: rgba(11,15,25,0.94);
      box-shadow: 0 8px 48px rgba(0,0,0,.6), 0 0 80px rgba(57,255,20,.04);
      border-bottom-color: rgba(57,255,20,.28);
    }
    #navbar::before {
      content:'';
      position:absolute; top:0; left:0; right:0; height:2px;
      background: linear-gradient(90deg,transparent,var(--accent),rgba(57,255,20,.5),var(--accent),transparent);
      background-size:200% 100%;
      opacity:.7;
      animation: scanLine 4s linear infinite;
    }
    @keyframes navbarDrop { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }
    @keyframes scanLine { 0%{background-position:-100% 0} 100%{background-position:300% 0} }

    .nav-inner {
      max-width: 1320px; margin:0 auto; height:100%;
      display:flex; align-items:center; justify-content:space-between;
      padding:0 28px; gap:24px;
    }
    .nav-logo {
      display:flex; align-items:center; gap:12px;
      text-decoration:none; flex-shrink:0;
      animation: fadeSlideLeft .7s .3s var(--ease) both;
    }
    @keyframes fadeSlideLeft { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }

    .logo-icon { width:42px; height:42px; flex-shrink:0; animation: logoFloat 4s ease-in-out infinite; }
    @keyframes logoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
    .logo-icon svg { width:100%; height:100%; filter:drop-shadow(0 0 8px var(--accent-glow)); }
    .logo-text { display:flex; flex-direction:column; line-height:1; }
    .logo-name {
      font-family:'Bebas Neue',cursive; font-size:22px; letter-spacing:2px;
      background:linear-gradient(135deg,#fff 40%,var(--accent) 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      white-space:nowrap;
    }
    .logo-tagline { font-size:9px; font-weight:500; letter-spacing:3.5px; text-transform:uppercase; color:var(--accent); margin-top:1px; opacity:.85; }

    .nav-links { display:flex; align-items:center; gap:4px; list-style:none; animation: fadeIn .7s .5s var(--ease) both; }
    @keyframes fadeIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
    .nav-links a {
      display:block; padding:8px 14px; font-size:13px; font-weight:500; letter-spacing:.6px;
      color:var(--text-muted); text-decoration:none; border-radius:6px; position:relative;
      transition:color .25s var(--ease); white-space:nowrap;
    }
    .nav-links a::after {
      content:''; position:absolute; bottom:4px; left:50%; width:0; height:2px;
      background:var(--accent); border-radius:99px; box-shadow:0 0 8px var(--accent-glow);
      transform:translateX(-50%); transition:width .3s var(--ease);
    }
    .nav-links a::before {
      content:''; position:absolute; inset:0; border-radius:6px;
      background:var(--accent-dim); opacity:0; transition:opacity .25s var(--ease);
    }
    .nav-links a:hover, .nav-links a.active { color:#fff; }
    .nav-links a:hover::after, .nav-links a.active::after { width:calc(100% - 20px); }
    .nav-links a:hover::before { opacity:1; }
    .nav-links a.active::before { opacity:.6; }

    .nav-right { display:flex; align-items:center; gap:16px; flex-shrink:0; animation:fadeSlideRight .7s .4s var(--ease) both; }
    @keyframes fadeSlideRight { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

    .btn-book {
      position:relative; display:inline-flex; align-items:center; gap:8px;
      padding:10px 24px; font-family:'Poppins',sans-serif; font-size:13px;
      font-weight:600; letter-spacing:1px; text-transform:uppercase;
      text-decoration:none; color:var(--bg-primary); background:var(--accent);
      border:none; border-radius:8px; cursor:pointer; overflow:hidden;
      transition:transform .2s var(--ease-spring), box-shadow .3s var(--ease);
      box-shadow:0 0 20px rgba(57,255,20,.35), 0 4px 16px rgba(0,0,0,.4);
    }
    .btn-book:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 0 40px rgba(57,255,20,.65),0 8px 24px rgba(0,0,0,.4); }
    .btn-book:active { transform:scale(.97); }
    .btn-shine {
      position:absolute; top:-50%; left:-75%; width:50%; height:200%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
      transform:skewX(-20deg); transition:left .5s var(--ease); pointer-events:none;
    }
    .btn-book:hover .btn-shine { left:150%; }
    .btn-arrow { display:inline-flex; transition:transform .25s var(--ease-spring); }
    .btn-book:hover .btn-arrow { transform:translateX(4px); }

    .hamburger {
      display:none; flex-direction:column; justify-content:center; align-items:center;
      width:40px; height:40px; gap:6px; cursor:pointer; background:transparent;
      border:1px solid rgba(57,255,20,.35); border-radius:8px; padding:8px; z-index:1100;
      transition:border-color .25s, background .25s; flex-shrink:0;
    }
    .hamburger:hover { border-color:var(--accent); background:var(--accent-dim); }
    .hamburger span { display:block; width:20px; height:2px; background:var(--text); border-radius:99px; transition:transform .35s var(--ease), opacity .25s var(--ease), width .25s var(--ease), background .25s; transform-origin:center; }
    .hamburger.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); background:var(--accent); }
    .hamburger.open span:nth-child(2) { opacity:0; width:0; }
    .hamburger.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); background:var(--accent); }

    .mobile-menu {
      position:fixed; inset:0; z-index:999;
      display:flex; flex-direction:column;
      background:rgba(11,15,25,.97); backdrop-filter:blur(28px);
      -webkit-backdrop-filter:blur(28px);
      padding:calc(var(--nav-height) + 32px) 40px 40px;
      transform:translateX(100%); opacity:0;
      transition:transform .5s var(--ease), opacity .4s var(--ease); overflow-y:auto;
    }
    .mobile-menu.open { transform:translateX(0); opacity:1; }
    .mobile-menu::before {
      content:''; position:absolute; inset:0;
      background-image:linear-gradient(rgba(57,255,20,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(57,255,20,.03) 1px,transparent 1px);
      background-size:40px 40px; pointer-events:none;
    }
    .mobile-nav-links { list-style:none; display:flex; flex-direction:column; gap:4px; flex:1; }
    .mobile-nav-links li { opacity:0; transform:translateX(30px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
    .mobile-menu.open .mobile-nav-links li { opacity:1; transform:translateX(0); }
    .mobile-menu.open .mobile-nav-links li:nth-child(1){transition-delay:.08s}
    .mobile-menu.open .mobile-nav-links li:nth-child(2){transition-delay:.14s}
    .mobile-menu.open .mobile-nav-links li:nth-child(3){transition-delay:.20s}
    .mobile-menu.open .mobile-nav-links li:nth-child(4){transition-delay:.26s}
    .mobile-menu.open .mobile-nav-links li:nth-child(5){transition-delay:.32s}
    .mobile-menu.open .mobile-nav-links li:nth-child(6){transition-delay:.38s}
    .mobile-menu.open .mobile-nav-links li:nth-child(7){transition-delay:.44s}
    .mobile-menu.open .mobile-nav-links li:nth-child(8){transition-delay:.50s}
    .mobile-nav-links a {
      display:flex; align-items:center; justify-content:space-between;
      padding:18px 0; font-family:'Bebas Neue',cursive; font-size:36px; letter-spacing:3px;
      color:var(--text-muted); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.05);
      transition:color .25s, padding-left .25s var(--ease-spring);
    }
    .mobile-nav-links a .m-arrow { font-size:18px; opacity:0; transform:translateX(-8px); transition:opacity .25s,transform .25s var(--ease-spring); color:var(--accent); }
    .mobile-nav-links a:hover, .mobile-nav-links a.active { color:#fff; padding-left:12px; }
    .mobile-nav-links a:hover .m-arrow, .mobile-nav-links a.active .m-arrow { opacity:1; transform:translateX(0); }
    .mobile-cta { margin-top:40px; opacity:0; transform:translateY(20px); transition:opacity .4s .55s var(--ease),transform .4s .55s var(--ease); }
    .mobile-menu.open .mobile-cta { opacity:1; transform:translateY(0); }
    .mobile-cta .btn-book { width:100%; justify-content:center; padding:16px; font-size:15px; border-radius:12px; }
    .mobile-sports { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; opacity:0; transition:opacity .4s .62s; }
    .mobile-menu.open .mobile-sports { opacity:1; }
    .sport-tag { font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent-dim); padding:5px 12px; border-radius:99px; background:var(--accent-dim); }

    @media(max-width:900px){ .nav-links{display:none} .hamburger{display:flex} }
    @media(max-width:480px){ .nav-inner{padding:0 16px} .logo-name{font-size:18px} }

    /* ============================================================
       ─── HERO SECTION ───
    ============================================================ */

    /* ── Background layers ── */
    .hero {
      position: relative;
      min-height: 100vh;
      padding-top: var(--nav-height);
      display: flex;
      align-items: center;
      overflow: hidden;
      background: var(--bg-primary);
    }

    /* Base grid texture */
    .hero-grid {
      position: absolute; inset: 0; z-index: 0;
      background-image:
        linear-gradient(rgba(57,255,20,0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,0.032) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    }

    /* Main ambient glow blobs */
    .hero-glow-left {
      position: absolute; z-index: 0;
      top: 10%; left: -10%;
      width: 55vw; height: 55vw;
      max-width: 700px; max-height: 700px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(57,255,20,0.10) 0%, transparent 70%);
      filter: blur(60px);
      animation: blobPulse 8s ease-in-out infinite alternate;
    }
    .hero-glow-right {
      position: absolute; z-index: 0;
      bottom: 0; right: -5%;
      width: 45vw; height: 45vw;
      max-width: 600px; max-height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(57,255,20,0.07) 0%, transparent 70%);
      filter: blur(80px);
      animation: blobPulse 10s 2s ease-in-out infinite alternate-reverse;
    }
    @keyframes blobPulse {
      from { transform: scale(1) translate(0,0); opacity:.7; }
      to   { transform: scale(1.15) translate(2%,3%); opacity:1; }
    }

    /* Diagonal light streak */
    .hero-streak {
      position: absolute; z-index: 0;
      top: -20%; right: 25%;
      width: 2px; height: 140%;
      background: linear-gradient(to bottom, transparent, rgba(57,255,20,0.3), transparent);
      transform: rotate(20deg);
      filter: blur(1px);
      animation: streakFade 6s ease-in-out infinite;
    }
    .hero-streak:nth-child(2) { right: 40%; width: 1px; opacity:.4; animation-delay:2s; }
    @keyframes streakFade {
      0%,100%{opacity:.2} 50%{opacity:.6}
    }

    /* Floating particle dots */
    .particles { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
    .particle {
      position:absolute;
      width: var(--size, 3px); height: var(--size, 3px);
      border-radius:50%;
      background:var(--accent);
      opacity:0;
      animation: particleRise var(--dur, 8s) var(--delay, 0s) linear infinite;
    }
    @keyframes particleRise {
      0%   { transform: translateY(100vh) translateX(0); opacity:0; }
      10%  { opacity:.6; }
      90%  { opacity:.3; }
      100% { transform: translateY(-10vh) translateX(var(--drift,20px)); opacity:0; }
    }

    /* ── Hero Layout ── */
    .hero-inner {
      position: relative; z-index: 2;
      max-width: 1320px; margin: 0 auto;
      width: 100%;
      padding: 80px 28px 120px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    /* ── LEFT CONTENT ── */
    .hero-content { display:flex; flex-direction:column; gap:28px; }

    /* Badge chip */
    .hero-badge {
      display: inline-flex; align-items:center; gap:8px;
      padding:7px 16px;
      background: var(--accent-dim);
      border: 1px solid rgba(57,255,20,0.25);
      border-radius: 99px;
      font-size: 11px; font-weight: 600;
      letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--accent);
      width: fit-content;
      opacity: 0;
      animation: fadeUp .6s .3s var(--ease-out) both;
    }
    .badge-dot {
      width: 6px; height: 6px; border-radius:50%;
      background: var(--accent);
      box-shadow: 0 0 8px var(--accent);
      animation: dotBlink 1.8s ease-in-out infinite;
    }
    @keyframes dotBlink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

    /* Main heading */
    .hero-title {
      display: flex; flex-direction:column; gap:0;
      opacity: 0;
      animation: fadeUp .7s .5s var(--ease-out) both;
    }
    .hero-title .line-1 {
      font-family: 'Bebas Neue', cursive;
      font-size: clamp(64px, 7.5vw, 112px);
      line-height: .92;
      letter-spacing: 3px;
      color: var(--text);
    }
    .hero-title .line-2 {
      font-family: 'Bebas Neue', cursive;
      font-size: clamp(64px, 7.5vw, 112px);
      line-height: .92;
      letter-spacing: 3px;
      background: linear-gradient(90deg, var(--accent) 0%, #b4ff8c 60%, var(--accent) 100%);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 4s linear infinite;
    }
    @keyframes shimmer { to{background-position:200% center} }
    .hero-title .line-3 {
      font-family: 'Bebas Neue', cursive;
      font-size: clamp(28px, 3vw, 44px);
      line-height: 1.2;
      letter-spacing: 5px;
      color: var(--text-muted);
      margin-top: 8px;
    }

    /* Description */
    .hero-desc {
      font-size: 15px; font-weight: 400; line-height: 1.75;
      color: var(--text-muted);
      max-width: 500px;
      opacity: 0;
      animation: fadeUp .7s .7s var(--ease-out) both;
    }
    .hero-desc strong { color: var(--text); font-weight: 600; }

    /* Sport tags strip */
    .hero-sports {
      display: flex; flex-wrap:wrap; gap:8px;
      opacity:0;
      animation: fadeUp .6s .85s var(--ease-out) both;
    }
    .hero-sport-tag {
      padding: 5px 14px; border-radius:99px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      font-size: 11px; font-weight: 500;
      letter-spacing: 1.5px; text-transform:uppercase;
      color: var(--text-muted);
      transition: border-color .25s, color .25s, background .25s;
      cursor: default;
    }
    .hero-sport-tag:hover {
      border-color: rgba(57,255,20,.4);
      color: var(--accent);
      background: var(--accent-dim);
    }

    /* CTA row */
    .hero-cta {
      display: flex; align-items:center; gap:16px; flex-wrap:wrap;
      opacity:0;
      animation: fadeUp .7s 1s var(--ease-out) both;
    }

    .btn-primary {
      position:relative; display:inline-flex; align-items:center; gap:10px;
      padding:14px 32px; border-radius:10px;
      background: var(--accent); color: var(--bg-primary);
      font-family:'Poppins',sans-serif; font-size:14px;
      font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
      text-decoration:none; border:none; cursor:pointer; overflow:hidden;
      transition:transform .2s var(--ease-spring), box-shadow .3s var(--ease);
      box-shadow: 0 0 28px rgba(57,255,20,.4), 0 4px 20px rgba(0,0,0,.4);
    }
    .btn-primary::before {
      content:''; position:absolute; inset:-2px; border-radius:12px;
      background: conic-gradient(from var(--angle,0deg),var(--accent) 0%,transparent 30%,transparent 70%,var(--accent) 100%);
      z-index:-1; opacity:0; transition:opacity .3s;
      animation: rotateBorder 2.5s linear infinite;
    }
    .btn-primary::after { content:''; position:absolute; inset:0; background:var(--accent); border-radius:10px; z-index:-1; }
    @property --angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
    @keyframes rotateBorder { to{--angle:360deg} }
    .btn-primary:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 0 50px rgba(57,255,20,.65),0 8px 30px rgba(0,0,0,.4); }
    .btn-primary:hover::before { opacity:1; }
    .btn-primary:active { transform:scale(.97); }
    .btn-p-shine {
      position:absolute; top:-50%; left:-75%; width:50%; height:200%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
      transform:skewX(-20deg); transition:left .5s var(--ease); pointer-events:none;
    }
    .btn-primary:hover .btn-p-shine { left:150%; }
    .btn-p-arrow { display:inline-flex; transition:transform .25s var(--ease-spring); }
    .btn-primary:hover .btn-p-arrow { transform:translateX(5px); }

    .btn-secondary {
      position:relative; display:inline-flex; align-items:center; gap:10px;
      padding:13px 28px; border-radius:10px;
      background: transparent; color: var(--text);
      border: 1px solid rgba(255,255,255,0.18);
      font-family:'Poppins',sans-serif; font-size:14px; font-weight:600;
      letter-spacing:1.2px; text-transform:uppercase;
      text-decoration:none; cursor:pointer; overflow:hidden;
      transition:border-color .3s var(--ease), color .3s var(--ease),
                 transform .2s var(--ease-spring), box-shadow .3s;
    }
    .btn-secondary::before {
      content:''; position:absolute; inset:0; border-radius:10px;
      background: linear-gradient(135deg, rgba(57,255,20,.12), rgba(57,255,20,.04));
      opacity:0; transition:opacity .3s var(--ease);
    }
    .btn-secondary:hover {
      border-color: rgba(57,255,20,.5);
      color: var(--accent);
      transform: translateY(-2px);
      box-shadow: 0 0 20px rgba(57,255,20,.15);
    }
    .btn-secondary:hover::before { opacity:1; }
    .btn-s-icon { transition:transform .25s var(--ease-spring); }
    .btn-secondary:hover .btn-s-icon { transform:rotate(45deg); }

    /* ── STATS ROW ── */
    .hero-stats {
      display: grid; grid-template-columns: repeat(4,1fr); gap:16px;
      opacity:0;
      animation: fadeUp .7s 1.2s var(--ease-out) both;
    }

    .stat-card {
      position:relative; padding:18px 16px; border-radius:12px;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      overflow: hidden;
      transition: border-color .3s, box-shadow .3s, transform .3s var(--ease-spring);
      cursor: default;
    }
    .stat-card::before {
      content:''; position:absolute; inset:0; border-radius:12px;
      background: linear-gradient(135deg, rgba(57,255,20,.06) 0%, transparent 60%);
      opacity:0; transition:opacity .3s;
    }
    .stat-card:hover {
      border-color: rgba(57,255,20,.4);
      box-shadow: 0 0 24px rgba(57,255,20,.12), 0 8px 24px rgba(0,0,0,.3);
      transform: translateY(-4px);
    }
    .stat-card:hover::before { opacity:1; }
    .stat-number {
      font-family:'Bebas Neue',cursive;
      font-size: clamp(28px, 2.8vw, 38px);
      letter-spacing:1px; color: var(--accent);
      line-height:1;
      text-shadow: 0 0 20px var(--accent-glow);
    }
    .stat-label {
      font-size:10px; font-weight:600; letter-spacing:2px;
      text-transform:uppercase; color:var(--text-muted);
      margin-top:4px; line-height:1.3;
    }
    .stat-line {
      width:24px; height:2px; background:var(--accent);
      border-radius:99px; margin-top:8px;
      box-shadow: 0 0 8px var(--accent-glow);
      transition:width .3s var(--ease-spring);
    }
    .stat-card:hover .stat-line { width:40px; }

    @keyframes fadeUp {
      from { opacity:0; transform:translateY(28px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* ── RIGHT VISUAL ── */
    .hero-visual {
      position: relative;
      display:flex; align-items:center; justify-content:center;
      opacity:0;
      animation: fadeSlideVisual .9s .4s var(--ease-out) both;
    }
    @keyframes fadeSlideVisual {
      from{opacity:0;transform:translateX(40px) scale(.96)}
      to{opacity:1;transform:translateX(0) scale(1)}
    }

    /* Central arena SVG composition */
    .arena-wrap {
      position:relative; width:100%; max-width:540px;
      aspect-ratio:1/1.05;
      margin:0 auto;
    }

    /* Outer spinning ring */
    .ring-outer {
      position:absolute; inset:-8%; border-radius:50%;
      border:1px solid rgba(57,255,20,.12);
      animation: spinSlow 30s linear infinite;
    }
    .ring-outer::before {
      content:''; position:absolute;
      top:0; left:50%; transform:translateX(-50%);
      width:8px; height:8px; border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 16px var(--accent-glow);
    }
    .ring-mid {
      position:absolute; inset:2%; border-radius:50%;
      border:1px dashed rgba(57,255,20,.08);
      animation: spinSlow 20s linear infinite reverse;
    }
    @keyframes spinSlow { to{transform:rotate(360deg)} }

    /* Central visual card */
    .arena-center {
      position:absolute; inset:10%;
      border-radius:24px;
      background: linear-gradient(145deg, rgba(17,24,39,.9) 0%, rgba(11,15,25,.95) 100%);
      border:1px solid rgba(57,255,20,.18);
      box-shadow: 0 0 60px rgba(57,255,20,.08), 0 40px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
      overflow:hidden;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:16px;
      backdrop-filter:blur(10px);
    }
    .arena-center::before {
      content:''; position:absolute; inset:0;
      background:
        radial-gradient(ellipse 70% 50% at 50% 20%, rgba(57,255,20,.06) 0%, transparent 60%),
        linear-gradient(rgba(57,255,20,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.025) 1px, transparent 1px);
      background-size:auto, 30px 30px, 30px 30px;
      pointer-events:none;
    }

    /* Big icon in arena */
    .arena-icon {
      position:relative; z-index:1;
      width:100px; height:100px;
      border-radius:50%;
      background:linear-gradient(135deg,rgba(57,255,20,.15),rgba(57,255,20,.05));
      border:2px solid rgba(57,255,20,.3);
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 0 40px rgba(57,255,20,.2);
      animation: iconPulse 3s ease-in-out infinite;
    }
    @keyframes iconPulse {
      0%,100%{box-shadow:0 0 30px rgba(57,255,20,.2)} 50%{box-shadow:0 0 60px rgba(57,255,20,.45)}
    }
    .arena-icon svg { width:52px; height:52px; filter:drop-shadow(0 0 12px var(--accent-glow)); }

    .arena-label {
      position:relative; z-index:1; text-align:center;
    }
    .arena-label h2 {
      font-family:'Bebas Neue',cursive; font-size:28px; letter-spacing:4px; color:var(--text);
    }
    .arena-label p { font-size:10px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--accent); }

    /* Sport orbs at bottom of arena */
    .arena-orbs {
      position:relative; z-index:1;
      display:flex; gap:10px; align-items:center;
    }
    .orb {
      width:36px; height:36px; border-radius:50%;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
      display:flex; align-items:center; justify-content:center;
      font-size:18px; transition:border-color .25s, box-shadow .25s, transform .25s var(--ease-spring);
      cursor:default;
    }
    .orb:hover { border-color:var(--accent); box-shadow:0 0 16px rgba(57,255,20,.4); transform:scale(1.2); }

    /* Floating glass cards */
    .float-card {
      position:absolute; z-index:3;
      background:rgba(17,24,39,.75);
      backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
      border:1px solid rgba(57,255,20,.2);
      border-radius:14px; padding:14px 18px;
      box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 20px rgba(57,255,20,.06);
      min-width:140px;
    }
    .float-card-dot {
      width:8px; height:8px; border-radius:50%;
      background:var(--accent); box-shadow:0 0 10px var(--accent-glow);
      margin-bottom:6px;
      animation:dotBlink 2s ease-in-out infinite;
    }
    .float-card-title { font-family:'Bebas Neue',cursive; font-size:16px; letter-spacing:2px; color:var(--text); line-height:1; }
    .float-card-sub { font-size:10px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-top:2px; }

    /* Card positions + float animations */
    .fc-cricket {
      top:4%; left:-8%;
      animation: floatA 6s ease-in-out infinite;
    }
    .fc-football {
      bottom:12%; left:-6%;
      animation: floatB 7s 1s ease-in-out infinite;
    }
    .fc-elite {
      top:10%; right:-8%;
      animation: floatC 5.5s .5s ease-in-out infinite;
    }
    .fc-live {
      bottom:4%; right:-4%;
      animation: floatA 6.5s 2s ease-in-out infinite;
    }
    @keyframes floatA { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-12px) rotate(1deg)} }
    @keyframes floatB { 0%,100%{transform:translateY(0) rotate(1deg)} 50%{transform:translateY(-10px) rotate(-1deg)} }
    @keyframes floatC { 0%,100%{transform:translateY(0) rotate(.5deg)} 50%{transform:translateY(-14px) rotate(-.5deg)} }

    /* Live badge */
    .fc-live-badge {
      display:flex; align-items:center; gap:6px;
      font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
      color:var(--accent);
    }
    .live-blink { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:dotBlink 1s infinite; }

    /* Glow ring behind arena */
    .arena-glow {
      position:absolute; inset:-15%;
      border-radius:50%;
      background:radial-gradient(circle, rgba(57,255,20,.08) 0%, transparent 65%);
      filter:blur(30px);
      animation:blobPulse 6s ease-in-out infinite alternate;
      z-index:1;
    }

    /* ── SCROLL INDICATOR ── */
    .scroll-indicator {
      position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
      display:flex; flex-direction:column; align-items:center; gap:8px;
      z-index:5;
      opacity:0;
      animation: fadeUp .6s 1.6s var(--ease-out) both;
    }
    .scroll-mouse {
      width:24px; height:38px; border-radius:12px;
      border:2px solid rgba(57,255,20,.4);
      display:flex; justify-content:center; align-items:flex-start;
      padding-top:6px;
      box-shadow:0 0 14px rgba(57,255,20,.15);
    }
    .scroll-wheel {
      width:4px; height:8px; border-radius:99px;
      background:var(--accent);
      box-shadow:0 0 6px var(--accent-glow);
      animation:scrollWheel 2s ease-in-out infinite;
    }
    @keyframes scrollWheel {
      0%  {transform:translateY(0); opacity:1}
      80% {transform:translateY(14px); opacity:0}
      81% {transform:translateY(0); opacity:0}
      100%{transform:translateY(0); opacity:1}
    }
    .scroll-text { font-size:9px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--text-muted); }

    /* ── RESPONSIVE ── */
    @media(max-width:1024px) {
      .hero-inner { grid-template-columns:1fr; padding:60px 28px 100px; gap:56px; }
      .hero-visual { max-width:480px; margin:0 auto; }
      .hero-content { align-items:center; text-align:center; }
      .hero-desc { text-align:center; }
      .hero-cta { justify-content:center; }
      .hero-sports { justify-content:center; }
      .fc-cricket  { top:2%; left:0; }
      .fc-football { bottom:4%; left:0; }
      .fc-elite    { top:2%; right:0; }
      .fc-live     { bottom:4%; right:0; }
    }
    @media(max-width:640px) {
      .hero-inner { padding:40px 16px 100px; gap:40px; }
      .hero-stats { grid-template-columns:repeat(2,1fr); }
      .float-card { padding:10px 14px; min-width:120px; }
      .float-card-title { font-size:14px; }
      .fc-cricket  { top:-2%; left:-2%; }
      .fc-football { display:none; }
      .fc-elite    { top:-2%; right:-2%; }
      .fc-live     { bottom:0; right:-2%; }
      .arena-wrap { max-width:340px; }
    }
    @media(max-width:380px) {
      .hero-stats { grid-template-columns:repeat(2,1fr); gap:10px; }
      .stat-card { padding:14px 12px; }
    }