:root{
  --bg0:#070b14;
  --bg1:#0b1220;
  --bg2:#0f1a31;
  --card:rgba(18,28,46,.55);
  --card-strong:rgba(18,28,46,.72);
  --text:#eaf2ff;
  --muted:#a7b4cc;
  --primary:#2dd4bf;
  --primary2:#60a5fa;
  --border:rgba(148, 163, 184, .18);
  --border-strong:rgba(148, 163, 184, .28);
  --shadow:0 18px 55px rgba(0,0,0,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease2:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif;
  background:radial-gradient(1200px 700px at 20% -10%, rgba(45,212,191,.22), transparent 60%),
             radial-gradient(900px 650px at 110% 20%, rgba(96,165,250,.20), transparent 55%),
             linear-gradient(180deg, var(--bg0), var(--bg1) 35%, #070b14 120%);
  color:var(--text);
  line-height:1.55;
  overflow-x:hidden;
}
.container{max-width:1100px;margin:0 auto;padding:0 22px}

/* Top progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--primary),var(--primary2));z-index:1000;box-shadow:0 0 18px rgba(96,165,250,.55)}

/* Glass nav */
.top-nav{
  position:sticky;top:0;z-index:999;
  background:rgba(9,14,26,.42);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 22px}
.brand{color:var(--text);text-decoration:none;font-weight:900;letter-spacing:.2px}
.nav-links{display:flex;gap:16px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;transition:color .45s var(--ease)}
.nav-links a:hover{color:#dbe9ff}

/* Trust strip */
.trust-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(16,28,49,.35);backdrop-filter:blur(14px);color:#dbe9ff;font-size:12px}
.pill b{color:rgba(45,212,191,.95)}

/* Hero */
.hero{padding:86px 0 58px}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:22px;align-items:center}
.eyebrow{margin:0;color:rgba(45,212,191,.95);font-weight:800;letter-spacing:.6px;font-size:12px}

h1{
  font-size:54px;line-height:1.04;margin:14px 0 14px;letter-spacing:-.8px;
  background:linear-gradient(180deg,#ffffff 0%,#d7efff 55%,#a8d6ff 110%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{max-width:820px;color:var(--muted);font-size:18px}

/* Glass cards */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  background-color:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}

.hero-card{padding:20px}
.hero-card h3{margin:0 0 8px}
.hero-card ul{padding-left:18px;margin:8px 0 0}
.mini-link{display:inline-block;margin-top:10px;color:#93c5fd;text-decoration:none}
.mini-link:hover{text-decoration:underline}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.stats .stat{padding:12px 12px;border-radius:14px;border:1px solid var(--border);background:rgba(16,28,49,.42);backdrop-filter:blur(14px);transition:transform .9s var(--ease2), border-color .9s var(--ease2), box-shadow .9s var(--ease2)}
.stats .stat:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:0 18px 45px rgba(0,0,0,.25)}
.stats strong{display:block;font-size:18px}
.stats span{font-size:12px;color:var(--muted)}

/* Sections */
.section{padding:62px 0}
section[id]{scroll-margin-top:92px}
.alt{background:linear-gradient(180deg, rgba(15,26,49,.55), rgba(7,11,20,.15))}

h2{margin:0 0 10px;font-size:34px;letter-spacing:-.3px}
.muted{color:var(--muted)}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{padding:18px;transition:transform 1.0s var(--ease2), box-shadow 1.0s var(--ease2), border-color 1.0s var(--ease2)}
.card:hover{transform:translateY(-7px);border-color:var(--border-strong);box-shadow:0 28px 70px rgba(0,0,0,.34)}
.tilt:hover{transform:translateY(-8px) rotateX(.8deg) rotateY(-.8deg)}

.price-card{display:flex;flex-direction:column;min-height:330px}
.price{font-size:34px;font-weight:900;margin:0 0 6px}
.price-card ul{margin-top:auto}
.featured{border-color:rgba(45,212,191,.35);box-shadow:0 28px 80px rgba(45,212,191,.08)}
.badge{position:absolute;top:-10px;right:12px;background:linear-gradient(135deg,var(--primary),#22c7b2);color:#06231b;font-weight:900;font-size:12px;padding:6px 10px;border-radius:999px}
.small{font-size:14px}

.bundle-actions{margin-top:14px;display:flex;gap:10px}
.bundle-card{cursor:default;position:relative}
.bundle-card::after{
  content:"";
  position:absolute;inset:-1px;
  border-radius:16px;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s var(--ease2);
  background:radial-gradient(480px 220px at 20% 0%, rgba(96,165,250,.18), transparent 55%),
             radial-gradient(420px 240px at 90% 30%, rgba(45,212,191,.14), transparent 60%);
}
.bundle-card.is-selected{border-color:rgba(96,165,250,.45)}
.bundle-card.is-selected::after{opacity:1}

.bundle-bar{
  position:sticky;
  bottom:18px;
  margin-top:18px;
  padding:12px;
  z-index:30;
}
.bundle-bar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bundle-summary__label{font-size:12px;color:var(--muted)}
.bundle-summary__value{font-weight:900;letter-spacing:.1px}
.bundle-cta{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:900px){
  .bundle-bar{bottom:10px}
  .bundle-bar__inner{flex-direction:column;align-items:stretch}
  .bundle-cta .btn{width:100%}
}

ul{margin:0;padding-left:18px}
li{margin:7px 0;color:#d9e6ff}

/* Buttons (liquid glass + stable hover) */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:12px;
  border:1px solid var(--border);
  color:var(--text);
  text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  background-color:rgba(18,28,46,.28);
  backdrop-filter:blur(16px);
  transition:transform .45s var(--ease2), box-shadow .45s var(--ease2), border-color .45s var(--ease2), filter .45s var(--ease2), background-color .45s var(--ease2);
  will-change:transform;
  transform:translateZ(0);
  overflow:hidden;
  isolation:isolate;
}
/* sheen layer (never blocks clicks) */
.btn::before{
  content:"";
  position:absolute;inset:-1px;
  pointer-events:none;
  background:radial-gradient(120px 70px at 20% 10%, rgba(255,255,255,.22), transparent 65%),
             linear-gradient(115deg, transparent 0%, rgba(255,255,255,.10) 45%, transparent 60%);
  transform:translateX(-22%);
  opacity:.0;
  transition:transform .75s var(--ease2), opacity .45s var(--ease2);
  mix-blend-mode:screen;
  z-index:0;
}
.btn > *{position:relative;z-index:1}

.btn:hover{
  transform:scale(1.01);
  box-shadow:0 18px 45px rgba(0,0,0,.25);
  border-color:var(--border-strong);
}
.btn:hover::before{opacity:.95;transform:translateX(22%)}
.btn:active{transform:scale(1.0)}
.btn:focus-visible{outline:2px solid rgba(96,165,250,.75);outline-offset:3px}

.btn.primary{background:linear-gradient(135deg,var(--primary),#22c7b2);color:#04211a;border-color:transparent;font-weight:900}
.btn.primary:hover{filter:brightness(.98)}
.btn.ghost{background:rgba(18,28,46,.22)}
.nav-cta{padding:9px 12px;font-size:13px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.step{padding:16px;transition:transform 1.0s var(--ease2), box-shadow 1.0s var(--ease2), border-color 1.0s var(--ease2)}
.step:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:0 22px 55px rgba(0,0,0,.28)}
.step p{margin:8px 0 0;color:var(--muted)}

/* FAQ (slower open feel) */
details{border-radius:14px;border:1px solid var(--border);background:rgba(18,28,46,.35);backdrop-filter:blur(14px);padding:12px 14px;margin:10px 0;overflow:hidden;transition:border-color 1.0s var(--ease2), background-color 1.0s var(--ease2), transform 1.0s var(--ease2)}
summary{cursor:pointer;font-weight:900}
details[open]{border-color:var(--border-strong);background:rgba(18,28,46,.55)}
details .faq-body{color:var(--muted);padding-top:10px}

/* Snippet */
.snippet{white-space:pre-line;background:rgba(15,26,45,.55);border:1px dashed rgba(96,165,250,.35);padding:14px;border-radius:14px;max-width:680px}

footer{padding:26px 0;border-top:1px solid rgba(148,163,184,.14);color:var(--muted)}
.small{font-size:14px}

/* Reveal animations */
.section-reveal{opacity:0;transform:translateY(32px);transition:opacity 1.35s var(--ease2), transform 1.35s var(--ease2)}
.section-reveal.in-view{opacity:1;transform:translateY(0)}
.reveal-item{opacity:0;transform:translate3d(0,28px,0) scale(.985);transition:opacity 1.10s var(--ease2), transform 1.10s var(--ease2);transition-delay:calc(var(--reveal-delay, 0) * 160ms)}
.reveal-item.in-view{opacity:1;transform:translate3d(0,0,0) scale(1)}
.btn.reveal-item.in-view:hover{transform:scale(1.01)}

/* Floating */
.float{animation:floaty 7.2s var(--ease) infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@media (max-width:900px){
  h1{font-size:40px}
  .hero-grid{grid-template-columns:1fr}
  .grid-3,.steps,.stats{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-cta{display:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .section-reveal,.reveal-item{opacity:1;transform:none}
}