/* ============================================================
       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.22);
      --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
    ============================================================ */
    .testimonials {
      position:relative;
      padding:130px 0 150px;
      overflow:hidden;
      background:var(--bg-primary);
    }

    /* ── Background ── */
    .t-grid {
      position:absolute; inset:0; z-index:0;
      background-image:
        linear-gradient(rgba(57,255,20,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.026) 1px, transparent 1px);
      background-size:60px 60px;
      mask-image:radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 100%);
    }
    .t-glow-l {
      position:absolute; z-index:0; top:15%; left:-12%;
      width:52vw; height:52vw; max-width:640px; max-height:640px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(57,255,20,.065) 0%,transparent 70%);
      filter:blur(80px);
      animation:tDrift 14s ease-in-out infinite alternate;
    }
    .t-glow-r {
      position:absolute; z-index:0; bottom:10%; right:-10%;
      width:44vw; height:44vw; max-width:560px; max-height:560px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(57,255,20,.05) 0%,transparent 70%);
      filter:blur(90px);
      animation:tDrift 16s 3s ease-in-out infinite alternate-reverse;
    }
    @keyframes tDrift {
      from{transform:translate(0,0) scale(1)}
      to  {transform:translate(4%,6%) scale(1.1)}
    }
    .t-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;
    }
    .t-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;
    }
    /* Particles */
    .t-particles { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
    .t-particle {
      position:absolute;
      width:var(--sz,2px); height:var(--sz,2px);
      border-radius:50%; background:var(--accent); opacity:0;
      animation:tpFloat var(--dur,10s) var(--dl,0s) linear infinite;
    }
    @keyframes tpFloat {
      0%  {transform:translateY(100vh) translateX(0);opacity:0}
      10% {opacity:.4}
      90% {opacity:.15}
      100%{transform:translateY(-10vh) translateX(var(--dx,20px));opacity:0}
    }

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

    /* ============================================================
       SECTION HEADER
    ============================================================ */
    .t-header {
      text-align:center; margin-bottom:70px;
      opacity:0; transform:translateY(30px);
      transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
    }
    .t-header.revealed { opacity:1; transform:translateY(0); }

    .t-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;
    }
    .t-label-line {
      width:28px; height:2px; background:var(--accent);
      border-radius:99px; box-shadow:0 0 8px var(--accent-glow);
    }
    .t-heading {
      font-family:'Bebas Neue',cursive;
      font-size:clamp(44px,5.5vw,80px);
      line-height:.95; letter-spacing:2px; margin-bottom:20px;
    }
    .th-white  { color:var(--text); display:block; }
    .th-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} }
    .t-desc {
      font-size:15px; font-weight:400; line-height:1.75; color:var(--text-muted);
      max-width:560px; margin:0 auto 28px;
    }

    /* Trust pill */
    .t-trust-pill {
      display:inline-flex; align-items:center; gap:10px;
      padding:8px 20px; border-radius:99px;
      background:var(--accent-dim); border:1px solid rgba(57,255,20,.28);
      font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
      color:var(--accent);
    }
    .trust-dot {
      width:6px; height:6px; border-radius:50%;
      background:var(--accent); box-shadow:0 0 8px var(--accent-glow);
      animation:blink 1.8s ease-in-out infinite;
    }
    @keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}

    /* ============================================================
       STATS STRIP
    ============================================================ */
    .t-stats-strip {
      display:flex; align-items:center; justify-content:center;
      gap:0; margin-bottom:60px;
      opacity:0; transform:translateY(20px);
      transition:opacity .7s .15s var(--ease-out),transform .7s .15s var(--ease-out);
    }
    .t-stats-strip.revealed { opacity:1; transform:translateY(0); }
    .ts-item {
      padding:20px 40px; text-align:center;
      border-right:1px solid var(--glass-border);
    }
    .ts-item:last-child { border-right:none; }
    .ts-num {
      font-family:'Bebas Neue',cursive; font-size:40px; letter-spacing:1px;
      color:var(--accent); text-shadow:0 0 20px var(--accent-glow); line-height:1;
    }
    .ts-lbl {
      font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
      color:var(--text-muted); margin-top:4px;
    }

    /* ============================================================
       SLIDER WRAPPER
    ============================================================ */
    .slider-wrap {
      position:relative;
      opacity:0; transform:translateY(30px);
      transition:opacity .8s .1s var(--ease-out),transform .8s .1s var(--ease-out);
    }
    .slider-wrap.revealed { opacity:1; transform:translateY(0); }

    /* Overflow mask — fade edges */
    .slider-overflow {
      overflow:hidden;
      position:relative;
    }
    .slider-overflow::before,
    .slider-overflow::after {
      content:''; position:absolute; top:0; bottom:0; z-index:5; width:80px; pointer-events:none;
    }
    .slider-overflow::before { left:0; background:linear-gradient(to right,var(--bg-primary),transparent); }
    .slider-overflow::after  { right:0; background:linear-gradient(to left,var(--bg-primary),transparent); }

    /* Track */
    .slider-track {
      display:flex;
      gap:24px;
      transition:transform .55s var(--ease);
      will-change:transform;
      align-items:stretch;
    }

    /* ============================================================
       TESTIMONIAL CARD
    ============================================================ */
    .t-card {
      flex-shrink:0;
      width:380px;
      border-radius:22px; overflow:hidden;
      background:var(--bg-secondary);
      border:1px solid var(--glass-border);
      display:flex; flex-direction:column;
      position:relative;
      cursor:grab;
      transition:transform .4s var(--ease-spring),
                 box-shadow .4s var(--ease),
                 border-color .4s var(--ease);
    }
    .t-card:active { cursor:grabbing; }

    /* Featured card */
    .t-card.featured {
      width:420px;
      border-color:rgba(57,255,20,.24);
      box-shadow:0 0 40px rgba(57,255,20,.1), 0 20px 50px rgba(0,0,0,.5);
    }

    /* Hover lift */
    .t-card:hover {
      transform:translateY(-10px) scale(1.015);
      border-color:rgba(57,255,20,.35);
      box-shadow:0 0 40px rgba(57,255,20,.14),0 28px 60px rgba(0,0,0,.6),
                 inset 0 1px 0 rgba(255,255,255,.05);
    }

    /* Animated border shimmer */
    .t-card::before {
      content:''; position:absolute; inset:-1px; border-radius:23px;
      background:linear-gradient(135deg,transparent 20%,rgba(57,255,20,.28) 50%,transparent 80%);
      background-size:200% 200%;
      opacity:0; z-index:0; transition:opacity .4s; pointer-events:none;
    }
    .t-card:hover::before { opacity:1; animation:cardShine 2s linear infinite; }
    @keyframes cardShine { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

    /* Featured ribbon */
    .featured-ribbon {
      position:absolute; top:16px; left:50%; transform:translateX(-50%);
      z-index:10; padding:5px 16px; border-radius:99px;
      background:linear-gradient(90deg,rgba(57,255,20,.15),rgba(57,255,20,.08));
      border:1px solid rgba(57,255,20,.4);
      font-size:9px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
      color:var(--accent); white-space:nowrap;
      animation:ribbonPulse 3s ease-in-out infinite; pointer-events:none;
    }
    @keyframes ribbonPulse{0%,100%{box-shadow:0 0 8px rgba(57,255,20,.2)}50%{box-shadow:0 0 22px rgba(57,255,20,.5)}}

    /* ── Card Top — avatar area ── */
    .card-top {
      position:relative;
      padding:32px 28px 20px;
      background:linear-gradient(145deg,rgba(17,24,39,.9),rgba(11,15,25,.95));
      overflow:hidden;
    }
    /* Grid texture */
    .card-top::before {
      content:''; position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(57,255,20,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(57,255,20,.035) 1px,transparent 1px);
      background-size:22px 22px;
    }
    /* Radial glow behind avatar */
    .card-top::after {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse 60% 70% at 50% 100%,
        var(--avatar-glow,rgba(57,255,20,.10)) 0%,transparent 65%);
      transition:opacity .4s;
    }
    .t-card:hover .card-top::after { opacity:1.5; }

    /* Avatar */
    .avatar-wrap {
      position:relative; z-index:2; width:72px; height:72px; margin:0 auto;
    }
    .avatar {
      width:72px; height:72px; border-radius:50%; overflow:hidden;
      background:linear-gradient(135deg,var(--avatar-bg1,#1a2540),var(--avatar-bg2,#0d1320));
      border:2px solid var(--avatar-glow,rgba(57,255,20,.3));
      box-shadow:0 0 24px var(--avatar-glow,rgba(57,255,20,.25));
      display:flex; align-items:center; justify-content:center;
      font-size:30px;
      transition:transform .4s var(--ease-spring),box-shadow .4s;
      animation:avatarFloat 5s ease-in-out infinite;
    }
    @keyframes avatarFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
    .t-card:hover .avatar {
      transform:translateY(-5px) scale(1.08);
      box-shadow:0 0 36px var(--avatar-glow,rgba(57,255,20,.5));
    }

    /* Achievement badge ring */
    .avatar-ring {
      position:absolute; inset:-5px; border-radius:50%;
      border:1px dashed var(--avatar-glow,rgba(57,255,20,.3));
      animation:ringRotate 12s linear infinite;
    }
    @keyframes ringRotate { to{transform:rotate(360deg)} }
    .avatar-ring-dot {
      position:absolute; top:0; left:50%; transform:translateX(-50%) translateY(-3px);
      width:6px; height:6px; border-radius:50%;
      background:var(--accent); box-shadow:0 0 10px var(--accent-glow);
    }

    /* Sport badge */
    .sport-badge {
      position:absolute; top:-4px; right:-4px; z-index:3;
      padding:4px 10px; border-radius:99px;
      background:rgba(11,15,25,.9); backdrop-filter:blur(8px);
      border:1px solid var(--avatar-glow,rgba(57,255,20,.35));
      font-size:8px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
      color:var(--badge-text,var(--accent)); white-space:nowrap;
    }

    /* Rating */
    .card-rating {
      position:relative; z-index:2;
      display:flex; justify-content:center; gap:4px; margin-top:14px;
    }
    .star {
      font-size:16px;
      filter:drop-shadow(0 0 4px rgba(57,255,20,.4));
      animation:starPop .4s var(--ease-spring) both;
    }
    .star:nth-child(1){animation-delay:.05s}
    .star:nth-child(2){animation-delay:.10s}
    .star:nth-child(3){animation-delay:.15s}
    .star:nth-child(4){animation-delay:.20s}
    .star:nth-child(5){animation-delay:.25s}
    @keyframes starPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

    /* Achievement badge below avatar */
    .achievement-badge {
      position:relative; z-index:2;
      display:inline-flex; align-items:center; gap:6px;
      margin:10px auto 0; padding:5px 14px; border-radius:99px;
      background:rgba(57,255,20,.07); border:1px solid rgba(57,255,20,.22);
      font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
      color:var(--accent); white-space:nowrap;
      animation:badgePulse 3.5s ease-in-out infinite;
    }
    @keyframes badgePulse{0%,100%{box-shadow:0 0 6px rgba(57,255,20,.15)}50%{box-shadow:0 0 18px rgba(57,255,20,.35)}}
    .ach-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent-glow); animation:blink 2s infinite; }

    /* ── Quote area ── */
    .card-quote {
      position:relative; padding:22px 28px 0;
      flex:1;
    }
    .quote-mark {
      font-family:'Bebas Neue',cursive; font-size:72px; line-height:.7;
      color:var(--accent); opacity:.18; position:absolute; top:14px; left:22px;
      transition:opacity .3s;
    }
    .t-card:hover .quote-mark { opacity:.32; }
    .quote-text {
      position:relative; z-index:1;
      font-size:14px; font-weight:400; line-height:1.75; color:var(--text-muted);
      font-style:italic;
      transition:color .3s;
    }
    .t-card:hover .quote-text { color:rgba(255,255,255,.85); }
    .quote-text strong { color:var(--text); font-weight:600; font-style:normal; }

    /* ── Card footer ── */
    .card-footer {
      padding:18px 28px 24px;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      border-top:1px solid var(--glass-border);
      margin-top:20px;
    }
    .person-name {
      font-family:'Bebas Neue',cursive; font-size:20px; letter-spacing:2px;
      color:var(--text); line-height:1;
      transition:color .25s;
    }
    .t-card:hover .person-name { color:var(--accent); }
    .person-role {
      font-size:11px; font-weight:500; letter-spacing:1px;
      color:var(--text-muted); margin-top:3px;
    }
    .person-sport {
      padding:5px 12px; border-radius:8px;
      background:var(--glass-bg); border:1px solid var(--glass-border);
      font-size:9px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
      color:var(--text-muted); transition:border-color .25s, color .25s;
      white-space:nowrap;
    }
    .t-card:hover .person-sport { border-color:rgba(57,255,20,.3); color:var(--accent); }

    /* ============================================================
       SLIDER NAVIGATION
    ============================================================ */
    .slider-controls {
      display:flex; align-items:center; justify-content:center; gap:20px;
      margin-top:44px;
    }

    .slider-btn {
      width:48px; height:48px; border-radius:50%;
      background:var(--glass-bg); border:1px solid var(--glass-border);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; color:var(--text-muted);
      transition:background .25s, border-color .25s, color .25s,
                 transform .2s var(--ease-spring), box-shadow .25s;
    }
    .slider-btn:hover {
      background:var(--accent-dim); border-color:rgba(57,255,20,.4);
      color:var(--accent); transform:scale(1.1);
      box-shadow:0 0 18px rgba(57,255,20,.2);
    }
    .slider-btn:active { transform:scale(.94); }
    .slider-btn svg { pointer-events:none; }

    /* Pagination dots */
    .slider-dots {
      display:flex; align-items:center; gap:8px;
    }
    .s-dot {
      width:8px; height:8px; border-radius:99px;
      background:var(--glass-border); cursor:pointer;
      transition:width .3s var(--ease-spring), background .3s, box-shadow .3s;
    }
    .s-dot.active {
      width:24px;
      background:var(--accent);
      box-shadow:0 0 10px var(--accent-glow);
    }

    /* ============================================================
       FLOATING BADGES (ambient)
    ============================================================ */
    .t-ambient-badges {
      display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
      margin-top:52px;
      opacity:0; transform:translateY(20px);
      transition:opacity .7s .3s var(--ease-out),transform .7s .3s var(--ease-out);
    }
    .t-ambient-badges.revealed { opacity:1; transform:translateY(0); }

    .amb-badge {
      display:flex; align-items:center; gap:8px;
      padding:10px 20px; border-radius:12px;
      background:rgba(17,24,39,.7); backdrop-filter:blur(12px);
      border:1px solid rgba(57,255,20,.18);
      font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
      color:var(--text-muted);
      box-shadow:0 4px 20px rgba(0,0,0,.4);
      animation:ambFloat 6s ease-in-out infinite;
    }
    .amb-badge:nth-child(2){animation-delay:2s}
    .amb-badge:nth-child(3){animation-delay:4s}
    @keyframes ambFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
    .amb-icon { font-size:16px; filter:drop-shadow(0 0 6px rgba(57,255,20,.5)); }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media(max-width:1100px) {
      .t-card         { width:340px; }
      .t-card.featured{ width:360px; }
      .ts-item        { padding:16px 28px; }
    }
    @media(max-width:700px) {
      .testimonials   { padding:80px 0 100px; }
      .t-inner        { padding:0 16px; }
      .t-card         { width:300px; }
      .t-card.featured{ width:300px; }
      .ts-item        { padding:14px 18px; }
      .ts-num         { font-size:30px; }
      .amb-badge      { font-size:10px; padding:8px 14px; }
    }
    @media(max-width:400px) {
      .t-card         { width:280px; }
      .t-stats-strip  { flex-wrap:wrap; justify-content:center; }
      .ts-item        { border-right:none; border-bottom:1px solid var(--glass-border); padding:12px 20px; }
    }