:root{
  /* Deeper premium navy + cleaner contrast */
  --bg:#05060B;
  --bg2:#0A0C14;
  --card:#101526;
  --text:#F5F7FA;
  --muted:#B7BCC8;
  --border:rgba(255,255,255,.08);
  /* Richer purple + warmer gold */
  --purple:#7C2CFF;
  --purpleGlow:#B48CFF;
  --orange:#FF6A00;
  --gold:#F6C25A;

  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 26px;
  --max: 1160px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(1200px 700px at 18% -10%, rgba(124,44,255,.24), transparent 65%),
             radial-gradient(900px 600px at 95% 10%, rgba(255,106,0,.14), transparent 60%),
             radial-gradient(900px 520px at 50% 110%, rgba(246,194,90,.08), transparent 60%),
             var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
  letter-spacing:-.01em;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit}

.skip-link{
  position:absolute;
  left:-999px; top:12px;
  padding:10px 12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  z-index:9999;
}
.skip-link:focus{left:12px}

.container{width:100%; max-width:var(--max); margin:0 auto; padding:0 20px}

.eyebrow{
  display:inline-flex;
  gap:10px;
  align-items:center;
  color:rgba(245,247,250,.85);
  font-weight:650;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.2em;
}
.grad{
  background: linear-gradient(90deg, var(--purpleGlow), var(--purple), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.h1{
  font-size: clamp(40px, 6vw, 64px);
  line-height:1.02;
  letter-spacing:-.04em;
  margin:18px 0 10px;
  position:relative;
}
.h1:before{
  content:"";
  position:absolute;
  left:-22px;
  top:-26px;
  width: min(560px, 110%);
  height: 200px;
  background: radial-gradient(closest-side, rgba(169,112,255,.22), rgba(139,61,255,.10), transparent 70%);
  filter: blur(6px);
  opacity:.95;
  pointer-events:none;
}
.h2{
  margin:0 0 14px;
  font-size: clamp(18px, 2.2vw, 22px);
  color:rgba(245,247,250,.92);
  font-weight:600;
}
.h3{
  margin:10px 0 8px;
  font-size: clamp(24px, 3.1vw, 36px);
  line-height:1.1;
  letter-spacing:-.03em;
}
.lead{
  margin:0 0 18px;
  color:rgba(183,188,200,.95);
  font-size: clamp(15px, 1.6vw, 18px);
  max-width: 62ch;
}
.sub{
  margin:0;
  color:rgba(183,188,200,.92);
  max-width: 70ch;
}

/* NAV */
.nav-wrap{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7,7,10,.70), rgba(7,7,10,.38));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-wrap.isSolid{
  background: rgba(7,7,10,.92);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nav{max-width:var(--max); margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.navDivider{height:1px; background:linear-gradient(90deg, transparent, rgba(139,61,255,.45), rgba(240,178,74,.22), transparent); opacity:.7}

.brand{display:flex; align-items:center; gap:12px; min-width: 190px}
.brandMark{
  width:40px; height:40px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(139,61,255,.10), 0 12px 30px rgba(139,61,255,.16);
}
.brandMark img{width:100%; height:100%; object-fit:cover}
.brandText{display:flex; flex-direction:column; line-height:1.05}
.brandName{font-weight:750; letter-spacing:-.03em}
.brandTag{font-size:12px; color:rgba(183,188,200,.92); margin-top:3px}

.navLinks{display:flex; align-items:center; gap:18px}
.navLinks a{
  font-size:14px;
  color:rgba(245,247,250,.85);
  padding:10px 10px;
  border-radius:12px;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.navLinks a:hover{background: rgba(255,255,255,.05); color:var(--text); transform: translateY(-1px)}
.navToggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  align-items:center; justify-content:center;
  gap:5px;
  padding:10px;
}
.navToggle span{
  display:block; width:100%; height:2px;
  background: rgba(245,247,250,.86);
  border-radius:999px;
}

/* Buttons */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:700;
  letter-spacing:-.01em;
  border-radius:16px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--text);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease), filter .16s var(--ease);
  cursor:pointer;
  user-select:none;
  overflow:hidden;
}
.btn:hover{transform: translateY(-1px) scale(1.01); box-shadow: 0 22px 55px rgba(0,0,0,.38); border-color: rgba(255,255,255,.16)}
.btn:active{transform: translateY(0) scale(.99); filter: brightness(1.08)}
.btn:focus-visible{outline: none; box-shadow: 0 0 0 4px rgba(139,61,255,.18), 0 22px 55px rgba(0,0,0,.38)}
.btn .ripple{
  position:absolute;
  border-radius: 999px;
  transform: translate(-50%,-50%) scale(0);
  pointer-events:none;
  background: radial-gradient(circle, rgba(245,247,250,.22), rgba(245,247,250,0) 65%);
  width: 220px; height:220px;
  animation: ripple .55s var(--ease) forwards;
  mix-blend-mode: screen;
}
@keyframes ripple{
  0%{transform: translate(-50%,-50%) scale(.15); opacity:.0}
  15%{opacity:.95}
  100%{transform: translate(-50%,-50%) scale(1.0); opacity:0}
}
.btn-primary{
  border-color: rgba(139,61,255,.55);
  background:
    radial-gradient(120% 140% at 20% 20%, rgba(169,112,255,.32), rgba(139,61,255,.16) 40%, rgba(20,24,36,.75) 70%),
    linear-gradient(90deg, rgba(139,61,255,.22), rgba(240,178,74,.10));
  box-shadow: 0 18px 60px rgba(139,61,255,.22);
}
.btn-primary:hover{box-shadow: 0 24px 80px rgba(139,61,255,.30), 0 0 0 1px rgba(240,178,74,.10) inset}
.btn-ghost{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
}
.btn-sm{padding:10px 12px; border-radius:14px}
.btn-block{width:100%}
.btnArrow{opacity:.8}
.btnGlow{
  position:absolute; inset:-1px;
  border-radius:inherit;
  background: radial-gradient(120% 120% at 20% 10%, rgba(169,112,255,.35), transparent 55%),
              radial-gradient(90% 90% at 80% 50%, rgba(255,122,0,.20), transparent 60%);
  filter: blur(12px);
  opacity:.0;
  transition: opacity .16s ease;
  pointer-events:none;
}
.btn-primary:hover .btnGlow{opacity:1}

