/* Lidfly-style hero backdrop: two radial spots of brand green + linear base.
   Apply as an additional class on the hero container: <div class="hero hero-bg">. */
.hero-bg {
  background:
    radial-gradient(900px 500px at 75% -10%, rgba(0, 200, 83, 0.14), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(127, 160, 116, 0.18), transparent 60%),
    linear-gradient(180deg, #fafaf7 0%, #f3faea 100%);
}

/* Reveal-on-scroll (toggled by IntersectionObserver in page script) */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}