:root{--night:#2F3A6E;--navy:#1E2547;--peach:#F4A582;--peach-soft:#FDEBE1;--moon:#F6C453;--moon-soft:#FDF3D8;--cream:#FFF8F1;--muted:#5B6285;--border:#F0E4D8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--navy);font:400 17px/1.6 Fredoka,system-ui,sans-serif}
a{color:var(--night);font-weight:500}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px max(16px,calc((100% - 880px)/2));background:var(--cream);border-bottom:1px solid var(--border)}
.top-hero{background:var(--night);border-bottom:0}
.top-hero a{color:#fff}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:22px;color:var(--night)}
.top-hero .brand{color:#fff}
nav{display:flex;gap:18px;flex-wrap:wrap}
nav a{text-decoration:none;font-size:15px}
.hero{background:var(--night);color:#fff;text-align:center;padding:24px 16px 64px;border-radius:0 0 36px 36px}
.hero-logo{width:140px;height:140px}
.hero-brand{margin:8px 0 0;color:var(--peach);letter-spacing:.3em;font-weight:600}
.hero h1{margin:0;font-size:56px;line-height:1.1;font-weight:700}
.hero-tag{color:#E7E9F4;font-size:19px}
.soon{display:inline-block;margin-top:12px;padding:8px 18px;border-radius:999px;background:var(--moon);color:var(--navy);font-weight:600}
.cards{max-width:880px;margin:-32px auto 0;padding:0 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.cards article{background:#fff;border-radius:22px;padding:20px;box-shadow:0 6px 16px rgba(30,37,71,.06)}
.cards h3{margin:8px 0 4px;font-size:20px}
.cards p{margin:0;color:var(--muted)}
.icon{font-size:28px}
.doc{max-width:760px;margin:0 auto;padding:32px 16px 48px}
.eyebrow{margin:0;color:var(--peach);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.doc h1{margin:4px 0 8px;font-size:34px;line-height:1.2;color:var(--night)}
.doc h2{margin:28px 0 6px;font-size:21px;color:var(--night)}
.updated,.muted{color:var(--muted);font-size:15px}
.lead{font-size:19px}
.box{background:#fff;border-radius:22px;padding:4px 20px 16px;margin:18px 0;box-shadow:0 6px 16px rgba(30,37,71,.06)}
.box h2{margin-top:18px}
.button{display:inline-block;padding:12px 22px;border-radius:999px;background:var(--peach);color:var(--navy);text-decoration:none;font-weight:600}
li{margin:4px 0}
footer{padding:28px max(16px,calc((100% - 880px)/2)) 40px;border-top:1px solid var(--border);color:var(--muted);font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px}
@media (max-width:520px){.hero h1{font-size:44px}.doc h1{font-size:28px}nav{gap:12px}}