/* HERO */
.hero{position:relative; padding: 78px 0 28px}
.heroInner{display:grid; grid-template-columns: 1.2fr .8fr; gap:34px; align-items:center}
.heroBg{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.heroParticles{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:.70;
}
.heroLines{
  position:absolute;
  inset:-30px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.0) 46px, rgba(169,112,255,.06) 47px, rgba(255,255,255,.0) 48px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.0) 56px, rgba(240,178,74,.04) 57px, rgba(255,255,255,.0) 58px);
  mask-image: radial-gradient(60% 55% at 40% 20%, #000 55%, transparent 80%);
  opacity:.30;
  animation: drift 10s linear infinite;
}
@keyframes drift{
  0%{transform: translate3d(0,0,0)}
  100%{transform: translate3d(-40px, 24px, 0)}
}
.heroGlow{
  position:absolute;
  width:760px; height:760px;
  filter: blur(40px);
  opacity:.95;
  transform: translateZ(0);
}
.heroGlow.g1{left:-280px; top:-330px; background: radial-gradient(circle, rgba(139,61,255,.33), transparent 60%)}
.heroGlow.g2{right:-340px; top:-240px; background: radial-gradient(circle, rgba(255,122,0,.18), transparent 60%)}
.heroGlow.g3{left:30%; bottom:-520px; background: radial-gradient(circle, rgba(240,178,74,.12), transparent 60%)}
.heroGrid{
  position:absolute; inset:-30px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(60% 55% at 40% 24%, #000 55%, transparent 75%);
  opacity:.40;
}
.heroNoise{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.12;
}
.heroOrbits{position:absolute; inset:0}
.orbit{
  position:absolute;
  width: 560px; height:560px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(139,61,255,.08) inset;
  opacity:.55;
}
.orbit.o1{left:62%; top:-150px; transform: rotate(18deg)}
.orbit.o2{left:54%; top:-80px; width: 720px; height:720px; opacity:.38}
.orbit.o3{left:56%; top:-30px; width: 920px; height:920px; opacity:.24}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(20,24,36,.55);
  color: rgba(245,247,250,.90);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}
