:root{color-scheme:light dark;font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:#f6f9fc;color:#13253c;line-height:1.6}
a{color:#075ca5}
a:focus-visible,button:focus-visible{outline:3px solid #14a8d0;outline-offset:4px}
.wrap{max-width:1000px;margin:auto;padding:0 24px}
header{border-bottom:1px solid #d9e4ed;background:#fff}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:1.2rem;font-weight:700}
.brand img{width:42px;height:42px;border-radius:10px}
nav{display:flex;flex-wrap:wrap;gap:18px}
nav a{text-decoration:none;font-weight:600}
main{padding:52px 0 80px}
.eyebrow{color:#076c9a;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem}
h1{font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.1;letter-spacing:-.035em;margin:12px 0 22px}
h2{font-size:1.6rem;line-height:1.25;margin:0 0 12px}
p{margin:0 0 18px}
.lead{font-size:1.2rem;max-width:640px;color:#36516b}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding:24px 0 60px}
.hero-art{max-width:330px;width:100%;justify-self:center;border-radius:26%;box-shadow:0 24px 60px #071a4050}
.pill{display:inline-block;background:#e2f8f5;color:#064b4c;border-radius:999px;padding:7px 14px;font-size:.86rem;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0 44px}
.card{background:#fff;border:1px solid #d9e4ed;border-radius:18px;padding:24px}
.card p:last-child{margin:0}
kbd{background:#e8eef4;border:1px solid #c3d2de;border-radius:5px;padding:2px 6px;font:inherit;font-size:.9em;white-space:nowrap}
.content{max-width:760px}
.content h1{font-size:clamp(2rem,4vw,3rem)}
.content h2{margin-top:36px}
.content ul{padding-left:22px}
footer{border-top:1px solid #d9e4ed;padding:26px 0;color:#536c82}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:700px){.hero{grid-template-columns:1fr;gap:22px}.hero-art{max-width:210px}.grid{grid-template-columns:1fr}header .wrap{align-items:flex-start;padding-top:14px;padding-bottom:14px;flex-direction:column}}
@media(prefers-color-scheme:dark){body{background:#0a1422;color:#e8f1f8}header,.card{background:#101f32;border-color:#284359}.lead{color:#b0c5d5}.eyebrow{color:#66d7e6}a{color:#81caff}.pill{background:#123b3d;color:#9cf1df}kbd{background:#243a50;border-color:#426077}footer{border-color:#284359;color:#a7bdcc}}