/* =====================================================
   COREPLEX — services.css
   Services page only. Load AFTER styles.css.
   Uses the same tokens (--accent, --accent2, --card-bg…)
   so the page matches the rest of the site.
   ===================================================== */

/* ---------- Hero ---------- */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(150px,20vw,200px) 0 clamp(64px,9vw,96px);
  background:
    radial-gradient(700px circle at 82% 25%,rgba(139,92,246,.26),transparent 60%),
    radial-gradient(600px circle at 5% 115%,rgba(56,225,207,.13),transparent 60%),
    #090b10;
}
.page-hero::before{ /* fading grid */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 70% 35%,#000 15%,transparent 75%);
  mask-image:radial-gradient(ellipse 75% 85% at 70% 35%,#000 15%,transparent 75%);
}
.page-hero::after{ /* orbit rings */
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:460px;height:460px;right:-150px;top:-120px;border-radius:50%;
  border:1px solid rgba(182,165,255,.16);
  box-shadow:0 0 0 48px rgba(182,165,255,.03),0 0 0 100px rgba(56,225,207,.02);
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{letter-spacing:-.06em;line-height:1.02;margin-bottom:var(--sp-3)}
.page-hero>.container>p:last-child{max-width:600px;line-height:1.8;font-size:1.1rem;margin:0}

/* ---------- Section intro ---------- */
.services-intro{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-5);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--line);
}
.services-intro h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin:0}
.services-intro p:not(.eyebrow){max-width:480px;margin:var(--sp-2) 0 0;line-height:1.75}
.services-count{
  flex-shrink:0;display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border:1px solid var(--line-hi);border-radius:999px;
  background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#d9defa;font-size:.74rem;font-weight:700;letter-spacing:.1em;
}
.services-count::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent2);box-shadow:0 0 0 4px rgba(56,225,207,.16),0 0 12px var(--accent2);
}

/* ---------- Service cards ---------- */
.service-detail{
  min-height:340px;padding:clamp(26px,3vw,36px);
  border-radius:var(--r);
}
.service-detail::before{ /* hover spotlight */
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s;
  background:
    radial-gradient(460px circle at 90% -8%,rgba(139,92,246,.28),transparent 60%),
    radial-gradient(320px circle at 0% 115%,rgba(56,225,207,.12),transparent 60%);
}
.service-detail::after{ /* bottom accent line that draws in */
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.service-detail:hover,
.service-detail:target{
  transform:translateY(-6px);
  background:var(--card-bg) padding-box,var(--card-border-hi) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 34px 64px -30px rgba(124,92,255,.55);
}
.service-detail:hover::before,.service-detail:target::before{opacity:1}
.service-detail:hover::after,.service-detail:target::after{transform:scaleX(1)}
.service-detail>*{position:relative;z-index:1}

.service-detail .eyebrow{
  display:inline-flex;align-items:center;
  margin-bottom:var(--sp-3);padding:6px 12px;
  border:1px solid var(--line-hi);border-radius:999px;background:rgba(139,92,246,.12);
  color:#cfc4ff;font-size:.66rem;font-weight:700;letter-spacing:.1em;line-height:1.4;
}
.service-detail h2{
  max-width:440px;margin:0 0 var(--sp-2);
  font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.2;letter-spacing:-.04em;
}
.service-detail p{margin:0 0 var(--sp-3);font-size:.95rem;line-height:1.75;color:#b5bdca}

.service-detail ul{display:grid;gap:12px;margin:0;padding:var(--sp-3) 0 0;list-style:none;border-top:1px solid var(--line)}
.service-detail ul li{position:relative;margin:0;padding-left:32px;font-size:.9rem;line-height:1.55;color:#d3d9e4}
.service-detail ul li::before{
  content:"↗";position:absolute;left:0;top:1px;
  display:grid;place-items:center;width:20px;height:20px;border-radius:7px;
  background:linear-gradient(145deg,rgba(139,92,246,.3),rgba(56,225,207,.14));
  border:1px solid var(--line-hi);color:var(--accent2);font-size:.68rem;font-weight:700;
}

/* Big outlined numeral */
.service-number{
  position:absolute!important;top:16px;right:24px;z-index:0!important;pointer-events:none;
  font-family:var(--display);font-size:5rem;font-weight:700;line-height:1;letter-spacing:-.08em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);
  transition:-webkit-text-stroke-color .4s,transform .5s var(--ease);
}
.service-detail:hover .service-number{-webkit-text-stroke-color:rgba(155,140,255,.5);transform:translateY(-3px)}

/* ---------- CTA ---------- */
.cta-panel::after{
  content:"";position:absolute;width:260px;height:260px;top:-130px;right:10%;z-index:-1;
  border-radius:50%;background:rgba(56,225,207,.1);filter:blur(44px);pointer-events:none;
}

/* ---------- Responsive ---------- */
@media(max-width:767.98px){
  .page-hero::after{width:260px;height:260px;right:-150px;top:-90px}
  .page-hero::before{background-size:36px 36px}
  .services-intro{align-items:flex-start;flex-direction:column;gap:var(--sp-2)}
  .service-detail{min-height:auto;padding:26px}
  .service-number{font-size:3.6rem;top:18px;right:20px}
}
@media(prefers-reduced-motion:reduce){
  .service-detail,.service-detail::before,.service-detail::after,.service-number{transition:none}
  .service-detail:hover{transform:none}
}