.badge-float{position:relative; width:fit-content}
.dot{width:8px; height:8px; border-radius:99px; background: linear-gradient(90deg, var(--purpleGlow), var(--gold)); box-shadow: 0 0 0 3px rgba(139,61,255,.15)}

.heroCtas{display:flex; gap:12px; flex-wrap:wrap; margin: 18px 0 10px}
.trustPills{display:flex; gap:10px; flex-wrap:wrap; margin: 14px 0 10px}
.pill{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(183,188,200,.98);
  font-weight:650;
  font-size:13px;
  position:relative;
  overflow:hidden;
}
.pill[data-badge]:after{
  content:"";
  position:absolute;
  inset:-1px;
  background: linear-gradient(90deg, rgba(169,112,255,0), rgba(169,112,255,.18), rgba(240,178,74,.12), rgba(169,112,255,0));
  transform: translateX(-120%);
  opacity:.0;
}
.pill:hover{border-color: rgba(169,112,255,.22); color: rgba(245,247,250,.92)}
.pill:hover:after{
  opacity:1;
  animation: sheen 1.1s var(--ease);
}
@keyframes sheen{
  0%{transform: translateX(-120%)}
  100%{transform: translateX(120%)}
}

.miniProof{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top: 16px;
}
.stat{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(20,24,36,.62), rgba(20,24,36,.40));
  padding:12px 12px 10px;
  box-shadow: 0 18px 55px rgba(0,0,0,.20);
}
.kpi{font-weight:820; letter-spacing:-.03em; font-size:24px}
.kpi .unit{opacity:.82; margin-left:2px}
.label{margin-top:2px; font-size:12px; color: rgba(183,188,200,.94)}

/* Hero right */
.heroRight{display:flex; justify-content:flex-end}
.owlCard{
  width: min(420px, 100%);
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(169,112,255,.25), transparent 55%),
    radial-gradient(100% 120% at 90% 10%, rgba(255,122,0,.16), transparent 55%),
    linear-gradient(180deg, rgba(20,24,36,.78), rgba(20,24,36,.46));
  box-shadow: var(--shadow), 0 0 0 1px rgba(139,61,255,.12) inset;
  overflow:hidden;
}
.owlTop{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 0}
.owlBadge{
  font-weight:800;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(245,247,250,.92);
  opacity:.9;
}
.owlChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(183,188,200,.98);
  font-size:12px;
  font-weight:650;
}
.chipDot{width:8px; height:8px; border-radius:99px; background: rgba(255,122,0,.95); box-shadow: 0 0 0 4px rgba(255,122,0,.15)}
.owlFrame{position:relative; padding:16px}
.owlImg{
  width:100%;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  filter: saturate(1.08) contrast(1.02);
}
.owlScan{
  position:absolute;
  left:16px; right:16px; top:16px; bottom:16px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, transparent, rgba(169,112,255,.12), transparent),
    linear-gradient(90deg, rgba(255,255,255,.00), rgba(255,255,255,.06), rgba(255,255,255,.00));
  background-size: 100% 220px, 180px 100%;
  animation: scan 5.2s linear infinite;
  mix-blend-mode: screen;
  opacity:.55;
  pointer-events:none;
}
@keyframes scan{
  0%{background-position: 0 -220px, -180px 0}
  100%{background-position: 0 620px, 700px 0}
}
.owlBorder{
  position:absolute;
  inset:16px;
  border-radius: 22px;
  border:1px solid rgba(139,61,255,.20);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 38px rgba(139,61,255,.16);
  pointer-events:none;
}
.owlMeta{padding: 0 16px 16px; display:grid; gap:10px}
.metaRow{display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:10px 12px; border-radius: 14px;
  border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.14)}
.metaKey{color: rgba(183,188,200,.92)}
.metaVal{color: rgba(245,247,250,.92); font-weight:650}

