:root{
  --bg:#ffffff;
  --bg-soft:#f6f7fb;
  --card:#ffffff;
  --text:#0b1020;
  --muted:#58627a;
  --brand:#6d66ff;
  --brand-2:#00d4ff;
  --accent:#22d3ee;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --border:rgba(8,15,35,.08);
  --shadow:0 10px 25px rgba(10,20,40,.08);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --container:1180px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.btn{
  --btn-bg:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.15rem; border-radius:12px; color:white; font-weight:650;
  border:1px solid rgba(255,255,255,.14); background:var(--btn-bg);
  box-shadow:0 10px 20px rgba(109,102,255,.25), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px); filter:saturate(1.05); box-shadow:0 16px 30px rgba(109,102,255,.30)}
.btn.secondary{
  --btn-bg:transparent; color:var(--text); background:transparent; border-color:var(--border);
  box-shadow:var(--shadow);
}
.btn.ghost{background:transparent; border:1px solid var(--border); color:var(--text)}
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.3rem .6rem; border-radius:999px; font-size:.82rem;
  color:#0b1020; background:linear-gradient(135deg,#a5f3fc,#93c5fd); border:1px solid rgba(255,255,255,.35)
}
header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(150%) blur(8px);
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.nav-left{display:flex; align-items:center; gap:20px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px}
.logo svg{width:28px; height:28px}
.nav-links{display:flex; gap:16px; color:var(--muted)}
.nav-links a{padding:8px 10px; border-radius:10px}
.nav-links a:hover{color:var(--text); background:rgba(255,255,255,.05)}
.nav-ctas{display:flex; align-items:center; gap:10px}
.nav-ctas .btn{padding:.7rem .95rem; white-space:nowrap}
@media (max-width: 1200px){
  .nav-links a{padding:6px 8px}
  .nav-ctas{gap:8px}
  .nav-ctas .btn{padding:.6rem .85rem}
}
.mobile-menu-btn{display:none; background:transparent; border:1px solid var(--border); border-radius:10px; padding:.6rem; color:var(--text)}
@media (max-width: 960px){
  .nav{height:64px}
  .nav-links{display:none}
  .nav-ctas .secondary{display:none}
  .nav-ctas .btn{display:none}
  .mobile-menu-btn{display:inline-flex}
}
.mobile-menu{
  display:none; border-top:1px solid var(--border); background:var(--bg); padding:12px 0
}
.mobile-menu.open{display:block}
.mobile-menu a{display:block; padding:12px 20px; color:var(--muted)}
.mobile-menu a:hover{color:var(--text); background:rgba(255,255,255,.04)}
.theme-toggle{display:none}
main{display:block}
/* Hero */
.hero{
  position:relative;
  padding:64px 0 40px;
  background:
    radial-gradient(1000px 520px at 80% -10%, rgba(109,102,255,.06), transparent 60%),
    radial-gradient(800px 420px at 10% 0%, rgba(0,212,255,.06), transparent 55%);
}
.hero .grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:26px; align-items:start;
}
@media (max-width: 1020px){
  .hero .grid{grid-template-columns:1fr; gap:32px}
}
.eyebrow{display:flex; gap:10px; align-items:center; margin-bottom:16px}
.hero h1{
  font-size: clamp(28px, 4.2vw, 56px); line-height:1.08; margin:0 0 12px;
  letter-spacing:-.02em;
}
.hero p{
  font-size: clamp(16px, 2vw, 20px); color:var(--muted); margin:0 0 24px
}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.hero-ctas .btn{white-space:nowrap}
.trust{
  display:flex; align-items:center; gap:20px; margin-top:26px; color:var(--muted); flex-wrap:wrap
}
.trust-logos{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.trust-logos .pill{
  border:1px solid var(--border); padding:8px 12px; border-radius:999px; font-size:.9rem; background:rgba(255,255,255,.02)
}
.hero-visual{
  position:relative; z-index:0; min-height:380px; border-radius:var(--radius-lg);
  border:1px solid var(--border); background:
    radial-gradient(800px 400px at 20% -10%, rgba(0,212,255,.20), transparent 60%),
    radial-gradient(700px 360px at 90% 20%, rgba(109,102,255,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  box-shadow:var(--shadow); overflow:hidden;
}
.viz{
  position:absolute; inset:0; display:grid; place-items:center; padding:20px;
}
.copy{position:relative; z-index:1}
.viz .card{
  width:min(520px, 92%); background:var(--card); border:1px solid var(--border);
  box-shadow:var(--shadow); border-radius:16px; padding:18px; color:var(--text)
}
.viz .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.avatar{
  width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#93c5fd,#a5f3fc);
  border:2px solid rgba(255,255,255,.5)
}
.dot{width:10px; height:10px; border-radius:50%; background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.25)}
.spark{
  position:absolute; inset:auto 20px 20px auto; padding:10px 12px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text); font-size:.92rem
}
/* Sections */
section{padding:64px 0}
section + section{border-top:1px solid var(--border)}
img, svg{max-width:100%; height:auto}
.section-header{display:flex; flex-direction:column; gap:10px; margin-bottom:26px}
.section-header h2{margin:0; font-size: clamp(22px, 3vw, 36px); letter-spacing:-.01em}
.section-header p{margin:0; color:var(--muted)}
/* Features grid */
.features{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px
}
@media (max-width: 1020px){.features{grid-template-columns:1fr 1fr}}
@media (max-width: 720px){.features{grid-template-columns:1fr}}
.feature{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px
}
.icon{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(109,102,255,.2), rgba(0,212,255,.18));
  color:white; border:1px solid rgba(255,255,255,.25)
}
.feature h3{margin:.2rem 0; font-size:1.1rem}
.feature p{margin:0; color:var(--muted)}
.feature ul{margin:12px 0 0; padding-left:18px; color:var(--muted)}
/* Stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width: 1020px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.stats{grid-template-columns:1fr}}
.stat{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; text-align:center; box-shadow:var(--shadow)
}
.stat .num{font-size: clamp(22px, 3.4vw, 34px); font-weight:800; letter-spacing:-.02em}
.stat .caption{color:var(--muted); margin-top:4px}
/* How */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width: 900px){.steps{grid-template-columns:1fr}}
.step{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.step .n{width:28px; height:28px; border-radius:8px; background:rgba(109,102,255,.2); display:grid; place-items:center; font-weight:700}
/* Integrations */
.integrations{
  display:grid; grid-template-columns:repeat(6,1fr); gap:10px
}
@media (max-width: 1020px){.integrations{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 640px){.integrations{grid-template-columns:repeat(2,1fr)}}
.integration{
  border:1px solid var(--border); border-radius:14px; padding:14px; background:var(--card); box-shadow:var(--shadow);
  display:flex; align-items:center; gap:10px
}
.integration .logo{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.06)
}
/* Case studies */
.cases{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width: 960px){.cases{grid-template-columns:1fr}}
.case{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.quote{font-size:1.05rem}
.author{margin-top:12px; color:var(--muted)}
/* Pricing */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width: 1020px){.pricing{grid-template-columns:1fr}}
.plan{
  background:linear-gradient(180deg, rgba(109,102,255,.08), transparent 28%) , var(--card);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow)
}
.plan .title{display:flex; align-items:center; justify-content:space-between}
.plan .price{font-size:32px; font-weight:800; letter-spacing:-.02em}
.plan ul{margin:12px 0 0; padding-left:18px; color:var(--muted)}
/* Security */
.security{display:grid; grid-template-columns:1.1fr .9fr; gap:16px}
@media (max-width: 1020px){.security{grid-template-columns:1fr}}
.shield{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.compliance{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.tag{border:1px solid var(--border); padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.04)}
/* FAQ */
.faq{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 960px){.faq{grid-template-columns:1fr}}
.qa{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
details summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:600}
details summary::-webkit-details-marker{display:none}
/* Lead form */
.lead{display:grid; grid-template-columns:1.1fr .9fr; gap:16px}
@media (max-width: 1020px){.lead{grid-template-columns:1fr}}
.form{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow)
}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 640px){.grid-2{grid-template-columns:1fr}}
label{display:block; font-size:.92rem; margin:6px 0}
input, select, textarea{
  width:100%; border:1px solid var(--border); background:rgba(255,255,255,.02);
  color:var(--text); padding:.8rem .9rem; border-radius:12px; outline:none;
  transition:border-color .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder{color:color-mix(in srgb, var(--muted) 70%, transparent)}
input:focus, select:focus, textarea:focus{border-color:color-mix(in srgb, var(--brand) 50%, var(--border))}
.form small{color:var(--muted)}
.notice{font-size:.9rem; color:var(--muted)}
.success{background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.38); color:#86efac; padding:12px; border-radius:12px; display:none}
.error{background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.38); color:#fecaca; padding:12px; border-radius:12px; display:none}
/* Footer */
footer{border-top:1px solid var(--border); padding:40px 0; margin-top:40px; background:color-mix(in srgb, var(--bg) 92%, transparent)}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:16px}
@media (max-width: 960px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.foot{grid-template-columns:1fr}}
.foot h4{margin:0 0 10px}
.foot a{display:block; color:var(--muted); padding:6px 0}
.copyright{margin-top:18px; color:var(--muted); font-size:.92rem}
/* Animations */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}
/* Skip link */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:10px; top:10px; width:auto; height:auto; background:#111827; color:#fff; padding:8px 10px; z-index:999}