/* =========================================================
   BOOMER AUTOMATION — SERVICES CSS
   File: services.v1.css
   Purpose: chic marketing-style services page with large
   blocks, editorial sections, counters, signal animation,
   and minimal card usage.
========================================================= */

/* =========================================================
   SERVICES HERO
========================================================= */

.services-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding: 7.5rem 0 5.5rem;
  overflow: hidden;
}

/* Dark gradient layer over the hero image for readable text. */
.services-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgba(3, 7, 18, 0.96) 0%,
      rgba(3, 7, 18, 0.78) 48%,
      rgba(3, 7, 18, 0.34) 100%
    ),
    radial-gradient(circle at 22% 44%, rgba(54, 243, 255, 0.18), transparent 38%),
    radial-gradient(circle at 72% 42%, rgba(124, 92, 255, 0.2), transparent 34%);
}

/* Full-bleed image wrapper. */
.services-hero-image-wrap {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

/* Hero image targeted by services.v1.js for parallax. */
.services-hero-image {
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center;
  opacity: 0.46;
  transform: translate3d(0, 0, 0) scale(1.04);
  will-change: transform;
}

/* Extra overlay to blend the hero into the page. */
.services-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(3, 7, 18, 0.92) 100%),
    radial-gradient(circle at 65% 48%, rgba(54, 243, 255, 0.13), transparent 32%);
}

/* Hero text container. */
.services-hero-content {
  max-width: 980px;
}

/* Large editorial headline, reduced slightly from previous version. */
.services-hero h1 {
  max-width: 980px;
  margin-bottom: 1.2rem;
  font-size: clamp(2.65rem, 7.2vw, 6.35rem);
  line-height: 0.9;
  letter-spacing: -0.08em;
}

/* Hero body copy. */
.services-hero-copy {
  max-width: 720px;
  margin-bottom: 1.7rem;
  color: var(--soft);
  font-size: clamp(1.06rem, 2vw, 1.35rem);
}

/* CTA row used in hero and final CTA. */
.services-hero-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* =========================================================
   SERVICE INDEX / COUNTER STRIP
========================================================= */

.service-index {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 22%, rgba(54, 243, 255, 0.1), transparent 30%),
    radial-gradient(circle at 88% 72%, rgba(124, 92, 255, 0.14), transparent 32%),
    var(--bg);
}

/* Two-part intro block. */
.service-index-grid {
  display: grid;
  gap: 2rem;
}

/* Intro headline, reduced slightly from previous version. */
.service-index-copy h2 {
  max-width: 850px;
  margin-bottom: 0;
  font-size: clamp(2.15rem, 5.8vw, 4.9rem);
  line-height: 0.94;
  letter-spacing: -0.075em;
}

/* Counter list reads like a premium stats strip, not cards. */
.service-index-metrics {
  display: grid;
  border-top: 1px solid var(--border);
}

/* Individual metric row. */
.metric-line {
  display: grid;
  grid-template-columns: 0.42fr 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

/* Animated counter number. */
.metric-number {
  color: var(--text);
  font-size: clamp(3rem, 13vw, 7rem);
  font-weight: 950;
  line-height: 0.85;
  letter-spacing: -0.08em;
}

/* Metric label. */
.metric-line p {
  max-width: 28rem;
  margin-bottom: 0;
  color: var(--soft);
  font-weight: 700;
}

/* =========================================================
   SERVICE EDITORIAL BLOCKS
========================================================= */

.service-editorial {
  background: #020617;
}

/* Large service blocks replace a card-heavy layout. */
.service-block {
  position: relative;
  padding: clamp(4rem, 8vw, 8rem) 0;
  overflow: hidden;
}

/* Dark service block style. */
.service-block-dark {
  background:
    radial-gradient(circle at 14% 18%, rgba(54, 243, 255, 0.12), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(124, 92, 255, 0.16), transparent 34%),
    linear-gradient(180deg, #020617 0%, #07111f 100%);
}

/* Alternate split block style to vary rhythm. */
.service-block-split {
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 255, 182, 0.08), transparent 28%),
    radial-gradient(circle at 84% 72%, rgba(54, 243, 255, 0.1), transparent 30%),
    #030712;
}

