/* Keep the network behind the content and soften it wherever copy overlaps. */
.page-hero,
.about-neural,
.cta-band {
  background-color: #030711;
  isolation: isolate;
}

.neural-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.page-hero::after,
.about-neural::after,
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.page-hero::after,
.about-neural::after {
  background: linear-gradient(90deg, #030711 4%, rgba(3, 7, 17, 0.96) 28%, rgba(3, 7, 17, 0.75) 43%, transparent 68%),
    linear-gradient(0deg, #030711, transparent 16%, transparent 88%, rgba(3, 7, 17, 0.4));
}

.cta-band::after {
  background: radial-gradient(ellipse at center, rgba(3, 7, 17, 0.86), rgba(3, 7, 17, 0.35) 80%);
}

.page-hero .hero-lead,
.about-neural .about-lead,
.cta-band p {
  color: #acb8ca;
}

@media (max-width: 759px) {
  .page-hero::after,
  .about-neural::after {
    background: linear-gradient(90deg, rgba(3, 7, 17, 0.93), rgba(3, 7, 17, 0.63) 60%, rgba(3, 7, 17, 0.25)),
      linear-gradient(0deg, #030711, transparent 30%, rgba(3, 7, 17, 0.2));
  }
}