:root{--bg:#fff;--fg:#0a0a0a;--mute:#6b6b6b;--line:#e4e4e4;--acc:#2b50ff;--acc-fg:#fff;--card:#fafafa}
@media (prefers-color-scheme:dark){:root{--bg:#000;--fg:#f5f5f5;--mute:#9a9a9a;--line:#262626;--acc:#4d6dff;--card:#0d0d0d}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 Roboto,"Segoe UI","Helvetica Neue",Arial,sans-serif}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
header{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.01em;text-decoration:none}
.logo svg{width:28px;height:28px}
.btn-o{font-size:15px;text-decoration:none;border:1px solid var(--fg);border-radius:8px;padding:7px 16px}
.btn-o:hover{background:var(--fg);color:var(--bg)}
h1{font-size:clamp(34px,5.4vw,58px);line-height:1.05;letter-spacing:-.035em;margin:0 0 18px;font-weight:700}
h2{margin:0 0 18px;font-size:22px;letter-spacing:-.015em}
.lead{color:var(--mute);font-size:18px;max-width:30em;margin:0}
.btn{display:inline-block;font:inherit;font-weight:600;text-decoration:none;text-align:center;color:var(--acc-fg);background:var(--acc);border:0;border-radius:8px;padding:12px 22px;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.6;cursor:default}
.btn.full{width:100%}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px}
label{display:block;font-size:14px;margin:0 0 6px}
input{width:100%;font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 12px;margin-bottom:16px}
input:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent)}
.row{display:flex;justify-content:space-between;margin-top:16px;font-size:14px}
.row a{color:var(--mute)}
.err{display:none;margin:0 0 16px;padding:10px 12px;border-left:3px solid #d92d20;background:color-mix(in srgb,#d92d20 10%,transparent);font-size:14px}
.err.show{display:block}

/* главная */
.hero{padding:56px 0 48px}
.hero .actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero .note{color:var(--mute);font-size:14px;margin-top:14px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}
.plan{border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column}
.plan.pick{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.plan h3{margin:0;font-size:17px}
.plan .sz{font-size:34px;font-weight:700;letter-spacing:-.03em;margin:10px 0 2px}
.plan .pr{color:var(--mute);font-size:14px;margin-bottom:18px}
.plan ul{margin:0 0 20px;padding:0;list-style:none;font-size:15px;flex:1}
.plan li{padding:6px 0;border-top:1px solid var(--line)}
.plan .btn,.plan .btn-o{width:100%;text-align:center}
.promo{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--acc);color:var(--acc-fg);border-radius:14px;padding:32px 36px;margin-bottom:72px}
.promo h2{margin:0 0 6px;font-size:26px}
.promo p{margin:0;opacity:.9;max-width:34em}
.promo a{flex:none;text-decoration:none;font-weight:600;background:#fff;color:#0a0a0a;border-radius:8px;padding:12px 22px}

/* вход */
.auth{max-width:400px;margin:48px auto 96px}
.auth h1{font-size:34px;margin-bottom:8px}
.auth .lead{font-size:16px;margin-bottom:24px}

footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--mute);font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{text-decoration:none}
@media (max-width:820px){.plans{grid-template-columns:1fr}.promo{flex-direction:column;align-items:flex-start;padding:26px}.hero{padding-top:28px}}
@media (prefers-reduced-motion:no-preference){.btn{transition:filter .15s}}