/* ============================================================
       CSS VARIABLES
    ============================================================ */
    :root {
      --bg-primary:     #0B0F19;
      --bg-secondary:   #111827;
      --accent:         #39FF14;
      --accent-dim:     rgba(57,255,20,0.10);
      --accent-glow:    rgba(57,255,20,0.50);
      --accent-glow-lg: rgba(57,255,20,0.18);
      --text:           #FFFFFF;
      --text-muted:     #9CA3AF;
      --glass-bg:       rgba(255,255,255,0.04);
      --glass-border:   rgba(255,255,255,0.08);
      --glass-border-a: rgba(57,255,20,0.20);
      --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;
    }

    /* ============================================================
       SPORTS SECTION — WRAPPER
    ============================================================ */
    .sports {
      position:relative;
      padding:130px 0 150px;
      overflow:hidden;
      background:var(--bg-primary);
    }

    /* Top blend from above section */
    .sports::before {
      content:'';
      position:absolute; top:0; left:0; right:0; height:180px;
      background:linear-gradient(to bottom, rgba(11,15,25,0) 0%, var(--bg-primary) 100%);
      z-index:1; pointer-events:none;
    }

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

    .s-glow-tl {
      position:absolute; z-index:0;
      top:-5%; left:-5%;
      width:55vw; height:55vw; max-width:640px; max-height:640px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(57,255,20,0.07) 0%, transparent 70%);
      filter:blur(80px);
      animation:gDrift1 14s ease-in-out infinite alternate;
    }
    .s-glow-br {
      position:absolute; z-index:0;
      bottom:-5%; right:-5%;
      width:48vw; height:48vw; max-width:580px; max-height:580px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(57,255,20,0.055) 0%, transparent 70%);
      filter:blur(90px);
      animation:gDrift2 16s ease-in-out infinite alternate-reverse;
    }
    @keyframes gDrift1 { from{transform:translate(0,0) scale(1)} to{transform:translate(4%,6%) scale(1.1)} }
    @keyframes gDrift2 { from{transform:translate(0,0) scale(1)} to{transform:translate(-4%,-5%) scale(1.12)} }

    /* Center vertical connector line */
    .s-connector {
      position:absolute; top:0; left:50%; transform:translateX(-50%);
      width:1px; height:130px;
      background:linear-gradient(to bottom, transparent, var(--accent), transparent);
      opacity:.3; z-index:2;
    }

    /* Bottom connector */
    .s-bottom-line {
      position:absolute; bottom:0; left:50%; transform:translateX(-50%);
      width:80%; max-width:900px; height:1px;
      background:linear-gradient(90deg, transparent, rgba(57,255,20,.2), transparent);
      z-index:3;
    }

    /* ── Floating particles ── */
    .s-particles { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
    .s-particle {
      position:absolute;
      width:var(--sz,2px); height:var(--sz,2px);
      border-radius:50%; background:var(--accent); opacity:0;
      animation:pRise var(--dur,10s) var(--dl,0s) linear infinite;
    }
    @keyframes pRise {
      0%   {transform:translateY(100vh) translateX(0); opacity:0;}
      10%  {opacity:.5;}
      90%  {opacity:.2;}
      100% {transform:translateY(-10vh) translateX(var(--dx,15px)); opacity:0;}
    }

    /* ============================================================
       SECTION HEADER
    ============================================================ */
    .sports-inner {
      position:relative; z-index:3;
      max-width:1320px; margin:0 auto;
      padding:0 28px;
    }

    .section-header {
      text-align:center;
      margin-bottom:72px;
      opacity:0; transform:translateY(30px);
      transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
    }
    .section-header.revealed { opacity:1; transform:translateY(0); }

    .section-label {
      display:inline-flex; align-items:center; gap:12px;
      font-size:11px; font-weight:600; letter-spacing:3.5px; text-transform:uppercase;
      color:var(--accent); margin-bottom:20px;
    }
    .section-label-line {
      width:28px; height:2px; background:var(--accent);
      border-radius:99px; box-shadow:0 0 8px var(--accent-glow);
    }

    .section-heading {
      font-family:'Bebas Neue',cursive;
      font-size:clamp(44px,5.5vw,82px);
      line-height:.95; letter-spacing:2px;
      margin-bottom:20px;
    }
    .sh-white  { color:var(--text); display:block; }
    .sh-accent {
      display:block;
      background:linear-gradient(90deg,var(--accent),#b4ff8c 55%,var(--accent));
      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} }

    .section-desc {
      font-size:15px; font-weight:400; line-height:1.75;
      color:var(--text-muted); max-width:580px; margin:0 auto;
    }

    /* Filter tabs */
    .filter-tabs {
      display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
      gap:10px; margin-top:36px;
    }
    .ftab {
      padding:8px 22px; border-radius:99px; cursor:pointer;
      font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
      background:var(--glass-bg); border:1px solid var(--glass-border);
      color:var(--text-muted);
      transition:background .25s, border-color .25s, color .25s, box-shadow .25s,
                 transform .2s var(--ease-spring);
    }
    .ftab:hover { color:var(--text); border-color:rgba(255,255,255,.2); transform:translateY(-2px); }
    .ftab.active {
      background:var(--accent-dim); border-color:rgba(57,255,20,.4);
      color:var(--accent); box-shadow:0 0 16px rgba(57,255,20,.15);
    }

    /* ============================================================
       SPORTS GRID
    ============================================================ */
    .sports-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:24px;
    }

    /* ============================================================
       SPORT CARD
    ============================================================ */
    .sport-card {
      position:relative; border-radius:20px; overflow:hidden;
      background:var(--bg-secondary);
      border:1px solid var(--glass-border);
      cursor:pointer;
      transition:transform .4s var(--ease-spring),
                 box-shadow .4s var(--ease),
                 border-color .4s var(--ease);
      /* scroll reveal */
      opacity:0; transform:translateY(40px) scale(.97);
      will-change:transform,opacity;
    }
    .sport-card.revealed {
      opacity:1; transform:translateY(0) scale(1);
    }

    /* Stagger delays injected by JS */

    /* Hover lift */
    .sport-card:hover {
      transform:translateY(-10px) scale(1.015) !important;
      border-color:var(--glass-border-a);
      box-shadow:
        0 0 40px rgba(57,255,20,.12),
        0 24px 60px rgba(0,0,0,.6),
        inset 0 1px 0 rgba(255,255,255,.06);
    }

    /* Animated neon border glow on hover */
    .sport-card::before {
      content:'';
      position:absolute; inset:-1px; border-radius:21px;
      background:linear-gradient(135deg,
        transparent 30%,
        rgba(57,255,20,.35) 50%,
        transparent 70%);
      background-size:200% 200%;
      opacity:0;
      transition:opacity .4s var(--ease);
      z-index:0;
      pointer-events:none;
    }
    .sport-card:hover::before {
      opacity:1;
      animation:borderShine 2s linear infinite;
    }
    @keyframes borderShine {
      0%  {background-position:200% 0}
      100%{background-position:-200% 0}
    }

    /* ── Image Area ── */
    .card-image {
      position:relative; width:100%; height:200px; overflow:hidden;
      background:linear-gradient(145deg, rgba(57,255,20,0.06) 0%, rgba(11,15,25,0.9) 100%);
    }

    /* SVG composition fills image area */
    .card-img-inner {
      width:100%; height:100%;
      display:flex; align-items:center; justify-content:center;
      position:relative; overflow:hidden;
      transition:transform .5s var(--ease);
    }
    .sport-card:hover .card-img-inner { transform:scale(1.06); }

    /* Grid lines inside image */
    .card-img-inner::before {
      content:''; position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(57,255,20,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,0.04) 1px, transparent 1px);
      background-size:24px 24px;
    }

    /* Radial spotlight */
    .card-img-inner::after {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse 70% 60% at 50% 50%,
        var(--card-glow,rgba(57,255,20,0.12)) 0%, transparent 70%);
      transition:opacity .4s;
    }
    .sport-card:hover .card-img-inner::after { opacity:1.5; }

    /* Big sport emoji icon */
    .card-sport-icon {
      font-size:72px; line-height:1;
      position:relative; z-index:1;
      filter:drop-shadow(0 0 18px var(--card-glow,rgba(57,255,20,.4)));
      transition:transform .4s var(--ease-spring), filter .4s;
      animation:iconFloat 5s ease-in-out infinite;
    }
    @keyframes iconFloat {
      0%,100%{transform:translateY(0)}
      50%    {transform:translateY(-8px)}
    }
    .sport-card:hover .card-sport-icon {
      transform:translateY(-6px) scale(1.15) rotate(-5deg);
      filter:drop-shadow(0 0 30px var(--card-glow,rgba(57,255,20,.7)));
    }

    /* Training level badge — top right */
    .card-level {
      position:absolute; top:14px; right:14px; z-index:2;
      padding:5px 12px; border-radius:99px;
      background:rgba(17,24,39,.85); backdrop-filter:blur(8px);
      border:1px solid rgba(57,255,20,.25);
      font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
      color:var(--accent);
    }

    /* Bottom gradient overlay on image */
    .card-img-overlay {
      position:absolute; bottom:0; left:0; right:0; height:60px;
      background:linear-gradient(to bottom, transparent, var(--bg-secondary));
      z-index:1; pointer-events:none;
    }

    /* ── Card Body ── */
    .card-body {
      position:relative; z-index:2;
      padding:20px 22px 22px;
      display:flex; flex-direction:column; gap:12px;
    }

    .card-meta-row {
      display:flex; align-items:center; gap:6px;
    }
    .card-dot {
      width:6px; height:6px; border-radius:50%;
      background:var(--accent); box-shadow:0 0 8px var(--accent-glow);
      animation:blinkDot 2s ease-in-out infinite;
    }
    @keyframes blinkDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
    .card-program-tag {
      font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
      color:var(--accent); opacity:.8;
    }

    .card-title {
      font-family:'Bebas Neue',cursive;
      font-size:30px; letter-spacing:3px; color:var(--text); line-height:1;
      transition:color .25s;
    }
    .sport-card:hover .card-title { color:var(--accent); }

    .card-desc {
      font-size:13px; font-weight:400; line-height:1.7; color:var(--text-muted);
    }

    /* Info chips row */
    .card-info {
      display:flex; flex-wrap:wrap; gap:8px;
    }
    .chip {
      display:flex; align-items:center; gap:5px;
      padding:5px 10px; border-radius:8px;
      background:var(--glass-bg); border:1px solid var(--glass-border);
      font-size:10px; font-weight:500; letter-spacing:.5px;
      color:var(--text-muted);
      transition:border-color .25s, color .25s;
    }
    .chip-icon { font-size:11px; }
    .sport-card:hover .chip { border-color:rgba(57,255,20,.2); color:var(--text); }

    /* Divider */
    .card-sep {
      height:1px;
      background:linear-gradient(90deg, rgba(57,255,20,.15), transparent);
    }

    /* CTA button */
    .card-btn {
      display:inline-flex; align-items:center; gap:8px;
      padding:11px 20px; border-radius:9px;
      background:transparent;
      border:1px solid rgba(57,255,20,.28);
      color:var(--accent);
      font-family:'Poppins',sans-serif; font-size:12px;
      font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
      text-decoration:none; cursor:pointer; overflow:hidden; width:fit-content;
      position:relative;
      transition:border-color .3s, color .3s, transform .2s var(--ease-spring),
                 box-shadow .3s;
    }
    .card-btn::before {
      content:''; position:absolute; inset:0; border-radius:9px;
      background:var(--accent-dim); opacity:0;
      transition:opacity .3s;
    }
    .card-btn:hover {
      border-color:rgba(57,255,20,.6);
      color:#fff;
      box-shadow:0 0 20px rgba(57,255,20,.2);
      transform:translateX(4px);
    }
    .card-btn:hover::before { opacity:1; }
    .card-btn-arrow { transition:transform .25s var(--ease-spring); }
    .card-btn:hover .card-btn-arrow { transform:translateX(5px); }

    /* ── Featured card (first one — larger) ── */
    .sport-card.featured { grid-column:span 1; }

    /* ============================================================
       BOTTOM CTA STRIP
    ============================================================ */
    .sports-cta-strip {
      margin-top:60px;
      padding:36px 40px;
      border-radius:20px;
      background:linear-gradient(135deg, rgba(57,255,20,.06) 0%, rgba(17,24,39,.7) 100%);
      border:1px solid var(--glass-border-a);
      backdrop-filter:blur(12px);
      display:flex; align-items:center; justify-content:space-between; gap:24px;
      flex-wrap:wrap;
      opacity:0; transform:translateY(24px);
      transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
    }
    .sports-cta-strip.revealed { opacity:1; transform:translateY(0); }

    .strip-text h3 {
      font-family:'Bebas Neue',cursive; font-size:32px; letter-spacing:2px; color:var(--text);
    }
    .strip-text p { font-size:13px; color:var(--text-muted); margin-top:4px; }

    .strip-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

    .btn-primary {
      position:relative; display:inline-flex; align-items:center; gap:10px;
      padding:13px 30px; border-radius:10px;
      background:var(--accent); color:var(--bg-primary);
      font-family:'Poppins',sans-serif; font-size:13px; 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,.38), 0 4px 20px rgba(0,0,0,.4);
    }
    @property --angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
    @keyframes rotateBorder { to{--angle:360deg} }
    .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; }
    .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-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-outline {
      display:inline-flex; align-items:center; gap:8px;
      padding:12px 24px; border-radius:10px;
      background:transparent; border:1px solid rgba(255,255,255,.15);
      color:var(--text-muted);
      font-family:'Poppins',sans-serif; font-size:13px; font-weight:600;
      letter-spacing:1px; text-transform:uppercase; text-decoration:none; cursor:pointer;
      transition:border-color .3s, color .3s, transform .2s var(--ease-spring);
    }
    .btn-outline:hover { border-color:rgba(57,255,20,.4); color:var(--accent); transform:translateY(-2px); }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media(max-width:1100px) {
      .sports-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media(max-width:700px) {
      .sports { padding:80px 0 100px; }
      .sports-inner { padding:0 16px; }
      .sports-grid { grid-template-columns:1fr; }
      .section-heading { font-size:clamp(38px,10vw,60px); }
      .sports-cta-strip { padding:24px 20px; }
      .strip-text h3 { font-size:26px; }
      .strip-actions { width:100%; justify-content:stretch; }
      .btn-primary, .btn-outline { width:100%; justify-content:center; }
    }