/* Extra polish shared by both pages: scroll progress, card spotlight and gradient border, counters, client marquee */
:root { --rosa: #e879f9; }

/* Scroll progress, like a playhead running along the top */
#progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--roxo), var(--rosa)); }

/* Cards: a soft purple light follows the mouse, and a thin gradient border appears */
.fx-card { position: relative; isolation: isolate; }
.fx-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--roxo-txt) 18%, transparent), transparent 60%); }
.fx-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s; background: linear-gradient(135deg, var(--roxo), var(--rosa) 45%, transparent 80%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.fx-card:hover::before, .fx-card:hover::after { opacity: 1; }

/* Numbers band */
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.stats li { display: grid; gap: 8px; align-content: start; }
.stats b { font: 900 clamp(2.6rem, 6vw, 4.5rem)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, var(--roxo-txt), var(--rosa)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats li > span { color: var(--muted); max-width: 26ch; }
@media (max-width: 760px) { .stats { grid-template-columns: minmax(0, 1fr); } }

/* Clients drifting in an endless strip */
.clients.is-marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.clients.is-marquee .clients-title { -webkit-mask: none; }
.client-logos.marquee { display: flex !important; flex-wrap: nowrap; justify-content: flex-start; width: max-content; gap: 0; animation: marquee 36s linear infinite; }
.client-logos.marquee li { padding-inline: clamp(28px, 4vw, 52px); }
.client-logos.marquee .cl { white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }