:root{
  --bg:#070912;
  --panel:rgba(16,19,31,.68);
  --panel2:rgba(18,23,38,.72);
  --text:#e9ecf1;
  --muted:rgba(233,236,241,.72);
  --border:rgba(255,255,255,.10);
  --shadow: 0 22px 70px rgba(0,0,0,.38);
  --accent:#6ea8ff;
  --accent2:#a78bfa;
  --good:#42d392;
  --radius:18px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1100px; margin:0 auto; padding: 0 20px; }

/* ---------- Background ---------- */
.bg{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  overflow:hidden;
}
.grid{
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 40% 10%, rgba(0,0,0,1), rgba(0,0,0,.2) 55%, rgba(0,0,0,0) 75%);
  opacity:.35;
}
.noise{
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  opacity:.06;
  mix-blend-mode: overlay;
}
.blob{
  position:absolute;
  width:520px;
  height:520px;
  border-radius: 999px;
  filter: blur(45px);
  opacity:.52;
  transform: translate3d(0,0,0);
}
.b1{ left:-140px; top:-180px; background: radial-gradient(circle at 30% 30%, #6ea8ff, transparent 55%); }
.b2{ right:-220px; top:60px; background: radial-gradient(circle at 30% 30%, #a78bfa, transparent 55%); }
.b3{ left:20%; bottom:-260px; background: radial-gradient(circle at 30% 30%, #42d392, transparent 55%); }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(7,9,18,.55);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing: .12em;
}
.brand.small{ letter-spacing:.08em; opacity:.9; }
.brand-mark{
  width:14px;
  height:14px;
  border-radius:4px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 28px rgba(110,168,255,.25);
}
.nav-links{
  display:flex;
  align-items:center;
  gap:16px;
}
.nav-links a{
  font-size: 14px;
  color: var(--muted);
  padding: 10px 10px;
  border-radius: 12px;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.nav-links a:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.nav-cta{
  background: linear-gradient(135deg, rgba(110,168,255,.15), rgba(167,139,250,.15));
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text) !important;
}
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background: rgba(255,255,255,.85);
  border-radius:999px;
}

/* ---------- Hero ---------- */
.hero{
  padding: 70px 0 40px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items:start;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size: 13px;
}
.pill .dot{
  width:8px;
  height:8px;
  border-radius:99px;
  background: var(--good);
  box-shadow: 0 0 0 6px rgba(66,211,146,.10);
}
.hero-title{
  margin: 16px 0 10px;
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1.03;
  letter-spacing:-.02em;
}
.grad{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.hero-sub{
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 0 18px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 8px 0 18px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border .2s ease;
  will-change: transform;
}
.btn.primary{
  background: linear-gradient(135deg, rgba(110,168,255,.92), rgba(167,139,250,.92));
  color: #0b0f1a;
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 18px 44px rgba(110,168,255,.16);
}
.btn.ghost{
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(0,0,0,.32);
}
.btn:active{ transform: translateY(0px); }

/* Metrics */
.hero-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
.metric-card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
.metric-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.metric-kicker{
  color: var(--muted);
  font-size: 12px;
}
.chip{
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(233,236,241,.9);
}
.metric-value{
  font-weight: 900;
  letter-spacing: -.02em;
}
.metric-note{
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}

/* Right panel */
.panel{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.panel-dots span{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius: 99px;
  margin-right: 6px;
  background: rgba(255,255,255,.22);
}
.panel-title{
  font-size: 13px;
  color: rgba(233,236,241,.9);
  font-weight: 800;
}
.panel-body{
  padding: 14px;
}
.flow{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.node{
  display:flex;
  gap:12px;
  align-items:center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(12,16,28,.65);
  border: 1px solid rgba(255,255,255,.08);
}
.node-icon{
  width:38px;
  height:38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.node-title{ font-weight: 900; }
.node-sub{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.arrow{
  text-align:center;
  color: rgba(233,236,241,.35);
  font-weight: 900;
  letter-spacing:.3em;
}
.panel-foot{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size: 12px;
}
.status-dot{
  width:10px;
  height:10px;
  border-radius:99px;
  background: var(--good);
  box-shadow: 0 0 0 6px rgba(66,211,146,.12);
}

/* ---------- Sections ---------- */
.section{
  padding: 60px 0;
}
.section-head{
  margin-bottom: 18px;
}
.section-head h2{
  margin:0 0 8px;
  font-size: 26px;
  letter-spacing:-.02em;
}
.section-head p{
  margin:0;
  color: var(--muted);
  max-width: 70ch;
}

/* Cards */
.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  transition: transform .2s ease, border .2s ease, background .2s ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(110,168,255,.25);
  background: rgba(255,255,255,.06);
}
.card-icon{
  font-size: 22px;
  margin-bottom: 10px;
}
.card h3{ margin: 0 0 8px; }
.card p{
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.6;
}
.card ul{
  margin:0;
  padding-left: 18px;
  color: rgba(233,236,241,.80);
}
.card li{ margin: 7px 0; }

/* Steps */
.steps{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.step{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 16px;
  display:flex;
  gap: 14px;
}
.step-num{
  font-weight: 900;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  height: fit-content;
  color: rgba(233,236,241,.92);
}
.step h3{ margin:0 0 6px; }
.step p{ margin:0; color: var(--muted); line-height: 1.6; }

/* Proof */
.proof-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.proof{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 16px;
}
.proof h3{ margin:0 0 8px; }
.proof p{ margin:0; color: var(--muted); line-height: 1.6; }

/* FAQ */
.faq{
  display:grid;
  gap: 10px;
}
.faq-item{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 14px 14px;
}
.faq-item summary{
  cursor:pointer;
  font-weight: 900;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item p{
  color: var(--muted);
  margin: 10px 0 0;
  line-height: 1.6;
}

/* Contact */
.contact-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(110,168,255,.12), rgba(167,139,250,.10));
  box-shadow: var(--shadow);
}
.contact-card h2{ margin:0 0 8px; }
.contact-card p{ margin:0; color: var(--muted); }
.contact-actions{ display:flex; gap: 10px; flex-wrap:wrap; }

/* Footer */
.footer{
  padding: 36px 0 46px;
  display:flex;
  gap: 14px;
  justify-content:space-between;
  align-items:flex-end;
  color: rgba(233,236,241,.72);
}
.footer-right{ text-align:right; color: rgba(233,236,241,.52); }

/* ---------- Reveal Animations ---------- */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.show{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; padding-top: 40px; }
  .hero-metrics{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .proof-grid{ grid-template-columns: 1fr; }
  .contact-card{ flex-direction:column; align-items:flex-start; }
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute;
    top:68px;
    left:0;
    right:0;
    padding: 12px 20px 16px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    background: rgba(7,9,18,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding: 12px 12px; }
}