.client-logos-band{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
}

.client-logos-band__bg{
  position:relative;
  width:100%;
  padding:clamp(76px, 9vw, 126px) 0;
  background:
    radial-gradient(55% 85% at 12% 20%, rgba(18,179,255,.18), transparent 68%),
    radial-gradient(58% 85% at 86% 80%, rgba(255,22,139,.14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.54));
  overflow:hidden;
}

.client-logos-band__head{
  text-align:center;
  max-width:980px;
  margin:0 auto clamp(24px, 3.5vw, 44px);
}

.client-logos-band__marquee{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
  padding:14px 0 28px;
}

.client-logos-band__marquee::before,
.client-logos-band__marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:clamp(78px, 12vw, 190px);
  z-index:4;
  pointer-events:none;
}

.client-logos-band__marquee::before{
  left:0;
  background:linear-gradient(90deg, rgba(248,251,255,.96), rgba(248,251,255,0));
}

.client-logos-band__marquee::after{
  right:0;
  background:linear-gradient(270deg, rgba(248,251,255,.96), rgba(248,251,255,0));
}

.client-logos-band__track{
  display:flex;
  align-items:center;
  gap:32px;
  width:max-content;
  padding:0 54px;
  animation:clientLogoScroll 56s linear infinite;
  animation-play-state:paused;
  will-change:transform;
}

.client-logos-band.is-visible .client-logos-band__track{
  animation-play-state:running;
}

.client-logos-band__marquee:hover .client-logos-band__track{
  animation-play-state:paused;
}

@keyframes clientLogoScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.client-logos-band__item{
  position:relative;
  flex:0 0 auto;
}

.client-logos-band__logo{
  position:relative;
  width:220px;
  height:220px;
  display:grid;
  place-items:start center;
  border-radius:34px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:
    0 18px 44px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.client-logos-band__logo::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(15,23,42,.16)),
    radial-gradient(90% 90% at 50% 10%, rgba(255,255,255,.45), transparent 62%);
  transition:opacity .22s ease;
}

.client-logos-band__logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:top center;
  padding:0;
  filter:saturate(.92);
  opacity:.88;
  transition:
    opacity .2s ease,
    transform .2s ease,
    filter .2s ease;
}

.client-logos-band__logo:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,.92);
  box-shadow:
    0 28px 62px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.86);
}

.client-logos-band__logo:hover::after{
  opacity:1;
}

.client-logos-band__logo:hover img{
  opacity:.36;
  transform:scale(1.045);
  filter:saturate(1);
}

.client-logos-band__tooltip{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%) translateY(8px);
  opacity:0;
  visibility:hidden;
  z-index:8;
  width:max-content;
  max-width:calc(100% - 28px);
  padding:10px 14px;
  border-radius:16px;
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.68));
  border:1px solid rgba(255,255,255,.78);
  box-shadow:
    0 18px 40px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  color:var(--ink, #0F172A);
  font-weight:850;
  font-size:.92rem;
  line-height:1.15;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.client-logos-band__logo:hover .client-logos-band__tooltip{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

@media (max-width:700px){
  .client-logos-band__bg{
    padding:58px 0;
  }

  .client-logos-band__track{
    gap:20px;
    padding:0 26px;
  }

  .client-logos-band__logo{
    width:164px;
    height:164px;
    border-radius:28px;
  }

  .client-logos-band__logo img{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:top center;
  }
}

@media (max-width:430px){
  .client-logos-band__head{
    text-align:left;
  }

  .client-logos-band__logo{
    width:148px;
    height:148px;
  }

  .client-logos-band__logo img{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:top center;
  }
}

@media (prefers-reduced-motion:reduce){
  .client-logos-band__track{
    animation:none;
  }
}