/* Shared hero background. No borrowed artwork or media requests. */
[data-hero-grid] { position: relative; isolation: isolate; overflow: hidden; }
[data-hero-grid] > .wrap { position: relative; z-index: 1; }
.hero-network {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 90% 20%, #1c525b50, transparent 55%);
  mask-image: linear-gradient(#000 0%, #000 58%, transparent 96%);
}
.hero-network::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Leave a calm, dark reading area behind the centered headline and CTA. */
  background: radial-gradient(ellipse 42% 48% at 50% 24%, #0c1d2af5 25%, #0c1d2acf 55%, transparent 100%);
}
.hero-network-plane {
  position: absolute;
  left: 50%;
  top: 340px;
  width: 1920px;
  height: 1536px;
  transform: translate(-50%, -50%) rotateX(55deg) rotateZ(-35deg);
  background-image:
    linear-gradient(#7bc9c12b 1px, transparent 1px),
    linear-gradient(90deg, #7bc9c12b 1px, transparent 1px),
    linear-gradient(#7bc9c10c 1px, transparent 1px),
    linear-gradient(90deg, #7bc9c10c 1px, transparent 1px);
  background-size: 192px 192px, 192px 192px, 48px 48px, 48px 48px;
}
.network-tile { position: absolute; width: 192px; height: 192px; background: #356c6d22; border: 1px solid #7bc9c11f; }
.tile-one { left: 384px; top: 384px; }
.tile-two { left: 1344px; top: 768px; background: #428c8524; }
.tile-three { left: 960px; top: 1152px; }
.network-track { position: absolute; width: 576px; height: 1px; background: #7bc9c130; }
.network-track::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 144px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #7bc9c170 75%, #b0e7df);
  box-shadow: 0 0 10px #7bc9c14d;
  opacity: 0;
  animation: network-flow 12s linear infinite;
  animation-play-state: paused;
}
.track-one { left: 192px; top: 384px; }
.track-two { left: 1152px; top: 960px; }
.track-three { left: 384px; top: 1152px; }
.track-four { left: 1536px; top: 192px; transform: rotate(90deg); transform-origin: left center; }
.track-two::after { animation-delay: -4s; }
.track-three::after { animation-delay: -8s; }
.track-four::after { animation-delay: -6s; }
[data-hero-grid][data-motion="running"] .network-track::after { animation-play-state: running; }
.hero-motion-toggle {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: max(24px, calc((100% - 1120px) / 2));
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c1d2ae6;
  color: var(--muted);
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
}
.hero-motion-toggle:hover { color: var(--text); border-color: var(--aqua); }
@keyframes network-flow {
  0% { transform: translateX(0); opacity: 0; }
  12%, 68% { opacity: .8; }
  80%, 100% { transform: translateX(432px); opacity: 0; }
}
@media (max-width: 1080px) {
  .hero-motion-toggle { top: 0; min-height: 32px; font-size: .75rem; padding-block: 4px; }
  .foundation-hero[data-hero-grid] { padding-top: 64px !important; }
  .foundation-hero .hero-motion-toggle { min-height: 44px; }
}
@media (max-width: 600px) {
  .hero-network-plane { top: 300px; opacity: .6; }
  .hero-network::after { background: radial-gradient(ellipse 65% 55% at 50% 28%, #0c1d2af5 30%, #0c1d2acc 60%, transparent); }
  .track-three, .track-four { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .network-track::after { animation: none; }
  .hero-motion-toggle { display: none; }
}