:root { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink,#0b1220); }
.container { max-width: 1080px; margin: 0 auto; padding: 24px; }
.header { display:flex; gap:16px; align-items:center; padding:16px 0; }
.nav { margin-left:auto; display:flex; gap:16px; }
a { color: var(--brand,#0f4ff3); text-decoration: none; }
.btn { display:inline-block; padding:12px 18px; border-radius:12px; font-weight:700; }
.btn-primary { background: var(--brand,#0f4ff3); color:#fff; }
.btn-outline { border:2px solid var(--brand,#0f4ff3); color: var(--brand,#0f4ff3); }
.hero { padding: 56px 0; }
.hero h1 { font-size: clamp(28px, 4vw, 44px); margin: 0 0 8px; }
.lead { font-size: clamp(16px, 2vw, 20px); opacity:.8 }
.section { padding: 40px 0; border-top: 1px solid rgba(0,0,0,.06); }
.card { background: #fff; border:1px solid #e5e7eb; border-radius:16px; padding:20px; }
.grid { display:grid; gap:16px; grid-template-columns: repeat(12, 1fr); }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-12 { grid-column: span 12; }
.input { width:100%; padding:12px 14px; border-radius:12px; border:1px solid #e5e7eb; }
.center { text-align:center; }
@media (max-width: 800px) {
  .col-6, .col-4 { grid-column: span 12; }
}