:root { --bg:#f6f8fc; --surface:#fff; --text:#0f172a; --muted:#5b6578; --line:#e3e8f2; --brand:#3b5bff; --brand2:#7a3bff; --soft:#eef1ff; --ok:#0e9f6e; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b1020; --surface:#121a30; --text:#e8ecf8; --muted:#9aa6c2; --line:#222c48; --soft:#1a2347; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font:16px/1.65 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg); }
a { color:inherit; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
header.top { position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:18px; height:62px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.04em; text-decoration:none; }
.mark { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand2)); font-weight:800; }
nav { margin-left:auto; display:flex; gap:20px; align-items:center; }
nav a { text-decoration:none; color:var(--muted); font-weight:600; font-size:15px; }
nav a:hover { color:var(--text); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:12px; font-weight:700; text-decoration:none; border:1px solid var(--line); background:var(--surface); color:var(--text); }
.btn.primary { color:#fff; border:0; background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:0 8px 24px rgba(59,91,255,.28); }
.btn.big { padding:14px 26px; font-size:17px; }
.hero { padding:84px 0 64px; text-align:center; }
.hero h1 { font-size:clamp(32px,5.4vw,56px); line-height:1.12; margin:0 auto 18px; max-width:820px; letter-spacing:-.02em; }
.grad { background:linear-gradient(135deg,var(--brand),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { max-width:660px; margin:0 auto 28px; color:var(--muted); font-size:19px; }
.hero .cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero small { display:block; margin-top:14px; color:var(--muted); }
section { padding:56px 0; }
section h2 { font-size:clamp(26px,3.6vw,36px); letter-spacing:-.01em; margin:0 0 10px; text-align:center; }
section .lead { text-align:center; color:var(--muted); max-width:640px; margin:0 auto 34px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; }
.card h3 { margin:12px 0 6px; font-size:18px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
.ico { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--soft); color:var(--brand); font-size:20px; font-weight:800; }
.steps { counter-reset:s; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.step { position:relative; padding:22px 22px 22px 70px; }
.step::before { counter-increment:s; content:counter(s); position:absolute; left:20px; top:22px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--brand),var(--brand2)); }
.band { background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.two { display:grid; gap:34px; grid-template-columns:1fr 1fr; align-items:center; }
@media (max-width:800px){ .two { grid-template-columns:1fr; } nav a.hide { display:none; } }
.checks { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; }
.checks li { padding-left:30px; position:relative; }
.checks li::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:800; }
.mock { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:0 18px 50px rgba(15,23,42,.10); font-size:14px; }
.mock .head { background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; padding:8px 12px; border-radius:10px 10px 0 0; font-weight:700; }
.mock .party { padding:8px 12px; background:var(--soft); font-weight:700; }
.mock .row { display:flex; gap:10px; align-items:center; padding:9px 12px; border-top:1px solid var(--line); flex-wrap:wrap; }
.mock .box { width:16px; height:16px; border:2px solid var(--muted); border-radius:5px; flex:none; }
.mock .box.on { background:var(--ok); border-color:var(--ok); }
.mock s { color:var(--muted); }
.tag { font-size:11px; padding:2px 8px; border-radius:99px; background:#e6ebff; color:#2b3fb0; }
.tag.warn { background:#fdecc8; color:#92580a; }
.price { max-width:420px; margin:0 auto; text-align:center; }
.price .amount { font-size:44px; font-weight:800; letter-spacing:-.02em; margin:6px 0; }
.price ul { text-align:left; }
details { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:10px; }
summary { cursor:pointer; font-weight:700; }
details p { color:var(--muted); margin:10px 0 0; }
footer { padding:34px 0 48px; color:var(--muted); font-size:14px; border-top:1px solid var(--line); }
footer .wrap { display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; }
.contact { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }