/* inCloud S.r.l. - Fascia ADV / Posizionamento (partial pages/_adv_band)
   ---------------------------------------------------------------------
   Propshaft carica i fogli di app/assets/stylesheets in ordine alfabetico:
   questo file arriva PRIMA di incloud.css, quindi non puo' contare su
   override e usa solo classi proprie con prefisso .adv-. Le variabili
   globali (--font-*, --bg-light) vengono lette a runtime da :root e hanno
   comunque un fallback esplicito. */

.adv-band {
  /* Palette locale: tenuta qui cosi' il blocco e' ritintabile in un punto solo */
  --adv-white: #F7FAFC;
  --adv-lavender: #B8B4CC;
  --adv-violet-deep: #6610F2;
  --adv-violet: #8A5CF6;
  /* Viola brand schiarito: su fondo indaco #8A5CF6 sta a 3.8:1, non basta
     per il testo. Questo tono resta nella stessa famiglia ma arriva a ~6:1 */
  --adv-violet-light: #A78BFA;
  /* Riservato AL SOLO momento "primo posto" (riga #1 + coccarda) */
  --adv-cyan: #22D3EE;
  --adv-row-h: 68px;
  /* Rampa lunga: sotto i ~150px il passaggio chiaro->scuro si legge come uno
     stacco, e la coda satura (vedi ::before) ha bisogno di spazio per respirare */
  --adv-fade-h: clamp(150px, 15vw, 210px);

  position: relative;
  isolation: isolate;
  /* La fascia e' full-width: glow e mask non devono generare scroll laterale */
  overflow: hidden;
  /* lo scurimento non deve partire attaccato al titolo "Servizi" */
  margin-top: clamp(3.5rem, 6vw, 5rem);
  /* il pannello entra nell'ultimo 20% della rampa, dove l'alpha e' < 0.05:
     legato alla rampa cosi' non serve tenere due numeri allineati a mano */
  padding-block: calc(var(--adv-fade-h) * 0.8 + 1.25rem);
  background: linear-gradient(180deg, #17102e 0%, #241452 46%, #1a1038 100%);
  color: var(--adv-white);
  font-family: var(--font-body, 'Poppins', sans-serif);
}

/* Sopra e sotto la fascia c'e' il fondo chiaro di #servizi (--bg-light).
   Interpolare in sRGB da quasi-bianco a quasi-nero passa sempre per un grigio
   spento: la rampa tiene quindi la croma alta con stop viola saturi intermedi
   invece di affidarsi a un solo mid-stop chiaro. I colori sono scritti per
   esteso perche' serve anche la versione alpha 0 (un gradiente verso
   `transparent` vira al grigio su alcuni browser). */
.adv-band::before,
.adv-band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: var(--adv-fade-h);
  pointer-events: none;
  z-index: 0;
}

.adv-band::before {
  top: 0;
  background: linear-gradient(180deg,
      #f8f9ff 0%,
      #f0ebff 16%,
      rgba(206, 186, 255, 0.92) 38%,
      rgba(150, 96, 250, 0.55) 62%,
      rgba(102, 16, 242, 0.22) 82%,
      rgba(102, 16, 242, 0) 100%);
}

.adv-band::after {
  bottom: 0;
  background: linear-gradient(0deg,
      #f8f9ff 0%,
      #f0ebff 16%,
      rgba(206, 186, 255, 0.92) 38%,
      rgba(150, 96, 250, 0.55) 62%,
      rgba(102, 16, 242, 0.22) 82%,
      rgba(102, 16, 242, 0) 100%);
}

.adv-band-inner {
  position: relative;
  z-index: 1;
}

/* ===== Pannello vetro ===== */
.adv-panel {
  position: relative;
  border-radius: 24px;
  padding: clamp(1.5rem, 3.2vw, 3rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(138, 92, 246, 0.38);
  box-shadow:
    0 0 32px rgba(138, 92, 246, 0.18),
    0 24px 70px rgba(8, 3, 26, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* niente backdrop-filter: dietro il pannello c'e' solo il gradiente liscio
     della fascia, non c'e' nulla da sfocare e costerebbe un layer in piu' */
}

.adv-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

/* Due colonne appena c'e' spazio per testo + mock affiancati (~440px l'uno):
   a 992px la fascia impilata era il 26% piu' alta senza guadagnarci nulla.
   Sotto resta l'ordine del DOM (testo, poi animazione). */
@media (min-width: 840px) {
  .adv-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3.5rem);
  }
}

