/* ═══════════════════════════════════════════════════════════
   FV REFRESH — stelle off, hero pulito, header a pillola,
   top bar promo ridisegnata. Caricato per ultimo: sovrascrive
   theme.css / pages.css / fv-design.css.
   ═══════════════════════════════════════════════════════════ */

/* ───────── 1. Stelle di sfondo disattivate ───────── */
.overlay_body,
.overlay_body::after,
.fv-affiliates .fv-stars,
.fv-star,
.hero-stars-field,
.hero-star {
  display: none !important;
  animation: none !important;
}

/* ───────── 2. Top bar promo ─────────
   Prima: box verde/nero a tutta larghezza con bordo squadrato.
   Ora: striscia sottile, fondo neutro profondo, filo teal in basso. */
.tf-header .promo-banner {
  margin: 0 !important;
  /* fv-design.css la fa larga 100vw per uscire dal container: qui il
     margine negativo e' gia' annullato, e 100vw conta anche la barra di
     scorrimento, quindi sporgeva di quella larghezza oltre la pagina */
  width: auto;
  padding: 8px 44px 8px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, #060e1c 0%, #091628 50%, #060e1c 100%) !important;
  /* fondo gia' opaco: la sfocatura del tema costava un repaint a ogni scroll */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.tf-header .promo-banner_text {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  color: rgba(244, 247, 245, 0.62) !important;
}

.tf-header .promo-banner_text strong {
  font-weight: 600 !important;
  color: #6fdcc6 !important;
}

.tf-header .promo-banner_highlight {
  color: rgba(244, 247, 245, 0.86) !important;
  text-shadow: none !important;
}

/* Nessuna sottolineatura a riposo, filo teal solo in hover */
.tf-header .promo-code-copy,
.tf-header .promo-code-copy strong {
  border-bottom: 0 !important;
  text-decoration: none !important;
  padding-bottom: 1px;
  transition: box-shadow 0.2s ease, color 0.2s ease;
}

.tf-header .promo-code-copy:hover {
  box-shadow: inset 0 -1px 0 0 rgba(111, 220, 198, 0.9);
}

.tf-header .promo-banner_close {
  right: 18px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  color: rgba(244, 247, 245, 0.45) !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.tf-header .promo-banner_close:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

/* La barra promo esce dal container per restare a tutta larghezza,
   mentre la pillola sotto resta centrata e stretta. */
.tf-header > .container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* ───────── 3. Header a pillola ───────── */
.tf-header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
}

.tf-header.banner-dismissed {
  padding-top: 0 !important;
}

/* Filo bianco a tutta larghezza sotto l'header: rimosso */
.tf-header::after,
.tf-header::before {
  display: none !important;
  content: none !important;
}

/* La pillola dell'header ha il suo sfondo fin dal caricamento: prima
   compariva solo dopo lo scroll e sopra l'hero i link si leggevano male.
   La classe .fv-scrolled (js/pages.js) ora cambia solo l'ombra. */
.tf-header > .container > .row {
  max-width: 1180px;
  margin: 14px auto 0 !important;
  padding: 8px 14px !important;
  width: calc(100% - 32px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(7, 14, 27, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    backdrop-filter 0.3s ease;
}

/* scorrendo resta uguale, prende solo l'ombra che la stacca dal contenuto */
.tf-header.fv-scrolled > .container > .row {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 16px 38px rgba(0, 0, 0, 0.42);
}

.tf-header .header-left {
  padding-left: 10px !important;
}

.tf-header .header-right {
  flex: 1 1 auto;
  margin-left: auto;
  padding-right: 0 !important;
}

/* la colonna di destra non deve lasciare margine dopo i bottoni */
.tf-header .container > .row > .col-lg-3:last-child {
  padding-right: 4px !important;
}

/* i due bottoni si appoggiano al bordo destro della pillola */
.tf-header .header-right .btn_group {
  justify-content: flex-end !important;
  margin-right: -2px;
}

.tf-header .logo-site img {
  width: 168px;
  height: auto;
}

/* i bottoni dell'header stanno gia' sopra la pillola sfocata:
   una seconda sfocatura per ogni bottone e' solo costo di rendering */
.tf-header .tf-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Voci di menu leggermente piu' piccole */
.tf-header .main-nav_menu .tf-btn,
.tf-header .main-nav_menu .tf-btn .text-body-3 {
  font-size: 14.5px !important;
}

/* con la voce Products in piu' le etichette devono restare su una riga

   ATTENZIONE al selettore: fv-design.css contiene
   .tf-header .menu-item a.tf-btn { padding: 0 14px !important }
   che e' piu' specifico (tre classi + un elemento) di
   .tf-header .main-nav_menu .tf-btn (tre classi). Fra due regole
   entrambe !important vince la piu' specifica, quindi la riduzione
   qui sotto per mesi non ha avuto alcun effetto: le voci sono
   rimaste a 14px per lato. Per questo l'elenco ripete il selettore
   lungo. La voce "Products" e' un <button> dentro li.fv-mega, non
   un <a> dentro li.menu-item: va nominata a parte. */
.tf-header .main-nav_menu .tf-btn,
.tf-header .main-nav_menu .menu-item a.tf-btn,
.tf-header .main-nav_menu .fv-mega > .tf-btn {
  padding: 0 8px !important;
  white-space: nowrap;
}

/* voci piu' vicine fra loro */
.tf-header .main-nav_menu {
  flex-wrap: nowrap !important;
  gap: 2px !important;
}

@media (min-width: 992px) and (max-width: 1279px) {
  .tf-header .main-nav_menu .tf-btn,
  .tf-header .main-nav_menu .tf-btn .text-body-3 {
    font-size: 13.5px !important;
  }

  .tf-header .main-nav_menu .tf-btn,
  .tf-header .main-nav_menu .menu-item a.tf-btn,
  .tf-header .main-nav_menu .fv-mega > .tf-btn {
    padding: 0 6px !important;
  }

  .tf-header .main-nav_menu {
    gap: 0 !important;
  }
}

/* Fra 992 e 1099px (iPad in orizzontale, portatili piccoli) il menu
   chiedeva 515px dove ce n'erano 475: sbordava a sinistra e le prime
   voci finivano sopra al logo. Qui si stringe ancora un po', cosi'
   resta una decina di pixel di margine anche in italiano, che ha le
   etichette piu' lunghe. */
@media (min-width: 992px) and (max-width: 1099px) {
  .tf-header .main-nav_menu .tf-btn,
  .tf-header .main-nav_menu .menu-item a.tf-btn,
  .tf-header .main-nav_menu .fv-mega > .tf-btn {
    padding: 0 4px !important;
    font-size: 13px !important;
  }

  .tf-header .main-nav_menu .menu-item a.tf-btn .text-body-3 {
    font-size: 13px !important;
  }
}

@media (max-width: 991px) {
  .tf-header > .container > .row {
    margin-top: 10px !important;
    width: calc(100% - 20px);
    padding: 6px 10px !important;
    border-radius: 16px;
  }
}

@media (max-width: 767px) {
  .tf-header .promo-banner {
    padding: 7px 38px 7px 14px !important;
  }

  .tf-header .promo-banner_text {
    font-size: 11px !important;
  }
}

/* ───────── 4. Hero: sfondo ripulito ─────────
   L'immagine occupava tutto il riquadro e mangiava il testo.
   Ora resta solo come texture laterale, sfumata sui bordi,
   sopra un fondo scuro con luci teal. */
/* Il fondo va sulla sezione, non sul .sect-main: cosi' parte da sotto
   l'header e sparisce la riga di stacco che si vedeva a inizio hero. */
.section-hero#home {
  position: relative;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(69, 200, 180, 0.13) 0%, rgba(69, 200, 180, 0) 58%),
    radial-gradient(90% 80% at 88% 6%, rgba(58, 118, 220, 0.16) 0%, rgba(58, 118, 220, 0) 62%),
    linear-gradient(180deg, #040a16 0%, #030812 60%, #02060f 100%) !important;
}

.section-hero#home .sect-main {
  background: transparent !important;
}

.section-hero .hero-copy-bg {
  opacity: 0.4;
  background-position: right center !important;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 38%, #000 78%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 16%, #000 34%, #000 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 38%, #000 78%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 16%, #000 34%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.section-hero .hero-copy-bg::after {
  background:
    linear-gradient(90deg, rgba(2, 6, 15, 0.92) 0%, rgba(2, 6, 15, 0.6) 42%, rgba(2, 6, 15, 0.18) 100%),
    linear-gradient(180deg, rgba(2, 6, 15, 0.55) 0%, rgba(2, 6, 15, 0.25) 40%, rgba(2, 6, 15, 0.95) 100%) !important;
}

/* Sfumatura di raccordo verso la sezione successiva */
.section-hero .sect-main::before {
  background: rgba(69, 200, 180, 0.12) !important;
}

.section-hero .sect-main::after {
  background: rgba(58, 118, 220, 0.14) !important;
}

/* Nessun taglio netto in cima all'immagine: il .sect-main non ritaglia
   piu' e la texture parte da sopra, sfumata. */
.section-hero#home .sect-main {
  overflow: visible !important;
}

.section-hero#home .hero-copy-bg {
  top: -200px; right: 0; bottom: 0; left: 0;
}

@media (max-width: 991px) {
  .section-hero .hero-copy-bg {
    opacity: 0.24;
  }
}

/* ───────── 5. Riga superiore hero: Trustpilot + MT5 ───────── */
.section-hero .hero-toprow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.section-hero .hero-toprow .fv-tp {
  margin-bottom: 0 !important;
}

.section-hero .hero-toprow__sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.16);
}

.section-hero .hero-toprow .hero-platform-badge {
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  color: rgba(244, 247, 245, 0.9) !important;
}

.section-hero .hero-toprow .hero-platform-badge img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain;
  background: transparent !important;
  padding: 0 !important;
}

@media (max-width: 767px) {
  /* tutta la riga sta su una linea sola: al posto delle cinque stelle
     ne resta una, il voto continua a dire il resto */
  .section-hero .hero-toprow {
    flex-wrap: nowrap;
    gap: 8px;
    /* la riga e' larga quanto il contenuto: il contenitore del hero e'
       un flex in colonna con align-items:center, quindi finiva centrata.
       Con align-self torna a filo del titolo. */
    align-self: flex-start;
    margin: 18px 0 8px;
  }

  .section-hero .hero-toprow .fv-tp {
    gap: 6px;
  }

  .section-hero .fv-tp__box:not(:first-child) {
    display: none;
  }

  .section-hero .hero-toprow__sep {
    display: block;
    height: 16px;
  }

  .section-hero .hero-toprow .hero-platform-badge {
    white-space: nowrap;
  }

  .section-hero .hero-toprow .hero-platform-badge img {
    width: 28px !important;
    height: 28px !important;
  }

  .section-hero .hero-main-grid .hero-toprow {
    order: 0;
  }
}

/* Un po' di respiro ai lati del contenuto dell'hero */
.section-hero#home .sect-main > .container {
  padding-left: 56px !important;
  padding-left: clamp(20px, 4vw, 56px) !important;
  padding-right: 56px !important;
  padding-right: clamp(20px, 4vw, 56px) !important;
}

/* ───────── 6. Titolo hero piu' grande e piu' arioso ───────── */
.section-hero .hero-main-grid > .sect-title {
  max-width: 940px !important;
}

.section-hero .hero-main-grid .s-title {
  font-size: 88px !important;
  font-size: clamp(44px, 6.2vw, 88px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
}

.section-hero .hero-main-grid .s-sub_title {
  font-size: 19px !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  max-width: 46ch;
}

@media (max-width: 767px) {
  .section-hero .hero-main-grid .s-title {
    font-size: 38px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   7. SEZIONE ECOSISTEMA — sezione CHIARA (styleguide:
   .fv-section--light), tab a sinistra e contenuto a destra.
   ═══════════════════════════════════════════════════════════ */
.fv-eco {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding-block: 126px;
  padding-block: clamp(72px, 9vw, 126px);
  scroll-margin-top: calc(var(--fv-header-offset, 120px) + 16px);
  background:
    radial-gradient(70% 55% at 85% 0%, rgba(69, 200, 180, 0.12) 0%, rgba(69, 200, 180, 0) 62%),
    radial-gradient(60% 50% at 5% 100%, rgba(69, 200, 180, 0.08) 0%, rgba(69, 200, 180, 0) 60%),
    #f7faf9;
  color: #141415;
  overflow: hidden;
}

.fv-eco__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 56px;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* l'intestazione vive dentro la scheda: occupa tutte le colonne
   della griglia e fa da fascia superiore sopra tab + pannello */
.fv-eco__head {
  position: relative;
  grid-column: 1 / -1;
  max-width: none;
  margin-bottom: 0;
  padding: 48px 40px 40px;
  padding: clamp(30px, 3.6vw, 48px) clamp(20px, 2.6vw, 40px) clamp(26px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(247, 250, 249, 0) 100%);
}

/* separatore sfumato: si spegne ai bordi invece di tagliare la scheda */
.fv-eco__head::after {
  content: "";
  position: absolute;
  left: 40px;
  left: clamp(20px, 2.6vw, 40px);
  right: 40px;
  right: clamp(20px, 2.6vw, 40px);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(20, 20, 21, 0) 0%, rgba(20, 20, 21, 0.12) 18%, rgba(20, 20, 21, 0.12) 82%, rgba(20, 20, 21, 0) 100%);
}

.fv-eco__eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2fa293;
}

.fv-eco__title {
  margin: 0 0 18px;
  font-size: 48px;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #141415;
}

.fv-eco__title em {
  font-style: normal;
  color: #2fa293;
}

.fv-eco__sub {
  margin: 0;
  max-width: 62ch;
  font-size: 18px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: #141415a3;
}

/* tab e pannello sono una scheda sola */
.fv-eco__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid #1414150f;
  border-radius: 32px;
  background:
    radial-gradient(74% 56% at 100% 0%, rgba(69, 200, 180, 0.14) 0%, rgba(69, 200, 180, 0) 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(69, 200, 180, 0.07) 0%, rgba(69, 200, 180, 0) 70%),
    #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 6px rgba(20, 32, 30, 0.04),
    0 34px 80px -24px rgba(20, 32, 30, 0.22);
  overflow: hidden;
}

/* sfere verdi di sfondo */
.fv-eco__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.fv-eco__orb--1 {
  top: -90px;
  right: -60px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle at 40% 38%, rgba(111, 220, 198, 0.34) 0%, rgba(69, 200, 180, 0.13) 46%, rgba(69, 200, 180, 0) 74%);
  filter: blur(10px);
}

.fv-eco__orb--2 {
  bottom: -120px;
  left: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at 58% 42%, rgba(69, 200, 180, 0.26) 0%, rgba(69, 200, 180, 0.09) 52%, rgba(69, 200, 180, 0) 76%);
  filter: blur(10px);
}

.fv-eco__orb--3 {
  top: 8%;
  right: 10%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at 45% 40%, rgba(111, 220, 198, 0.26) 0%, rgba(69, 200, 180, 0.1) 48%, rgba(69, 200, 180, 0) 72%);
  filter: blur(8px);
}

.fv-eco__inner {
  position: relative;
  z-index: 1;
}

/* ── colonna sinistra: etichetta + le voci ── */
.fv-eco__side {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(247, 250, 249, 0.92) 0%, rgba(255, 255, 255, 0.5) 100%);
}

/* anche il bordo verticale sfuma, per non chiudere la scheda in due */
.fv-eco__side::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(20, 20, 21, 0.11) 0%, rgba(20, 20, 21, 0.11) 72%, rgba(20, 20, 21, 0) 100%);
}

/* dice che le voci sotto sono cliccabili */
.fv-eco__tabs-label {
  display: block;
  padding: 22px 22px 0;
  padding: clamp(16px, 1.6vw, 22px) clamp(16px, 1.6vw, 22px) 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2fa293;
}

.fv-eco__tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
  padding: clamp(16px, 1.6vw, 22px);
}

.fv-eco__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #141415a3;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .fv-eco__tab:hover {
    background: #ffffff;
    border-color: #14141510;
    color: #141415;
  }

  .fv-eco__tab:hover .fv-eco__tab-ico {
    background: #1414150f;
    color: #141415;
  }
}

.fv-eco__tab.is-active {
  background: #ffffff;
  border-color: rgba(47, 162, 147, 0.2);
  color: #141415;
  font-weight: 600;
  box-shadow:
    0 1px 2px rgba(20, 32, 30, 0.05),
    0 14px 28px -12px rgba(20, 32, 30, 0.28);
}

/* barretta verde sul bordo sinistro della voce attiva */
.fv-eco__tab.is-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #56d6c1, #2fa293);
  transform: translateY(-50%);
}

.fv-eco__tab-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid #14141510;
  background: #14141506;
  color: #141415a3;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.fv-eco__tab.is-active .fv-eco__tab-ico {
  border-color: rgba(47, 162, 147, 0.24);
  background: var(--fv-teal-050, #e8f6f4);
  color: #2fa293;
}

.fv-eco__tab-ico svg,
.fv-eco__tab-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-eco__tab-txt {
  flex: 1 1 auto;
}

.fv-eco__tab-arrow {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  opacity: 0;
  transform: translateX(-4px);
  color: #2fa293;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.fv-eco__tab.is-active .fv-eco__tab-arrow {
  opacity: 1;
  transform: translateX(0);
}

.fv-eco__tab:focus-visible {
  outline: 2px solid rgba(47, 162, 147, 0.55);
  outline-offset: 2px;
}

/* ── colonna destra: il pannello ── */
.fv-eco__stage {
  position: relative;
  min-height: 380px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 44px;
  padding: clamp(26px, 3vw, 44px);
}

.fv-eco__panel[hidden] {
  display: none;
}

.fv-eco__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  gap: 44px;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  animation: fvEcoIn 0.32s ease both;
}

@keyframes fvEcoIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.fv-eco__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 5px 13px 5px 11px;
  border: 1px solid rgba(47, 162, 147, 0.18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #2fa293;
  background: var(--fv-teal-050, #e8f6f4);
}

.fv-eco__chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2fa293;
  box-shadow: 0 0 0 3px rgba(47, 162, 147, 0.16);
}

.fv-eco__panel-title {
  margin: 0 0 12px;
  font-size: 30px;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #141415;
}

.fv-eco__panel-text {
  margin: 0 0 22px;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.65;
  color: #141415a3;
}

.fv-eco__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fv-eco__list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.5;
  color: #141415;
}

.fv-eco__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fa293' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E")
      center / 12px 12px no-repeat,
    var(--fv-teal-050, #e8f6f4);
}

.fv-eco__visual {
  display: grid;
  gap: 12px;
  align-content: center;
}

/* ── grafiche del pannello (una per voce) ── */
.fv-eco__art {
  border: 1px solid #14141514;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(20, 32, 30, 0.07);
  overflow: hidden;
}

/* Live Trading Room */

/* Carte (Black + Debit) */
.fv-art__card {
  position: relative;
  margin: 14px 14px 0;
  aspect-ratio: 1.6 / 1;
  border-radius: 14px;
  padding: 14px;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  box-shadow: 0 14px 30px rgba(20, 32, 30, 0.22);
}

.fv-art__card--black {
  background: linear-gradient(145deg, #23262b 0%, #0c0d10 60%, #16181d 100%);
  color: #ffffff;
}

.fv-art__card--teal {
  background: linear-gradient(145deg, #2fa293 0%, #17554f 100%);
  color: #ffffff;
}

.fv-art__card-brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  opacity: 0.85;
}

.fv-art__card-tier {
  position: absolute;
  right: 14px;
  top: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: #cfd3da;
}

.fv-art__card-chip {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(140deg, #e8d9a8 0%, #c7a95f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.fv-art__card-num {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  align-self: end;
}

.fv-art__card-shine {
  position: absolute;
  top: -40%; right: -10%; bottom: auto; left: auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 70%);
}

/* Payout: anello + step */

/* Vault */

@media (max-width: 991px) {
  /* minmax(0,1fr) e non 1fr: il minimo `auto` faceva allargare la colonna
     fino allo scrollWidth della fila di pillole (nowrap), sfondando la
     scheda e mandando head/stage sotto l'overflow: hidden */
  .fv-eco__grid {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 22px;
  }

  .fv-eco__side,
  .fv-eco__head,
  .fv-eco__stage,
  .fv-eco__tabs {
    min-width: 0;
  }

  .fv-eco__head {
    padding: 22px 18px 20px;
  }

  .fv-eco__side {
    border-right: 0;
    border-bottom: 1px solid #14141512;
  }

  .fv-eco__tabs-label {
    padding: 14px 14px 0;
    font-size: 11px;
  }

  .fv-eco__tabs {
    padding: 10px 14px 12px;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* la sfumatura a destra dice che la fila continua */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  }

  .fv-eco__tab {
    scroll-snap-align: start;
  }

  .fv-eco__tabs::-webkit-scrollbar {
    display: none;
  }

  .fv-eco__tab {
    width: auto;
    flex: 0 0 auto;
    gap: 8px;
    padding: 8px 12px 8px 8px;
    border-radius: 999px;
    border-color: #14141514;
    background: #ffffff;
    font-size: 14px;
    white-space: nowrap;
  }

  /* sulle pillole la barretta laterale non ha senso */
  .fv-eco__tab.is-active::before {
    display: none;
  }

  .fv-eco__tab.is-active {
    border-color: rgba(47, 162, 147, 0.4);
    background: var(--fv-teal-050, #e8f6f4);
    color: #10312c;
    box-shadow: none;
  }

  .fv-eco__side::after {
    display: none;
  }

  /* sulle pillole resta l'icona (senza riquadro, solo il segno) e
     sparisce solo la freccia, che qui non indica nulla */
  .fv-eco__tab-arrow {
    display: none;
  }

  /* stessa icona del desktop, riquadro compreso, solo piu' piccola */
  .fv-eco__tab-ico {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }

  .fv-eco__tab-ico svg {
    width: 15px;
    height: 15px;
  }

  .fv-eco__stage {
    min-height: 0;
  }

  .fv-eco__panel {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   8. HOW IT WORKS — tre card chiare, la terza nera (premium)
   ═══════════════════════════════════════════════════════════ */
.fv-how {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-block: 110px;
  padding-block: clamp(64px, 8vw, 110px);
  scroll-margin-top: calc(var(--fv-header-offset, 120px) + 16px);
  background:
    radial-gradient(60% 45% at 15% 0%, rgba(69, 200, 180, 0.08) 0%, rgba(69, 200, 180, 0) 60%),
    #f7faf9;
  color: #141415;
}

.fv-how__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 56px;
  padding-inline: clamp(20px, 4vw, 56px);
}

.fv-how__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}

.fv-how__title {
  margin: 0 0 12px;
  font-size: 46px;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.fv-how__sub {
  margin: 0;
  font-size: 17px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: #141415a3;
}

.fv-how__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  gap: clamp(16px, 1.8vw, 24px);
  align-items: stretch;
}

.fv-how__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px;
  padding: clamp(24px, 2.2vw, 32px);
  border: 1px solid #14141514;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 52px rgba(20, 32, 30, 0.08);
  overflow: hidden;
}

.fv-how__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #14141566;
}

.fv-how__num {
  font-variant-numeric: tabular-nums;
  color: #14141540;
}

.fv-how__card-title {
  margin: 0 0 12px;
  font-size: 32px;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.12;
}

.fv-how__card-text {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: #141415a3;
}

/* la grafica sta sempre in fondo alla scheda: cosi' i tre riquadri
   risultano allineati anche se i testi hanno lunghezze diverse */
.fv-how__media {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: auto;
  margin-bottom: 0;
  min-height: 200px;
}

