/* ============================================================
   SOULENE ELITE SPORTS — Premium Design System v2
   Warm Amber + Teal + Deep Dark — Ultra-Premium Aesthetic
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
    --bg-deep: #020617;
    --bg-base: #0b1329;
    --bg-raised: #101c3c;
    --bg-card: #0f172a;
    --bg-card-h: #1e293b;
    --bg-glass: rgba(15, 23, 42, 0.65);

    --tx-1: #f8fafc;
    --tx-2: #cbd5e1;
    --tx-3: #64748b;

    --amber: #0b79f2;   /* Cobalt Blue */
    --teal: #00b4d8;    /* Sea Blue */
    --coral: #4f46e5;   /* Indigo Accent */
    --violet: #3b82f6;  /* Sky Blue Accent */
    --sky: #60a5fa;

    --grad: linear-gradient(135deg, var(--amber) 0%, var(--teal) 100%);
    --grad-warm: linear-gradient(135deg, var(--amber) 0%, var(--coral) 100%);
    --grad-cool: linear-gradient(135deg, var(--teal) 0%, var(--violet) 100%);
    --grad-glass: linear-gradient(135deg, rgba(11,121,242,0.05), rgba(0,180,216,0.05));

    --border: rgba(11,121,242,0.08);
    --border-h: rgba(11,121,242,0.2);
    --glow-amber: 0 8px 30px rgba(11,121,242,0.06);
    --glow-teal: 0 8px 30px rgba(0,180,216,0.06);

    --font-h: 'Oswald', sans-serif;
    --font-b: 'Raleway', sans-serif;
    --font-m: 'JetBrains Mono', monospace;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;

    --section-py: 120px;
    --max-w: 1280px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{font-family:var(--font-b);background:var(--bg-deep);color:var(--tx-1);line-height:1.7;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:.3s var(--ease)}

::selection{background:rgba(247,183,80,0.2);color:var(--tx-1)}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg-deep)}
::-webkit-scrollbar-thumb{background:rgba(11,121,242,0.15);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(11,121,242,0.3)}

/* ---------- Utility ---------- */
.container{max-width:var(--max-w);margin:0 auto;padding:0 28px}
.section{position:relative;z-index:2;padding:var(--section-py) 0;overflow:hidden}
.section-alt{background:var(--bg-base)}

.hero-gradient{
    background:var(--grad);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.sec-head{text-align:center;max-width:700px;margin:0 auto 72px}
.sec-tag{
    display:inline-block;
    font-family:var(--font-m);
    font-size:.72rem;font-weight:600;
    letter-spacing:3px;text-transform:uppercase;
    color:var(--amber);
    background:rgba(247,183,80,0.06);
    border:1px solid rgba(247,183,80,0.15);
    padding:7px 20px;border-radius:50px;margin-bottom:18px;
}
.sec-title{
    font-family:var(--font-h);
    font-size:clamp(1.9rem,4vw,3rem);
    font-weight:700;line-height:1.18;margin-bottom:18px;
}
.sec-desc{font-size:1.05rem;color:var(--tx-2);line-height:1.8}

/* ---------- Canvas BG ---------- */
#bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ---------- Cursor Trail ---------- */
#cursorTrail{
    position:fixed;width:420px;height:420px;border-radius:50%;
    background:radial-gradient(circle,rgba(247,183,80,0.045) 0%,transparent 70%);
    pointer-events:none;z-index:1;transform:translate(-50%,-50%);
    transition:opacity .4s;opacity:0;
}
body:hover #cursorTrail{opacity:1}

/* ===================================================
   NAVIGATION
   =================================================== */
.nav{
    position:fixed;top:0;left:0;width:100%;z-index:1000;
    padding:22px 0;transition:.5s var(--ease);
}
.nav.scrolled{
    padding:12px 0;
    background:rgba(5,5,7,0.82);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--border);
}
.nav-inner{
    max-width:var(--max-w);margin:0 auto;padding:0 28px;
    display:flex;align-items:center;justify-content:space-between;
}

