:root{
  --bg:#0B0D10; --surface:#11141A; --edge:#1C2230;
  --text:#E8EAED; --muted:#A6B0C3;
  --accent:#7C5CFF; --accent2:#00E0FF; --ok:#30E88C;
}
body{background:var(--bg);color:var(--text)}
.fx-wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* header */
.fx-header{position:sticky;top:0;z-index:50;background:rgba(11,13,16,.55);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(28,34,48,.6)}
.fx-header__in{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0}
.fx-brand{display:flex;gap:8px;align-items:center;color:inherit;text-decoration:none}
.fx-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--edge);text-decoration:none;color:var(--text);transition:transform .18s ease, box-shadow .18s ease, border-color .18s}
.btn:hover{border-color:#26324A;box-shadow:0 6px 20px rgba(0,0,0,.28)}
.btn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.btn--primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border:0;color:#0B0D10;font-weight:800}

/* hero */
.fx-hero{border:1px solid var(--edge);border-radius:18px;overflow:hidden;margin:18px 0 22px;padding:28px;background:
 radial-gradient(1100px 420px at 8% 0%, rgba(124,92,255,.15), transparent 60%),
 radial-gradient(800px 480px at 100% 40%, rgba(0,224,255,.10), transparent 70%),
 linear-gradient(#0B0D10,#0B0D10)}
.fx-orb{position:absolute;right:-120px;top:-140px;width:520px;height:520px;border-radius:50%;
 background:radial-gradient(40% 40% at 35% 35%,rgba(124,92,255,.6),rgba(0,224,255,.3) 60%,transparent 70%);
 filter:blur(10px) saturate(120%);pointer-events:none}
.fx-grid-hero{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
@media(max-width:980px){.fx-grid-hero{grid-template-columns:1fr}}
.fx-h1{font-weight:900;font-size:clamp(32px,4vw,52px);line-height:1.05;margin:0 0 10px}
.fx-h2{font-weight:900;margin:2px 0 12px}
.fx-sub{color:var(--muted);max-width:56ch;margin:0 0 14px}
.fx-cta{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.fx-stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{border:1px solid var(--edge);border-radius:999px;padding:6px 10px;color:#C8D0DF;font-size:12px}

/* card & code */
.u-card{background:rgba(17,20,26,.9);border:1px solid var(--edge);border-radius:14px;padding:18px}
.u-k{font-family:ui-monospace,Menlo,Consolas,monospace}
.aside-h3{margin:0 0 6px}
.fx-code{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#0E1218;border:1px dashed #243048;padding:12px;border-radius:12px;color:#DDE3F0}

/* pills */
.fx-pills{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0;padding:0;list-style:none}
.pill{border:1px solid var(--edge);color:#BFC7D7;border-radius:999px;padding:4px 10px;font-size:12px}

/* small steps */
.fx-steps.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
@media(max-width:980px){.fx-steps.mini{grid-template-columns:1fr}}

/* timeline */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:980px){.timeline{grid-template-columns:1fr}}
.time-step{position:relative;background:var(--surface);border:1px solid var(--edge);border-radius:14px;padding:18px}
.time-step .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 0 4px rgba(124,92,255,.12);position:absolute;left:18px;top:18px}

/* detections */
.detect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:980px){.detect-grid{grid-template-columns:1fr}}
.detect{background:var(--surface);border:1px solid var(--edge);border-radius:14px;padding:18px}
.badge{display:inline-block;border:1px solid var(--edge);border-radius:999px;padding:2px 8px;color:#BFC7D7;font-size:12px;margin-bottom:6px}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:980px){.svc-grid{grid-template-columns:1fr}}
.card--neon{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--edge);border-radius:14px;padding:18px}
.card--neon::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(120deg,rgba(124,92,255,.25),rgba(0,224,255,.25));opacity:.08;transition:opacity .18s}
.card--neon:hover::before{opacity:.16}
.svc-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:radial-gradient(120% 120% at 0% 0%,rgba(124,92,255,.35),rgba(0,224,255,.15));border:1px solid #2a2f3c;margin-bottom:10px}
.svc-h3{font-size:18px;font-weight:800;margin:0 0 6px}
.svc-p{color:var(--muted);font-size:14px;margin:0 0 10px}

/* pricing */
.price-grid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin:18px 0}
@media(max-width:980px){.price-grid{grid-template-columns:1fr}}
.card--price{background:var(--surface);border:1px solid var(--edge);border-radius:14px;padding:20px}
.card--price.is-pro{border-color:rgba(124,92,255,.55);box-shadow:0 0 0 1px rgba(124,92,255,.35) inset}
.price-num{font-size:32px;font-weight:900;margin:6px 0 10px}
.price-list{color:var(--muted);font-size:14px;margin:0 0 14px 18px}

/* testimonials carousel */
.caro{position:relative;border:1px solid var(--edge);border-radius:16px;overflow:hidden;background:rgba(17,20,26,.9)}
.caro-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
.caro-track{display:flex;gap:14px;padding:0 16px 18px;transition:transform .35s ease;will-change:transform}
.caro-card{min-width:320px;max-width:360px;flex:0 0 auto;padding:16px;background:linear-gradient(180deg,rgba(124,92,255,.10),rgba(124,92,255,0) 40%),var(--surface);border:1px solid var(--edge);border-radius:12px}
.caro-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.caro-ava{width:34px;height:34px;border-radius:50%;background:#1a2232;display:grid;place-items:center}
.caro-name{font-weight:800}.caro-role{color:var(--muted);font-size:12px}.caro-quote{color:#DDE3F0;margin:6px 0 0}
.caro-btns{display:flex;gap:8px}.caro-btn{width:34px;height:34px;border-radius:999px;border:1px solid var(--edge);background:#0E1218;display:grid;place-items:center}
.caro-btn:disabled{opacity:.5;cursor:not-allowed}

/* bullets + footer */
.fx-bullets{margin:0;list-style:disc;padding-left:18px;color:#C8D0DF}
.fx-footer{padding:22px 0;display:flex;justify-content:space-between;align-items:center}
.fx-footer-links{display:flex;gap:10px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .35s, transform .35s}
.reveal.is-in{opacity:1;transform:none}