/* ===== Colonna testo ===== */
.adv-copy {
  min-width: 0;
}

.adv-eyebrow {
  display: block;
  font-family: var(--font-detail, 'Roboto Condensed', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--adv-violet-light);
  margin-bottom: 0.85rem;
}

.adv-title {
  font-family: var(--font-heading, 'Ubuntu', sans-serif);
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 700;
  line-height: 1.12;
  /* evita la riga orfana ("SEO" da solo) in EN e ZH; dove non e' supportato
     non cambia nulla */
  text-wrap: balance;
  color: var(--adv-white);
  margin: 0 0 1rem;
}

.adv-subtitle {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--adv-lavender);
  margin: 0 0 0.9rem;
}

/* "Fatti trovare." e' il punto di svolta della frase: bianco pieno */
.adv-subtitle strong {
  color: #ffffff;
  font-weight: 700;
}

.adv-description {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--adv-lavender);
  margin: 0 0 1.5rem;
}

/* "in cima a Google" si accende: gradiente viola su testo. Le tinte partono
   dal brand schiarito perche' il gradiente originale (#6610F2) su fondo
   indaco non reggerebbe il contrasto minimo. */
.adv-description strong {
  font-weight: 600;
  background: linear-gradient(100deg, var(--adv-violet-light) 0%, #E3D6FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--adv-violet-light);
}

/* ===== Chip benefici ===== */
.adv-chips {
  list-style: none;
  margin: 0 0 1.85rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.adv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--adv-white);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Le emoji restano a colori. Lo stack esplicito serve perche' i font del
   sito non hanno glifi emoji: senza fallback si vedrebbe un tofu. */
.adv-chip-emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
  font-size: 1.05rem;
  line-height: 1;
}

/* ===== CTA ===== */
.adv-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* stesse misure e stessa transizione di .btn-hero / .btn-gradient */
  min-height: 54px;
  padding: 0.875rem 2rem;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--adv-violet-deep) 0%, var(--adv-violet) 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(102, 16, 242, 0.42);
  transition: var(--transition-normal, 0.3s ease);
}

.adv-cta:hover,
.adv-cta:focus {
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(138, 92, 246, 0.55);
}

.adv-cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* ===== Colonna animazione ===== */
.adv-anim {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Glow viola dietro il mock: galleggia con una sola transform */
.adv-glow {
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%,
      rgba(150, 105, 255, 0.62) 0%,
      rgba(102, 16, 242, 0.32) 40%,
      rgba(102, 16, 242, 0) 72%);
  filter: blur(22px);
  animation: adv-float 7s ease-in-out infinite;
}

@keyframes adv-float {
  0%, 100% { transform: translate3d(0, -8px, 0) scale(1); }
  50%      { transform: translate3d(0, 10px, 0) scale(1.06); }
}

/* Mock browser/SERP. overflow visibile di proposito: la coccarda deve poter
   uscire dal pannello. Le righe non escono mai dai propri slot. */
.adv-serp {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: 0.75rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(11, 6, 30, 0.88), rgba(17, 9, 44, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 55px rgba(6, 2, 20, 0.55);
}

.adv-serp-chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  /* 24px di aria sotto la pillola: e' lo spazio in cui la coccarda sborda
     sopra la riga #1 senza mai sovrapporsi alla barra di ricerca */
  padding: 0.15rem 0.2rem 1.5rem;
}

.adv-serp-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.adv-serp-search {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.adv-serp-lens {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--adv-lavender);
}