/* Service block layout. */
.service-block-grid {
  display: grid;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

/* Large image block.
   Uses a defined visual area and relative positioning so the image
   can fill the full media block at all viewport sizes. */
.service-block-media {
  position: relative;
  min-height: clamp(21rem, 52vw, 36rem);
  border-radius: clamp(1.4rem, 4vw, 3rem);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #020617;
}

/* Image overlay for polish. */
.service-block-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 0%, rgba(3, 7, 18, 0.62) 100%),
    radial-gradient(circle at 35% 30%, rgba(54, 243, 255, 0.16), transparent 36%);
  pointer-events: none;
}

/* Service block image.
   Positioned absolutely so it covers the entire media block instead
   of flowing naturally and leaving empty space underneath at large sizes. */
.service-block-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle hover zoom on image. */
.service-block:hover .service-block-media img {
  transform: scale(1.055);
}

/* Text area for service blocks. */
.service-block-content {
  position: relative;
}

/* Giant service number marker.
   Uses safer line-height and letter-spacing so numbers like "01"
   do not visually overlap or compress into themselves. */
.service-number {
  display: block;
  margin-bottom: 1rem;
  color: rgba(248, 250, 252, 0.18);
  font-size: clamp(3.5rem, 12vw, 8.5rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.045em;
}

/* Service type label. */
.service-label {
  margin-bottom: 0.8rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Service headline, reduced slightly from previous version. */
.service-block-content h2 {
  max-width: 760px;
  margin-bottom: 1rem;
  color: var(--text);
  font-size: clamp(2rem, 5.4vw, 4.85rem);
  line-height: 0.94;
  letter-spacing: -0.075em;
}

/* Service paragraph. */
.service-block-content p {
  max-width: 660px;
  color: var(--soft);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

/* Simple block-based detail list. */
.service-detail-list {
  display: grid;
  margin-top: 2rem;
  border-top: 1px solid var(--border);
}

/* Individual service detail row. */
.service-detail-list span {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-weight: 800;
}

/* =========================================================
   SIGNAL SECTION
========================================================= */

.signal-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(56, 255, 182, 0.1), transparent 30%),
    radial-gradient(circle at 82% 66%, rgba(124, 92, 255, 0.18), transparent 34%),
    #020617;
}

/* Grid for copy and animated signal map. */
.signal-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

/* Signal section headline, reduced slightly from previous version. */
.signal-copy h2 {
  max-width: 760px;
  margin-bottom: 1rem;
  font-size: clamp(2rem, 5.8vw, 4.9rem);
  line-height: 0.94;
  letter-spacing: -0.075em;
}

/* Signal section paragraph. */
.signal-copy p {
  max-width: 680px;
}

/* Animated system map container.
   On smaller viewports, this stays horizontal as requested.
   Horizontal overflow is allowed inside this element only, so the
   page itself does not get cut off or become broken. */
.signal-map {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(7.4rem, 1fr)
    clamp(1.4rem, 7vw, 2.6rem)
    minmax(7.4rem, 1fr)
    clamp(1.4rem, 7vw, 2.6rem)
    minmax(7.4rem, 1fr)
    clamp(1.4rem, 7vw, 2.6rem)
    minmax(8.6rem, 1fr);
  gap: 0;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  padding: 1rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Hide horizontal scrollbar in WebKit browsers while keeping scroll usable. */
.signal-map::-webkit-scrollbar {
  display: none;
}

/* Hide horizontal scrollbar in Firefox and legacy Edge while keeping scroll usable. */
.signal-map {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Sweeping glow animation across the signal map. */
.signal-map::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(54, 243, 255, 0.13), transparent);
  animation: signalSweep 4.8s ease-in-out infinite;
  pointer-events: none;
}

/* Individual node in the signal animation.
   min-width: 0 allows nodes to shrink properly inside grid columns. */
.signal-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 5rem;
  padding-inline: clamp(0.85rem, 3vw, 1.1rem);
  border: 1px solid rgba(54, 243, 255, 0.2);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 20% 20%, rgba(54, 243, 255, 0.1), transparent 32%),
    rgba(255, 255, 255, 0.055);
  color: var(--text);
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.055em;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Connector track between nodes.
   Smaller viewports use horizontal movement. */
