/* ==========================================================================
   Clients page (/clients/): builds on services.css and why-us.css
   ========================================================================== */

/* ---------- Hero: tilted 3D wall of client logos ---------- */
.cl-stage { position: relative; height: 520px; perspective: 1400px; }
.cl-tilt { position: absolute; inset: -40px -20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; transform: rotateX(18deg) rotateY(-16deg) rotateZ(6deg); transform-style: preserve-3d;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.cl-col { overflow: hidden; }
.cl-col-track { display: flex; flex-direction: column; gap: 1rem; animation: clUp 34s linear infinite; }
.cl-col.is-down .cl-col-track { animation-name: clDown; animation-duration: 40s; }
.cl-col:nth-child(3) .cl-col-track { animation-duration: 30s; }
@keyframes clUp { to { transform: translateY(-50%); } }
@keyframes clDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.cl-tile { display: flex; align-items: center; justify-content: center; height: 118px; padding: 1.2rem 1.4rem; border-radius: 20px; background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 24px 40px -22px rgba(0,0,0,.85), inset 0 1px 0 #fff; transition: transform .4s var(--sv-ease); }
.cl-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-tile:hover { transform: translateZ(30px) scale(1.04); }
.cl-chip-a { left: -1.5rem; top: 16%; }
.cl-chip-b { right: -1rem; bottom: 12%; animation-delay: -3s; }
.cl-chip-b .wy-chip-icon { background: linear-gradient(135deg, #9BC73B, #5C8A1E); }
.cl-stage .wy-chip { z-index: 3; }
@media (max-width: 960px) { .cl-stage { height: 420px; margin-top: 1rem; } .cl-chip-a { left: .5rem; } .cl-chip-b { right: .5rem; } }
@media (max-width: 560px) { .cl-stage { height: 320px; } .cl-tile { height: 80px; padding: .8rem; border-radius: 14px; } .cl-tilt { gap: .6rem; } .cl-col-track { gap: .6rem; } .cl-chip-a, .cl-chip-b { display: none; } }
@media (prefers-reduced-motion: reduce) { .cl-col-track { animation: none; } }

/* ---------- Logo wall ---------- */
.cl-wall { display: grid; gap: 1rem; padding: 4.5rem 0 1rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cl-wall-track { display: flex; width: max-content; animation: clMarquee 48s linear infinite; }
.cl-wall-row.is-reverse .cl-wall-track { animation-direction: reverse; animation-duration: 56s; }
.cl-wall-group { display: flex; gap: 1rem; padding-right: 1rem; }
.cl-wall-logo { width: 180px; height: 92px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 1rem 1.3rem; border-radius: 18px; background: #fff; border: 1px solid var(--sv-line); transition: transform .35s var(--sv-ease), box-shadow .35s, border-color .3s; }
.cl-wall-logo img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .35s var(--sv-ease); }
.cl-wall-logo:hover { transform: translateY(-4px); border-color: rgba(30,143,208,.3); box-shadow: 0 18px 34px -24px rgba(11,18,32,.6); }
.cl-wall-logo:hover img { transform: scale(1.05); }
@keyframes clMarquee { to { transform: translateX(-50%); } }

/* ---------- Filters + grid ---------- */
.cl-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 auto 2rem; }
.cl-filter { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--sv-line); background: #fff; font: inherit; font-size: .88rem; font-weight: 700; color: #3F4653; cursor: pointer; transition: all .25s var(--sv-ease); }
.cl-filter i { font-size: .78rem; color: #1E75B0; }
.cl-filter span { padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; color: #64748B; background: var(--sv-soft); }
.cl-filter:hover { border-color: rgba(30,143,208,.4); transform: translateY(-2px); }
.cl-filter.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #1E8FD0, #16508E); box-shadow: 0 12px 24px -14px rgba(22,80,142,.8); }
.cl-filter.is-active i { color: #fff; } .cl-filter.is-active span { color: #fff; background: rgba(255,255,255,.2); }
.clx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.clx-card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem; border-radius: 22px; background: #fff; border: 1px solid var(--sv-line); box-shadow: 0 24px 48px -44px rgba(11,18,32,.6); transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .5s var(--sv-ease), box-shadow .4s, border-color .3s, opacity .35s; }
.clx-card:hover { border-color: rgba(30,143,208,.3); box-shadow: 0 34px 60px -40px rgba(11,18,32,.65); }
.clx-card.is-tilting { transition: transform .12s linear, box-shadow .4s; }
.clx-card.is-hidden { display: none; }
.clx-card.is-in { animation: clPop .5s var(--sv-ease) both; animation-delay: calc(var(--d, 0) * 40ms); }
@keyframes clPop { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.clx-card-logo { display: flex; align-items: center; justify-content: center; height: 120px; padding: 1.2rem 1.6rem; border-radius: 16px; background: linear-gradient(160deg, #F6F8FB, #fff); border: 1px solid var(--sv-line); }
.clx-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .5s var(--sv-ease); }
.clx-card:hover .clx-card-logo img { transform: scale(1.06); }
.clx-card-body strong { display: block; font-family: var(--font-heading); font-size: 1.05rem; color: var(--sv-ink); }
.clx-card-body p { margin: .3rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--sv-muted); }
.clx-card-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.cl-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; color: #1E75B0; background: rgba(30,143,208,.08); }
.cl-chip:hover { color: #fff; background: #1E75B0; }
.cl-chip.is-plain { color: #64748B; background: var(--sv-soft); }
.clx-card-link { position: absolute; top: 1.6rem; right: 1.6rem; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; color: #64748B; background: #fff; border: 1px solid var(--sv-line); }

/* ---------- Clients by industry ---------- */
.cl-sectors { background: var(--sv-soft); }
.cl-sector-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 960px) { .cl-sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cl-sector-grid { grid-template-columns: 1fr; } }
.cl-sector { position: relative; isolation: isolate; display: flex; min-height: 300px; overflow: hidden; border-radius: 24px; color: #fff; background: #111A2B; box-shadow: 0 30px 60px -44px rgba(11,18,32,.8); }
.cl-sector:hover { color: #fff; }
.cl-sector-img { position: absolute; inset: 0; z-index: -2; }
.cl-sector-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sv-ease); }
.cl-sector:hover .cl-sector-img img { transform: scale(1.08); }
.cl-sector::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,18,32,.25), rgba(11,18,32,.92) 70%); }
.cl-sector-body { display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding: 1.3rem; gap: .7rem; }
.cl-sector-top { display: flex; justify-content: space-between; align-items: center; }
.cl-sector-icon { width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
.cl-sector-top b { padding: .25rem .65rem; border-radius: 999px; font-size: .74rem; background: rgba(255,255,255,.14); }
.cl-sector-body strong { margin-top: auto; font-family: var(--font-heading); font-size: 1.35rem; }
.cl-sector-logos { display: flex; gap: .45rem; flex-wrap: wrap; }
.cl-sector-logos span { width: 62px; height: 40px; display: flex; align-items: center; justify-content: center; padding: .35rem; border-radius: 10px; background: #fff; }
.cl-sector-logos img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-sector-text { font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.82); }
.cl-sector-body em { font-style: normal; font-size: .86rem; font-weight: 700; color: #8FD7FF; }
.cl-certs { padding-top: 4rem; }

@media (max-width: 960px) {
    .cl-orbit { width: min(400px, 100%); margin-top: 1rem; }
    .cl-node { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
    .cl-orbit { --r-out: 200px; --r-in: 112px; }
    .cl-node-sm { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
}
@media (max-width: 560px) {
    .cl-orbit { width: 300px; }
    .cl-node { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
    .cl-node-in { padding: 8px; }
    .cl-orbit { --r-out: 150px; --r-in: 84px; }
    .cl-node-sm { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
    .cl-spin-in .cl-node-in { font-size: .72rem; }
    .cl-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    .cl-filter { flex-shrink: 0; }
    .cl-wall-logo { width: 140px; height: 74px; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-wall-track { animation: none; }
}