:root{--color-primary:#38bdf8;--primary-glow:rgba(56,189,248,0.4);--color-secondary:#0ea5e9;--color-accent:#22d3ee;--accent-glow:rgba(34,211,238,0.3);--bg-from:#0c1929;--bg-via:#0f2847;--bg-to:#020617;--card-bg:rgba(15,40,71,0.6);--card-border:rgba(56,189,248,0.2);--radius:6px;--radius-sm:4px;--radius-md:8px;--shadow-none:0 0 0 0 transparent;--transition:0.2s ease-in-out}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Work Sans,system-ui,sans-serif;background:linear-gradient(120deg,var(--bg-from),var(--bg-via),var(--bg-to));color:#e6f1ff;min-height:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.mono{font-family:"JetBrains Mono",monospace}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(2,6,23,0.5);backdrop-filter:blur(10px);border-bottom:1px solid rgba(56,189,248,0.15)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;color:#e6f1ff;text-decoration:none}
.logo-text{font-family:Outfit,system-ui,sans-serif;font-weight:700;letter-spacing:0.2px}
.nav{display:none;gap:22px}
.nav a{color:#c8e7ff;text-decoration:none;font-weight:500;transition:color var(--transition)}
.nav a:hover,.nav a.active{color:var(--color-primary)}
.nav-right{display:flex;align-items:center;gap:12px}
.badge-18{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--color-primary);color:var(--color-primary);font-family:"JetBrains Mono",monospace;padding:2px 6px;border-radius:var(--radius-sm);font-weight:700}
.badge-18.large{font-size:14px;padding:4px 8px}
.badge-18.xlarge{font-size:18px;padding:6px 10px}
.hamburger{display:inline-flex;flex-direction:column;gap:4px;background:transparent;border:1.5px solid var(--color-primary);padding:8px;border-radius:4px;cursor:pointer;transition:transform var(--transition)}
.hamburger:hover{transform:scale(1.01)}
.hamburger span{width:20px;height:2px;background:var(--color-primary)}
@media(min-width:768px){.nav{display:flex}.hamburger{display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border:2px solid var(--color-primary);color:#0b1626;background:transparent;cursor:pointer;transition:all var(--transition);text-decoration:none;font-weight:700;border-radius:4px}
.btn:hover{transform:scale(1.01)}
.btn-primary{background:var(--color-primary);color:#06121f}
.btn-primary:hover{background:var(--color-secondary);border-color:var(--color-secondary)}
.btn-secondary{background:transparent;color:var(--color-primary)}
.btn-secondary:hover{background:rgba(56,189,248,0.1)}
.btn-ghost{background:transparent;color:var(--color-accent);border-color:var(--color-accent)}
.btn-ghost:hover{background:rgba(34,211,238,0.1)}

/* Hero */
.hero{position:relative;padding:40px 0 30px}
.hero .hero-grid{display:grid;gap:28px;align-items:center}
.hero-copy h1{font-family:Outfit,system-ui,sans-serif;font-weight:700;font-size:40px;margin:8px 0}
.hero-copy p{color:#cfe7ff;max-width:640px}
.hero-ctas{display:flex;gap:12px;margin:18px 0 14px}
.hero-points{display:grid;gap:8px;padding:0;margin:12px 0 0;list-style:none;color:#cfe7ff}
.hero-media{position:relative}
.media-image{width:100%;height:340px;border:1px solid var(--card-border);border-left:4px solid var(--color-primary);border-radius:6px;background:linear-gradient(180deg,rgba(2,6,23,0.3),rgba(2,6,23,0.6)),url('/assets/img/ban.jpg') center/cover no-repeat}
.media-stats{position:absolute;bottom:-14px;left:12px;right:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:var(--card-bg);border:1px solid var(--card-border);border-left:4px solid var(--color-accent);padding:10px;border-radius:6px}
.stat .kicker{font-size:12px;color:#9fdcff}
.stat strong{display:block;margin:4px 0}
.hero-bg{position:absolute;inset:0;background:radial-gradient(800px 300px at 20% 10%,rgba(56,189,248,0.15),transparent),radial-gradient(800px 300px at 80% 80%,rgba(34,211,238,0.12),transparent);z-index:-1}
@media(min-width:1024px){.hero{padding:60px 0}.hero .hero-grid{grid-template-columns:1.05fr 1fr}.hero-copy h1{font-size:56px}.media-image{height:480px}}

/* Sections */
.section-head h2{font-family:Outfit,system-ui,sans-serif;margin:0 0 6px}
.section-head p{margin:0;color:#cfe7ff}
section{padding:64px 0}

/* Download */
.download .email-form{display:flex;gap:10px;flex-wrap:wrap}
.email-form input{flex:1;min-width:240px;background:#071221;color:#dff5ff;border:2px solid var(--card-border);padding:12px;border-radius:4px;outline:none;transition:border-color var(--transition)}
.email-form input:focus{border-color:var(--color-primary)}
.email-success{margin-top:14px;color:#aaf0ff;display:flex;align-items:center;gap:8px}
.email-success .check{font-weight:700}

/* Features */
.feature-grid{display:grid;grid-template-columns:1fr;gap:14px}
.card{background:var(--card-bg);border:1px solid var(--card-border);border-left:4px solid var(--color-primary);padding:18px;border-radius:6px;transition:transform var(--transition),border-color var(--transition)}
.card:hover{transform:scale(1.01);border-left-color:var(--color-accent)}
.feature .icon{font-size:26px}
@media(min-width:640px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.feature-grid{grid-template-columns:repeat(3,1fr)}}

/* About */
.about-grid{display:grid;gap:24px;align-items:center}
.about-media{position:relative}
.about-image{height:320px;border:1px solid var(--card-border);border-left:4px solid var(--color-accent);border-radius:6px;background:linear-gradient(180deg,rgba(2,6,23,0.3),rgba(2,6,23,0.6)),url('/assets/img/ban1.jpeg') center/cover no-repeat}
.about-badge{position:absolute;bottom:-12px;left:12px;background:rgba(2,6,23,0.7);padding:8px 10px;border-radius:4px;border:1px solid var(--card-border);color:#9fdcff}
@media(min-width:1024px){.about-grid{grid-template-columns:1.05fr 1fr}.about-image{height:420px}}

/* FAQ */
.accordion{display:grid;gap:10px}
.accordion-item{border:1px solid var(--card-border);border-left:4px solid var(--color-primary);border-radius:6px;background:var(--card-bg)}
.accordion-trigger{width:100%;text-align:left;padding:16px;background:transparent;color:#e6f1ff;border:none;cursor:pointer;font-weight:600;transition:background var(--transition)}
.accordion-trigger:hover{background:rgba(56,189,248,0.06)}
.accordion-content{max-height:0;overflow:hidden;transition:max-height var(--transition),padding var(--transition);padding:0 16px}
.accordion-item.open .accordion-content{max-height:200px;padding:0 16px 14px}

/* Tables */
.table-wrap{overflow:auto}
.score-table{width:100%;border-collapse:collapse}
.score-table th,.score-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,0.06)}
.score-table thead th{color:#aee7ff;text-align:left}
.total{margin-top:10px;color:#b6f7ff}
.example-grid{display:grid;gap:14px}
@media(min-width:768px){.example-grid{grid-template-columns:repeat(3,1fr)}}

/* Steps */
.step-grid{display:grid;gap:14px}
.step{display:grid;grid-template-columns:1fr;gap:12px}
.step-media{height:180px;border:1px solid var(--card-border);border-left:4px solid var(--color-accent);border-radius:6px;background-size:cover;background-position:center}
.step-img-1{background-image:linear-gradient(180deg,rgba(2,6,23,0.4),rgba(2,6,23,0.6)),url('/assets/img/ban2.jpeg')}
.step-img-2{background-image:linear-gradient(180deg,rgba(2,6,23,0.4),rgba(2,6,23,0.6)),url('/assets/img/ban3.jpeg')}
.step-img-3{background-image:linear-gradient(180deg,rgba(2,6,23,0.4),rgba(2,6,23,0.6)),url('/assets/img/ban4.jpeg')}
.step-img-4{background-image:linear-gradient(180deg,rgba(2,6,23,0.4),rgba(2,6,23,0.6)),url('/assets/img/ban5.jpeg')}
.step-img-5{background-image:linear-gradient(180deg,rgba(2,6,23,0.4),rgba(2,6,23,0.6)),url('/assets/img/ban6.jpeg')}
.step-body .step-num{color:#9fdcff}
@media(min-width:768px){.step{grid-template-columns:1.2fr 1fr}}

/* Page hero */
.page-hero.compact{padding:46px 0 10px}
.page-hero h1{font-family:Outfit,system-ui,sans-serif;margin:0 0 6px}
.page-hero p{margin:0;color:#cfe7ff}

/* Disclaimer */
.disclaimer-inner{display:grid;gap:12px;align-items:center;grid-template-columns:auto 1fr auto;background:var(--card-bg);border:1px solid var(--card-border);border-left:4px solid var(--color-primary);padding:16px;border-radius:6px}

/* Footer */
.site-footer{padding:30px 0;border-top:1px solid rgba(56,189,248,0.15);background:rgba(2,6,23,0.5);backdrop-filter:blur(10px)}
.footer-grid{display:grid;gap:14px;align-items:center}
.footer-logo{display:flex;align-items:center;gap:10px;color:#e6f1ff;text-decoration:none}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{color:#c8e7ff;text-decoration:none}
.footer-links a:hover{color:var(--color-primary)}
.legal{display:grid;gap:8px}

/* Legal text */
.legal-text .card{display:grid;gap:10px}
.highlight-18{display:grid;gap:10px;grid-template-columns:auto 1fr;align-items:center;background:rgba(56,189,248,0.06);border:1px solid var(--card-border);border-left:4px solid var(--color-primary);padding:12px;border-radius:6px}

/* Age Gate */
.age-gate{position:fixed;inset:0;background:rgba(2,6,23,0.85);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px;z-index:100}
.age-gate[aria-hidden="false"]{display:flex}
.age-card{background:var(--card-bg);border:1px solid var(--card-border);border-left:4px solid var(--color-primary);padding:18px;border-radius:6px;max-width:560px;width:100%}
.age-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.age-logo{display:flex;align-items:center;gap:8px;font-family:Outfit,system-ui,sans-serif;font-weight:700}
.age-actions{display:flex;gap:10px;margin-top:10px}
.age-note{color:#cfe7ff;font-size:14px}

/* Utilities */
.section-head{margin-bottom:16px}
.table-wrap,.card,.feature,.step,.tip{will-change:transform}
.tip-grid{display:grid;gap:14px}
@media(min-width:768px){.tip-grid{grid-template-columns:repeat(4,1fr)}}

/* Mobile Nav Overlay */
.mobile-nav{position:fixed;inset:64px 0 0 0;background:rgba(2,6,23,0.96);backdrop-filter:blur(8px);padding:20px;display:none;flex-direction:column;gap:14px;z-index:40}
.mobile-nav a{color:#e6f1ff;text-decoration:none;font-size:18px}
.mobile-nav.open{display:flex}

/* Accessibility focus */
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}