.signal-track {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 2px;
  margin-inline: auto;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 24px rgba(54, 243, 255, 0.55);
}

/* Moving dot on connector track.
   Smaller viewports move left to right. */
.signal-track::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  animation: signalPulseHorizontal 2.4s ease-in-out infinite;
}

/* Sweeping glow keyframes. */
@keyframes signalSweep {
  0% {
    transform: translateX(-115%);
  }

  55%,
  100% {
    transform: translateX(270%);
  }
}

/* Horizontal pulse keyframes for smaller viewports. */
@keyframes signalPulseHorizontal {
  0% {
    left: 0;
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    left: calc(100% - 0.75rem);
    opacity: 0;
  }
}

/* Vertical pulse keyframes for desktop. */
@keyframes signalPulseVertical {
  0% {
    top: 0;
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    top: calc(100% - 0.75rem);
    opacity: 0;
  }
}

/* =========================================================
   MAINTENANCE SECTION
========================================================= */

.maintenance-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 22%, rgba(54, 243, 255, 0.1), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(124, 92, 255, 0.14), transparent 34%),
    var(--bg);
}

/* Intentional occasional card-style callout. */
.maintenance-callout {
  display: grid;
  gap: 1.6rem;
  padding: clamp(1.6rem, 5vw, 4rem);
  border: 1px solid var(--border);
  border-radius: 2.3rem;
  background:
    radial-gradient(circle at 92% 10%, rgba(54, 243, 255, 0.14), transparent 30%),
    rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow);
}

/* Maintenance headline, reduced slightly from previous version. */
.maintenance-heading h2 {
  max-width: 760px;
  margin-bottom: 0;
  font-size: clamp(2rem, 5.6vw, 4.75rem);
  line-height: 0.94;
  letter-spacing: -0.075em;
}

/* Maintenance copy layout. */
.maintenance-copy {
  display: grid;
  gap: 1rem;
}

/* Maintenance text. */
.maintenance-copy p {
  margin-bottom: 0;
  color: var(--soft);
}

/* =========================================================
   PROCESS STRIP
========================================================= */

.process-strip {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #020617 0%, #07111f 52%, #030712 100%);
}

/* Process intro headline, reduced slightly from previous version. */
.process-strip-heading h2 {
  max-width: 840px;
  margin-bottom: 0;
  font-size: clamp(2rem, 5.8vw, 4.9rem);
  line-height: 0.94;
  letter-spacing: -0.075em;
}

/* Process rows container. */
.process-rows {
  margin-top: 2.4rem;
  border-top: 1px solid var(--border);
}

/* Individual process row. */
.process-row {
  display: grid;
  gap: 0.65rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--border);
}

/* Process number. */
.process-row span {
  color: var(--accent);
  font-weight: 950;
}

/* Process title, reduced slightly from previous version. */
.process-row h3 {
  margin-bottom: 0;
  color: var(--text);
  font-size: clamp(1.45rem, 4.4vw, 2.65rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

/* Process body copy. */
.process-row p {
  max-width: 42rem;
  margin-bottom: 0;
}

/* =========================================================
   FINAL CTA
========================================================= */

.services-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 26%, rgba(54, 243, 255, 0.16), transparent 34%),
    radial-gradient(circle at 80% 70%, rgba(124, 92, 255, 0.18), transparent 36%),
    #020617;
}

/* Final CTA content block. */
.services-cta-inner {
  max-width: 940px;
}