/* SECTIONS */
.sectionHead{margin: 0 0 22px}
.strip{padding: 26px 0 26px}
.stripInner{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(14,16,22,.75), rgba(14,16,22,.35));
  box-shadow: 0 26px 90px rgba(0,0,0,.30);
  padding: 20px;
}
.stripTitle{margin-bottom: 14px}
.stripGrid{display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap:10px}
.optCard{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding: 14px 12px;
  transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
  display:flex; gap:10px; align-items:flex-start;
  position:relative;
  overflow:hidden;
}
.optCard:before{
  content:"";
  position:absolute;
  inset:-1px;
  background: linear-gradient(90deg, rgba(169,112,255,0), rgba(169,112,255,.20), rgba(240,178,74,.10), rgba(169,112,255,0));
  opacity:0;
  filter: blur(16px);
  transition: opacity .16s var(--ease);
  pointer-events:none;
}
.optCard:after{
  content:attr(data-tip);
  position:absolute;
  left:12px;
  right:12px;
  bottom:10px;
  transform: translateY(10px);
  opacity:0;
  padding:8px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,7,10,.85);
  color: rgba(183,188,200,.95);
  font-size:12px;
  pointer-events:none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.optCard:hover{
  transform: translateY(-2px);
  border-color: rgba(139,61,255,.20);
  box-shadow: 0 24px 70px rgba(0,0,0,.30), 0 0 0 1px rgba(240,178,74,.08) inset;
  background: rgba(255,255,255,.03);
}
.optCard:hover:before{opacity:1}
.optCard:hover:after{opacity:1; transform: translateY(0)}
.optIcon{
  width:34px; height:34px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(120% 120% at 20% 10%, rgba(169,112,255,.22), rgba(255,255,255,.02) 55%);
  display:grid; place-items:center;
  color: rgba(245,247,250,.92);
  flex:0 0 auto;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.optCard:hover .optIcon{transform: translateY(-1px) rotate(-2deg); box-shadow: 0 18px 55px rgba(139,61,255,.14)}
.optIcon svg{width:18px; height:18px}
.optName{font-weight:780; font-size:13px; letter-spacing:-.02em}
.optDesc{font-size:12px; color: rgba(183,188,200,.92); margin-top:4px}

.why{padding: 56px 0 34px}
.whyGrid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px}
.whyCard{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(139,61,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(20,24,36,.74), rgba(20,24,36,.42));
  padding: 18px 16px 16px;
  box-shadow: 0 26px 90px rgba(0,0,0,.26);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
  position:relative;
  overflow:hidden;
}
.whyCard:after{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(169,112,255,0), rgba(169,112,255,.22), rgba(240,178,74,.12), rgba(169,112,255,0));
  opacity:0;
  filter: blur(18px);
  transition: opacity .16s var(--ease);
  pointer-events:none;
}
.whyCard:hover{
  transform: translateY(-3px);
  border-color: rgba(169,112,255,.24);
  box-shadow: 0 30px 110px rgba(0,0,0,.32), 0 0 45px rgba(139,61,255,.10);
}
.whyCard:hover:after{opacity:1}
.whyIcon{
  width:44px; height:44px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(120% 120% at 20% 10%, rgba(169,112,255,.22), rgba(255,255,255,.02) 55%);
  display:grid; place-items:center;
  color: rgba(245,247,250,.92);
  margin-bottom: 12px;
}
.whyIcon svg{width:22px; height:22px}
.whyCard h4{margin: 0 0 8px; font-size:16px; letter-spacing:-.02em}
.whyCard p{margin:0; color: rgba(183,188,200,.95)}
.whyCard strong{color: var(--text)}

.process{padding: 34px 0 42px}
.steps{
  position:relative;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.connector{
  position:absolute;
  left: 7%;
  right: 7%;
  top: 40px;
  height: 1px;
  background: linear-gradient(90deg, rgba(139,61,255,.0), rgba(139,61,255,.5), rgba(240,178,74,.22), rgba(139,61,255,.0));
  opacity:.75;
}
.step{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(14,16,22,.80), rgba(14,16,22,.42));
  padding: 18px 16px 16px;
  box-shadow: 0 26px 90px rgba(0,0,0,.24);
  position:relative;
  overflow:hidden;
  transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.step:hover{
  transform: translateY(-2px);
  border-color: rgba(169,112,255,.22);
  box-shadow: 0 30px 110px rgba(0,0,0,.30);
}
.step:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(700px 220px at 30% 0%, rgba(169,112,255,.18), transparent 60%),
              radial-gradient(600px 220px at 80% 10%, rgba(255,122,0,.12), transparent 60%);
  opacity:.85;
  pointer-events:none;
}
.step>*{position:relative}
.stepTop{display:flex; align-items:center; justify-content:space-between; gap:12px}
.stepNum{font-weight:860; letter-spacing:-.03em; font-size:24px; opacity:.92}
.stepIcon{
  width:46px; height:46px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display:grid; place-items:center;
}
.stepIcon svg{width:22px; height:22px}
.step h4{margin: 10px 0 6px; font-size:16px}
.step p{margin:0; color: rgba(183,188,200,.94)}
.stepTag{
  margin-top: 12px;
  display:inline-flex;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  color: rgba(245,247,250,.86);
  font-weight:650;
  font-size:12px;
}

