.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.link-terminal {
  display: inline-grid;
  flex: 0 0 22px;
  place-items: center;
  width: 22px;
  height: 22px;
  line-height: 0;
}
.link-terminal svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .services-section .service-card::before {
    background:
      linear-gradient(90deg, transparent, rgba(182, 241, 124, .96), transparent) top left / 45% 3px no-repeat,
      linear-gradient(90deg, #b6f17c, #62d9bf 44%, transparent 84%) top left / 100% 2px no-repeat,
      linear-gradient(90deg, rgba(143, 239, 198, .055) 1px, transparent 1px),
      linear-gradient(rgba(143, 239, 198, .055) 1px, transparent 1px);
    background-size: 45% 3px, 100% 2px, 35px 35px, 35px 35px;
    animation: mobile-conduit 4.8s linear infinite;
  }
  .services-section .service-card:nth-child(2)::before { animation-delay: -1.2s; }
  .services-section .service-card:nth-child(3)::before { animation-delay: -2.4s; }
  .services-section .service-card:nth-child(4)::before { animation-delay: -3.6s; }

  .services-section .service-card::after {
    left: 0;
    right: 0;
    top: -80px;
    height: 80px;
    transform: none;
    background: linear-gradient(180deg, transparent, rgba(116, 236, 196, .14) 55%, transparent);
    animation: mobile-card-scan 7s linear infinite;
  }

  .services-section .service-icon { animation-duration: 3.6s; }
}

@keyframes mobile-conduit {
  from { background-position: -85% 0, 0 0, 0 0, 0 0; }
  to { background-position: 185% 0, 0 0, 0 0, 0 0; }
}
@keyframes mobile-card-scan {
  0%, 8% { top: -80px; opacity: 0; }
  12% { opacity: 1; }
  78% { top: 100%; opacity: 1; }
  84%, 100% { top: 100%; opacity: 0; }
}
