:root {
  --black: #000000; --white: #ffffff; --gray-bg: #f6f6f6; --gray-line: #e2e2e2;
  --gray-text: #545454; --gray-mute: #8c8c8c; --green: #06c167; --green-dark: #04a256;
  --green-soft: rgba(6,193,103,0.1); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px;
  --ease: cubic-bezier(.22,1,.36,1);
}
.logo-scroller-section { padding: 80px 0; background: var(--gray-bg); overflow: hidden; border-top: 1px solid var(--gray-line); border-bottom: 1px solid var(--gray-line); }
.logo-scroller { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logo-scroller-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: scroll-logos 50s linear infinite; }
.logo-scroller-track:hover { animation-play-state: paused; }
@keyframes scroll-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-item { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; color: var(--gray-mute); transition: color 200ms var(--ease); white-space: nowrap; }
.logo-item img { width: 120px; height: 120px; flex-shrink: 0; object-fit: contain; filter: grayscale(100%) brightness(0.65);transition: filter 250ms var(--ease);}
.logo-item:hover { filter: grayscale(100%) brightness(0.9); }