/* ========= STELLAR SYSTEMS — SERVICES.CSS (PAGE-SPECIFIC; NO NAV RULES) ========= */
/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}

/* Tokens */
: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;         /* core */
  --purple-2:#b68aff;       /* light */
  --purple-3:#7429c6;       /* deep */
  --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);
}

/* 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;
}
html{ overflow-x:clip; }
body{ overflow-x:hidden; scroll-padding-top:120px; } /* anchor offset for fixed main nav */

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

/* Layout helpers */
.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-section{
  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); /* internal glow only */
}
.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-content{position:relative;z-index:2;max-width:820px;margin:0 auto;}
.hero-content h1{font-size:3.4rem;font-weight:700;letter-spacing:-.02em;margin-bottom:20px;}
.subtitle{font-size:1.12rem;color:#c5c5df;margin-bottom:36px;line-height:1.65;}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn-primary,.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; line-height:48px; padding:0 24px; border-radius:10px; text-decoration:none; white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--purple),var(--blue)); color:#fff; font-weight:600;
  box-shadow:0 0 18px rgba(139,92,246,.3); transition:transform .3s ease, box-shadow .3s ease, filter .2s ease;
}
.btn-primary:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 0 24px rgba(139,92,246,.45); filter:brightness(1.05);}
.btn-secondary{border:1px solid rgba(143,95,255,.5); color:var(--purple-2); background:rgba(143,95,255,.08); transition:.3s ease;}
.btn-secondary:hover{background:rgba(143,95,255,.14);}
.btn-secondary.inline{height:44px;line-height:44px;}

/* ===== Sticky Sub-Nav (floating, tight under hero) ===== */
.service-subnav{
  position:sticky; top:96px; z-index:50;
  margin-top:-28px;                /* pulls it toward CTAs */
  background:transparent; border:0; padding:0; box-shadow:none;
}
.service-subnav .container{ display:flex; justify-content:center; }
.service-subnav nav{
  display:flex; gap:12px; overflow:auto; scrollbar-width:none;
  padding:6px; border-radius:999px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
}
.service-subnav nav::-webkit-scrollbar{ display:none; }

.pill{
  display:inline-flex; align-items:center;
  padding:10px 14px; border-radius:999px; font-weight:600; font-size:.9rem;
  color:#dcd6ff; border:1px solid rgba(143,95,255,.28); background:rgba(143,95,255,.06);
  text-decoration:none; transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.pill:hover{ background: rgba(143,95,255,.10); }
.pill.active{ background: linear-gradient(90deg, var(--purple), var(--blue)); color:#fff; border-color:transparent; }

/* ensure anchors land below sticky areas */
.service-section{ scroll-margin-top:132px; }

/* ===== Service Sections ===== */
.service-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s-4); align-items:start;}
@media(max-width:980px){ .service-grid{ grid-template-columns:1fr; } }

.service-section h2{font-size:2.2rem;margin-bottom:10px;}
.lead{color:#c8c5e0;margin-bottom:18px;font-size:1.05rem;}
.bullets{list-style:none;color:#cfcbe6;margin:18px 0;}
.bullets li{position:relative;padding-left:26px;margin:10px 0;line-height:1.55;}
.bullets li::before{
  content:""; position:absolute; left:0; top:8px; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle, #fff 0 35%, transparent 36% 100%), linear-gradient(135deg,var(--purple),var(--blue));
  box-shadow:0 0 10px rgba(139,92,246,.35);
}
.cta-row{display:flex;gap:12px;align-items:center;margin-top:10px;}
.btn-link{color:var(--purple-2);font-weight:600;text-decoration:none;}
.btn-link:hover{text-decoration:underline;}

.card{
  background:rgba(255,255,255,.018); border:1px solid rgba(255,255,255,.07);
  border-radius:16px; padding:24px; box-shadow:var(--elev-2);
}
.card h4{color:var(--purple-2);margin-bottom:10px;}
.checks{list-style:none;color:#cfcbe6;}
.checks li{position:relative;padding-left:26px;margin:10px 0;}
.checks li::before{
  content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; line-height:20px; text-align:center;
  border-radius:50%; font-size:.82rem; background:rgba(143,95,255,.18); color:#e9ddff; border:1px solid rgba(143,95,255,.35);
}
.outcomes{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;}
.outcomes div{background:rgba(143,95,255,.1);border:1px solid rgba(143,95,255,.28);border-radius:12px;padding:10px 12px;min-width:120px;text-align:center;}
.outcomes span{display:block;font-weight:700;color:var(--purple-2);}
.outcomes small{display:block;color:#c8c5e0;opacity:.9;margin-top:2px;}

/* ===== Final CTA / Footer ===== */
.final-cta{
  margin-top:var(--s-5); 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 ===== */
@media (max-width:900px){
  .service-subnav{ top:84px; margin-top:-16px; }
  .service-section{ scroll-margin-top:116px; }
  .pill{ font-size:.85rem; padding:8px 12px; }
  .service-subnav nav{ gap:10px; padding:5px; }
  .hero-content h1{ font-size:2.6rem; }
  .subtitle{ font-size:1rem; }
}