@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg: #0b0f14;
  --panel: #111821;
  --panel-2: #151f2b;
  --line: #263342;
  --text: #eef3f8;
  --muted: #9eacbc;
  --accent: #a8d5ff;
  --accent-strong: #5bb4ff;
  --max: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 50% -20%, #1a2b3b 0, var(--bg) 50%);
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  line-height: 1.65;
}
a { color: inherit; }
.wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
header { border-bottom: 1px solid rgba(158,172,188,.18); }
.nav { display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:24px; }
.brand { font: 800 16px Manrope, sans-serif; letter-spacing: -.04em; text-decoration:none; }
.brand span { color: var(--accent); }
.nav-label { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.hero { padding: 88px 0 64px; max-width: 880px; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .17em; font-weight:700; font-size:11px; }
h1,h2,h3 { font-family: Manrope, sans-serif; letter-spacing:-.045em; line-height:1.13; }
h1 { font-size: clamp(38px, 6.6vw, 72px); margin: 18px 0 22px; font-weight:700; }
h2 { font-size: clamp(26px, 4vw, 40px); margin: 0 0 16px; }
h3 { font-size: 20px; margin:0 0 10px; }
.lede { font-size: clamp(17px, 2vw, 21px); color:#c2ceda; max-width:760px; }
.muted { color: var(--muted); }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 17px; border-radius:7px; background:var(--accent); color:#0b1620; font-weight:700; text-decoration:none; border:1px solid var(--accent); transition:transform .15s, background .15s; }
.button:hover { transform:translateY(-1px); background:#d2eaff; }
.button.secondary { background:transparent; color:var(--text); border-color:var(--line); }
.section { padding: 38px 0 70px; }
.section-intro { max-width:700px; margin-bottom:28px; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.card { display:flex; flex-direction:column; gap:14px; background:linear-gradient(160deg,rgba(21,31,43,.96),rgba(15,22,31,.96)); border:1px solid var(--line); border-radius:13px; padding:23px; min-height:270px; }
.card p { color:#b7c3d0; margin:0; }
.card .tag { color:var(--accent); font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:700; }
.card a { margin-top:auto; color:var(--accent); font-weight:700; text-decoration:none; }
.card a:hover { text-decoration:underline; }
.split { display:grid; grid-template-columns: .9fr 1.1fr; gap:36px; align-items:start; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:25px; }
ul.clean { padding-left:20px; color:#c0ccd8; }
ul.clean li { margin:9px 0; }
.callout { border-left:2px solid var(--accent-strong); padding:5px 0 5px 18px; color:#d4e2ef; font-size:18px; }
.kicker { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.13em; }
footer { border-top:1px solid rgba(158,172,188,.18); padding:25px 0 35px; color:var(--muted); font-size:13px; }
footer .foot { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.breadcrumb { color:var(--muted); font-size:13px; margin-top:25px; }
.breadcrumb a { text-decoration:none; }
.small-note { font-size:13px; color:var(--muted); }
@media (max-width: 820px) { .grid { grid-template-columns:1fr; } .split { grid-template-columns:1fr; } .hero { padding:62px 0 45px; } .card { min-height:unset; } }