
:root{
  --brand-primary:#2F5FB3;
  --brand-primary-dark:#1C3E7A;
  --brand-secondary:#4F81D9;
  --text-900:#111111;
  --text-700:#2F2F2F;
  --bg-0:#FFFFFF;
  --bg-50:#F6F7F9;
  --line-200:#E6E8EC;
  --radius:12px;
  --shadow:0 6px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text-900);background:#fff;line-height:1.6}
a{color:var(--brand-primary)}
.container{width:min(1120px,92vw);margin:auto}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line-200)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.brand img{width:172px}
nav ul{display:flex;gap:8px;list-style:none;padding:0;margin:0}
nav a{padding:10px 14px;font-weight:700;text-decoration:none;color:#111;border-radius:10px}
nav a:hover{background:var(--bg-50)}
.hero{background:linear-gradient(180deg, rgba(47,95,179,.06), transparent 60%)}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;padding:clamp(48px,8vw,96px) 0}
.kicker{color:var(--brand-primary);font-weight:800;text-transform:uppercase;font-size:.9rem}
h1{font-size:clamp(2rem,4vw,3rem)}
.section{padding:64px 0}
.section.alt{background:var(--bg-50)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line-200);border-radius:16px;box-shadow:var(--shadow);padding:24px}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;font-weight:800;text-decoration:none}
.btn-primary{background:var(--brand-primary);color:#fff}
.btn-secondary{border:2px solid var(--brand-primary);color:var(--brand-primary)}
footer{background:#0E1F3E;color:#E6EEFF}
.footer-inner{padding:32px 0;display:grid;grid-template-columns:1.2fr .8fr}
@media(max-width:900px){
.hero-inner,.grid-2,.grid-3,.footer-inner{grid-template-columns:1fr}
}
