.hero {
  background: #02293d url("hero-construction-background.png") center 52% / cover no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -3px;
  background:
    linear-gradient(180deg, rgba(1, 22, 34, 0.82), rgba(2, 41, 61, 0.76)),
    radial-gradient(circle at 50% 42%, rgba(2, 41, 61, 0.35), rgba(1, 20, 31, 0.68) 72%);
  backdrop-filter: blur(1.5px);
}

.hero h1 {
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.28);
}

.hero-lead {
  color: rgba(255, 255, 255, 0.84);
}

.hero-wave {
  display: none;
}

@media (max-width: 780px) {
  .hero {
    background-position: 57% center;
  }

  .hero::before {
    background: linear-gradient(180deg, rgba(1, 22, 34, 0.85), rgba(2, 41, 61, 0.82));
    backdrop-filter: blur(1px);
  }
}