/* ── card 01: scelta account, modello e regole ── */
/* un unico pannello, stessa massa visiva della ricevuta della card 02 */
.fv-how__panel {
  width: 100%;
  display: grid;
  gap: 11px;
  padding: 15px 16px;
  border: 1px solid #14141514;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(20, 32, 30, 0.07);
}

.fv-how__panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.fv-how__pick-lbl {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #14141566;
}

.fv-how__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}

.fv-how__chips span {
  padding: 5px 10px;
  border: 1px solid #14141514;
  border-radius: 999px;
  background: #f7faf9;
  font-size: 12px;
  font-weight: 600;
  color: #141415a3;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.fv-how__chips span.is-on {
  border-color: transparent;
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
  color: #032723;
  box-shadow: 0 8px 18px rgba(69, 200, 180, 0.24);
}

.fv-how__rules {
  display: grid;
  gap: 0;
  margin: 1px 0 0;
  padding: 9px 0 0;
  border-top: 1px solid #14141514;
}

.fv-how__rules div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 12.5px;
}

.fv-how__rules div + div {
  border-top: 1px solid #14141510;
}

.fv-how__rules dt {
  color: #141415a3;
}

.fv-how__rules dd {
  margin: 0;
  font-weight: 600;
  color: #141415;
}

.fv-how__rules dd.is-good {
  color: #2fa293;
}

/* ── card 02: ricevuta del payout ── */
.fv-how__receipt {
  width: 100%;
  padding: 18px;
  border-radius: 20px;
  color: #ffffff;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(111, 220, 198, 0.35) 0%, rgba(111, 220, 198, 0) 62%),
    linear-gradient(160deg, #2fa293 0%, #17554f 100%);
  box-shadow: 0 22px 44px rgba(23, 85, 79, 0.28);
}

.fv-how__receipt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.28);
}

.fv-how__receipt-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.fv-how__receipt-tag i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
}

.fv-how__receipt-tag svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #17554f;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-how__receipt-amount {
  font-size: 28px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.fv-how__flow {
  display: grid;
  gap: 10px;
  margin: 16px 0 18px;
  padding: 0;
  list-style: none;
}

.fv-how__flow li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-left: 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.fv-how__flow li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.fv-how__flow li.is-done::before {
  background: #ffffff;
}

.fv-how__flow li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(50% + 7px);
  width: 1px;
  height: calc(100% - 4px);
  background: rgba(255, 255, 255, 0.28);
}

.fv-how__flow li.is-last {
  color: #ffffff;
  font-weight: 600;
}

.fv-how__flow b {
  font-weight: 600;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.fv-how__gauge {
  display: grid;
  gap: 8px;
}

.fv-how__gauge-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.fv-how__gauge-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ffffff;
}

