/* страховка: светлая тема всегда перекрывает фон/цвет */
html[data-theme="light"] body{
  background: var(--bg-light);
  color: var(--text-light);
}

.clients{
  padding: 110px 24px;
  background:#0b1a33;

}

.clients__wrap{
  max-width: 1200px;
  margin: 0 auto;
}

.clients__title{
  text-align:center;
  font-size: clamp(34px, 3vw, 54px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color:#fff;
  margin-bottom: 36px;
}

/* viewport */
.clients__slider{
  position: relative;
  overflow: hidden;
  padding: 18px 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

/* moving track */
.clients__track{
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  will-change: transform;
}

/* single item (capsule) */
.client{
  width: 210px;
  height: 92px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  text-decoration: none;
  isolation: isolate;
  position: relative;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: blur(10px);

  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}



.client:hover{
  transform: translateY(-2px) scale(1.30);
  z-index: 5;
  border-color: rgba(122,167,255,.35);
  background: rgba(255,255,255,.05);
}
/* logo */
.client img{
  max-width: 150px;
  max-height: 70px;
  object-fit: contain;
  display:block;
  filter: saturate(1.05);
}

/* make some logos more compact if needed */
.client.is-square img{
  max-width: 60px;
  max-height: 60px;
  border-radius: 50%;
}
/* ===== CLIENTS — LIGHT THEME ===== */
html[data-theme="light"] .clients{
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(59,130,246,.10), rgba(0,0,0,0)),
    linear-gradient(180deg, #f1f5f9 0%, #e5e7eb 100%);
}

/* title */
html[data-theme="light"] .clients__title{
  color: #111827;
}

/* slider fade edges */
html[data-theme="light"] .clients__slider{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

/* card */
/* hover */
/* ===== CLIENTS — LIGHT THEME hover (как в dark) ===== */
html[data-theme="light"] .client:hover{
  transform: translateY(-2px) scale(1.30);
  z-index: 5;

  /* вместо чисто белого — чуть "стеклянный" */
  background: rgba(255,255,255,.95);
  border-color: rgba(59,130,246,.35);

  /* лёгкая подсветка как ощущение "сияния" */
  box-shadow:
    0 16px 45px rgba(0,0,0,.14),
    0 0 0 1px rgba(59,130,246,.10);
}


/* logo */
html[data-theme="light"] .client img{
  filter: none;
}