.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:38px;height:38px;flex-shrink:0}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.brand-name{
    font-family:var(--font-h);font-size:1rem;font-weight:700;
    letter-spacing:2.5px;color:var(--tx-1);
}
.brand-name span{
    margin-left:2px;
    background:var(--grad);-webkit-background-clip:text;
    -webkit-text-fill-color:transparent;background-clip:text;
}

.nav-menu{display:flex;align-items:center;gap:30px}
.nav-item{
    font-family:var(--font-h);font-size:.88rem;font-weight:500;
    color:var(--tx-2);position:relative;padding:4px 0;
}
.nav-item::after{
    content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;
    background:var(--grad);transition:.3s var(--ease);border-radius:2px;
}
.nav-item:hover{color:var(--tx-1)}
.nav-item:hover::after{width:100%}

.nav-cta{
    background:var(--grad);color:#050507 !important;
    font-weight:700;padding:10px 24px;border-radius:50px;
}
.nav-cta::after{display:none}
.nav-cta:hover{transform:translateY(-2px);box-shadow:var(--glow-amber)}

.burger{
    display:none;flex-direction:column;gap:6px;
    background:none;border:none;cursor:pointer;padding:4px;z-index:1001;
}
.burger span{width:26px;height:2px;background:var(--tx-1);border-radius:2px;transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ===================================================
   HERO
   =================================================== */
.hero{
    position:relative;min-height:100vh;display:flex;flex-direction:column;
    justify-content:center;padding:120px 28px 80px;z-index:2;overflow:hidden;
}

.hero-atmosphere{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.08}
.glow-1{width:600px;height:600px;background:radial-gradient(circle,var(--amber),transparent);top:-220px;right:-80px;animation:orbDrift 16s ease-in-out infinite}
.glow-2{width:500px;height:500px;background:radial-gradient(circle,var(--teal),transparent);bottom:-200px;left:-100px;animation:orbDrift 20s ease-in-out infinite reverse}
.glow-3{width:280px;height:280px;background:radial-gradient(circle,var(--violet),transparent);top:40%;left:25%;opacity:.04;animation:orbDrift 13s ease-in-out infinite 2s}

.hero-mesh{
    position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(247,183,80,0.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(247,183,80,0.025) 1px,transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse 70% 55% at 50% 50%,black 15%,transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 50%,black 15%,transparent 100%);
}

@keyframes orbDrift{
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(25px,-18px) scale(1.04)}
    66%{transform:translate(-18px,14px) scale(.96)}
}

.hero-wrap{
    max-width:var(--max-w);margin:0 auto;width:100%;
    display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
    position:relative;z-index:2;
}

.hero-eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    background:rgba(247,183,80,0.06);border:1px solid rgba(247,183,80,0.12);
    padding:8px 20px;border-radius:50px;font-size:.84rem;font-weight:500;
    color:var(--amber);margin-bottom:28px;
}
.pulse-dot{
    width:8px;height:8px;background:var(--amber);border-radius:50%;
    animation:pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

.hero-h1{
    font-family:var(--font-h);font-size:clamp(2.4rem,5.2vw,4.2rem);
    font-weight:800;line-height:1.08;margin-bottom:24px;letter-spacing:-1px;
}
.hero-sub{
    font-size:1.12rem;color:var(--tx-2);line-height:1.85;
    margin-bottom:36px;max-width:520px;
}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:50px}

/* Glow Button */
.btn-glow{
    position:relative;display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-h);font-size:.95rem;font-weight:700;
    padding:15px 34px;border-radius:60px;border:none;cursor:pointer;
    color:#050507;overflow:hidden;transition:.35s var(--ease);
    z-index:1;
}
.btn-glow-bg{
    position:absolute;inset:0;background:var(--grad);z-index:-1;
    transition:.5s var(--ease);
}
.btn-glow-text{position:relative;z-index:1}
.btn-glow svg{position:relative;z-index:1;flex-shrink:0}
.btn-glow:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(247,183,80,0.15)}
.btn-glow:hover .btn-glow-bg{filter:brightness(1.15)}
.btn-lg{font-size:1.05rem;padding:18px 42px}