.fv-how__gauge-legend {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.fv-how__gauge-legend b {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.fv-how__gauge-legend em {
  font-style: normal;
  opacity: 0.5;
  margin: 0 4px;
}

/* ── card 03: la card e' nera, premium ── */
.fv-how__card--black {
  border-color: rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(80% 60% at 50% -10%, rgba(199, 169, 95, 0.14) 0%, rgba(199, 169, 95, 0) 60%),
    linear-gradient(160deg, #24272c 0%, #0d0e11 45%, #16181d 100%);
  box-shadow: 0 26px 60px rgba(6, 8, 12, 0.42);
  color: #ffffff;
}

.fv-how__card--black::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.fv-how__glow {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 169, 95, 0.22) 0%, rgba(199, 169, 95, 0) 70%);
  pointer-events: none;
}

.fv-how__card--black .fv-how__eyebrow {
  color: rgba(255, 255, 255, 0.55);
}

.fv-how__card--black .fv-how__num {
  color: rgba(232, 217, 168, 0.75);
}

.fv-how__card--black .fv-how__card-title {
  background: linear-gradient(100deg, #ffffff 0%, #e8d9a8 55%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fv-how__card--black .fv-how__card-text {
  color: rgba(255, 255, 255, 0.62);
}

/* ── card 03: invito Black e vantaggi ── */
.fv-how__panel--dark {
  gap: 14px;
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.fv-how__ticket {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fv-how__ticket::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 58px;
  height: 1px;
  background: linear-gradient(90deg, #e8d9a8 0%, rgba(232, 217, 168, 0) 100%);
}

.fv-how__ticket-brand {
  width: 100%;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: rgba(255, 255, 255, 0.55);
}

.fv-how__ticket-tier {
  font-size: 25px;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 700;
  letter-spacing: 0.16em;
  background: linear-gradient(100deg, #ffffff 0%, #e8d9a8 55%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fv-how__ticket-note {
  margin-left: auto;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(232, 217, 168, 0.8);
}

.fv-how__perks {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fv-how__perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.86);
}

.fv-how__perks i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(232, 217, 168, 0.14);
  color: #e8d9a8;
}

.fv-how__perks svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 991px) {
  .fv-how__grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }

  .fv-how__media {
    min-height: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   9. PRICING — modelli di challenge (scuro, stile aggiornato)
   ═══════════════════════════════════════════════════════════ */
.fv-pr {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-block: 112px;
  padding-block: clamp(64px, 8vw, 112px);
  scroll-margin-top: calc(var(--fv-header-offset, 120px) + 16px);
  background:
    radial-gradient(58% 42% at 50% 0%, rgba(69, 200, 180, 0.12) 0%, rgba(69, 200, 180, 0) 64%),
    radial-gradient(70% 50% at 50% 100%, rgba(58, 118, 220, 0.09) 0%, rgba(58, 118, 220, 0) 62%),
    linear-gradient(180deg, #02060f 0%, #04091a 52%, #02060f 100%);
  color: #f4f7f5;
}

.fv-pr__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 56px;
  padding-inline: clamp(16px, 3vw, 56px);
}

/* ── testata ── */
.fv-pr__head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 26px;
}

.fv-pr__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  border: 1px solid rgba(69, 200, 180, 0.26);
  border-radius: 999px;
  background: rgba(69, 200, 180, 0.08);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6fdcc6;
}

.fv-pr__title {
  margin: 0 0 12px;
  font-size: 46px;
  font-size: clamp(28px, 3.3vw, 46px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.1;
}

.fv-pr__sub {
  margin: 0 0 10px;
  font-size: 17px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: rgba(244, 247, 245, 0.62);
}

.fv-pr__note {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: rgba(244, 247, 245, 0.36);
}

/* ── switcher principale ── */
.fv-pr__switch,
.fv-pr__subswitch {
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.fv-pr__switch {
  position: relative;
  gap: 3px;
  margin-bottom: 10px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* il fondo colorato e' un elemento unico che scivola da una voce
   all'altra: le voci restano trasparenti e cambiano solo colore */
.fv-pr__thumb {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  border-radius: 999px;
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
  box-shadow:
    0 6px 18px rgba(69, 200, 180, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}

.fv-pr__subswitch .fv-pr__thumb {
  top: 3px;
  height: calc(100% - 6px);
  border-radius: 18px;
  background: rgba(69, 200, 180, 0.14);
  border: 1px solid rgba(69, 200, 180, 0.3);
  box-shadow: none;
}

.fv-pr__thumb.is-idle {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .fv-pr__thumb {
    transition: none;
  }
}

.fv-pr__model {
  position: relative;
  z-index: 1;
  padding: 7px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(244, 247, 245, 0.62);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
}

.fv-pr__model:hover {
  color: #ffffff;
}

.fv-pr__model.is-active {
  background: transparent;
  color: #032723;
  font-weight: 600;
}

/* ── switcher secondario (solo 1 Step) ── */
.fv-pr__subswitch {
  position: relative;
  display: none;
  gap: 3px;
  margin-bottom: 20px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.025);
}

.fv-pr__subswitch.is-active {
  display: flex;
  flex-wrap: wrap;
}

.fv-pr__variant {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  padding: 5px 16px;
  line-height: 1.25;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  color: rgba(244, 247, 245, 0.72);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: background 0.24s ease, color 0.24s ease, border-color 0.24s ease;
}

.fv-pr__variant b {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fv-pr__variant em {
  font-style: normal;
  font-size: 10.5px;
  color: rgba(244, 247, 245, 0.4);
}

.fv-pr__variant:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.fv-pr__variant.is-active {
  background: transparent;
  border-color: transparent;
  color: #ffffff;
}

.fv-pr__variant.is-active em {
  color: #6fdcc6;
}

/* ── pannelli ── */
.fv-pr__panel {
  display: none;
}

.fv-pr__panel.is-active {
  display: block;
  animation: fvPrFade 0.26s ease both;
}

@keyframes fvPrFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fv-pr__panel.is-active {
    animation: none;
  }
}

/* il contenitore non deve mostrare le barre durante lo scorrimento */
.fv-pr__panels {
  overflow: hidden;
}

.fv-pr__desc {
  max-width: 66ch;
  margin: 0 auto 32px;
  text-align: center;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(244, 247, 245, 0.58);
}

.fv-pr__grid {
  display: grid;
  grid-template-columns: repeat(var(--fv-pr-cols, 5), minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* ── card ── */
.fv-pr__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    transform 0.24s ease;
}

.fv-pr__card:hover {
  transform: translateY(-3px);
  border-color: rgba(69, 200, 180, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.4);
}

.fv-pr__card.is-popular {
  border-color: rgba(69, 200, 180, 0.42);
  background:
    radial-gradient(110% 62% at 50% 0%, rgba(69, 200, 180, 0.2) 0%, rgba(69, 200, 180, 0) 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 50px rgba(0, 0, 0, 0.42);
}

.fv-pr__card.is-funded {
  border-color: rgba(69, 200, 180, 0.34);
}

.fv-pr__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
  color: #032723;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(69, 200, 180, 0.32);
}

.fv-pr__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
}

.fv-pr__price-box {
  text-align: right;
}

.fv-pr__lbl {
  display: block;
  margin-bottom: 6px;
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 247, 245, 0.38);
}

.fv-pr__size,
.fv-pr__price {
  display: block;
  font-size: 27px;
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.fv-pr__price i {
  font-style: normal;
  font-size: 0.62em;
  font-weight: 500;
  color: rgba(244, 247, 245, 0.5);
  margin-right: 1px;
  vertical-align: 0.18em;
}

.fv-pr__later {
  display: block;
  margin: -6px 0 14px;
  text-align: right;
  font-size: 11.5px;
  color: rgba(244, 247, 245, 0.45);
}

.fv-pr__later b {
  font-weight: 600;
  color: #6fdcc6;
}

/* ── azioni ── */
.fv-pr__buy {
  display: block;
  padding: 13px 14px;
  border-radius: 13px;
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
  color: #032723 !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px rgba(69, 200, 180, 0.22);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fv-pr__buy:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 12px 26px rgba(69, 200, 180, 0.32);
}

.fv-pr__buy:active {
  transform: translateY(1px);
}

.fv-pr__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 8px;
  padding: 9px 8px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(244, 247, 245, 0.68);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.fv-pr__toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.fv-pr__toggle-ico svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-pr__card.is-funded .fv-pr__toggle {
  border-color: rgba(69, 200, 180, 0.38);
  background: rgba(69, 200, 180, 0.1);
  color: #6fdcc6;
}

.fv-pr__toggle-off,
.fv-pr__card.is-funded .fv-pr__toggle-on {
  display: none;
}

.fv-pr__card.is-funded .fv-pr__toggle-off {
  display: inline;
}

/* ── elenco valori ── */
.fv-pr__rules {
  margin: 16px 0 0;
  padding: 0;
  display: grid;
}

.fv-pr__rules--funded,
.fv-pr__card.is-funded .fv-pr__rules--challenge {
  display: none;
}

.fv-pr__card.is-funded .fv-pr__rules--funded {
  display: grid;
  animation: fvPrIn 0.24s ease both;
}

.fv-pr__rule {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
}

.fv-pr__rule:first-child {
  border-top: 0;
  padding-top: 0;
}

.fv-pr__rule dt {
  flex: 0 1 auto;
  min-width: 0;
  color: rgba(244, 247, 245, 0.52);
}

.fv-pr__rule dd {
  flex: 1 1 auto;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fv-pr__rule.is-multi {
  align-items: flex-start;
}

.fv-pr__rule.is-multi dd {
  display: grid;
  gap: 4px;
}

.fv-pr__rule.is-multi dd span {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.fv-pr__rule.is-multi dd em {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: rgba(244, 247, 245, 0.38);
}

/* ── add-on ── */
.fv-pr__addons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  font-size: 13px;
  color: rgba(244, 247, 245, 0.45);
}

.fv-pr__addons b {
  padding: 7px 15px;
  border: 1px solid rgba(69, 200, 180, 0.26);
  border-radius: 999px;
  background: rgba(69, 200, 180, 0.08);
  font-weight: 500;
  color: #6fdcc6;
}

@media (max-width: 1199px) {
  .fv-pr__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .fv-pr__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .fv-pr__model {
    padding: 10px 17px;
    font-size: 14px;
  }

  .fv-pr__variant {
    padding: 8px 13px;
  }

  .fv-pr__card {
    padding: 18px 14px 14px;
  }

  .fv-pr__card:hover {
    transform: none;
  }
}

@media (max-width: 479px) {
  .fv-pr__grid {
    grid-template-columns: 1fr;
  }
}

/* su mobile una sola card per volta, scelta con lo switcher delle taglie */
.fv-pr__sizes {
  display: none;
}

@media (max-width: 767px) {
  /* ── i due switcher restano su una riga sola: se non ci stanno,
     scorrono in orizzontale invece di andare a capo ── */
  .fv-pr__switch,
  .fv-pr__subswitch.is-active {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    gap: 2px;
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .fv-pr__switch::-webkit-scrollbar,
  .fv-pr__subswitch::-webkit-scrollbar,
  .fv-pr__sizes::-webkit-scrollbar {
    display: none;
  }

  .fv-pr__model,
  .fv-pr__variant {
    white-space: nowrap;
  }

  /* le tre voci occupano la stessa larghezza; se il testo non ci sta
     il min-width le fa traboccare e lo switcher diventa scorribile */
  .fv-pr__model {
    flex: 1 1 0;
    min-width: max-content;
    padding: 9px 10px;
    font-size: 13.5px;
    text-align: center;
    /* il bottone e' un flex container: senza questo il testo resta
       ancorato a sinistra e le tre voci sembrano disallineate */
    justify-content: center;
  }

  /* ── switcher varianti: elementi separati, senza contenitore ── */
  .fv-pr__subswitch.is-active {
    /* "safe center": centra quando le voci ci stanno, torna
       allineato a sinistra quando devono scorrere (altrimenti
       le prime finirebbero tagliate fuori dallo scroll) */
    justify-content: center;
    justify-content: safe center;
    gap: 8px;
    padding: 0 0 2px;
    border: 0;
    background: none;
    border-radius: 0;
  }

  .fv-pr__subswitch .fv-pr__thumb {
    display: none;
  }

  .fv-pr__variant {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
  }

  .fv-pr__variant.is-active {
    border-color: rgba(69, 200, 180, 0.45);
    background: rgba(69, 200, 180, 0.14);
  }

  .fv-pr__variant b {
    font-size: 13px;
  }

  .fv-pr__variant em {
    font-size: 11px;
  }

  /* ── switcher account size: tutte le taglie sempre visibili ── */
  .fv-pr__sizes {
    display: flex;
    gap: 6px;
    margin: 0 -16px 14px;
    padding: 2px 16px 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  /* ── "Funded conditions" a tutta larghezza come il bottone d'acquisto ── */
  .fv-pr__toggle {
    width: 100%;
    justify-content: center;
  }

  .fv-pr__size-btn {
    flex: 0 0 auto;
    scroll-snap-align: center;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: rgba(244, 247, 245, 0.72);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .fv-pr__size-btn.is-active {
    background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
    border-color: transparent;
    color: #032723;
    box-shadow: 0 6px 16px rgba(69, 200, 180, 0.28);
  }

  .fv-pr__grid {
    grid-template-columns: 1fr;
  }

  .fv-pr__card {
    display: none;
  }

  .fv-pr__card.is-active {
    display: block;
  }
}

/* ═══════════════════════════════════════════════════════════
   10. TRUSTED — griglia mista (recensioni, payout, video, stat)
   con colonne che scorrono a velocita' diverse
   ═══════════════════════════════════════════════════════════ */
.fv-tc {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-block: 84px;
  padding-block: clamp(56px, 6vw, 84px);
  scroll-margin-top: calc(var(--fv-header-offset, 120px) + 16px);
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(69, 200, 180, 0.09) 0%, rgba(69, 200, 180, 0) 60%),
    linear-gradient(180deg, #02060f 0%, #04091a 50%, #02060f 100%);
  color: #f4f7f5;
  overflow: hidden;
}

.fv-tc__inner {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 48px;
  padding-inline: clamp(16px, 3vw, 48px);
}

.fv-tc__head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
  margin: 0 auto clamp(32px, 3.6vw, 48px);
}

.fv-tc__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6fdcc6;
}

.fv-tc__title {
  margin: 0 0 12px;
  font-size: 46px;
  font-size: clamp(28px, 3.3vw, 46px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.1;
}

.fv-tc__sub {
  margin: 0;
  font-size: 16.5px;
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 1.6;
  color: rgba(244, 247, 245, 0.58);
}

/* ── griglia ── */
.fv-tc__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  height: 1560px;
  height: clamp(1080px, 132vh, 1560px);
  overflow: hidden;
}

/* sfumatura finale con un velo sovrapposto invece della mask:
   la mask obbligava il browser a ricomporre tutta la griglia a ogni frame */
.fv-tc__grid::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg, rgba(3, 7, 16, 0) 0%, #02060f 92%);
}

/* fade anche in alto, su tutti gli schermi: le card entrano ed escono
   allo stesso modo da entrambi i lati */
.fv-tc__grid::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 16%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(0deg, rgba(3, 7, 16, 0) 0%, #02060f 92%);
}

.fv-tc__col {
  overflow: hidden;
}

.fv-tc__track {
  display: grid;
  gap: 12px;
  transform: translate3d(0, 0, 0);
}

/* scorrimento continuo: l'animazione gira sul compositor, cosi' il
   movimento non dipende dalla cadenza degli eventi di scroll (era
   quello a farlo andare a scatti) */
.fv-tc__track.is-looping {
  animation-name: fvTcLoop;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

@keyframes fvTcLoop {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, var(--fv-tc-loop, -50%), 0); }
}

/* le colonne restano ferme se si tiene premuto o si clicca: la pausa
   e' gestita via JS con le classi is-paused / is-held */
.fv-tc__grid.is-paused .fv-tc__track.is-looping,
.fv-tc__grid.is-held .fv-tc__track.is-looping {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .fv-tc__track {
    transform: none !important;
    animation: none !important;
  }
}

/* ── card: base ── */
.fv-tc__card {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  contain: layout paint style;
  transition: border-color 0.24s ease, transform 0.24s ease;
}

.fv-tc__card:hover {
  transform: translateY(-2px);
}

/* badge della piattaforma */
.fv-tc__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fv-tc-brand, rgba(244, 247, 245, 0.7));
}

.fv-tc__ico {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fv-tc-brand, #ffffff);
}

.fv-tc__ico svg {
  width: 10px;
  height: 10px;
  fill: var(--fv-tc-onbrand, #05070c);
  stroke: none;
}

/* colori per piattaforma */
.fv-tc__card.is-trustpilot { --fv-tc-brand: #00b67a; --fv-tc-onbrand: #ffffff; --fv-tc-soft: rgba(0, 182, 122, 0.1); --fv-tc-line: rgba(0, 182, 122, 0.3); }
/* card punteggio senza marchio: usa il teal del sito, non il verde altrui */
.fv-tc__card.is-verified  { --fv-tc-brand: #45c8b4; --fv-tc-onbrand: #05070c; --fv-tc-soft: rgba(69, 200, 180, 0.1); --fv-tc-line: rgba(69, 200, 180, 0.3); }
.fv-tc__card.is-x         { --fv-tc-brand: #f4f7f5; --fv-tc-onbrand: #05070c; --fv-tc-soft: rgba(255, 255, 255, 0.07); --fv-tc-line: rgba(255, 255, 255, 0.22); }
.fv-tc__card.is-reddit    { --fv-tc-brand: #ff5c1c; --fv-tc-onbrand: #ffffff; --fv-tc-soft: rgba(255, 92, 28, 0.12); --fv-tc-line: rgba(255, 92, 28, 0.32); }
.fv-tc__card.is-facebook  { --fv-tc-brand: #4a86f7; --fv-tc-onbrand: #ffffff; --fv-tc-soft: rgba(74, 134, 247, 0.12); --fv-tc-line: rgba(74, 134, 247, 0.32); }
.fv-tc__card.is-youtube   { --fv-tc-brand: #ff4d4d; --fv-tc-onbrand: #ffffff; --fv-tc-soft: rgba(255, 77, 77, 0.12); --fv-tc-line: rgba(255, 77, 77, 0.3); }
.fv-tc__card.is-discord   { --fv-tc-brand: #7c8cf8; --fv-tc-onbrand: #ffffff; --fv-tc-soft: rgba(124, 140, 248, 0.12); --fv-tc-line: rgba(124, 140, 248, 0.32); }

.fv-tc__card.is-trustpilot:hover { border-color: rgba(0, 182, 122, 0.4); }
.fv-tc__card.is-verified:hover { border-color: rgba(69, 200, 180, 0.4); }
.fv-tc__card.is-x:hover { border-color: rgba(255, 255, 255, 0.3); }
.fv-tc__card.is-reddit:hover { border-color: rgba(255, 92, 28, 0.42); }
.fv-tc__card.is-facebook:hover { border-color: rgba(74, 134, 247, 0.42); }
.fv-tc__card.is-youtube:hover { border-color: rgba(255, 77, 77, 0.42); }
.fv-tc__card.is-discord:hover { border-color: rgba(124, 140, 248, 0.42); }

.fv-tc__card.is-x {
  background: linear-gradient(165deg, #0e1116 0%, #05070c 100%);
}

.fv-tc__card.is-reddit {
  background:
    radial-gradient(130% 90% at 12% 0%, rgba(255, 92, 28, 0.14) 0%, rgba(255, 92, 28, 0) 68%),
    rgba(255, 255, 255, 0.025);
}

.fv-tc__card.is-facebook {
  background:
    radial-gradient(130% 90% at 12% 0%, rgba(74, 134, 247, 0.14) 0%, rgba(74, 134, 247, 0) 68%),
    rgba(255, 255, 255, 0.025);
}

.fv-tc__card.is-discord {
  background:
    radial-gradient(130% 90% at 12% 0%, rgba(124, 140, 248, 0.14) 0%, rgba(124, 140, 248, 0) 68%),
    rgba(255, 255, 255, 0.025);
}

/* stelle */
.fv-tc__stars {
  display: inline-flex;
  gap: 3px;
  margin: 0 0 8px 8px;
}

.fv-tc__stars i {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 17.6 6.1 20.7l1.2-6.6L2.5 9.5l6.6-.9L12 2.5z'/%3E%3C/svg%3E")
      center / 9px 9px no-repeat,
    var(--fv-tc-brand, #00b67a);
}

/* su X il colore di brand e' quasi bianco: la stella bianca spariva,
   quindi li' si disegna nel colore scuro di contrasto */
.fv-tc__card.is-x .fv-tc__stars i {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2305070c'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 17.6 6.1 20.7l1.2-6.6L2.5 9.5l6.6-.9L12 2.5z'/%3E%3C/svg%3E")
      center / 9px 9px no-repeat,
    var(--fv-tc-brand, #00b67a);
}

.fv-tc__text {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(244, 247, 245, 0.86);
}

/* autore */
.fv-tc__who {
  display: flex;
  align-items: center;
  gap: 9px;
}

.fv-tc__avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(69, 200, 180, 0.9) 0%, rgba(47, 162, 147, 0.9) 100%);
  color: #03231f;
  font-size: 11px;
  font-weight: 700;
}

.fv-tc__meta {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.fv-tc__meta b {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff;
}

.fv-tc__meta em {
  font-style: normal;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(244, 247, 245, 0.42);
}

/* card statistica */
.fv-tc__card--stat {
  border-color: rgba(69, 200, 180, 0.24);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(69, 200, 180, 0.16) 0%, rgba(69, 200, 180, 0) 70%),
    rgba(255, 255, 255, 0.03);
}

.fv-tc__stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.fv-tc__stat b {
  font-size: 26px;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #ffffff;
}

.fv-tc__stat em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: #6fdcc6;
}

.fv-tc__stat-label {
  margin: 8px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(244, 247, 245, 0.42);
}

.fv-tc__spark {
  width: 100%;
  height: 48px;
  margin-top: 10px;
  display: block;
}

/* card payout */
.fv-tc__card--payout {
  border-color: rgba(69, 200, 180, 0.26);
  background:
    linear-gradient(160deg, rgba(69, 200, 180, 0.14) 0%, rgba(69, 200, 180, 0.02) 60%),
    rgba(255, 255, 255, 0.025);
}

.fv-tc__badge--pay {
  --fv-tc-brand: #45c8b4;
  --fv-tc-onbrand: #032723;
  --fv-tc-soft: rgba(69, 200, 180, 0.12);
  --fv-tc-line: rgba(69, 200, 180, 0.32);
}

.fv-tc__badge--pay .fv-tc__ico svg {
  fill: none;
  stroke: var(--fv-tc-onbrand);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-tc__amount {
  margin: 2px 0 8px;
  font-size: 17px;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.fv-tc__mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fv-tc__mini div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.fv-tc__mini dt {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(244, 247, 245, 0.42);
}

.fv-tc__mini dd {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* card video */
.fv-tc__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-bottom: 10px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background:
    radial-gradient(80% 80% at 50% 40%, rgba(255, 77, 77, 0.18) 0%, rgba(255, 77, 77, 0) 70%),
    linear-gradient(150deg, #171a20 0%, #08090d 100%);
  overflow: hidden;
}

.fv-tc__play {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.fv-tc__play svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  fill: #ff4d4d;
}

/* card citazione stampa */
.fv-tc__card--quote {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.fv-tc__qmark {
  display: block;
  margin-bottom: -10px;
  font-size: 30px;
  line-height: 1;
  color: rgba(69, 200, 180, 0.5);
}

.fv-tc__card--quote .fv-tc__text {
  font-size: 13px;
  font-style: italic;
  margin-bottom: 10px;
}

.fv-tc__qauthor {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 247, 245, 0.5);
}

/* card punteggio piattaforma */
.fv-tc__card--rating {
  text-align: left;
}

.fv-tc__score {
  margin: 4px 0 8px;
  font-size: 28px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #ffffff;
}

.fv-tc__score em {
  font-style: normal;
  font-size: 0.4em;
  font-weight: 500;
  color: rgba(244, 247, 245, 0.45);
  margin-left: 2px;
}

/* ── card video a tutta superficie ── */
.fv-tc__card--clip {
  position: relative;
  display: block;
  padding: 0;
  /* i ritratti 3/4 e 4/5 rendevano le clip molto piu' alte delle
     schede di testo: qui si accorciano un po' */
  aspect-ratio: 9 / 16;
  overflow: hidden;
  text-decoration: none;
  background: #05070c;
  /* la clip non e' un link: niente mano del cursore ne' selezione */
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

/* il tema forza height:auto sulle img: qui serve il riempimento pieno */
.fv-tc__clip-img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center 25%;
  transform: scale(1.04);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fv-tc__card--clip:hover .fv-tc__clip-img {
  transform: scale(1.1);
}

/* video in riproduzione dentro la card */
.fv-tc__clip-player {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none !important;
}

.fv-tc__card--clip.is-playing .fv-tc__clip-player {
  opacity: 1;
}

.fv-tc__card--clip.is-playing .fv-tc__clip-img {
  opacity: 0;
}

.fv-tc__card--clip.is-playing .fv-tc__clip-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
}

.fv-tc__clip-play {
  transition: transform 0.25s ease, opacity 0.3s ease;
}

.fv-tc__clip-player iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 178vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -30%);
  border: 0;
  pointer-events: none !important;
}

.fv-tc__clip-player video {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none !important;
}

/* nessun controllo a vista: le clip sono decorative, mute e in loop */
.fv-tc__clip-player video::-webkit-media-controls,
.fv-tc__clip-player video::-webkit-media-controls-enclosure,
.fv-tc__clip-player video::-webkit-media-controls-panel,
.fv-tc__clip-player video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

.fv-tc__clip-img {
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fv-tc__clip-shade {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(3, 7, 16, 0.35) 0%, rgba(3, 7, 16, 0.12) 42%, rgba(3, 7, 16, 0.92) 100%);
}

.fv-tc__badge--float {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
  z-index: 2;
  background: transparent;
}

.fv-tc__clip-play {
  display: none;
}

.fv-tc__clip-meta {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  gap: 2px;
}

.fv-tc__clip-meta b {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
}

.fv-tc__clip-meta em {
  font-style: normal;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.66);
}

@media (max-width: 1199px) {
  .fv-tc__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 1160px;
  }

  .fv-tc__col:nth-child(4) {
    display: none;
  }
}

@media (max-width: 767px) {
  .fv-tc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 960px;
    gap: 10px;
  }

  .fv-tc__track {
    gap: 10px;
  }

  .fv-tc__col:nth-child(3) {
    display: none;
  }

  /* colonne strette: in verticale il fotogramma era minuscolo,
     in 16/9 il video occupa tutta la larghezza della scheda */
  .fv-tc__card--clip {
    aspect-ratio: 16 / 9;
  }

  /* su mobile la colonna e' piu' corta: si sfuma anche in alto,
     cosi' le card entrano ed escono allo stesso modo da entrambi i lati */
  .fv-tc__grid::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 14%;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(0deg, rgba(3, 7, 16, 0) 0%, #02060f 92%);
  }

  .fv-tc__grid::after {
    height: 14%;
  }
}

@media (max-width: 479px) {
  /* due colonne anche sui telefoni: le schede si stringono un po'
     invece di ridursi a una fila sola */
  .fv-tc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 860px;
    gap: 8px;
  }

  .fv-tc__track {
    gap: 8px;
  }

  .fv-tc__card {
    padding: 11px;
    border-radius: 12px;
  }

  .fv-tc__text {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.5;
  }
}

/* ═══════════════════════════════════════════════════════════
   11. MEDIA — carosello video: laterali stretti, centrale grande
   che parte da solo in muto (sostituisce Trader Media Channel)
   ═══════════════════════════════════════════════════════════ */
.fv-mv {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-block: 100px;
  padding-block: clamp(60px, 7vw, 100px);
  scroll-margin-top: calc(var(--fv-header-offset, 120px) + 16px);
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(69, 200, 180, 0.08) 0%, rgba(69, 200, 180, 0) 60%),
    linear-gradient(180deg, #02060f 0%, #04091a 55%, #02060f 100%);
  color: #f4f7f5;
  overflow: hidden;
}

/* palco piu' stretto: il carosello non arriva ai bordi della pagina */
.fv-mv__inner {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 72px;
  padding-inline: clamp(16px, 4vw, 72px);
}

.fv-mv__head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 44px;
  margin: 0 auto clamp(30px, 3.4vw, 44px);
}

.fv-mv__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  border: 1px solid rgba(69, 200, 180, 0.26);
  border-radius: 999px;
  background: rgba(69, 200, 180, 0.08);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6fdcc6;
}

.fv-mv__title-main {
  margin: 0 0 12px;
  font-size: 46px;
  font-size: clamp(28px, 3.3vw, 46px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.1;
}

.fv-mv__sub {
  margin: 0;
  font-size: 16.5px;
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 1.6;
  color: rgba(244, 247, 245, 0.58);
}

/* ── palco ── */
.fv-mv__stage {
  display: flex;
  gap: 12px;
  height: 380px;
  height: clamp(260px, 30vw, 380px);
}

/* in scena solo tre slide: laterale · centrale · laterale */
.fv-mv__slide {
  position: relative;
  display: none;
  flex: 0 1 96px;
  min-width: 72px;
  border-radius: 22px;
  overflow: hidden;
  background: #05070c;
  contain: layout paint;
  backface-visibility: hidden;
  will-change: flex-basis;
  transition:
    flex-basis 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    flex-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* l'ordine visivo e' sempre laterale · centrale · laterale,
   qualunque sia la posizione nel DOM: cosi' il carosello gira in loop
   senza ritrovarsi le due slide strette dallo stesso lato */
.fv-mv__slide.is-prev { order: 1; }
.fv-mv__slide.is-active { order: 2; }
.fv-mv__slide.is-next { order: 3; }

.fv-mv__slide.is-prev,
.fv-mv__slide.is-next,
.fv-mv__slide.is-active {
  display: block;
}

.fv-mv__slide.is-active {
  flex: 1 1 auto;
}

/* il bottone invisibile sopra le slide laterali le porta in primo piano;
   sulla slide attiva sparisce, cosi' il click apre YouTube */
.fv-mv__pick {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.fv-mv__slide.is-active .fv-mv__pick {
  display: none;
}

.fv-mv__link {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: block;
  text-decoration: none;
  color: inherit;
}

.fv-mv__media {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}

/* le copertine hqdefault hanno le bande nere: le ritaglio con uno zoom */
.fv-mv__thumb.is-sd {
  transform: scale(1.42);
}

.fv-mv__slide.is-active .fv-mv__thumb.is-sd {
  transform: scale(1.36);
}

.fv-mv__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.5);
  transform: scale(1.06);
  transition:
    filter 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
}

.fv-mv__slide.is-active .fv-mv__thumb {
  filter: none;
  transform: none;
}

.fv-mv__slide.is-playing .fv-mv__thumb {
  opacity: 0;
}

.fv-mv__player {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.fv-mv__slide.is-playing .fv-mv__player {
  opacity: 1;
}

.fv-mv__player iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 178vh;      /* copre il riquadro mantenendo il 16:9 */
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}

.fv-mv__shade {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(2, 6, 15, 0.1) 0%, rgba(2, 6, 15, 0.35) 45%, rgba(2, 6, 15, 0.9) 100%);
}

/* ── testo sulla slide attiva ── */
.fv-mv__info {
  position: absolute;
  left: 30px;
  left: clamp(16px, 2.2vw, 30px);
  right: 30px;
  right: clamp(16px, 2.2vw, 30px);
  bottom: 24px;
  bottom: clamp(16px, 2vw, 24px);
  z-index: 2;
  display: grid;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.1s linear, transform 0.1s linear;
  pointer-events: none;
}

.fv-mv__slide.is-active .fv-mv__info {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease 0.32s,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.32s;
}

.fv-mv__place {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #0c1118;
  font-size: 12.5px;
  font-weight: 600;
}

.fv-mv__place i {
  font-style: normal;
  font-size: 14px;
  line-height: 1;
}

.fv-mv__title {
  font-size: 32px;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #ffffff;
}

.fv-mv__date {
  font-size: 13.5px;
  color: rgba(244, 247, 245, 0.62);
}

.fv-mv__watch {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.fv-mv__link:hover .fv-mv__watch {
  background: rgba(69, 200, 180, 0.9);
  border-color: transparent;
  color: #032723;
}

.fv-mv__watch svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* titolo verticale sulle slide strette */
.fv-mv__side {
  position: absolute;
  left: 50%;
  bottom: 22px;
  max-height: calc(100% - 52px);
  overflow: hidden;
  z-index: 2;
  transform: translateX(-50%);
  width: max-content;
  max-width: 300px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.86);
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.fv-mv__slide.is-active .fv-mv__side {
  opacity: 0;
}

.fv-mv__slide:not(.is-active):hover .fv-mv__thumb {
  filter: grayscale(0.6) brightness(0.65);
}

/* ── navigazione ── */

@media (max-width: 991px) {
  .fv-mv__stage {
    height: 290px;
    gap: 8px;
  }

  .fv-mv__slide {
    flex-basis: 72px;
    min-width: 56px;
    border-radius: 18px;
  }

  .fv-mv__side {
    font-size: 13px;
  }
}

@media (max-width: 575px) {
  .fv-mv__stage {
    height: 230px;
  }

  .fv-mv__slide {
    flex-basis: 56px;
    min-width: 46px;
  }

  .fv-mv__side {
    font-size: 12px;
    bottom: 16px;
  }
}

/* navigazione del carosello video */
.fv-mv__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.fv-mv__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 247, 245, 0.8);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.fv-mv__arrow:hover {
  background: rgba(69, 200, 180, 0.16);
  border-color: rgba(69, 200, 180, 0.4);
  color: #ffffff;
}

.fv-mv__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-mv__dots {
  display: flex;
  gap: 8px;
}

.fv-mv__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.fv-mv__dot.is-active {
  width: 26px;
  background: #45c8b4;
}

/* nessuna interazione con il player: niente controlli, niente overlay YouTube */
.fv-mv__player,
.fv-mv__player iframe {
  pointer-events: none !important;
}

.fv-mv__shade {
  pointer-events: none;
}

.fv-mv__guard {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   12. BENTO — piattaforme, asset, pagamenti, tecnologia
   ═══════════════════════════════════════════════════════════ */
.fv-bt {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-top: 44px;
  padding-top: clamp(28px, 3vw, 44px);
  padding-bottom: 84px;
  padding-bottom: clamp(56px, 5.5vw, 84px);
  background: linear-gradient(180deg, #02060f 0%, #04091a 50%, #02060f 100%);
  color: #f4f7f5;
}

.fv-bt__inner {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 48px;
  padding-inline: clamp(16px, 3vw, 48px);
}

.fv-bt__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 16px;
}

.fv-bt__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.fv-bt__card:hover {
  border-color: rgba(69, 200, 180, 0.3);
  transform: translateY(-3px);
}

.fv-bt__card--accent {
  border-color: rgba(69, 200, 180, 0.35);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(69, 200, 180, 0.4) 0%, rgba(47, 162, 147, 0.12) 60%),
    linear-gradient(165deg, #1f7d72 0%, #0d3b39 100%);
}

.fv-bt__body {
  position: relative;
  z-index: 2;
}

.fv-bt__title {
  margin: 0 0 4px;
  font-size: 22px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #ffffff;
}

.fv-bt__text {
  margin: 0;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(244, 247, 245, 0.62);
}

.fv-bt__card--accent .fv-bt__text {
  color: rgba(255, 255, 255, 0.78);
}

.fv-bt__art {
  position: relative;
  flex: 1 1 auto;
  margin-bottom: 22px;
  min-height: 120px;
}

/* occhiello e micro-etichette: danno struttura alle card */
.fv-bt__eyebrow {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6fdcc6;
}

.fv-bt__card--accent .fv-bt__eyebrow {
  color: rgba(255, 255, 255, 0.75);
}

.fv-bt__group-label {
  display: block;
  margin-bottom: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(244, 247, 245, 0.38);
}

.fv-bt__group {
  display: grid;
  gap: 0;
}

.fv-bt__group + .fv-bt__group {
  margin-top: 10px;
}

/* ── card piu' compatte ── */
.fv-bt__card {
  min-height: 270px;
  padding: 22px;
}

.fv-bt__art {
  min-height: 110px;
  margin-bottom: 18px;
}

.fv-bt__title {
  font-size: 20px;
  font-size: clamp(17px, 1.5vw, 20px);
}

.fv-bt__text {
  font-size: 13px;
}

/* ── 1. tecnologie: tessere chiare con i loghi a colori ── */
.fv-bt__art--platforms,
.fv-bt__art--pay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.fv-bt__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.fv-bt__logo {
  flex: 1 1 calc(33.333% - 6px);
  min-width: 104px;
  display: grid;
  place-items: center;
  height: 56px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.fv-bt__logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26);
}

/* loghi nei colori originali, dimensione ottica uniforme */
.fv-bt__logo img {
  max-width: 100%;
  max-height: 24px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* il file MT5 ha molto margine trasparente: gli lascio piu' spazio */
.fv-bt__logo img[src*="mt5"] {
  max-height: 38px;
}

.fv-bt__logo img[src*="RiseLogo"] {
  max-height: 20px;
}

.fv-bt__logos--pay .fv-bt__logo {
  flex: 1 1 calc(33.333% - 6px);
  height: 52px;
}

/* chip dei metodi non "brandizzati" */
.fv-bt__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.fv-bt__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(244, 247, 245, 0.86);
}

.fv-bt__dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #0c1118;
}

.fv-bt__dot svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-bt__dot.is-btc { background: linear-gradient(150deg, #f7c66a 0%, #e0952f 100%); }
.fv-bt__dot.is-usdt { background: linear-gradient(150deg, #6fe0b8 0%, #26a17b 100%); color: #ffffff; }
.fv-bt__dot.is-usdc { background: linear-gradient(150deg, #7cb8f5 0%, #2775ca 100%); color: #ffffff; }
.fv-bt__dot.is-sepa { background: linear-gradient(150deg, #a8b6f8 0%, #4a5fc1 100%); color: #ffffff; }
.fv-bt__dot.is-bank { background: rgba(255, 255, 255, 0.14); color: #f4f7f5; }
.fv-bt__dot.is-pay { background: rgba(255, 255, 255, 0.14); color: #f4f7f5; }

/* ── 2. asset: pillole allineate su tre righe ── */
.fv-bt__art--assets {
  display: grid;
  align-content: center;
  gap: 0;
  overflow: visible;
}

.fv-bt__pairs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  white-space: nowrap;
}

.fv-bt__pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(244, 247, 245, 0.9);
}

.fv-bt__coin {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  font-style: normal;
  color: #0c1118;
}

.fv-bt__coin-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.fv-bt__coin.is-btc { background: linear-gradient(150deg, #f7c66a 0%, #e0952f 100%); }
.fv-bt__coin.is-gold { background: linear-gradient(150deg, #f4d68a 0%, #c7a95f 100%); }
.fv-bt__coin.is-silver { background: linear-gradient(150deg, #e6ebef 0%, #a9b3bd 100%); }
.fv-bt__coin.is-eur { background: linear-gradient(150deg, #7c8cf8 0%, #3f52c4 100%); }
.fv-bt__coin.is-gbp { background: linear-gradient(150deg, #f28fa0 0%, #c34459 100%); }
.fv-bt__coin.is-idx { background: linear-gradient(150deg, #6fdcc6 0%, #2fa293 100%); }
.fv-bt__coin.is-ndx { background: linear-gradient(150deg, #7ccbf5 0%, #2f7fc0 100%); }
.fv-bt__coin.is-oil { background: linear-gradient(150deg, #9aa3ad 0%, #4c545d 100%); color: #f4f7f5; }

/* ── 4. payout: quadrante e numeri ── */
.fv-bt__art--payout {
  display: flex;
  align-items: center;
}

.fv-bt__speed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(69, 200, 180, 0.16) 0%, rgba(69, 200, 180, 0) 62%),
    rgba(255, 255, 255, 0.04);
}



.fv-bt__speed-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fv-bt__speed-list li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.fv-bt__speed-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.fv-bt__speed-list b {
  min-width: 30px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #6fdcc6;
}

.fv-bt__speed-list span {
  font-size: 11px;
  color: rgba(244, 247, 245, 0.6);
}

/* ── 5. bento "editoriale": griglia asimmetrica e art che sborda ──
   Le schede e i testi restano gli stessi: cambia solo il modo in cui
   l'illustrazione occupa la card (esce dai bordi, viene tagliata dal
   raggio della card) e come le card si distribuiscono sulle due righe. */
.fv-bt__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.fv-bt__grid > .fv-bt__card:nth-child(1) { grid-column: span 2; }
.fv-bt__grid > .fv-bt__card:nth-child(2) { grid-column: span 3; }
/* Payments sta stretta (poche tessere), Payouts prende il resto */
.fv-bt__grid > .fv-bt__card:nth-child(3) { grid-column: span 2; }
.fv-bt__grid > .fv-bt__card:nth-child(4) { grid-column: span 3; }

.fv-bt__card {
  --fv-bt-pad: 18px;
  --fv-bt-tile: 7px;
  min-height: 270px;
  padding: var(--fv-bt-pad);
  justify-content: flex-end;
}

/* l'art parte dal bordo alto della card e viene tagliata dai lati */
.fv-bt__art {
  margin: calc(var(--fv-bt-pad) * -1) calc(var(--fv-bt-pad) * -1) 8px;
  padding: var(--fv-bt-pad) 0 0;
  min-height: 0;
  overflow: hidden;
}

/* velo sotto al testo: l'art che sborda non disturba la lettura */
.fv-bt__body::before {
  content: "";
  position: absolute;
  top: -70px; right: calc(var(--fv-bt-pad) * -1); bottom: calc(var(--fv-bt-pad) * -1); left: calc(var(--fv-bt-pad) * -1);
  background: linear-gradient(180deg, rgba(2, 6, 15, 0) 0%, rgba(2, 6, 15, 0.72) 55%, rgba(2, 6, 15, 0.9) 100%);
  pointer-events: none;
  z-index: -1;
}

.fv-bt__card--accent .fv-bt__body::before {
  background: linear-gradient(180deg, rgba(13, 59, 57, 0) 0%, rgba(13, 59, 57, 0.6) 55%, rgba(13, 59, 57, 0.85) 100%);
}

/* le file di pillole escono dalla card, con taglio netto a destra */
.fv-bt__art--assets .fv-bt__pairs {
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  grid-auto-flow: column;
  grid-template-columns: none;
}

.fv-bt__art--assets {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 70%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 70%, rgba(0, 0, 0, 0) 100%);
}

/* ── i loghi: muro di tessere quadrate, tutte uguali ──
   Niente piu' tessere bianche di larghezza variabile: ogni marchio sta
   in una tessera scura della stessa dimensione, allineata a griglia. */
.fv-bt__logos {
  display: grid;
  grid-template-columns: repeat(var(--fv-bt-cols, 5), minmax(0, 1fr));
  gap: var(--fv-bt-tile);
  width: auto;
  padding-inline: var(--fv-bt-pad);
}

.fv-bt__logo {
  flex: none;
  min-width: 0;
  height: auto;
  aspect-ratio: 5 / 4;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

.fv-bt__logo:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

/* i marchi restano nei loro colori: li tengo su una pastiglia chiara
   interna, cosi' i logotipi scuri non spariscono sul fondo nero */
.fv-bt__logo img {
  max-height: 62%;
  max-width: 84%;
  padding: 6px 8px;
  border-radius: 8px;
  background: #ffffff;
}

.fv-bt__logo img[src*="mt5"] { max-height: 76%; padding: 2px 6px; }
.fv-bt__logo img[src*="RiseLogo"] { max-height: 46%; }

/* 1. tecnologie: una fila di tessere che scorre dentro la card */
.fv-bt__art--platforms {
  justify-content: center;
  gap: 10px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 12%, #000 88%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 12%, #000 88%, rgba(0, 0, 0, 0) 100%);
}

.fv-bt__marquee {
  display: flex;
  width: max-content;
  animation: fvBtMarquee 22s linear infinite;
}

@keyframes fvBtMarquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .fv-bt__marquee { animation: none; }
}

.fv-bt__art--platforms .fv-bt__logo img {
  width: 124px;
  height: 62px;
  object-fit: contain;
}

.fv-bt__art--platforms .fv-bt__logo {
  border: 0;
  background: transparent;
  padding: 8px;
  aspect-ratio: 1 / 1;
}

.fv-bt__art--platforms .fv-bt__logos {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 160px;
  justify-content: start;
  width: max-content;
  padding: 0 var(--fv-bt-tile) 0 0;
}

/* 2. asset: tre file sfalsate che scorrono fuori dalla card */
.fv-bt__art--assets {
  align-content: start;
  row-gap: 7px;
}

.fv-bt__art--assets .fv-bt__group + .fv-bt__group { margin-top: 0; }
.fv-bt__art--assets .fv-bt__group-label { margin-left: var(--fv-bt-pad); }

.fv-bt__art--assets .fv-bt__pair {
  padding: 4px 8px 4px 7px;
  font-size: 11.5px;
}

.fv-bt__art--assets .fv-bt__group:nth-child(1) .fv-bt__pairs { margin-left: calc(var(--fv-bt-pad) - 40px); }
.fv-bt__art--assets .fv-bt__group:nth-child(2) .fv-bt__pairs { margin-left: calc(var(--fv-bt-pad) - 16px); }
.fv-bt__art--assets .fv-bt__group:nth-child(3) .fv-bt__pairs { margin-left: calc(var(--fv-bt-pad) + 2px); }

/* 3. pagamenti: un unico muro di tessere, loghi e metodi allo stesso modo */
.fv-bt__art--pay {
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  justify-content: start;
  align-content: start;
  gap: var(--fv-bt-tile);
  padding-inline: var(--fv-bt-pad);
}

.fv-bt__art--pay .fv-bt__group-label {
  grid-column: 1 / -1;
  margin: 4px 0 0;
}

.fv-bt__art--pay .fv-bt__group-label:first-child { margin-top: 0; }

/* i due contenitori spariscono: le tessere entrano nella stessa griglia */
.fv-bt__art--pay .fv-bt__logos--pay,
.fv-bt__art--pay .fv-bt__chips {
  display: contents;
}

/* i metodi senza logo diventano tessere identiche: icona + nome sotto */
.fv-bt__art--pay .fv-bt__chip {
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  align-content: center;
  gap: 4px;
  aspect-ratio: 5 / 4;
  padding: 6px 4px;
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.055);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  color: rgba(244, 247, 245, 0.72);
}

.fv-bt__art--pay .fv-bt__dot {
  width: 24px;
  height: 24px;
}

.fv-bt__art--pay .fv-bt__dot-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

/* le tessere dei marchi sono identiche a quelle dei metodi */
.fv-bt__art--pay .fv-bt__logos--pay .fv-bt__logo {
  height: auto;
  aspect-ratio: 5 / 4;
}

.fv-bt__art--pay .fv-bt__logo img {
  max-height: 64%;
  max-width: 96%;
}

/* 4. payout: il pannello sborda a destra, come le altre card */
/* il riquadro non sborda piu' a destra: sta dentro la card con lo
   stesso margine che ha a sinistra */
.fv-bt__art--payout {
  padding-inline: var(--fv-bt-pad);
}

.fv-bt__art--payout .fv-bt__speed {
  border-radius: 18px;
  padding: 10px 14px;
}

@media (max-width: 991px) {
  .fv-bt__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fv-bt__grid > .fv-bt__card:nth-child(n) {
    grid-column: auto;
  }

  /* in colonna singola l'altezza la decide il contenuto: niente vuoti */
  .fv-bt__card {
    min-height: 0;
  }

  .fv-bt__art {
    min-height: 0;
    flex: 0 0 auto;
  }
}

@media (max-width: 575px) {
  .fv-bt__card {
    --fv-bt-pad: 20px;
    min-height: 360px;
  }

  .fv-bt__art--platforms .fv-bt__logo { min-width: 112px; height: 66px; }
  .fv-bt__art--pay .fv-bt__logos--pay .fv-bt__logo { min-width: 104px; height: 60px; }
}

@media (max-width: 575px) {
  .fv-bt__logo {
    flex-basis: calc(50% - 4px);
    min-width: 0;
  }

  .fv-bt__pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fv-bt__speed {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }
}

@media (max-width: 991px) {
  .fv-bt__grid {
    grid-template-columns: 1fr;
  }

  .fv-bt__card {
    min-height: 340px;
  }

  .fv-bt__device {
    left: 6%;
    right: 6%;
  }
}

@media (max-width: 575px) {
  .fv-bt__card {
    padding: 20px;
    min-height: 320px;
  }

  .fv-bt__pay-grid {
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  }
}

/* ── bento su mobile: in colonna singola il taglio laterale delle
   illustrazioni non serve piu' (non c'e' una griglia da riempire),
   quindi tutto rientra nei margini della card e le altezze le
   decide il contenuto. Ultimo blocco: annulla i min-height fissi
   ereditati dalle regole precedenti. ── */
@media (max-width: 767px) {
  .fv-bt__card {
    --fv-bt-pad: 18px;
    --fv-bt-tile: 6px;
    min-height: 0;
    padding: var(--fv-bt-pad);
  }

  .fv-bt__art {
    margin: 0 0 16px;
    padding-top: 0;
    min-height: 0;
  }

  /* il nastro dei loghi resta (il markup ne contiene due copie per
     il loop): si stringono solo le tessere e la sfumatura ai bordi */
  .fv-bt__art--platforms {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 8%, #000 92%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 8%, #000 92%, rgba(0, 0, 0, 0) 100%);
  }

  .fv-bt__art--platforms .fv-bt__logos {
    grid-auto-columns: 116px;
  }

  /* le righe di coppie restano su una riga sola (il markup ripete le
     stesse coppie per riempire il nastro: andando a capo si vedrebbero
     i doppioni), ma partono dal bordo della card invece che da fuori */
  .fv-bt__art--assets .fv-bt__group:nth-child(n) .fv-bt__pairs {
    margin-left: 0;
  }

  .fv-bt__art--assets .fv-bt__group-label {
    margin-left: 0;
  }

  .fv-bt__art--assets .fv-bt__pair {
    padding: 7px 12px 7px 7px;
    font-size: 12.5px;
  }

  /* muro di tessere pagamenti: 4 colonne fluide invece di 104px fissi */
  .fv-bt__art--pay {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-inline: 0;
  }

  .fv-bt__art--pay .fv-bt__chip {
    font-size: 10px;
  }

  /* le tessere carta avevano larghezza e altezza fisse: nella griglia
     fluida si sovrapponevano alle celle vicine */
  .fv-bt__art--pay .fv-bt__logos--pay .fv-bt__logo {
    min-width: 0;
    height: auto;
    aspect-ratio: 5 / 4;
  }

  /* il pannello payout rientra nella card */
  .fv-bt__art--payout {
    padding-left: 0;
    padding-right: 0;
  }

  .fv-bt__art--payout .fv-bt__speed {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    padding: 16px 18px;
    /* il fulmine resta di fianco ai dati, non sopra */
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
  }


  .fv-bt__art--payout }

/* ═══════════════════════════════════════════════════════════
   12b. DEBIT CARD — testo a sinistra, carta a destra.
   Sezione scura: sta in mezzo al gruppo scuro (bento → roadmap).
   ═══════════════════════════════════════════════════════════ */
.fv-dc {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding-block: 110px;
  padding-block: clamp(64px, 8vw, 110px);
  scroll-margin-top: calc(var(--fv-header-offset, 120px) + 16px);
  background:
    radial-gradient(64% 52% at 70% 24%, rgba(69, 200, 180, 0.11) 0%, rgba(69, 200, 180, 0) 72%),
    #02060f;
  color: #f4f7f5;
}

.fv-dc__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
  gap: clamp(28px, 5vw, 72px);
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 56px;
  padding-inline: clamp(16px, 3vw, 56px);
}

.fv-dc__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(69, 200, 180, 0.34);
  background: rgba(69, 200, 180, 0.12);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6fdcc6;
}

.fv-dc__title {
  margin: 0 0 12px;
  font-size: 44px;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.12;
}

.fv-dc__sub {
  margin: 0 0 24px;
  max-width: 46ch;
  font-size: 16.5px;
  font-size: clamp(14.5px, 1.1vw, 16.5px);
  line-height: 1.6;
  color: rgba(244, 247, 245, 0.68);
}

.fv-dc__list {
  display: grid;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.fv-dc__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 14px;
}

.fv-dc__ico {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(69, 200, 180, 0.26);
  background: rgba(69, 200, 180, 0.1);
  color: #56d6c1;
}

.fv-dc__ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-dc__list li:first-child .fv-dc__ico svg {
  fill: currentColor;
  stroke: none;
}

.fv-dc__list b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.fv-dc__list em {
  font-style: normal;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(244, 247, 245, 0.6);
}

.fv-dc__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.fv-dc__btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
  box-shadow: 0 10px 26px rgba(69, 200, 180, 0.28);
  font-size: 15px;
  font-weight: 600;
  color: #032723 !important;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fv-dc__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(69, 200, 180, 0.36);
}

.fv-dc__note {
  font-size: 13px;
  color: rgba(244, 247, 245, 0.5);
}

/* ── la carta: disegnata in CSS, nessuna immagine da caricare ── */
.fv-dc__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
}

.fv-dc__glow {
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69, 200, 180, 0.28) 0%, rgba(69, 200, 180, 0) 68%);
  filter: blur(6px);
  pointer-events: none;
}

.fv-dc__card {
  position: relative;
  display: grid;
  align-content: space-between;
  width: 380px;
  width: min(380px, 100%);
  aspect-ratio: 1.586;
  padding: 24px;
  padding: clamp(18px, 2vw, 24px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(86, 214, 193, 0.34) 0%, rgba(86, 214, 193, 0) 58%),
    linear-gradient(150deg, #0f2a2a 0%, #071522 52%, #05070c 100%);
  box-shadow:
    0 30px 70px rgba(2, 6, 15, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: rotate(-5deg);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fv-dc__visual:hover .fv-dc__card {
  transform: rotate(0deg);
}

.fv-dc__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fv-dc__brand {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.92);
}

/* simbolo contactless: tre archi stilizzati */
.fv-dc__wave {
  display: flex;
  align-items: center;
  gap: 2px;
}

.fv-dc__wave i {
  width: 4px;
  height: 10px;
  border-radius: 0 999px 999px 0;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-left: 0;
}

.fv-dc__wave i:nth-child(2) { height: 14px; }
.fv-dc__wave i:nth-child(3) { height: 18px; }

.fv-dc__chip {
  width: 42px;
  height: 31px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 100%),
    linear-gradient(140deg, #d8c07a 0%, #f2e4b4 45%, #b99a4c 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

/* chip EMV: piastrina dorata con i contatti incisi, come sul vero */
.fv-dc__card--rich .fv-dc__chip {
  position: relative;
  width: 40px;
  height: 30px;
  border-radius: 6px;
  background:
    linear-gradient(160deg, #f6ecc4 0%, #d9be79 38%, #f3e3ae 62%, #b3944a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(120, 92, 30, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* linee orizzontali: separano le tre fasce di contatti */
.fv-dc__card--rich .fv-dc__chip::before {
  content: "";
  position: absolute;
  top: 5px; right: 4px; bottom: 5px; left: 4px;
  border: 1px solid rgba(120, 92, 30, 0.5);
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(120, 92, 30, 0.5) calc(50% - 0.5px), rgba(120, 92, 30, 0.5) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* i due tagli orizzontali che formano i sei contatti */
.fv-dc__card--rich .fv-dc__chip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 33%;
  height: 34%;
  border-top: 1px solid rgba(120, 92, 30, 0.5);
  border-bottom: 1px solid rgba(120, 92, 30, 0.5);
}

.fv-dc__number {
  display: flex;
  gap: 14px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.9);
}

.fv-dc__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fv-dc__holder {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* due cerchi intrecciati, come i circuiti di pagamento */
.fv-dc__net {
  position: relative;
  width: 44px;
  height: 26px;
}

.fv-dc__net::before,
.fv-dc__net::after {
  content: '';
  position: absolute;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.fv-dc__net::before {
  left: 0;
  background: rgba(255, 255, 255, 0.5);
}

.fv-dc__net::after {
  right: 0;
  background: rgba(86, 214, 193, 0.7);
  mix-blend-mode: screen;
}

@media (max-width: 991px) {
  .fv-dc__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* la carta va sopra al testo: e' lei l'annuncio */
  .fv-dc__visual {
    order: -1;
    min-height: 0;
  }

  .fv-dc__card {
    width: 340px;
    width: min(340px, 86%);
    transform: rotate(-3deg);
  }
}

@media (max-width: 767px) {
  /* l'alone verde su schermo stretto veniva tagliato dal bordo e
     lasciava una banda netta: qui basta la tinta piatta */
  .fv-dc {
    background: #02060f;
  }

  .fv-dc__sub {
    margin-bottom: 20px;
  }

  .fv-dc__list {
    gap: 12px;
    margin-bottom: 22px;
  }

  .fv-dc__ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .fv-dc__ico svg {
    width: 16px;
    height: 16px;
  }

  .fv-dc__list b {
    font-size: 14px;
  }

  .fv-dc__list em {
    font-size: 12.5px;
  }

  .fv-dc__card {
    width: 320px;
    width: min(320px, 92%);
    border-radius: 16px;
  }

  .fv-dc__number {
    gap: 10px;
    font-size: 14px;
  }

  .fv-dc__btn {
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
  }

  .fv-dc__cta {
    gap: 10px;
  }

  .fv-dc__note {
    width: 100%;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   13. ROADMAP — orizzontale, con la linea che avanza fino a "now"
   Il passato resta compatto: l'attenzione va sul futuro.
   ═══════════════════════════════════════════════════════════ */
.fv-rm {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding-block: 110px;
  padding-block: clamp(64px, 8vw, 110px);
  scroll-margin-top: calc(var(--fv-header-offset, 120px) + 16px);
  /* Gli aloni restano lontani dai bordi e si spengono prima di
     arrivarci: sopra e sotto la sezione e' colore pieno, quindi il
     passaggio alle sezioni vicine non puo' produrre alcun taglio. */
  background:
    radial-gradient(52% 40% at 84% 32%, rgba(69, 200, 180, 0.11) 0%, rgba(69, 200, 180, 0) 68%),
    radial-gradient(46% 34% at 8% 72%, rgba(69, 200, 180, 0.07) 0%, rgba(69, 200, 180, 0) 70%),
    #f7faf9;
  color: #141415;
}

/* alone verde dietro alla parte "presente" della timeline */
.fv-rm__glow {
  position: absolute;
  top: 46%;
  left: 42%;
  width: 460px;
  height: 460px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69, 200, 180, 0.18) 0%, rgba(69, 200, 180, 0) 68%);
  pointer-events: none;
  z-index: 0;
}

.fv-rm__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 48px;
  padding-inline: clamp(16px, 3vw, 48px);
}

.fv-rm__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  margin-bottom: 60px;
  margin-bottom: clamp(40px, 4.5vw, 60px);
  padding-bottom: 28px;
  padding-bottom: clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid #14141514;
}

.fv-rm__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2fa293;
}

.fv-rm__title-main {
  margin: 0;
  font-size: 46px;
  font-size: clamp(28px, 3.3vw, 46px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.08;
}

.fv-rm__sub {
  margin: 0;
  font-size: 16px;
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.6;
  color: #141415a3;
}

/* ── binario ── */
.fv-rm__timeline {
  position: relative;
  margin-top: 34px;
  padding-top: 40px;
}

.fv-rm__rail {
  position: absolute;
  top: 15px;
  left: var(--fv-rm-rail-left, 0px);
  width: var(--fv-rm-rail-width, 100%);
  height: 3px;
  border-radius: 999px;
  background: #14141512;
  overflow: hidden;
}

.fv-rm__tail {
  position: absolute;
  top: 15px;
  left: calc(var(--fv-rm-rail-left, 0px) + var(--fv-rm-rail-width, 100%));
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #14141512 0%, rgba(20, 20, 21, 0) 100%);
}

.fv-rm__now-label {
  position: absolute;
  top: -6px;
  left: var(--fv-rm-now-x, 34%);
  transform: translate(-50%, -100%);
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #032723;
  white-space: nowrap;
  opacity: 0;
  box-shadow: 0 6px 16px rgba(69, 200, 180, 0.3);
  transition: opacity 0.5s ease 0.9s, left 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

/* codina che collega l'etichetta al nodo */
.fv-rm__now-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 8px;
  background: rgba(47, 162, 147, 0.5);
}

.fv-rm__timeline.is-live .fv-rm__now-label {
  opacity: 1;
}

.fv-rm__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2fa293 0%, #56d6c1 100%);
  box-shadow: 0 0 12px rgba(69, 200, 180, 0.45);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* quando la sezione entra in vista la linea corre fino al presente */
.fv-rm__timeline.is-live .fv-rm__fill {
  width: var(--fv-rm-progress, 34%);
}

@media (prefers-reduced-motion: reduce) {
  .fv-rm__fill {
    transition: none;
  }
}

.fv-rm__row {
  display: grid;
  /* prima colonna: le tappe gia' rilasciate, una sotto l'altra.
     La tappa in lavorazione e' la piu' larga: e' il presente */
  grid-template-columns: 0.86fr 1.34fr 0.96fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fv-rm__step {
  position: relative;
}

/* il centro del pallino coincide con il centro della linea:
   padding-top del binario 40px, linea a 16,5px -> top = -23,5px */
.fv-rm__dot {
  position: absolute;
  top: -23.5px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #f7faf9;
  border: 2px solid #14141524;
  box-shadow: 0 0 0 5px #f7faf9;
}

.fv-rm__dot-label {
  position: absolute;
  top: -47px;
  left: 50%;
  transform: translate(-50%, -100%);
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #14141514;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #141415;
  white-space: nowrap;
  pointer-events: none;
}

.fv-rm__dot-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 16px;
  background: rgba(20, 20, 21, 0.28);
}

.fv-rm__step.is-done .fv-rm__dot {
  background: #2fa293;
  border-color: #2fa293;
}

.fv-rm__step.is-now .fv-rm__dot {
  background: #45c8b4;
  border-color: #45c8b4;
  box-shadow: 0 0 0 6px rgba(69, 200, 180, 0.18);
}

.fv-rm__timeline.is-live .fv-rm__step.is-now .fv-rm__dot::after {
  content: '';
  position: absolute;
  top: -6px; right: -6px; bottom: -6px; left: -6px;
  border-radius: 50%;
  border: 2px solid rgba(69, 200, 180, 0.5);
  animation: fvRmPulse 2.6s ease-out infinite;
  animation-delay: 1s;
}

@keyframes fvRmPulse {
  0% { transform: scale(0.8); opacity: 0.9; }
  70% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fv-rm__timeline.is-live .fv-rm__step.is-now .fv-rm__dot::after { animation: none; }
}

/* ── passato: compatto e defilato ── */
.fv-rm__done {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px dashed #14141520;
  border-radius: 16px;
  background: transparent;
  opacity: 0.72;
  transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.fv-rm__done:hover {
  opacity: 1;
  background: #ffffff;
  border-color: rgba(47, 162, 147, 0.28);
}

.fv-rm__done-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fv-rm__check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2fa293;
}

.fv-rm__check svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-rm__done-top b {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #2fa293;
}

.fv-rm__flag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fv-teal-050, #e8f6f4);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2fa293;
}

.fv-rm__done-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #141415;
}

.fv-rm__done-tags {
  font-size: 12px;
  line-height: 1.45;
  color: #14141599;
}

/* nella colonna delle tappe rilasciate i blocchi si impilano */
.fv-rm__step.is-done {
  display: grid;
  align-content: start;
  gap: 16px;
}

/* descrizione breve sotto al titolo di una tappa gia' rilasciata */
.fv-rm__done-text {
  display: block;
  margin: 2px 0 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #141415a8;
}

/* ── presente e futuro: card piene ── */
.fv-rm__card {
  height: 100%;
  padding: 20px;
  border: 1px solid #14141514;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(20, 32, 30, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.fv-rm__card:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 162, 147, 0.3);
  box-shadow: 0 20px 46px rgba(20, 32, 30, 0.11);
}

/* la card del presente e' anche piu' grande: piu' respiro dentro,
   titolo e testo di un gradino sopra alle altre */
.fv-rm__step.is-now .fv-rm__card {
  padding: 26px;
  border-color: rgba(47, 162, 147, 0.35);
  box-shadow: 0 18px 44px rgba(47, 162, 147, 0.16);
}

.fv-rm__step.is-now .fv-rm__icon {
  width: 42px;
  height: 42px;
}

.fv-rm__step.is-now .fv-rm__title {
  font-size: 23px;
  font-size: clamp(19px, 1.7vw, 23px);
}

.fv-rm__step.is-now .fv-rm__text {
  font-size: 14.5px;
}

.fv-rm__card {
  position: relative;
  overflow: hidden;
}

.fv-rm__step.is-now .fv-rm__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #56d6c1 0%, #2fa293 100%);
}

.fv-rm__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.fv-rm__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--fv-teal-050, #e8f6f4);
  color: #2fa293;
}

.fv-rm__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-rm__step.is-now .fv-rm__icon {
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
  color: #032723;
  box-shadow: 0 8px 20px rgba(69, 200, 180, 0.3);
}

.fv-rm__q {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #14141566;
}

.fv-rm__status {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #14141514;
  background: #f2f6f5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #14141566;
  white-space: nowrap;
}

.fv-rm__step.is-now .fv-rm__status {
  border-color: transparent;
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
  color: #032723;
}

.fv-rm__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.2;
  color: #141415;
}

.fv-rm__text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #141415a3;
}

.fv-rm__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fv-rm__tags span {
  padding: 5px 11px;
  border: 1px solid #14141514;
  border-radius: 999px;
  background: #f7faf9;
  font-size: 11.5px;
  font-weight: 500;
  color: #141415a3;
}

@media (max-width: 1199px) {
  .fv-rm__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  /* senza il binario le targhette del periodo non hanno piu' una
     linea su cui appoggiarsi: restavano a fluttuare sopra le card
     (il periodo e' comunque ripetuto dentro la card, in .fv-rm__q) */
  .fv-rm__rail,
  .fv-rm__dot,
  .fv-rm__dot-label,
  .fv-rm__now-label,
  .fv-rm__glow {
    display: none;
  }

  .fv-rm__timeline {
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  .fv-rm__head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .fv-rm__row {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   14. FAQ — sezione chiara, accordion + riquadro supporto
   ═══════════════════════════════════════════════════════════ */
.fv-fq {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-block: 110px;
  padding-block: clamp(64px, 8vw, 110px);
  scroll-margin-top: calc(var(--fv-header-offset, 120px) + 16px);
  background:
    radial-gradient(55% 40% at 12% 0%, rgba(69, 200, 180, 0.1) 0%, rgba(69, 200, 180, 0) 60%),
    #ffffff;
  color: #141415;
}

.fv-fq__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 48px;
  padding-inline: clamp(16px, 3vw, 48px);
}

.fv-fq__head {
  max-width: 640px;
  margin-bottom: 48px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.fv-fq__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2fa293;
}

.fv-fq__title {
  margin: 0 0 12px;
  font-size: 46px;
  font-size: clamp(28px, 3.3vw, 46px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.1;
}

.fv-fq__sub {
  margin: 0;
  font-size: 16.5px;
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 1.6;
  color: #141415a3;
}

.fv-fq__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 40px;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

/* ── accordion ── */
.fv-fq__list {
  border-top: 1px solid #14141514;
}

.fv-fq__item {
  border-bottom: 1px solid #14141514;
  transition: background 0.25s ease;
}

.fv-fq__q {
  margin: 0;
}

.fv-fq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 22px 14px 22px 4px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 18.5px;
  font-size: clamp(16px, 1.4vw, 18.5px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.35;
  text-align: left;
  color: #141415;
  cursor: pointer;
  transition: color 0.2s ease;
}

.fv-fq__btn:hover {
  color: #2fa293;
}

.fv-fq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #14141518;
  background: #f7faf9;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.35s ease;
}

.fv-fq__sign::before,
.fv-fq__sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.6px;
  border-radius: 2px;
  background: #141415;
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}

.fv-fq__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.fv-fq__item.is-open .fv-fq__sign {
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
  border-color: transparent;
  transform: rotate(180deg);
}

.fv-fq__item.is-open .fv-fq__sign::before,
.fv-fq__item.is-open .fv-fq__sign::after {
  background: #032723;
}

.fv-fq__item.is-open .fv-fq__sign::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.fv-fq__a {
  overflow: hidden;
}

.fv-fq__a p {
  margin: 0;
  padding: 0 56px 24px 4px;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.65;
  color: #141415a3;
}

/* ── riquadro supporto ── */
.fv-fq__aside {
  position: sticky;
  top: calc(var(--fv-header-offset, 120px) + 20px);
  padding: 28px 26px;
  border: 1px solid #14141514;
  border-radius: 22px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(69, 200, 180, 0.16) 0%, rgba(69, 200, 180, 0) 66%),
    #f7faf9;
  text-align: center;
}

.fv-fq__aside-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #14141514;
  color: #2fa293;
  box-shadow: 0 10px 24px rgba(20, 32, 30, 0.08);
}

.fv-fq__aside-ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-fq__aside-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.022em;
}

.fv-fq__aside-text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #141415a3;
}

.fv-fq__aside-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 20px;
  border-radius: 12px;
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
  color: #032723 !important;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 24px rgba(69, 200, 180, 0.24);
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.fv-fq__aside-btn:hover {
  filter: brightness(1.05);
}

.fv-fq__aside-note {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  color: #14141566;
}

@media (max-width: 991px) {
  .fv-fq__body {
    grid-template-columns: 1fr;
  }

  .fv-fq__aside {
    position: static;
  }
}

@media (max-width: 575px) {
  .fv-fq__btn {
    padding: 18px 4px;
    gap: 12px;
  }

  .fv-fq__a p {
    padding-right: 34px;
  }
}

/* ═══════════════════════════════════════════════════════════
   15. SHOWS — vetrina serie video con selettore in basso
   ═══════════════════════════════════════════════════════════ */
.fv-sh {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding: 96px 0 120px;
  padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 8vw, 120px);
  scroll-margin-top: calc(var(--fv-header-offset, 120px) + 16px);
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(69, 200, 180, 0.1) 0%, rgba(69, 200, 180, 0) 62%),
    radial-gradient(58% 40% at 85% 82%, rgba(69, 200, 180, 0.08) 0%, rgba(69, 200, 180, 0) 70%),
    #f7faf9;
  color: #141415;
}

.fv-sh__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 48px;
  padding-inline: clamp(16px, 3vw, 48px);
}

.fv-sh__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 44px;
  margin: 0 auto clamp(28px, 3.4vw, 44px);
}

.fv-sh__heading {
  margin: 0 0 12px;
  font-size: 46px;
  font-size: clamp(28px, 3.3vw, 46px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.12;
}

.fv-sh__sub {
  margin: 0;
  font-size: 16.5px;
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 1.6;
  color: #141415a3;
}

/* ── palco ── */
.fv-sh__stage {
  position: relative;
  border-radius: 26px;
  overflow: visible;
  max-width: 1120px;
  margin-inline: auto;
  aspect-ratio: 16 / 6.5;
  min-height: 320px;
}

.fv-sh__media {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #05070c;
  box-shadow: 0 30px 70px rgba(20, 32, 30, 0.16);
}

.fv-sh__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease;
}

/* video caricato dal sito, al posto dell'embed */
.fv-sh__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #05070c;
}

.fv-sh__media.is-playing .fv-sh__thumb {
  opacity: 0;
}

.fv-sh__player {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none !important;
}

.fv-sh__media.is-playing .fv-sh__player {
  opacity: 1;
}

.fv-sh__player iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 178vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none !important;
}

.fv-sh__shade {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 8, 16, 0.28) 0%, rgba(4, 8, 16, 0.5) 45%, rgba(4, 8, 16, 0.85) 100%);
}

/* ── testo al centro ── */
.fv-sh__overlay {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: 880px;
  width: min(880px, 86%);
  text-align: center;
  color: #ffffff;
}

.fv-sh__kicker {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82);
}

.fv-sh__title {
  margin: 0 0 22px;
  font-size: 46px;
  font-size: clamp(24px, 3.2vw, 46px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: #ffffff;
}

.fv-sh__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff !important;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.fv-sh__btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.fv-sh__btn:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #0c1118 !important;
}

/* ── selettore serie ── */
.fv-sh__cards {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  display: grid;
  grid-auto-flow: column;
  gap: 16px;
  width: 1020px;
  width: min(1020px, 92%);
}

.fv-sh__card {
  position: relative;
  min-height: 108px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 16px;
  background: #0c1118;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 18px 40px rgba(20, 32, 30, 0.24);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.fv-sh__card:hover {
  transform: translateY(-3px);
}

.fv-sh__card.is-active {
  border-color: #45c8b4;
  box-shadow: 0 20px 44px rgba(69, 200, 180, 0.3);
}

.fv-sh__card-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  filter: grayscale(0.35);
  transform: scale(1.25);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.fv-sh__card.is-active .fv-sh__card-bg {
  opacity: 0.8;
  filter: none;
}

.fv-sh__card::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, rgba(6, 10, 18, 0.94) 0%, rgba(6, 10, 18, 0.7) 52%, rgba(6, 10, 18, 0.25) 100%);
}

.fv-sh__card-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  padding: 18px 16px;
}

.fv-sh__card-body b {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #ffffff;
}

.fv-sh__card-body em {
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.66);
  max-width: 22ch;
}

