:root{
  --bg:#070b18; --bg2:#0b1220; --panel:#0f172a; --panel2:#111827;
  --fg:#e5e7eb; --muted:#94a3b8; --line:rgba(148,163,184,.15);
  --c1:#22d3ee; --c2:#3b82f6; --c3:#8b5cf6; --ok:#10b981; --warn:#f59e0b;
  --grad:linear-gradient(90deg,var(--c1),var(--c2) 50%,var(--c3));
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 'Inter','PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5{margin:0;letter-spacing:-.01em}
h1{font-size:clamp(40px,6vw,72px);line-height:1.05;font-weight:900}
h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;margin-bottom:24px}
h3{font-size:20px;font-weight:700;margin-bottom:8px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;height:72px;background:rgba(7,11,24,.7);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line)}
.nav .brand{display:flex;align-items:center;height:100%}
.nav .brand img{height:100%;width:auto;display:block;padding:6px 0}
.links{display:flex;gap:24px;align-items:center;font-size:14px;color:var(--muted)}
.links a:hover{color:#fff}
.links .active{color:#22d3ee;font-weight:700}
.links .cta{padding:9px 16px;border-radius:999px;background:var(--grad);color:#0b1220;font-weight:700}

/* Hero */
.hero{position:relative;overflow:hidden;padding:80px 32px 120px;text-align:center;isolation:isolate}
.bg-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(148,163,184,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,163,184,.07) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 80%);z-index:-1}
.bg-glow{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(120px);opacity:.55;z-index:-1}
.bg-glow.g1{background:#3b82f6;top:-160px;left:-160px}
.bg-glow.g2{background:#8b5cf6;bottom:-200px;right:-160px}
.hero-inner{max-width:920px;margin:0 auto}
.badge{display:inline-block;padding:6px 14px;font-size:13px;border-radius:999px;
  background:rgba(34,211,238,.1);color:var(--c1);border:1px solid rgba(34,211,238,.3);margin-bottom:24px}
.lead{margin:24px auto 36px;font-size:18px;color:var(--muted);max-width:720px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:12px;font-weight:700;border:1px solid transparent;transition:.2s}
.btn-primary{background:var(--grad);color:#0b1220}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -6px rgba(59,130,246,.45)}
.btn-ghost{border-color:var(--line);color:#cbd5e1}
.btn-ghost:hover{background:var(--panel);border-color:var(--c2)}
.hero-stats{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hero-stats li{padding:18px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.hero-stats b{display:block;font-size:32px;font-weight:900;background:var(--grad);-webkit-background-clip:text;color:transparent}
.hero-stats span{font-size:13px;color:var(--muted)}

/* Sections */
.section{padding:96px 32px;max-width:1200px;margin:0 auto}
.section.dark{background:linear-gradient(180deg,#080d1c,#0b1326);max-width:none;margin:0;border-block:1px solid var(--line)}
.section.dark > h2,.section.dark > p,.section.dark > .grid,.section.dark > .modules{max-width:1200px;margin-inline:auto}
.section.dark > h2{margin-bottom:24px}
.section-lead{color:var(--muted);max-width:780px;margin:0 0 32px}

/* Grid */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-2,.grid-3,.grid-4,.hero-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-2,.grid-3,.grid-4,.hero-stats{grid-template-columns:1fr}.links a:not(.cta){display:none}}

/* Growth section */
.feat-list{list-style:none;padding:0;margin:14px 0 18px}
.feat-list li{padding:8px 0 8px 22px;color:var(--muted);font-size:14.5px;position:relative;border-bottom:1px dashed rgba(148,163,184,.15)}
.feat-list li:before{content:"✓";position:absolute;left:0;top:8px;color:#22d3ee;font-weight:900}
.feat-list li b{color:#e2e8f0}
.growth-stats{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.growth-stats > div{padding:18px;border-radius:var(--r);background:linear-gradient(135deg,rgba(34,211,238,.10),rgba(139,92,246,.10));border:1px solid rgba(99,102,241,.25);text-align:center}
.growth-stats b{display:block;font-size:28px;font-weight:900;background:var(--grad);-webkit-background-clip:text;color:transparent}
.growth-stats span{font-size:12.5px;color:var(--muted)}
@media (max-width:900px){.growth-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.growth-stats{grid-template-columns:1fr}}

/* WHY US grid */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
@media (max-width:1100px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr}}
.why-card{position:relative;padding:26px 22px 22px;border-radius:var(--r);background:linear-gradient(180deg,#0f172a,#0c1426);border:1px solid var(--line);overflow:hidden;transition:.25s}
.why-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(34,211,238,.45)}
.why-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--grad);opacity:.85}
.why-num{position:absolute;right:16px;top:14px;font-size:42px;font-weight:900;line-height:1;background:var(--grad);-webkit-background-clip:text;color:transparent;opacity:.18}
.why-card h3{margin:8px 0 10px;font-size:16.5px;line-height:1.4}
.why-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.65}
.why-card p b{color:#fbbf24}
.why-card.highlight-cyan:before{background:linear-gradient(90deg,#22d3ee,#3b82f6)}
.why-card.highlight-purple:before{background:linear-gradient(90deg,#8b5cf6,#ec4899)}
.why-card.highlight-pink:before{background:linear-gradient(90deg,#f472b6,#fb7185)}
.why-card.highlight-amber:before{background:linear-gradient(90deg,#fbbf24,#f97316)}

/* Compare table */
.compare-title{margin:64px 0 18px;font-size:24px}
.compare-table{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:#0c1426}
.compare-table table{width:100%;border-collapse:collapse;min-width:680px}
.compare-table th,.compare-table td{padding:14px 16px;text-align:left;font-size:14.5px;border-bottom:1px solid rgba(148,163,184,.10)}
.compare-table th{background:linear-gradient(180deg,#0f172a,#0c1426);color:#cbd5e1;font-weight:700;font-size:13.5px}
.compare-table th small{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:2px}
.compare-table td{color:var(--muted)}
.compare-table th.us,.compare-table td.us{background:linear-gradient(135deg,rgba(34,211,238,.10),rgba(139,92,246,.10));color:#e2e8f0;font-weight:700}
.compare-table tr:hover td{background:rgba(59,130,246,.05)}
.compare-table tr:last-child td{border-bottom:0}


/* Card */
.card{padding:24px;border-radius:var(--r);background:linear-gradient(180deg,#0f172a,#0c1426);border:1px solid var(--line);transition:.25s}
.card:hover{transform:translateY(-3px);border-color:rgba(59,130,246,.4);box-shadow:0 20px 40px -20px rgba(59,130,246,.4)}
.card .ic{font-size:30px;margin-bottom:12px}
.card p{color:var(--muted);margin:0;font-size:14.5px}
.linkcard h3{background:var(--grad);-webkit-background-clip:text;color:transparent}

/* Modules */
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.modules{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.modules{grid-template-columns:1fr}}
.mod-group{padding:20px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.mod-group h4{margin:0 0 10px;color:var(--c1);font-size:14px;letter-spacing:1px;text-transform:uppercase}
.mod-group ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mod-group li{font-size:13px;padding:5px 10px;border-radius:8px;background:rgba(34,211,238,.08);color:#cbd5e1;border:1px solid rgba(34,211,238,.15)}

/* Tech */
.tech{padding:18px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);font-size:14px;color:var(--muted)}
.tech b{display:block;color:#fff;margin-bottom:6px;font-size:15px}

/* Pricing */
.price{display:flex;flex-direction:column;gap:14px}
.price h3{font-size:22px}
.price .p-tag{font-size:13px;color:var(--c1);font-weight:700}
.price ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--muted)}
.price ul li::before{content:"✓ ";color:var(--ok);font-weight:800}
.price .btn{margin-top:auto;text-align:center}
.price.highlight{border-color:rgba(59,130,246,.55);box-shadow:0 0 0 1px rgba(59,130,246,.4),0 30px 60px -30px rgba(59,130,246,.45);transform:scale(1.02)}

/* Contact */
.contact{text-align:center;max-width:720px;margin:0 auto}
.contact p{color:var(--muted);margin:12px 0 28px}
.contact-grid{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Footer */
footer{border-top:1px solid var(--line);padding:48px 32px;background:#060a16}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;color:var(--muted);font-size:14px}
.footer-inner h5{color:#fff;margin:0 0 10px;font-size:13px;letter-spacing:1px;text-transform:uppercase}
.footer-inner a{display:block;padding:4px 0}
.footer-inner a:hover{color:#fff}
@media (max-width:760px){.footer-inner{grid-template-columns:1fr 1fr}}

/* Floating pager (bottom-right, 4 buttons: top/up/down/bottom) */
#pager{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;gap:8px;
  padding:10px;border-radius:16px;background:rgba(15,23,42,.78);border:1px solid var(--line);
  backdrop-filter:saturate(160%) blur(12px);box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
#pager button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#cbd5e1;background:linear-gradient(180deg,#0f172a,#0c1426);
  border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:.18s}
#pager button:hover{color:#fff;border-color:rgba(34,211,238,.55);transform:translateY(-1px);
  box-shadow:0 10px 22px -12px rgba(34,211,238,.55)}
#pager button:active{transform:translateY(0)}
#pager.at-top    button[data-act="top"],
#pager.at-top    button[data-act="up"]{opacity:.35;pointer-events:none}
#pager.at-bottom button[data-act="bottom"],
#pager.at-bottom button[data-act="down"]{opacity:.35;pointer-events:none}
@media (max-width:560px){
  #pager{right:12px;bottom:12px;padding:8px;gap:6px}
  #pager button{width:36px;height:36px;font-size:13px}
}