:root { --bg:#0b1220; --card:#111a2e; --ink:#0f172a; --muted:#5b6b85; --accent:#f59e0b; --accent2:#fbbf24; --line:#e2e8f0; --ok:#0e7c3a; --err:#b91c1c; }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:#f8fafc; line-height:1.55; }
.wrap { max-width:980px; margin:0 auto; padding:0 20px; }
.site { background:var(--bg); color:#e2e8f0; }
.nav { display:max-width; max-width:980px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:800; font-size:20px; color:#fff; text-decoration:none; }
.brand span { color:var(--accent); }
.nav nav a { color:#cbd5e1; text-decoration:none; margin-left:18px; font-size:15px; }
.nav nav a.cta { background:var(--accent); color:#111; padding:7px 14px; border-radius:8px; font-weight:600; }
header.site .wrap { padding-top:0; padding-bottom:0; }
.hero { display:grid; grid-template-columns:1.4fr .9fr; gap:30px; align-items:center; padding:54px 0 36px; }
.badge { display:inline-block; background:#fff7ed; color:#7c2d12; border:1px solid #fed7aa; padding:4px 10px; border-radius:999px; font-size:13px; font-weight:600; }
.hero h1 { font-size:38px; line-height:1.15; margin:14px 0 12px; letter-spacing:-.5px; }
.lead { font-size:18px; color:#334155; }
.hero-cta { display:flex; gap:12px; margin:18px 0 10px; }
.micro { color:var(--muted); font-size:14px; }
.btn { display:inline-block; background:var(--accent); color:#111; text-decoration:none; padding:11px 20px; border-radius:9px; font-weight:700; border:0; cursor:pointer; font-size:15px; }
.btn.ghost { background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn:hover { filter:brightness(.97); }
.hero-card { display:grid; gap:12px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:0 1px 3px rgba(15,23,42,.06); }
.kpi .v { display:block; font-size:26px; font-weight:800; color:var(--accent); }
.kpi .l { font-size:13px; color:var(--muted); }
.block { padding:30px 0; border-top:1px solid var(--line); }
.block h2 { font-size:26px; margin:0 0 14px; }
.center { text-align:center; }
.steps { padding-left:20px; }
.steps li { margin:8px 0; }
.form { max-width:520px; display:grid; gap:8px; }
.form label { font-weight:600; font-size:14px; margin-top:6px; }
.form input, .form textarea { padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.status { font-size:14px; min-height:20px; }
.status.ok { color:var(--ok); }
.status.err { color:var(--err); }
.pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:22px 0; }
.tier { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; text-align:center; box-shadow:0 1px 3px rgba(15,23,42,.06); }
.tier.featured { border-color:var(--accent); box-shadow:0 6px 20px rgba(245,158,11,.18); }
.tier h2 { margin:0 0 6px; }
.tier .price { font-size:34px; font-weight:800; margin:6px 0 14px; }
.tier .price span { font-size:15px; color:var(--muted); font-weight:500; }
.tier ul { list-style:none; padding:0; margin:0 0 16px; font-size:14px; color:#334155; }
.tier li { padding:5px 0; border-bottom:1px dashed var(--line); }
.note { color:var(--muted); font-size:14px; }
.share { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.foot-note { font-size:13px; color:var(--muted); }
footer.site { margin-top:30px; }
footer.site .wrap { padding:18px 20px; font-size:13px; color:#94a3b8; }
@media (max-width:760px){ .hero{grid-template-columns:1fr;} .pricing{grid-template-columns:1fr;} .hero h1{font-size:30px;} }