/* =============================================================================
   ToolGrowth — TRUSTED PLATFORMS strip (V3.3). Site-wide, additive.
   CSS-only seamless marquee: the track holds TWO identical rails side by
   side; translating the track by -50% shifts exactly one rail off screen,
   at which point the animation loops back to 0% seamlessly (the second rail
   is now where the first was). No JS needed.
   ============================================================================= */

.tg-plat{background:#F5F8FD;border-top:1px solid #E7EBF3;border-bottom:1px solid #E7EBF3;padding:56px 0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#0A0F1C;-webkit-font-smoothing:antialiased}
.tg-plat *{box-sizing:border-box}
.tg-plat__wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.tg-plat__h{text-align:center;font-size:13px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:#6B7488;margin:0 0 32px}

/* Viewport masks left+right edges with a soft fade so logos slide in/out gently */
.tg-plat__viewport{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}

/* The scrolling track: contains two rails; total width = 200% of visible area.
   Translating by -50% shifts one whole rail past the viewport and loops. */
.tg-plat__track{display:flex;width:max-content;animation:tgPlatScroll 40s linear infinite;will-change:transform}
.tg-plat__rail{display:flex;align-items:center;gap:32px;padding:0 20px;flex:none}

/* Individual logo cell */
.tg-plat__item{flex:none;display:inline-flex;align-items:center;justify-content:center;height:56px;width:140px;padding:0 6px;text-decoration:none;transition:transform .25s ease}
.tg-plat__logo{max-height:40px;max-width:120px;width:auto;height:auto;object-fit:contain;display:block;opacity:.7;filter:grayscale(60%);transition:opacity .3s ease,filter .3s ease}
.tg-plat__item:hover{transform:translateY(-2px)}
.tg-plat__item:hover .tg-plat__logo{opacity:1;filter:none}

/* Pause the loop when the user hovers anywhere over the strip */
.tg-plat__viewport:hover .tg-plat__track,
.tg-plat__track:focus-within{animation-play-state:paused}

@keyframes tgPlatScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Respect reduced-motion: freeze the animation and let users see the logos statically */
@media (prefers-reduced-motion: reduce){
	.tg-plat__track{animation:none}
}

@media (max-width:600px){
	.tg-plat{padding:44px 0}
	.tg-plat__rail{gap:24px;padding:0 16px}
	.tg-plat__item{height:44px;width:110px}
	.tg-plat__logo{max-height:32px;max-width:96px}
	/* Mobile-only: shorter duration so scroll feels the same speed as desktop */
	.tg-plat__track{animation-duration:24s;will-change:auto}
}
/* Touch devices: :hover sticks on tap. Force marquee to keep running. */
@media (hover:none){
	.tg-plat__viewport:hover .tg-plat__track,
	.tg-plat__track:focus-within{animation-play-state:running}
}