.btn-ghost{
    font-family:var(--font-h);font-size:.95rem;font-weight:600;
    color:var(--tx-1);border:1.5px solid var(--border-h);
    padding:14px 30px;border-radius:60px;
    transition:.3s var(--ease);
}
.btn-ghost:hover{
    border-color:var(--amber);background:rgba(247,183,80,0.04);
    transform:translateY(-3px);
}

/* Hero Proof */
.hero-proof{display:flex;align-items:center;gap:28px}
.proof-item strong{
    display:block;font-family:var(--font-h);font-size:1.6rem;font-weight:800;
}
.proof-item span{font-size:.82rem;color:var(--tx-3);font-weight:500}
.proof-divider{width:1px;height:36px;background:var(--border)}

/* Hero Visual */
.hero-right{position:relative}
.hero-visual{position:relative}
.hero-img-ring{
    position:absolute;inset:-8%;
    border:1px solid rgba(247,183,80,0.08);
    border-radius:50%;animation:ringRotate 25s linear infinite;
}
@keyframes ringRotate{to{transform:rotate(360deg)}}

.hero-img{
    position:relative;z-index:1;border-radius:var(--r-xl);
    width:100%;animation:imgFloat 7s ease-in-out infinite;
}
@keyframes imgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* Hero Cards */
.hero-card{
    position:absolute;z-index:10;
    background:var(--bg-glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border);border-radius:var(--r-md);
    padding:14px 18px;min-width:155px;
}
.hc-1{top:8%;right:-16px;animation:cardFloat 5s ease-in-out infinite}
.hc-2{bottom:18%;left:-28px;animation:cardFloat 5s ease-in-out infinite 1.8s}
.hc-3{top:52%;right:-36px;animation:cardFloat 5s ease-in-out infinite 3.2s}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.hc-icon{font-size:1.4rem;margin-bottom:4px}
.hc-label{display:block;font-size:.68rem;color:var(--tx-3);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.hc-val{font-family:var(--font-m);font-size:1.05rem;font-weight:700;display:block}
.hc-val small{font-size:.72rem;color:var(--tx-3)}
.hc-bar{height:4px;background:rgba(255,255,255,0.06);border-radius:4px;margin-top:8px;overflow:hidden}
.hc-fill{height:100%;background:var(--grad);border-radius:4px;width:0;animation:barGrow 2.5s ease 1.2s forwards}
.hc-fill{width:var(--w)}
@keyframes barGrow{from{width:0}}
.hc-tag{
    display:inline-block;margin-top:6px;font-size:.68rem;font-weight:700;
    color:var(--teal);background:rgba(24,200,176,0.1);
    padding:3px 10px;border-radius:50px;
}

/* Scroll Cue */
.scroll-cue{
    position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:10px;
    color:var(--tx-3);font-size:.78rem;font-weight:500;
    animation:fadeInUp 1s ease 2.2s both;
}
.scroll-track{
    width:22px;height:36px;border:2px solid rgba(247,183,80,0.2);
    border-radius:11px;position:relative;
}
.scroll-thumb{
    width:4px;height:8px;background:var(--amber);border-radius:4px;
    position:absolute;top:5px;left:50%;transform:translateX(-50%);
    animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse{0%,100%{transform:translateX(-50%) translateY(0);opacity:1}50%{transform:translateX(-50%) translateY(14px);opacity:.3}}

/* ===================================================
   MARQUEE
   =================================================== */
.marquee-bar{
    position:relative;z-index:2;padding:20px 0;overflow:hidden;
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    background:var(--bg-base);
}
.marquee-track{
    display:flex;align-items:center;gap:40px;white-space:nowrap;
    animation:marqueeScroll 30s linear infinite;
}
.marquee-track span{
    font-family:var(--font-h);font-size:.88rem;font-weight:600;
    color:var(--tx-3);opacity:.6;flex-shrink:0;
}
.mq-dot{font-size:.5rem;color:var(--amber);opacity:.3}
@keyframes marqueeScroll{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}


/* ===================================================
   BENTO FEATURES
   =================================================== */
.features-bento{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:auto auto;
    gap:20px;
}

.bento-card{
    position:relative;border-radius:var(--r-lg);overflow:hidden;
    background:var(--bg-card);border:1px solid var(--border);
    transition:.5s var(--ease);cursor:default;
}
.bento-card:hover{border-color:var(--border-h);transform:translateY(-6px)}

.bento-shine{
    position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(247,183,80,0.03),transparent 50%,rgba(24,200,176,0.02));
    opacity:0;transition:.5s var(--ease);pointer-events:none;
}
.bento-card:hover .bento-shine{opacity:1}

.bento-body{padding:36px}

.bento-icon{width:52px;height:52px;margin-bottom:20px}
.bento-icon svg{width:100%;height:100%}
.bento-icon-sm{font-size:2rem;margin-bottom:14px}

.bento-body h3{font-family:var(--font-h);font-size:1.3rem;font-weight:700;margin-bottom:10px}
.bento-body h4{font-family:var(--font-h);font-size:1.1rem;font-weight:700;margin-bottom:8px}
.bento-body p{color:var(--tx-2);font-size:.92rem;line-height:1.7;margin-bottom:18px}

.bento-tags{display:flex;flex-wrap:wrap;gap:8px}
.bento-tags span{
    font-size:.72rem;font-weight:600;color:var(--amber);
    background:rgba(247,183,80,0.06);border:1px solid rgba(247,183,80,0.12);
    padding:5px 14px;border-radius:50px;
}

/* Large card spans 2 cols and has image */
.bento-lg{
    grid-column:span 2;display:grid;
    grid-template-columns:1fr 1fr;overflow:hidden;
}
.bento-visual{position:relative;overflow:hidden}
.bento-visual img{
    width:100%;height:100%;object-fit:cover;
    border-radius:0 var(--r-lg) var(--r-lg) 0;
}

.bento-md{}
.bento-sm .bento-body{padding:28px}

/* ===================================================
   JOURNEY / PROGRESS
   =================================================== */
.journey-grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:48px;align-items:flex-start;
}
.journey-img-wrap{
    position:relative;border-radius:var(--r-xl);overflow:hidden;
    border:1px solid var(--border);
}
.journey-img-wrap img{width:100%;border-radius:var(--r-xl)}
.journey-glow{
    position:absolute;inset:-20%;
    background:radial-gradient(circle,rgba(247,183,80,0.03),transparent 65%);
    pointer-events:none;
}

