:root{
  --bg:#fff; --ink:#0b0b0f; --muted:#5b5e6a; --line:#e6e7eb;
  --accent:#00e676; --accent2:#ff2d55;
  --shadow:0 14px 40px rgba(11,11,15,.10);
  --r:18px; --r2:26px; --max:1140px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
*{box-sizing:border-box} body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg)}
a{text-decoration:none;color:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.topbar{background:#0b0b0f;color:#fff;border-bottom:1px solid rgba(255,255,255,.10)}
.topbar .row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);font-size:13px}
.pill .dot{width:8px;height:8px;border-radius:99px;background:var(--accent)}
.header{position:sticky;top:0;z-index:60;background:#0b0b0f;color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.header .inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;min-width:180px}
.brand img{width:34px;height:34px}
.brand .name{font-weight:950}
.nav{display:flex;gap:14px;align-items:center}
.nav a{font-size:14px;color:rgba(255,255,255,.88);padding:8px 10px;border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.08)}
.actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-weight:900;font-size:14px}
.btn.primary{background:linear-gradient(135deg,var(--accent),#00c853);border:0;color:#05140c}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.22)}
.burger{display:none}
@media (max-width:980px){.nav{display:none}.burger{display:inline-flex}}
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:80}
.drawer.open{display:block}
.drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(360px,92vw);background:#0b0b0f;color:#fff;padding:18px;border-left:1px solid rgba(255,255,255,.14)}
.drawer .panel a{display:block;padding:12px 12px;border-radius:12px;color:rgba(255,255,255,.9)}
.drawer .panel a:hover{background:rgba(255,255,255,.08)}
.hero{
  background:radial-gradient(1200px 420px at 20% 0%, rgba(0,230,118,.18), transparent 60%),
             radial-gradient(900px 420px at 80% 10%, rgba(255,45,85,.14), transparent 55%),
             linear-gradient(180deg,#0b0b0f 0%,#0b0b0f 55%,#fff 56%);
  color:#fff;padding:34px 0 26px
}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch}
@media (max-width:980px){.hero .grid{grid-template-columns:1fr}}
.kicker{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:8px 12px;border-radius:999px}
.kicker .spark{width:9px;height:9px;border-radius:99px;background:var(--accent2)}
.h1{font-size:46px;line-height:1.05;margin:14px 0 10px;font-weight:950;letter-spacing:-.6px}
@media (max-width:520px){.h1{font-size:38px}}
.sub{font-size:16px;color:rgba(255,255,255,.84);line-height:1.55;max-width:58ch}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badge{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.86)}
.hero .side{padding:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r2)}
.side .title{font-weight:950;font-size:16px}
.side .mini{color:rgba(255,255,255,.78);font-size:13px;margin-top:6px;line-height:1.4}
.checker{margin-top:12px;display:flex;gap:8px}
.checker input{flex:1;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.18);color:#fff;outline:none}
.checker button{padding:12px 14px;border-radius:14px;border:0;background:var(--accent);color:#04110a;font-weight:950}
main{padding:26px 0 46px}
.section{margin:18px 0 34px}
.h2{font-size:26px;margin:0 0 10px;letter-spacing:-.3px}
.p{color:var(--muted);line-height:1.6;margin:0}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
@media (max-width:980px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tiles{grid-template-columns:1fr}}
.tile{padding:16px;border-radius:var(--r2);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.tile .t{font-weight:950}
.tile .d{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.5}
.tile .go{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-weight:950}
.tile .go span{width:8px;height:8px;border-radius:99px;background:var(--accent)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:980px){.grid3{grid-template-columns:1fr}}
.plan{padding:16px;border-radius:var(--r2);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.plan .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.plan .name{font-weight:1000;font-size:16px}
.price{font-weight:1000;font-size:22px}
.price small{font-size:12px;color:var(--muted);font-weight:850}
.plan ul{margin:12px 0 0;padding-left:18px;color:var(--muted);line-height:1.6}
.ribbon{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(0,230,118,.12);color:#0a2a1a;border:1px solid rgba(0,230,118,.25);font-size:12px;font-weight:950}
.plan .actions{margin-top:14px}
.plan .actions .btn2{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:#0b0b0f;color:#fff;font-weight:950}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:980px){.split{grid-template-columns:1fr}}
.notice{padding:14px 16px;border-radius:var(--r2);border:1px dashed #cfd2da;background:#fbfbfd;color:var(--muted)}
footer{background:#0b0b0f;color:rgba(255,255,255,.86);padding:26px 0;margin-top:30px}
footer .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:14px}
@media (max-width:980px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .cols{grid-template-columns:1fr}}
.small{font-size:12px;color:rgba(255,255,255,.70);line-height:1.6}
hr.sep{border:0;border-top:1px solid rgba(255,255,255,.14);margin:18px 0}
.kv{display:flex;gap:10px;flex-wrap:wrap}
.kv .tag{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:12px}