.marquee { width: 100%; overflow: hidden; border-top: 1px solid rgba(242, 182, 46, .24); border-bottom: 1px solid rgba(242, 182, 46, .24); background: linear-gradient(90deg, #06111f, #0a1b31 50%, #06111f); }
.marquee__viewport { width: 100%; overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation-name: marquee-scroll; animation-duration: 42s; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; }
.marquee__group { display: flex; flex: 0 0 auto; flex-shrink: 0; align-items: center; gap: clamp(20px, 2.6vw, 44px); padding: 13px clamp(10px, 1.35vw, 22px); white-space: nowrap; }
.marquee__item,.marquee__separator { color: #e9c76e; font-size: clamp(.67rem, .78vw, .82rem); font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.marquee__separator { color: rgba(242, 182, 46, .58); font-size: .7em; }
@keyframes marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 700px) { .marquee__track { animation-duration: 52s; } .marquee__group { gap: 22px; padding-block: 11px; } .marquee__item { font-size: .62rem; letter-spacing: .13em; } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation-duration: 108s; } }