.hero {
  position: relative;
  isolation: isolate;
  background-color: #061626;
  background-image:
    linear-gradient(90deg, rgba(4, 20, 35, .98) 0%, rgba(4, 20, 35, .94) 34%, rgba(4, 20, 35, .76) 66%, rgba(4, 20, 35, .58) 100%),
    url('/assets/confidential-document-review-hero-v2.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-grid {
  position: relative;
  z-index: 1;
}

.hero-card {
  background: rgba(12, 42, 66, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (max-width: 980px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(4, 20, 35, .78) 0%, rgba(4, 20, 35, .95) 48%, rgba(4, 20, 35, .99) 100%),
      url('/assets/confidential-document-review-hero-v2.webp');
    background-position: 65% center;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hero-card {
    background: #0c2a42;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}