.services-page {
  --services-violet: #7657ff;
  --services-blue: #2a9dff;
  overflow: hidden;
  background: var(--bg);
}

.services-hero {
  position: relative;
  min-height: 780px;
  padding: 190px 0 110px;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 44%, rgba(69, 65, 232, .26), transparent 34%),
    radial-gradient(circle at 18% 22%, rgba(20, 137, 255, .13), transparent 31%),
    linear-gradient(135deg, #03070d 0%, #06111e 58%, #090820 100%);
}

html[data-theme="light"] .services-hero {
  background:
    radial-gradient(circle at 76% 44%, rgba(86, 83, 238, .18), transparent 34%),
    radial-gradient(circle at 18% 22%, rgba(20, 137, 255, .14), transparent 31%),
    linear-gradient(135deg, #edf5fc 0%, #f8fbff 58%, #f1efff 100%);
}

.services-mesh {
  position: absolute;
  inset: 0;
  opacity: .23;
  background-image:
    linear-gradient(rgba(105, 151, 201, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 151, 201, .12) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.services-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
  align-items: center;
  gap: 70px;
  position: relative;
  z-index: 1;
}

.services-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 27px;
  color: #72bcff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
}

.services-kicker::before {
  width: 25px;
  height: 1px;
  content: "";
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.services-hero h1 {
  max-width: 770px;
  margin: 0;
  font: 650 clamp(52px, 6.5vw, 88px)/.96 var(--font-display);
  letter-spacing: -.055em;
}

.services-hero h1 span,
.services-hero h1 em { display: block; }
.services-hero h1 em {
  color: transparent;
  background: linear-gradient(110deg, #f6f8ff 12%, #7ec5ff 48%, #9c83ff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}
html[data-theme="light"] .services-hero h1 em { background-image: linear-gradient(110deg, #0c3158, #0875db 52%, #6545db); }

.services-hero-copy > p {
  max-width: 660px;
  margin: 31px 0 0;
  color: var(--text-soft);
  font-size: 18px;
  line-height: 1.72;
}

.services-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

.services-hero-actions .button { border: 1px solid transparent; }

.services-intelligence {
  display: grid;
  place-items: center;
  position: relative;
  width: min(480px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
}

.services-intelligence::before {
  position: absolute;
  width: 69%;
  height: 69%;
  content: "";
  background: radial-gradient(circle, rgba(30, 128, 255, .2), transparent 66%);
  filter: blur(5px);
  animation: services-breathe 4s ease-in-out infinite;
}

.intelligence-orbit {
  position: absolute;
  border: 1px solid rgba(96, 164, 255, .24);
  border-radius: 50%;
}
.intelligence-orbit::before {
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  content: "";
  background: #67c0ff;
  border-radius: 50%;
  box-shadow: 0 0 18px #359fff;
}
.intelligence-orbit-one { inset: 11%; animation: services-spin 17s linear infinite; }
.intelligence-orbit-two { inset: 24%; border-color: rgba(143, 112, 255, .28); animation: services-spin 11s linear reverse infinite; }
.intelligence-orbit-two::before { background: #a08bff; box-shadow: 0 0 18px #7f60ff; }

.intelligence-core {
  display: grid;
  place-items: center;
  position: relative;
  width: 41%;
  aspect-ratio: 1;
  background: rgba(7, 16, 30, .8);
  border: 1px solid rgba(116, 186, 255, .35);
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(34, 126, 255, .15), 0 0 70px rgba(28, 105, 255, .2);
  backdrop-filter: blur(12px);
}
.intelligence-core img { width: 70%; height: 70%; object-fit: contain; }
.intelligence-core span {
  position: absolute;
  bottom: -34px;
  color: #90c9ff;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .24em;
}

.intelligence-tag {
  position: absolute;
  padding: 8px 11px;
  color: #9ad1ff;
  background: rgba(4, 13, 26, .82);
  border: 1px solid rgba(96, 173, 255, .22);
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}
.tag-one { top: 16%; right: 6%; }
.tag-two { bottom: 19%; right: 1%; }
.tag-three { bottom: 10%; left: 8%; }

.services-capabilities {
  background:
    radial-gradient(circle at 85% 15%, rgba(84, 54, 202, .1), transparent 24%),
    var(--bg);
}
.services-heading { max-width: 760px; margin-bottom: 55px; }
.services-heading > span,
.services-cta-inner > div:first-child > span {
  color: #7dbdff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
}
.services-heading h2,
.services-cta h2 {
  margin: 14px 0 18px;
  font: 620 clamp(38px, 5vw, 66px)/1.02 var(--font-display);
  letter-spacing: -.045em;
}
.services-heading p { max-width: 630px; margin: 0; color: var(--text-soft); font-size: 17px; line-height: 1.7; }

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.capability-card {
  position: relative;
  min-height: 280px;
  padding: 27px 25px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(15, 29, 45, .88), rgba(7, 14, 24, .95));
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
html[data-theme="light"] .capability-card { background: linear-gradient(145deg, #fff, #edf4fb); }
.capability-card::after {
  position: absolute;
  right: -30%;
  bottom: -55%;
  width: 170px;
  height: 170px;
  content: "";
  background: radial-gradient(circle, rgba(36, 137, 255, .15), transparent 68%);
}
.capability-card:hover { transform: translateY(-7px); border-color: rgba(89, 170, 255, .35); box-shadow: 0 20px 45px rgba(0, 0, 0, .18); }
.capability-card > span { color: var(--text-faint); font-size: 10px; letter-spacing: .16em; }
.capability-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 34px 0 24px;
  color: #87c8ff;
  background: rgba(37, 139, 255, .1);
  border: 1px solid rgba(65, 160, 255, .2);
  border-radius: 13px;
  font-size: 11px;
  font-weight: 750;
}
.capability-card h3 { margin: 0 0 12px; font: 600 20px/1.2 var(--font-display); letter-spacing: -.02em; }
.capability-card p { margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.62; }
.capability-featured { grid-column: span 2; background: linear-gradient(135deg, rgba(10, 66, 119, .65), rgba(32, 24, 83, .65)); }
.capability-featured h3 { font-size: 28px; }

.services-method { padding-top: 30px; }
.method-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.method-track article { position: relative; padding: 45px 36px 48px 0; }
.method-track article + article { padding-left: 36px; border-left: 1px solid var(--line); }
.method-track span { color: #65b5ff; font-size: 10px; letter-spacing: .18em; }
.method-track h3 { margin: 22px 0 11px; font: 600 24px/1.1 var(--font-display); }
.method-track p { max-width: 310px; margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.65; }

.services-cta { padding-top: 45px; }
.services-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 35px 60px;
  position: relative;
  padding: 62px;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 20%, rgba(99, 78, 237, .28), transparent 34%),
    linear-gradient(130deg, rgba(10, 47, 82, .72), rgba(15, 11, 43, .85));
  border: 1px solid rgba(101, 173, 255, .22);
  border-radius: 32px;
}
.services-cta h2 { max-width: 780px; margin-bottom: 0; font-size: clamp(35px, 4.4vw, 59px); }
.services-contact-actions { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 10px; }
.services-contact-actions .button { width: 210px; border: 1px solid transparent; }
.engineer-signature { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid rgba(159, 197, 238, .17); }
.engineer-signature strong { display: block; font: 650 18px/1.2 var(--font-display); letter-spacing: .04em; }
.engineer-signature span { display: block; margin-top: 7px; color: #9bb1c8; font-size: 12px; font-style: italic; letter-spacing: .08em; }

html[data-theme="light"] .services-cta-inner {
  isolation: isolate;
  color: #0b1c34;
  background:
    radial-gradient(circle at 91% 8%, rgba(128, 91, 255, .24), transparent 31%),
    radial-gradient(circle at 8% 100%, rgba(49, 158, 255, .18), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(237, 245, 255, .96) 52%, rgba(244, 239, 255, .96));
  border-color: rgba(72, 120, 201, .2);
  box-shadow: 0 32px 80px rgba(36, 77, 130, .17), inset 0 1px 0 rgba(255, 255, 255, .95);
}
html[data-theme="light"] .services-cta-inner::before,
html[data-theme="light"] .services-cta-inner::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}
html[data-theme="light"] .services-cta-inner::before {
  inset: 0;
  opacity: .38;
  background-image: linear-gradient(rgba(47, 126, 210, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 126, 210, .1) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(100deg, #000, transparent 70%);
}
html[data-theme="light"] .services-cta-inner::after {
  top: -80px;
  right: -65px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(105, 89, 234, .17);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(70, 137, 232, .055), 0 0 0 66px rgba(108, 81, 231, .04);
}
html[data-theme="light"] .services-cta-inner > div:first-child > span { color: #176fc8; }
html[data-theme="light"] .services-cta h2 { color: #0b1c34; text-wrap: balance; }
html[data-theme="light"] .services-contact-actions .button-primary { box-shadow: 0 15px 32px rgba(20, 111, 221, .25); }
html[data-theme="light"] .services-contact-actions .button-ghost { color: #17365d; background: rgba(255, 255, 255, .72); border-color: rgba(54, 107, 176, .22); box-shadow: 0 10px 24px rgba(45, 87, 143, .09); }
html[data-theme="light"] .services-contact-actions .button-ghost:hover { color: #0b65bd; background: #fff; border-color: rgba(29, 119, 210, .38); }
html[data-theme="light"] .engineer-signature { border-top-color: rgba(54, 107, 176, .17); }
html[data-theme="light"] .engineer-signature strong { color: #102746; }
html[data-theme="light"] .engineer-signature span { color: #55708f; }

@keyframes services-spin { to { transform: rotate(360deg); } }
@keyframes services-breathe { 50% { transform: scale(1.12); opacity: .75; } }

@media (max-width: 960px) {
  .services-hero { min-height: auto; padding-bottom: 90px; }
  .services-hero-grid { grid-template-columns: 1fr; }
  .services-intelligence { width: min(430px, 88vw); }
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-cta-inner { grid-template-columns: 1fr; }
  .services-contact-actions { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 650px) {
  .services-hero { padding: 132px 0 70px; }
  .services-hero-grid { gap: 36px; }
  .services-hero h1 { font-size: clamp(43px, 13vw, 60px); }
  .services-hero-copy > p { font-size: 16px; }
  .services-hero-actions .button { width: 100%; }
  .services-intelligence { width: min(330px, 88vw); }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-featured { grid-column: auto; }
  .capability-card { min-height: 245px; }
  .method-track { grid-template-columns: 1fr; }
  .method-track article { padding: 30px 6px; }
  .method-track article + article { padding-left: 6px; border-top: 1px solid var(--line); border-left: 0; }
  .services-cta { padding-bottom: 125px; }
  .services-cta-inner { padding: 34px 24px; border-radius: 24px; }
  .services-contact-actions { align-items: stretch; flex-direction: column; }
  .services-contact-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .intelligence-orbit,
  .services-intelligence::before { animation: none; }
}