/* patterns.css — radial & dotted backgrounds, marquee helper */
.pattern-radial{ position:relative; overflow:hidden }
.pattern-radial::before{
  content:""; position:absolute; inset:-20%;
  background: radial-gradient(60rem 60rem at 20% -10%, rgba(99,102,241,.10), transparent 60%),
              radial-gradient(40rem 40rem at 85% 0%, rgba(167,139,250,.12), transparent 55%);
  z-index:0;
}
.pattern-radial > .container{ position:relative; z-index:1 }

.pattern-dots{ position:relative; overflow:hidden; background-image: radial-gradient(rgba(107,114,128,.18) 1px, transparent 1px); background-size: 22px 22px }
.pattern-dots .container{ position:relative; z-index:1 }
.pattern-dots::before, .pattern-dots::after{ content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, var(--bg), transparent 15%, transparent 85%, var(--bg)); pointer-events:none }

.marquee .track{display:flex;gap:calc(var(--space)*1.8);width:max-content;will-change:transform;animation:marquee var(--marquee-duration, 28s) linear infinite}
.marquee .track > *{flex:0 0 auto}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:80px;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(to right, var(--bg), transparent)}
.marquee::after{right:0;background:linear-gradient(to left, var(--bg), transparent)}