:root { --bg:#080c18; --panel:#0f1626; --panel2:#0a1020; --border:#1c2740; --text:#e8edf7; --muted:#8e9bb5; --accent:#3b82f6; --accent2:#6366f1; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; background: radial-gradient(900px 500px at 85% -10%, rgba(59,130,246,.16), transparent 60%), var(--bg); color: var(--text); line-height: 1.6; }
a { color:#93c5fd; text-decoration:none; } a:hover { text-decoration: underline; }
img { max-width: 100%; }
.wrap { width:min(1080px, 92%); margin:0 auto; }
header.site { position: sticky; top:0; z-index:20; backdrop-filter: blur(10px); background: rgba(8,12,24,.82); border-bottom: 1px solid var(--border); }
header.site .wrap { display:flex; align-items:center; gap:22px; height:64px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:900; font-size:19px; color:#fff; } .brand:hover { text-decoration:none; }
.brand img { width:34px; height:34px; border-radius:9px; }
.brand b { color:#60a5fa; font-weight:900; }
nav.site { display:flex; gap:20px; margin-left:auto; align-items:center; flex-wrap:wrap; }
nav.site a { color: var(--muted); font-weight:600; font-size:14.5px; } nav.site a:hover, nav.site a.on { color:#fff; text-decoration:none; }
.btn { display:inline-block; padding:12px 24px; border-radius:12px; border:none; cursor:pointer; font-weight:800; font-size:15px; color:#fff !important; background: linear-gradient(135deg, var(--accent), var(--accent2)); text-align:center; }
.btn:hover { filter:brightness(1.1); text-decoration:none; } .btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.ghost { background: var(--panel); border:1px solid var(--border); color: var(--text) !important; } .btn.small { padding:8px 16px; font-size:13.5px; } .btn.big { padding:15px 34px; font-size:17px; }
.hero { text-align:center; padding: 80px 0 56px; }
.hero img.mark { width: min(520px, 80%); margin: 0 auto 18px; display:block; }
.hero h1 { font-size: clamp(32px, 5.4vw, 54px); line-height:1.1; margin:0 0 16px; letter-spacing:-1px; }
.hero h1 span { background: linear-gradient(135deg,#60a5fa,#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { max-width: 640px; margin: 0 auto 26px; color: var(--muted); font-size: 18px; }
.hero .cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.note { color: var(--muted); font-size: 13px; margin-top: 14px; }
section.block { padding: 54px 0; }
h2.title { font-size: 30px; margin: 0 0 8px; text-align:center; } .sub { text-align:center; color:var(--muted); max-width:640px; margin:0 auto 34px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
.card { background: var(--panel); border:1px solid var(--border); border-radius:16px; padding:22px; }
.card h3 { margin:6px 0 6px; font-size:18px; } .card p { margin:0; color:var(--muted); font-size:14.5px; }
.card .ic { font-size:30px; }
.pro-tag { display:inline-block; margin-left:8px; padding:1px 9px; border-radius:999px; font-size:11px; font-weight:900; color:#fde68a; border:1px solid rgba(245,158,11,.5); background:rgba(245,158,11,.12); vertical-align:middle; }
.steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:16px; counter-reset: s; }
.step { background: var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px; counter-increment: s; } .step::before { content: counter(s); display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background: var(--accent); font-weight:900; margin-bottom:8px; }
.step h4 { margin:0 0 4px; } .step p { margin:0; color:var(--muted); font-size:14px; }
footer.site { border-top:1px solid var(--border); margin-top:40px; padding:30px 0; color:var(--muted); font-size:13.5px; }
footer.site .wrap { display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; align-items:center; } footer.site nav { display:flex; gap:18px; flex-wrap:wrap; }
/* pricing */
.toggle { display:flex; justify-content:center; gap:8px; margin: 0 0 26px; flex-wrap:wrap; align-items:center; }
.toggle button, .toggle select { padding:10px 20px; border-radius:999px; border:1px solid var(--border); background:var(--panel); color:var(--muted); font-weight:800; cursor:pointer; font-size:14px; font-family:inherit; }
.toggle button.on { background: var(--accent); border-color: var(--accent); color:#fff; } .toggle em { font-style:normal; font-size:12px; color:#bbf7d0; margin-left:6px; }
.plans { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:20px; align-items: stretch; }
.plan { position:relative; display:flex; flex-direction:column; gap:10px; background:var(--panel); border:2px solid var(--border); border-radius:18px; padding:26px; } .plan.pop { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(59,130,246,.15); }
.plan .badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--accent),var(--accent2)); font-size:12px; font-weight:900; padding:4px 14px; border-radius:999px; }
.plan h3 { margin:0; font-size:21px; } .plan .price { font-size:42px; font-weight:900; } .plan .price small { font-size:15px; color:var(--muted); font-weight:600; }
.plan .tag { color:var(--muted); font-size:14px; min-height:42px; } .plan ul { list-style:none; padding:0; margin:6px 0 10px; display:grid; gap:8px; flex:1; } .plan li { font-size:14.5px; } .plan li.no { color:#64748b; text-decoration: line-through; }
.field { display:flex; flex-direction:column; gap:6px; margin: 0 0 14px; font-weight:700; font-size:14px; } .field input, .field textarea, .field select { padding:13px 14px; border-radius:11px; border:1px solid var(--border); background: var(--panel2); color: var(--text); font-size:15px; font-family:inherit; width:100%; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); }
.checkout { max-width: 520px; margin: 34px auto 0; } .msg { padding:12px 16px; border-radius:11px; margin:12px 0; font-size:14.5px; } .msg.err { background: rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.4); color:#fca5a5; } .msg.ok { background: rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.4); color:#bbf7d0; } .msg.warn { background: rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.4); color:#fde68a; }
.keybox { font-family: ui-monospace, Consolas, monospace; font-size: clamp(18px, 4.4vw, 28px); letter-spacing: 2px; padding: 18px 22px; background: var(--panel2); border:2px dashed var(--accent); border-radius: 14px; text-align:center; user-select: all; margin: 18px 0; word-break: break-all; }
.center { text-align:center; } .narrow { max-width: 720px; margin: 0 auto; }
.doc h1 { font-size: 36px; margin: 40px 0 6px; } .doc h2 { margin: 34px 0 8px; font-size: 24px; } .doc h3 { margin: 22px 0 6px; } .doc p, .doc li { color:#cbd5e1; } .doc code, kbd { background: var(--panel); border:1px solid var(--border); padding:1px 7px; border-radius:6px; font-size: 13.5px; } .doc table { border-collapse: collapse; width:100%; margin:12px 0; } .doc th, .doc td { border:1px solid var(--border); padding:9px 12px; text-align:left; font-size:14.5px; } .doc th { background: var(--panel); }
.tos h2 { font-size: 20px; margin: 26px 0 6px; } .tos p, .tos li { color:#cbd5e1; font-size:15px; }
.draft { background: rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.4); color:#fde68a; padding:12px 16px; border-radius:12px; font-size:14px; }
.testbar { background: #7f1d1d; color:#fff; text-align:center; padding:6px; font-weight:800; font-size:13px; }
.dev { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--border); }
.spin { width:44px; height:44px; border-radius:50%; border:4px solid rgba(255,255,255,.12); border-top-color: var(--accent); animation: sp .9s linear infinite; margin:10px auto; } @keyframes sp { to { transform: rotate(360deg); } }