:root{
  --bg:#FFFFFF; --text:#0F172A; --muted:#475569; --line:#E2E8F0; --surface:#F8FAFC;
  --brand:#5A4FF6; --brand-2:#4B43D9; --accent:#0CC4E7; --success:#10B981;
  --radius:14px; --shadow:0 6px 24px rgba(2,6,23,.08);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial;
  color:var(--text);background:var(--bg);line-height:1.6}
.container{max-width:1120px;margin:0 auto;padding:0 1rem}
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:1.15fr .85fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1rem;border-radius:10px;
  font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--accent));color:#fff}
.btn-primary:hover{filter:brightness(.96)}
.btn-secondary{border-color:var(--line);color:var(--text);background:#fff}
.btn-secondary:hover{background:#f1f5f9}
.badge{font-size:.75rem;background:#EEF2FF;color:#3730A3;border-radius:999px;padding:.25rem .5rem}

.header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);z-index:40}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between}
.nav a{color:var(--text);text-decoration:none;margin:0 .75rem}
.nav a:hover{color:var(--brand)}
.hero{padding:4rem 0}
.hero h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.1;margin:0}
.hero p{color:var(--muted);font-size:1.125rem;margin-top:1rem}

.section{padding:3.5rem 0}
.section-muted{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:1.25rem;box-shadow:var(--shadow)}
.code{font-family:ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  background:#0b1220;color:#e2e8f0;border-radius:10px;padding:1rem;overflow:auto;font-size:.9rem}
.table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.table th,.table td{padding:.75rem;border-bottom:1px solid var(--line);text-align:left}
.table tr:hover{background:#f8fafc}
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.price-tag{font-size:2rem;font-weight:800}
.footer{border-top:1px solid var(--line);padding:2rem 0;color:var(--muted);font-size:.95rem}
.small{font-size:.95rem;color:var(--muted)}
.logo{display:flex;gap:.6rem;align-items:center;font-weight:800}
.logo img{height:22px;width:22px}
.notice{background:#0F172A;color:#E5E7EB;padding:.5rem 0;font-size:.9rem;text-align:center}
.notice a{color:#93c5fd}
.shadow{box-shadow:var(--shadow)} .round{border-radius:var(--radius)}

@media (max-width: 820px){.grid-2,.grid-3{grid-template-columns:1fr}.nav .hide-sm{display:none}}