:root{
  --bg:#0b0f14; --panel:#0f141a; --text:#e6edf3; --muted:#9aa3b1; --line:#123045;
  --accent:#ffb024; --accent2:#60a5fa; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --glass:rgba(15,20,26,.55); --glass-border:rgba(255,255,255,.07);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(245,158,11,.06), transparent 60%),
              radial-gradient(1000px 500px at 90% 120%, rgba(96,165,250,.06), transparent 60%),
              var(--bg);
  line-height:1.6;
}
.sx-wrap{max-width:1200px;margin:0 auto;padding:48px 24px}
.sx-section{padding:48px 0;border-top:1px solid var(--line)}
.sx-section:first-of-type{border-top:0}
h1,h2,h3{line-height:1.2;margin:0 0 16px}
h1{font-size:clamp(32px,5vw,54px);letter-spacing:-.02em}
h2{font-size:clamp(24px,3.6vw,36px)}
h3{font-size:clamp(18px,2.4vw,24px)}
.sx-lead{color:var(--muted);max-width:68ch}

/* nav */
.sx-header{position:sticky;top:0;background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0));backdrop-filter:saturate(120%) blur(6px);z-index:50}
.sx-nav{display:flex;align-items:center;gap:28px}
.sx-logo{font-weight:800;text-decoration:none;color:var(--text)}
.sx-menu{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.sx-nav-link,.sx-cta{display:inline-flex;align-items:center;padding:10px 14px;border-radius:10px;text-decoration:none;color:var(--text);opacity:.9}
.sx-nav-link:hover{opacity:1;background:rgba(255,255,255,.04)}
.sx-nav-link.is-active{background:rgba(255,255,255,.08)}
.sx-cta{background:linear-gradient(180deg,#ffb024,#e39a08);color:#1a1200;font-weight:700;box-shadow:0 6px 16px rgba(245,158,11,.35)}
.sx-cta:hover{transform:translateY(-1px)}
/* grid */
.sx-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:980px){.sx-grid-3{grid-template-columns:1fr}}
/* cards */
.sx-card{border-radius:calc(var(--radius) + 4px);background:var(--glass);border:1px solid var(--glass-border);
        box-shadow:var(--shadow);backdrop-filter:blur(10px);padding:28px}
.sx-badge{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sx-plan h2{margin:6px 0 8px}
.sx-list{margin:14px 0 22px;padding-left:0;list-style:none}
.sx-list li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);margin:10px 0}
.sx-dot{width:10px;height:10px;border-radius:999px;background:radial-gradient(circle at 30% 30%, #fff5, #fff0);margin-top:6px;flex:0 0 10px}
/* buttons */
.sx-btn{appearance:none;border:0;cursor:pointer;font-weight:600;border-radius:12px;padding:12px 18px;line-height:1;
       text-decoration:none;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);color:var(--text);transition:.185s ease-out}
.sx-btn:hover{opacity:.95;transform:translateY(-1px)}
.sx-btn-primary{background:linear-gradient(180deg,#ffb024,var(--accent));color:#1a1200;box-shadow:0 6px 16px rgba(245,158,11,.35)}
/* footer */
.sx-footer{border-top:1px solid var(--line)}
.sx-muted{color:var(--muted)}