:root{--ink:#14213d;--paper:#f7f9fb;--sky:#e6ecf3;--star:#ffc233;--mute:#52607a;--ok:#0f766e}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 "Instrument Sans",system-ui,sans-serif}
h1,h2,h3{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;line-height:1.1;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5.5vw,3.8rem)}h2{font-size:clamp(1.6rem,3.5vw,2.3rem)}h3{font-size:1.15rem;letter-spacing:0}
a{color:inherit}.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
header .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:20px;padding-bottom:20px}
.logo{font:800 1.35rem "Bricolage Grotesque",sans-serif;text-decoration:none}.logo i{color:var(--star);font-style:normal}
nav a{margin-left:22px;text-decoration:none;color:var(--mute)}nav a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--ink);color:#fff;padding:13px 24px;border-radius:999px;text-decoration:none;font-weight:600}
.btn:hover{background:#22345c}a:focus-visible,.btn:focus-visible{outline:3px solid var(--star);outline-offset:3px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:56px 22px 72px}
.hero p{max-width:34em;color:var(--mute);font-size:1.15rem}
.review{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:22px;box-shadow:8px 8px 0 var(--star)}
.stars{color:var(--star);letter-spacing:2px;font-size:1.2rem}.who{font-weight:600}
.review .q{margin:.4em 0 0}.reply{margin-top:16px;padding:14px 16px;background:var(--sky);border-radius:12px;font-size:.95rem}
.reply b{display:block;font-size:.8rem;color:var(--ok);margin-bottom:4px}
section{padding:64px 0}.alt{background:var(--sky)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s}.steps li:before{content:counter(s);display:block;font:800 2.4rem "Bricolage Grotesque",sans-serif;color:var(--star);-webkit-text-stroke:2px var(--ink)}
.list{max-width:720px}.list h3{margin-top:1.6em;padding-top:1.2em;border-top:2px solid var(--ink)}.list p{margin:0;color:var(--mute)}
.note{max-width:720px}.note p{color:var(--mute)}
footer{padding:40px 0;border-top:2px solid var(--ink);font-size:.92rem;color:var(--mute)}footer .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.doc{max-width:720px;padding-top:32px;padding-bottom:64px}.doc h2{margin-top:1.8em;font-size:1.4rem}
@media(max-width:760px){.hero,.steps{grid-template-columns:1fr}nav a{margin-left:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}