:root {
  --logo-marquee-gap: 1rem;
  --logo-marquee-duration: 70s;
  --logo-marquee-surface: #ffffff;
  --logo-marquee-line: rgba(15, 23, 42, 0.08);
  --logo-marquee-soft: #f8fbff;
}

.logo-marquee { position: relative; overflow: hidden; }
.logo-marquee::before,
.logo-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(28px, 5vw, 90px); z-index: 2; pointer-events: none; }
.logo-marquee::before { left: 0; background: linear-gradient(90deg, var(--wcag-soft) 10%, rgba(241, 248, 246, 0)); }
.logo-marquee::after { right: 0; background: linear-gradient(270deg, var(--wcag-soft) 10%, rgba(241, 248, 246, 0)); }
.logo-marquee__viewport { overflow: hidden; }
.logo-marquee__track { display: flex; width: max-content; animation: logo-marquee-scroll var(--logo-marquee-duration) linear infinite; will-change: transform; }
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__group { display: flex; flex-shrink: 0; gap: var(--logo-marquee-gap); align-items: center; padding-inline-end: var(--logo-marquee-gap); }
.logo-marquee__item { display: flex; flex: 0 0 auto; width: clamp(138px, 14vw, 188px); height: clamp(138px, 14vw, 188px); align-items: center; justify-content: center; padding: 0.9rem; background: linear-gradient(180deg, var(--logo-marquee-surface) 0%, var(--logo-marquee-soft) 100%); border: 1px solid var(--logo-marquee-line); border-radius: 22px; box-shadow: 0 16px 34px rgba(13, 27, 42, 0.08); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.logo-marquee__item:hover { transform: scale(1.07); border-color: rgba(37, 99, 235, 0.28); box-shadow: 0 18px 42px rgba(13, 27, 42, 0.12); }
.logo-marquee__item img { width: 100%; height: 100%; object-fit: contain; }

@keyframes logo-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
}

@media (max-width: 767.98px) {
  .logo-marquee__group { gap: 0.75rem; padding-inline-end: 0.75rem; }
}