/* Final CTA headline, reduced slightly from previous version. */
.services-cta h2 {
  max-width: 860px;
  margin-bottom: 1rem;
  color: var(--text);
  font-size: clamp(2.1rem, 5.9vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.075em;
}

/* Final CTA paragraph. */
.services-cta p {
  max-width: 680px;
  margin-bottom: 1.5rem;
  color: var(--soft);
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (min-width: 760px) {
  /* Give the intro and counters a stronger editorial layout. */
  .service-index-grid {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }

  /* Make the process rows read more like a table on tablet. */
  .process-row {
    grid-template-columns: 0.22fr 0.52fr 1fr;
    align-items: baseline;
  }

  /* Give the horizontal signal map slightly more breathing room on tablet. */
  .signal-map {
    grid-template-columns:
      minmax(8rem, 1fr)
      clamp(1.75rem, 5vw, 3rem)
      minmax(8rem, 1fr)
      clamp(1.75rem, 5vw, 3rem)
      minmax(8rem, 1fr)
      clamp(1.75rem, 5vw, 3rem)
      minmax(9.2rem, 1fr);
  }
}

/* =========================================================
   RESPONSIVE — DESKTOP
========================================================= */

@media (min-width: 980px) {
  /* Create split editorial service sections. */
  .service-block-grid {
    grid-template-columns: 0.95fr 1.05fr;
  }

  /* Reverse the second service block visually. */
  .service-block-split .service-block-content {
    order: 1;
  }

  /* Reverse the second service image visually. */
  .service-block-split .service-block-media {
    order: 2;
  }

  /* Two-column signal section on desktop. */
  .signal-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }

  /* On desktop, switch the signal map to vertical.
     This makes the animation move up and down at full viewport. */
  .signal-map {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    width: min(520px, 100%);
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* Keep each signal node centered and contained on desktop. */
  .signal-node {
    width: 100%;
    min-width: 0;
    min-height: 5rem;
    padding-inline: clamp(0.9rem, 2vw, 1.25rem);
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    overflow-wrap: anywhere;
  }

  /* Desktop connector tracks become vertical. */
  .signal-track {
    width: 2px;
    height: clamp(2.4rem, 5vw, 3.8rem);
    margin-inline: auto;
    background: linear-gradient(180deg, transparent, var(--accent), transparent);
  }

  /* Desktop pulse moves up and down. */
  .signal-track::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: signalPulseVertical 2.4s ease-in-out infinite;
  }

  /* Maintenance callout becomes a split block. */
  .maintenance-callout {
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
  }
}

/* =========================================================
   RESPONSIVE — LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {
  /* Give the service image blocks a refined desktop height without
     allowing empty image space underneath. */
  .service-block-media {
    min-height: 34rem;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 680px) {
  /* Keep hero content lower on mobile for stronger visual impact. */
  .services-hero {
    align-items: end;
    padding: 7rem 0 6.5rem;
  }

  /* Strengthen mobile overlay so text stays readable. */
  .services-hero::before {
    background:
      linear-gradient(180deg, rgba(3, 7, 18, 0.38) 0%, rgba(3, 7, 18, 0.97) 70%),
      radial-gradient(circle at 50% 35%, rgba(54, 243, 255, 0.18), transparent 38%);
  }

  /* Slightly reduce hero image height on mobile. */
  .services-hero-image {
    height: 105%;
    opacity: 0.54;
  }

  /* Stack hero CTA buttons on mobile. */
  .services-hero-actions {
    flex-direction: column;
  }

  /* Make CTA buttons easy to tap. */
  .services-hero-actions .btn {
    width: 100%;
  }

  /* Keep metric rows compact on mobile. */
  .metric-line {
    grid-template-columns: 0.34fr 1fr;
  }

  /* Reduce service number dominance further on small screens
     while keeping the digits readable and separated. */
  .service-number {
    font-size: clamp(3rem, 18vw, 5.8rem);
    line-height: 1;
    letter-spacing: -0.035em;
  }

  /* Keep service images balanced on small screens. */
  .service-block-media {
    min-height: 20rem;
  }

  /* Keep the signal animation horizontal on smaller viewports.
     The user can swipe it if the viewport is too narrow. */
  .signal-map {
    margin-inline: calc((100vw - min(100vw, var(--container))) / -2);
    padding-inline: max(1rem, calc((100vw - var(--container)) / 2));
  }
}