@media (max-width: 767px) {
  /* su mobile niente alone verde dietro la sezione: tinta piatta */
  .fv-sh {
    background: #f7faf9;
  }
}

@media (max-width: 991px) {
  .fv-sh__stage {
    aspect-ratio: 16 / 9;
  }

  .fv-sh__cards {
    width: 94%;
    gap: 10px;
    bottom: -32px;
  }

  .fv-sh__card {
    min-height: 92px;
  }

  .fv-sh__card-body {
    padding: 14px 12px;
  }

  .fv-sh__card-body em {
    display: none;
  }
}

@media (max-width: 575px) {
  /* il min-height di 320px combinato con l'aspect-ratio forzava il
     palco a 480px di larghezza, facendolo sfondare fuori schermo.
     Su mobile il palco diventa una griglia: video + testo nella
     stessa cella, selettore serie nella riga sotto. */
  .fv-sh__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    aspect-ratio: auto;
    min-height: 0;
  }

  .fv-sh__media {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    grid-area: 1 / 1;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
  }

  /* testo ancorato in basso: al centro copriva il volto nella
     miniatura e mandava il bottone fuori dal riquadro */
  /* il testo lascia libera la fascia bassa: li' passa il pulsante,
     che sporge dal bordo del video */
  .fv-sh__overlay {
    position: relative;
    grid-area: 1 / 1;
    align-self: end;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    padding: 0 16px 52px;
    text-align: left;
  }

  .fv-sh__kicker {
    margin-bottom: 4px;
    font-size: 12px;
  }

  .fv-sh__title {
    margin-bottom: 12px;
    font-size: 19px;
    line-height: 1.2;
  }

  .fv-sh__btn {
    padding: 9px 16px;
    font-size: 13px;
  }

  .fv-sh__shade {
    background: linear-gradient(180deg, rgba(4, 8, 16, 0.18) 0%, rgba(4, 8, 16, 0.55) 45%, rgba(4, 8, 16, 0.92) 100%);
  }

  /* le tre serie diventano una riga scorrevole invece di tre
     blocchi impilati che allungavano la sezione */
  .fv-sh__cards {
    position: static;
    grid-area: 2 / 1;
    transform: none;
    display: flex;
    flex-wrap: nowrap;
    width: auto;
    margin: 14px -16px 0;
    padding: 4px 16px;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* senza questo lo snap allinea la card al bordo del contenitore
       ignorando il padding, e la prima resta tagliata */
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .fv-sh__cards::-webkit-scrollbar {
    display: none;
  }

  .fv-sh__card {
    flex: 0 0 62%;
    min-height: 0;
    scroll-snap-align: start;
    box-shadow: 0 10px 24px rgba(20, 32, 30, 0.18);
  }

  .fv-sh__card:hover {
    transform: none;
  }

  .fv-sh__card-body {
    padding: 12px 14px;
  }

  .fv-sh__card-body b {
    font-size: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════
   16. RACCORDI TRA SEZIONI — passaggi chiaro/scuro morbidi
   Ogni sezione che cambia tono rispetto alla precedente sale
   sopra di essa con gli angoli arrotondati, come un foglio.
   ═══════════════════════════════════════════════════════════ */
.fv-eco,
.fv-pr,
.fv-sh {
  margin-top: -44px;
  border-radius: 44px 44px 0 0;
  overflow: hidden;
}

/* la sezione FAQ chiara chiude sul fondo scuro della pagina */
.fv-fq {
  border-radius: 0 0 44px 44px;
  overflow: hidden;
}

/* dentro il gruppo scuro e dentro quello chiaro nessun taglio:
   le sezioni si passano lo stesso colore ai bordi */
.fv-how,
.fv-tc,
.fv-mv,
.fv-bt,
.fv-md,
.fv-rm {
  border-radius: 0;
}

/* la sezione FAQ e' bianca in mezzo a due sezioni f7faf9:
   sfumo i bordi per non creare gradini */
.fv-fq {
  background:
    radial-gradient(55% 40% at 12% 0%, rgba(69, 200, 180, 0.1) 0%, rgba(69, 200, 180, 0) 60%),
    linear-gradient(180deg, #f7faf9 0%, #ffffff 12%, #ffffff 88%, #f7faf9 100%);
}

/* piccola pausa visiva prima della striscia partner */
.tf-brand {
  padding-top: 18px;
}

@media (max-width: 767px) {
  .fv-eco,
  .fv-pr,
  .fv-sh {
    margin-top: -24px;
    border-radius: 24px 24px 0 0;
  }

  /* al confine fra ecosistema e "how it works" finivano due aloni
     adiacenti, uno in fondo alla prima sezione e uno in cima alla
     seconda: sullo schermo stretto si tagliavano a vicenda creando
     uno scalino. Ne resta solo quello in alto, il fondo e' lo stesso
     colore in entrambe e il passaggio diventa continuo. */
  .fv-eco {
    background:
      radial-gradient(80% 40% at 85% 0%, rgba(69, 200, 180, 0.12) 0%, rgba(69, 200, 180, 0) 62%),
      #f7faf9;
  }

  .fv-how {
    background: #f7faf9;
  }

  /* l'alone in basso a sinistra sporgeva di 120px oltre la sezione e
     l'overflow lo tagliava di netto proprio sul confine: qui resta
     tutto dentro e si spegne da solo prima del bordo */
  .fv-eco__orb--2 {
    bottom: 48px;
    left: -110px;
  }

  .fv-fq {
    border-radius: 0 0 24px 24px;
  }
}

/* ═══════════════════════════════════════════════════════════
   17. MEGA MENU "PRODUCTS" — elenco challenge + riquadro promo
   ═══════════════════════════════════════════════════════════ */
.fv-mega {
  position: static;
}

.fv-mega__toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border: 0;
  cursor: pointer;
}

.fv-mega__caret svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.fv-mega.is-open .fv-mega__caret svg {
  transform: rotate(180deg);
}

/* ── pannello ── */
.fv-mega__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, -8px);
  width: 880px;
  width: min(880px, calc(100vw - 32px));
  min-width: 320px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background: rgba(7, 14, 27, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.22s ease;
  z-index: 30;
}

.fv-mega.is-open .fv-mega__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* ── voci ── */
.fv-mega__list {
  display: grid;
  gap: 2px;
  align-content: start;
}

.fv-mega__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.fv-mega__item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.fv-mega__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(69, 200, 180, 0.14);
  color: #6fdcc6;
}

