:root{
  --bg:#f6f7f9; --ink:#253045; --muted:#5a6475; --card:#ffffff;
  --accent:#2b6cb0; --accent-ink:#ffffff; --wrap:1120px;
  --radius:14px; --pad:22px; --shadow:0 10px 30px rgba(0,0,0,.06);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; color:var(--ink); background:var(--bg); line-height:1.6}
.wrap{max-width:var(--wrap); margin:0 auto; padding:22px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Header / Nav */
.site-header{background:#10131a; color:#d9e6ff; padding:16px 0; position:sticky; top:0; z-index:10}
.header-grid{display:flex; gap:16px; align-items:center; justify-content:space-between}
.brand h1{margin:0; font-weight:800; letter-spacing:.5px}
.brand .thin{font-weight:400; color:#9fb4d6}
.tagline{margin:4px 0 0; color:#9fb4d6; font-size:.95rem}
.nav a{color:#dbe9ff; margin-left:16px; font-weight:700; padding:6px 8px; border-radius:8px}
.nav a.active{background:#1c2638}
.nav a:hover{opacity:.9}

/* Panels & cards */
.panel{background:var(--card); border-radius:var(--radius); padding:var(--pad); margin:18px 0; box-shadow:var(--shadow)}
.hero{background:linear-gradient(180deg,#ffffff, #f1f5ff)}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--card); border-radius:12px; padding:18px; box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card .meta{color:var(--muted); margin:.2rem 0 .6rem}
.card-body{display:block}

/* Buttons */
.btn{display:inline-block; padding:10px 14px; background:var(--accent); color:var(--accent-ink);
     border-radius:10px; font-weight:700; letter-spacing:.2px; box-shadow:0 6px 18px rgba(43,108,176,.25)}
.btn:hover{filter:brightness(.95)}
.btn.ghost{background:transparent; color:var(--accent); border:2px solid var(--accent); box-shadow:none}
.btn-row,.cta-row{display:flex; gap:10px; flex-wrap:wrap}

/* Lists */
.bullets{margin:.2rem 0 0 1rem; color:var(--muted)}

/* Breadcrumb */
.breadcrumb{font-size:.9rem; color:#7a8596; margin-top:6px; margin-bottom:6px}
.breadcrumb a{color:#7a8596}
.breadcrumb a:hover{text-decoration:underline}

/* Footer */
.site-footer{padding:26px 0; color:#7a8596; text-align:center}

/* Responsive */
@media (max-width: 960px){
  .grid{grid-template-columns:1fr}
  .nav{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end}
}