:root{
  --bg: #0b1020; --panel:#0f172a; --text:#e5e7eb; --muted:#94a3b8;
  --accent:#fde047; --accent-ink:#111827; --ring: rgba(253,224,71,.35);
  --border:#1f2937; --card:#0b1225;
}
:root.theme-light{
  --bg:#f8fafc; --panel:#ffffff; --text:#0f172a; --muted:#475569;
  --accent:#facc15; --accent-ink:#111827; --ring: rgba(250,204,21,.35);
  --border:#e2e8f0; --card:#ffffff;
}
/* Navy dark theme */
:root.theme-dark{
  --bg:#0b1a33; --panel:#112240; --text:#e5e7eb; --muted:#94a3b8;
  --accent:#fde047; --accent-ink:#111827; --ring: rgba(253,224,71,.35);
  --border:#1e293b; --card:#0f1e38;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--text); line-height:1.6}
img{max-width:100%; height:auto}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px); background: color-mix(in hsl, var(--panel) 85%, transparent); border-bottom:1px solid var(--border)}
.nav{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo-img{width:260px; height:auto}
.menu-toggle{display:none; border:1px solid var(--border); background:var(--panel); color:var(--text); padding:10px 12px; border-radius:10px; font-size:18px; cursor:pointer}
.mainnav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.mainnav a{opacity:.9; text-decoration:none; padding:10px 12px; border-radius:10px}
.mainnav a:hover{opacity:1}
.theme-switcher{display:flex; gap:10px; align-items:center}
.swatch{width:28px; height:28px; border-radius:50%; border:2px solid var(--border); cursor:pointer; background:var(--panel);}
.swatch.light{background:#f8fafc}
.swatch.dark{background:#0b1a33}
.swatch[data-active="true"]{outline:3px solid var(--accent); outline-offset:2px}
.hero{padding:36px 0}
.badge{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-ink); background:var(--accent); border-radius:999px; padding:8px 12px}
h1{font-size:clamp(26px, 6vw, 40px); line-height:1.15; margin:12px 0 14px}
.lead{font-size:clamp(16px, 3.8vw, 18px); color:var(--muted); margin:0 0 22px}
.btn{border:1px solid var(--border); background:var(--panel); color:var(--text); padding:14px 16px; border-radius:14px; font-weight:700; text-decoration:none; cursor:pointer; transition:.2s; touch-action:manipulation}
.btn-primary{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.features .grid{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--border); background:var(--panel); border-radius:16px; padding:18px}
.card p{margin:0; color:var(--muted)}
.section{padding:36px 0}
.list{display:grid; gap:10px}
.list li{border:1px dashed var(--border); padding:14px 16px; border-radius:12px}
.footer{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--border); padding:20px 0; color:var(--muted); font-size:14px}
@media (max-width: 900px){.features .grid{grid-template-columns:1fr}}
@media (max-width: 720px){
  .logo-img{width:200px}
  .menu-toggle{display:block}
  .mainnav{position:absolute; left:0; right:0; top:64px; background:var(--panel); border-bottom:1px solid var(--border); display:none}
  .mainnav.open{display:block}
  .mainnav ul{flex-direction:column; gap:0}
  .mainnav a{display:block; padding:14px 20px}
  .hero{padding:28px 0}
}
@media (max-width: 420px){.logo-img{width:160px}.swatch{width:26px;height:26px}}