/* ── клиенты: лист стикерпака. Глянцевая белая подложка (.sheet) с заголовком и стикерами, вокруг каждого — линия надсечки (.cut) в подложке. Неполный последний ряд центрируется. ── */
.clients h2{font-size:clamp(28px,3vw,44px)}
.logos{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.cut{--cp:5px;position:relative;flex:0 0 calc((100% - 80px)/6);padding:var(--cp);border-radius:35px;
    background:linear-gradient(128deg,#fff 0%,#f6f6f5 35%,#fff 50%,#f8f8f7 75%,#fff 100%);   /* место под стикер на лайнере — белый глянец */
    box-shadow:inset 0 0 0 1px rgba(20,18,18,.1)}
/* надсечка */
/* пустая ячейка: стикер «уже отклеили», видна подложка-лайнер. Ссылка на расчёт */
.cut--empty{display:grid;place-items:center;align-content:center;gap:4px;min-height:calc(104px + 2*var(--cp));text-align:center;

    color:var(--muted);font-size:14px;font-weight:700;line-height:1.2;transition:box-shadow .2s,color .2s}
.cut--empty small{font-size:12px;font-weight:500}
.cut--empty:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
/* свой слой — у обёртки .cut, фильтр смолы — у .logo внутри: так фильтр запекается в слой один раз. Слой и фильтр на одном элементе (как было) — браузер накладывал фильтр на видеокарте в каждом кадре скролла (24–27 мс → 17). Блик .cut::after — отдельным слоем без фильтра: он едет за курсором, и его перерисовка не задевает фильтр */
.cut{will-change:transform}
.cut::after{will-change:transform}
/* логотип = 3D стикер под «жидким стеклом»: SVG-фильтр #resin даёт блики по кромке и тонкую линию толщины стекла, печать под ним не затеняется. Тень — drop-shadow после фильтра, только контактная: стикер приклеен, а не парит (поэтому и без подъёма на hover). */
.logo{position:relative;height:104px;
    border-radius:30px;display:grid;place-items:center;padding:22px 30px;
    background:   /* серебристая плёнка: мягкие полосы отражения + еле заметная шлифовка */
      repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,rgba(0,0,0,.015) 1px 2px),
      linear-gradient(118deg,#dcdee1 0%,#f1f2f3 22%,#e2e4e6 40%,#f5f6f7 58%,#dfe1e3 78%,#eceeef 100%);
    filter:url(#resin) drop-shadow(0 .5px .4px rgba(20,18,18,.3)) drop-shadow(0 1.5px 2px rgba(20,18,18,.12))}
/* приклеен: только контактная тень по кромке */
.logo img{max-height:52px;max-width:100%;object-fit:contain;transform:scale(var(--s,1))}
/* --s: подгонка мелких логотипов по визуальному весу */
.logo img.s125{--s:1.25}
.logo img.s13{--s:1.3}
.logo img.s14{--s:1.4}
/* отражение на стекле: мягкий отсвет + косой блик. Лежит на .cut поверх стикера (не под фильтром — дёшево двигать). Едет за курсором / наклоном телефона: --gx/--gy/--sx ставит скрипт внизу */
.cut:not(.cut--empty)::after{content:"";position:absolute;inset:calc(var(--cp) + 2px);border-radius:28px;pointer-events:none;
    background:
      linear-gradient(112deg,transparent 12%,rgba(255,255,255,.3) 22%,rgba(255,255,255,.1) 30%,transparent 34%,
        transparent 36%,rgba(255,255,255,.16) 37.5%,transparent 40%) var(--sx,50%) 0/220% 100% no-repeat,
      radial-gradient(90% 60% at var(--gx,30%) var(--gy,0%),rgba(255,255,255,.6),rgba(255,255,255,0) 70%)}
@media(prefers-reduced-motion:no-preference){
  /* стикеры «шлёпаются» на лист по очереди при первом появлении (--i ставит скрипт). Анимацией, а не transition: задержка --i иначе прилипает к hover пустой ячейки */
  /* летит только стикер (и его блик), надсечка и пустой лайнер остаются на листе. Старт крупно = ближе к зрителю, опускается на лист и в конце чуть «прижимается» */
  .logos:not(.on) .logo,.logos:not(.on) .cut::after{opacity:0}
  .logos.on .logo,.logos.on .cut::after{animation:stick 1s cubic-bezier(.22,.8,.3,1) calc(var(--i,0)*90ms) both}
  @keyframes stick{
      0%{opacity:0;transform:translateY(-14px) scale(1.7)}
      35%{opacity:1}
      82%{transform:scale(.985)}
      100%{transform:none}}
}
@media(max-width:900px){
  .cut{flex-basis:calc((100% - 32px)/3)}
}
@media(max-width:560px){
  .logos{gap:10px}
  .cut{--cp:4px;flex-basis:calc((100% - 10px)/2);border-radius:34px}
  .cut--empty{min-height:calc(84px + 2*var(--cp))}
  .logo{height:84px;padding:16px 18px}
  .logo img{max-height:42px;transform:scale(calc(1 + (var(--s,1) - 1)*.35))}
}