.adv-serp-query {
  font-size: 0.75rem;
  color: var(--adv-lavender);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le righe sono assolute e impilate: la posizione e' solo --adv-slot, quindi
   muoverle costa una transizione di transform e zero riflussi. */
.adv-serp-list {
  position: relative;
  height: calc(6 * var(--adv-row-h));
  /* il reset del ciclo avviene "a luci spente": il JS tocca solo l'opacita' */
  transition: opacity 0.32s ease;
}

/* Riposizionamento istantaneo durante il reset: le righe non devono
   ritornare giu' animate, altrimenti il loop si vede tornare indietro */
.adv-serp-list.adv-no-transition .adv-row {
  transition: none;
}

/* Fuori dal viewport (classe messa dall'IntersectionObserver) anche i loop
   puramente CSS si fermano: niente frame calcolati per roba non visibile */
.adv-is-paused .adv-glow,
.adv-is-paused .adv-marquee-track {
  animation-play-state: paused;
}

.adv-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--adv-row-h);
  padding-bottom: 10px;
  transform: translate3d(0, calc(var(--adv-slot, 0) * 100%), 0);
  /* stessa curva del resto del sito; translate3d promuove gia' il layer
     durante la transizione, un will-change permanente terrebbe vivi 6 layer */
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.adv-row-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Skeleton: barre anonime di larghezza variabile, nessun nome leggibile */
.adv-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.13);
}

.adv-bar-title {
  height: 9px;
  border-radius: 4px;
  background: rgba(167, 139, 250, 0.3);
}

/* Riga "La tua azienda": lo spazio della coccarda e' riservato sempre,
   cosi' l'arrivo al primo posto non sposta il testo. */
.adv-row-you .adv-row-card {
  padding-right: 4rem;
  background: linear-gradient(135deg, rgba(138, 92, 246, 0.22), rgba(102, 16, 242, 0.1));
  border-color: rgba(167, 139, 250, 0.4);
}

.adv-row-name {
  font-family: var(--font-heading, 'Ubuntu', sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--adv-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.35s ease;
}

.adv-bar-you {
  background: rgba(167, 139, 250, 0.38);
  transition: background 0.35s ease;
}

/* --- Momento "primo posto": unico punto in cui compare il ciano --- */
.adv-row-you.is-first .adv-row-card {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.06));
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.3), 0 0 36px rgba(34, 211, 238, 0.45);
}

.adv-row-you.is-first .adv-row-name { color: var(--adv-cyan); }
.adv-row-you.is-first .adv-bar-you { background: rgba(34, 211, 238, 0.45); }

/* Anello che si espande: irraggiamento all'arrivo, due battute e via */
.adv-ring {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 2px solid var(--adv-cyan);
  opacity: 0;
  pointer-events: none;
}

.adv-row-you.is-first .adv-ring {
  animation: adv-ring 1.05s ease-out 0.05s 2;
}

@keyframes adv-ring {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.18); }
}

/* ===== Coccarda ===== */
.adv-badge {
  position: absolute;
  /* Ancorata al CENTRO della riga, non al suo bordo alto: ancorandola in alto
     con un sollevamento percentuale la coccarda finiva dentro la chrome del
     mock e copriva la barra di ricerca a ogni larghezza. Cosi' sborda ~10px
     sopra la riga e ~10px sotto (i nastrini), restando sempre sotto la barra. */
  top: 50%;
  /* sconfina oltre il bordo del mock: la coccarda "esce" dal browser.
     Il valore e' riferito al bordo della CARD, che sta gia' dentro il padding
     del pannello: servono ~26px per vederne ~12 fuori dal riquadro. */
  right: -26px;
  width: 58px;
  height: 78px;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: translate3d(0, -50%, 0) scale(0.25) rotate(-24deg);
  transition: transform 0.55s cubic-bezier(0.2, 1.5, 0.35, 1), opacity 0.22s ease;
  pointer-events: none;
}

.adv-row-you.is-first .adv-badge {
  opacity: 1;
  transform: translate3d(0, -50%, 0) scale(1) rotate(0deg);
}

.adv-badge-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 16px rgba(34, 211, 238, 0.45));
}

