:root{--bg:#fff;--card:#F2F2F7;--text:#1C1C1E;--mute:#6C6C70;--acc:#007AFF;color-scheme:light dark}
@media(prefers-color-scheme:dark){:root{--bg:#000;--card:#1C1C1E;--text:#fff;--mute:#8E8E93;--acc:#0A84FF}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:18px/28px -apple-system,"SF Pro Display",system-ui,sans-serif}
.w{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--acc)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:8px}
h1{font-size:56px;line-height:60px;font-weight:700;letter-spacing:-.02em;margin:0 0 16px}
h2{font-size:32px;line-height:38px;font-weight:600;margin:64px 0 12px}
p,li{max-width:680px}
.mute{color:var(--mute)}
.hero{padding:96px 0 64px;display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:center}
.hero img{width:100%;height:auto;border-radius:36px;border:1px solid var(--card);display:block}
.badge{display:inline-block;margin-top:24px}
.badge img{height:52px;width:auto;border:0;border-radius:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.card{background:var(--card);border-radius:20px;padding:24px}
.card h3{margin:0 0 8px;font-size:20px;line-height:26px}
.card p{margin:0}
footer{margin:96px 0 48px;color:var(--mute);font-size:15px;line-height:24px}
footer a{color:var(--mute)}
main.t{padding:64px 0 0}
main.t h1{font-size:40px;line-height:46px}
main.t h2{font-size:24px;line-height:30px;margin-top:40px}
@media(max-width:720px){h1{font-size:36px;line-height:40px}.hero{grid-template-columns:1fr;padding:48px 0 32px}.hero img{max-width:300px}.grid{grid-template-columns:1fr}h2{margin-top:48px}footer{margin-top:64px}}
@media(prefers-reduced-motion:no-preference){a{transition:opacity .15s}}