/* Hero background: Color Bends (port from reactbits.dev/backgrounds/color-bends) */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #0a0a0a;
}
.hero > :not(.hero-bg) {
  position: relative;
  z-index: 2;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Fallback static gradient: visible until WebGL initializes */
.hero-bg__static {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 28%, rgba(255, 255, 255, 0.10), transparent 38%),
    radial-gradient(ellipse at 12% 78%, rgba(255, 255, 255, 0.06), transparent 44%),
    linear-gradient(160deg, #0a0a0a 0%, #141414 55%, #0c0c0c 100%);
}

/* WebGL canvas for Color Bends */
.hero-bg__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.95;
  mix-blend-mode: screen;
}

/* Soft vignette so text remains readable over the animation.
   Top removed: the heavy 55% black band at 0% looked like a header
   shadow dropping into the hero. Keep only the bottom fade for
   smooth transition into the trust band. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, 0.18) 50%, rgba(10, 10, 10, 0.45) 100%);
  pointer-events: none;
}

/* Fade out the canvas slightly at the bottom so the hero transitions
   smoothly into the trust band beneath it. */
@media (min-width: 760px) {
  .hero-bg__canvas {
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg__canvas {
    display: none;
  }
}

@media (max-width: 760px) {
  .hero-bg__static {
    background:
      radial-gradient(ellipse at 80% 18%, rgba(255, 255, 255, 0.14), transparent 46%),
      radial-gradient(ellipse at 18% 82%, rgba(255, 255, 255, 0.08), transparent 50%),
      linear-gradient(160deg, #0a0a0a 0%, #141414 60%, #0a0a0a 100%);
  }
}