.journey-cards{display:flex;flex-direction:column;gap:18px}

.jcard{
    display:flex;gap:18px;padding:24px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-lg);transition:.4s var(--ease);
}
.jcard:hover{border-color:var(--border-h);transform:translateX(6px)}

.jcard-icon{
    font-size:1.8rem;width:48px;height:48px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(247,183,80,0.05);border-radius:var(--r-sm);
}
.jcard-body h4{font-family:var(--font-h);font-size:1.05rem;font-weight:700;margin-bottom:5px}
.jcard-body p{font-size:.86rem;color:var(--tx-2);line-height:1.65;margin-bottom:12px}

/* XP bar */
.xp-track{
    height:24px;background:rgba(255,255,255,0.04);
    border-radius:50px;overflow:hidden;
}
.xp-fill{
    height:100%;background:var(--grad);border-radius:50px;
    display:flex;align-items:center;justify-content:center;
    width:0;transition:width 2.2s var(--ease);
}
.xp-fill.active{width:72%}
.xp-info{
    display:flex;justify-content:space-between;margin-bottom:8px;
    font-size:.8rem;font-weight:700;color:var(--amber);
}

/* Badges */
.badge-row{display:flex;gap:9px}
.badge-item{
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    font-size:1.15rem;background:rgba(247,183,80,0.05);
    border:1px solid rgba(247,183,80,0.12);border-radius:50%;
    transition:.45s var(--spring);
}
.badge-item:hover{transform:scale(1.25) rotate(12deg);background:rgba(247,183,80,0.1);border-color:var(--amber);box-shadow:var(--glow-amber)}
.badge-locked{opacity:.35;border-style:dashed}

