/* ============================================================
   Hero synapse network — navy stage.

   The canvas is a full-bleed background with the copy layered on top.
   A light hero was tried and rejected: red-on-white washed the network
   out to pink scratches and the section read as empty. The ground is
   navy (--surface-dark) rather than black so it stays in the same cool
   family as the light surfaces below it, and so the red reads warm
   against it instead of merely bright.

   This is the only dark block above the fold; the rest of the page is
   light. The light calibration is kept behind `.hero--light` in
   hero-network.js in case a pale variant is ever needed elsewhere.
   ============================================================ */

/* These stops mirror DARK.stops in hero-network.js. They only show for the
   instant before the canvas paints, but a flat colour there flashes as a
   different shape than the gradient that replaces it. */
.hero {
  position: relative;
  background: linear-gradient(135deg,
    rgb(10, 17, 32) 0%,
    rgb(27, 44, 74) 52%,
    rgb(12, 21, 38) 100%);
  overflow: hidden;
  border-bottom: none;
  padding: clamp(5rem, 11vw, 9rem) 0 clamp(4.5rem, 10vw, 8rem);
}

/* Neutral charcoal alternative — same gradient shape, no blue in it. Mirrors
   GREY.stops in hero-network.js. Add `hero--grey` to the .hero element. */
.hero--grey {
  background: linear-gradient(135deg,
    rgb(24, 26, 29) 0%,
    rgb(54, 58, 64) 52%,
    rgb(29, 32, 36) 100%);
}
.hero--grey::after {
  background: linear-gradient(100deg,
    rgba(24, 26, 29, 0.93) 0%,
    rgba(24, 26, 29, 0.80) 38%,
    rgba(24, 26, 29, 0.32) 66%,
    rgba(24, 26, 29, 0.08) 100%);
}

.hero-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;  /* never intercept clicks on the CTA */
  z-index: 0;
}

/* Keeps the headline legible over the busiest part of the network:
   near-opaque on the copy side, clearing toward the right. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(10, 17, 32,0.93) 0%,
    rgba(10, 17, 32,0.80) 38%,
    rgba(10, 17, 32,0.32) 66%,
    rgba(10, 17, 32,0.08) 100%);
}

.hero > .container { position: relative; z-index: 1; }
.hero__inner { max-width: 780px; }

.hero h1 { color: #ffffff; }
.hero .label-tag { color: rgba(255, 255, 255, 0.58); }
.hero .hero__sub { color: rgba(255, 255, 255, 0.78); }

/* Secondary CTA has to be reversed out on the dark ground. */
.hero .btn--ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.38);
}
.hero .btn--ghost:hover {
  color: #ffffff;
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* The canvas carries meaning, so the story is also available as text
   for screen readers and when scripting is unavailable. */
.hero-network-alt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 780px) {
  /* Copy needs the full width; strengthen the scrim so it stays readable. */
  .hero::after {
    background: linear-gradient(180deg,
      rgba(10, 17, 32,0.88) 0%,
      rgba(10, 17, 32,0.74) 60%,
      rgba(10, 17, 32,0.55) 100%);
  }
}