/* ============================================================
   CLIENTS & PARTNERS
   ============================================================ */
.clients-section {
  background: var(--clr-white);
  padding: clamp(60px, 8vw, 100px) 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.clients-section.is-visible { opacity:1; transform:translateY(0); }

.clients-section__header { text-align:center; padding:0 1rem; margin-bottom: clamp(32px,5vw,56px); }

.clients-section__subtitle {
  font-family: var(--font-body);
  font-size: clamp(13px,2vw,15px);
  color: var(--color-gray-600);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
  opacity:0; transform:translateY(12px);
  transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}
.clients-section.is-visible .clients-section__subtitle { opacity:1; transform:translateY(0); }
.clients-section__subtitle strong { color:var(--color-dark); font-weight:600; }

.marquee-wrapper {
  position:relative; width:100%; overflow:hidden; margin-bottom:20px;
  -webkit-mask-image: linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
  mask-image: linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
}
.marquee-wrapper--second { margin-bottom:0; }
.marquee { display:flex; width:100%; }
.marquee__track {
  display:flex; align-items:center; list-style:none;
  gap:clamp(32px,4vw,60px); padding:16px 0; will-change:transform;
}
.marquee--ltr .marquee__track { animation:marquee-ltr var(--marquee-speed-ltr) linear infinite; }
.marquee--rtl .marquee__track { animation:marquee-rtl var(--marquee-speed-rtl) linear infinite; }
.marquee-wrapper:hover .marquee__track,
.marquee-wrapper:focus-within .marquee__track { animation-play-state:paused; }
.marquee__item { flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.logo-img {
  height:var(--logo-height-mobile); width:auto; max-width:120px; object-fit:contain;
  filter:grayscale(100%) opacity(0.55);
  transition:filter .35s ease, transform .35s ease; cursor:pointer; display:block;
}
.marquee__item:hover .logo-img,.marquee__item:focus-within .logo-img { filter:grayscale(0%) opacity(1); transform:scale(1.08); }
.logo-placeholder {
  display:flex; align-items:center; justify-content:center;
  height:var(--logo-height-mobile); min-width:80px; padding:0 16px;
  background:var(--color-gray-200); border-radius:4px;
  font-family:var(--font-heading); font-size:13px; font-weight:700; letter-spacing:.05em;
  color:var(--color-gray-400); white-space:nowrap;
  filter:grayscale(100%) opacity(0.55); transition:filter .35s ease,transform .35s ease;
}
.marquee__item:hover .logo-placeholder { filter:grayscale(0%) opacity(1); transform:scale(1.06); background:var(--color-gray-100); color:var(--color-dark); }

.clients-section__stats {
  display:flex; align-items:center; justify-content:center;
  gap:clamp(24px,4vw,56px); flex-wrap:wrap;
  margin-top:clamp(36px,5vw,60px); padding:0 1rem;
  opacity:0; transform:translateY(16px);
  transition:opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s;
}
.clients-section.is-visible .clients-section__stats { opacity:1; transform:translateY(0); }

.stat-pill { display:flex; align-items:baseline; gap:6px; flex-direction:column; text-align:center; }
.stat-pill__number { font-family:var(--font-heading); font-size:clamp(30px,5vw,46px); font-weight:800; color:var(--color-red); letter-spacing:-0.01em; line-height:1; font-variant-numeric:tabular-nums; }
.stat-pill__plus   { font-family:var(--font-heading); font-size:clamp(20px,3vw,30px); font-weight:800; color:var(--color-red); line-height:1; }
.stat-pill__label  { font-family:var(--font-body); font-size:clamp(11px,1.5vw,13px); color:var(--color-gray-600); text-transform:uppercase; letter-spacing:.08em; font-weight:500; }
.stat-pill__divider{ width:1px; height:40px; background:var(--color-gray-200); align-self:center; }

@keyframes marquee-ltr { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes marquee-rtl { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }

