*{box-sizing:border-box}
:root{--ink:#111827;--muted:#667085;--line:#e5e7eb;--accent:#3b5ccc;--wash:#f7f8fb}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:Inter,Arial,sans-serif;background:#fff}
header{height:84px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 32px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font:800 16px Manrope,sans-serif;letter-spacing:.11em}
.mark{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--ink);color:#fff;letter-spacing:-.04em;font-size:16px}
.nav-link{color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
main{max-width:1180px;margin:auto;padding:0 32px}
.hero{padding:105px 0 100px;max-width:900px}
.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:700;color:var(--accent);margin-bottom:24px}
h1{font:800 clamp(54px,8vw,96px)/.98 Manrope,sans-serif;letter-spacing:-.055em;margin:0 0 30px}
h1 span{color:var(--accent)}
.lead{max-width:720px;font-size:21px;line-height:1.65;color:var(--muted);margin:0 0 38px}
.button{display:inline-flex;align-items:center;gap:22px;padding:15px 20px;border-radius:9px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:14px}
.value{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}
.value>div{padding:48px 36px 54px 0}
.value>div+div{border-left:1px solid var(--line);padding-left:36px}
.num{font:700 12px Manrope,sans-serif;color:var(--accent);margin-bottom:50px}
.value h2,.how h2{font:700 25px Manrope,sans-serif;letter-spacing:-.03em;margin:0 0 15px}
.value p{font-size:15px;line-height:1.7;color:var(--muted);max-width:300px}
.how{margin:90px 0;background:var(--wash);border-radius:18px;padding:65px}
.how h2{font-size:38px}
.how>p{max-width:720px;color:var(--muted);font-size:18px;line-height:1.7}
.flow{display:flex;align-items:center;gap:20px;margin-top:45px;flex-wrap:wrap;font:700 12px Manrope,sans-serif;letter-spacing:.1em}
.flow span{background:#fff;border:1px solid var(--line);padding:15px 18px;border-radius:8px}
.flow b{color:var(--accent)}
footer{border-top:1px solid var(--line);max-width:1180px;margin:auto;padding:35px 32px 55px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px}
.small .mark{width:31px;height:31px;border-radius:8px;font-size:12px}
.small{font-size:12px}
@media(max-width:700px){
 header,main,footer{padding-left:20px;padding-right:20px}
 header{height:72px}
 .hero{padding:75px 0}
 h1{font-size:54px}
 .lead{font-size:18px}
 .value{grid-template-columns:1fr}
 .value>div{padding:34px 0}
 .value>div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}
 .num{margin-bottom:22px}
 .how{padding:36px 24px;margin:60px 0}
 .how h2{font-size:30px}
 footer{align-items:flex-start;gap:22px;flex-direction:column}
}