/*
  Shared secondary hero system for internal (non-homepage) pages.
  One reusable background image so Platform, How It Works,
  Research, About, Contact, and the individual How It Works pages
  share the same restrained, data-driven visual language.
*/

.hero-secondary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #05112b;
  color: #fff;
}

.hero-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/secondary-hero.webp");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  pointer-events: none;
}

.hero-secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(5, 17, 43, 0.97) 0%,
    rgba(5, 17, 43, 0.92) 38%,
    rgba(5, 17, 43, 0.55) 62%,
    rgba(5, 17, 43, 0.18) 100%
  );
  pointer-events: none;
}

.hero-secondary > .container,
.hero-secondary > .wide {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .hero-secondary::before {
    background-position: 68% center;
  }

  .hero-secondary::after {
    background: linear-gradient(
      90deg,
      rgba(5, 17, 43, 0.97) 0%,
      rgba(5, 17, 43, 0.93) 55%,
      rgba(5, 17, 43, 0.68) 100%
    );
  }
}