/* ---------- Clients ---------- */
.clients { padding: 60px 0 100px; }
.clients .h-sec { margin-bottom: 36px; }
.cbox { position: relative; padding: 34px 0 18px; }
.cbox::before, .cbox::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--line); }
.cbox::before { clip-path: polygon(0 0, 18px 0, 18px 1px, 1px 1px, 1px 18px, 0 18px, 0 100%, 18px 100%, 18px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 18px), 0 calc(100% - 18px)); }
.cbox::after { clip-path: polygon(100% 0, calc(100% - 18px) 0, calc(100% - 18px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 18px, 100% 18px, 100% 100%, calc(100% - 18px) 100%, calc(100% - 18px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 18px), 100% calc(100% - 18px)); }
.logos { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.logos .track { display: flex; gap: 56px; width: max-content; animation: slide 25s linear infinite; }
.logos span { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; white-space: nowrap; }
.logos span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--accent); }
.cbox p { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 24px; }
.cbox p b { color: var(--accent); font-weight: 500; }


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