:root{
  --brand:#0b5cff;
  --brand-dark:#083db0;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#ffffff;
  --border:#e5e7eb;
  --hero:#f5f7ff;
  --radius:14px;
  --shadow:0 6px 20px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.7;margin:0;color:var(--text);background:var(--bg);
}
a{color:var(--brand);}
header,footer{background:var(--brand);color:#fff}
header{padding:22px 16px}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
nav a{color:#fff;margin-right:16px;text-decoration:none;font-weight:600}
nav a:hover{text-decoration:underline}
.logo{font-weight:800;letter-spacing:.2px}
main{max-width:1120px;margin:0 auto;padding:28px 16px}
h1{font-size:28px;margin:0 0 12px}
h2{font-size:22px;margin-top:28px}
h3{font-size:18px;margin-top:18px}
.hero{
  background:var(--hero);
  border:1px solid #e5e9ff;
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;background:var(--card);
  box-shadow:var(--shadow);
}
.cta{
  display:inline-block;background:var(--brand);color:#fff;
  padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700
}
.cta.secondary{background:#111}
.cta:hover{background:var(--brand-dark)}
.small{font-size:12px;color:var(--muted)}
footer{padding:22px 0;margin-top:36px}
footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.breadcrumb{font-size:12px;margin:8px 0 16px}
.breadcrumb a{color:var(--brand);text-decoration:none}
table{width:100%;border-collapse:collapse;margin:16px 0}
th,td{border:1px solid var(--border);padding:8px;text-align:left}
details{border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin:10px 0;background:#fff}
details summary{cursor:pointer;font-weight:700}
.kicker{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.badge{display:inline-block;font-size:12px;background:#eef2ff;color:#3730a3;padding:2px 8px;border-radius:999px}
.input, input, textarea, select{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px}
form label{display:block;margin:10px 0 6px;font-weight:600}
ul.inline{list-style:none;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap}
code,kbd,pre{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
.header-nav{display:flex;justify-content:space-between;align-items:center}
@media (prefers-color-scheme: dark){
  :root{--bg:#0b0c10;--text:#e5e7eb;--card:#111318;--border:#20242b;--hero:#0e162e}
  header,footer{background:#0a1d5c}
  a{color:#93c5fd}
  .cta.secondary{background:#222}
}