.services-section {
  position: relative;
  background-color: #edf1ec;
  background-image:
    linear-gradient(rgba(14, 67, 63, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 67, 63, .035) 1px, transparent 1px);
  background-size: 44px 44px;
}

.services-section .section-intro > p { color: #4d6762; }

.services-section .service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.services-section .service-card {
  position: relative;
  isolation: isolate;
  min-height: 500px;
  overflow: hidden;
  padding: 28px 30px 26px;
  border: 1px solid rgba(104, 218, 185, .3);
  border-radius: 15px;
  background:
    radial-gradient(circle at 94% 5%, rgba(92, 213, 180, .14), transparent 34%),
    linear-gradient(135deg, #10313b, #071d28 66%, #071923);
  box-shadow: 0 14px 36px rgba(6, 30, 34, .12), inset 0 1px rgba(219, 255, 239, .06);
  color: #f0f8f3;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.services-section .service-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #b6f17c, #62d9bf 44%, transparent 84%) top left / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(143, 239, 198, .045) 1px, transparent 1px),
    linear-gradient(rgba(143, 239, 198, .045) 1px, transparent 1px);
  background-size: 100% 2px, 35px 35px, 35px 35px;
}

.services-section .service-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -15%;
  right: -15%;
  top: -42%;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(116, 236, 196, .055), transparent);
  transform: rotate(-13deg);
  animation: service-scan 12s linear infinite;
}

.services-section .service-card:nth-child(2)::after { animation-delay: -3s; }
.services-section .service-card:nth-child(3)::after { animation-delay: -6s; }
.services-section .service-card:nth-child(4)::after { animation-delay: -9s; }

.services-section .service-card > * { position: relative; z-index: 2; }

.services-section .service-card:hover,
.services-section .service-card:focus-within {
  transform: translateY(-7px);
  border-color: rgba(182, 241, 124, .78);
  box-shadow: 0 24px 50px rgba(4, 32, 34, .22), 0 0 28px rgba(98, 217, 191, .12);
}

.services-section .service-card-top { align-items: center; }

.services-section .service-number {
  color: #b6f17c;
  font-size: 12px;
  letter-spacing: .16em;
}

.services-section .service-number::after {
  content: "  SERVICE MODULE";
  color: #81aa9e;
  font-size: 9px;
  letter-spacing: .11em;
}

.services-section .service-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 10px;
  border: 1px solid rgba(126, 229, 188, .35);
  border-radius: 12px;
  background: rgba(98, 217, 191, .09);
  color: #a9f0bb;
  box-shadow: inset 0 0 16px rgba(98, 217, 191, .07), 0 0 18px rgba(98, 217, 191, .07);
  animation: service-icon-pulse 5s ease-in-out infinite;
  transition: transform .35s ease, box-shadow .35s ease;
}

.services-section .service-card:nth-child(2) .service-icon { animation-delay: -1.2s; }
.services-section .service-card:nth-child(3) .service-icon { animation-delay: -2.4s; }
.services-section .service-card:nth-child(4) .service-icon { animation-delay: -3.6s; }

.services-section .service-card:hover .service-icon,
.services-section .service-card:focus-within .service-icon {
  transform: rotate(-5deg) scale(1.08);
  box-shadow: 0 0 28px rgba(98, 217, 191, .27), inset 0 0 20px rgba(98, 217, 191, .12);
}

.services-section .service-card h3 {
  margin: 30px 0 10px;
  color: #f4fff8;
  font-size: clamp(23px, 2.5vw, 29px);
  letter-spacing: -.055em;
}

.services-section .service-card p {
  min-height: 0;
  margin-bottom: 18px;
  color: #bdd5d1;
  font-size: 15px;
  line-height: 1.6;
}

.services-section .service-list-label {
  display: block;
  margin-bottom: 5px;
  color: #a5e9ae;
  font: 700 10px var(--font-display);
  letter-spacing: .14em;
}

.services-section .service-card ul { margin-bottom: 18px; }
.services-section .service-card li {
  margin: 10px 0;
  color: #e1eee9;
  font-size: 14px;
  line-height: 1.5;
}
.services-section .service-card li::before {
  width: 6px;
  height: 6px;
  background: #b6f17c;
  box-shadow: 0 0 9px rgba(182, 241, 124, .65);
}

.services-section .service-outcome {
  display: grid;
  gap: 5px;
  margin: 0 0 20px;
  padding: 13px 15px;
  border-left: 2px solid #b6f17c;
  background: rgba(98, 217, 191, .07);
}
.services-section .service-outcome strong {
  color: #b6f17c;
  font: 700 11px var(--font-display);
  letter-spacing: .05em;
}
.services-section .service-outcome span {
  color: #d4e8df;
  font-size: 14px;
  line-height: 1.5;
}

.services-section .service-card > a {
  align-items: center;
  border-top: 1px solid rgba(133, 226, 195, .22);
  color: #b6f17c;
  font-size: 13px;
  transition: color .2s ease;
}
.services-section .service-card > a span {
  font-size: 20px;
  transition: transform .25s ease;
}
.services-section .service-card > a:hover { color: #e5ffba; }
.services-section .service-card > a:hover span { transform: translate(3px, -3px); }
.services-section .service-card > a:focus-visible {
  outline: 2px solid #b6f17c;
  outline-offset: 5px;
  border-radius: 3px;
}

@keyframes service-scan {
  0%, 12% { top: -42%; opacity: 0; }
  18% { opacity: 1; }
  50% { top: 110%; opacity: 1; }
  55%, 100% { top: 110%; opacity: 0; }
}
@keyframes service-icon-pulse {
  0%, 100% { box-shadow: inset 0 0 16px rgba(98, 217, 191, .07), 0 0 18px rgba(98, 217, 191, .07); }
  50% { box-shadow: inset 0 0 22px rgba(98, 217, 191, .12), 0 0 25px rgba(98, 217, 191, .19); }
}

@media (max-width: 760px) {
  .services-section .service-grid { grid-template-columns: 1fr; gap: 14px; }
  .services-section .service-card { min-height: 0; padding: 25px; }
}

@media (max-width: 440px) {
  .services-section .service-card { padding: 22px; }
  .services-section .service-number::after { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .services-section .service-card,
  .services-section .service-card::after,
  .services-section .service-icon,
  .services-section .service-card > a span { animation: none !important; transition: none !important; }
}