
*{box-sizing:border-box;margin:0;padding:0}
body.home{font-family:system-ui,Segoe UI,Arial,sans-serif;color:#eef2ff;background:#0b1020}
a{color:inherit;text-decoration:none}
.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);background:rgba(11,16,32,.75);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;gap:8px;align-items:center;font-weight:900;font-size:18px}
.logo i{color:#22d3ee}
.nav-links{display:flex;gap:18px;font-size:13px;color:#cbd5e1}
.nav-links a:hover{color:#fff}
.nav-acts{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-weight:700;font-size:13px;transition:.2s}
.btn.ghost{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.05)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.solid{background:#fff;color:#0b1220}
.btn.solid:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(255,255,255,.15)}
.btn.lg{padding:14px 22px}
.hero{padding:72px 20px 48px;background:radial-gradient(900px 500px at 20% -10%,rgba(236,72,153,.3),transparent 55%),radial-gradient(800px 480px at 90% 0%,rgba(34,211,238,.22),transparent 50%),linear-gradient(180deg,#1e1b4b,#0b1020)}
.hero-in{max-width:860px;margin:0 auto;text-align:center}
.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;margin-bottom:16px}
.hero h1{font-size:clamp(32px,5.5vw,52px);line-height:1.12;margin-bottom:14px}
.hero p{color:#cbd5e1;font-size:17px;max-width:620px;margin:0 auto 22px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:640px;margin:0 auto}
.hero-stats div{background:rgba(15,23,42,.5);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px}
.hero-stats b{display:block;font-size:16px}.hero-stats span{color:#94a3b8;font-size:12px}
.logos{padding:28px 20px;text-align:center;border-bottom:1px solid rgba(255,255,255,.06);background:#0b1020}
.logos p{color:#94a3b8;font-size:13px;margin-bottom:14px}
.logo-row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;color:#cbd5e1;font-weight:700;font-size:14px}
.logo-row span{display:flex;gap:8px;align-items:center;opacity:.85}
.sec{padding:64px 20px}.sec.alt{background:rgba(15,23,42,.45)}
.sec-in{max-width:1100px;margin:0 auto}
.sec h2{font-size:28px;margin-bottom:10px;text-align:center}
.lead{text-align:center;color:#94a3b8;max-width:620px;margin:0 auto 28px}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feat{background:rgba(15,23,42,.65);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;transition:.22s}
.feat:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.35);box-shadow:0 16px 40px rgba(0,0,0,.25)}
.feat i{color:#22d3ee;font-size:18px;margin-bottom:10px}
.feat h3{font-size:15px;margin-bottom:6px}.feat p{color:#94a3b8;font-size:13px;line-height:1.5}
.demo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.demo-card{background:#0b1220;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.06);transition:.22s}
.demo-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.3)}
.demo-art{height:140px}.demo-meta{padding:12px}.demo-meta strong{display:block;font-size:13px}.demo-meta span{color:#94a3b8;font-size:12px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.split h2,.split .lead{text-align:left;margin-left:0}
.checks{list-style:none;margin-top:14px}.checks li{display:flex;gap:10px;align-items:center;padding:8px 0;color:#cbd5e1}
.checks i{color:#34d399}
.code-card{background:#0b1220;border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden}
.code-top{padding:10px 14px;background:rgba(255,255,255,.04);font-size:12px;color:#94a3b8}
.code-card pre{padding:16px;font-size:13px;color:#a5f3fc;overflow:auto}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:900px;margin:0 auto}
.price{background:rgba(15,23,42,.65);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px;text-align:center;transition:.22s}
.price:hover{transform:translateY(-3px)}
.price.featd{border-color:rgba(34,211,238,.4);box-shadow:0 0 0 1px rgba(34,211,238,.15)}
.price .amt{font-size:28px;font-weight:900;margin:10px 0}.price p{color:#94a3b8;margin-bottom:14px;font-size:13px}
.cta-band{text-align:center;padding:64px 20px;background:linear-gradient(90deg,rgba(34,211,238,.15),rgba(167,139,250,.15))}
.cta-band h2{font-size:28px;margin-bottom:8px}.cta-band p{color:#cbd5e1;margin-bottom:18px}
.foot{padding:36px 20px 20px;border-top:1px solid rgba(255,255,255,.06);background:#080c18}
.foot-in{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-links{display:flex;gap:16px;color:#94a3b8;font-size:13px}
.copy{text-align:center;color:#64748b;font-size:12px;margin-top:18px}
@media(max-width:900px){
  .nav-links{display:none}.feat-grid,.demo-grid,.price-grid,.hero-stats{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
}
@media(max-width:560px){.feat-grid,.demo-grid,.price-grid,.hero-stats{grid-template-columns:1fr}}