.adv-badge-ribbon { fill: rgba(34, 211, 238, 0.55); }
.adv-badge-rosette { fill: var(--adv-cyan); }
.adv-badge-disc { fill: #0B0A22; }

.adv-badge-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* la rosetta e' centrata a 36/100 dell'altezza del viewBox */
  height: 72%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Ubuntu', sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--adv-cyan);
}

/* Il "°" italiano e' un simbolo: in apice e' corretto. */
.adv-badge-label sup {
  font-size: 0.55em;
  top: -0.55em;
}

/* In ZH il suffisso e' un ideogramma (位): in apice a meta' corpo sembra un
   refuso, quindi va sulla linea di base e a un corpo leggibile. */
:lang(zh) .adv-badge-label sup {
  font-size: 0.62em;
  top: 0;
  vertical-align: baseline;
}

/* ===== Cosa facciamo ===== */
.adv-what {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 1.5rem;
}

/* Due colonne dallo stesso breakpoint del blocco principale: testo a
   sinistra, elenco dei servizi a destra, cosi' il paragrafo non diventa
   una riga lunghissima e l'elenco non resta orfano in fondo. */
@media (min-width: 840px) {
  .adv-what {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
}

.adv-what-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-detail, 'Roboto Condensed', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--adv-violet-light);
}

.adv-what-text {
  margin: 0;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--adv-lavender);
}

.adv-what-text strong {
  font-weight: 600;
  color: var(--adv-white);
}

.adv-what-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adv-what-item {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--adv-white);
}

/* ===== Carosello loghi clienti ADV ===== */
.adv-clients {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

.adv-clients-title {
  margin: 0 0 1.25rem;
  text-align: center;
  font-family: var(--font-detail, 'Roboto Condensed', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--adv-lavender);
}

/* Placca chiara dentro il pannello: i loghi dei clienti restano nei loro
   colori (su fondo viola andrebbero ridotti a silhouette, e un marchio
   pittorico diventerebbe una macchia). La dissolvenza laterale sta sul
   nastro interno, non qui, altrimenti sfumerebbe anche la placca e gli
   angoli arrotondati perderebbero il filo. */
.adv-marquee-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 0.5rem 0;
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(7, 3, 24, 0.32);
}

