/* ========= STELLAR SYSTEMS — CASE-STUDIES.CSS (NAV-FREE, ALIGNED) ========= */
/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}

/* Tokens */
:root{
  --container:1200px; --gutter:24px; --radius:16px;

  --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; --blue:#3b82f6; --deep:#1a122b;

  --glass:rgba(15,15,25,.58); --border:rgba(255,255,255,.06);
  --elev-1:0 8px 18px rgba(0,0,0,.16); --elev-2:0 10px 26px rgba(0,0,0,.28);
}

/* Base */
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; } /* anchor offset for fixed shared nav */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
section{position:relative;z-index:2;padding:var(--s-6) 0;}

/* subtle space background */
body::before{
  content:""; position:fixed; inset:0; z-index:0;
  background: radial-gradient(ellipse at center, #3c1a77 0%, var(--bg) 100%);
  opacity:.06;
}

/* ===== HERO ===== */
.hero{
  position:relative; text-align:center;
  padding:calc(var(--s-6) + 120px) 0 var(--s-5);
  background:radial-gradient(circle at 35% -10%, #44208a 0%, rgba(68,32,138,.35) 35%, var(--bg) 92%);
  box-shadow:inset 0 -60px 80px -60px rgba(143,95,255,.16);
}
.gradient-bg{
  position:absolute; inset:-30% -30% auto -30%;
  height:160%; background:radial-gradient(ellipse at 60% 40%, #7429c6, #111827);
  filter:blur(140px); opacity:.34; z-index:0;
}
.hero .container{ position:relative; z-index:1; }
.hero h1{ font-size:3rem; letter-spacing:-.02em; margin-bottom:14px; }
.subtitle{ color:#c5c5df; margin-bottom:18px; }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ===== BUTTONS (shared look) ===== */
.btn-primary,
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; white-space:nowrap; border-radius:10px;
}
.btn-primary{
  height:46px; line-height:46px; padding:0 20px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  box-shadow:0 0 18px rgba(139,92,246,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 0 24px rgba(139,92,246,.42); }
.btn-secondary{
  height:44px; line-height:44px; padding:0 18px;
  border:1px solid rgba(143,95,255,.45); color:#d9cffd; background:rgba(143,95,255,.10);
}

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

/* ===== CASE CARDS ===== */
.cases{ padding-top:var(--s-5); }
.case-card{
  display:flex; flex-direction:column; justify-content:space-between; gap:16px;
  min-height:360px;
  padding:24px; border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--elev-2);
}
.case-card header h3{ font-size:1.35rem; margin:6px 0 4px; }
.case-card .tag{ color:#c8c5e0; }
.badge{
  display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg,var(--purple),var(--blue)); color:#fff; font-weight:700; font-size:.78rem;
  box-shadow:0 6px 16px rgba(139,92,246,.35);
}
.badge.ghost{
  background:rgba(143,95,255,.14); color:#e8e3ff;
  border:1px solid rgba(143,95,255,.35); box-shadow:none;
}
.scope{ list-style:none; color:#d9d6ee; display:grid; gap:8px; }
.scope li{ position:relative; padding-left:20px; }
.scope li::before{ content:"•"; position:absolute; left:0; opacity:.4; }

.status{
  display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:8px;
  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:#e8e3ff; font-weight:700; font-size:.82rem;
}

/* ===== METRICS ===== */
.metrics{
  background: rgba(255,255,255,.02);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.metric{
  text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,.016), rgba(255,255,255,.006));
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:24px;
}
.metric .num{ color:var(--purple-2); font-weight:700; font-size:1.05rem; margin-bottom:8px; }
.metric p{ color:#cfcbe6; }

/* ===== TEMPLATE ===== */
#template{ scroll-margin-top:120px; }
.template h2{ text-align:center; font-size:2.1rem; margin-bottom:var(--s-4); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); margin-bottom:var(--s-3); }
@media (max-width:820px){ .two-col{ grid-template-columns:1fr; } }

.block{
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  padding:22px; border-radius:16px;
}
.block h4{ color:#eae6ff; margin-bottom:8px; }

.outcomes{ margin-top:8px; }
.out-card{
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:18px; text-align:center;
}
.out-card .label{ color:#bfaaff; font-weight:700; display:block; margin-bottom:6px; }
.out-card strong{ font-size:1.1rem; display:block; }
.out-card small{ color:#c8c5e0; }

.center{ text-align:center; margin-top:var(--s-3); }

/* ===== 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.2rem; }

.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 ===== */
@media (max-width:900px){
  .hero h1{ font-size:2.6rem; }
  .subtitle{ font-size:1rem; }
}