.fv-mega__ico svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-mega__txt {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.fv-mega__txt b {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #ffffff;
}

.fv-mega__txt em {
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(244, 247, 245, 0.55);
}

/* ── riquadro promo ── */
.fv-mega__promo {
  position: relative;
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid rgba(69, 200, 180, 0.22);
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(69, 200, 180, 0.28) 0%, rgba(69, 200, 180, 0) 62%),
    linear-gradient(165deg, rgba(16, 46, 48, 0.9) 0%, rgba(6, 14, 26, 0.9) 100%);
  overflow: hidden;
}

/* alone in alto a destra, dà profondità al riquadro */
.fv-mega__promo::after {
  content: '';
  position: absolute;
  top: -70px;
  right: -60px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69, 200, 180, 0.22) 0%, rgba(69, 200, 180, 0) 70%);
  pointer-events: none;
}

.fv-mega__promo > * {
  position: relative;
  z-index: 1;
}

.fv-mega__promo-chip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(69, 200, 180, 0.3);
  background: rgba(69, 200, 180, 0.1);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6fdcc6;
}

/* pallino che pulsa: fa capire che i payout sono "vivi" */
.fv-mega__promo-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #45c8b4;
  box-shadow: 0 0 0 0 rgba(69, 200, 180, 0.6);
  animation: fvMegaPulse 2.4s ease-out infinite;
}

@keyframes fvMegaPulse {
  0% { box-shadow: 0 0 0 0 rgba(69, 200, 180, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(69, 200, 180, 0); }
  100% { box-shadow: 0 0 0 0 rgba(69, 200, 180, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .fv-mega__promo-chip i { animation: none; }
}

.fv-mega__promo-title {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #ffffff;
}

.fv-mega__promo-title em {
  font-style: normal;
  color: #6fdcc6;
}

.fv-mega__promo-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(244, 247, 245, 0.55);
}

/* mini ricevuta */
.fv-mega__promo-card {
  display: grid;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
}

.fv-mega__promo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(244, 247, 245, 0.7);
}

.fv-mega__promo-row b {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.fv-mega__promo-ok {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #45c8b4;
}

.fv-mega__promo-ok svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #032723;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-mega__promo-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.fv-mega__promo-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #56d6c1 0%, #35b6a2 100%);
}

.fv-mega__promo-legend {
  font-size: 11.5px;
  color: rgba(244, 247, 245, 0.5);
}

.fv-mega__promo-legend b {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.fv-mega__promo-legend em {
  font-style: normal;
  opacity: 0.45;
  margin: 0 4px;
}

/* tre punti che riempiono il riquadro e dicono qualcosa in piu' */
.fv-mega__promo-list {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.fv-mega__promo-list li {
  position: relative;
  padding-left: 24px;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(244, 247, 245, 0.72);
}

.fv-mega__promo-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fdcc6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E")
      center / 10px 10px no-repeat,
    rgba(69, 200, 180, 0.16);
}

.fv-mega__promo-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 11px 18px;
  border-radius: 11px;
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
  color: #032723 !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 22px rgba(69, 200, 180, 0.22);
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.fv-mega__promo-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.22s ease;
}

.fv-mega__promo-btn:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 14px 28px rgba(69, 200, 180, 0.3);
}

.fv-mega__promo-btn:hover svg {
  transform: translateX(3px);
}