.adv-marquee {
  overflow: hidden;
  padding: 0.25rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* Due gruppi identici larghi il doppio: a -50% il secondo e' esattamente
   dove era il primo, quindi il loop non ha salti. */
.adv-marquee-track {
  display: flex;
  width: max-content;
  animation: adv-logo-scroll 40s linear infinite;
  will-change: transform;
}

.adv-marquee:hover .adv-marquee-track {
  animation-play-state: paused;
}

.adv-marquee-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

/* Slot a larghezza fissa con il logo centrato dentro, invece di item larghi
   quanto l'immagine con un gap fisso: con loghi veri di proporzioni diverse
   (un simbolo quadrato accanto a un wordmark lungo) il nastro resterebbe
   irregolare e i marchi compatti peserebbero un quinto degli altri.
   L'aria fra i loghi la fa il max-width dell'immagine dentro lo slot. */
.adv-marquee-item {
  flex: 0 0 auto;
  width: clamp(140px, 13.5vw, 184px);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adv-marquee-link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* i segnaposto sono <span>, ma con gli URL veri diventano <a>: il target
     deve gia' essere a norma (44px) senza dover ritoccare il CSS */
  min-height: 44px;
  padding: 0.35rem 0.25rem;
  border-radius: 8px;
}

/* Sulla placca chiara i loghi vanno cosi' come li fornisce il cliente: niente
   filtri, nessuna alterazione del marchio. Vanno forniti con sfondo
   trasparente (o bianco) e in versione leggibile su chiaro. */
.adv-marquee-item img {
  display: block;
  width: auto;
  max-width: 82%;
  max-height: 42px;
  object-fit: contain;
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* Marchi compatti (stemmi, loghi quasi quadrati): a parita' di altezza
   peserebbero un terzo di un wordmark lungo, quindi possono salire. */
.adv-marquee-item img.adv-logo-tall {
  max-height: 58px;
}

.adv-marquee-item:hover img {
  transform: scale(1.04);
}

.adv-marquee-link:focus-visible {
  outline: 2px solid var(--adv-violet-deep);
  outline-offset: 3px;
}

@keyframes adv-logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== Responsive ===== */
@media (max-width: 839.98px) {
  .adv-anim {
    /* il mock non deve crescere oltre il testo quando si impila */
    max-width: 480px;
    margin-inline: auto;
    width: 100%;
  }
}

/* Finestra in cui si impila ancora ma lo schermo e' largo: senza comprimere
   qui la fascia diventa ~3 schermate su un telefono in orizzontale. */
@media (min-width: 576px) and (max-width: 839.98px) {
  /* righe piu' basse: nella finestra impilata il mock da solo vale 408px */
  .adv-band { --adv-row-h: 58px; }
}

@media (min-width: 768px) and (max-width: 839.98px) {
  .adv-band { padding-block: calc(var(--adv-fade-h) * 0.62); }
  .adv-grid { gap: 1.75rem; }
  .adv-panel { padding: 2rem; }
  .adv-clients { margin-top: 1.75rem; padding-top: 1.5rem; }
}

/* (11) A 992-1199 la colonna testo e' stretta e le chip andavano 2+1 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .adv-chips { gap: 0.45rem; }
  .adv-chip { padding: 0.45rem 0.75rem; font-size: 0.85rem; }
}

@media (max-width: 575.98px) {
  .adv-band {
    --adv-row-h: 58px;
  }

  .adv-serp { padding: 0.6rem; }
  .adv-serp-query { font-size: 0.7rem; }

  .adv-row-card { padding: 0.45rem 0.6rem; }
  .adv-row-you .adv-row-card { padding-right: 3.25rem; }
  .adv-row-name { font-size: 0.85rem; }

  .adv-badge {
    width: 48px;
    height: 64px;
    right: -20px;
  }

  .adv-badge-label { font-size: 1.05rem; }

  .adv-cta { width: 100%; }

  .adv-marquee-item { width: 126px; height: 52px; }
  .adv-marquee-item img { max-height: 34px; }
  .adv-marquee-item img.adv-logo-tall { max-height: 46px; }
  .adv-marquee-wrapper { border-radius: 18px; padding: 0.35rem 0; }
}

/* ===== Nessun movimento: si mostra direttamente lo stato finale ===== */
@media (prefers-reduced-motion: reduce) {
  .adv-glow { animation: none; }

  /* Le righe tornano a flusso normale e la riga "tua azienda" e' gia' prima */
  .adv-serp-list {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .adv-row {
    position: static;
    height: var(--adv-row-h);
    transform: none;
    transition: none;
    will-change: auto;
  }

  .adv-row-you { order: -1; }

  /* Stato "primo posto" statico (stesse tinte della classe .is-first) */
  .adv-row-you .adv-row-card {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.06));
    border-color: rgba(34, 211, 238, 0.65);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.3), 0 0 36px rgba(34, 211, 238, 0.45);
    transition: none;
  }

  .adv-row-you .adv-row-name { color: var(--adv-cyan); }
  .adv-row-you .adv-bar-you { background: rgba(34, 211, 238, 0.45); }
  .adv-ring { animation: none; opacity: 0; }

  .adv-badge {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1) rotate(0deg);
    transition: none;
  }

  .adv-cta { transition: none; }
  .adv-cta:hover { transform: none; }

  /* Carosello fermo: loghi statici a capo, seconda copia via */
  .adv-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .adv-marquee-track {
    width: 100%;
    animation: none;
  }

  /* Griglia a colonne fisse invece di flex-wrap: con 8 loghi il wrap lasciava
     una riga orfana (6+2 a 1440/1920) e una colonna di 8 sotto i 576. */
  .adv-marquee-group:first-child {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem 1rem;
    place-items: center;
    padding-right: 0;
  }

  .adv-marquee-item { width: auto; }

  .adv-marquee-group[aria-hidden="true"] { display: none; }
  .adv-marquee-item img { transition: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 575.98px) {
  .adv-marquee-group:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}