/* Section-specific utilities not in the compiled Tailwind extract */

.border-white\/8 {
  border-color: rgb(255 255 255 / 0.08);
}

.bg-cyan-500\/8 {
  background-color: rgb(6 182 212 / 0.08);
}

.bg-emerald-500\/12 {
  background-color: rgb(16 185 129 / 0.12);
}

.bg-gold-500\/8 {
  background-color: rgb(232 160 21 / 0.08);
}

.bg-emerald-500\/8 {
  background-color: rgb(16 185 129 / 0.08);
}

.max-h-\[32rem\] {
  max-height: 32rem;
}

/* Revolving marquee, used by the trust-logo strip and the reviews carousel.
   Two identical tracks are placed back to back so the loop is seamless; the
   parent uses a mask so logos/cards fade in and out at the edges. */
.marquee-viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 32s) linear infinite;
}
.marquee-track.marquee-reverse {
  animation-direction: reverse;
}
.marquee-viewport:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}