/* Mini leaderboard */
.mini-board{display:flex;flex-direction:column;gap:5px}
.board-row{
    display:flex;align-items:center;gap:12px;
    padding:7px 12px;background:rgba(255,255,255,0.02);border-radius:var(--r-sm);
    font-size:.84rem;
}
.rank{
    width:22px;height:22px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;font-size:.72rem;font-weight:800;font-family:var(--font-m);
}
.rank-gold{background:rgba(247,183,80,0.18);color:var(--amber)}
.rank-silver{background:rgba(148,163,184,0.18);color:#94a3b8}
.rank-bronze{background:rgba(180,120,60,0.18);color:#cd7f32}
.rname{flex:1;font-weight:500}
.rxp{font-family:var(--font-m);font-size:.74rem;color:var(--amber);font-weight:600}

/* Streaks */
.streak-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.streak-dots{display:flex;gap:5px}
.sdot{
    width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    font-size:.68rem;font-weight:700;border-radius:50%;
    background:rgba(255,255,255,0.03);color:var(--tx-3);
    border:1px solid rgba(255,255,255,0.05);
}
.sdot.active{
    background:rgba(247,183,80,0.1);color:var(--amber);
    border-color:rgba(247,183,80,0.25);box-shadow:0 0 10px rgba(247,183,80,0.12);
}
.streak-label{font-size:.84rem;font-weight:700;color:var(--amber)}

/* ===================================================
   NEUROSCIENCE
   =================================================== */
.neuro-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.neuro-wrap{
    position:relative;display:flex;justify-content:center;align-items:center;
}
.neuro-wrap img{
    position:relative;z-index:1;max-width:400px;border-radius:var(--r-xl);
    animation:imgFloat 9s ease-in-out infinite;
}
.neuro-pulse{
    position:absolute;width:110%;height:110%;
    background:radial-gradient(circle,rgba(247,183,80,0.06),transparent 60%);
    animation:neuroPulse 4.5s ease-in-out infinite;
}
@keyframes neuroPulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.12);opacity:.9}}

.neuro-orbit{position:absolute;border-radius:50%;border:1px solid rgba(247,183,80,0.06)}
.o1{width:115%;height:115%;animation:ringRotate 22s linear infinite}
.o2{width:135%;height:135%;border-color:rgba(24,200,176,0.05);animation:ringRotate 32s linear infinite reverse}
.o3{width:155%;height:155%;border-color:rgba(139,92,246,0.04);animation:ringRotate 44s linear infinite}

.neuro-desc{color:var(--tx-2);font-size:1.04rem;line-height:1.85;margin-bottom:36px}

.neuro-meters{display:flex;gap:32px}
.meter{display:flex;flex-direction:column;align-items:center;gap:12px}
.meter-ring{position:relative;width:88px;height:88px}
.meter-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.meter-val{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-m);font-size:.88rem;font-weight:700;
}
.meter-label{font-size:.78rem;color:var(--tx-2);font-weight:500;text-align:center}

/* ===================================================
   SPORTS
   =================================================== */
.sports-hero-img{
    max-width:950px;margin:0 auto 56px;border-radius:var(--r-xl);
    overflow:hidden;border:1px solid var(--border);
}
.sports-hero-img img{width:100%;border-radius:var(--r-xl)}

.sports-mosaic{
    display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.scard{
    position:relative;background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-lg);padding:30px;text-align:center;
    transition:.5s var(--ease);cursor:default;overflow:hidden;
}
.scard-glow{
    position:absolute;top:-50%;left:-50%;width:200%;height:200%;
    background:radial-gradient(circle at 50% 50%,rgba(247,183,80,0.04),transparent 50%);
    opacity:0;transition:.5s var(--ease);pointer-events:none;
}
.scard:hover .scard-glow{opacity:1}
.scard:hover{transform:translateY(-8px);border-color:var(--border-h);box-shadow:var(--glow-amber)}

.scard-icon{font-size:2.4rem;display:block;margin-bottom:12px}
.scard h4{font-family:var(--font-h);font-size:1rem;font-weight:700;margin-bottom:8px}
.scard p{font-size:.8rem;color:var(--tx-2);line-height:1.6}

/* ===================================================
   STEPS
   =================================================== */
.steps-track{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;
}
.step-line{
    position:absolute;top:48px;left:12%;right:12%;height:2px;
    background:linear-gradient(90deg,var(--amber),var(--teal));opacity:.12;
}
.step{position:relative;text-align:center;padding:32px 20px}
.step-num{
    font-family:var(--font-m);font-size:2.8rem;font-weight:900;
    background:var(--grad);-webkit-background-clip:text;
    -webkit-text-fill-color:transparent;background-clip:text;opacity:.25;
    margin-bottom:18px;
}
.step h3{font-family:var(--font-h);font-size:1.15rem;font-weight:700;margin-bottom:10px}
.step p{font-size:.88rem;color:var(--tx-2);line-height:1.7}

/* ===================================================
   CINEMATIC PARALLAX
   =================================================== */
.cinema{
    position:relative;z-index:2;min-height:520px;
    display:flex;align-items:center;justify-content:center;
    text-align:center;overflow:hidden;
}
.cinema-bg{
    position:absolute;inset:-12%;background-size:cover;
    background-position:center;background-attachment:fixed;z-index:0;
}
.cinema-overlay{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(5,5,7,.88),rgba(5,5,7,.7),rgba(5,5,7,.88));
}
.cinema-content{
    position:relative;z-index:2;max-width:680px;padding:60px 28px;
}
.cinema-content h2{
    font-family:var(--font-h);font-size:clamp(1.9rem,4vw,2.8rem);
    font-weight:700;line-height:1.2;margin-bottom:18px;
    color: #ffffff;
}
.cinema-content p{color:#e2e8f0;font-size:1.08rem;margin-bottom:32px;line-height:1.75}

/* ===================================================
   IMPACT NUMBERS
   =================================================== */
.impact-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.impact-card{
    text-align:center;padding:40px 18px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-lg);transition:.4s var(--ease);
}
.impact-card:hover{transform:translateY(-4px);border-color:var(--border-h);box-shadow:var(--glow-amber)}
.impact-icon{font-size:2rem;margin-bottom:14px}
.impact-num{
    font-family:var(--font-m);font-size:2.4rem;font-weight:800;
    background:var(--grad);-webkit-background-clip:text;
    -webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px;
}
.impact-label{font-size:.88rem;color:var(--tx-2);font-weight:500}

/* ===================================================
   STORIES
   =================================================== */
.stories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.story-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-lg);padding:36px;transition:.5s var(--ease);
}
.story-card:hover{transform:translateY(-6px);border-color:var(--border-h)}
.story-stars{color:var(--amber);font-size:1.05rem;letter-spacing:4px;margin-bottom:18px}
.story-card blockquote{
    font-size:.93rem;color:var(--tx-2);line-height:1.82;
    margin-bottom:24px;font-style:italic;border:none;padding:0;
}
.story-author{display:flex;align-items:center;gap:14px}
.story-avatar{
    width:46px;height:46px;display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;background:rgba(247,183,80,0.06);
    border:1px solid var(--border);border-radius:50%;
}
.story-author strong{font-size:.92rem;display:block}
.story-author span{font-size:.78rem;color:var(--tx-3)}

/* ===================================================
   TEAM
   =================================================== */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.team-txt p{color:var(--tx-2);font-size:1.02rem;line-height:1.82;margin-bottom:28px}
.team-list{list-style:none;margin-bottom:32px}
.team-list li{
    display:flex;align-items:center;gap:12px;
    padding:9px 0;color:var(--tx-2);font-size:.94rem;
}
.chk{color:var(--amber);font-size:1rem}
.team-img{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border)}
.team-img img{width:100%;border-radius:var(--r-xl)}

/* ===================================================
   CTA / SIGNUP
   =================================================== */
.cta-section{overflow:hidden}
.cta-orbs{position:absolute;inset:0;overflow:hidden;z-index:0}
.corb{position:absolute;border-radius:50%;filter:blur(140px)}
.c1{width:500px;height:500px;background:radial-gradient(circle,rgba(247,183,80,0.03),transparent);top:-220px;left:-80px}
.c2{width:400px;height:400px;background:radial-gradient(circle,rgba(24,200,176,0.03),transparent);bottom:-200px;right:-100px}

.cta-box{position:relative;z-index:1;max-width:720px;margin:0 auto;text-align:center}
.cta-box .sec-desc{margin-bottom:36px}

