:root{
  --bg:#0b1e2d;
  --ink:#0f1720;
  --muted:#5f7385;
  --card:#ffffff;
  --brand:#1e90ff;
  --brand-ink:#073a63;
  --accent:#18a999;
  --radius:1.2rem;
  --shadow:0 6px 24px rgba(0,0,0,.08);
  --nav-h:56px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.5;color:var(--ink);background:#f6f9fc}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.flex{display:flex;gap:1rem}
.between{justify-content:space-between}
.center{align-items:center}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.narrow{max-width:800px}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem;background:#fff;border:1px solid #000}

.site-header{background:#fff;box-shadow:var(--shadow);position:sticky;top:0;z-index:20}
.site-header .container{min-height:var(--nav-h)}
.logo{font-weight:700;text-decoration:none;color:var(--ink);display:inline-flex;gap:.5rem;align-items:center}
.logo-mark{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:.4rem;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;font-weight:800}

.nav-toggle{
  display:none;width:40px;height:40px;border:1px solid #d0d7e2;border-radius:.6rem;background:#fff;cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-toggle .bar{display:block;width:22px;height:2px;background:#0f1720;margin:3px auto;border-radius:1px}

.nav.root{display:flex;gap:0.25rem;list-style:none;margin:0;padding:0}
.nav.root > li{position:relative}
.nav.root > li > a,
.menu-btn{color:var(--ink);text-decoration:none;padding:.6rem .8rem;border-radius:.6rem;background:transparent;border:none;font:inherit;cursor:pointer}
.nav.root > li > a:hover, .menu-btn:hover{background:#eef5ff}

.submenu{position:absolute;top:calc(100% + .4rem);left:0;background:#fff;border:1px solid #e6eef6;border-radius:.8rem;box-shadow:var(--shadow);
         padding:.4rem;min-width:220px;display:flex;flex-direction:column;gap:.1rem;z-index:30}
.submenu a{padding:.6rem .8rem;border-radius:.6rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.submenu a:hover{background:#eef5ff}

.site-main{min-height:60vh}
.site-footer{background:#0f1720;color:#cbd5e1;margin-top:3rem;padding:2rem 0}
.site-footer a{color:#e2e8f0}

.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;padding:.7rem 1rem;border-radius:.8rem;font-weight:600;border:none;cursor:pointer}
.btn:hover{filter:brightness(.95)}
.btn.ghost{background:#e6f0ff;color:var(--brand-ink)}

.hero{background:linear-gradient(180deg,#eaf3ff,transparent);padding:3rem 0}
.hero h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:.2rem 0}
.cta{display:flex;gap:.8rem;margin-top:.6rem;flex-wrap:wrap}

.card{background:var(--card);padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow)}
.features{margin:2rem auto}
.checklist{columns:2;gap:2rem}
.checklist li{break-inside:avoid;padding-left:1.2rem;position:relative}
.checklist li::before{content:"✔";position:absolute;left:0;color:var(--accent)}

.form{display:grid;gap:.7rem}
input,textarea,select{width:100%;padding:.7rem;border:1px solid #d0d7e2;border-radius:.6rem;background:#fff}
label{font-weight:600}
#form-status{min-height:1.2rem}

/* Responsive nav */
@media (max-width: 880px){
  .nav-toggle{display:inline-flex}
  .site-header .container{position:relative}
  .nav.root{
    position:absolute;right:1rem;top:calc(var(--nav-h) + .5rem);
    background:#fff;border:1px solid #e6eef6;border-radius:.8rem;box-shadow:var(--shadow);
    padding:.5rem;display:none;flex-direction:column;gap:.25rem;width:min(92vw, 340px);
  }
  .nav.root.show{display:flex}
  .has-submenu .submenu{
    position:static;border:none;box-shadow:none;padding:.2rem 0;margin:0;min-width:0;
  }
  .submenu[hidden]{display:none}
  .menu-btn{display:flex;justify-content:space-between;align-items:center;width:100%}
}

/* Fluid type */
h1{line-height:1.2}
h2{line-height:1.25}
p,li{font-size:clamp(0.98rem, 0.28vw + 0.9rem, 1.05rem)}