:root{
  --bg:#f7f8fb;
  --surface:#ffffff;
  --surface-2:#f3f5fb;
  --text:#0b1220;
  --text-2:#334155;
  --muted:#64748b;
  --border:rgba(15,23,42,.12);
  --shadow:0 18px 60px rgba(15,23,42,.10);
  --radius:22px;
  --radius-sm:16px;
  --grad:linear-gradient(90deg,#22d3ee,#3b82f6,#8b5cf6);
  --grad-2:linear-gradient(135deg,#22d3ee,#3b82f6,#8b5cf6);
  --focus:0 0 0 4px rgba(59,130,246,.22);
  --max:1120px;
}

[data-theme="dark"]{
  --bg:#070b14;
  --surface:#0b1220;
  --surface-2:#0f172a;
  --text:#f8fafc;
  --text-2:#e2e8f0;
  --muted:#a3b0c2;
  --border:rgba(148,163,184,.18);
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --focus:0 0 0 4px rgba(96,165,250,.26);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 560px at 18% -12%, rgba(34,211,238,.14), transparent 62%),
    var(--bg);
  line-height:1.6;
}

a{color:inherit; text-decoration:none}

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

@media (max-width: 640px){
  .container{padding:0 18px}
}

/* Top nav */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(14px);
  background:color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:12px}
/* Full logo (light + dark variants) */
.brand-full{height:26px; width:auto; display:block; -webkit-user-drag:none; user-select:none; pointer-events:none;}
.logo-dark{display:none;}
html[data-theme="dark"] .logo-light{display:none;}
html[data-theme="dark"] .logo-dark{display:block;}


.nav-links{display:flex; gap:18px; align-items:center; color:var(--muted); font-size:14px}
.nav-links a{padding:8px 10px; border-radius:12px}
.nav-links a:hover{background:color-mix(in srgb, var(--surface) 55%, transparent)}

.nav-actions{display:flex; gap:10px; align-items:center}

.btn{
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  color:var(--text);
  padding:10px 14px;
  border-radius:14px;
  font-weight:700;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.btn:hover{box-shadow:0 10px 26px rgba(15,23,42,.08)}
.btn:focus{outline:none; box-shadow:var(--focus)}

.btn-primary{
  border:0;
  background:var(--grad-2);
  color:white;
  /* soft brand glow */
  box-shadow: 0 18px 55px rgba(59,130,246,.18), 0 18px 55px rgba(139,92,246,.14);
}
.btn-primary:hover{
  filter:saturate(1.06);
  box-shadow: 0 22px 70px rgba(59,130,246,.22), 0 22px 70px rgba(139,92,246,.18);
}
.btn-primary:active{
  transform: translateY(1px);
  box-shadow: 0 14px 40px rgba(59,130,246,.16), 0 14px 40px rgba(139,92,246,.12);
}

/* plan-colored glows */
.plan.basic .btn-primary{
  box-shadow: 0 22px 70px rgba(59,130,246,.22);
}
.plan.pro .btn-primary{
  box-shadow: 0 26px 84px rgba(139,92,246,.24);
}
.plan.enterprise .btn-primary{
  box-shadow: 0 22px 70px rgba(245,158,11,.22);
}
.plan.basic .btn-primary:hover{
  box-shadow: 0 26px 86px rgba(59,130,246,.28);
}
.plan.pro .btn-primary:hover{
  box-shadow: 0 32px 104px rgba(139,92,246,.30);
}
.plan.enterprise .btn-primary:hover{
  box-shadow: 0 26px 86px rgba(245,158,11,.28);
}

.btn-ghost{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
}

.icon-btn{
  width:40px; height:40px;
  padding:0;
  border-radius:14px;
  display:grid; place-items:center;
}

/* Hero */
.hero{padding:72px 0 34px}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:start;
}

.h-eyebrow{color:var(--muted); font-weight:700; font-size:13px; letter-spacing:.18px}
.h1{
  margin:10px 0 10px;
  font-size:52px;
  line-height:1.02;
  letter-spacing:-1.6px;
}

.sub{
  font-size:18px;
  color:var(--text-2);
  margin:0 0 18px;
  max-width:60ch;
}

.logo-wrap{
  display:inline-flex;
  padding:10px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.10);
}

html[data-theme="dark"] .logo-wrap{
  background:rgba(255,255,255,.88);
  border-color:rgba(255,255,255,.14);
}

.hero-logo{height:44px; width:auto; display:block}

.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.pill{
  font-size:13px;
  color:var(--text-2);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  border:1px solid var(--border);
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
}

.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:16px}

.micro{margin-top:14px; color:var(--muted); font-size:13px}
.micro strong{color:var(--text)}

.hero-card{
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

.preview-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.preview-title{font-weight:900; letter-spacing:-.3px}
.preview-tabs{display:flex; gap:8px; align-items:center}
.tab{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  padding:8px 10px;
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}
.tab:hover{background:color-mix(in srgb, var(--surface-2) 60%, transparent)}
.tab.active{border:0; background:var(--grad-2); color:white}
.tab:focus{outline:none; box-shadow:var(--focus)}

.preview-media{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--border); background:var(--surface-2)}
.preview-img{display:none; width:100%; height:auto}
.preview-img.active{display:block}
.preview-foot{margin-top:10px; color:var(--muted); font-size:13px}

.card-title{font-weight:900; letter-spacing:-.4px; margin:0 0 10px}

.kpis{display:grid; gap:10px; margin-top:10px}
.kpi{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px;
  background:color-mix(in srgb, var(--surface-2) 75%, transparent);
  border:1px solid var(--border);
  border-radius:18px;
}
.kpi .dot{
  width:10px; height:10px; border-radius:999px; margin-top:6px;
  background:var(--grad);
}
.kpi p{margin:0; color:var(--text-2); font-size:14px}

/* Sections */
.section{padding:78px 0}
.section.tight{padding:54px 0}
.section.alt{
  background:color-mix(in srgb, var(--surface-2) 35%, transparent);
  border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px}
.h2{margin:0; font-size:28px; letter-spacing:-.6px}
.lead{margin:0; color:var(--muted); max-width:70ch}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}

.feature{
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}
.feature h3{margin:0 0 6px; font-size:16px; letter-spacing:-.3px}
.feature p{margin:0; color:var(--text-2); font-size:14px}

.steps{display:grid; gap:10px}
.step{
  display:flex; gap:12px;
  padding:14px 16px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.step-badge{
  width:34px; height:34px; border-radius:14px;
  background:color-mix(in srgb, var(--surface-2) 70%, transparent);
  border:1px solid var(--border);
  display:grid; place-items:center;
  font-weight:900;
}
.step h4{margin:0; font-size:15px}
.step p{margin:2px 0 0; color:var(--text-2); font-size:14px}

/* Pricing */
.pricing{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.plan{
  position:relative;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  display:flex;
  flex-direction:column;
  min-height:320px;
}
.plan.top{
  border:1px solid color-mix(in srgb, #3b82f6 40%, var(--border));
  box-shadow:0 24px 70px rgba(59,130,246,.14);
}


.plan.basic{
  border:1px solid color-mix(in srgb, #3b82f6 36%, var(--border));
  box-shadow:0 24px 70px rgba(59,130,246,.12);
}

.plan.pro{
  border:1px solid color-mix(in srgb, #8b5cf6 44%, var(--border));
  box-shadow:0 32px 92px rgba(139,92,246,.18);
}

.plan.enterprise{
  border:1px solid color-mix(in srgb, #f59e0b 42%, var(--border));
  box-shadow:0 24px 70px rgba(245,158,11,.12);
}

.plan.featured{
  transform: translateY(-2px);
}

.step-badge{
  position:absolute;
  top:14px;
  right:14px;
  font-size:12px;
  font-weight:900;
  letter-spacing:-.2px;
  padding:7px 10px;
  border-radius:999px;
  color:#fff;
  background: linear-gradient(90deg, rgba(139,92,246,.95), rgba(59,130,246,.95));
  box-shadow:0 16px 45px rgba(139,92,246,.18);
  border:1px solid rgba(255,255,255,.18);
}

html:not([data-theme="dark"]) .step-badge{
  border:1px solid rgba(15,23,42,.10);
}

.plan .name{font-weight:900; letter-spacing:-.4px}
.price{margin-top:6px; font-size:30px; font-weight:900; letter-spacing:-.8px}
.price small{font-size:14px; color:var(--muted); font-weight:700}
.plan ul{margin:14px 0 0; padding-left:18px; color:var(--text-2); font-size:14px}
.plan li{margin:8px 0}
.plan .spacer{flex:1}
.plan .cta{margin-top:14px}

.note{
  margin-top:14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface-2) 70%, transparent);
  color:var(--text-2);
  font-size:14px;
}
.note strong{color:var(--text)}

/* FAQ */
.faq{display:grid; gap:10px}
.details{
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
}
.details summary{
  cursor:pointer;
  font-weight:900;
  letter-spacing:-.3px;
  list-style:none;
}
.details summary::-webkit-details-marker{display:none}
.details p{margin:10px 0 0; color:var(--text-2); font-size:14px}

/* CTA */
.cta{padding:34px 0 10px}
.cta-card{
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.cta-card p{margin:6px 0 0; color:var(--text-2)}
.cta-actions{display:flex; gap:10px; flex-wrap:wrap}

/* Legal pages */
.page{
  padding:48px 0 72px;
}
.prose{max-width:78ch}
.prose h1{font-size:38px; letter-spacing:-1px; margin:0 0 10px}
.prose h2{font-size:22px; letter-spacing:-.4px; margin:26px 0 10px}
.prose p, .prose li{color:var(--text-2); font-size:15px; line-height:1.75}
.prose ul{padding-left:18px}
.prose .meta{color:var(--muted); font-size:13px}

/* Footer */
.footer .brand-full{height:24px;}
.footer{padding:32px 0 40px; border-top:1px solid var(--border)}
.footer-grid{display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap}
.foot-links{display:flex; gap:12px; row-gap:10px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:14px}
.foot-links a{padding:6px 10px; border-radius:12px}
.foot-links a:hover{background:color-mix(in srgb, var(--surface) 55%, transparent)}
.small{color:var(--muted); font-size:13px}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .pricing{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .h1{font-size:40px}
  .nav-links{display:none}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
}

.brand img{ -webkit-user-drag:none; user-select:none; }




/* ===== Header clarity (no harsh spot) ===== */
header{
  backdrop-filter: blur(10px) saturate(150%);
}


/* ===== Fix: remove top-right spot (solid header, no blur) ===== */
header{
  background: rgba(11,18,32,.92) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] header{
  background: rgba(247,248,251,.92) !important;
}


/* Ensure step numbers never escape layout */
.step-badge{
  position: static !important;
  flex: 0 0 auto;
}


/* ===== Header blur (frosted glass, readable) ===== */
header{
  position: sticky;
  top: 0;
  z-index: 999;
  /* more opaque so content doesn’t show through */
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

html[data-theme="dark"] header{
  background: rgba(11,18,32,.88);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}

/* keep inner layout clean */
header .nav, header nav, header .container{
  background: transparent;
}
/* Prevent nav items from inheriting blur artifacts */
header .nav, header nav, header .container{
  background: transparent;
}