:root { --bd:#e7e7e7; --txt:#111; --mut:#555; --pri:#111; --bg:#fff; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--txt)}
.wrap{max-width:1040px;margin:0 auto;padding:18px}
.topbar{border-bottom:1px solid var(--bd);position:sticky;top:0;background:#fff}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand a{text-decoration:none;color:var(--txt);font-weight:800}
.nav{display:flex;gap:12px;align-items:center}
.nav a{text-decoration:none;color:var(--mut)}
.btn{display:inline-block;padding:10px 14px;border:1px solid var(--bd);border-radius:12px;text-decoration:none;color:var(--txt);background:#fff}
.btn.primary{background:var(--pri);color:#fff;border-color:var(--pri)}
.hero{padding:22px 0}
.hero h1{font-size:34px;line-height:1.1;margin:0 0 10px}
.hero p{color:var(--mut);max-width:760px}
.hero-actions{display:flex;gap:10px;margin:14px 0 18px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{border:1px solid var(--bd);border-radius:16px;padding:14px}
.leadbox{margin-top:26px;border-top:1px solid var(--bd);padding-top:18px}
.form{display:flex;gap:10px;flex-wrap:wrap}
.form input{padding:10px 12px;border:1px solid var(--bd);border-radius:12px;min-width:220px}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.footer{border-top:1px solid var(--bd);color:var(--mut)}
@media (max-width: 900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr}
}