.btn-sm{padding:8px 14px;margin:0;font-size:.9rem}
.hero{max-width:1180px;margin:0 auto;padding:56px 24px 32px;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero h1{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.1;margin:0 0 14px;color:var(--navy);letter-spacing:-.02em}
.lead{font-size:1.15rem;color:var(--muted);max-width:560px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 10px}.hero-cta .btn{margin:0}
.hero-art{background:linear-gradient(135deg,#eef2ff,#f5f3ff);border-radius:24px;padding:24px;display:grid;place-items:center}
.hero-art img{max-width:100%;height:auto}
.section{max-width:1180px;margin:0 auto;padding:32px 24px}
.section h2{color:var(--navy);font-size:1.6rem;margin:0 0 18px}
.how{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:s}
.how li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;counter-increment:s}
.how li::before{content:counter(s);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;font-weight:700;margin-bottom:10px}
.how strong{display:block;color:var(--navy);margin-bottom:4px}.how span{color:var(--muted);font-size:.92rem}
.box-link{text-decoration:none;color:inherit}.box-link h3{font-size:1.02rem;margin:10px 0 4px;color:var(--navy)}
.footer{max-width:1180px;margin:24px auto 0;padding:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem;flex-wrap:wrap;gap:8px}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-top:32px}.topbar nav a:not(.btn){display:none}}