/* ============================================
   CoolplayClub.com — Modern Design System v2
   Dark-First | Glassmorphism | Mesh Gradients
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ---- CSS Variables ---- */
:root {
  --pri: #3b82f6;
  --pri2: #8b5cf6;
  --pri-dk: #2563eb;
  --pri-lt: rgba(59,130,246,.12);
  --acc: #14b8a6;
  --acc2: #f97316;
  --ink: #0f172a;
  --ink2: #1e293b;
  --muted: #94a3b8;
  --faint: #64748b;
  --line: rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.04);
  --bg: #0a0e17;
  --bg2: #0f1623;
  --bg3: #131b2a;
  --surface: #161f30;
  --surface2: #1a2540;
  --card: rgba(255,255,255,.03);
  --card-h: rgba(255,255,255,.06);
  --white: #ffffff;
  --body: #e2e8f0;
  --green: #10b981;
  --red: #ef4444;
  --yellow: #f59e0b;
  --font-h: 'Space Grotesk', sans-serif;
  --font-b: 'Plus Jakarta Sans', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-b: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-s: cubic-bezier(0.34, 1.56, 0.64, 1);
  --nav-h: 76px;
  --max-w: 1320px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --sh-sm: 0 1px 3px rgba(0,0,0,.3);
  --sh: 0 4px 24px rgba(0,0,0,.4);
  --sh-lg: 0 12px 48px rgba(0,0,0,.5);
  --sh-glow: 0 0 60px rgba(59,130,246,.15);
  --sh-glow2: 0 0 80px rgba(139,92,246,.12);
}

/* ---- Reset & Base ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-b);color:var(--body);background:var(--bg);line-height:1.7;overflow-x:hidden;font-weight:400}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit;transition:color .3s var(--ease)}
ul{list-style:none}
::selection{background:rgba(59,130,246,.3);color:#fff}

.container{max-width:var(--max-w);margin:0 auto;padding:0 48px}
.container-sm{max-width:1000px;margin:0 auto;padding:0 48px}

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

/* ---- Mesh Gradient Background ---- */
body::before{content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(59,130,246,.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(139,92,246,.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 80%, rgba(20,184,166,.04), transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 100%, rgba(249,115,22,.03), transparent 50%),
    var(--bg);
  pointer-events:none
}

/* Grid pattern overlay */
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 70%)}

/* ---- Full-Screen Section ---- */
.fs{position:relative;width:100%;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.fs-bg{position:absolute;inset:0;z-index:0}
.fs-bg img{width:100%;height:100%;object-fit:cover}
.fs-bg::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(10,14,23,.75) 0%, rgba(10,14,23,.5) 40%, rgba(10,14,23,.85) 100%)}
.fs-body{position:relative;z-index:2;width:100%}

/* Dark overlay variants */
.dark-45::after{background:linear-gradient(180deg, rgba(10,14,23,.65) 0%, rgba(10,14,23,.4) 50%, rgba(10,14,23,.8) 100%)}
.dark-55::after{background:linear-gradient(180deg, rgba(10,14,23,.7) 0%, rgba(10,14,23,.5) 50%, rgba(10,14,23,.88) 100%)}
.dark-65::after{background:linear-gradient(180deg, rgba(10,14,23,.75) 0%, rgba(10,14,23,.6) 50%, rgba(10,14,23,.92) 100%)}

