/* Services public CMS bridge visual — SABAH Systems Technology */
.services-sub-hero {
  min-height: 560px;
  display: flex;
  align-items: center;
}

.services-sub-hero::after {
  opacity: .055;
}

.services-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  align-items: center;
  gap: clamp(38px, 6vw, 86px);
}

.services-hero-copy {
  position: relative;
  z-index: 2;
}

.services-hero-copy h1 {
  max-width: 820px;
}

.services-tech-visual {
  position: relative;
  z-index: 2;
  width: min(100%, 510px);
  margin-left: auto;
  filter: drop-shadow(0 30px 55px rgba(0, 8, 32, .28));
  isolation: isolate;
}

.services-tech-visual::before {
  content: "";
  position: absolute;
  inset: 9% 4% 5%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, .24), rgba(37, 99, 235, .05) 56%, transparent 72%);
  animation: sabah-tech-glow 4s ease-in-out infinite;
}

.services-tech-visual svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.tech-float {
  transform-box: fill-box;
  transform-origin: center;
  animation: sabah-tech-float 4.8s ease-in-out infinite;
}

.tech-float-delay {
  transform-box: fill-box;
  transform-origin: center;
  animation: sabah-tech-float 4.8s ease-in-out -2.1s infinite;
}

.tech-robot {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: sabah-robot-breathe 3.4s ease-in-out infinite;
}

.tech-robot-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: sabah-robot-blink 5s ease-in-out infinite;
}

.tech-gear {
  transform-box: fill-box;
  transform-origin: center;
  animation: sabah-gear-spin 11s linear infinite;
}

.tech-data-dot {
  animation: sabah-data-pulse 2.2s ease-in-out infinite;
}

.tech-data-dot:nth-of-type(2) { animation-delay: .35s; }
.tech-data-dot:nth-of-type(3) { animation-delay: .7s; }

.tech-signal {
  stroke-dasharray: 8 10;
  animation: sabah-signal-flow 3s linear infinite;
}

.tech-screen-bar {
  transform-box: fill-box;
  transform-origin: left center;
  animation: sabah-screen-bar 3.2s ease-in-out infinite;
}

.tech-screen-bar:nth-of-type(2) { animation-delay: .25s; }
.tech-screen-bar:nth-of-type(3) { animation-delay: .5s; }

.services-system-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: #dff5ff;
  background: rgba(255, 255, 255, .07);
  font-size: .78rem;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.services-system-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 5px rgba(52, 211, 153, .12);
  animation: sabah-status-pulse 2s ease-out infinite;
}

.service-grid.cms-loading {
  min-height: 320px;
}

.featured-service {
  border-color: rgba(37, 99, 235, .28);
  background: linear-gradient(145deg, #fff, #f5faff);
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.service-tags span {
  padding: 6px 9px;
  border: 1px solid rgba(37, 99, 235, .12);
  border-radius: 999px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: .7rem;
  font-weight: 800;
}

@keyframes sabah-tech-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-11px) rotate(1.2deg); }
}

@keyframes sabah-robot-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.012); }
}

@keyframes sabah-robot-blink {
  0%, 43%, 47%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(.12); }
}

@keyframes sabah-gear-spin {
  to { transform: rotate(360deg); }
}

@keyframes sabah-data-pulse {
  0%, 100% { opacity: .35; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes sabah-signal-flow {
  to { stroke-dashoffset: -36; }
}

@keyframes sabah-screen-bar {
  0%, 100% { transform: scaleX(.72); opacity: .62; }
  50% { transform: scaleX(1); opacity: 1; }
}

@keyframes sabah-tech-glow {
  0%, 100% { transform: scale(.96); opacity: .66; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes sabah-status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .42); }
  75%, 100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}

@media (max-width: 1040px) {
  .services-sub-hero { min-height: auto; }
  .services-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(310px, .68fr); gap: 30px; }
}

@media (max-width: 820px) {
  .services-hero-grid { grid-template-columns: 1fr; }
  .services-tech-visual { width: min(100%, 460px); margin: 8px auto -12px; }
  .services-hero-copy { text-align: center; }
  .services-hero-copy .eyebrow { justify-content: center; }
  .services-hero-copy p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
}

@media (max-width: 520px) {
  .services-sub-hero { padding-bottom: 52px; }
  .services-tech-visual { width: min(108%, 410px); margin-left: -4%; }
  .services-system-status { margin-top: 19px; font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .services-tech-visual::before,
  .tech-float,
  .tech-float-delay,
  .tech-robot,
  .tech-robot-eye,
  .tech-gear,
  .tech-data-dot,
  .tech-signal,
  .tech-screen-bar,
  .services-system-status::before {
    animation: none !important;
  }
}