:root{
  --bg:#0b0e13;
  --panel:#11151d;
  --panel-2:#0f141c;
  --text:#d6deea;
  --muted:#9aa6b2;
  --accent:#8ec5ff;
  --border:#1a2230;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);font:16px/1.5 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg)}

.wrap{max-width:1180px;margin:0 auto;padding:24px}

a{color:inherit;text-decoration:none}
a:hover{opacity:.9}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border:1px solid var(--border);border-radius:12px;
  background:var(--panel);box-shadow:var(--shadow)
}
.btn.primary{background:var(--accent);color:#0b0e13;border-color:transparent}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px;font-size:14px}
.btn.block{width:100%}

.muted{color:var(--muted)}
.center{text-align:center}

/* NAV */
.site-nav{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(11,14,19,.9), rgba(11,14,19,.6));backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;letter-spacing:.3px}
.links{display:flex;gap:18px;align-items:center}
.links a{opacity:.95}
.dots{display:none;gap:4px;background:transparent;border:0;cursor:pointer;padding:8px}
.dots span{width:4px;height:4px;border-radius:50%;background:var(--text);display:block}

/* mobile sheet */
.sheet{position:fixed;inset:auto 0 0 0;background:rgba(10,13,18,.96);border-top:1px solid var(--border);backdrop-filter:blur(8px);padding:18px 24px}
.sheet-links{display:grid;gap:14px}
.sheet[hidden]{display:none}

@media (max-width: 920px){
  .links{display:none}
  .dots{display:inline-flex}
}

/* HERO */
.bg{
  background:
    radial-gradient(1000px 600px at 70% -10%, rgba(110,160,255,.08) 0%, transparent 60%),
    radial-gradient(800px 500px at -10% 20%, rgba(110,160,255,.06) 0%, transparent 60%),
    var(--bg);
}

.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;padding:40px 0 10px}
.hero-left .chip-row{display:flex;gap:12px;margin-bottom:18px}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.02);backdrop-filter:blur(6px);box-shadow:var(--shadow);font-size:14px}
.title{font-size:44px;line-height:1.1;margin:4px 0 10px}
.accent{color:var(--accent)}
.lead{color:var(--muted);max-width:640px}
.cta{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}

/* floating pills */
.hero-right{position:relative;min-height:280px;border-radius:20px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow)}
.float{position:absolute;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02);backdrop-filter:blur(6px);animation:drift 9s ease-in-out infinite}
.float-a{left:22%;top:22%}
.float-b{right:18%;top:36%;animation-delay:.9s}
.float-c{left:28%;bottom:18%;animation-delay:1.6s}
.float-d{right:20%;bottom:26%;animation-delay:.3s}
@keyframes drift{
  0%,100%{transform:translateY(0) translateX(0)}
  50%{transform:translateY(-8px) translateX(6px)}
}

/* TRUST */
.trust{display:grid;place-items:center;text-align:center;padding:22px 0 10px;color:var(--muted)}
.avatars{display:flex;gap:10px;margin-top:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,#2b3240,#171c26);border:1px solid var(--border);position:relative}
.avatar .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#5cf29d;right:-2px;bottom:-2px;border:2px solid var(--panel)}

/* GRID FEATURE CARDS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px}
.card.lg{min-height:240px}
.card-head h2{margin:0;display:flex;align-items:center;gap:8px}
.hicon{width:18px;height:18px;display:inline-block;vertical-align:middle;opacity:.9;filter:grayscale(1) contrast(1.1);}

/* existing visuals */
.diagram{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.diagram span{padding:10px 12px;border:1px dashed var(--border);border-radius:12px;background:rgba(255,255,255,.02)}
.shield{height:160px;border-radius:14px;background:radial-gradient(closest-side, rgba(142,197,255,.25), transparent), linear-gradient(180deg,#1a2432,#111820);border:1px solid var(--border)}
.radar{height:160px;border-radius:14px;background:
  radial-gradient(closest-side, rgba(255,80,80,.25), transparent 60%),
  repeating-radial-gradient(circle at 50% 50%, transparent 0 12px, rgba(255,255,255,.03) 12px 13px),
  linear-gradient(180deg,#111820,#0d1219);border:1px solid var(--border)}
.setup{list-style:none;margin:10px 0 0 0;padding:0}
.setup li{padding:8px 0;border-bottom:1px dashed var(--border)}
.setup li.done{color:#86f6b0;border-bottom-color:transparent}

/* INTEGRATIONS */
.integrations{padding:26px 0}
.integrations h2{margin:0 0 6px}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px;min-height:160px}
.tile.tall{min-height:220px}
.tile-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#3a465c,#1a2130);border:1px solid var(--border);margin-bottom:10px}
.logo-icon{width:22px;height:22px;display:block}

/* MUSIC */
.music{padding:10px 0 6px}
.wave{height:120px;border-radius:12px;border:1px solid var(--border);background:
  repeating-linear-gradient(90deg, rgba(142,197,255,.25) 0 2px, transparent 2px 6px);}
.player,.spotify{height:120px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg,#1a2432,#111820)}

/* MORE FEATURES */
.more{padding:28px 0 6px}
.mini-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:14px;min-height:120px}
.mini-card h4{display:flex;align-items:center;gap:8px;margin:0 0 6px}

/* REVIEWS MARQUEE */
.reviews{margin:22px 0}
.marquee{overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--panel);box-shadow:var(--shadow)}
.track{display:flex;gap:40px;padding:12px;white-space:nowrap;animation:scroll 30s linear infinite}
.track span{color:var(--muted)}
@keyframes scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* PRICING CTA */
.pricing-cta .cluster{display:flex;gap:12px;justify-content:center;margin-top:6px}

/* FOOTER */
.footer{border-top:1px solid var(--border);background:var(--panel-2)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 24px}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:12px}
  .title{font-size:36px}
}