@media (max-width: 1199px) {
  .fv-mega__panel {
    width: 720px;
    width: min(720px, calc(100vw - 24px));
    min-width: 300px;
    grid-template-columns: 1fr;
  }

  .fv-mega__promo {
    padding: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════
   18. HEADER — piu' sottile e barra promo che si ritira
   dopo l'hero (classe .fv-compact da js/pages.js)
   ═══════════════════════════════════════════════════════════ */

/* La barra promo non viene piu' "schiacciata" (animare max-height e
   padding costringe il browser a rifare il layout a ogni frame, ed e'
   quello che faceva scattare il passaggio hero -> sezione sotto).
   Ora l'header intero scorre in alto con una transform: zero layout. */
.tf-header {
  --fv-promo-h: 36px;
  transform: translate3d(0, 0, 0);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.tf-header.fv-compact {
  transform: translate3d(0, calc(var(--fv-promo-h) * -1), 0);
}

.tf-header .promo-banner {
  transition: opacity 0.25s ease;
}

.tf-header.fv-compact .promo-banner {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .tf-header {
    transition: none;
  }
}

/* header piu' sottile: agisco sul padding della pillola, non sui bottoni */
.tf-header > .container > .row {
  margin-top: 8px !important;
  padding: 3px 8px !important;
  border-radius: 14px;
}

.tf-header .logo-site img {
  width: 140px;
}

/* i bottoni restano della misura del tema: qui stringo solo la pillola */
.tf-header .container > .row > [class*="col-"] {
  display: flex;
  align-items: center;
}

.tf-header .tf-btn .text-body-3 {
  font-size: 14px !important;
}

/* l'offset delle ancore segue l'header piu' basso */
:root {
  --fv-header-offset: 92px;
}

@media (max-width: 991px) {
  .tf-header > .container > .row {
    margin-top: 6px !important;
    padding: 3px 6px !important;
    border-radius: 12px;
  }

  .tf-header .logo-site img {
    width: 126px;
  }
}

/* La voce Products non fa parte dello scrollspy del tema: niente
   indicatore che le si appoggia sopra durante lo scroll, e nessuno
   stato "attivo" residuo sul pulsante. */
.fv-mega {
  position: static;
  z-index: 1;
}

.tf-header .main-nav_menu .fv-mega__toggle.active,
.tf-header .main-nav_menu .fv-mega__toggle:focus {
  background: transparent !important;
}

/* stessa forma delle altre voci: rettangolo con angoli arrotondati */
.tf-header .main-nav_menu .fv-mega__toggle:hover,
.fv-mega.is-open .fv-mega__toggle {
  background: rgba(255, 255, 255, 0.07) !important;
  border-radius: 8px !important;
}

/* ═══════════════════════════════════════════════════════════
   19. DISCLAIMER — la barra in basso si ritira dopo l'hero
   ═══════════════════════════════════════════════════════════ */
.simulated-disclaimer-bar {
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
  will-change: transform;
}

body.fv-disclaimer-away .simulated-disclaimer-bar {
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  pointer-events: none;
}

/* niente spazio riservato in fondo quando la barra e' via */
body.fv-disclaimer-away {
  padding-bottom: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .simulated-disclaimer-bar {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   20. FOOTER — stessa struttura, veste nuova
   ═══════════════════════════════════════════════════════════ */
.tf-footer {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(60% 45% at 15% 0%, rgba(69, 200, 180, 0.1) 0%, rgba(69, 200, 180, 0) 60%),
    linear-gradient(180deg, #04091a 0%, #02060f 100%);
  color: #f4f7f5;
}

.tf-footer .footer-body > .container {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: transparent !important;
  max-width: 1240px !important;
  padding-inline: 48px !important;
  padding-inline: clamp(16px, 3vw, 48px) !important;
}

.tf-footer .footer-modern {
  padding: 64px 0 24px !important;
  padding: clamp(40px, 5vw, 64px) 0 24px !important;
}

.tf-footer .footer-modern_top {
  gap: 56px;
  gap: clamp(28px, 4vw, 56px);
}

/* colonna marchio */
.tf-footer .footer-modern_logo img {
  width: 150px;
  height: auto;
}

.tf-footer .footer-modern_text {
  margin-top: 16px;
  max-width: 38ch;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(244, 247, 245, 0.55);
}

/* social come pastiglie */
.tf-footer .footer-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.tf-footer .footer-social-link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.tf-footer .footer-social-link:hover {
  background: rgba(69, 200, 180, 0.14);
  border-color: rgba(69, 200, 180, 0.35);
  transform: translateY(-2px);
}

.tf-footer .footer-social-icon img {
  width: 17px;
  height: 17px;
  opacity: 0.85;
}

/* colonne link */
.tf-footer .footer-heading {
  margin-bottom: 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none;
  color: #ffffff !important;
}

.tf-footer .footer-menu-list {
  display: grid;
  gap: 9px;
}

.tf-footer .footer-menu-list a {
  position: relative;
  font-size: 13.5px !important;
  line-height: 1.4;
  color: rgba(244, 247, 245, 0.62) !important;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.tf-footer .footer-menu-list a:hover {
  color: #ffffff !important;
  padding-left: 4px;
}

.tf-footer .footer-community-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.tf-footer .footer-community-link img {
  width: 15px;
  height: 15px;
  opacity: 0.7;
}

.tf-footer .footer-community-link:hover img {
  opacity: 1;
}

/* barra finale */
.tf-footer .footer-modern_bottom {
  margin-top: 44px;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.tf-footer .footer-modern_legal p {
  font-size: 12.5px;
  color: rgba(244, 247, 245, 0.45);
}

.tf-footer .footer-modern_disclaimer p,
.tf-footer .footer-disclaimer_text {
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  color: rgba(244, 247, 245, 0.34) !important;
}

.tf-footer .footer-disclaimer_toggle {
  margin-top: 10px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 12px;
  color: rgba(244, 247, 245, 0.55) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.tf-footer .footer-disclaimer_toggle:hover {
  background: none !important;
  border: 0 !important;
  color: rgba(244, 247, 245, 0.85) !important;
}

.tf-footer .footer-inner_link {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.tf-footer .footer-inner_link a {
  font-size: 12.5px;
  color: rgba(244, 247, 245, 0.5);
  transition: color 0.2s ease;
}

.tf-footer .footer-inner_link a:hover {
  color: #6fdcc6;
}

/* ═══════════════════════════════════════════════════════════
   COMPATIBILITA' SAFARI / iOS — background-clip sui titoli
   Il tema ritaglia il gradiente sul testo con il solo
   `background-clip: text` non prefissato: Chrome lo applica,
   Safari (fino alla 18.1, iPhone compresi) no. Li' il gradiente
   restava dipinto sull'intero riquadro del titolo e sembrava
   che i testi avessero uno sfondo diverso dalla sezione.
   ═══════════════════════════════════════════════════════════ */
.s-title,
.text-bg-linear,
.text-change_rotating,
.hero-static-model,
.wg-plan .price-amount {
  -webkit-background-clip: text;
}

/* ═══════════════════════════════════════════════════════════
   ECOSYSTEM — rifinitura su schermi stretti
   Blocco in coda: sopra ci sono media query piu' vecchie sulle
   stesse classi e devono perdere il confronto per ordine.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  .fv-eco__head {
    padding: 24px 16px 18px;
  }

  .fv-eco__head::after {
    left: 16px;
    right: 16px;
  }

  .fv-eco__eyebrow {
    margin-bottom: 10px;
    font-size: 10.5px;
    letter-spacing: 0.12em;
  }

  .fv-eco__title {
    margin-bottom: 12px;
    font-size: 26px;
    line-height: 1.18;
    letter-spacing: -0.025em;
  }

  .fv-eco__sub {
    font-size: 14.5px;
    line-height: 1.55;
  }

  .fv-eco__tabs-label {
    padding: 14px 16px 0;
    font-size: 10.5px;
  }

  .fv-eco__tabs {
    padding: 10px 16px 12px;
    scroll-padding-inline: 16px;
  }

  .fv-eco__tab {
    padding: 9px 13px;
    font-size: 13.5px;
  }

  /* piu' larghezza utile per il testo del pannello */
  .fv-eco__stage {
    padding: 20px 16px 22px;
  }

  .fv-eco__panel {
    gap: 20px;
  }

  .fv-eco__chip {
    margin-bottom: 12px;
    font-size: 11.5px;
  }

  .fv-eco__panel-title {
    font-size: 21px;
  }

  .fv-eco__panel-text {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.6;
  }

  .fv-eco__list li {
    padding-left: 26px;
    font-size: 14.5px;
  }
}

/* ═══════════════════════════════════════════════════════════
   HERO — taglio obliquo con video (versione approvata)
   Una diagonale parte in alto all'altezza di "Pricing" e scende
   verso destra: oltre la linea corre il video. Linea e video usano
   lo STESSO poligono (la linea con un offset di pochi px), cosi'
   restano allineati a qualsiasi larghezza di finestra.
   Il blocco sta in coda perche' deve vincere sulle regole
   .hero-copy-bg piu' in alto in questo stesso file.
   ═══════════════════════════════════════════════════════════ */
.section-hero#home {
  isolation: isolate;
  background:
    radial-gradient(60% 70% at 76% 44%, rgba(69, 200, 180, 0.14) 0%, rgba(69, 200, 180, 0) 66%),
    radial-gradient(70% 60% at 12% 0%, rgba(58, 118, 220, 0.15) 0%, rgba(58, 118, 220, 0) 62%),
    linear-gradient(180deg, #040a17 0%, #030812 60%, #02060f 100%) !important;
}

.section-hero#home .sect-main {
  position: relative;
  z-index: 1;
}

/* la vecchia texture fotografica non serve piu' */
.section-hero .hero-copy-bg {
  display: none !important;
}

.hero-cut {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-cut__video {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  -webkit-clip-path: polygon(45% 0, 100% 0, 100% 100%, 69% 100%);
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 69% 100%);
}

/* velo scuro sul video: il titolo gli passa accanto e deve restare nitido */
.hero-cut__veil {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, rgba(2, 6, 15, 0.96) 0%, rgba(2, 6, 15, 0.8) 40%, rgba(2, 6, 15, 0.5) 70%, rgba(2, 6, 15, 0.38) 100%);
  -webkit-clip-path: polygon(45% 0, 100% 0, 100% 100%, 69% 100%);
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 69% 100%);
}

.hero-cut__line {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(143, 242, 224, 0.15) 0%, #8ff2e0 26%, #45c8b4 74%, rgba(69, 200, 180, 0.12) 100%);
  -webkit-clip-path: polygon(45% 0, 45.1271% 0, 69.1271% 100%, 69% 100%);
  -webkit-clip-path: polygon(45% 0, calc(45% + 2px) 0, calc(69% + 2px) 100%, 69% 100%);
  clip-path: polygon(45% 0, 45.1271% 0, 69.1271% 100%, 69% 100%);
  clip-path: polygon(45% 0, calc(45% + 2px) 0, calc(69% + 2px) 100%, 69% 100%);
}

.hero-cut__line--glow {
  background: linear-gradient(180deg, rgba(143, 242, 224, 0.5) 0%, rgba(69, 200, 180, 0.5) 100%);
  filter: blur(9px);
  opacity: 0.55;
  -webkit-clip-path: polygon(45% 0, 45.445% 0, 69.445% 100%, 69% 100%);
  -webkit-clip-path: polygon(45% 0, calc(45% + 7px) 0, calc(69% + 7px) 100%, 69% 100%);
  clip-path: polygon(45% 0, 45.445% 0, 69.445% 100%, 69% 100%);
  clip-path: polygon(45% 0, calc(45% + 7px) 0, calc(69% + 7px) 100%, 69% 100%);
}

/* il titolo va a capo per larghezza, non con un <br>: cosi' non
   sporge mai oltre la diagonale, a nessuna risoluzione */
.section-hero .hero-main-grid .s-title {
  max-width: 15ch;
}

.section-hero .hero-main-grid .s-sub_title {
  max-width: 34ch;
}

@media (min-width: 1600px) {
  .section-hero .hero-main-grid .s-title {
    max-width: 17ch;
  }
}

@media (max-width: 991px) {
  /* la diagonale si corica: il video diventa una fascia in basso */
  .hero-cut__video,
  .hero-cut__veil {
    -webkit-clip-path: polygon(0 70%, 100% 84%, 100% 100%, 0 100%);
    clip-path: polygon(0 70%, 100% 84%, 100% 100%, 0 100%);
  }

  .hero-cut__veil {
    background: linear-gradient(180deg, rgba(2, 6, 15, 0.94) 0%, rgba(2, 6, 15, 0.72) 60%, rgba(2, 6, 15, 0.55) 100%);
  }

  .hero-cut__line {
    -webkit-clip-path: polygon(0 70%, 100% 84%, 100% 84.241%, 0 70.241%);
    -webkit-clip-path: polygon(0 70%, 100% 84%, 100% calc(84% + 2px), 0 calc(70% + 2px));
    clip-path: polygon(0 70%, 100% 84%, 100% 84.241%, 0 70.241%);
    clip-path: polygon(0 70%, 100% 84%, 100% calc(84% + 2px), 0 calc(70% + 2px));
  }

  .hero-cut__line--glow {
    -webkit-clip-path: polygon(0 70%, 100% 84%, 100% 84.8434%, 0 70.8434%);
    -webkit-clip-path: polygon(0 70%, 100% 84%, 100% calc(84% + 7px), 0 calc(70% + 7px));
    clip-path: polygon(0 70%, 100% 84%, 100% 84.8434%, 0 70.8434%);
    clip-path: polygon(0 70%, 100% 84%, 100% calc(84% + 7px), 0 calc(70% + 7px));
  }

  .section-hero .hero-main-grid .s-title,
  .section-hero .hero-main-grid .s-sub_title {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .hero-cut__video {
    opacity: 0.8;
  }

  .section-hero#home .sect-main > .container {
    padding-block: 18px 26px;
  }

  .section-hero .hero-main-grid .s-title {
    font-size: 40px !important;
    font-size: clamp(30px, 8.6vw, 40px) !important;
    line-height: 1.08;
    margin-bottom: 10px;
  }

  .section-hero .hero-main-grid .s-sub_title {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.5;
  }

  .section-hero .hero-cta {
    gap: 10px;
    margin-bottom: 18px;
  }

  .section-hero .hero-stats {
    gap: 14px;
  }
}

@media (max-width: 479px) {
  .hero-cut__video,
  .hero-cut__veil {
    -webkit-clip-path: polygon(0 76%, 100% 88%, 100% 100%, 0 100%);
    clip-path: polygon(0 76%, 100% 88%, 100% 100%, 0 100%);
  }

  .hero-cut__line {
    -webkit-clip-path: polygon(0 76%, 100% 88%, 100% 88.241%, 0 76.241%);
    -webkit-clip-path: polygon(0 76%, 100% 88%, 100% calc(88% + 2px), 0 calc(76% + 2px));
    clip-path: polygon(0 76%, 100% 88%, 100% 88.241%, 0 76.241%);
    clip-path: polygon(0 76%, 100% 88%, 100% calc(88% + 2px), 0 calc(76% + 2px));
  }

  .hero-cut__line--glow {
    -webkit-clip-path: polygon(0 76%, 100% 88%, 100% 88.8434%, 0 76.8434%);
    -webkit-clip-path: polygon(0 76%, 100% 88%, 100% calc(88% + 7px), 0 calc(76% + 7px));
    clip-path: polygon(0 76%, 100% 88%, 100% 88.8434%, 0 76.8434%);
    clip-path: polygon(0 76%, 100% 88%, 100% calc(88% + 7px), 0 calc(76% + 7px));
  }
}

/* ═══════════════════════════════════════════════════════════
   HERO — rifiniture: a capo del titolo e statistiche su mobile
   ═══════════════════════════════════════════════════════════ */
/* su desktop il titolo si spezza dopo "Our Mission:" con un <br>;
   il limite in ch resta come rete di sicurezza perche' la seconda
   riga ("Get you Funded") non arrivi mai oltre la diagonale */
.section-hero .hero-main-grid .s-title {
  max-width: 16ch;
}

@media (max-width: 991px) {
  /* su mobile niente interruzione forzata: va a capo per larghezza */
  .hero-title-br {
    display: none;
  }

  .section-hero .hero-main-grid .s-title {
    max-width: none;
  }
}

@media (max-width: 767px) {
  /* Il video diventa una fascia vera in fondo alla sezione, non piu'
     un ritaglio su tutta l'altezza: cosi' sta sotto al contenuto e le
     statistiche restano nel flusso, sopra di esso. */
  .hero-cut {
    top: auto;
    bottom: 0;
    /* fascia piu' alta: il video sale fin quasi alle statistiche */
    height: 48vh;
    min-height: 320px;
    /* il taglio passa sul contenitore invece che sui singoli elementi */
    -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
  }

  .hero-cut__veil {
    -webkit-clip-path: none;
    clip-path: none;
  }

  /* Il video e' girato per il desktop. Con object-fit: cover su una
     fascia alta veniva ingrandito fino a ~600px di larghezza virtuale
     e del lato destro se ne vedeva poco piu' della meta'. Ora tiene la
     sua proporzione (larghezza piena, altezza di conseguenza) ed e'
     appoggiato in basso: l'inquadratura si vede quasi tutta, parte
     destra compresa, e la fascia resta alta come prima. */
  .hero-cut__video {
    opacity: 0.95;
    top: auto;
    bottom: 0;
    /* il riquadro e' piu' largo dello schermo e ancorato a destra:
       sporge a sinistra, quindi l'inquadratura risulta spostata da
       quella parte e la sua meta' destra occupa tutto il campo */
    left: auto;
    right: 0;
    width: 172%;
    height: auto;
    object-fit: cover;
    object-position: 100% bottom;
    -webkit-clip-path: none;
    clip-path: none;
  }

  /* velo leggero: qui il video non ha testo sopra, serve solo a
     legarlo al fondo scuro della sezione */
  .hero-cut__veil {
    background: linear-gradient(180deg, rgba(2, 6, 15, 0.5) 0%, rgba(2, 6, 15, 0.18) 40%, rgba(2, 6, 15, 0.55) 100%);
  }

  .hero-cut__line {
    -webkit-clip-path: polygon(0 15%, 100% 0, 100% 2px, 0 15.241%);
    -webkit-clip-path: polygon(0 15%, 100% 0, 100% 2px, 0 calc(15% + 2px));
    clip-path: polygon(0 15%, 100% 0, 100% 2px, 0 15.241%);
    clip-path: polygon(0 15%, 100% 0, 100% 2px, 0 calc(15% + 2px));
  }

  .hero-cut__line--glow {
    -webkit-clip-path: polygon(0 15%, 100% 0, 100% 7px, 0 15.8434%);
    -webkit-clip-path: polygon(0 15%, 100% 0, 100% 7px, 0 calc(15% + 7px));
    clip-path: polygon(0 15%, 100% 0, 100% 7px, 0 15.8434%);
    clip-path: polygon(0 15%, 100% 0, 100% 7px, 0 calc(15% + 7px));
  }

  /* la griglia non aggiunge altro spazio in fondo: il video deve
     arrivare quasi a ridosso delle statistiche */
  .section-hero .hero-main-grid {
    padding-bottom: 0 !important;
  }

  /* spazio riservato alla fascia video, sotto al contenuto */
  .section-hero#home .sect-main > .container {
    padding-block: 18px calc(48vh + 8px);
  }

  /* statistiche: tre colonne in orizzontale, con l'icona sopra,
     staccate dai pulsanti */
  .section-hero .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 26px !important;
  }

  /* prima riga: icona e valore affiancati. Seconda riga: la
     descrizione a tutta larghezza, che riparte dal bordo sinistro */
  .section-hero .hero-stat {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 4px;
    align-items: center;
  }

  .section-hero .hero-stat__body {
    display: contents !important;
  }

  /* il valore veniva centrato considerando anche l'interlinea, che
     lo faceva sedere piu' in alto dell'icona: con line-height 1 la
     riga aderisce ai glifi e il centro coincide con quello dell'icona */
  .section-hero .hero-stat__value {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    line-height: 1 !important;
  }

  .section-hero .hero-stat__label {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .section-hero .hero-stat__icon {
    display: grid !important;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px;
  }

  .section-hero .hero-stat__icon svg {
    width: 15px;
    height: 15px;
  }

  .section-hero .hero-stat__value {
    font-size: 17px !important;
  }

  .section-hero .hero-stat__label {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }
}

/* ---------------------------------------------------------------
   TABLET IN VERTICALE (768-991px): la fascia video sotto al contenuto

   Fino ai 991px il video era ritagliato al 70% dell'altezza della
   sezione. Finche' l'hero era alta quanto lo schermo (1024px) quel
   70% cadeva sotto al contenuto e si vedeva bene. Da quando l'hero
   cresce col contenuto - per togliere i 230px di vuoto in cima -
   la sezione e' alta ~600px, il 70% cade a 420px e la fascia
   finiva SOPRA le statistiche.

   Stesso rimedio dei telefoni: il video diventa una fascia vera in
   fondo alla sezione e il contenitore si riserva lo spazio sotto,
   cosi' testo e statistiche restano sempre al di sopra. Qui pero'
   lo schermo e' largo, quindi il video tiene la sua misura normale
   invece di essere allargato e ancorato a destra come sul telefono.
   --------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-cut {
    top: auto;
    bottom: 0;
    height: 38vh;
    min-height: 250px;
    -webkit-clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
  }

  /* il taglio passa sul contenitore, non piu' sui singoli elementi */
  .hero-cut__video,
  .hero-cut__veil {
    -webkit-clip-path: none;
    clip-path: none;
  }

  .hero-cut__video {
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    width: 100%;
    height: 100%;
    opacity: 0.95;
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* velo leggero: qui sopra il video non c'e' testo, serve solo a
     legarlo al fondo scuro della sezione */
  .hero-cut__veil {
    background: linear-gradient(180deg, rgba(2, 6, 15, 0.55) 0%, rgba(2, 6, 15, 0.2) 40%, rgba(2, 6, 15, 0.55) 100%);
  }

  .hero-cut__line {
    -webkit-clip-path: polygon(0 18%, 100% 0, 100% 2px, 0 18.241%);
    -webkit-clip-path: polygon(0 18%, 100% 0, 100% 2px, 0 calc(18% + 2px));
    clip-path: polygon(0 18%, 100% 0, 100% 2px, 0 18.241%);
    clip-path: polygon(0 18%, 100% 0, 100% 2px, 0 calc(18% + 2px));
  }

  .hero-cut__line--glow {
    -webkit-clip-path: polygon(0 18%, 100% 0, 100% 7px, 0 18.8434%);
    -webkit-clip-path: polygon(0 18%, 100% 0, 100% 7px, 0 calc(18% + 7px));
    clip-path: polygon(0 18%, 100% 0, 100% 7px, 0 18.8434%);
    clip-path: polygon(0 18%, 100% 0, 100% 7px, 0 calc(18% + 7px));
  }

  .section-hero .hero-main-grid {
    padding-bottom: 0 !important;
  }

  /* Spazio riservato alla fascia video, sotto al contenuto.
     I 34px di margine non sono estetica: durante l'animazione di
     ingresso le statistiche partono spostate in basso e con un
     margine risicato sfioravano il bordo del video. */
  .section-hero#home .sect-main > .container {
    padding-block: 18px calc(38vh + 34px);
  }
}


@media (max-width: 479px) {
  .hero-cut {
    height: 46vh;
    min-height: 290px;
  }

  .section-hero#home .sect-main > .container {
    padding-block: 16px calc(46vh + 6px);
  }

  .section-hero .hero-stats {
    gap: 8px !important;
    margin-top: 22px !important;
  }

  .section-hero .hero-stat__icon {
    width: 25px !important;
    height: 25px !important;
  }

  .section-hero .hero-stat {
    gap: 6px;
  }

  .section-hero .hero-stat__value {
    font-size: 16px !important;
  }

  .section-hero .hero-stat__label {
    font-size: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PAYOUTS — "Get paid fast": titolone + due modalita' in colonna
   Sostituisce la vecchia sezione Debit Card, che diventa la
   seconda delle due colonne. La grafica della carta (.fv-dc__card
   e figli) resta quella di prima e viene riusata qui dentro.
   ═══════════════════════════════════════════════════════════ */
.fv-py {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  padding: clamp(56px, 6vw, 96px) 0;
  /* Gli aloni stanno lontani dai bordi e si spengono prima di
     arrivarci: cosi' non vengono tagliati dal confine con la sezione
     precedente e con quella successiva. Il fondo parte e finisce
     esattamente sul colore delle sezioni vicine (#02060f), quindi il
     passaggio e' continuo e non si vede la cucitura. */
  background:
    radial-gradient(46% 34% at 72% 34%, rgba(69, 200, 180, 0.13) 0%, rgba(69, 200, 180, 0) 68%),
    radial-gradient(44% 32% at 14% 70%, rgba(58, 118, 220, 0.11) 0%, rgba(58, 118, 220, 0) 70%),
    linear-gradient(180deg, #02060f 0%, #030a15 22%, #040c1a 50%, #030a15 78%, #02060f 100%);
}

/* raccordi in alto e in basso: due velature che partono dal colore
   delle sezioni adiacenti e svaniscono, cosi' il bordo non si legge */
.fv-py::before,
.fv-py::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 110px;
  height: clamp(60px, 8vw, 110px);
  pointer-events: none;
  z-index: 0;
}

.fv-py::before {
  top: 0;
  background: linear-gradient(180deg, #02060f 0%, rgba(2, 6, 15, 0) 100%);
}

.fv-py::after {
  bottom: 0;
  background: linear-gradient(0deg, #02060f 0%, rgba(2, 6, 15, 0) 100%);
}

/* l'alone centrale resta dentro la sezione, lontano dai bordi */
.fv-py__glow {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 1100px;
  width: min(1100px, 92%);
  height: 46%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(69, 200, 180, 0.12) 0%, rgba(69, 200, 180, 0) 72%);
}

.fv-py__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 56px;
  padding-inline: clamp(20px, 4vw, 56px);
}

.fv-py__head {
  max-width: 820px;
  margin: 0 auto 52px;
  margin: 0 auto clamp(32px, 3.6vw, 52px);
  text-align: center;
}

.fv-py__eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6fdcc6;
}

.fv-py__title {
  margin: 0 0 14px;
  font-size: 50px;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #f4f7f5;
}

.fv-py__title em {
  font-style: normal;
  color: #6fdcc6;
}

.fv-py__sub {
  margin: 0;
  font-size: 17.5px;
  font-size: clamp(14.5px, 1.15vw, 17.5px);
  line-height: 1.6;
  color: rgba(244, 247, 245, 0.62);
}

/* ── le due colonne ── */
.fv-py__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}

.fv-py__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 34px;
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(69, 200, 180, 0.12) 0%, rgba(69, 200, 180, 0) 62%),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.8);
}

.fv-py__col--card {
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(58, 118, 220, 0.14) 0%, rgba(58, 118, 220, 0) 62%),
    rgba(255, 255, 255, 0.045);
}

.fv-py__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 2px;
}

.fv-py__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(69, 200, 180, 0.28);
  background: rgba(69, 200, 180, 0.12);
  font-size: 12.5px;
  font-weight: 600;
  color: #8ff2e0;
}

.fv-py__logo {
  height: 26px;
  width: auto;
  opacity: 0.92;
}

.fv-py__logo-text {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 247, 245, 0.6);
}

.fv-py__col-title {
  margin: 0;
  font-size: 28px;
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #f4f7f5;
}

.fv-py__col-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(244, 247, 245, 0.62);
}

.fv-py__list {
  display: grid;
  gap: 14px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.fv-py__list--tight {
  gap: 12px;
}

.fv-py__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
}

.fv-py__ico {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #6fdcc6;
}

.fv-py__ico svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-py__list b {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f4f7f5;
}

.fv-py__list em {
  font-style: normal;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(244, 247, 245, 0.55);
}

/* la carta: riusa la grafica della vecchia sezione */
.fv-py__visual {
  display: grid;
  justify-items: start;
  margin: 4px 0 2px;
  padding: 14px 0;
}

/* dritta e allineata a sinistra nella colonna */
.fv-py__visual .fv-dc__card {
  width: 400px;
  width: min(400px, 100%);
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .fv-py__col--card:hover .fv-dc__card {
    transform: translateY(-4px);
  }
}

.fv-py__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
}

.fv-py__tag {
  padding: 7px 14px;
  border: 1px solid rgba(69, 200, 180, 0.24);
  border-radius: 999px;
  background: rgba(69, 200, 180, 0.1);
  font-size: 12.5px;
  font-weight: 600;
  color: #8ff2e0;
}

.fv-py__btn {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 28px;
  border-radius: 12px;
  background: linear-gradient(180deg, #56d6c1, #35b6a2);
  font-size: 15.5px;
  font-weight: 600;
  color: #032723;
  text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(69, 200, 180, 0.6);
  transition: filter 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .fv-py__btn:hover {
    filter: brightness(1.06);
  }
}

.fv-py__note {
  font-size: 12.5px;
  color: rgba(244, 247, 245, 0.5);
}

/* ── pannello wallet: riempie la colonna Rise Pay ── */
.fv-py__wallet {
  margin-top: 4px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(96, 88, 232, 0.18) 0%, rgba(96, 88, 232, 0) 62%),
    rgba(255, 255, 255, 0.04);
}

.fv-py__wallet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fv-py__wallet-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 247, 245, 0.55);
}

.fv-py__wallet-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(69, 200, 180, 0.28);
  background: rgba(69, 200, 180, 0.12);
  font-size: 11px;
  font-weight: 600;
  color: #8ff2e0;
}

.fv-py__wallet-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6fdcc6;
  box-shadow: 0 0 0 3px rgba(111, 220, 198, 0.22);
}

.fv-py__wallet-value {
  display: block;
  margin-top: 12px;
  font-size: 34px;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #f4f7f5;
}

.fv-py__wallet-note {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(244, 247, 245, 0.5);
}

.fv-py__rows {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.fv-py__rows li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13.5px;
}

.fv-py__rows span {
  color: rgba(244, 247, 245, 0.55);
}

.fv-py__rows b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #f4f7f5;
}

.fv-py__rows em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

.fv-py__rows em.is-ok {
  border: 1px solid rgba(69, 200, 180, 0.26);
  background: rgba(69, 200, 180, 0.12);
  color: #8ff2e0;
}

@media (max-width: 991px) {
  .fv-py__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── mobile ── */
@media (max-width: 767px) {
  .fv-py {
    padding: 46px 0;
  }

  .fv-py__head {
    margin-bottom: 24px;
  }

  .fv-py__title {
    font-size: 33px;
    font-size: clamp(25px, 7.4vw, 33px);
    line-height: 1.14;
  }

  .fv-py__sub {
    font-size: 14.5px;
  }

  .fv-py__col {
    gap: 12px;
    padding: 20px 17px;
    border-radius: 22px;
  }

  .fv-py__col-title {
    font-size: 20px;
  }

  .fv-py__col-text {
    font-size: 14.5px;
    line-height: 1.55;
  }

  .fv-py__num {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .fv-py__logo {
    height: 22px;
  }

  /* elenco: icona a sinistra, testo a destra su due righe */
  .fv-py__list {
    gap: 12px;
  }

  .fv-py__list li {
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 10px;
  }

  .fv-py__ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .fv-py__ico svg {
    width: 15px;
    height: 15px;
  }

  .fv-py__list b {
    font-size: 14px;
  }

  .fv-py__list em {
    font-size: 12.5px;
  }

  .fv-py__wallet {
    padding: 15px 14px;
    border-radius: 16px;
  }

  .fv-py__wallet-value {
    font-size: 26px;
  }

  .fv-py__rows li {
    padding: 9px 0;
    font-size: 13px;
    gap: 10px;
  }

  .fv-py__foot {
    gap: 10px;
    padding-top: 14px;
  }

  .fv-py__tag {
    font-size: 12px;
    padding: 6px 12px;
  }

  .fv-py__visual {
    padding: 8px 0;
  }

  .fv-py__visual .fv-dc__card {
    width: 320px;
    width: min(320px, 100%);
    transform: none;
  }
}

@media (max-width: 575px) {
  .fv-py {
    padding: 40px 0;
    background: #02060f;
  }

  .fv-py__col {
    padding: 18px 15px;
  }

  .fv-py__title {
    font-size: 24px;
  }

  .fv-py__visual {
    justify-items: center;
  }

  .fv-py__btn {
    width: 100%;
    justify-content: center;
  }

  /* le tre righe del wallet restano leggibili anche a 320px */
  .fv-py__rows li {
    grid-template-columns: auto 1fr auto;
    font-size: 12.5px;
  }
}

/* ═══════════════════════════════════════════════════════════
   BENTO — rifiniture
   ═══════════════════════════════════════════════════════════ */
/* i loghi scorrono sempre: prima l'hover sulla card mandava in pausa
   il marquee e il nastro sembrava bloccato */
.fv-bt__card:hover .fv-bt__marquee {
  animation-play-state: running;
}

/* spazio SOTTO le card, non dentro: "Card, bank or crypto" e
   "Paid in under 9 hours" sono la seconda riga della griglia, quindi
   il respiro si prende dopo la griglia stessa. */
.fv-bt__grid {
  margin-bottom: 56px;
  margin-bottom: clamp(34px, 4vw, 56px);
}

/* icona carta al posto della scritta "FundedVerse Card" */
.fv-py__logo-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 247, 245, 0.85);
}

