.clients {
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
  isolation: isolate;
  padding: 82px 0 76px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 25%, rgba(34,169,177,.09), transparent 27%),
    radial-gradient(circle at 92% 78%, rgba(34,169,177,.07), transparent 25%),
    linear-gradient(180deg, #fff, #f7fcfb);
  border-block: 1px solid #e1efed;
}

.clients::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .45;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65) 30%, rgba(255,255,255,.65) 70%, transparent);
}

.clients::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -80px;
  background:
    radial-gradient(circle 240px at var(--pointer-x) var(--pointer-y), rgba(22,170,177,.17), transparent 72%),
    radial-gradient(circle 150px at calc(var(--pointer-x) + 8%) calc(var(--pointer-y) - 12%), rgba(91,215,205,.1), transparent 75%);
  transition: background-position .18s ease-out;
  pointer-events: none;
}

.clients-heading {
  margin-bottom: 38px;
  padding: 0 22px;
  text-align: center;
}

.clients-heading .eyebrow { margin-bottom: 10px; }

.clients-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 3.2vw, 3rem);
}

.client-slider {
  position: relative;
  width: 100%;
  padding: 14px 0 18px;
  overflow: hidden;
}

.client-slider::before,
.client-slider::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: min(12vw, 150px);
  pointer-events: none;
}

.client-slider::before {
  left: 0;
  background: linear-gradient(90deg, #f8fcfb 15%, transparent);
}

.client-slider::after {
  right: 0;
  background: linear-gradient(270deg, #f8fcfb 15%, transparent);
}

.client-track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: client-scroll 30s linear infinite;
  will-change: transform;
}

.client-slider:hover .client-track,
.client-slider:focus-within .client-track { animation-play-state: paused; }

.client-logo {
  --accent: #1769e0;
  position: relative;
  display: flex;
  flex: 0 0 264px;
  align-items: center;
  justify-content: center;
  width: 264px;
  height: 136px;
  padding: 18px 24px 18px 30px;
  overflow: hidden;
  color: #263d67;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 13%, transparent), transparent 45%),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.55));
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 30px 8px 30px 8px;
  box-shadow: 9px 10px 0 color-mix(in srgb, var(--accent) 7%, transparent), 0 18px 38px rgba(12,67,76,.12), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  animation: client-float 4.8s ease-in-out infinite;
}

.client-logo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 5px;
  border-radius: 0 6px 6px 0;
  background: var(--accent);
  box-shadow: 5px 0 18px color-mix(in srgb, var(--accent) 28%, transparent);
}

.client-logo:nth-child(13n+1)  { --accent: #08783f; }
.client-logo:nth-child(13n+2)  { --accent: #3423a6; }
.client-logo:nth-child(13n+3)  { --accent: #38ad3c; }
.client-logo:nth-child(13n+4)  { --accent: #f2c500; }
.client-logo:nth-child(13n+5)  { --accent: #2e5fa6; }
.client-logo:nth-child(13n+6)  { --accent: #0098d0; }
.client-logo:nth-child(13n+7)  { --accent: #f7931e; }
.client-logo:nth-child(13n+8)  { --accent: #ff861d; }
.client-logo:nth-child(13n+9)  { --accent: #f39a2e; }
.client-logo:nth-child(13n+10) { --accent: #f7941d; }
.client-logo:nth-child(13n+11) { --accent: #079b59; }
.client-logo:nth-child(13n+12) { --accent: #8cc63f; }
.client-logo:nth-child(13n)    { --accent: #089e91; }
.client-logo:nth-child(4n+2) { animation-delay: -.8s; }
.client-logo:nth-child(4n+3) { animation-delay: -1.6s; }
.client-logo:nth-child(4n+4) { animation-delay: -2.4s; }
.client-logo:nth-child(even) { border-radius: 8px 30px 8px 30px; }
.client-logo:nth-child(even)::before { top: 20px; bottom: 20px; }

.client-logo:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, #fff);
  box-shadow: 5px 6px 0 color-mix(in srgb, var(--accent) 12%, transparent), 0 24px 48px rgba(12,67,76,.18), inset 0 1px 0 #fff;
  transform: translate(4px, 4px) scale(1.015);
  animation-play-state: paused;
}

.client-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #1769e0, #55a1f3);
  border-radius: 9px;
  font: 800 18px Manrope, sans-serif;
}

.client-logo strong {
  font: 700 16px Manrope, sans-serif;
  letter-spacing: -.02em;
}

.client-logo img {
  --logo-scale: 1;
  display: block;
  width: 210px;
  height: 92px;
  object-fit: contain;
  transform: scale(var(--logo-scale));
  filter: saturate(.95) contrast(1.02);
  transition: transform .25s ease, filter .25s ease;
}

.client-logo:hover img {
  transform: scale(calc(var(--logo-scale) * 1.025));
  filter: saturate(1.04) contrast(1.05);
}

/* Normalize differently cropped source canvases to a consistent visual size. */
.client-logo img[src$="/2.png"]  { --logo-scale: 1.52; }
.client-logo img[src$="/3.png"]  { --logo-scale: 1.08; }
.client-logo img[src$="/4.png"]  { --logo-scale: 1.12; }
.client-logo img[src$="/5.png"]  { --logo-scale: 1.24; }
.client-logo img[src$="/6.png"]  { --logo-scale: 1.55; }
.client-logo img[src$="/7.png"]  { --logo-scale: 1.28; }
.client-logo img[src$="/8.png"]  { --logo-scale: 1.7; }
.client-logo img[src$="/9.png"]  { --logo-scale: 1.75; }
.client-logo img[src$="/10.png"] { --logo-scale: 1.38; }
.client-logo img[src$="/12.png"] { --logo-scale: 1.58; }
.client-logo img[src$="/13.png"] { --logo-scale: 1.62; }

@keyframes client-scroll {
  to { transform: translateX(calc(-50% - 9px)); }
}

@keyframes client-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@media (max-width: 650px) {
  .clients { padding: 62px 0 58px; }
  .clients-heading { margin-bottom: 28px; }
  .client-logo { flex-basis: 224px; width: 224px; height: 116px; padding: 13px 20px 13px 25px; }
  .client-logo img { width: 184px; height: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .client-track { animation: none; }
  .client-slider { overflow-x: auto; scrollbar-width: thin; }
  .client-logo[aria-hidden="true"] { display: none; }
  .client-logo { animation: none; }
  .clients::after { display: none; }
}

@media (hover: none) {
  .clients::after { opacity: .6; }
}