.signup-form{display:flex;flex-direction:column;gap:14px;align-items:center}
.form-row{display:flex;gap:12px;width:100%}
.signup-form input,.signup-form select{
    flex:1;width:100%;padding:16px 20px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-md);color:var(--tx-1);
    font-family:var(--font-b);font-size:.94rem;
    outline:none;transition:.3s var(--ease);
}
.signup-form input::placeholder{color:var(--tx-3)}
.signup-form select{
    cursor:pointer;color:var(--tx-3);
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c5870' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;
}
.signup-form select option{background:var(--bg-card);color:var(--tx-1)}
.signup-form input:focus,.signup-form select:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(247,183,80,0.08)}

.form-note{font-size:.78rem;color:var(--tx-3);margin-top:6px}

.signup-success{display:none;padding:40px;text-align:center;animation:fadeInUp .6s ease}
.success-burst{font-size:3rem;margin-bottom:14px}
.signup-success h3{font-family:var(--font-h);font-size:1.4rem;margin-bottom:10px}
.signup-success p{color:var(--tx-2)}

/* ===================================================
   FOOTER
   =================================================== */
.footer{
    position:relative;z-index:2;padding:72px 0 0;
    background:var(--bg-deep);border-top:1px solid var(--border);
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;margin-bottom:56px}
.footer-desc{color:var(--tx-3);font-size:.88rem;line-height:1.7;margin-top:14px;max-width:300px}
.social-row{display:flex;gap:10px;margin-top:18px}
.soc{
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    background:var(--bg-card);border:1px solid var(--border);border-radius:50%;
    font-size:.85rem;font-weight:700;transition:.3s var(--ease);
}
.soc:hover{border-color:var(--amber);background:rgba(247,183,80,0.06);color:var(--amber);transform:translateY(-3px)}

.footer-col h5{font-family:var(--font-h);font-size:.85rem;font-weight:700;margin-bottom:18px}
.footer-col a{display:block;font-size:.86rem;color:var(--tx-3);padding:5px 0;transition:.2s var(--ease)}
.footer-col a:hover{color:var(--amber);transform:translateX(4px)}

.footer-bar{
    display:flex;justify-content:space-between;align-items:center;
    padding:22px 0;border-top:1px solid var(--border);
    font-size:.8rem;color:var(--tx-3);
}
.legal-links{display:flex;gap:22px}
.legal-links a{color:var(--tx-3)}
.legal-links a:hover{color:var(--amber)}

/* ===================================================
   ANIMATIONS
   =================================================== */
.fade-up{opacity:0;transform:translateY(32px);animation:fadeInUp .85s ease forwards}
.fade-up:nth-child(1){animation-delay:.15s}
.fade-up:nth-child(2){animation-delay:.3s}
.fade-up:nth-child(3){animation-delay:.45s}
.fade-up:nth-child(4){animation-delay:.6s}
.fade-up:nth-child(5){animation-delay:.75s}
.fade-up:nth-child(6){animation-delay:.9s}

@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}

.reveal,.reveal-l,.reveal-r{opacity:0;transition:opacity .85s ease,transform .85s ease}
.reveal{transform:translateY(48px)}
.reveal-l{transform:translateX(-48px)}
.reveal-r{transform:translateX(48px)}
.reveal.visible,.reveal-l.visible,.reveal-r.visible{opacity:1;transform:translate(0)}

/* ===================================================
   THEME TOGGLE & LIGHT THEME STYLING
   =================================================== */
.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.theme-toggle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tx-1);
    transition: all 0.3s var(--ease);
    padding: 0;
    outline: none;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--amber);
    color: var(--amber);
    transform: translateY(-2px);
}

.theme-toggle svg {
    transition: transform 0.5s var(--ease);
}

.theme-toggle:hover svg {
    transform: rotate(15deg);
}

.theme-toggle .sun-icon {
    display: block;
}

.theme-toggle .moon-icon {
    display: none;
}

