:root{
  --bg:#f6f8fb; --panel:#fff; --ink:#0f172a; --muted:#667085;
  --brand:#1d4ed8; --border:#dbe3f0; --radius:20px; --maxw:1100px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif;
     color:var(--ink); background:var(--bg); line-height:1.6}
a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline}
.wrapper{max-width:var(--maxw); margin:0 auto; padding:22px}
.nav{display:flex; gap:18px; align-items:center; flex-wrap:wrap; padding:10px 0 12px; border-bottom:1px solid var(--border)}
.brand{font-weight:800; color:var(--ink)}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px}
.grid{display:grid; gap:18px}
@media(min-width:980px){ .layout{grid-template-columns:1.2fr .8fr} }
.small{color:var(--muted)}
.btn-list{display:grid; gap:14px}
.btn-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; justify-items:center}
.btn-chip{display:flex; align-items:center; justify-content:center; padding:14px 16px; font-weight:600; border:2px solid #2f5eea; border-radius:16px; background:#fff}
.center{text-align:center}
h1.big{font-size:clamp(28px,4vw,48px); line-height:1.2; margin:0 0 8px}
footer{border-top:1px solid var(--border); margin-top:22px; color:var(--muted); padding:16px 0}