/* Client orbit */
.orbit-wrap{position:relative;overflow:hidden;border-radius:32px;border:1px solid var(--line);padding:clamp(36px,5vw,60px) 20px clamp(28px,4vw,48px);background:radial-gradient(55% 55% at 50% 62%,rgba(99,19,171,.45),transparent 72%),var(--surface)}
.orbit-head{text-align:center;margin-bottom:6px;position:relative;z-index:2}
.orbit-head .lead{margin:16px auto 0;max-width:52ch}
.orbit-box{position:relative;width:100%;max-width:780px;height:780px;margin:0 auto}
.orbit{position:absolute;left:50%;top:0;width:780px;height:780px;margin-left:-390px;transform:scale(var(--s,1));transform-origin:50% 0}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed rgba(255,255,255,.2)}
.ring.r1{width:330px;height:330px;margin:-165px 0 0 -165px}
.ring.r2{width:580px;height:580px;margin:-290px 0 0 -290px}
.ring.r3{width:772px;height:772px;margin:-386px 0 0 -386px;border-style:solid;border-color:rgba(255,255,255,.06)}
.disc{position:absolute;inset:0;animation:spin 70s linear infinite}
.o-item{position:absolute;left:50%;top:50%;width:0;height:0}
.o-item .hold{position:absolute;left:0;top:0;transform:translate(-50%,-50%)}
.pp{display:block;animation:spin 70s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.pill{display:flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:999px;background:#fff;color:#120d3a;white-space:nowrap;box-shadow:0 12px 30px -10px rgba(0,0,0,.7);transition:transform .3s,box-shadow .3s;cursor:default}
.pill b{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:-.01em}
.pill svg,.pill img{width:20px;height:20px;flex:none;object-fit:contain}
.pill:hover{transform:scale(1.14);box-shadow:0 0 0 4px rgba(179,107,255,.55),0 16px 36px -10px rgba(0,0,0,.7)}
.orbit-box:hover .disc,.orbit-box:hover .pp{animation-play-state:paused}
.orb-core{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;background:linear-gradient(135deg,#6313ab,#ff2e93);display:grid;place-items:center;box-shadow:0 0 0 14px rgba(99,19,171,.28),0 0 0 32px rgba(99,19,171,.14),0 20px 60px -10px rgba(255,46,147,.5)}
.orb-core img{width:68px;height:auto}
.logo-grid{display:none;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.logo-grid .pill{justify-content:flex-start;box-shadow:none}
@media (max-width:700px){.orbit-box{display:none}.logo-grid{display:grid}}


/* Client logo band */
.cband{--pac:104px;position:relative;display:flex;align-items:stretch;height:124px;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:linear-gradient(90deg,rgba(99,19,171,.28),rgba(22,13,51,.7))}
.cband-rail{flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;margin-left:calc(16px + var(--pac) / 2);-webkit-mask-image:linear-gradient(90deg,#000,#000 94%,transparent);mask-image:linear-gradient(90deg,#000,#000 94%,transparent)}
.cband-track{display:flex;gap:14px;padding:0 14px;width:max-content;animation:scroll 42s linear infinite}
.cband:hover .cband-track{animation-play-state:paused}
.cb{display:flex;align-items:center;gap:12px;padding:9px 22px 9px 9px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);white-space:nowrap;transition:transform .3s,border-color .3s,background .3s,box-shadow .3s}
.cb-mark{width:44px;height:44px;border-radius:50%;background:var(--c);display:grid;place-items:center;flex:none;filter:grayscale(1) brightness(.95);opacity:.7;transition:filter .3s,opacity .3s}
.cb-mark svg{width:22px;height:22px;fill:#fff}
.cb-mark img{width:26px;height:26px;object-fit:contain}
.cb-name{font-family:var(--display);font-weight:600;font-size:1rem;color:#bdb4e0;transition:color .3s}
.cb:hover{transform:translateY(-4px) scale(1.04);border-color:var(--c);background:rgba(255,255,255,.1);box-shadow:0 14px 30px -12px var(--c)}
.cb:hover .cb-mark{filter:none;opacity:1}
.cb:hover .cb-name{color:#fff}
@media (max-width:700px){
  .cband{--pac:68px;height:94px}
}
@media (prefers-reduced-motion:reduce){.cband-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.pac{display:none}.cband-rail{margin-left:0}}

/* Pac-Man at the left edge of the band: a yellow disc with an animated wedge mouth.
   The logo rail is clipped at his centre, so logos vanish into the mouth. */
.pac{position:absolute;left:16px;top:50%;width:var(--pac);height:var(--pac);margin-top:calc(var(--pac) / -2);z-index:2;pointer-events:none;filter:drop-shadow(0 0 16px rgba(154,69,224,.65))}
.pac-body{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,#c98bff,#9a45e0 45%,#6313ab);clip-path:polygon(50% 50%,100% 17%,100% 0,0 0,0 100%,100% 100%,100% 83%)}
.pac.snap .pac-body{animation:snap .3s ease-in-out}
.pac-eye{position:absolute;left:52%;top:17%;width:11%;height:11%;border-radius:50%;background:#fff}
@keyframes snap{40%{clip-path:polygon(50% 50%,100% 49%,100% 0,0 0,0 100%,100% 100%,100% 51%)}}

/* Real client logos (PNGs on white): shown on white tiles, greyscale until hover */
.client,.cb,.pill{background:#fff;border:1px solid var(--line)}
.client{padding:12px 22px;border-radius:14px;height:76px}
.client img{display:block;height:100%;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .3s,opacity .3s}
.client:hover img{filter:none;opacity:1}
.cb{transform-origin:0 50%;height:70px;padding:10px 22px;border-radius:14px;justify-content:center}
.cb img{display:block;max-height:100%;max-width:130px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .3s,opacity .3s}
.cb:hover{background:#fff;border-color:#b36bff}
.cb:hover img{filter:none;opacity:1}
.pill img{width:auto;height:22px;max-width:76px;filter:grayscale(1);opacity:.8;transition:filter .3s,opacity .3s}
.pill:hover img{filter:none;opacity:1}