/* פס הלוגואים של הלקוחות (7.10.2026) — יושב מתחת לרצועת "תוצאות מוכחות".
   שתי שורות שרצות בכיוונים הפוכים, על משטח מוטה בתלת ממד (השורה העליונה רחוקה, התחתונה קרובה),
   הטיה של 2.5 מעלות כמו הפסים הרצים באתר, והמשטח נוטה קצת אחרי העכבר.
   מעבר עכבר מאט את השורות עד עצירה. כל הלוגואים בקרם על שקוף, קנבס אחיד 1120×360. */
.logo-loop{position:relative;overflow:hidden;padding-block:72px;direction:ltr;perspective:1100px;perspective-origin:50% 30%;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.ll-stage{display:grid;gap:24px;width:120%;margin-inline:-10%;transform-style:preserve-3d;
  transform:rotateX(var(--rx,24deg)) rotateY(var(--ry,0deg)) rotateZ(-2.5deg);will-change:transform}
.ll-row{overflow:visible}
.ll-row:first-child{opacity:.55}
.ll-track{display:flex;width:max-content;will-change:transform}
.ll-list{display:flex;align-items:center;gap:56px;padding-inline-end:56px;margin:0;padding-inline-start:0;list-style:none}
.ll-list img{display:block;height:72px;width:auto;opacity:.8;filter:drop-shadow(0 22px 14px rgba(8,6,24,.55));transition:opacity .3s var(--ease),transform .4s var(--ease-out)}
@media (hover:hover){.ll-list li:hover img{opacity:1;transform:translateY(-6px) scale(1.08)}}
@media (max-width:767px){
  .logo-loop{padding-block:48px}
  .ll-stage{gap:16px}
  .ll-list{gap:32px;padding-inline-end:32px}
  .ll-list img{height:48px}
}
@media (prefers-reduced-motion:reduce){.logo-loop{overflow-x:auto}.ll-stage{transform:none;width:auto;margin-inline:0}}

/* כשהמסך בהיר הלוגואים נצבעים בכהה של המותג (#1C1A33) באותו קצב של הרקע (רועי 8.10: "תראה שהלוגואים הופכים לכהים ברגע שהרקע בהיר"). הפילטר מחושב כך שיוצא #1C1A31 */
.ll-list img{transition:opacity .3s var(--ease),transform .4s var(--ease-out),filter .7s cubic-bezier(.4,0,.2,1)}
body.is-light .ll-list img{filter:brightness(0) invert(9%) sepia(1) saturate(3) hue-rotate(205deg) drop-shadow(0 16px 12px rgba(28,26,51,.16))}
