:root{
  --bg:#050811; --panel:#0A0F1A; --txt:#F2F7FF; --muted:#CFE6FF;
  --p1:#0EA5FF; --p2:#2563EB; --glass:rgba(255,255,255,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--txt)}
a{color:inherit; text-decoration:none}

/* Nav/Footer accents (blue) */
header.navbar.scrolled{box-shadow:0 0 20px rgba(14,165,255,.25) !important}
header.navbar nav a::after{background:linear-gradient(90deg,var(--p1),var(--p2)) !important}
header.navbar .cta{background:linear-gradient(90deg,var(--p1),var(--p2)) !important}
footer h3{color:var(--p1) !important}

/* Backdrop */
.fx{position:fixed; inset:0; z-index:-1; overflow:hidden}
.stars{
  --dot:radial-gradient(1px 1px at 1px 1px, rgba(255,255,255,.35), transparent 60%);
  background:var(--dot),var(--dot),var(--dot),var(--dot);
  background-size:120px 120px, 180px 180px, 280px 280px, 420px 420px;
  animation: drift 40s linear infinite; opacity:.18;
}
.glow{position:absolute; inset:0; background:
  radial-gradient(800px 420px at 6% 8%, rgba(14,165,255,.12), transparent 60%),
  radial-gradient(640px 360px at 92% 12%, rgba(37,99,235,.10), transparent 60%),
  radial-gradient(520px 280px at 50% 100%, rgba(14,165,255,.08), transparent 60%)}
.grid{position:absolute; inset:0; background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px);
  mask-image: radial-gradient(80% 55% at 50% 45%, black, transparent 80%)}
@keyframes drift{to{background-position:200px 300px,260px 120px,520px 200px,640px 260px}}

/* Layout */
.section{padding:64px 0}
.container{width:min(1180px,92%); margin:auto}
.pricing{padding-top:112px} /* safe space from fixed navbar */

/* Intro */
.intro .intro-wrap{display:flex; align-items:flex-end; justify-content:space-between; gap:18px}
.kicker{letter-spacing:.10em; text-transform:uppercase; font-size:.82rem; color:#CFEAFF}
.intro h1{font-size:clamp(2rem,4.6vw,3rem); margin:.25rem 0 .35rem}
.intro .lede{color:#e6f4ff; margin:0}

/* Toggle */
.toggle{display:flex; align-items:center; gap:10px}
.switch{position:relative; width:54px; height:28px; display:inline-block}
.switch input{display:none}
.slider{
  position:absolute; inset:0; background:#0e1421; border:1px solid var(--glass);
  border-radius:999px; cursor:pointer;
}
.slider::before{
  content:""; position:absolute; left:4px; top:3px; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(90deg,var(--p1),var(--p2));
  transition:transform .25s ease;
}
.switch input:checked + .slider::before{transform:translateX(24px)}

/* Row header + zero gap under intro */
.row-hd{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 12px}
.section.tight-top{padding-top:0}

/* Cards grid */
.cards{display:grid; gap:18px; align-items:stretch}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.cards.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.cards.four,.cards.three{grid-template-columns:1fr}}

/* Card */
.card{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--glass); border-radius:18px; padding:18px;
  box-shadow:0 8px 20px rgba(14,165,255,.10);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover{transform:translateY(-3px); border-color:rgba(14,165,255,.35); box-shadow:0 26px 80px rgba(14,165,255,.18)}
.card .badge{
  align-self:flex-start; margin:-6px 0 8px; padding:.25rem .55rem; border-radius:999px;
  background:linear-gradient(90deg,var(--p1),var(--p2)); font-weight:700; font-size:.75rem;
}
.card-hd h3{margin:0 0 4px}
.card-hd .sub{margin:0; color:#cfe3ff}

/* Price block — baseline aligned */
.price{display:flex; align-items:baseline; gap:6px; margin:12px 0 10px; font-weight:800}
.currency{font-size:1.2rem; line-height:1}
.amount{font-size:2.6rem; line-height:1}
.suffix{margin-left:auto; color:#cfe3ff; font-size:.95rem}

/* Features and footer pinned to bottom */
.features{margin:6px 0 16px; padding:0 0 0 18px; color:#d7e7ff}
.features li{margin:.38rem 0}
.features .muted{opacity:.65}
.card-ft{margin-top:auto; display:flex; justify-content:flex-start}

/* Notes under sections */
.notes{margin-top:10px; color:#dbeeff}
.notes p{margin:.3rem 0}

/* Button */
.btn{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:700; padding:.9rem 1.3rem; transition:transform .25s, box-shadow .25s}
.btn-primary{background:linear-gradient(90deg,var(--p1),var(--p2)); color:#fff; box-shadow:0 14px 32px rgba(14,165,255,.25)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 22px 42px rgba(14,165,255,.35)}

/* Reveal */
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal{opacity:1; transform:none}