/* ============================================================
   „С кого съм работил“: две цветни ленти, наклонени в една посока една под друга.
   --cl-a / --cl-a-fg   горната лента и текстът ѝ (по подразбиране цветът на стаята)
   --cl-b / --cl-b-fg   долната лента и текстът ѝ
   --cl-mark-a / -b     плюсчетата между имената
   ============================================================ */
.pfx.clients { position: relative; padding-block: clamp(80px, 11vh, 140px) clamp(70px, 10vh, 130px); background: #fff; color: var(--ink, #16181B); overflow: clip;
  --cl-a: var(--room, #2AC4EA); --cl-a-fg: #0B2530; --cl-b: #0B0D10; --cl-b-fg: #FFFFFF; --cl-mark-a: #0B2530; --cl-mark-b: var(--room, #2AC4EA); }
.pfx.clients.tone-dark { background: #07080A; color: #EDEFF1; --cl-b: #EDEFF1; --cl-b-fg: #0B0D10; }
.pfx.clients.tone-warm { background: #F2F0EB; --cl-a: #121212; --cl-a-fg: #F2F0EB; --cl-b: #FFFFFF; --cl-b-fg: #121212; --cl-mark-a: #F2F0EB; --cl-mark-b: #121212; }
.pfx .clients-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 14px 40px; margin-bottom: clamp(20px, 3vh, 40px); }
.pfx .clients-note { max-width: 46ch; font-size: 15px; line-height: 1.6; color: color-mix(in srgb, currentColor 60%, transparent); }
.pfx .cl-bands { position: relative; display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 34px); padding-block: clamp(50px, 7vw, 110px); }
.pfx .cl-band { width: 112vw; margin-left: calc(50% - 56vw); padding-block: clamp(12px, 1.4vw, 22px); background: var(--cl-a); color: var(--cl-a-fg); will-change: transform; transform: rotate(-2.2deg); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .45); }
.pfx .cl-band.b { background: var(--cl-b); color: var(--cl-b-fg); }
.pfx .client { display: inline-flex; align-items: center; gap: clamp(22px, 2.6vw, 42px); margin-right: clamp(22px, 2.6vw, 42px); font-size: clamp(28px, 4.2vw, 72px); line-height: 1.1; letter-spacing: -.045em; white-space: nowrap; transition: opacity .4s; }
.pfx .client.bold { font-weight: 800; }
.pfx .client.thin { font-weight: 200; font-style: italic; }
.pfx .clients-row:hover .client { opacity: .55; }
.pfx .clients-row:hover .client:hover { opacity: 1; }
.pfx .client i { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.pfx .client i::before, .pfx .client i::after { content: ''; position: absolute; background: var(--cl-mark-a); }
.pfx .cl-band.b .client i::before, .pfx .cl-band.b .client i::after { background: var(--cl-mark-b); }
.pfx .client i::before { left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; }
.pfx .client i::after { top: 50%; left: 0; right: 0; height: 1.5px; margin-top: -.75px; }
@media (prefers-reduced-motion: reduce) { .pfx .cl-band { transform: rotate(-2.2deg) !important; } }