:root{
  --bg:#f3f7fb;
  --surface:#ffffff;
  --surface-soft:#f8fbff;
  --text:#102033;
  --muted:#4b6076;
  --brand-900:#0d1b2a;
  --brand-700:#16314d;
  --accent:#1d4ed8;
  --accent-2:#0ea5e9;
  --line:#d9e5f2;
  --line-soft:#e9f0f8;
  --shadow:0 12px 30px rgba(13,27,42,.08);
  --radius-lg:16px;
  --radius-md:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.65 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #e7f0ff 0%, transparent 60%),
    radial-gradient(1000px 550px at 90% -15%, #e6f7ff 0%, transparent 62%),
    var(--bg);
}

.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}

header{
  background:linear-gradient(135deg,var(--brand-900),var(--brand-700));
  color:#fff;
  position:sticky;
  top:0;
  z-index:20;
  box-shadow:0 8px 24px rgba(5,14,25,.22);
}

.topbar{
  display:flex;
  align-items:center;
  min-height:74px;
}

.brand{display:inline-flex;align-items:center;color:#fff;text-decoration:none}
.brand img{height:40px;width:auto;display:block}

nav.wrap{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  padding-top:0;
  padding-bottom:.95rem;
}
nav a{
  color:#e7eef8;
  text-decoration:none;
  font-weight:650;
  font-size:.95rem;
  padding:.45rem .66rem;
  border-radius:9px;
  transition:all .18s ease;
}
nav a:hover{background:rgba(255,255,255,.12);color:#fff}

main{padding:2.2rem 0 2.8rem}
h1,h2,h3{line-height:1.2;color:#0d1b2a;margin:.1rem 0 .65rem}
h1{font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.015em}
h2{font-size:clamp(1.25rem,2.3vw,1.65rem)}
p,li{color:var(--muted)}
a{color:#1f4cc8}
a:hover{color:#153a9a}

.hero{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:clamp(1.1rem,2.5vw,1.65rem);
}
.hero p{max-width:72ch}

section{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  box-shadow:0 6px 18px rgba(13,27,42,.05);
  padding:1.05rem 1.1rem;
  margin:1rem 0;
}
section ul{padding-left:1.2rem}
section li+li{margin-top:.4rem}

.cta{display:flex;gap:.72rem;flex-wrap:wrap;margin-top:.85rem}
.btn{
  display:inline-block;
  background:linear-gradient(135deg,var(--accent),#2563eb);
  color:#fff;
  padding:.68rem 1rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:760;
  letter-spacing:.01em;
  box-shadow:0 8px 20px rgba(29,78,216,.25);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.btn.alt{
  background:#fff;
  color:#1d4ed8;
  border:1px solid #b9ccf4;
  box-shadow:none;
}

.callout{
  background:linear-gradient(180deg,#fff9f0 0%,#fff5e9 100%);
  border:1px solid #f5d7a8;
  border-left:4px solid #f59e0b;
  padding:.85rem .9rem;
  border-radius:10px;
}
.small{font-size:.93rem;color:#4a6078}

footer{
  margin-top:2.2rem;
  background:linear-gradient(135deg,var(--brand-900),#10253a);
  color:#e7eff8;
  border-top:1px solid rgba(255,255,255,.08);
}
footer .wrap{padding-top:1.25rem;padding-bottom:1.45rem}
footer p{margin:.45rem 0;color:#dbe7f5}

@media (max-width:760px){
  .topbar{min-height:64px;padding-top:.6rem;padding-bottom:.2rem}
  .brand img{height:34px}
  nav.wrap{padding-bottom:.8rem}
  nav a{padding:.45rem .58rem;font-size:.92rem}
  main{padding-top:1.4rem}
}