:root{
  --bg:#0b0b0d; --bg2:#0e0e12; --card:#15151b; --fg:#f4f6ff; --muted:#a7a7bc;
  --accent:#7cffe9; --accent2:#7aa7ff; --ring:#2a2a39;
}

/* Base & nav */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:
  radial-gradient(1200px 600px at 20% -10%, rgba(124,167,255,.06), transparent),
  radial-gradient(1000px 500px at 80% 110%, rgba(124,255,233,.05), transparent),
  url("/static/img/hero_wave.png") center top / cover no-repeat;opacity:.08;z-index:0}
.site-nav, main, .site-footer{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1100px;margin:auto;padding:24px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand-text{font-size:1.5rem;font-weight:700;letter-spacing:.2px;color:#f2f4fa}
.muted-link{opacity:.85}
.site-nav{position:sticky;top:0;z-index:20;background:rgba(11,11,13,.72);backdrop-filter:saturate(1.05) blur(10px);border-bottom:1px solid #191926}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.links a{margin-left:18px;text-decoration:none;color:var(--muted);font-weight:500}
.links a:hover{color:#fff}

/* Hero */
.hero{position:relative;border-radius:20px;overflow:hidden;margin-top:20px;background:linear-gradient(180deg,rgba(124,167,255,.06),rgba(124,255,233,.05))}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;filter:contrast(108%) saturate(112%);z-index:1;pointer-events:none}
.hero-content{position:relative;z-index:2}
.hero.compact .hero-content{padding:22px 24px 18px;max-width:760px}
.hero h1{font-size:clamp(26px,3.8vw,38px);margin:0 0 8px;font-weight:800;letter-spacing:.2px}
.hero .lede{color:var(--muted);margin:0 0 10px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 0;color:var(--muted);font-size:.95rem}
.trust li{list-style:none;position:relative;padding-left:18px}
.trust li::before{content:"•";position:absolute;left:0;color:#8fdff3}
.price-ribbon{position:absolute;right:16px;top:16px;z-index:3;transform:rotate(8deg)}
.price-ribbon span{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0a0a0e;font-weight:900;border-radius:999px;padding:8px 14px;box-shadow:0 10px 28px rgba(0,0,0,.25)}

/* NEW: hero badges row */
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 8px}
.badge{display:inline-flex;align-items:center;border:1px solid #2a3040;border-radius:999px;padding:6px 10px;color:#dff3ff;background:rgba(124,255,233,.12);font-weight:700;font-size:.92rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.15s transform,.2s box-shadow}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0a0a0e}
.btn-ghost{background:transparent;border:1px solid #252535;color:#e2e6f5}
.btn-buy{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0a0a0e;font-weight:700;min-width:148px;text-align:center}

/* Cards grid (two) */
.grid-cards{display:grid;gap:20px;margin:24px 0}
.grid-cards.two{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width: 860px){ .grid-cards.two{grid-template-columns:1fr} }

.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid #1b1b27;border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.card.product.emphasis{outline:1px solid #28334a; box-shadow:0 20px 40px rgba(0,0,0,.28)}
.card.product.highlight{outline:1px solid #31435f; box-shadow:0 22px 46px rgba(0,0,0,.32)}
.pill{display:inline-block;font-size:.75rem;font-weight:700;color:#cfeaff;border:1px solid #2a3144;border-radius:999px;padding:4px 8px;margin-bottom:6px;opacity:.9}

/* Media */
.thumb-frame{position:relative;width:100%;aspect-ratio:16/9;background:#0a0b0f;overflow:hidden;display:block}
.thumb-frame:hover .thumb-cover{transform:scale(1.03)}
.thumb-cover{position:absolute;inset:0;width:100%;height:100%;object-position:center;transition:transform .25s ease}
.thumb-cover.cover{object-fit:cover}
.scale-up{transform:scale(1.06)}

/* Content + aligned footers */
.card-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{margin:0 0 6px}
.muted{color:var(--muted)}
.bullets{padding-left:18px;margin:8px 0 14px}
.bullets li{margin:4px 0}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.price-badge{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:32px;padding:0 10px;border-radius:999px;background:#0f1118;border:1px solid #273043;font-weight:900}

/* Sections / compare */
.section{padding:32px 0}
.center{text-align:center}
.section.compare{padding-top:10px}
.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:10px}
.compare-card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid #1b1b27;border-radius:14px;padding:16px}
.compare-card.focus{outline:1px solid #2f405b}
.compare-card h4{margin:0 0 8px}
.compare-card ul{margin:0 0 12px 18px}

/* Product pages */
.product-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;margin-top:18px;align-items:center}
.product-hero h1{font-size:clamp(26px,5vw,40px);margin:0 0 8px}
.price-tag{font-size:22px;font-weight:800;margin-bottom:10px}
.hero-shot{border-radius:14px;border:1px solid #1b1b27;background:#0f0f14}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:26px 0}
.tile{background:#0f0f14;border:1px solid #1b1b27;border-radius:14px;overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover}
.video .video-wrap{position:relative;width:100%;padding-top:56.25%}
.video .video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px}
.features.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.feature{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid #1b1b27;border-radius:14px;padding:16px}
.feature h3{margin:0 0 8px}
.faq{margin-top:18px}
.faq h2{margin:0 0 8px}
.faq details{background:#0f0f14;border:1px solid #1b1b27;border-radius:12px;padding:12px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:600}

/* ---- Docs layout on product pages ---- */
.docs{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:16px;
  margin:18px 0 8px;
}
.docs-toc{position:relative}
.toc-card{
  position:sticky; top:88px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid #1b1b27; border-radius:14px; padding:14px;
}
.toc-card h3{margin:0 0 8px}
.toc-card nav{display:grid; gap:6px; margin-bottom:8px}
.toc-card nav a{color:#d9e6ff; text-decoration:none; border:1px solid #252a3a; border-radius:10px; padding:7px 10px}
.toc-card nav a:hover{background:#0f1118}
.docs-body h2{margin:10px 0 8px}
.docs-body kbd{
  background:#0f1118;border:1px solid #2b2e3e;border-radius:6px;padding:2px 6px;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas;
  font-size:.92rem
}
.callout{
  margin-top:12px; padding:12px; border-radius:12px;
  background:rgba(124,255,233,.10); border:1px solid #2a3140;
}
@media (max-width: 860px){
  .docs{grid-template-columns:1fr}
  .toc-card{position:static}
}

/* A11y */
:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; border-radius:8px }
@media (prefers-reduced-motion: reduce){
  .thumb-frame:hover .thumb-cover{ transform:none }
  .scale-up{ transform:none }
}

/* Footer */
.site-footer{border-top:1px solid #191926;background:#0b0b0d}
.footer-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.stripe-badge{display:inline-flex;align-items:center;color:#bfc4ff}
input,textarea{padding:10px;border-radius:10px;border:1px solid #2b2b33;background:#0f0f14;color:var(--fg)}
.stack{display:grid;gap:10px;margin:16px 0}
@media (max-width: 860px){ .product-hero{grid-template-columns:1fr} }