.pricing{padding: 46px 0 26px}
.priceGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.priceCard{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(20,24,36,.78), rgba(20,24,36,.42));
  padding: 18px 16px 16px;
  box-shadow: 0 26px 90px rgba(0,0,0,.22);
  position:relative;
  overflow:hidden;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.priceCard:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(520px 220px at 20% 0%, rgba(169,112,255,.20), transparent 60%),
              radial-gradient(420px 220px at 80% 10%, rgba(240,178,74,.10), transparent 60%);
  opacity:.75;
  pointer-events:none;
}
.priceCard>*{position:relative}
.priceCard:hover{
  transform: translateY(-3px);
  border-color: rgba(169,112,255,.26);
  box-shadow: 0 34px 120px rgba(0,0,0,.32), 0 0 0 1px rgba(139,61,255,.14) inset;
}
.priceCard:hover:after{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(169,112,255,.0), rgba(169,112,255,.25), rgba(240,178,74,.14), rgba(169,112,255,.0));
  filter: blur(14px);
  opacity:.9;
  pointer-events:none;
}
.priceTop{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.priceRec{
  font-weight:880;
  letter-spacing:-.02em;
  line-height:1.12;
  font-size:14px;
}
.priceLead{
  font-size:12px;
  color: rgba(245,247,250,.86);
  font-weight:800;
  padding:6px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  white-space:nowrap;
}
.priceTotal{
  font-size:30px;
  letter-spacing:-.04em;
  font-weight:880;
  margin: 12px 0 10px;
}
.badge-pop{
  position:absolute;
  top:12px; right:12px;
  border-radius:999px;
  padding:8px 10px;
  background: linear-gradient(90deg, rgba(139,61,255,.34), rgba(240,178,74,.16));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 55px rgba(139,61,255,.18);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
}
.badge-pop{animation: popFloat 2.8s var(--ease) infinite}
@keyframes popFloat{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-3px)}
}
.saveHint{
  font-size:12px;
  font-weight:750;
  color: rgba(240,178,74,.92);
  opacity:.0;
  transform: translateY(4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.priceCard:hover .saveHint{opacity:1; transform: translateY(0)}
.priceCard:active{transform: translateY(-1px) scale(.995)}

.priceTopRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom: 12px;
}
.priceToggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 10px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(14,16,22,.42);
}
.ptLabel{color: rgba(183,188,200,.92); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.ptBtn{
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(245,247,250,.88);
  padding: 9px 12px;
  font-weight:850;
  cursor:pointer;
  transition: transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.ptBtn:hover{transform: translateY(-1px); border-color: rgba(169,112,255,.22)}
.ptBtn.isOn{
  border-color: rgba(139,61,255,.35);
  background: radial-gradient(120% 140% at 20% 10%, rgba(169,112,255,.22), rgba(255,255,255,.02) 60%);
}
.priceHint{
  display:flex; align-items:center; gap:10px;
  color: rgba(183,188,200,.92);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(14,16,22,.26);
  border-radius: 18px;
  padding: 10px 12px;
}
.spark{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(90deg, rgba(169,112,255,.95), rgba(240,178,74,.85));
  box-shadow: 0 0 0 4px rgba(139,61,255,.14);
  animation: spark 1.8s var(--ease) infinite;
}
@keyframes spark{
  0%,100%{transform: scale(1); opacity:.85}
  50%{transform: scale(1.25); opacity:1}
}
.popular{
  border-color: rgba(139,61,255,.32);
  box-shadow: 0 36px 140px rgba(139,61,255,.16), 0 26px 90px rgba(0,0,0,.22);
}
.priceCard.popular{padding-top: 26px}
.priceCard.popular .priceTop{padding-right: 86px}
.priceNote{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px}
.noteCard{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(14,16,22,.40);
  padding: 14px 14px;
}
.noteTitle{font-weight:800; letter-spacing:-.02em}
.noteText{margin-top:6px; color: rgba(183,188,200,.92)}

.trial{padding: 34px 0 34px}
.trialCard{
  position:relative;
  border-radius: 30px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(110% 140% at 15% 0%, rgba(139,61,255,.26), transparent 55%),
    radial-gradient(90% 120% at 85% 0%, rgba(255,122,0,.16), transparent 60%),
    linear-gradient(180deg, rgba(20,24,36,.78), rgba(20,24,36,.44));
  box-shadow: 0 40px 150px rgba(0,0,0,.34);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  padding: 22px 20px;
}
.trialGlow{
  position:absolute; inset:-2px;
  background: radial-gradient(700px 240px at 25% 0%, rgba(169,112,255,.24), transparent 60%);
  filter: blur(18px);
  opacity:.8;
  pointer-events:none;
}
.trialCard>*{position:relative}
.bullets{margin:12px 0 0; padding-left: 18px; color: rgba(183,188,200,.95)}
.bullets li{margin:8px 0}
.trialRight{display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:12px}
.trialSeal{
  width: 160px; height:160px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(169,112,255,.25), rgba(20,24,36,.55) 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  box-shadow: 0 30px 120px rgba(139,61,255,.16);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.sealTop{font-weight:900; font-size:38px; letter-spacing:-.04em}
.sealSub{color: rgba(183,188,200,.95); font-weight:750}
.hint{color: rgba(183,188,200,.84); font-size:12px; text-align:right; max-width: 28ch}

.proof{padding: 34px 0 42px}
.metrics{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(14,16,22,.38);
  padding: 16px 14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-bottom: 12px;
}
.metric{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding: 12px 12px 10px;
}
.metricNum{font-weight:900; font-size:26px; letter-spacing:-.04em}
.metricLabel{margin-top:4px; font-size:12px; color: rgba(183,188,200,.92)}
.testimonials{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px}
.tCard{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(20,24,36,.74), rgba(20,24,36,.40));
  padding: 16px 16px 14px;
  box-shadow: 0 26px 90px rgba(0,0,0,.22);
  transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
  position:relative;
  overflow:hidden;
}
.tCard:after{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(169,112,255,0), rgba(169,112,255,.22), rgba(240,178,74,.10), rgba(169,112,255,0));
  opacity:0;
  filter: blur(18px);
  transition: opacity .16s var(--ease);
  pointer-events:none;
}
.tCard:hover{transform: translateY(-2px); border-color: rgba(169,112,255,.20); box-shadow: 0 34px 120px rgba(0,0,0,.30)}
.tCard:hover:after{opacity:1}
.tTop{display:flex; justify-content:space-between; gap:10px; margin-bottom:10px}
.tName{font-weight:850}
.tRole{color: rgba(183,188,200,.92); font-size:12px; font-weight:650}
.tCard p{margin:0; color: rgba(183,188,200,.95)}
.tStars{margin-top:10px; letter-spacing:.18em; color: rgba(240,178,74,.92)}

.faq{padding: 20px 0 42px}
.faqGrid{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px}
.faqItem{
  text-align:left;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(14,16,22,.42);
  padding: 14px 14px 12px;
  color: var(--text);
  cursor:pointer;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px 10px;
  align-items:center;
  transition: transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.faqItem:hover{transform: translateY(-1px); border-color: rgba(169,112,255,.20); background: rgba(14,16,22,.55)}
.faqItem .q{font-weight:820}
.faqItem .a{
  grid-column:1 / -1;
  color: rgba(183,188,200,.95);
  max-height:0;
  overflow:hidden;
  transition: max-height .26s var(--ease), opacity .16s var(--ease);
  opacity:.0;
}
.faqItem .ic{
  width:34px; height:34px; border-radius: 14px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-weight:900;
  opacity:.9;
  transition: transform .18s ease;
}
.faqItem.isOpen .a{opacity:1}
.faqItem.isOpen .ic{transform: rotate(45deg)}

.contact{padding: 22px 0 60px}
.contactCard{
  border-radius: 30px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(110% 130% at 18% 0%, rgba(139,61,255,.20), transparent 55%),
    radial-gradient(90% 120% at 86% 0%, rgba(255,122,0,.12), transparent 60%),
    linear-gradient(180deg, rgba(20,24,36,.78), rgba(20,24,36,.42));
  box-shadow: 0 40px 150px rgba(0,0,0,.34);
  padding: 22px 20px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
}
.contactCtas{display:flex; gap:12px; flex-wrap:wrap; margin-top: 14px}
.contactInfo{margin-top: 16px; display:grid; gap:10px}
.infoLine{
  display:flex; justify-content:space-between; gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}
.infoKey{color: rgba(183,188,200,.92); font-weight:700}
.infoVal{font-weight:700; color: rgba(245,247,250,.92)}

.formShell{
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(14,16,22,.50);
  padding: 16px;
}
.formHead{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom: 12px}
.formTitle{font-weight:850; letter-spacing:-.02em}
.formHint{font-size:12px; color: rgba(183,188,200,.92)}
.form{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.form label{display:flex; flex-direction:column; gap:7px}
.form label span{font-size:12px; color: rgba(183,188,200,.92); font-weight:700}
input, select, textarea{
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(245,247,250,.92);
  padding: 12px 12px;
  outline:none;
  font: inherit;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
textarea{resize: vertical; min-height: 110px}
select{appearance:none}
input::placeholder, textarea::placeholder{color: rgba(183,188,200,.62)}
input:focus, select:focus, textarea:focus{
  border-color: rgba(169,112,255,.35);
  box-shadow: 0 0 0 4px rgba(139,61,255,.15);
  background: rgba(255,255,255,.04);
}
.form .full{grid-column: 1 / -1}
.formFoot{grid-column:1 / -1; font-size:12px; color: rgba(183,188,200,.84); text-align:center}

.formStatus{
  grid-column: 1 / -1;
  border-radius: 16px;
  border:1px solid rgba(180,140,255,.22);
  background: rgba(124,44,255,.10);
  color: rgba(245,247,250,.92);
  padding: 10px 12px;
  font-weight:750;
}
.formStatus.isError{
  border-color: rgba(255,106,0,.35);
  background: rgba(255,106,0,.10);
}

/* Custom themed select (fixes white OS dropdown) */
.xSelect{position:relative}
.xSelectBtn{
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(245,247,250,.92);
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.xSelectBtn:hover{transform: translateY(-1px); border-color: rgba(180,140,255,.26); background: rgba(255,255,255,.04)}
.xSelectBtn:active{transform: translateY(0)}
.xSelectBtn:focus-visible{
  outline:none;
  border-color: rgba(180,140,255,.35);
  box-shadow: 0 0 0 4px rgba(124,44,255,.16);
}
.xSelectChevron{opacity:.85; font-weight:900}
.xSelectMenu{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 8px);
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,7,10,.92);
  box-shadow: 0 26px 110px rgba(0,0,0,.55);
  padding: 8px;
  display:none;
  z-index: 20;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.xSelect.isOpen .xSelectMenu{display:block}
.xOpt{
  width:100%;
  text-align:left;
  border-radius: 14px;
  border:1px solid transparent;
  background: transparent;
  color: rgba(245,247,250,.90);
  padding: 10px 10px;
  cursor:pointer;
  transition: transform .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease);
}
.xOpt:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(180,140,255,.18);
  transform: translateY(-1px);
}
.xOpt.isSelected{
  background: radial-gradient(120% 140% at 20% 10%, rgba(180,140,255,.18), rgba(255,255,255,.02) 70%);
  border-color: rgba(124,44,255,.32);
}

/* FOOTER */
.footer{
  border-top:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(14,16,22,.35), rgba(7,7,10,.92));
}
.footInner{display:flex; justify-content:space-between; gap:18px; padding: 18px 20px}
.footBrand{display:flex; gap:12px; align-items:center}
.footLogo{
  width:40px; height:40px;
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
.footLogo img{width:100%; height:100%; object-fit:cover}
.footName{font-weight:850; letter-spacing:-.02em}
.footTag{color: rgba(183,188,200,.92); font-size:12px; margin-top:3px}
.footCols{display:flex; gap:26px}
.footCol{display:flex; flex-direction:column; gap:8px}
.footHead{font-weight:850; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.9}
.footCol a, .footText{color: rgba(183,188,200,.92); font-size:13px}
.footCol a:hover{color: rgba(245,247,250,.92)}
.footBottom{
  padding: 14px 20px 18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color: rgba(183,188,200,.84);
  font-size:12px;
}
.footNote{opacity:.9}

/* Reveal animation */
[data-reveal]{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
[data-reveal].isIn{
  opacity:1;
  transform: translateY(0);
}

/* Mobile sticky CTA */
.mobileStickyCta{
  position:fixed;
  left: 14px; right:14px;
  bottom: 14px;
  z-index:60;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 140% at 20% 10%, rgba(169,112,255,.26), rgba(20,24,36,.75) 55%),
    linear-gradient(90deg, rgba(139,61,255,.18), rgba(240,178,74,.08));
  box-shadow: 0 30px 120px rgba(0,0,0,.45), 0 0 44px rgba(139,61,255,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mLabel{font-weight:900; letter-spacing:-.02em}
.mSub{color: rgba(183,188,200,.92); font-weight:650; font-size:12px}
.mArrow{opacity:.85; font-weight:900}

/* Desktop sticky CTAs */
.stickyCta{
  position:fixed;
  right: 18px;
  bottom: 18px;
  z-index:61;
  display:none;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 140% at 20% 10%, rgba(169,112,255,.22), rgba(20,24,36,.75) 55%),
    linear-gradient(90deg, rgba(139,61,255,.14), rgba(240,178,74,.06));
  box-shadow: 0 30px 120px rgba(0,0,0,.42), 0 0 44px rgba(139,61,255,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .16s var(--ease), opacity .16s var(--ease);
}
.stickyCta:hover{transform: translateY(-2px) scale(1.01)}
.sDot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(90deg, rgba(169,112,255,.95), rgba(240,178,74,.85));
  box-shadow: 0 0 0 4px rgba(139,61,255,.14);
}
.sText{font-weight:900; letter-spacing:-.02em}
.sArrow{opacity:.85; font-weight:900}

.floatContact{
  position:fixed;
  right: 18px;
  bottom: 72px;
  z-index:61;
  display:none;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(14,16,22,.65);
  box-shadow: 0 26px 90px rgba(0,0,0,.40);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .16s var(--ease), opacity .16s var(--ease), border-color .16s var(--ease);
}
.floatContact:hover{transform: translateY(-2px); border-color: rgba(169,112,255,.22)}
.fcIcon{
  width:28px; height:28px;
  border-radius: 999px;
  display:grid; place-items:center;
  background: radial-gradient(120% 140% at 20% 10%, rgba(169,112,255,.20), rgba(255,255,255,.02) 60%);
  border:1px solid rgba(255,255,255,.10);
  animation: twinkle 2.8s var(--ease) infinite;
}
@keyframes twinkle{
  0%,100%{transform: rotate(0deg); opacity:.9}
  50%{transform: rotate(10deg); opacity:1}
}
.fcText{font-weight:900; letter-spacing:-.02em}

/* Responsive */
@media (max-width: 1040px){
  .heroInner{grid-template-columns: 1fr; gap:18px}
  .heroRight{justify-content:flex-start}
  .stripGrid{grid-template-columns: repeat(3, minmax(0, 1fr))}
  .priceGrid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .metrics{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .contactCard{grid-template-columns: 1fr}
  .trialCard{grid-template-columns: 1fr}
  .trialRight{align-items:flex-start}
}

@media (max-width: 760px){
  .navToggle{display:flex}
  .navLinks{
    position:absolute;
    left:16px; right:16px;
    top:68px;
    border-radius: 22px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(7,7,10,.92);
    box-shadow: 0 26px 110px rgba(0,0,0,.55);
    padding: 10px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
  }
  .navLinks.isOpen{display:flex}
  .navLinks a{padding:12px 12px}

  .miniProof{grid-template-columns: 1fr}
  .whyGrid{grid-template-columns: 1fr}
  .steps{grid-template-columns: 1fr}
  .connector{display:none}
  .priceGrid{grid-template-columns: 1fr}
  .priceNote{grid-template-columns: 1fr}
  .testimonials{grid-template-columns: 1fr}
  .faqGrid{grid-template-columns: 1fr}
  .form{grid-template-columns: 1fr}
  .mobileStickyCta{display:flex}
  .stickyCta{display:none !important}
  .floatContact{display:none !important}
  .footInner{flex-direction:column; align-items:flex-start}
  .footCols{width:100%; justify-content:space-between}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}