/* Let the hero artwork dissolve into the page instead of ending at a tile. */
.hero-visual {
  overflow: visible;
  border-radius: 0;
  background: radial-gradient(circle at 50% 50%, rgba(40, 127, 117, .16), transparent 68%);
  box-shadow: none;
}
.hero-visual::after { display: none; }
.holo-art,
.holo-shade {
  -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 48%, rgba(0, 0, 0, .85) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at center, #000 48%, rgba(0, 0, 0, .85) 70%, transparent 100%);
}
.signal-strip { border-top: 0; }

/* Full-section circuit routes stay behind copy, controls, and cards. */
.hero,
.services-section,
.approach-section,
.about-section,
.faq-section,
.contact-section,
.site-footer { position: relative; overflow: hidden; }

.hero > .container,
.services-section > .container,
.approach-section > .container,
.about-section > .container,
.faq-section > .container,
.contact-section > .container,
.site-footer > .container { position: relative; z-index: 1; }

.circuit-network {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(98, 217, 191, .28);
  pointer-events: none;
  opacity: .78;
}
.circuit-route {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.circuit-current {
  fill: none;
  stroke: #b6f17c;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 97;
  vector-effect: non-scaling-stroke;
  opacity: .78;
  filter: drop-shadow(0 0 5px rgba(182, 241, 124, .9));
  animation: circuit-current-flow 12s linear infinite;
}
@keyframes circuit-current-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -100; }
}
.circuit-signal {
  fill: #b6f17c;
  opacity: .72;
  filter: drop-shadow(0 0 6px #b6f17c) drop-shadow(0 0 13px rgba(98, 217, 191, .8));
}

.services-section .circuit-network,
.about-section .circuit-network,
.faq-section .circuit-network { color: rgba(25, 107, 82, .27); opacity: .72; }
.services-section .circuit-signal,
.about-section .circuit-signal,
.faq-section .circuit-signal {
  fill: #328866;
  opacity: .58;
  filter: drop-shadow(0 0 5px rgba(35, 136, 96, .5));
}
.services-section .circuit-current,
.about-section .circuit-current,
.faq-section .circuit-current {
  stroke: #328866;
  filter: drop-shadow(0 0 5px rgba(35, 136, 96, .55));
}
.site-footer .circuit-network { opacity: .48; }

@media (max-width: 760px) {
  .hero-visual {
    width: calc(100% + 36px);
    max-width: none;
    margin: 0 -18px 25px;
  }
  .circuit-network { opacity: .66; }
  .circuit-current { stroke-width: 2.8; opacity: 1; animation-duration: 9s; }
  .services-section .circuit-network,
  .about-section .circuit-network,
  .faq-section .circuit-network { opacity: .78; }
}

@media (max-width: 440px) {
  .hero-visual { width: calc(100% + 36px); margin: 0 -18px 16px; border-radius: 0; }
  .holo-art,
  .holo-shade {
    -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 53%, rgba(0, 0, 0, .82) 73%, transparent 100%);
    mask-image: radial-gradient(ellipse closest-side at center, #000 53%, rgba(0, 0, 0, .82) 73%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .circuit-signal, .circuit-current { display: none; }
}