.fv-py__logo-ico svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── carta con piu' dettagli (solo nella sezione payouts) ── */
/* la carta base e' una griglia con due sole fasce: qui i contenuti
   sono di piu', quindi passa a colonna flex con il piede in fondo.
   I valori sono tarati perche' il contenuto stia dentro il rapporto
   85.6:54 (1.586) di una carta vera, senza allungarla in altezza. */
.fv-dc__card--rich {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 18px 20px;
}

/* Lo spazio libero non si spalma fra tutte le righe (il chip finiva
   troppo in alto): si concentra sopra il chip e sopra il piede, come
   su una carta vera — chip a meta' altezza, numero subito sotto,
   titolare e circuito in fondo. */
.fv-dc__card--rich .fv-dc__card-mid {
  margin-top: auto;
  /* un filo in piu' sopra il chip: sulle carte vere sta intorno
     a un terzo dell'altezza, non subito sotto il logo */
  padding-top: 12px;
}

.fv-dc__card--rich .fv-dc__number {
  margin-top: 12px;
}

.fv-dc__card--rich .fv-dc__meta {
  margin-top: 9px;
}

.fv-dc__card--rich .fv-dc__card-top {
  align-items: flex-start;
}

.fv-dc__card-mid {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fv-dc__card--rich .fv-dc__number {
  gap: 11px;
  font-size: 14px;
  letter-spacing: 0.07em;
}

/* riga dati: scadenza, cvv, valuta */
.fv-dc__meta {
  display: flex;
  gap: 18px;
}

.fv-dc__meta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fv-dc__meta-item em {
  font-style: normal;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.fv-dc__meta-item b {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.86);
}

.fv-dc__card--rich .fv-dc__card-foot {
  margin-top: auto;
  padding-top: 10px;
}

.fv-dc__card--rich .fv-dc__holder {
  font-size: 9.5px;
  letter-spacing: 0.12em;
}

.fv-dc__card--rich .fv-dc__net {
  width: 38px;
  height: 22px;
}

.fv-dc__card--rich .fv-dc__net::before,
.fv-dc__card--rich .fv-dc__net::after {
  width: 22px;
  height: 22px;
}

@media (max-width: 575px) {
  /* su schermo stretto la carta e' piu' piccola: contenuti compatti
     per non sfondare il rapporto 1.586 e ritrovarsi un quadrato */
  .fv-dc__card--rich {
    padding: 14px 16px;
  }

  .fv-dc__card--rich .fv-dc__number {
    margin-top: 9px;
  }

  .fv-dc__card--rich .fv-dc__meta {
    margin-top: 7px;
  }

  .fv-dc__card--rich .fv-dc__card-foot {
    padding-top: 8px;
  }

  .fv-dc__card--rich .fv-dc__chip {
    width: 36px;
    height: 27px;
  }

  .fv-dc__meta {
    gap: 16px;
  }

  .fv-dc__card--rich .fv-dc__number {
    font-size: 13px;
    letter-spacing: 0.05em;
  }

  .fv-dc__meta-item b {
    font-size: 10.5px;
  }
}

/* logo al posto della scritta FUNDEDVERSE sulla carta.
   Il file e' bianco su trasparente (1600x100), quindi bastano
   l'altezza e un filo di trasparenza per farlo sedere sul fondo. */
.fv-dc__logo {
  height: 10px;
  width: auto;
  opacity: 0.92;
}

@media (max-width: 575px) {
  .fv-dc__logo {
    height: 9px;
  }
}

/* ═══════════════════════════════════════════════════════════
   ECOSYSTEM — impaginazione a due colonne (versione approvata)
   Testo e CTA a sinistra, scheda con tab e pannello a destra,
   fondo verde sfumato. Le regole arrivano dalla variante 1, che
   e' stata scelta e portata in produzione.
   ═══════════════════════════════════════════════════════════ */
.fv-eco {
  position: relative;
  /* niente overflow: hidden, altrimenti taglia la scheda a destra */
  overflow: visible;
  /* Fondo pieno, non piu' quattro aloni verdi sovrapposti.
     Sommandosi davano un verde slavato e sporco, e il colore del marchio
     ci si perdeva dentro. Ora il fondo e' neutro e il verde acqua si vede
     solo dove ha un senso: il contorno della scheda, l'occhiello, la
     parola "trader", le spunte.

     Il colore e' lo stesso delle altre sezioni chiare (#f7faf9): con un
     valore anche solo di un punto diverso, fra due campiture piatte cosi'
     ampie si vede una riga netta sulla giunzione. */
  background: #f7faf9;
}

/* Il velo verde diffuso e' stato tolto insieme agli aloni del fondo:
   era il quinto strato di verde ed era quello che impastava di piu'.
   La regola resta qui, spenta, perche' il pezzo che la richiama e'
   ancora nel markup: cosi' si capisce perche' non dipinge nulla. */
.fv-eco::before {
  content: none;
}

.fv-eco__orb {
  display: none;
}

/* due colonne: copy a sinistra, scheda a destra */
.fv-eco__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr);
  gap: 44px;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  max-width: 1440px;
}

.fv-eco__aside {
  padding-block: 24px;
  padding-block: clamp(8px, 2vw, 24px);
}

.fv-eco__head {
  grid-column: auto;
  padding: 0;
  background: none;
  margin-bottom: 28px;
}

.fv-eco__head::after {
  display: none;
}

.fv-eco__title {
  font-size: 52px;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #0c2b26;
}

.fv-eco__sub {
  max-width: 42ch;
  color: rgba(12, 43, 38, 0.66);
}

/* la scheda: identica a quella del sito, ma sborda a destra */
.fv-eco__grid {
  border-radius: 24px;
  margin-right: 0;
  box-shadow: 0 40px 90px -34px rgba(10, 50, 45, 0.45);
  /* Il verde acqua qui diventa un segno netto invece di una nuvola:
     una linea sola, che si legge subito. Dentro la scheda resta bianco
     pulito, senza i due aloni che c'erano prima. */
  border-color: rgba(69, 200, 180, 0.5);
  background: #ffffff;
}

/* Le due colonne dentro la scheda valgono SOLO da 992px in su: senza
   la media query questa regola vinceva anche sotto, dove la scheda
   deve impilarsi, e il pannello finiva schiacciato in una striscia.
   A 210px le etichette lunghe andavano a capo, da qui i 258-322px. */
@media (min-width: 992px) {
  /* 300px e' il minimo perche' "Payout in less than 9 hours" stia
     su una riga sola accanto a icona e freccia */
  .fv-eco__grid {
    grid-template-columns: minmax(300px, 330px) minmax(0, 1fr);
  }
}

@media (max-width: 1199px) {
  .fv-eco__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .fv-eco__grid {
    border-radius: 22px;
  }

  .fv-eco__head {
    margin-bottom: 22px;
  }

  /* Prima: quadrato di 1200px con il lato sinistro a meta' sezione, che
     sporgeva a destra fino a 1000px. Ora il box resta largo quanto la
     sezione e le sfumature hanno centri e raggi in pixel identici a
     quelli di allora, misurati dallo stesso punto (meta' sezione). */
  .fv-eco::before {
    height: 1200px;
    background:
      radial-gradient(552px 504px at calc(50% + 360px) 480px, rgba(111, 220, 198, 0.34) 0%, rgba(111, 220, 198, 0) 70%),
      radial-gradient(480px 552px at calc(50% + 912px) 744px, rgba(69, 200, 180, 0.22) 0%, rgba(69, 200, 180, 0) 72%);
  }
}

/* ── versione compatta ──
   Stessi elementi, respiro ridotto: la sezione passa da ~1000px
   a poco piu' di 700px di altezza su desktop. */
.fv-eco {
  padding-block: 72px;
  padding-block: clamp(48px, 5vw, 72px);
}

.fv-eco__head {
  margin-bottom: 20px;
}

.fv-eco__title {
  font-size: 42px;
  font-size: clamp(28px, 3vw, 42px);
  margin-bottom: 12px;
}

.fv-eco__sub {
  font-size: 16px;
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.55;
}

/* colonna voci: righe alte e ben distanziate */
.fv-eco__tabs {
  gap: 7px;
  padding: 16px;
}

.fv-eco__tabs-label {
  padding: 20px 16px 10px;
  font-size: 11px;
  letter-spacing: 0.13em;
}

.fv-eco__tab {
  padding: 15px 14px;
  /* icona e testo vicini: la freccia si stacca da sola a destra */
  gap: 9px;
  font-size: 15px;
  line-height: 1.3;
  border-radius: 13px;
}

/* le etichette lunghe restano su una riga sola quando c'e' spazio */
.fv-eco__tab-txt {
  text-wrap: balance;
}

.fv-eco__tab-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.fv-eco__tab-ico svg,
.fv-eco__tab-arrow svg {
  width: 16px;
  height: 16px;
}

/* pannello: piu' respiro, in equilibrio con la colonna a fianco */
.fv-eco__stage {
  min-height: 0;
  padding: 36px;
  padding: clamp(24px, 2.6vw, 36px);
}

/* Impostazione unica per tutte e sei le schede: testo in alto a piena
   larghezza, grafica in una fascia sotto, sempre della stessa altezza.
   Cosi' cambiando tab il riquadro non si allunga ne' si accorcia. */
.fv-eco__panel {
  gap: 20px;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.fv-eco__visual {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  height: 190px;
  overflow: hidden;
}

/* ogni grafica riempie la fascia e viene ritagliata, invece di
   dettare l'altezza del pannello */
.fv-eco__visual > * {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.fv-eco__shot img {
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.fv-eco__chip {
  margin-bottom: 10px;
  padding: 4px 11px 4px 9px;
  font-size: 11.5px;
}

.fv-eco__panel-title {
  margin-bottom: 8px;
  font-size: 25px;
  font-size: clamp(19px, 1.8vw, 25px);
}

.fv-eco__panel-text {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.55;
}

.fv-eco__list {
  gap: 7px;
}

.fv-eco__list li {
  font-size: 14px;
}

.fv-eco__visual {
  gap: 9px;
}

/* ═══════════════════════════════════════════════════════════
   ECOSYSTEM — cambio scheda senza salti + screenshot AI Terminal
   ═══════════════════════════════════════════════════════════ */
/* Il pannello entrava traslando verso l'alto: a ogni clic il titolo
   "ballava". Ora cambia solo l'opacita', la posizione resta ferma. */
@keyframes fvEcoIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* La scheda tiene l'altezza della colonna delle voci: il pannello si
   adatta a quello spazio invece di dettarlo, cosi' cambiando tab il
   riquadro resta della stessa altezza e nulla si sposta. */
@media (min-width: 992px) {
  .fv-eco__stage {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .fv-eco__panel {
    height: 100%;
    align-content: start;
    grid-auto-rows: min-content;
  }

}

/* ── screenshot dentro il pannello ── */
.fv-eco__shot {
  margin: 0;
  border: 1px solid rgba(20, 20, 21, 0.1);
  border-radius: 14px;
  background: #05070c;
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(12, 40, 36, 0.5);
}

.fv-eco__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* tre dati sotto il testo introduttivo: icona, valore e una riga di
   spiegazione, separati da hairline verdi */
.fv-eco__facts {
  display: grid;
  grid-template-columns: 34px auto minmax(0, 1fr);
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  max-width: 400px;
}

/* le tre righe condividono le colonne della lista (subgrid): cosi'
   i valori e le descrizioni partono tutti dalla stessa verticale,
   invece di dipendere dalla larghezza del valore di quella riga */
.fv-eco__facts li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(47, 162, 147, 0.16);
}

.fv-eco__facts li:first-child {
  border-top: 1px solid rgba(47, 162, 147, 0.16);
}

.fv-eco__fact-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(69, 200, 180, 0.14);
  color: #2fa293;
}

.fv-eco__fact-ico svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-eco__facts b {
  min-width: 60px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0c2b26;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fv-eco__facts em {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(12, 43, 38, 0.58);
}

@media (max-width: 1199px) {
  .fv-eco__facts {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
  }

  .fv-eco__facts li {
    grid-column: auto;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 3px 10px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(47, 162, 147, 0.16);
    border-bottom: 0;
  }

  .fv-eco__facts li:first-child {
    border-top: 1px solid rgba(47, 162, 147, 0.16);
  }

  .fv-eco__fact-ico {
    grid-row: span 2;
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
}

@media (max-width: 575px) {
  .fv-eco__facts {
    grid-template-columns: 30px auto minmax(0, 1fr);
    gap: 0;
  }

  .fv-eco__facts li {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: auto;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-top: 0;
    border-bottom: 1px solid rgba(47, 162, 147, 0.16);
  }

  .fv-eco__facts li:first-child {
    border-top: 1px solid rgba(47, 162, 147, 0.16);
  }

  .fv-eco__fact-ico {
    grid-row: auto;
  }

  .fv-eco__facts b {
    font-size: 16px;
  }

  .fv-eco__facts em {
    font-size: 12.5px;
  }
}

/* ═══════════════════════════════════════════════════════════
   ECOSYSTEM — una sola immagine per scheda
   ═══════════════════════════════════════════════════════════ */
/* Ogni pannello mostra ora un unico visual a tutta larghezza: il
   riquadro dati accanto alla grafica e' stato rimosso. */
.fv-eco__visual {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
}

/* Le due schede senza foto (Black e Debit Card) mostrano la sola
   carta, centrata dentro la fascia invece di riempirla. */
.fv-eco__art--card {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(69, 200, 180, 0.16) 0%, rgba(69, 200, 180, 0) 72%),
    #f2f6f5;
}

.fv-eco__art--card .fv-art__card {
  margin: 0;
  width: 252px;
  width: min(100%, 252px);
}

/* ═══════════════════════════════════════════════════════════
   ECOSYSTEM — frecce di scorrimento sulla fila di tab (mobile)
   ═══════════════════════════════════════════════════════════ */
/* Su desktop le voci sono una colonna: nessuna freccia. */
.fv-eco__scroll {
  display: none;
}

@media (max-width: 991px) {
  /* la fila e' scorrevole: due frecce sui lati lo dicono a colpo
     d'occhio e permettono anche di scorrere con un tocco */
  /* il wrapper e' il riferimento: le frecce si centrano esattamente
     sulla fila delle pillole, senza dipendere dall'etichetta sopra */
  .fv-eco__tabs-wrap {
    position: relative;
  }

  .fv-eco__scroll {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(20, 20, 21, 0.12);
    border-radius: 50%;
    background: #ffffff;
    color: #141415;
    box-shadow: 0 6px 16px -8px rgba(12, 40, 36, 0.55);
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .fv-eco__scroll svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .fv-eco__scroll--prev {
    left: 5px;
  }

  .fv-eco__scroll--next {
    right: 5px;
  }

  /* arrivati in fondo la freccia sparisce, invece di restare inerte */
  .fv-eco__scroll[disabled] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.85);
  }

  /* le pillole non finiscono sotto le frecce */
  .fv-eco__tabs {
    padding-left: 44px;
    padding-right: 44px;
    scroll-padding-inline: 44px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv-eco__scroll {
    transition: none;
  }
}

/* la grafica del vault e' centrata sulla porta, non ritagliata
   dall'angolo come gli screenshot */
.fv-eco__shot--art img {
  object-position: center;
}

/* pannello con un solo logo: va mostrato intero e centrato, non
   ritagliato come uno screenshot */
.fv-eco__shot--logo {
  display: grid;
  place-items: center;
  padding: 26px;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(69, 200, 180, 0.16) 0%, rgba(69, 200, 180, 0) 70%),
    linear-gradient(160deg, #071722 0%, #05111b 60%, #040d16 100%);
}

.fv-eco__shot--logo img {
  width: auto;
  max-width: 280px;
  max-width: min(100%, 280px);
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS — passaggi della prima card
   Sostituisce il pannello con taglie e regole: quattro righe a
   pillola con la spunta, sullo stile del resto del sito.
   ═══════════════════════════════════════════════════════════ */
.fv-how__steps {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fv-how__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px 13px 18px;
  border: 1px solid #14141510;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 24px -14px rgba(20, 32, 30, 0.45);
}

.fv-how__step-txt {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #141415;
}

.fv-how__step-tick {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
  box-shadow: 0 6px 14px -6px rgba(69, 200, 180, 0.7);
}

.fv-how__step-tick svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 575px) {
  .fv-how__steps {
    gap: 8px;
  }

  .fv-how__step {
    padding: 11px 12px 11px 16px;
  }

  .fv-how__step-txt {
    font-size: 13.5px;
  }
}

/* ═══════════════════════════════════════════════════════════
   PAYOUTS — carta prepagata non ancora disponibile
   La colonna resta visibile (racconta il servizio in arrivo) ma
   e' chiaramente marcata come non attiva.
   ═══════════════════════════════════════════════════════════ */
.fv-py__col.is-soon {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.16);
}

/* badge in testa alla colonna */
.fv-py__soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px 6px 9px;
  border: 1px solid rgba(244, 247, 245, 0.22);
  border-radius: 999px;
  background: rgba(244, 247, 245, 0.08);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244, 247, 245, 0.82);
  white-space: nowrap;
}

.fv-py__soon i {
  display: grid;
  place-items: center;
}

.fv-py__soon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* la carta perde colore e si attenua: si vede che e' un'anteprima */
.fv-py__col.is-soon .fv-py__visual {
  position: relative;
  filter: grayscale(0.55);
  opacity: 0.5;
}

.fv-py__col.is-soon .fv-py__list {
  opacity: 0.68;
}

/* il pulsante non porta piu' da nessuna parte: e' un'etichetta */
.fv-py__btn--soon {
  background: rgba(244, 247, 245, 0.1);
  border: 1px solid rgba(244, 247, 245, 0.2);
  color: rgba(244, 247, 245, 0.72);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 575px) {
  .fv-py__soon {
    padding: 5px 10px 5px 8px;
    font-size: 10.5px;
  }
}

/* Payments e Payouts: sale in cima solo l'occhiello, mentre titolo,
   testo e grafica restano dove sono nelle altre card. */
.fv-bt__card--head-top > .fv-bt__eyebrow {
  order: -1;
  /* la card allinea tutto in basso: questo lo tiene ancorato in cima */
  margin-bottom: auto;
  padding-bottom: 16px;
}

/* un'unica etichetta al posto di "Cards & wallets" + "Crypto & bank":
   dice quanti metodi ci sono, non come sono divisi */
.fv-bt__group-label--all {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: #f4f7f5;
}

/* Gli ultimi metodi sfumano verso il fondo della card: si capisce che
   l'elenco continua oltre a quelli mostrati, senza doverlo scrivere. */
.fv-bt__art--pay {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 74%, rgba(0, 0, 0, 0.35) 92%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 74%, rgba(0, 0, 0, 0.35) 92%, rgba(0, 0, 0, 0) 100%);
}

/* ── card Payouts: blocco tempi + logo del rail nella stessa scheda ──
   Torna l'impostazione originale: fulmine a sinistra, i tre dati in
   colonna a destra. Rise resta dentro, come ultima riga. */
.fv-bt__bolt {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(86, 214, 193, 0.4);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(86, 214, 193, 0.28) 0%, rgba(47, 162, 147, 0.08) 60%),
    rgba(255, 255, 255, 0.04);
  color: #56d6c1;
  box-shadow: 0 8px 24px rgba(47, 162, 147, 0.25);
}

.fv-bt__bolt svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-bt__art--payout .fv-bt__speed {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

/* Rise occupa la terza colonna, a destra: la card e' larga e quello
   spazio restava vuoto. Diviso dai dati da una linea verticale. */
.fv-bt__art--payout .fv-bt__rail {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: 0;
  padding: 4px 20px 4px 24px;
  border-top: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* il rail non e' piu' un riquadro a se': e' l'ultima riga dentro al
   blocco del tempo di lavorazione, separata da una hairline */
.fv-bt__rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fv-bt__rail-lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 247, 245, 0.45);
}

.fv-bt__rail-logo {
  height: 18px;
  width: auto;
  opacity: 0.95;
}

