body.site { background:radial-gradient(1100px 500px at 85% -10%, #58b9ff26, transparent), var(--bg); min-height:100vh; display:flex; flex-direction:column; }
.nav { display:flex; align-items:center; gap:12px; padding:14px 24px; max-width:1200px; width:100%; margin:0 auto; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--text); text-decoration:none; }
.brand img { border-radius:9px; }
main { flex:1; width:100%; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; max-width:1200px; margin:0 auto; padding:56px 24px 40px; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; padding-top:28px; } }
.hero-text h1 { font-size:clamp(34px,5vw,56px); line-height:1.08; margin:0 0 16px; letter-spacing:-.02em; }
.grad { background:linear-gradient(90deg,var(--accent-text),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { font-size:18px; color:var(--muted); max-width:560px; margin:0 0 24px; }
.lead b { color:var(--text); }
.cta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.btn.big { padding:12px 22px; font-size:16px; border-radius:10px; }
.mock { background:var(--chat); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 20px 60px #0004; }
.mock .cont { max-width:none; }
.accent-blue { border-left-color:var(--accent); }
.pbtn.s-primary, .btns .s-primary { background:#5865f2; }
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; max-width:1200px; margin:0 auto; padding:24px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.card h3 { margin:0 0 8px; font-size:17px; }
.card p { margin:0; color:var(--muted); }
.steps { max-width:1200px; margin:0 auto; padding:24px 24px 56px; }
.steps h2 { font-size:26px; margin:0 0 16px; }
.steps ol { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; counter-reset:s; }
.steps li { counter-increment:s; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 18px 64px; position:relative; display:flex; flex-direction:column; }
.steps li::before { content:counter(s); position:absolute; left:18px; top:18px; width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:700; }
.steps li span { color:var(--muted); }
.foot { max-width:1200px; width:100%; margin:0 auto; padding:24px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:13px; border-top:1px solid var(--line); }
.foot nav { display:flex; gap:16px; flex-wrap:wrap; }
.foot a { color:var(--muted); } .foot a:hover { color:var(--text); }
.legal { max-width:760px; margin:0 auto; padding:24px; }
.legal h1 { font-size:34px; margin:8px 0 16px; }
.legal h2 { font-size:19px; margin:28px 0 6px; }
.legal p { margin:0 0 12px; }
.legal a { color:#5aa9ff; }
.legal code { background:var(--panel2); padding:1px 6px; border-radius:4px; }
mark.missing { background:#ed424233; color:#ff7b7e; padding:0 4px; border-radius:4px; }
.missing-box { border:1px solid var(--bad); background:#ed42421a; border-radius:var(--r); padding:12px 14px; }
.pbtn.s-secondary { background:#4f545c; } .pbtn.s-success { background:#248046; } .pbtn.s-danger { background:#da373c; } .pbtn.s-primary { background:#5865f2; }
.btnrow { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.btnrow > * { flex:1 1 140px; min-width:0; }
.btnrow > button { flex:0 0 auto; }