/* ========= STELLAR SYSTEMS — PACKAGES.CSS (NO PUBLIC PRICES, NO NAV RULES) ========= */
*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --container:1200px; --gutter:24px; --radius:14px;

  --s-1:12px; --s-2:20px; --s-3:32px; --s-4:48px; --s-5:64px; --s-6:100px;

  --bg:#0b0b13; --ink:#fff; --ink-2:#e2e2f0; --muted:#c8c5e0;
  --purple:#8f5fff; --purple-2:#b68aff; --purple-3:#7429c6; --blue:#3b82f6;

  --glass:rgba(15,15,25,.6); --border:rgba(255,255,255,.05);
  --elev-1:0 8px 18px rgba(0,0,0,.15); --elev-2:0 8px 24px rgba(0,0,0,.25);
}

html,body{
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--ink); scroll-behavior:smooth; overflow-x:hidden;
}
body{ scroll-padding-top:120px; } /* space for fixed nav */

/* Subtle starfield */
body::before{
  content:""; position:fixed; inset:0; z-index:0;
  background: radial-gradient(ellipse at center,#3c1a77 0%,var(--bg) 100%), url('../images/nebula.png') repeat;
  background-size:cover; opacity:.06; animation:scrollStars 90s linear infinite;
}
@keyframes scrollStars{0%{background-position:0 0}100%{background-position:0 1000px}}

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
section{ position:relative; z-index:2; padding:var(--s-6) 0; }

/* ===== Hero ===== */
.hero{
  position:relative; text-align:center;
  padding:calc(var(--s-6) + 120px) 0 var(--s-5);
  background:radial-gradient(circle at center,#3d1a78 0%,var(--bg) 90%);
  box-shadow:inset 0 -80px 80px -60px rgba(143,95,255,.18);
}
.gradient-bg{
  position:absolute; top:-30%; left:-30%; width:160%; height:160%;
  background:radial-gradient(ellipse at center,var(--purple-3),#111827);
  filter:blur(140px); opacity:.35; z-index:0;
}
.hero .container{ position:relative; z-index:1; }
.hero h1{ font-size:3.2rem; letter-spacing:-.02em; margin-bottom:16px; }
.subtitle{ color:#c5c5df; margin-bottom:18px; }
.hero-trust{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  list-style:none; color:#b9b5d6; font-size:.95rem;
}
.hero-trust li+li::before{ content:"•"; margin:0 8px; opacity:.35; }

/* Shared buttons (page-level) */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; line-height:46px; padding:0 20px; border-radius:10px; text-decoration:none; white-space:nowrap;
  background:linear-gradient(135deg,var(--purple),var(--blue)); color:#fff; font-weight:600; box-shadow:0 0 18px rgba(139,92,246,.28);
  transition:transform .25s ease, box-shadow .25s ease, filter .2s ease;
}
.btn-primary:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 0 24px rgba(139,92,246,.42); filter:brightness(1.05); }
.btn-primary:focus-visible{ outline:2px solid rgba(143,95,255,.8); outline-offset:2px; }

/* ===== Packages ===== */
.packages .grid{
  display:grid; gap:var(--s-3); grid-template-columns:repeat(3,1fr);
}
@media (max-width:1024px){ .packages .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){ .packages .grid{ grid-template-columns:1fr; } }

.card{
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:26px; box-shadow:var(--elev-2);
  display:flex; flex-direction:column; gap:16px; height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.28); }

.card header h3{ font-size:1.4rem; margin-bottom:4px; }
.card .tag{ color:#c8c5e0; margin-bottom:6px; }

/* “no price” meta row */
.meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px;
  background:rgba(143,95,255,.12); border:1px solid rgba(143,95,255,.35); color:#dcd6ff; font-weight:700; font-size:.82rem;
}
.eta{ color:#b7b3d9; font-size:.9rem; }

.features{ list-style:none; color:#d9d6ee; display:grid; gap:10px; }
.features li{ position:relative; padding-left:24px; line-height:1.55; }
.features li::before{
  content:"✓"; position:absolute; left:0; top:0; width:18px; height:18px; line-height:18px; text-align:center;
  font-size:.8rem; border-radius:50%; background:rgba(143,95,255,.18); color:#e9ddff; border:1px solid rgba(143,95,255,.35);
}

.note{ color:#c9c6e3; font-size:.92rem; margin-top:-4px; }

/* Featured card */
.featured{ position:relative; border-color:var(--purple); box-shadow:0 0 28px rgba(168,85,247,.25); }
.featured .badge{
  position:absolute; top:-12px; right:16px; padding:6px 10px; font-size:.8rem; font-weight:700; letter-spacing:.02em;
  border-radius:999px; background:linear-gradient(90deg,var(--purple),var(--blue)); color:#fff; box-shadow:0 6px 16px rgba(139,92,246,.35);
}

/* Comparison */
.compare{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); margin-top:var(--s-4);
}
@media (max-width:720px){ .compare{ grid-template-columns:1fr; } }
.compare h4{ margin-bottom:8px; }
.compare ul{ list-style:none; display:grid; gap:8px; color:#dcdaf2; }
.compare li{ position:relative; padding-left:20px; line-height:1.5; }
.compare li::before{ content:"•"; position:absolute; left:0; opacity:.5; }

/* ===== FAQ ===== */
.faq h2{ font-size:2rem; text-align:center; margin-bottom:var(--s-4); }
.faq details{
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08); border-radius:14px;
  padding:16px 18px; max-width:900px; margin:0 auto var(--s-2);
}
.faq summary{ cursor:pointer; font-weight:700; color:var(--purple-2); }
.faq p{ color:#d7d4ee; margin-top:8px; }

/* ===== Final CTA / Footer ===== */
.final-cta{
  text-align:center; background:linear-gradient(145deg,#6f2bd5,#3b1b75); border-radius:20px; color:#fff;
  box-shadow:0 10px 30px rgba(139,92,246,.25);
}
.final-cta .container{ display:grid; place-items:center; gap:var(--s-2); padding:var(--s-6) var(--gutter); }
.final-cta h2{ font-size:2.3rem; }

.footer{
  text-align:center; padding:40px var(--gutter); font-size:.9rem; color:#888;
  border-top:1px solid rgba(255,255,255,.08); margin-top:var(--s-6);
}

/* ===== Responsive tweaks (no nav rules here) ===== */
@media (max-width:900px){
  .hero h1{ font-size:2.6rem; }
  .subtitle{ font-size:1rem; }
}