/* ---- Navigation ---- */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;display:flex;align-items:center;transition:all .5s var(--ease)}
.nav.on-hero{background:transparent}
.nav.scrolled{background:rgba(15,22,35,.88);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--max-w);margin:0 auto;padding:0 60px 0 32px}
.nav-logo{display:flex;align-items:center;gap:12px;font-family:var(--font-h);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;color:#fff;z-index:1001;transition:color .5s var(--ease)}
.nav.scrolled .nav-logo{color:#fff}
.nav-logo-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg, var(--pri), var(--pri2));animation:pulse-dot 2.5s ease-in-out infinite;box-shadow:0 0 12px rgba(59,130,246,.5)}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.5), 0 0 8px rgba(139,92,246,.3)}50%{box-shadow:0 0 0 14px rgba(59,130,246,0), 0 0 20px rgba(139,92,246,.2)}}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{font-size:.82rem;font-weight:500;color:rgba(255,255,255,.7);padding:8px 16px;border-radius:50px;transition:all .3s var(--ease);position:relative;letter-spacing:.01em}
.nav.scrolled .nav-links a{color:rgba(255,255,255,.7)}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-links a.active{color:#fff;background:rgba(59,130,246,.15);font-weight:600}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1001;background:none;border:none;padding:4px}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:all .3s var(--ease)}
.nav.scrolled .nav-toggle span{background:#fff}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ---- Typography ---- */
.sec-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-h);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pri);padding:7px 18px;border-radius:50px;margin-bottom:20px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2)}
.sec-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--pri);box-shadow:0 0 8px rgba(59,130,246,.6)}
.sec-tag.light{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.1)}
.sec-tag.light::before{background:var(--acc);box-shadow:0 0 8px rgba(20,184,166,.6)}
.sec-h2{font-family:var(--font-h);font-size:clamp(2rem, 4.5vw, 3.6rem);font-weight:700;letter-spacing:-.04em;line-height:1.1;margin-bottom:24px;color:#fff}
.sec-h2.white{color:#fff}
.sec-desc{font-size:1.05rem;color:var(--muted);max-width:600px;line-height:1.75;margin-bottom:44px;font-weight:400}
.sec-desc.light{color:rgba(255,255,255,.55)}

/* ---- Gradient Text Effects ---- */
.grad-text{background:linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #c084fc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.grad-text-blue{background:linear-gradient(135deg, #3b82f6, #06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ---- Buttons ---- */
.btn{font-family:var(--font-h);font-size:.88rem;font-weight:600;padding:14px 32px;border-radius:50px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:all .35s var(--ease-s);letter-spacing:.01em;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;border-radius:50px;opacity:0;transition:opacity .35s var(--ease)}
.btn:hover::after{opacity:1}
.btn-pri{background:linear-gradient(135deg, var(--pri), var(--pri2));color:#fff;box-shadow:0 4px 20px rgba(59,130,246,.3)}
.btn-pri:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(59,130,246,.45)}
.btn-pri::after{background:linear-gradient(135deg, var(--pri-dk), #7c3aed)}
.btn-out{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.2);backdrop-filter:blur(10px)}
.btn-out:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.btn-white{background:#fff;color:var(--ink);font-weight:700}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.2);background:#f1f5f9}

/* ---- Scroll Reveal Animation ---- */
.reveal{opacity:0;transform:translateY(60px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-l{opacity:0;transform:translateX(-60px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal-r{opacity:0;transform:translateX(60px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal-l.visible,.reveal-r.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}

/* ---- Hero Common ---- */
.hero-text{text-align:center;color:#fff}
.hero-text h1{font-family:var(--font-h);font-size:clamp(2.6rem, 6.5vw, 5.2rem);font-weight:800;letter-spacing:-.05em;line-height:1.04;margin-bottom:26px}
.hero-text h1 span{background:linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #c084fc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-text p{font-size:1.12rem;color:rgba(255,255,255,.5);max-width:640px;margin:0 auto 40px;line-height:1.75;font-weight:400}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-stats-row{display:flex;gap:48px;justify-content:center;margin-top:56px;flex-wrap:wrap}
.hs-item{text-align:center;position:relative}
.hs-item:not(:last-child)::after{content:'';position:absolute;right:-24px;top:15%;height:70%;width:1px;background:rgba(255,255,255,.1)}
.hs-val{font-family:var(--font-h);font-size:2.4rem;font-weight:700;color:#fff;letter-spacing:-.04em;line-height:1}
.hs-label{font-size:.75rem;color:rgba(255,255,255,.4);margin-top:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:3;animation:bounceDown 2s ease-in-out infinite}
.hero-scroll span{display:block;width:24px;height:40px;border:2px solid rgba(255,255,255,.2);border-radius:50px;position:relative}
.hero-scroll span::after{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:3px;height:8px;background:rgba(255,255,255,.4);border-radius:50px;animation:scrollWheel 2s ease-in-out infinite}
@keyframes bounceDown{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
@keyframes scrollWheel{0%{top:8px;opacity:1}50%{top:20px;opacity:.15}100%{top:8px;opacity:1}}

/* ---- Glass Card ---- */
.glass-card{background:rgba(255,255,255,.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);transition:all .4s var(--ease)}
.glass-card:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);transform:translateY(-4px);box-shadow:var(--sh-lg)}

/* ---- Stats Cards ---- */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat-card{background:rgba(255,255,255,.04);backdrop-filter:blur(12px);border-radius:var(--radius);padding:32px 24px;text-align:center;border:1px solid rgba(255,255,255,.06);transition:all .4s var(--ease);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%, rgba(59,130,246,.08), transparent 60%);opacity:0;transition:opacity .4s var(--ease)}
.stat-card:hover{transform:translateY(-6px);border-color:rgba(59,130,246,.25);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.stat-card:hover::before{opacity:1}
.stat-card .sv{font-family:var(--font-h);font-size:2.2rem;font-weight:700;color:#fff;letter-spacing:-.04em;line-height:1.1;background:linear-gradient(135deg, #fff, #cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-card .sl{font-size:.72rem;color:rgba(255,255,255,.4);margin-top:6px;text-transform:uppercase;letter-spacing:.08em;font-weight:500}

/* ---- Cards Grid 3 ---- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card3{background:rgba(255,255,255,.02);border-radius:var(--radius-lg);padding:40px 30px;border:1px solid rgba(255,255,255,.06);transition:all .4s var(--ease);position:relative;overflow:hidden;cursor:pointer}
.card3::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%, rgba(59,130,246,.06), transparent 60%);opacity:0;transition:opacity .4s var(--ease)}
.card3::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg, var(--pri), var(--pri2));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card3:hover{transform:translateY(-8px);border-color:rgba(59,130,246,.2);box-shadow:0 24px 56px rgba(0,0,0,.4)}
.card3:hover::before{opacity:1}
.card3:hover::after{transform:scaleX(1)}
.card3-icon{width:56px;height:56px;border-radius:14px;background:rgba(59,130,246,.12);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:20px;transition:all .4s var(--ease)}
.card3:hover .card3-icon{background:rgba(59,130,246,.2);transform:scale(1.05)}
.card3 h3{font-family:var(--font-h);font-size:1.15rem;font-weight:600;margin-bottom:10px;color:#fff;letter-spacing:-.02em}
.card3 p{font-size:.9rem;color:var(--muted);line-height:1.7}

/* ---- Feature Rows ---- */
.ft-row{display:flex;gap:20px;align-items:flex-start;padding:16px 0}
.ft-num{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:rgba(59,130,246,.12);color:var(--pri);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700;font-size:.85rem;transition:all .3s var(--ease)}
.ft-row:hover .ft-num{background:linear-gradient(135deg, var(--pri), var(--pri2));color:#fff;box-shadow:0 6px 20px rgba(59,130,246,.3)}
.ft-row h4{font-family:var(--font-h);font-size:1.02rem;font-weight:600;color:#fff;margin-bottom:6px;letter-spacing:-.02em}
.ft-row p{font-size:.88rem;color:var(--muted);line-height:1.65}
.ft-row.dark .ft-num{background:rgba(255,255,255,.08);color:#fff}
.ft-row.dark h4{color:#fff}
.ft-row.dark p{color:rgba(255,255,255,.5)}

/* ---- Partners Grid ---- */
.partners-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:14px}
.p-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:28px 16px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;transition:all .4s var(--ease);min-height:110px;position:relative;overflow:hidden}
.p-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, rgba(59,130,246,.05), transparent 70%);opacity:0;transition:opacity .4s var(--ease)}
.p-card:hover{transform:translateY(-5px);border-color:rgba(59,130,246,.25);box-shadow:0 16px 40px rgba(0,0,0,.3);background:rgba(255,255,255,.06)}
.p-card:hover::before{opacity:1}
.p-card img{height:28px;width:auto;object-fit:contain;transition:all .4s var(--ease)}
.p-card:hover img{transform:scale(1.08)}
.p-card .p-name{font-size:.7rem;font-weight:500;color:rgba(255,255,255,.45);text-align:center;letter-spacing:.02em}

/* ---- 2-Col Layout ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.grid2-img{position:relative;border-radius:var(--radius-lg);overflow:hidden}
.grid2-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .6s var(--ease)}
.grid2-img:hover img{transform:scale(1.03)}
.grid2-img::after{content:'';position:absolute;inset:0;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);pointer-events:none}

/* ---- CTA Section ---- */
.cta-sec{position:relative;min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.cta-sec .fs-bg::after{background:linear-gradient(180deg, rgba(10,14,23,.7) 0%, rgba(10,14,23,.5) 50%, rgba(10,14,23,.85) 100%)}
.cta-body{position:relative;z-index:2;padding:0 32px}
.cta-body h2{font-family:var(--font-h);font-size:clamp(1.8rem, 4vw, 3rem);font-weight:700;color:#fff;letter-spacing:-.04em;margin-bottom:18px;line-height:1.15}
.cta-body p{font-size:1.05rem;color:rgba(255,255,255,.45);margin-bottom:40px;line-height:1.75}

/* ---- Footer ---- */
.footer{background:var(--bg2);color:rgba(255,255,255,.45);padding:88px 0 32px;border-top:1px solid rgba(255,255,255,.04);position:relative}
.footer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg, transparent, rgba(59,130,246,.2), transparent)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:52px;margin-bottom:60px}
.footer-brand p{font-size:.9rem;line-height:1.75;margin-top:18px;max-width:280px;color:rgba(255,255,255,.35)}
.footer-col h4{font-family:var(--font-h);font-size:.75rem;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.1em;margin-bottom:22px}
.footer-col ul{display:grid;gap:12px}
.footer-col a{font-size:.88rem;color:rgba(255,255,255,.4);transition:all .3s var(--ease)}
.footer-col a:hover{color:#fff;padding-left:4px}
.footer-bot{border-top:1px solid rgba(255,255,255,.04);padding-top:28px;display:flex;justify-content:space-between;align-items:center;font-size:.8rem;flex-wrap:wrap;gap:16px;color:rgba(255,255,255,.3)}
.footer-bot-links{display:flex;gap:28px}
.footer-bot-links a{color:rgba(255,255,255,.35);transition:color .3s}
.footer-bot-links a:hover{color:#fff}

/* ---- Section Dividers ---- */
.section-light{background:linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%)}
.section-dark{background:var(--bg)}
.section-accent{background:linear-gradient(180deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%)}

/* ---- Reduced Motion ---- */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal,.reveal-l,.reveal-r,.reveal-scale{opacity:1;transform:none}}

/* ---- Responsive ---- */
@media(max-width:1200px){
  .cards3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px){
  .container,.container-sm{padding:0 32px}
  .stat-cards{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr;gap:48px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-stats-row{gap:32px}
  .hs-item:not(:last-child)::after{right:-16px}
  .nav-links{position:fixed;top:var(--nav-h);right:-100%;width:280px;height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));background:rgba(15,22,35,.97);backdrop-filter:blur(30px);flex-direction:column;padding:32px 32px 32px;gap:6px;transition:right .45s var(--ease);box-shadow:-8px 0 40px rgba(0,0,0,.5);border-left:1px solid rgba(255,255,255,.06)}
  .nav-links.active{right:0}
  .nav-links a{color:#fff!important;font-size:.95rem;padding:12px 16px;border-radius:10px}
  .nav-toggle{display:flex}
}
@media(max-width:768px){
  .container,.container-sm{padding:0 24px}
  .cards3{grid-template-columns:1fr}
  .partners-grid{grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));gap:10px}
  .stat-cards{grid-template-columns:1fr 1fr;gap:12px}
  .hero-stats-row{gap:20px}
  .hs-item:not(:last-child)::after{display:none}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .footer-bot{flex-direction:column;text-align:center}
  .sec-h2{font-size:clamp(1.7rem, 3vw, 2.4rem)}
  .hero-text h1{font-size:clamp(2rem, 5vw, 3.2rem)}
}
@media(max-width:480px){
  .container,.container-sm{padding:0 18px}
  .hero-btns{flex-direction:column;align-items:center}
  .btn{width:100%;justify-content:center}
  .stat-cards{grid-template-columns:1fr}
  .hero-stats-row{flex-direction:column;align-items:center;gap:16px}
}

/* ---- Utility animations ---- */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 20px rgba(59,130,246,.2)}50%{box-shadow:0 0 40px rgba(59,130,246,.4), 0 0 80px rgba(139,92,246,.15)}}
.float{animation:float 6s ease-in-out infinite}
.glow-pulse{animation:glow-pulse 3s ease-in-out infinite}