/* ---------- LIGHT THEME OVERRIDES ---------- */
body.light-theme {
    --bg-deep: #f8fafc;
    --bg-base: #f1f5f9;
    --bg-raised: #e2e8f0;
    --bg-card: #ffffff;
    --bg-card-h: #f1f5f9;
    --bg-glass: rgba(255, 255, 255, 0.75);

    --tx-1: #0f172a;
    --tx-2: #334155;
    --tx-3: #64748b;

    --border: rgba(0, 0, 0, 0.06);
    --border-h: rgba(0, 0, 0, 0.12);

    --glow-amber: 0 10px 30px rgba(0, 0, 0, 0.04);
    --glow-teal: 0 10px 30px rgba(0, 0, 0, 0.04);
}

body.light-theme .theme-toggle {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .theme-toggle:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: var(--amber);
    color: var(--amber);
}

body.light-theme .theme-toggle .sun-icon {
    display: none;
}

body.light-theme .theme-toggle .moon-icon {
    display: block;
}

body.light-theme .nav.scrolled {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.light-theme .nav-menu {
    background: rgba(255, 255, 255, 0.98);
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .board-row {
    background: rgba(0, 0, 0, 0.03);
}

body.light-theme .xp-track {
    background: rgba(0, 0, 0, 0.05);
}

body.light-theme .hero-glow,
body.light-theme .journey-glow,
body.light-theme .cta-orbs {
    display: none;
}


/* ===================================================
   RESPONSIVE
   =================================================== */
@media(max-width:1024px){
    .hero-wrap{grid-template-columns:1fr;text-align:center}
    .hero-sub{max-width:100%}
    .hero-btns{justify-content:center}
    .hero-proof{justify-content:center}
    .hero-right{max-width:480px;margin:0 auto}

    .features-bento{grid-template-columns:1fr 1fr}
    .bento-lg{grid-column:span 2;grid-template-columns:1fr}
    .bento-visual{min-height:280px}
    .bento-visual img{border-radius:0 0 var(--r-lg) var(--r-lg)}

    .journey-grid,.neuro-grid,.team-grid{grid-template-columns:1fr;gap:44px}
    .neuro-wrap img{max-width:320px;margin:0 auto}
    .neuro-meters{justify-content:center}

    .sports-mosaic{grid-template-columns:repeat(2,1fr)}
    .steps-track{grid-template-columns:repeat(2,1fr);gap:16px}
    .step-line{display:none}
    .impact-row{grid-template-columns:repeat(2,1fr)}
    .stories-grid{grid-template-columns:1fr;max-width:600px;margin:0 auto}
    .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}

@media(max-width:768px){
    :root{--section-py:80px}
    .nav-inner{padding:0 16px}
    .brand-name{font-size:.9rem;letter-spacing:1.5px}
    .nav-right{position:relative;z-index:1002;gap:10px}
    .theme-toggle{position:relative;z-index:1002}
    .nav-menu{
        position:fixed;top:0;right:-100%;width:280px;height:100vh;
        background:rgba(5,5,7,.95);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
        flex-direction:column;padding:96px 28px 28px;gap:14px;
        transition:.5s var(--ease);border-left:1px solid var(--border);
        z-index:1000;
    }
    .nav-menu.open{right:0}
    .burger{display:flex}

    .features-bento{grid-template-columns:1fr}
    .bento-lg{grid-column:span 1}
    .sports-mosaic{grid-template-columns:1fr 1fr}
    .form-row{flex-direction:column}
    .footer-grid{grid-template-columns:1fr;gap:28px}
    .footer-bar{flex-direction:column;gap:14px;text-align:center}
    .hero-card{display:none}
    .hero-proof{display:none}
    .hero-h1{font-size:clamp(2rem,8vw,3rem)}
}

@media(max-width:480px){
    .container{padding:0 16px}
    .hero-btns{flex-direction:column;width:100%;align-items:stretch}
    .hero-btns .btn-glow, .hero-btns .btn-ghost{width:100%;justify-content:center}
    .jcard{flex-direction:column;align-items:flex-start;padding:20px;gap:14px}
    .badge-row{flex-wrap:wrap}
    .sports-mosaic{grid-template-columns:1fr}
    .impact-row{grid-template-columns:1fr}
    .steps-track{grid-template-columns:1fr}
    .hero-proof{flex-direction:column;gap:14px}
    .proof-divider{width:50px;height:1px}
    .neuro-meters{flex-direction:column;align-items:center}
}