:root{
  --bg:#0b0f14; --panel:rgba(17,24,39,.72); --panel2:rgba(17,24,39,.52);
  --border:rgba(148,163,184,.18); --text:#e5e7eb; --muted:#a6b0c0;
  --accent:#4299e1; --good:#22c55e; --shadow:0 18px 60px rgba(0,0,0,.35);
  --r:18px; --r2:26px; --max:1120px;
  --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
:root[data-theme="light"]{
  --bg:#f7f8fb; --panel:rgba(255,255,255,.78); --panel2:rgba(255,255,255,.60);
  --border:rgba(15,23,42,.12); --text:#0f172a; --muted:#475569;
  --accent:#2563eb; --shadow:0 18px 60px rgba(2,6,23,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); color:var(--text);
  background: radial-gradient(1200px 600px at 70% 20%, rgba(66,153,225,.18), transparent 60%),
              radial-gradient(900px 500px at 20% 70%, rgba(34,197,94,.14), transparent 55%),
              var(--bg);
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:4px}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding:72px 0}
.section.sm{padding:52px 0}

.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:rgba(10,12,16,.55); border-bottom:1px solid var(--border)}
:root[data-theme="light"] .nav{background:rgba(247,248,251,.72)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:780; letter-spacing:.2px}
.brand .dot{width:12px; height:12px; border-radius:3px; background:var(--accent);
  box-shadow:0 0 0 4px rgba(66,153,225,.18)}
.nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{opacity:.88; font-size:14px}
.nav-actions{display:flex; gap:10px; align-items:center}

.btn{display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 14px;
  border-radius:14px; border:1px solid var(--border); background:var(--panel2);
  font-weight:680; font-size:14px; cursor:pointer; user-select:none}
.btn:hover{filter:brightness(1.05); text-decoration:none}
.btn.primary{background:linear-gradient(180deg, rgba(66,153,225,1), rgba(37,99,235,1));
  border-color:rgba(37,99,235,.35); color:#fff; box-shadow:0 14px 40px rgba(37,99,235,.22)}
.btn.good{background:linear-gradient(180deg, rgba(34,197,94,1), rgba(16,185,129,1));
  border-color:rgba(16,185,129,.35); color:#07150d; box-shadow:0 14px 40px rgba(16,185,129,.18)}
.btn.icon{width:42px; padding:0; font-size:16px}

.hero{padding:74px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}
.kicker{display:inline-flex; gap:10px; align-items:center; padding:8px 12px; border:1px solid var(--border);
  background:var(--panel); border-radius:999px; box-shadow:var(--shadow); font-size:13px; color:var(--muted)}
.kicker b{color:var(--text)}
h1{margin:16px 0 10px; font-size:clamp(32px,4.2vw,54px); line-height:1.05; letter-spacing:-.7px}
.lead{font-size:16px; color:var(--muted); line-height:1.55; max-width:56ch}
.hero-actions{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap}
.badges{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}
.badge{display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border-radius:999px;
  border:1px solid var(--border); background:rgba(17,24,39,.35); font-size:13px; color:var(--muted)}
:root[data-theme="light"] .badge{background:rgba(255,255,255,.55)}

.card{border:1px solid var(--border); background:var(--panel); border-radius:var(--r2); box-shadow:var(--shadow)}
.card.pad{padding:18px}
.tabs{display:flex; gap:10px; flex-wrap:wrap; padding:10px; border:1px solid var(--border);
  border-radius:999px; background:rgba(17,24,39,.35)}
:root[data-theme="light"] .tabs{background:rgba(255,255,255,.55)}
.tab{border:1px solid transparent; background:transparent; color:var(--muted); padding:10px 14px;
  border-radius:999px; font-weight:780; cursor:pointer}
.tab.active{background:rgba(66,153,225,.18); border-color:rgba(66,153,225,.28); color:var(--text)}

.shot{margin-top:12px; border-radius:18px; overflow:hidden; border:1px solid var(--border); background:rgba(2,6,23,.25)}
.shot img{width:100%; display:block; height:auto}
.shot .cap{padding:10px 12px; font-size:13px; color:var(--muted); border-top:1px solid var(--border)}

.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:980px){.grid-2,.grid-3{grid-template-columns:1fr}}
.h2{font-size:28px; letter-spacing:-.3px; margin:0 0 10px}
.p{margin:0; color:var(--muted); line-height:1.6}
.feature{padding:16px}
.feature .t{font-weight:850; margin-bottom:6px}
.feature .d{color:var(--muted); font-size:14px; line-height:1.5}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:980px){.steps{grid-template-columns:1fr}}
.step{padding:16px}
.step .n{font-family:var(--mono); color:var(--muted); font-size:12px}
.step .t{margin:6px 0; font-weight:900}
.step .d{color:var(--muted); font-size:14px; line-height:1.55}

.pricing{padding:18px; position:relative}
.pricing.best{border-color:rgba(34,197,94,.35); box-shadow:0 18px 60px rgba(16,185,129,.14)}
.ribbon{position:absolute; top:14px; right:14px; padding:6px 10px; border-radius:999px;
  background:rgba(34,197,94,.16); border:1px solid rgba(34,197,94,.28); font-weight:850; font-size:12px}
.price{font-size:34px; font-weight:950; letter-spacing:-.6px; margin:10px 0 6px}
.ul{margin:14px 0 0; padding-left:18px; color:var(--muted); line-height:1.7; font-size:14px}

.faq details{border:1px solid var(--border); border-radius:16px; background:var(--panel2); padding:12px 14px}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer; font-weight:850}
.faq p{margin:10px 0 0; color:var(--muted); line-height:1.6}

.form{display:grid; gap:10px}
.input,.textarea{width:100%; border-radius:14px; border:1px solid var(--border); background:rgba(2,6,23,.18);
  padding:12px 12px; color:var(--text); outline:none}
:root[data-theme="light"] .input,:root[data-theme="light"] .textarea{background:rgba(255,255,255,.65)}
.textarea{min-height:120px; resize:vertical}

.footer{padding:28px 0 50px; border-top:1px solid var(--border); color:var(--muted); font-size:14px}
.small{font-size:12px; color:var(--muted); line-height:1.5}