/* ============================================================
       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);
      --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.18);
      --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;
    }

    /* ============================================================
       SECTION WRAPPER
    ============================================================ */
    .about {
      position:relative;
      overflow:hidden;
      padding:120px 0 140px;
      background:var(--bg-primary);
    }

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

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

    .about-glow-l {
      position:absolute; z-index:0;
      top:20%; left:-15%;
      width:50vw; height:50vw; max-width:600px; max-height:600px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(57,255,20,0.07) 0%, transparent 70%);
      filter:blur(70px);
      animation:blobDrift 12s ease-in-out infinite alternate;
    }
    .about-glow-r {
      position:absolute; z-index:0;
      bottom:10%; right:-10%;
      width:40vw; height:40vw; max-width:520px; max-height:520px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(57,255,20,0.05) 0%, transparent 70%);
      filter:blur(80px);
      animation:blobDrift 14s 3s ease-in-out infinite alternate-reverse;
    }
    @keyframes blobDrift {
      from{transform:translate(0,0) scale(1)}
      to  {transform:translate(3%,5%) scale(1.12)}
    }

    /* Top accent line */
    .about-line {
      position:absolute; top:0; left:50%; transform:translateX(-50%);
      width:1px; height:120px;
      background:linear-gradient(to bottom, transparent, var(--accent), transparent);
      opacity:.35; z-index:2;
    }

    /* ============================================================
       INNER LAYOUT
    ============================================================ */
    .about-inner {
      position:relative; z-index:3;
      max-width:1320px; margin:0 auto;
      padding:0 28px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:80px;
      align-items:center;
    }

    /* ============================================================
       LEFT — Visual Composition
    ============================================================ */
    .about-visual {
      position:relative;
      /* scroll reveal */
      opacity:0; transform:translateX(-40px);
      transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
    }
    .about-visual.revealed { opacity:1; transform:translateX(0); }

    /* Main image board */
    .img-board {
      position:relative;
      width:100%; aspect-ratio:4/4.8;
      border-radius:24px;
      overflow:hidden;
      background:linear-gradient(145deg, var(--bg-secondary) 0%, #0d1120 100%);
      border:1px solid var(--glass-border-a);
      box-shadow:0 0 60px rgba(57,255,20,.07), 0 40px 80px rgba(0,0,0,.6);
    }

    /* SVG sports composition inside */
    .img-board-inner {
      width:100%; height:100%;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center; gap:20px;
      position:relative;
      overflow:hidden;
    }

    /* Radial spotlight */
    .img-board-inner::before {
      content:'';
      position:absolute; inset:0;
      background:
        radial-gradient(ellipse 60% 55% at 50% 45%, rgba(57,255,20,.07) 0%, transparent 65%),
        linear-gradient(rgba(57,255,20,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.02) 1px, transparent 1px);
      background-size:auto, 28px 28px, 28px 28px;
    }

    /* Central hexagon emblem */
    .hex-emblem {
      position:relative; z-index:1;
      width:140px; height:140px;
      display:flex; align-items:center; justify-content:center;
      animation:hexPulse 4s ease-in-out infinite;
    }
    .hex-emblem-img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 18px rgba(57,255,20,.5)); display:block; }
    @keyframes hexPulse {
      0%,100%{filter:drop-shadow(0 0 18px rgba(57,255,20,.4))}
      50%    {filter:drop-shadow(0 0 36px rgba(57,255,20,.75))}
    }

    .img-board-title {
      position:relative; z-index:1; text-align:center;
    }
    .img-board-title h3 {
      font-family:'Bebas Neue',cursive; font-size:32px; letter-spacing:4px; color:var(--text);
    }
    .img-board-title p {
      font-size:10px; font-weight:500; letter-spacing:4px; text-transform:uppercase; color:var(--accent);
    }

    /* Year badge + line row */
    .img-board-meta {
      position:relative; z-index:1;
      display:flex; align-items:center; gap:12px;
    }
    .meta-pill {
      padding:6px 16px; border-radius:99px;
      background:var(--accent-dim); border:1px solid rgba(57,255,20,.25);
      font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
      color:var(--accent);
    }
    .meta-sep { width:30px; height:1px; background:rgba(57,255,20,.3); }
    .meta-tag {
      font-size:10px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
      color:var(--text-muted);
    }

    /* Sport row orbs */
    .img-board-orbs {
      position:relative; z-index:1;
      display:flex; gap:10px; align-items:center;
    }
    .b-orb {
      width:40px; height:40px; border-radius:50%;
      background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
      display:flex; align-items:center; justify-content:center; font-size:20px;
      transition:border-color .25s, box-shadow .25s, transform .3s var(--ease-spring);
      cursor:default;
    }
    .b-orb:hover { border-color:var(--accent); box-shadow:0 0 16px rgba(57,255,20,.45); transform:scale(1.2) translateY(-4px); }

    /* Spinning ring around board */
    .board-ring {
      position:absolute; inset:-16px;
      border-radius:28px;
      border:1px solid rgba(57,255,20,.06);
      pointer-events:none;
    }
    .board-ring-dot {
      position:absolute; top:-3px; left:50%;
      width:6px; height:6px; border-radius:50%;
      background:var(--accent); box-shadow:0 0 12px var(--accent-glow);
      transform:translateX(-50%);
      animation:ringDotOrbit 10s linear infinite;
    }
    @keyframes ringDotOrbit {
      0%  {offset-path:none; top:-3px; left:50%; transform:translateX(-50%)}
      /* use JS for full orbit — pure CSS approx */
    }

    /* ── Floating Badges ── */
    .badge-float {
      position:absolute; z-index:4;
      background:rgba(17,24,39,0.82);
      backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
      border:1px solid rgba(57,255,20,.22);
      border-radius:14px; padding:14px 18px;
      box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 18px rgba(57,255,20,.06);
      min-width:150px;
    }
    .badge-float-dot {
      width:7px; height:7px; border-radius:50%;
      background:var(--accent); box-shadow:0 0 10px var(--accent-glow);
      margin-bottom:6px;
      animation:blinkDot 2s ease-in-out infinite;
    }
    @keyframes blinkDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
    .badge-float-title { font-family:'Bebas Neue',cursive; font-size:15px; letter-spacing:2px; color:var(--text); line-height:1; }
    .badge-float-sub   { font-size:10px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-top:2px; }

    /* Badge positions + individual float keyframes */
    .bf-elite    { top:6%; right:-6%; animation:floatA 6s ease-in-out infinite; }
    .bf-cert     { bottom:20%; left:-8%; animation:floatB 7s 1s ease-in-out infinite; }
    .bf-facility { bottom:4%; right:-4%; animation:floatC 5.5s .5s ease-in-out infinite; }

    @keyframes floatA { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-14px) 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(-12px) rotate(-.5deg)} }

    /* ── Mini stat strip below image ── */
    .visual-stat-strip {
      display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
      margin-top:20px;
    }
    .vstat {
      padding:14px; border-radius:12px;
      background:var(--glass-bg);
      border:1px solid var(--glass-border);
      text-align:center;
      transition:border-color .3s, box-shadow .3s, transform .3s var(--ease-spring);
      cursor:default;
    }
    .vstat:hover {
      border-color:rgba(57,255,20,.35);
      box-shadow:0 0 20px rgba(57,255,20,.1);
      transform:translateY(-4px);
    }
    .vstat-num  { font-family:'Bebas Neue',cursive; font-size:26px; letter-spacing:1px; color:var(--accent); text-shadow:0 0 18px var(--accent-glow); line-height:1; }
    .vstat-label{ font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-top:3px; }

    /* ============================================================
       RIGHT — Content
    ============================================================ */
    .about-content {
      display:flex; flex-direction:column; gap:32px;
      opacity:0; transform:translateX(40px);
      transition:opacity .8s .2s var(--ease-out), transform .8s .2s var(--ease-out);
    }
    .about-content.revealed { opacity:1; transform:translateX(0); }

    /* Label */
    .about-label {
      display:inline-flex; align-items:center; gap:10px;
      font-size:11px; font-weight:600; letter-spacing:3px; text-transform:uppercase;
      color:var(--accent);
    }
    .about-label-line { width:32px; height:2px; background:var(--accent); border-radius:99px; box-shadow:0 0 8px var(--accent-glow); }

    /* Heading */
    .about-heading {
      display:flex; flex-direction:column; gap:0;
    }
    .ah-main {
      font-family:'Bebas Neue',cursive;
      font-size:clamp(44px,4.8vw,72px);
      line-height:.94; letter-spacing:2px; color:var(--text);
    }
    .ah-accent {
      font-family:'Bebas Neue',cursive;
      font-size:clamp(44px,4.8vw,72px);
      line-height:.94; letter-spacing:2px;
      background:linear-gradient(90deg,var(--accent),#b4ff8c 60%,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} }

    /* Description */
    .about-desc { display:flex; flex-direction:column; gap:16px; }
    .about-desc p {
      font-size:15px; font-weight:400; line-height:1.78; color:var(--text-muted);
    }
    .about-desc p strong { color:var(--text); font-weight:600; }

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

    /* ── Feature list ── */
    .features { display:flex; flex-direction:column; gap:12px; }
    .feature-item {
      display:flex; align-items:flex-start; gap:16px;
      padding:16px 20px; border-radius:12px;
      background:var(--glass-bg);
      border:1px solid var(--glass-border);
      cursor:default;
      transition:border-color .3s var(--ease), background .3s var(--ease),
                 transform .3s var(--ease-spring), box-shadow .3s var(--ease);
      position:relative; overflow:hidden;
    }
    .feature-item::before {
      content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
      background:var(--accent); border-radius:0 99px 99px 0;
      transform:scaleY(0); transform-origin:center;
      transition:transform .3s var(--ease-spring);
    }
    .feature-item:hover {
      border-color:var(--glass-border-a);
      background:rgba(57,255,20,0.04);
      transform:translateX(6px);
      box-shadow:0 0 20px rgba(57,255,20,.07);
    }
    .feature-item:hover::before { transform:scaleY(1); }

    .feature-icon {
      width:40px; height:40px; flex-shrink:0; border-radius:10px;
      background:var(--accent-dim); border:1px solid rgba(57,255,20,.2);
      display:flex; align-items:center; justify-content:center;
      font-size:18px; transition:box-shadow .3s, transform .3s var(--ease-spring);
    }
    .feature-item:hover .feature-icon {
      box-shadow:0 0 18px rgba(57,255,20,.4);
      transform:scale(1.1) rotate(-4deg);
    }
    .feature-text { flex:1; }
    .feature-title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:2px; }
    .feature-sub   { font-size:12px; font-weight:400; color:var(--text-muted); line-height:1.5; }

    /* ── Stats row ── */
    .about-stats {
      display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
    }
    .a-stat {
      padding:18px 12px; border-radius:14px;
      background:var(--glass-bg);
      border:1px solid var(--glass-border);
      text-align:center; position:relative; overflow:hidden;
      transition:border-color .3s, box-shadow .3s, transform .3s var(--ease-spring);
      cursor:default;
    }
    .a-stat::after {
      content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
      width:0; height:2px;
      background:var(--accent); border-radius:99px;
      box-shadow:0 0 8px var(--accent-glow);
      transition:width .35s var(--ease-spring);
    }
    .a-stat:hover {
      border-color:rgba(57,255,20,.38); box-shadow:0 0 22px rgba(57,255,20,.12);
      transform:translateY(-5px);
    }
    .a-stat:hover::after { width:60%; }
    .a-stat-num   { font-family:'Bebas Neue',cursive; font-size:clamp(28px,2.5vw,36px); letter-spacing:1px; color:var(--accent); text-shadow:0 0 20px var(--accent-glow); line-height:1; }
    .a-stat-label { font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-top:4px; }

    /* ── CTA ── */
    .about-cta { display:flex; align-items:center; gap:20px; }

    .btn-explore {
      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,.38), 0 4px 20px rgba(0,0,0,.4);
    }
    @property --angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
    @keyframes rotateBorder { to{--angle:360deg} }
    .btn-explore::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-explore::after { content:''; position:absolute; inset:0; background:var(--accent); border-radius:10px; z-index:-1; }
    .btn-explore: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-explore:hover::before { opacity:1; }
    .btn-explore:active { transform:scale(.97); }
    .btn-e-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-explore:hover .btn-e-shine { left:150%; }
    .btn-e-arrow { display:inline-flex; transition:transform .25s var(--ease-spring); }
    .btn-explore:hover .btn-e-arrow { transform:translateX(5px); }

    .cta-note {
      font-size:12px; font-weight:400; color:var(--text-muted); line-height:1.5;
    }
    .cta-note span { color:var(--accent); font-weight:600; }

    /* ============================================================
       SECTION BOTTOM DIVIDER
    ============================================================ */
    .about-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;
    }

    /* ============================================================
       SCROLL REVEAL UTILITY
    ============================================================ */
    .sr { opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
    .sr.revealed { opacity:1; transform:translateY(0); }
    .sr-d1 { transition-delay:.1s; }
    .sr-d2 { transition-delay:.2s; }
    .sr-d3 { transition-delay:.3s; }
    .sr-d4 { transition-delay:.4s; }
    .sr-d5 { transition-delay:.5s; }
    .sr-d6 { transition-delay:.6s; }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media(max-width:1024px) {
      .about-inner { grid-template-columns:1fr; gap:60px; padding:0 28px; }
      .about-visual, .about-content { opacity:1; transform:none; }
      .about-content { align-items:center; text-align:center; }
      .about-label  { justify-content:center; }
      .about-cta    { justify-content:center; flex-wrap:wrap; }
      .about-desc p { text-align:center; }
      .about-visual { max-width:520px; margin:0 auto; width:100%; }
      .bf-cert  { left:-4%; }
      .bf-elite { right:-4%; }
    }
    @media(max-width:640px) {
      .about { padding:80px 0 100px; }
      .about-stats  { grid-template-columns:repeat(2,1fr); }
      .visual-stat-strip { grid-template-columns:repeat(3,1fr); }
      .feature-item { padding:12px 14px; }
      .bf-cert { display:none; }
    }
    @media(max-width:400px) {
      .about-stats { gap:10px; }
      .a-stat { padding:14px 8px; }
    }