/* in colonna singola Rise torna sotto, a tutta larghezza */
@media (max-width: 991px) {
  .fv-bt__art--payout .fv-bt__speed {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .fv-bt__art--payout .fv-bt__rail {
    grid-column: 1 / -1;
    justify-items: start;
    margin-top: 2px;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* ═══════════════════════════════════════════════════════════
   SHOWS — pulsante a cavallo del bordo inferiore del video
   ═══════════════════════════════════════════════════════════ */
.fv-sh__cta {
  position: absolute;
  left: 50%;
  /* meta' dentro il video e meta' fuori: lo stage ha overflow visible */
  bottom: -42px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* stessa forma dei pulsanti del sito: rettangolo con raggio 10px,
     non una pillola */
  height: 84px;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #56d6c1 0%, #35b6a2 100%);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #032723;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 16px 30px -16px rgba(12, 40, 36, 0.55);
  transition: transform 0.22s ease, filter 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .fv-sh__cta:hover {
    filter: brightness(1.06);
    transform: translateX(-50%) translateY(-2px);
  }
}

@media (max-width: 575px) {
  .fv-sh__cta {
    bottom: -32px;
    height: 64px;
    padding: 0 18px;
    font-size: 14px;
  }

}

/* ═══════════════════════════════════════════════════════════
   HERO — respiro sotto le statistiche
   Erano l'ultimo elemento del contenuto e su alcune altezze di
   schermo finivano a ridosso della sezione successiva.
   ═══════════════════════════════════════════════════════════ */
.section-hero .hero-stats {
  margin-bottom: 40px;
  margin-bottom: clamp(20px, 3vw, 40px);
}

@media (max-width: 767px) {
  .section-hero .hero-stats {
    margin-bottom: 22px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   AI MARKET DESK — lo strumento offerto da FundedVerse
   ═══════════════════════════════════════════════════════════ */
.fv-md {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding-block: 100px;
  padding-block: clamp(60px, 7vw, 100px);
  scroll-margin-top: calc(var(--fv-header-offset, 120px) + 16px);
  background:
    radial-gradient(58% 42% at 85% 18%, rgba(69, 200, 180, 0.12) 0%, rgba(69, 200, 180, 0) 62%),
    radial-gradient(48% 36% at 5% 84%, rgba(69, 200, 180, 0.07) 0%, rgba(69, 200, 180, 0) 62%),
    #f7faf9;
  color: #141415;
}

.fv-md__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 48px;
  padding-inline: clamp(16px, 3vw, 48px);
}

/* due colonne: testo a sinistra, anteprima dello strumento a destra */
.fv-md__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 52px;
  gap: clamp(28px, 3.4vw, 52px);
}

.fv-md__col {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 20px;
}

.fv-md__head-copy {
  max-width: 560px;
}

.fv-md__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 5px 12px 5px 10px;
  border: 1px solid rgba(47, 162, 147, 0.24);
  border-radius: 999px;
  background: var(--fv-teal-050, #e8f6f4);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2fa293;
}

.fv-md__eyebrow i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2fa293;
}

.fv-md__title {
  margin: 0 0 12px;
  font-size: 42px;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.fv-md__sub {
  margin: 0;
  font-size: 16px;
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.55;
  color: #141415a3;
}

/* chiusura: due frasi in riga, senza riquadro */
.fv-md__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin-top: 44px;
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: 24px;
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid #14141514;
}

.fv-md__fact {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  color: #141415a8;
}

.fv-md__fact-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--fv-teal-050, #e8f6f4);
  color: #2fa293;
}

.fv-md__fact-ico svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-md__btn {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  border-radius: 10px;
  background: linear-gradient(180deg, #56d6c1, #35b6a2);
  font-size: 15.5px;
  font-weight: 600;
  color: #032723;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgba(69, 200, 180, 0.6);
  transition: filter 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .fv-md__btn:hover {
    filter: brightness(1.06);
  }
}

@media (max-width: 575px) {
  .fv-md__btn {
    width: 100%;
    justify-content: center;
  }
}


/* ── anteprima: lo strumento vero dentro una cornice ── */
.fv-md__shot {
  position: relative;
}

/* alone verde dietro alla cornice, per staccarla dal fondo chiaro */
.fv-md__shot-glow {
  position: absolute;
  /* era "12% -4% -10%": sporgeva del 4% e a 768px usciva dalla pagina.
     Box largo il 100% invece del 108%: raggio orizzontale 60% -> 64.8% */
  top: 12%; right: 0; bottom: -10%; left: 0;
  border-radius: 50%;
  background: radial-gradient(64.8% 60% at 50% 60%, rgba(69, 200, 180, 0.3) 0%, rgba(69, 200, 180, 0) 70%);
  filter: blur(38px);
  pointer-events: none;
  z-index: 0;
}

.fv-md__frame {
  position: relative;
  z-index: 1;
  margin: 0;
  border: 1px solid rgba(20, 20, 21, 0.1);
  border-radius: 20px;
  background: #0a0e13;
  overflow: hidden;
  box-shadow:
    0 40px 80px -40px rgba(6, 26, 24, 0.55),
    0 2px 6px rgba(20, 32, 30, 0.08);
}

/* barra della finestra: rende lo screenshot un'applicazione, non
   un'immagine incollata nella pagina */
.fv-md__frame-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #0d1218;
}

.fv-md__frame-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.fv-md__frame-bar em {
  margin-left: 10px;
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(244, 247, 245, 0.4);
}

.fv-md__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* elenco dei moduli: una riga di voci, senza riquadri */
.fv-md__feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 18px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* l'ultima voce, dispari, prende tutta la riga */
.fv-md__feats li:last-child {
  grid-column: 1 / -1;
}

.fv-md__feats li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: #141415cc;
}

.fv-md__feat-ico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 9px;
  background: var(--fv-teal-050, #e8f6f4);
  color: #2fa293;
}

.fv-md__feat-ico svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767px) {
  .fv-md__frame-bar {
    padding: 9px 12px;
  }

  .fv-md__frame-bar em {
    display: none;
  }

  .fv-md__feats {
    gap: 10px 18px;
  }

  .fv-md__feats li {
    font-size: 13px;
  }
}


@media (max-width: 991px) {
  /* in verticale: prima il testo, poi l'anteprima */
  .fv-md__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .fv-md__head-copy {
    max-width: none;
  }

  .fv-md__feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .fv-md__feats {
    grid-template-columns: minmax(0, 1fr);
  }

  .fv-md__feats li:last-child {
    grid-column: auto;
  }
}


/* ═══════════════════════════════════════════════════════════
   PRICING — "i" informative accanto alle voci delle tabelle
   Il testo del popover sta in un unico punto (js/pages.js), cosi'
   si aggiorna una volta sola per tutte le tabelle.
   ═══════════════════════════════════════════════════════════ */
.fv-pr__rule dt,
.fv-pr__price-box .fv-pr__lbl {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* nella colonna del prezzo l'etichetta e' allineata a destra */
.fv-pr__price-box .fv-pr__lbl {
  justify-content: flex-end;
}

.fv-pr__info {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 12px;
  flex: none;
  padding: 0;
  border: 1px solid rgba(244, 247, 245, 0.3);
  border-radius: 50%;
  background: transparent;
  color: rgba(244, 247, 245, 0.6);
  font: inherit;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

/* la card con il popover aperto sale sopra le vicine, altrimenti il
   riquadro finisce sotto la card accanto */
.fv-pr__card:has(.fv-pr__info:hover),
.fv-pr__card:has(.fv-pr__info:focus-visible) {
  z-index: 5;
}

.fv-pr__info:hover,
.fv-pr__info:focus-visible {
  border-color: rgba(86, 214, 193, 0.6);
  background: rgba(69, 200, 180, 0.14);
  color: #6fdcc6;
  outline: none;
}

/* il popover */
.fv-pr__tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: 90;
  width: max-content;
  max-width: 228px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  /* fondo nero pieno: il popover passa sopra le card e il testo deve
     restare leggibile in ogni punto */
  background: #000000;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.85);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  color: rgba(244, 247, 245, 0.92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* punta del popover */
.fv-pr__tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  margin-top: -5px;
  transform: rotate(45deg);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: #000000;
}

.fv-pr__info:hover .fv-pr__tip,
.fv-pr__info:focus-visible .fv-pr__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* vicino ai bordi della griglia il popover si aggancia al lato */
.fv-pr__info.is-left .fv-pr__tip {
  left: -6px;
  transform: translateX(0) translateY(4px);
}

.fv-pr__info.is-left:hover .fv-pr__tip,
.fv-pr__info.is-left:focus-visible .fv-pr__tip {
  transform: translateX(0) translateY(0);
}

.fv-pr__info.is-left .fv-pr__tip::after {
  left: 13px;
}

.fv-pr__info.is-right .fv-pr__tip {
  left: auto;
  right: -6px;
  transform: translateX(0) translateY(4px);
}

.fv-pr__info.is-right:hover .fv-pr__tip,
.fv-pr__info.is-right:focus-visible .fv-pr__tip {
  transform: translateX(0) translateY(0);
}

.fv-pr__info.is-right .fv-pr__tip::after {
  left: auto;
  right: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .fv-pr__tip {
    transition: none;
  }
}


/* ==========================================================================
   HERO — titolo "Empowering traders all over the globe" + sottotitolo piu' esteso
   Il sottotitolo era limitato a 34ch e risultava compatto: lo allarghiamo
   fino a poco prima della diagonale. La diagonale passa dal 45% (in alto)
   al 69% (in basso), quindi all'altezza del sottotitolo c'e' piu' spazio
   orizzontale che all'altezza del titolo.
   ========================================================================== */
/* I titoli nuovi ("Empowering traders all over the globe" / "Sponsorizziamo
   il tuo trading ogni giorno") sono piu' lunghi dei precedenti. Il blocco di
   testo e' centrato e largo al massimo 1240px, mentre in alto la diagonale
   parte dal 45%: lo spazio utile per la prima riga resta ~610px a qualsiasi
   risoluzione desktop. A 88px la prima riga ne occupa fino a 766 e finisce
   sul video, quindi il corpo si ferma a 64px. Solo da 992px in su: sotto
   restano valide le regole mobile gia' presenti. */
@media (min-width: 992px) {
  .section-hero .hero-main-grid .s-title {
    font-size: 64px !important;
    font-size: clamp(44px, 4.8vw, 64px) !important;
    max-width: 22ch;
  }
}

/* Il sottotitolo sta piu' in basso, dove la diagonale ha gia' guadagnato
   spazio: puo' allungarsi parecchio restando dentro con margine. */
.section-hero .hero-main-grid .s-sub_title {
  max-width: 55ch;
}

@media (max-width: 991px) {
  .section-hero .hero-main-grid .s-title,
  .section-hero .hero-main-grid .s-sub_title {
    max-width: none;
  }
}

/* ==========================================================================
   BANNER PROMO — variante "link" (usata sulla home italiana)
   Il banner nasce per copiare un codice sconto: il JS intercetta
   .promo-code-copy e fa preventDefault(), quindi un <a> con quella classe
   non navigherebbe. Serve una classe distinta con lo stesso aspetto.
   ========================================================================== */
.promo-banner_link,
.tf-header .promo-banner_link strong {
  color: var(--fv-teal);
  font: inherit;
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 0 !important;
  padding-bottom: 1px;
  transition: box-shadow 0.2s ease, color 0.2s ease;
}

.promo-banner_link {
  padding-inline: 2px;
}

.promo-banner_link:hover,
.promo-banner_link:hover strong {
  color: #fff;
  box-shadow: inset 0 -1px 0 0 rgba(111, 220, 198, 0.9);
}

/* Il CTA dell'header non deve andare a capo: in italiano "Inizia la
   Challenge" e' piu' lungo dell'inglese "Start Challenge" e finiva su
   due righe dentro il pulsante. Verificato da 992px in su: resta su una
   riga senza sovrapporsi al menu ne' creare scroll orizzontale. */
.tf-header .tf-btn {
  white-space: nowrap;
}

/* ── header: colonne a misura del contenuto da 992px in su ─────────────
   Le tre colonne erano fisse a 3/6/3 di griglia. Il logo non riempie il suo
   25%, mentre il gruppo pulsanti chiede piu' del suo: fra 992 e ~1150px il
   gruppo usciva dal contenitore, di 40px in italiano e di 15px in inglese
   ("Inizia la Challenge" e' 165px, "Start Challenge" 147px).
   Lasciando che ogni colonna prenda la larghezza che le serve, lo spazio che
   il logo non usa passa ai pulsanti e il menu assorbe quello che avanza. */
@media (min-width: 992px) {
  .tf-header .container > .row {
    flex-wrap: nowrap;
  }
  .tf-header .container > .row > .col-lg-3 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .tf-header .container > .row > .col-6.d-lg-block {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
  }
}

/* ── pricing: numeri piu' piccoli quando le card sono 6 affiancate ──────
   Con 6 colonne (Ultra e Ultra Pay Later) ogni card ha circa 140px utili.
   Taglia e prezzo stanno sulla stessa riga, e a 27px "$300K $1989" ne
   chiede 168: il prezzo usciva dalla card fino a 29px, a ogni larghezza da
   1200px in su. Serve stare sotto i 22,6px; a 21px restava 1px di margine,
   troppo poco per i font di altri sistemi, quindi il massimo e' 20px.
   Sotto i 1200px la griglia passa a 3 colonne e la regola non si applica.
   Stessa misura su entrambe le varianti Ultra, cosi' passando dall'una
   all'altra i numeri non cambiano dimensione.
   In inglese non bastava: l'etichetta "ACCOUNT SIZE" misura 87px, il
   numero sotto 71, e il blocco prendeva la larghezza dell'etichetta,
   spingendo fuori il prezzo di 8-12px. Riga per riga pero' c'e' posto
   (le due etichette insieme ne occupano 122 su 140), quindi il blocco di
   sinistra puo' stringersi sotto la sua etichetta, che resta intera e
   sporge nello spazio libero; il blocco del prezzo invece non si stringe. */
@media (min-width: 1200px) {
  .fv-pr__grid[style*="--fv-pr-cols:6"] .fv-pr__size,
  .fv-pr__grid[style*="--fv-pr-cols:6"] .fv-pr__price {
    font-size: 20px;
    font-size: clamp(18px, 1.4vw, 20px);
  }
  .fv-pr__grid[style*="--fv-pr-cols:6"] .fv-pr__top > :first-child {
    min-width: 0;
  }
  .fv-pr__grid[style*="--fv-pr-cols:6"] .fv-pr__price-box {
    flex-shrink: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   COMPATIBILITA' — browser senza aspect-ratio (Chromium < 88)
   Il Samsung Flip usa un Chromium di quella generazione: senza
   questa proprieta' le card video del muro recensioni finivano
   alte zero e le tessere dei loghi si schiacciavano.
   Il blocco vale solo dove aspect-ratio manca: i browser moderni
   lo saltano e non cambia nulla.
   ═══════════════════════════════════════════════════════════ */
@supports not (aspect-ratio: 1 / 1) {
  /* card video: tutti i contenuti sono sovrapposti in assoluto,
     l'altezza la da' uno spaziatore (9/16 -> 177.78%) */
  .fv-tc__card--clip::before {
    content: "";
    display: block;
    padding-top: 177.7778%;
  }

  /* tessere dei loghi: griglia a cella unica, spaziatore e logo
     occupano la stessa cella (5/4 -> 80%, 1/1 -> 100%) */
  .fv-bt__logo::before {
    content: "";
    grid-area: 1 / 1;
    padding-top: 80%;
  }

  .fv-bt__logo img {
    grid-area: 1 / 1;
  }

  .fv-bt__art--platforms .fv-bt__logo::before {
    padding-top: 100%;
  }

  /* palco della sezione shows: contenuti sovrapposti (16/6.5 -> 40.625%) */
  .fv-sh__stage::before {
    content: "";
    display: block;
    padding-top: 40.625%;
  }

  /* card "rich" (proporzioni di una carta di credito, 1.586): e' una griglia
     su piu' righe, quindi niente spaziatore ma l'altezza equivalente alla
     sua larghezza massima */
  .fv-dc__card {
    min-height: 240px;
  }

  @media (max-width: 991px) {
    .fv-sh__stage::before {
      padding-top: 56.25%;
    }
  }

  @media (max-width: 767px) {
    /* sotto i 768px le clip passano a 16/9 */
    .fv-tc__card--clip::before {
      padding-top: 56.25%;
    }
  }

  @media (max-width: 575px) {
    /* qui le tessere "platforms" hanno un'altezza fissa */
    .fv-bt__art--platforms .fv-bt__logo::before {
      content: none;
    }

    /* il palco diventa una griglia e l'altezza la da' il video (16/9) */
    .fv-sh__stage::before {
      content: none;
    }

    .fv-sh__media::before {
      content: "";
      display: block;
      padding-top: 56.25%;
    }
  }
}

/* ═══════════════════════════════════════════════════════════
   COMPATIBILITA' — browser senza clip-path
   La linea diagonale dell'hero e' un riquadro grande quanto la
   sezione, ritagliato a striscia: senza ritaglio copriva tutto
   l'hero con un velo verde acqua (visto sul Samsung Flip). Qui la
   linea sparisce e video e velo passano a tutta larghezza, con il velo
   che sfuma da sinistra a destra.
   ═══════════════════════════════════════════════════════════ */
@supports not ((clip-path: polygon(0 0, 1px 0, 0 1px)) or (-webkit-clip-path: polygon(0 0, 1px 0, 0 1px))) {
  .hero-cut__line {
    display: none;
  }

  @media (min-width: 992px) {
    /* video e velo a tutta larghezza, il velo sfuma da sinistra a destra */
    .hero-cut__video,
    .hero-cut__veil {
      -webkit-clip-path: none;
      clip-path: none;
    }

    .hero-cut__veil {
      background: linear-gradient(90deg, rgb(2, 6, 15) 0%, rgba(2, 6, 15, 0.97) 46%, rgba(2, 6, 15, 0.9) 54%, rgba(2, 6, 15, 0.55) 66%, rgba(2, 6, 15, 0.28) 82%, rgba(2, 6, 15, 0.2) 100%);
    }
  }
}

/* Browser che non accettano calc() dentro polygon(): l'hero rinuncia ai
   ritagli. Rete di sicurezza generica. Nota: il Samsung Flip NON rientra
   qui (accetta calc(), ma non disegna nessun clip-path): per lui vale la
   classe html.fv-noclip piu' sotto. */
@supports not ((clip-path: polygon(0 0, calc(1% + 1px) 0, 0 1px)) or (-webkit-clip-path: polygon(0 0, calc(1% + 1px) 0, 0 1px))) {
  .hero-cut__line {
    display: none;
  }

  @media (min-width: 992px) {
    /* video e velo a tutta larghezza, il velo sfuma da sinistra a destra */
    .hero-cut__video,
    .hero-cut__veil {
      -webkit-clip-path: none;
      clip-path: none;
    }

    .hero-cut__veil {
      background: linear-gradient(90deg, rgb(2, 6, 15) 0%, rgba(2, 6, 15, 0.97) 46%, rgba(2, 6, 15, 0.9) 54%, rgba(2, 6, 15, 0.55) 66%, rgba(2, 6, 15, 0.28) 82%, rgba(2, 6, 15, 0.2) 100%);
    }
  }
}

/* ═══════════════════════════════════════════════════════════
   SAMSUNG FLIP — hero senza ritagli
   Diagnosi del 16/09/2026: browser Chromium 120 che dichiara clip-path
   (CSS.supports e stili calcolati lo confermano) ma non lo disegna mai,
   nemmeno sul poligono piu' semplice. Video, velo e linea diagonale
   venivano dipinti a tutta superficie: l'hero spariva sotto un velo verde
   acqua. Non c'e' modo di accorgersene dal CSS, quindi la classe la mette
   uno script nella testata delle home, riconoscendo la firma del browser.
   Qui l'hero rinuncia alla diagonale: video e velo a tutta larghezza,
   con il velo che sfuma da nero a sinistra a trasparente a destra, dove il
   video mostra i suoi riquadri. Il nero arriva oltre meta' larghezza: a
   2560px (la finestra del Flip) il testo, centrato, arriva al 50% circa. Niente
   linea. Nessun elemento dipende piu' da un ritaglio.
   ═══════════════════════════════════════════════════════════ */
html.fv-noclip .hero-cut__line {
  display: none;
}

html.fv-noclip .hero-cut__video,
html.fv-noclip .hero-cut__veil {
  -webkit-clip-path: none;
  clip-path: none;
}

html.fv-noclip .hero-cut__veil {
  background: linear-gradient(90deg, rgb(2, 6, 15) 0%, rgba(2, 6, 15, 0.97) 46%, rgba(2, 6, 15, 0.9) 54%, rgba(2, 6, 15, 0.55) 66%, rgba(2, 6, 15, 0.28) 82%, rgba(2, 6, 15, 0.2) 100%);
}

@media (max-width: 991px) {
  /* sotto i 992px il video e' una fascia ritagliata: senza ritaglio
     coprirebbe il testo, quindi qui non si mostra */
  html.fv-noclip .hero-cut {
    display: none;
  }
}

/* ==========================================================================
   iPad e tablet in verticale (768–991px)
   Qui il sito usava ancora le griglie del desktop: tre o quattro colonne
   dentro 764px, quindi card da ~200px con le righe che andavano a capo
   ("2 giorni" spezzato in due). In questa fascia si passa a due colonne,
   come sui telefoni larghi, e le card tornano leggibili.
   Le classi doppie (.x.x) servono solo ad avere la precedenza sugli stili
   scritti dentro la pagina, che il browser legge dopo questo foglio.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* prezzi: home e Instant Funding */
  .fv-pr__grid.fv-pr__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Vault: le tre schede del confronto */
  .vs-cards.vs-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The Big 3: numeri e passi. Qui le colonne sono scritte nell'attributo
     style del tag, quindi serve !important come gia' fa pages.css sotto i 700px. */
  .fv-stats-grid,
  .fv-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Live Trading Room: i passi (la regola del sito usa l'id, si pareggia) */
  #fv-live-trading .lt-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Affiliati: la griglia delle schede */
  .fv-grid.fv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Prezzi: pannelli con molte taglie (Ultra 1 Step, 8 conti)
   Da 992px in su otto colonne diventerebbero strisce illeggibili: le card
   restano larghe e la riga scorre in orizzontale. Le frecce e le sfumature
   ai lati le mette pages.js, solo quando la riga scorre davvero.
   Sotto i 992px resta tutto com'era: c'e' gia' lo switcher delle taglie.
   ========================================================================== */
.fv-pr__scroll {
  position: relative;
}

/* frecce e riga d'aiuto esistono solo da 992px in su: sotto c'e' lo
   switcher delle taglie, che mostra una card per volta */
.fv-pr__arrow,
.fv-pr__hint {
  display: none;
}

@media (min-width: 992px) {
  .fv-pr__grid[style*="--fv-pr-cols:8"] {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 1fr);
    overflow-x: auto;
    /* senza questo il browser rende scorrevole anche l'asse verticale e
       taglia il sollevamento della card al passaggio del mouse */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding: 6px 2px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(111, 220, 198, 0.5) rgba(255, 255, 255, 0.06);
  }

  .fv-pr__grid[style*="--fv-pr-cols:8"]::-webkit-scrollbar {
    height: 8px;
  }

  .fv-pr__grid[style*="--fv-pr-cols:8"]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
  }

  .fv-pr__grid[style*="--fv-pr-cols:8"]::-webkit-scrollbar-thumb {
    background: rgba(111, 220, 198, 0.5);
    border-radius: 999px;
  }

  .fv-pr__grid[style*="--fv-pr-cols:8"]::-webkit-scrollbar-thumb:hover {
    background: rgba(111, 220, 198, 0.75);
  }

  /* dentro la riga che scorre la card non si solleva: con overflow nascosto
     verrebbe tagliata, e il movimento appesantisce lo scorrimento */
  .fv-pr__grid[style*="--fv-pr-cols:8"] .fv-pr__card:hover {
    transform: none;
  }

  /* sfumature ai bordi: dicono che c'e' altro da vedere */
  .fv-pr__scroll.is-scroll::before,
  .fv-pr__scroll.is-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 22px;
    width: 64px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .fv-pr__scroll.is-scroll::before {
    left: -2px;
    background: linear-gradient(90deg, rgb(2, 6, 15) 0%, rgba(2, 6, 15, 0) 100%);
  }

  .fv-pr__scroll.is-scroll::after {
    right: -2px;
    background: linear-gradient(270deg, rgb(2, 6, 15) 0%, rgba(2, 6, 15, 0) 100%);
  }

  .fv-pr__scroll.is-scroll:not(.at-start)::before,
  .fv-pr__scroll.is-scroll:not(.at-end)::after {
    opacity: 1;
  }

  /* frecce */
  .fv-pr__scroll.is-scroll .fv-pr__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 1px solid rgba(111, 220, 198, 0.35);
    border-radius: 50%;
    background: rgba(4, 12, 25, 0.92);
    color: #6fdcc6;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease;
  }

  .fv-pr__scroll.is-scroll .fv-pr__arrow {
    opacity: 1;
  }

  .fv-pr__arrow[disabled] {
    opacity: 0 !important;
    pointer-events: none;
  }

  .fv-pr__scroll.is-scroll .fv-pr__arrow:hover {
    background: rgba(69, 200, 180, 0.18);
    transform: scale(1.06);
  }

  .fv-pr__scroll.is-scroll .fv-pr__arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .fv-pr__scroll.is-scroll .fv-pr__arrow--prev {
    left: -14px;
  }

  .fv-pr__scroll.is-scroll .fv-pr__arrow--next {
    right: -14px;
  }

  /* riga d'aiuto sotto la fascia, in chiaro: "si scorre" */
  .fv-pr__scroll.is-scroll + .fv-pr__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 13px;
    color: rgba(244, 247, 245, 0.55);
  }

  .fv-pr__hint svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #6fdcc6;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}