:root{
    --home-bg:#071b2d;
    --home-bg-2:#0a263d;
    --home-panel:rgba(20,55,78,.76);
    --home-panel-strong:#12344d;
    --home-line:rgba(129,190,215,.20);
    --home-text:#f4f8fb;
    --home-muted:#9fb5c6;
    --home-cyan:#39d4ff;
    --home-teal:#32d6b4;
    --home-orange:#ff9b42;
    --home-green:#65e6a5;
}

html{background:var(--home-bg)}
body{
    color:var(--home-text);
    background:
        radial-gradient(circle at 12% 12%,rgba(34,187,222,.12),transparent 30rem),
        radial-gradient(circle at 84% 15%,rgba(255,147,66,.09),transparent 28rem),
        radial-gradient(circle at 48% 72%,rgba(36,178,187,.08),transparent 34rem),
        linear-gradient(180deg,#06192a 0%,#082139 38%,#071b2d 100%) !important;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-3;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(84,168,202,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(84,168,202,.055) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.85) 62%,transparent 100%);
}

.home-grid-bg{
    opacity:.28 !important;
    background-size:84px 84px !important;
    background-image:
        linear-gradient(rgba(71,185,220,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(71,185,220,.055) 1px,transparent 1px) !important;
}

.home-header{
    background:rgba(5,23,38,.88) !important;
    border-bottom:1px solid rgba(103,188,219,.16) !important;
    box-shadow:0 12px 32px rgba(0,0,0,.18) !important;
}
.home-nav a,.home-auth-link{color:#c4d8e5 !important}
.home-nav a:hover,.home-auth-link:hover,
.home-nav a:first-child{
    color:#fff !important;
    background:rgba(57,212,255,.10) !important;
    box-shadow:inset 0 0 0 1px rgba(57,212,255,.16);
}
.home-auth-btn{
    color:#eaffff !important;
    background:linear-gradient(135deg,rgba(28,113,139,.62),rgba(20,76,100,.58)) !important;
    border-color:rgba(80,220,232,.38) !important;
}

/* HERO */
.hero{
    isolation:isolate;
    background:
        linear-gradient(180deg,rgba(5,24,40,.22),rgba(5,24,40,.03)),
        radial-gradient(circle at 69% 48%,rgba(26,188,207,.11),transparent 28rem) !important;
    border-bottom:1px solid rgba(103,188,219,.12);
}
.hero::before{
    width:560px !important;
    height:560px !important;
    left:-11% !important;
    top:4% !important;
    background:radial-gradient(circle,rgba(29,175,214,.16),transparent 68%) !important;
}
.hero::after{
    content:"";
    position:absolute;
    z-index:-1;
    width:420px;
    height:420px;
    right:-9%;
    top:11%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,145,61,.10),transparent 70%);
    filter:blur(12px);
    pointer-events:none;
}
.hero-kicker,.section-kicker{color:#62def3 !important}
.hero h1{color:#f7fbff !important;text-shadow:0 7px 30px rgba(0,0,0,.15)}
.hero h1 em{
    background:linear-gradient(100deg,#46aaff 0%,#39d4ff 50%,#32d6b4 94%) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
}
.hero-lead{color:#a9bfce !important}
.hero-points{color:#91aabd !important}
.hero-points i{background:var(--home-teal) !important;box-shadow:0 0 0 4px rgba(50,214,180,.10),0 0 15px rgba(50,214,180,.26) !important}
.btn-primary{
    color:#061a2a !important;
    background:linear-gradient(135deg,#4ad7ff,#31cfb3) !important;
    box-shadow:0 14px 30px rgba(42,205,218,.19) !important;
}
.btn-primary:hover{box-shadow:0 19px 38px rgba(42,205,218,.30) !important}
.btn-ghost{
    color:#e4f3f8 !important;
    border-color:rgba(154,202,222,.20) !important;
    background:rgba(20,55,78,.58) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 24px rgba(0,0,0,.12) !important;
}
.btn-ghost:hover{border-color:rgba(57,212,255,.44) !important;background:rgba(27,68,94,.76) !important}
.hero-stage-glow{
    background:radial-gradient(circle,rgba(40,205,218,.24),rgba(24,107,149,.09) 43%,transparent 71%) !important;
}
.hero-console{
    border-color:rgba(117,190,215,.28) !important;
    background:linear-gradient(145deg,#123650,#061c2f 62%,#0c2a41) !important;
    box-shadow:0 45px 90px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08),0 0 65px rgba(19,184,203,.07) !important;
    cursor:pointer;
}
.float-chip{
    border-color:rgba(133,213,235,.24) !important;
    color:#e9f9fd !important;
    background:rgba(10,42,62,.82) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.24),0 0 22px rgba(57,212,255,.06) !important;
}
.hero-carousel-nav{
    border-color:rgba(111,190,215,.22) !important;
    background:rgba(8,34,51,.82) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.25) !important;
}
.hero-carousel-arrow{color:#bfe6f3 !important;background:#12364d !important}
.hero-carousel-arrow:hover{color:#061a2a !important;background:#39d4ff !important}
.hero-carousel-dot{background:#54758a !important}
.hero-carousel-dot.is-active{background:linear-gradient(90deg,#39d4ff,#32d6b4) !important}

/* COMMON SECTIONS */
.section{position:relative}
.section-heading h2{color:#f5f9fc !important}
.section-heading p{color:var(--home-muted) !important}
.section-all{color:#64ddec !important}

/* TRAINERS */
.trainers-section{
    background:
        radial-gradient(circle at 50% 0%,rgba(41,188,209,.08),transparent 29rem),
        rgba(5,27,44,.22) !important;
    border-top:0 !important;
    border-bottom:1px solid rgba(103,188,219,.11) !important;
}
.trainer-card{
    position:relative;
    color:var(--home-text) !important;
    border-color:rgba(125,183,207,.20) !important;
    background:linear-gradient(155deg,rgba(26,65,91,.86),rgba(14,45,67,.86)) !important;
    box-shadow:0 18px 45px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.trainer-card::before{
    content:"";
    position:absolute;
    z-index:3;
    left:0;right:0;top:0;
    height:3px;
    opacity:.78;
    background:linear-gradient(90deg,#39d4ff,transparent 72%);
}
.trainer-card:nth-child(2)::before{background:linear-gradient(90deg,#32d6b4,transparent 72%)}
.trainer-card:nth-child(3)::before{background:linear-gradient(90deg,#ff9b42,transparent 72%)}
.trainer-card:nth-child(4)::before{background:linear-gradient(90deg,#62aaff,transparent 72%)}
.trainer-card:nth-child(5)::before{background:linear-gradient(90deg,#65e6a5,transparent 72%)}
.trainer-card:nth-child(6)::before{background:linear-gradient(90deg,#ffc45a,transparent 72%)}
.trainer-card:hover{
    border-color:rgba(74,208,234,.44) !important;
    box-shadow:0 28px 65px rgba(0,0,0,.28),0 0 34px rgba(57,212,255,.06) !important;
}
.trainer-visual{border-bottom-color:rgba(133,188,211,.14) !important;background:linear-gradient(145deg,#0d314b,#061d30) !important}
.trainer-content h3{color:#f5f9fc !important}
.trainer-content p{color:#9eb4c4 !important}
.trainer-eyebrow{color:#5ed7eb !important}
.trainer-action{color:#65e3ef !important}
.visual-live{background:rgba(5,30,44,.80) !important}

/* PRACTICE -> THEORY FLOW */
.learning-flow{
    padding:62px clamp(22px,6vw,96px) 74px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid rgba(103,188,219,.10);
    background:rgba(4,24,39,.24);
}
.learning-flow::before{
    content:"";
    position:absolute;
    left:12%;right:12%;top:58%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(57,212,255,.26),rgba(50,214,180,.30),rgba(255,155,66,.24),transparent);
    box-shadow:0 0 18px rgba(57,212,255,.15);
}
.flow-inner{max-width:1500px;margin:0 auto;position:relative;z-index:1}
.flow-heading{text-align:center;margin:0 auto 34px;max-width:820px}
.flow-heading span{color:#62def3;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em}
.flow-heading h2{margin:7px 0 8px;color:#f5f9fc;font-size:clamp(1.8rem,3vw,3rem);line-height:1.04}
.flow-heading p{margin:0;color:#90aabd}
.flow-track{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.flow-step{
    min-height:150px;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:22px 22px 22px 64px;
    border:1px solid rgba(125,183,207,.18);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(25,65,91,.68),rgba(13,44,65,.65));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 15px 35px rgba(0,0,0,.14);
}
.flow-step::after{
    content:"→";
    position:absolute;
    right:-20px;
    top:50%;
    z-index:5;
    transform:translateY(-50%);
    color:#54cfe5;
    font-size:1.5rem;
    text-shadow:0 0 14px rgba(57,212,255,.45);
}
.flow-step:last-child::after{display:none}
.flow-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:1px solid rgba(57,212,255,.32);color:#72e6f5;background:rgba(13,108,139,.22);font-weight:900}
.flow-step:nth-child(2) .flow-icon{color:#8aeccf;border-color:rgba(50,214,180,.30);background:rgba(27,111,91,.20)}
.flow-step:nth-child(3) .flow-icon{color:#ffd08b;border-color:rgba(255,155,66,.33);background:rgba(142,77,23,.21)}
.flow-step:nth-child(4) .flow-icon{color:#91efb9;border-color:rgba(101,230,165,.31);background:rgba(27,113,73,.20)}
.flow-step small{color:#66869b;font-size:.64rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.flow-step strong{margin-top:4px;color:#eef7fb;font-size:1.02rem}
.flow-step span{margin-top:6px;color:#8fa9ba;font-size:.82rem}

/* ROUTE */
.route-section{
    background:
        radial-gradient(circle at 90% 10%,rgba(50,214,180,.08),transparent 26rem),
        linear-gradient(180deg,rgba(7,29,48,.18),rgba(9,38,61,.28)) !important;
    border-bottom:1px solid rgba(103,188,219,.11);
}
.route-section::before{opacity:.24 !important;background-size:48px 48px !important}
.route-card{
    border-color:rgba(142,197,219,.20) !important;
    background:linear-gradient(145deg,rgba(29,68,94,.78),rgba(18,53,77,.72)) !important;
    box-shadow:0 17px 42px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.035);
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease !important;
}
.route-card:hover{transform:translateY(-5px);border-color:rgba(80,211,233,.45) !important;box-shadow:0 28px 58px rgba(0,0,0,.24),0 0 32px rgba(57,212,255,.05)}
.route-card h3{color:#f4f9fc !important}
.route-card p{color:#9fb4c3 !important}
.route-num{color:rgba(155,195,214,.20) !important}

/* CTA */
.home-cta{
    background:
        radial-gradient(circle at 18% 50%,rgba(57,212,255,.10),transparent 27rem),
        radial-gradient(circle at 85% 40%,rgba(50,214,180,.07),transparent 24rem),
        rgba(5,24,39,.28) !important;
}
.home-cta-inner{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(122,191,216,.22) !important;
    background:linear-gradient(145deg,rgba(27,68,94,.80),rgba(11,42,64,.80)) !important;
    box-shadow:0 24px 65px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.home-cta-inner::after{
    content:"";
    position:absolute;
    width:260px;height:260px;right:-70px;top:-90px;border-radius:50%;
    background:radial-gradient(circle,rgba(57,212,255,.14),transparent 68%);
    pointer-events:none;
}
.home-cta-inner h2{color:#f6fbfd !important}
.home-cta-inner p{color:#9eb5c5 !important}

/* FOOTER */
.home-footer{
    color:#d9e9f1 !important;
    background:#051725 !important;
    border-top:1px solid rgba(103,188,219,.13) !important;
}
.home-footer p{color:#7895a8 !important}
.home-footer a{color:#b8cfdd !important}
.home-footer a:hover{color:#65ddec !important}

/* MOBILE MENU */
.home-menu-toggle{
    display:none;
    width:42px;height:42px;
    place-items:center;
    padding:0;
    border:1px solid rgba(98,222,243,.25);
    border-radius:11px;
    color:#dff8fb;
    background:rgba(18,66,88,.64);
    cursor:pointer;
}
.home-menu-toggle span,.home-menu-toggle::before,.home-menu-toggle::after{
    content:"";
    display:block;
    width:19px;
    height:2px;
    border-radius:99px;
    background:currentColor;
    transition:.2s ease;
}
.home-menu-toggle{gap:4px}
.home-menu-toggle.is-open span{opacity:0}
.home-menu-toggle.is-open::before{transform:translateY(6px) rotate(45deg)}
.home-menu-toggle.is-open::after{transform:translateY(-6px) rotate(-45deg)}
.home-mobile-menu{
    display:none;
    position:fixed;
    z-index:99;
    top:64px;
    left:10px;right:10px;
    padding:12px;
    border:1px solid rgba(111,194,219,.20);
    border-radius:16px;
    background:rgba(6,27,43,.96);
    box-shadow:0 24px 70px rgba(0,0,0,.42);
    backdrop-filter:blur(18px);
}
.home-mobile-menu.is-open{display:block;animation:homeMenuIn .18s ease-out}
.home-mobile-menu a{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:10px 12px;border-radius:10px;color:#d5e8f2;text-decoration:none;font-weight:780}
.home-mobile-menu a:hover{color:#fff;background:rgba(57,212,255,.09)}
.home-mobile-menu .mobile-menu-divider{height:1px;margin:8px 4px;background:rgba(120,183,207,.16)}
.home-mobile-menu .mobile-student{color:#77e4ef}
.home-mobile-menu .mobile-teacher{color:#8eebc6}

/* CLICK HINT */
.hero-scroll-hint{
    position:fixed;
    z-index:500;
    left:50%;
    bottom:22px;
    width:min(520px,calc(100vw - 28px));
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border:1px solid rgba(97,211,235,.28);
    border-radius:16px;
    color:#eaf8fc;
    background:rgba(6,31,48,.94);
    box-shadow:0 22px 60px rgba(0,0,0,.36),0 0 30px rgba(57,212,255,.06);
    backdrop-filter:blur(16px);
    opacity:0;
    transform:translate(-50%,18px);
    pointer-events:none;
    transition:.25s ease;
}
.hero-scroll-hint.is-visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.scroll-mouse{flex:0 0 auto;width:27px;height:41px;border:2px solid #6ddceb;border-radius:16px;position:relative}
.scroll-mouse::before{content:"";position:absolute;left:50%;top:7px;width:3px;height:8px;border-radius:5px;background:#ff9b42;transform:translateX(-50%);animation:homeWheel 1.1s ease-in-out infinite}
.scroll-hint-copy{flex:1;min-width:0}.scroll-hint-copy strong{display:block;color:#fff;font-size:.9rem}.scroll-hint-copy span{display:block;margin-top:2px;color:#93afc0;font-size:.78rem;line-height:1.35}
.scroll-hint-arrow{color:#55dae8;font-size:1.4rem;animation:homeArrow 1.1s ease-in-out infinite}
.scroll-hint-close{width:30px;height:30px;border:0;border-radius:50%;color:#9bb7c7;background:rgba(255,255,255,.06);cursor:pointer}

@keyframes homeMenuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes homeWheel{0%,100%{opacity:.25;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,8px)}}
@keyframes homeArrow{0%,100%{transform:translateY(-2px)}50%{transform:translateY(5px)}}

@media(max-width:1180px){
    .home-menu-toggle{display:grid}
    .home-auth{display:none !important}
    .home-header{grid-template-columns:auto 1fr auto !important}
    .home-menu-toggle{grid-column:3}
    .flow-track{grid-template-columns:1fr 1fr}
    .flow-step:nth-child(2)::after{display:none}
}

@media(max-width:760px){
    .home-header{grid-template-columns:1fr auto !important;padding:0 14px !important}
    .home-menu-toggle{grid-column:2}
    .hero{padding-top:48px !important;background:radial-gradient(circle at 50% 25%,rgba(37,187,210,.09),transparent 24rem) !important}
    .hero h1{font-size:clamp(2.6rem,13vw,4.5rem) !important}
    .btn-primary{color:#061a2a !important}
    .flow-track{grid-template-columns:1fr}
    .learning-flow::before{display:none}
    .flow-step::after{content:"↓";display:block !important;right:auto;left:50%;top:auto;bottom:-25px;transform:translateX(-50%)}
    .flow-step:last-child::after{display:none !important}
    .learning-flow{padding:50px 16px 58px}
    .route-card,.trainer-card{border-radius:17px !important}
}

@media(max-width:430px){
    .home-brand > span:not(.home-brand-mark){display:inline !important;font-size:.74rem}
    .home-brand-mark{width:31px !important;height:31px !important}
    .home-menu-toggle{width:38px;height:38px}
    .hero-scroll-hint{bottom:12px;padding:12px}
    .scroll-hint-copy strong{font-size:.82rem}.scroll-hint-copy span{font-size:.72rem}
}

@media(prefers-reduced-motion:reduce){
    .hero-scroll-hint,.home-mobile-menu{transition:none!important;animation:none!important}
    .scroll-mouse::before,.scroll-hint-arrow{animation:none!important}
}