:root{
  --bg:#0d0f12;--bg2:#12161b;--panel:#171b21;--panel2:#20262d;--gun:#2b323a;--olive:#66745d;--olive2:#4b5a45;--gold:#d4af67;--gold2:#c6a15b;--text:#e8eaed;--muted:#9aa4af;--muted2:#6f7a84;--line:rgba(212,175,103,.20);--success:#6faf73;--danger:#b85a5a;--warning:#d1a14a;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 18% 0,rgba(102,116,93,.18),transparent 32%),linear-gradient(135deg,#08090b,#11161b 42%,#0d0f12);min-height:100vh;color:var(--text)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;background-image:linear-gradient(45deg,rgba(255,255,255,.10) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.10) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.10) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.10) 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
a{color:inherit}.navbar-glass{background:rgba(13,15,18,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.brand-badge{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#1d2228,#3a424b);border:1px solid rgba(212,175,103,.45);display:grid;place-items:center;color:var(--gold);font-family:Rajdhani,sans-serif;font-weight:800;box-shadow:inset 0 0 20px rgba(212,175,103,.08),0 12px 30px rgba(0,0,0,.35)}
.hero{padding:90px 0 55px;color:white}.hero h1,.tactical-hero h1{font-size:clamp(2.35rem,5vw,4.9rem);font-weight:900;letter-spacing:-.055em;line-height:.93}.hero p,.tactical-hero p{color:#b8c0c8;font-size:1.08rem}.gradient-text{background:linear-gradient(135deg,var(--gold),#f2d494,#8d9b80);-webkit-background-clip:text;background-clip:text;color:transparent}.app-card,.hud-card,.soft-card{background:linear-gradient(180deg,rgba(32,38,45,.96),rgba(18,22,27,.96));border:1px solid var(--line);border-radius:26px;box-shadow:0 24px 80px rgba(0,0,0,.42);color:var(--text);position:relative;overflow:hidden}.app-card:before,.hud-card:before,.mode-card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(212,175,103,.18),transparent 22%,transparent 78%,rgba(102,116,93,.16))}.soft-card{padding:1.25rem}.btn-main{background:linear-gradient(135deg,#2f382f,var(--olive),var(--gold2));color:#111;border:0;border-radius:999px;font-weight:900;padding:.86rem 1.22rem;box-shadow:0 14px 35px rgba(0,0,0,.38);text-transform:uppercase;letter-spacing:.04em}.btn-main:hover{color:#000;transform:translateY(-1px);filter:brightness(1.08)}.btn-ghost{border-radius:999px;border:1px solid rgba(212,175,103,.34);color:var(--text);background:rgba(255,255,255,.035);font-weight:800;padding:.82rem 1.15rem;text-transform:uppercase;letter-spacing:.04em}.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}.pill{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.38rem .78rem;background:rgba(212,175,103,.11);border:1px solid rgba(212,175,103,.24);color:var(--gold);font-weight:900;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}.muted,.small-note{color:var(--muted)!important}.premium-lock{background:rgba(212,175,103,.08);border:1px solid rgba(212,175,103,.24);border-radius:22px;padding:1rem;color:var(--text)}.footer{color:#94a3b8;padding:40px 0}.login-box{max-width:520px;margin:70px auto}.form-control{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff}.form-control:focus{background:rgba(255,255,255,.08);border-color:var(--gold);color:#fff;box-shadow:0 0 0 .25rem rgba(212,175,103,.12)}.form-control::placeholder{color:rgba(255,255,255,.45)}
.answer-btn{width:100%;text-align:left;padding:1rem 1.1rem;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);margin:.42rem 0;transition:.15s;color:var(--text)}.answer-btn:hover{border-color:rgba(212,175,103,.62);transform:translateY(-1px);background:rgba(212,175,103,.08)}.answer-btn.correct{background:rgba(111,175,115,.18);border-color:rgba(111,175,115,.80)}.answer-btn.wrong{background:rgba(184,90,90,.18);border-color:rgba(184,90,90,.80)}.answer-btn:disabled{opacity:1}.alert{border-radius:18px;border:1px solid rgba(255,255,255,.12)}.alert-success{background:rgba(111,175,115,.14);color:#dff3e0}.alert-danger{background:rgba(184,90,90,.14);color:#f2dddd}.alert-warning{background:rgba(209,161,74,.13);color:#f6e5c2}.ai-box{border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(212,175,103,.20);padding:1rem;white-space:pre-wrap;color:var(--text)}.question-image-box{margin:14px 0 18px}.question-image{max-width:100%;border-radius:18px;border:1px solid rgba(212,175,103,.18);box-shadow:0 12px 35px rgba(0,0,0,.28);background:#fff;cursor:zoom-in;display:block}@media (min-width:768px){.question-image{max-height:420px;object-fit:contain}}
/* Premium app */
.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.tactical-sidebar{position:sticky;top:0;height:100vh;padding:22px;background:rgba(10,12,15,.74);border-right:1px solid var(--line);backdrop-filter:blur(20px);display:flex;flex-direction:column;gap:26px}.tactical-brand{display:flex;align-items:center;gap:12px;text-decoration:none}.tactical-brand strong{display:block;font-family:Rajdhani,sans-serif;text-transform:uppercase;letter-spacing:.07em;font-size:1.15rem}.tactical-brand small{display:block;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em}.side-nav{display:grid;gap:8px}.side-nav a{padding:12px 14px;border-radius:16px;color:var(--muted);text-decoration:none;font-weight:800;text-transform:uppercase;font-size:.82rem;letter-spacing:.08em;border:1px solid transparent}.side-nav a:hover,.side-nav a.active{color:var(--gold);background:rgba(212,175,103,.08);border-color:rgba(212,175,103,.18)}.sidebar-user{margin-top:auto;display:flex;gap:10px;align-items:center;padding:13px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);min-width:0}.sidebar-user small{display:block;color:var(--muted);text-transform:uppercase;font-size:.68rem}.sidebar-user strong{display:block;font-size:.78rem;word-break:break-all}.status-dot{width:10px;height:10px;border-radius:99px;background:var(--success);box-shadow:0 0 18px var(--success)}.app-main{padding:26px;max-width:1440px;width:100%;margin:0 auto}.mobile-topbar,.mobile-bottom-nav{display:none}.tactical-hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:stretch;margin-bottom:22px}.tactical-label{display:inline-block;color:var(--gold);font-weight:900;font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;margin-bottom:12px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.readiness-card{display:grid;place-items:center;text-align:center;padding:28px}.progress-ring{--value:0;width:168px;height:168px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;background:conic-gradient(var(--gold) calc(var(--value)*1%),rgba(255,255,255,.09) 0);position:relative}.progress-ring:after{content:"";position:absolute;inset:13px;border-radius:50%;background:linear-gradient(180deg,#151a20,#0d0f12);border:1px solid rgba(255,255,255,.08)}.progress-ring span{position:relative;z-index:1;font-family:Rajdhani,sans-serif;font-size:2.2rem;font-weight:800;color:var(--text)}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.mode-card{text-align:left;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(32,38,45,.9),rgba(18,22,27,.9));border-radius:24px;color:var(--text);padding:22px;position:relative;overflow:hidden;transition:.15s}.mode-card:hover,.mode-card.active{transform:translateY(-2px);border-color:rgba(212,175,103,.46);box-shadow:0 18px 50px rgba(0,0,0,.28)}.mode-card strong{display:block;font-size:1.3rem}.mode-card small{display:block;color:var(--muted);margin-top:5px}.mode-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:rgba(212,175,103,.10);border:1px solid rgba(212,175,103,.22);margin-bottom:12px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.stat-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:18px}.stat-panel small{display:block;color:var(--gold);font-weight:900;letter-spacing:.14em}.stat-panel strong{display:block;font-family:Rajdhani,sans-serif;font-size:2rem}.stat-panel span{color:var(--muted);font-size:.86rem}.quiz-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px}.question-card{padding:22px}.question-topline{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.timer-chip,.mini-status{border:1px solid rgba(212,175,103,.24);background:rgba(212,175,103,.08);color:var(--gold);border-radius:999px;padding:.38rem .8rem;font-weight:900;font-size:.78rem;letter-spacing:.08em}.tracking{letter-spacing:.08em;color:var(--muted);font-size:.84rem}.tactical-progress{height:10px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}.tactical-progress .progress-bar{background:linear-gradient(90deg,var(--olive),var(--gold));box-shadow:0 0 22px rgba(212,175,103,.28)}.side-panel{padding:20px}.panel-title span{display:block;color:var(--gold);font-size:.75rem;font-weight:900;letter-spacing:.14em}.panel-title strong{font-size:1.3rem}.achievement-list{display:grid;gap:10px;margin-top:14px}.achievement{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);opacity:.48;filter:saturate(.3)}.achievement.unlocked{opacity:1;filter:none;border-color:rgba(212,175,103,.34);background:rgba(212,175,103,.08)}.achievement>span{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#252c33,#111);border:1px solid rgba(212,175,103,.28);color:var(--gold)}.achievement strong{display:block}.achievement small{color:var(--muted)}.logout-link{color:var(--muted);text-decoration:none}.logout-link:hover{color:var(--gold)}.fw-black{font-weight:900}.text-center .display-4{filter:drop-shadow(0 10px 30px rgba(212,175,103,.25))}
.thank-hero{min-height:calc(100vh - 72px);display:flex;align-items:center}.thank-hero .step-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:1.2rem}.thank-hero .step-number{width:42px;height:42px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold),#f2d494);color:#111827;font-weight:900;margin-bottom:.8rem}
@media(max-width:1050px){.app-shell{display:block}.tactical-sidebar{display:none}.app-main{padding:18px 14px 82px}.mobile-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.tactical-hero,.quiz-layout{grid-template-columns:1fr}.readiness-card{min-height:300px}.stats-grid{grid-template-columns:repeat(2,1fr)}.mobile-bottom-nav{position:fixed;display:flex;left:12px;right:12px;bottom:12px;z-index:20;background:rgba(13,15,18,.88);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:22px;padding:8px;justify-content:space-around}.mobile-bottom-nav a{font-size:.78rem;color:var(--muted);text-decoration:none;font-weight:900;text-transform:uppercase}.mobile-bottom-nav a:hover{color:var(--gold)}}@media(max-width:680px){.hero{padding:55px 0 35px}.hero h1,.tactical-hero h1{font-size:2.45rem}.mode-grid,.stats-grid{grid-template-columns:1fr}.question-card{padding:16px}.btn-main,.btn-ghost{width:100%}.hero-actions{display:grid}.question-topline{display:grid}.timer-chip{width:max-content}}

/* Landing page upgrade */
.landing-hero{padding:78px 0 36px;overflow:hidden}.landing-dashboard-stack{position:relative;min-height:440px}.dash-shot{display:block;width:100%;border-radius:26px;border:1px solid rgba(212,175,103,.24);box-shadow:0 28px 90px rgba(0,0,0,.56);background:#111}.dash-shot-main{position:relative;z-index:2;transform:perspective(1200px) rotateY(-7deg) rotateX(2deg)}.dash-shot-float{position:absolute;width:54%;z-index:3}.dash-shot-a{right:-4%;bottom:10%;transform:rotate(2deg)}.dash-shot-b{left:-7%;bottom:-3%;transform:rotate(-3deg)}.landing-proof{display:flex;flex-wrap:wrap;gap:10px}.landing-proof span{border:1px solid rgba(212,175,103,.22);background:rgba(212,175,103,.08);border-radius:999px;padding:.55rem .85rem;color:#d7dde4;font-weight:800;font-size:.9rem}.landing-section{padding:62px 0}.section-head{max-width:780px}.section-head h2{font-size:clamp(2rem,4vw,3.8rem);font-weight:900;letter-spacing:-.045em;line-height:.98}.section-head p{color:var(--muted);font-size:1.08rem}.benefit-card{height:100%;padding:24px;border-radius:26px;background:linear-gradient(180deg,rgba(32,38,45,.9),rgba(18,22,27,.9));border:1px solid rgba(212,175,103,.18);box-shadow:0 20px 60px rgba(0,0,0,.28)}.benefit-card>span{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:rgba(212,175,103,.11);border:1px solid rgba(212,175,103,.24);margin-bottom:16px}.benefit-card h3{font-weight:900;font-size:1.35rem}.benefit-card p{color:var(--muted);margin:0}.showcase-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px;align-items:stretch}.showcase-grid img{width:100%;height:100%;object-fit:cover;border-radius:24px;border:1px solid rgba(212,175,103,.18);box-shadow:0 18px 55px rgba(0,0,0,.36);background:#111}.showcase-grid img:first-child{grid-row:span 2}.side-nav a{cursor:pointer}.side-nav a.active{box-shadow:inset 0 0 0 1px rgba(212,175,103,.10)}
@media(max-width:992px){.landing-dashboard-stack{min-height:auto}.dash-shot-main{transform:none}.dash-shot-float{display:none}.showcase-grid{grid-template-columns:1fr}.showcase-grid img:first-child{grid-row:auto}.landing-hero{padding-top:44px}}


.marketing-showcase{margin:40px 0 30px}
.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px}
.showcase-grid img{width:100%;border-radius:24px;border:1px solid rgba(212,175,103,.2);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.marketing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.marketing-card{padding:24px}
.xp-preview{display:flex;gap:14px;margin-top:18px}
.xp-preview div{background:rgba(255,255,255,.03);padding:12px 14px;border-radius:14px;border:1px solid rgba(212,175,103,.12)}
.xp-preview small{display:block;color:#9ea7b3}
.mission-list{padding-left:18px;color:#dce1e7}
.mission-list li{margin-bottom:10px}

@media(max-width:1000px){
.showcase-grid,.marketing-grid{grid-template-columns:1fr}
}

/* Premium Lite preview */
.lite-app .status-dot{background:var(--gold);box-shadow:0 0 18px rgba(212,175,103,.55)}
.lite-upsell,.lite-preview-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px;border-color:rgba(212,175,103,.24)}
.lite-upsell h3,.lite-preview-card h3{font-weight:900;margin:0 0 6px}.lite-upsell p,.lite-preview-card p{color:var(--muted);margin:0}.lite-app .achievement:not(.unlocked)::after{content:"LOCKED";margin-left:auto;color:var(--gold);font-size:.68rem;font-weight:900;letter-spacing:.12em;opacity:.8}.lite-app .tactical-sidebar:before{content:"LITE";position:absolute;right:18px;top:18px;color:#111;background:var(--gold);border-radius:999px;padding:.18rem .55rem;font-size:.68rem;font-weight:900;letter-spacing:.1em}.lite-preview-card{background:linear-gradient(135deg,rgba(212,175,103,.10),rgba(255,255,255,.035));border-radius:26px;box-shadow:0 22px 70px rgba(0,0,0,.28)}
@media(max-width:780px){.lite-upsell,.lite-preview-card{display:grid}.lite-upsell .btn,.lite-preview-card .btn{width:100%}}


.footer-premium{
    background:#0f1318;
    border-top:1px solid rgba(255,255,255,0.08);
    color:#c7d0d9;
}

.footer-title{
    color:#d4af67;
    font-weight:700;
    margin-bottom:18px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.footer-text{
    color:#9aa6b2;
    line-height:1.7;
}

.footer-small{
    color:#6f7a84;
    font-size:0.9rem;
}

.footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-links li{
    margin-bottom:10px;
}

.footer-links a{
    color:#b7c1cb;
    text-decoration:none;
    transition:0.2s;
}

.footer-links a:hover{
    color:#d4af67;
}

.footer-company{
    color:#8d99a5;
    line-height:1.7;
    font-size:0.95rem;
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.nav-top-buttons{
    display:flex;
    gap:10px;
}

@media(max-width:768px){

    .navbar .container{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .nav-actions{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .nav-top-buttons{
        width:100%;
    }

    .nav-top-buttons a{
        flex:1;
    }

    .premium-btn{
        width:100%;
        justify-content:center;
        font-weight:700;
    }
}

@media(max-width:768px){

    .navbar{
        position:relative !important;
        top:auto !important;
    }

}