/* fv-design.css — il nostro strato di design.
   1) Sistema di componenti (classi fv-*)
   2) Ritocchi al sito: tipografia, header, bottoni
   Va caricato per ultimo. */

/* ===== fv-ui.css ===== */
/* ============================================================
   FV-UI — Sistema di componenti FundedVerse  ·  v2
   ------------------------------------------------------------
   Stile pulito e moderno.
   File ADDITIVO: agisce solo sulle classi "fv-*", quindi non
   modifica nulla del sito finche' non lo usiamo.
   ============================================================ */

/* ============================================================
   1. TOKEN 
   ============================================================ */
:root {
  /* --- Marchio (identita' FundedVerse, invariata) --- */
  --fv-teal: #45c8b4;
  --fv-teal-600: #37b6a4;
  --fv-teal-700: #2fa293;
  --fv-teal-900: #174b45;
  --fv-teal-050: #e8f6f4;
  --fv-teal-100: #d4efe9;

  --fv-ink: #141415;
  --fv-ink-900: #0e0e0f;

  /* --- SEZIONE SCURA --- */
  --fv-dark-bg: #141415;
  --fv-dark-surface: #1a1a1c;
  --fv-dark-raised: #202024;
  --fv-dark-text: #f4f7f5;
  --fv-dark-muted: #f4f7f5a8;
  --fv-dark-faint: #f4f7f566;
  --fv-dark-line: #ffffff14;
  --fv-dark-line-str: #ffffff2e;
  --fv-dark-shadow: 0 18px 52px rgba(0, 0, 0, 0.45);
  /* vetro smerigliato — identita' FundedVerse */
  --fv-dark-glass: rgba(20, 20, 21, 0.55);
  --fv-dark-glass-line: rgba(255, 255, 255, 0.12);
  --fv-dark-glass-top: rgba(255, 255, 255, 0.14);

  /* --- SEZIONE CHIARA --- */
  --fv-light-bg: #f7faf9;
  --fv-light-surface: #ffffff;
  --fv-light-raised: #f2f6f5;
  --fv-light-text: #141415;
  --fv-light-muted: #141415a3;
  --fv-light-faint: #14141566;
  --fv-light-line: #14141514;
  --fv-light-line-str: #1414152e;
  --fv-light-shadow: 0 18px 52px rgba(20, 32, 30, 0.1), 0 1px 2px rgba(20, 32, 30, 0.06);
  --fv-light-glass: rgba(255, 255, 255, 0.62);
  --fv-light-glass-line: rgba(255, 255, 255, 0.85);
  --fv-light-glass-top: rgba(255, 255, 255, 0.9);

  /* intensita' della sfocatura (una manopola sola per tutto il sito) */
  --fv-blur: 18px;

  /* --- Variabili attive (cambiano col tema di sezione) --- */
  --fv-bg: var(--fv-dark-bg);
  --fv-surface: var(--fv-dark-surface);
  --fv-raised: var(--fv-dark-raised);
  --fv-text: var(--fv-dark-text);
  --fv-muted: var(--fv-dark-muted);
  --fv-faint: var(--fv-dark-faint);
  --fv-line: var(--fv-dark-line);
  --fv-line-str: var(--fv-dark-line-str);
  --fv-shadow: var(--fv-dark-shadow);
  --fv-glass: var(--fv-dark-glass);
  --fv-glass-line: var(--fv-dark-glass-line);
  --fv-glass-top: var(--fv-dark-glass-top);

  /* --- Struttura --- */
  --fv-container: 1120px;
  --fv-gutter: 24px;
  --fv-section-y: clamp(72px, 9vw, 126px);

  /* --- Raggi --- */
  --fv-radius-btn: 8px;
  --fv-radius-card: 16px;
  --fv-radius-panel: 24px;
  --fv-radius-pill: 999px;

  /* --- Tipografia --- */
  --fv-weight-heading: 600;
  --fv-h1: clamp(40px, 5.6vw, 80px);
  --fv-h2: clamp(30px, 3.2vw, 44px);
  --fv-h3: clamp(20px, 2.2vw, 24px);

  --fv-t: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Browser senza clamp() (Chromium < 79, es. Samsung Flip): una variabile
   con un valore che il browser non capisce annulla la proprieta' che la
   usa, invece di ripiegare su una riga precedente. Qui le variabili fluide
   ricevono il loro valore massimo, adatto ai display grandi. */
@supports not (width: clamp(1px, 1vw, 2px)) {
  :root {
    --fv-section-y: 126px;
    --fv-h1: 80px;
    --fv-h2: 44px;
    --fv-h3: 24px;
  }
}

/* ============================================================
   2. SEZIONI
   ============================================================ */
.fv-section {
  position: relative;
  padding-block: var(--fv-section-y);
  background: var(--fv-bg);
  color: var(--fv-text);
}

.fv-section--dark {
  --fv-bg: var(--fv-dark-bg);
  --fv-surface: var(--fv-dark-surface);
  --fv-raised: var(--fv-dark-raised);
  --fv-text: var(--fv-dark-text);
  --fv-muted: var(--fv-dark-muted);
  --fv-faint: var(--fv-dark-faint);
  --fv-line: var(--fv-dark-line);
  --fv-line-str: var(--fv-dark-line-str);
  --fv-shadow: var(--fv-dark-shadow);
  --fv-glass: var(--fv-dark-glass);
  --fv-glass-line: var(--fv-dark-glass-line);
  --fv-glass-top: var(--fv-dark-glass-top);
}
.fv-section--light {
  --fv-bg: var(--fv-light-bg);
  --fv-surface: var(--fv-light-surface);
  --fv-raised: var(--fv-light-raised);
  --fv-text: var(--fv-light-text);
  --fv-muted: var(--fv-light-muted);
  --fv-faint: var(--fv-light-faint);
  --fv-line: var(--fv-light-line);
  --fv-line-str: var(--fv-light-line-str);
  --fv-shadow: var(--fv-light-shadow);
  --fv-glass: var(--fv-light-glass);
  --fv-glass-line: var(--fv-light-glass-line);
  --fv-glass-top: var(--fv-light-glass-top);
}
.fv-section--tint {
  --fv-bg: var(--fv-teal-050);
  --fv-surface: #ffffff;
  --fv-raised: var(--fv-teal-100);
  --fv-text: var(--fv-light-text);
  --fv-muted: var(--fv-light-muted);
  --fv-faint: var(--fv-light-faint);
  --fv-line: var(--fv-light-line);
  --fv-line-str: var(--fv-light-line-str);
  --fv-shadow: var(--fv-light-shadow);
}
/* nero pieno, per momenti di forte impatto */
.fv-section--black {
  --fv-bg: var(--fv-ink-900);
}

.fv-section--tight {
  padding-block: 72px;
  padding-block: clamp(48px, 5vw, 72px);
}

/* sezione con immagine/video di sfondo: il contesto ideale per il vetro */
.fv-section--media {
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.fv-section--media::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 20, 21, 0.55), rgba(20, 20, 21, 0.75));
}

.fv-container {
  position: relative;
  width: 100%;
  max-width: var(--fv-container);
  margin-inline: auto;
  padding-inline: var(--fv-gutter);
}
.fv-container--narrow {
  max-width: 800px;
}

/* --- Glow decorativo (la sfumatura soffusa di FundingPips) --- */
.fv-glow {
  position: absolute;
  left: 0; right: 0;
  top: -10%;
  height: 70%;
  pointer-events: none;
  background:
    radial-gradient(50% 50% at 30% 40%, rgba(69, 200, 180, 0.16), transparent 70%),
    radial-gradient(40% 45% at 75% 30%, rgba(69, 200, 180, 0.08), transparent 70%);
  filter: blur(8px);
}

/* ============================================================
   3. TESTA DI SEZIONE
   ============================================================ */
.fv-head {
  max-width: 720px;
  margin-bottom: 56px;
}
.fv-head--center {
  margin-inline: auto;
  text-align: center;
}

.fv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fv-teal);
  margin-bottom: 16px;
}
.fv-eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.fv-head--center .fv-eyebrow::before {
  display: none;
}

.fv-title {
  font-size: var(--fv-h2);
  font-weight: var(--fv-weight-heading);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--fv-text);
  margin: 0;
  text-wrap: balance;
}
.fv-title--xl {
  font-size: var(--fv-h1);
  line-height: 1.05;
  letter-spacing: -0.038em;
}
.fv-title em {
  font-style: normal;
  color: var(--fv-teal);
}

.fv-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fv-muted);
  margin: 18px 0 0;
  text-wrap: pretty;
}

/* ============================================================
   4. BOTTONI
   ============================================================ */
.fv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding-inline: 24px;
  border-radius: var(--fv-radius-btn);
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--fv-t),
    border-color var(--fv-t),
    color var(--fv-t),
    box-shadow var(--fv-t),
    transform var(--fv-t);
}
.fv-btn:focus-visible {
  outline: 2px solid var(--fv-teal);
  outline-offset: 2px;
}
.fv-btn:active {
  transform: translateY(1px);
}
.fv-btn .fv-i {
  width: 18px;
  height: 18px;
}

.fv-btn--primary {
  background: var(--fv-teal);
  color: #062019;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}
.fv-btn--primary:hover {
  background: var(--fv-teal-600);
  box-shadow: 0 6px 18px rgba(69, 200, 180, 0.28);
}

.fv-btn--secondary {
  background: transparent;
  border-color: var(--fv-line-str);
  color: var(--fv-text);
}
.fv-btn--secondary:hover {
  border-color: color-mix(in srgb, var(--fv-text) 45%, transparent);
  background: color-mix(in srgb, var(--fv-text) 5%, transparent);
}

/* pieno, in contrasto col fondo — per le CTA su sezione chiara */
.fv-btn--contrast {
  background: var(--fv-text);
  color: var(--fv-bg);
}
.fv-btn--contrast:hover {
  background: color-mix(in srgb, var(--fv-text) 85%, var(--fv-bg));
}

.fv-btn--ghost {
  background: transparent;
  color: var(--fv-text);
  padding-inline: 12px;
}
.fv-btn--ghost:hover {
  background: color-mix(in srgb, var(--fv-text) 7%, transparent);
}

.fv-btn--lg {
  height: 56px;
  padding-inline: 32px;
  font-size: 16px;
}
.fv-btn--sm {
  height: 38px;
  padding-inline: 16px;
  font-size: 14px;
}
.fv-btn--block {
  display: flex;
  width: 100%;
}

.fv-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.fv-head--center .fv-btns {
  justify-content: center;
}

/* ============================================================
   5. CHIP / BADGE
   ============================================================ */
.fv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding-inline: 14px;
  border-radius: var(--fv-radius-pill);
  border: 1px solid var(--fv-line);
  background: color-mix(in srgb, var(--fv-text) 4%, transparent);
  font-size: 14px;
  font-weight: 500;
  color: var(--fv-text);
}
.fv-chip .fv-i {
  width: 16px;
  height: 16px;
  color: var(--fv-teal);
}
.fv-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fv-teal);
}

.fv-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--fv-teal) 16%, transparent);
  color: var(--fv-teal);
}
.fv-badge--solid {
  background: var(--fv-teal);
  color: #062019;
}

/* ============================================================
   6. CARD
   ============================================================ */
.fv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fv-surface);
  border: 1px solid var(--fv-line);
  border-radius: var(--fv-radius-card);
  padding: 28px;
  transition:
    border-color var(--fv-t),
    transform var(--fv-t),
    box-shadow var(--fv-t);
}
.fv-card--hover:hover {
  border-color: color-mix(in srgb, var(--fv-teal) 50%, transparent);
  transform: translateY(-3px);
  box-shadow: var(--fv-shadow);
}

.fv-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fv-teal) 14%, transparent);
  color: var(--fv-teal);
  margin-bottom: 20px;
}
.fv-card__icon .fv-i {
  width: 22px;
  height: 22px;
}

.fv-card__title {
  font-size: 18px;
  font-weight: var(--fv-weight-heading);
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--fv-text);
  margin: 0 0 8px;
}
.fv-card__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fv-muted);
  margin: 0;
}
.fv-card__foot {
  margin-top: auto;
  padding-top: 20px;
}

/* ------------------------------------------------------------
   VETRO SMERIGLIATO 
   Da usare sopra immagini, video o gradienti: e' li' che rende.
   Su fondo piatto degrada elegantemente in una card traslucida.
   ------------------------------------------------------------ */
.fv-glass {
  position: relative;
  background: var(--fv-glass);
  -webkit-backdrop-filter: blur(var(--fv-blur)) saturate(140%);
  backdrop-filter: blur(var(--fv-blur)) saturate(140%);
  border: 1px solid var(--fv-glass-line);
  /* filo di luce sul bordo superiore: e' cio' che fa "vetro" e non "velo" */
  box-shadow:
    inset 0 1px 0 var(--fv-glass-top),
    var(--fv-shadow);
}
.fv-glass--soft {
  --fv-blur: 12px;
}
.fv-glass--strong {
  --fv-blur: 28px;
}

/* la card e il pannello ereditano il vetro senza perdere il resto.
   Selettore doppio: serve a battere .fv-card / .fv-panel, che sono
   definiti piu' sotto e altrimenti sovrascriverebbero bordo e ombra. */
.fv-card.fv-glass,
.fv-panel.fv-glass {
  background: var(--fv-glass);
  border-color: var(--fv-glass-line);
  box-shadow:
    inset 0 1px 0 var(--fv-glass-top),
    var(--fv-shadow);
}
.fv-card--glass:hover {
  border-color: color-mix(in srgb, var(--fv-teal) 45%, var(--fv-glass-line));
}

/* chip di vetro */
.fv-chip.fv-glass {
  box-shadow: inset 0 1px 0 var(--fv-glass-top);
}

/* barra di navigazione in vetro (header sticky) */
.fv-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--fv-glass);
  -webkit-backdrop-filter: blur(var(--fv-blur)) saturate(140%);
  backdrop-filter: blur(var(--fv-blur)) saturate(140%);
  border-bottom: 1px solid var(--fv-glass-line);
}

/* fallback: se il browser non supporta backdrop-filter, rendiamo il
   fondo piu' opaco cosi' il testo resta sempre leggibile */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fv-glass,
  .fv-nav {
    background: var(--fv-surface);
  }
}

/* --- Pannello grande: la "firma" di FundingPips --- */
.fv-panel {
  background: var(--fv-surface);
  border: 1px solid var(--fv-line);
  border-radius: var(--fv-radius-panel);
  padding: 56px;
  padding: clamp(28px, 4vw, 56px);
  box-shadow: var(--fv-shadow);
}

/* ============================================================
   7. STAT
   ============================================================ */
.fv-stat__value {
  font-size: 42px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: var(--fv-weight-heading);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--fv-text);
  font-variant-numeric: tabular-nums;
}
.fv-stat__label {
  font-size: 14px;
  color: var(--fv-muted);
  margin-top: 6px;
}
.fv-stat--row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fv-stat--row .fv-card__icon {
  margin: 0;
  width: 40px;
  height: 40px;
}

/* ============================================================
   8. STEP numerato
   ============================================================ */
.fv-step__num {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fv-faint);
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fv-step__num b {
  color: var(--fv-teal);
  font-weight: 600;
}

/* ============================================================
   9. PREZZI
   ============================================================ */
.fv-price__size {
  font-size: 14px;
  font-weight: 600;
  color: var(--fv-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fv-price__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 40px;
  font-weight: var(--fv-weight-heading);
  letter-spacing: -0.03em;
  color: var(--fv-text);
  font-variant-numeric: tabular-nums;
  margin: 10px 0 4px;
}
.fv-price__value small {
  font-size: 15px;
  font-weight: 500;
  color: var(--fv-muted);
}
.fv-price__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.fv-price__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--fv-muted);
  line-height: 1.5;
}
.fv-price__list .fv-i {
  width: 18px;
  height: 18px;
  color: var(--fv-teal);
  flex: none;
  margin-top: 1px;
}
.fv-card--featured {
  border-color: color-mix(in srgb, var(--fv-teal) 55%, transparent);
  box-shadow: var(--fv-shadow);
}

/* ============================================================
   10. FAQ (accordion, senza JS)
   ============================================================ */
.fv-faq {
  border-top: 1px solid var(--fv-line);
}
.fv-faq details {
  border-bottom: 1px solid var(--fv-line);
}
.fv-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fv-text);
  transition: color var(--fv-t);
}
.fv-faq summary::-webkit-details-marker {
  display: none;
}
.fv-faq summary:hover {
  color: var(--fv-teal);
}
.fv-faq summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--fv-t);
}
.fv-faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.fv-faq p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fv-muted);
  max-width: 72ch;
}

/* ============================================================
   11. CITAZIONE / testimonial
   ============================================================ */
.fv-quote__text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fv-text);
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.fv-quote__who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fv-quote__av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  background: color-mix(in srgb, var(--fv-teal) 22%, transparent);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--fv-teal);
}
.fv-quote__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fv-text);
}
.fv-quote__role {
  font-size: 13px;
  color: var(--fv-muted);
}
.fv-stars {
  display: flex;
  gap: 2px;
  color: var(--fv-teal);
  margin-bottom: 14px;
}
.fv-stars .fv-i {
  width: 15px;
  height: 15px;
}

/* ============================================================
   12. STRISCIA LOGHI
   ============================================================ */
.fv-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  gap: clamp(24px, 5vw, 56px);
  justify-content: center;
}
.fv-logos img,
.fv-logos span {
  opacity: 0.55;
  filter: grayscale(1);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fv-text);
  transition: opacity var(--fv-t);
}
.fv-logos :hover {
  opacity: 0.9;
}

/* ============================================================
   13. FORM
   ============================================================ */
.fv-field {
  display: grid;
  gap: 8px;
}
.fv-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--fv-text);
}
.fv-input {
  height: 48px;
  padding-inline: 14px;
  background: color-mix(in srgb, var(--fv-text) 4%, transparent);
  border: 1px solid var(--fv-line-str);
  border-radius: var(--fv-radius-btn);
  color: var(--fv-text);
  font: inherit;
  font-size: 15px;
  transition:
    border-color var(--fv-t),
    box-shadow var(--fv-t);
}
.fv-input::placeholder {
  color: var(--fv-faint);
}
.fv-input:focus {
  outline: none;
  border-color: var(--fv-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fv-teal) 20%, transparent);
}

/* ============================================================
   14. TABELLA
   ============================================================ */
.fv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.fv-table th,
.fv-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--fv-line);
}
.fv-table th {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fv-muted);
}
.fv-table td {
  color: var(--fv-muted);
}
.fv-table td:first-child {
  color: var(--fv-text);
  font-weight: 500;
}
.fv-table tbody tr:hover td {
  background: color-mix(in srgb, var(--fv-text) 3%, transparent);
}

/* ============================================================
   15. GRIGLIE E UTILITY
   ============================================================ */
.fv-grid {
  display: grid;
  gap: 16px;
}
.fv-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.fv-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.fv-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.fv-grid--split {
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.fv-divider {
  height: 1px;
  background: var(--fv-line);
  border: 0;
  margin: 0;
}
.fv-i {
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 991px) {
  .fv-grid--3,
  .fv-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .fv-grid--split {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 599px) {
  .fv-grid--2,
  .fv-grid--3,
  .fv-grid--4 {
    grid-template-columns: 1fr;
  }
  .fv-head {
    margin-bottom: 36px;
  }
  .fv-card {
    padding: 22px;
  }
}

/* ===== fv-overrides.css ===== */
/* ============================================================
   FV-OVERRIDES — ritocchi al tema esistente
   ------------------------------------------------------------
   Unico file con tutte le modifiche al tema WordPress originale.
   Non contiene componenti nuovi: quelli stanno in fv-ui.css.

   INDICE
     1. Tipografia (Inter: tracking, resa, numeri)
     2. Header e top bar
     3. Bottoni uniformati (raggio 8px, peso 500)

   Va caricato PER ULTIMO, dopo fv-ui.css.
   ============================================================ */

/* ============================================================
   TIPOGRAFIA — rifiniture su Inter
   ============================================================ */
/* ============================================================
   TIPOGRAFIA — rifiniture (Inter)
   ------------------------------------------------------------
   Questo file viene caricato PER ULTIMO e contiene solo
   rifiniture tipografiche: nessun colore, nessun layout.
   Per annullare tutto basta togliere il <link> dalle pagine.
   ============================================================ */

/* ---- 1. Resa del testo ------------------------------------
   Inter e' un font variabile con asse "optical size": con
   optical-sizing attivo i titoli grandi vengono disegnati con
   proporzioni piu' eleganti. L'antialiasing rende il testo
   chiaro su fondo scuro meno pesante.                        */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

body {
  /* legature e alternative contestuali di Inter */
  font-feature-settings:
    'liga' 1,
    'calt' 1;
}

/* ---- 2. Tracking dei titoli -------------------------------
   Prima era in px (es. -0.32px su un titolo da 64px: quasi
   invisibile). In em il valore scala insieme al titolo, che
   e' cio' che rende la tipografia compatta e moderna.
   Piu' il titolo e' grande, piu' il tracking e' stretto.     */
h1,
.h1 {
  letter-spacing: -0.032em;
}
h2,
.h2 {
  letter-spacing: -0.028em;
}
h3,
.h3 {
  letter-spacing: -0.025em;
}
h4,
.h4 {
  letter-spacing: -0.022em;
}
h5,
.h5 {
  letter-spacing: -0.018em;
}
h6,
.h6 {
  letter-spacing: -0.014em;
}

/* ---- 3. Titoli di sezione del tema ------------------------
   Classi storiche che non avevano tracking: senza questo
   restano larghe e "slegate" rispetto al resto.              */
.s-title,
.sect-title .s-title,
.ecosystem-head_title,
.ecosystem-mid_title,
.ecosystem-card_title,
.ecosystem-community_title,
.ecosystem-platforms_title,
.cta-challenge_title,
.cta-support_title,
.cta-community_title,
.challenge-brief_title,
.media-video_title,
.blog-page-title .s-title,
.blog-detail_heading .title_detail {
  letter-spacing: -0.025em;
}

/* ---- 4. Numeri ------------------------------------------
   Cifre a larghezza fissa: prezzi, statistiche e contatori
   animati non "ballano" piu' mentre cambiano.                */
.fv-stats__value,
.pricing-price,
.pricing-account_size,
.calc-price_new,
.calc-price_old,
.odometer,
.hero-match-main {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.02em;
}

/* ---- 5. Testo di lettura ---------------------------------
   Leggerissimo ammorbidimento del tracking: Inter a 16-18px
   non ha bisogno di stringere quanto i titoli.               */
p,
.text-body-1,
.text-body-2 {
  letter-spacing: -0.01em;
}

/* ---- 6. Etichette maiuscole ------------------------------
   Le piccole scritte tutte maiuscole (kicker, tag, eyebrow)
   hanno bisogno del movimento OPPOSTO: piu' spaziate.        */
.fv-kicker,
.lt-eyebrow,
.lt-section-label,
.sect-title .sub-title,
.sub-title {
  letter-spacing: 0.08em;
}

/* ============================================================
   HEADER + TOP BAR
   ============================================================ */
/* ============================================================
   HEADER + TOP BAR — restyle nello stile fv-ui
   ------------------------------------------------------------
   Solo CSS: il markup resta identico, quindi continuano a
   funzionare header sticky, copia-codice promo, indicatore
   scorrevole del menu e menu mobile (offcanvas Bootstrap).
   Caricare DOPO fv-ui.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOP BAR (promo) — da riquadro arrotondato a striscia piena
   ------------------------------------------------------------ */
.tf-header {
  padding-bottom: 0;
}

.tf-header .promo-banner {
  /* esce dal container e occupa tutta la larghezza */
  margin: 0 calc(-50vw + 50%);
  width: 100vw;
  /* Niente min-height: il JS chiude il banner con slideUp(), che anima
     l'altezza fino a zero. Un'altezza minima bloccherebbe l'animazione.
     L'altezza (40px) nasce da padding + interlinea del testo. */
  padding: 10px 56px 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-bottom: 1px solid var(--fv-dark-glass-line);
  border-radius: 0;
  background: color-mix(in srgb, var(--fv-teal) 14%, rgba(10, 10, 11, 0.82));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.tf-header .promo-banner_text {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #f4f7f5cc;
  text-align: center;
}
.tf-header .promo-banner_highlight {
  color: #f4f7f5;
}

.tf-header .promo-code-copy {
  background: none;
  border: 0;
  padding: 0 2px;
  color: var(--fv-teal);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}
.tf-header .promo-code-copy:hover {
  color: #fff;
  text-decoration: underline;
}

/* Correzione di un difetto preesistente del tema: il fumetto "Copied"
   riceveva la classe .is-visible dal JS ma restava invisibile.
   Qui alziamo la specificita' per farlo comparire davvero. */
.tf-header .promo-banner .promo-copy-popover.is-visible {
  opacity: 1;
  visibility: visible;
}

.tf-header .promo-banner_close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #f4f7f57a;
  cursor: pointer;
  transition:
    background 180ms ease,
    color 180ms ease;
  /* nel markup c'e' una "x" minuscola: la nascondiamo e usiamo
     il simbolo tipografico corretto, senza toccare l'HTML */
  font-size: 0;
}
.tf-header .promo-banner_close::before {
  content: '\00d7';
  font-size: 18px;
  line-height: 1;
}
.tf-header .promo-banner_close:hover {
  background: #ffffff1a;
  color: #f4f7f5;
}

/* ------------------------------------------------------------
   2. BARRA PRINCIPALE — vetro
   ------------------------------------------------------------ */
.tf-header .container > .row {
  min-height: 72px;
  padding-inline: 8px;
}

/* il vetro si applica sulla barra, non sulla top bar */
.tf-header::after {
  content: '';
  position: absolute;
  top: auto; right: 0; bottom: 0; left: 0;
  height: 1px;
  background: var(--fv-dark-glass-line);
  opacity: 0;
  transition: opacity 240ms ease;
}

.tf-header.header-sticky {
  background: rgba(16, 16, 17, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.tf-header.header-sticky::after {
  opacity: 1;
}

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

/* ------------------------------------------------------------
   3. VOCI DI MENU — link di testo, non bottoni
   ------------------------------------------------------------ */
.tf-header .main-nav_menu {
  gap: 8px;
}

.tf-header .menu-item a.tf-btn {
  height: 38px;
  padding-inline: 14px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #f4f7f5b0;
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  border-radius: 8px;
  transition: color 180ms ease;
}
.tf-header .menu-item a.tf-btn:hover {
  color: #f4f7f5;
}

/* indicatore scorrevole: piu' discreto */
.tf-header .menu-indicator {
  border-color: transparent;
  background-color: #ffffff12;
  backdrop-filter: none;
  border-radius: 8px;
}

/* ------------------------------------------------------------
   4. AZIONI A DESTRA
   ------------------------------------------------------------ */
.tf-header .header-right .btn_group {
  gap: 10px;
  align-items: center;
}

/* "Log in" — secondario */
.tf-header .header-right .tf-btn:not(.style-2):not(.btn-menu_mobile) {
  height: 42px;
  padding-inline: 18px;
  border-radius: var(--fv-radius-btn, 8px);
  font-size: 15px;
  font-weight: 500;
  color: #f4f7f5;
  background: transparent;
  border: 1px solid #ffffff2e;
  backdrop-filter: none;
  transition:
    border-color 180ms ease,
    background 180ms ease;
}
.tf-header .header-right .tf-btn:not(.style-2):not(.btn-menu_mobile):hover {
  border-color: #ffffff5c;
  background: #ffffff0d;
}

/* "Start Challenge" — primario teal */
.tf-header .header-right .tf-btn.style-2 {
  height: 42px;
  padding-inline: 20px;
  border-radius: var(--fv-radius-btn, 8px);
  font-size: 15px;
  font-weight: 500;
  color: #062019;
  background: var(--fv-teal, #45c8b4);
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition:
    background 180ms ease,
    box-shadow 180ms ease;
}
.tf-header .header-right .tf-btn.style-2:hover {
  background: var(--fv-teal-600, #37b6a4);
  box-shadow: 0 6px 18px rgba(69, 200, 180, 0.28);
}

/* bottone menu mobile */
.tf-header .btn-menu_mobile {
  height: 42px;
  width: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--fv-radius-btn, 8px);
  border: 0;
  background: transparent;
  color: #f4f7f5;
  backdrop-filter: none;
}
/* solo col mouse: su touch l'hover resta "appiccicato" dopo il tap
   e lo sfondo rimaneva acceso a menu chiuso */
@media (hover: hover) and (pointer: fine) {
  .tf-header .btn-menu_mobile:hover {
    background: #ffffff0d;
  }
}

/* focus visibile — accessibilita' */
.tf-header a:focus-visible,
.tf-header button:focus-visible {
  outline: 2px solid var(--fv-teal, #45c8b4);
  outline-offset: 2px;
}

/* il toggle del menu riceve il focus da Bootstrap alla chiusura
   dell'offcanvas: contorno e sfondo restavano accesi a menu chiuso.
   Dopo il tap deve tornare pulito come prima. */
.tf-header .btn-menu_mobile:focus,
.tf-header .btn-menu_mobile:focus-visible,
.tf-header .btn-menu_mobile:active {
  outline: none;
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* ------------------------------------------------------------
   5. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  .tf-header .container > .row {
    min-height: 64px;
  }
  .tf-header .logo-site img {
    width: 148px;
  }
  .tf-header .header-right .tf-btn.style-2 {
    padding-inline: 14px;
    font-size: 14px;
  }
}
@media (max-width: 575px) {
  .tf-header .promo-banner {
    padding: 8px 44px 8px 16px;
  }
  .tf-header .promo-banner_text {
    font-size: 12px;
  }
}

/* ============================================================
   BOTTONI — uniformati allo standard
   ============================================================ */
/* ============================================================
   BOTTONI — uniformati allo standard concordato
   ------------------------------------------------------------
   Standard: raggio 8px · peso 500 · testo 15px · altezza 48px
   (42px nell'header, gia' gestito in fv-header.css)

   Nota sugli !important: il tema ha cinque strati sovrapposti di
   regole !important su .tf-btn (raggio 8→10→14→12, altezza
   32→42→54→48, peso 600). Per uniformare davvero serve la stessa
   arma, altrimenti non passa nulla.

   Restano volutamente a "pillola": chip, badge ed elementi di
   commutazione (switch dei prezzi). E' la regola del sistema:
   i BOTTONI sono a 8px, le ETICHETTE sono pillole.
   Caricare DOPO fv-header.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. VOCI DI MENU — peso normale, non grassetto
   ------------------------------------------------------------ */
.tf-header .menu-item a.tf-btn,
.tf-header .main-nav_menu .tf-btn {
  font-weight: 400 !important;
}
/* la voce attiva resta leggermente piu' marcata */
.tf-header .menu-item.active a.tf-btn,
.tf-header .menu-item a.tf-btn.active {
  font-weight: 500 !important;
  color: #f4f7f5 !important;
}

/* menu mobile: stessa leggerezza */
#mobileMenu .mb-item-link {
  font-weight: 400 !important;
}

/* ------------------------------------------------------------
   2. BOTTONE BASE
   ------------------------------------------------------------ */
.tf-btn {
  border-radius: 8px !important;
  height: 48px !important;
  padding: 0 24px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
}
.tf-btn .text-body-3,
.tf-btn .text-body-2,
.tf-btn span {
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* varianti di altezza del tema, riportate a misure coerenti */
.tf-btn.style-high {
  height: 44px !important;
}
.tf-btn.style-high-2 {
  height: 48px !important;
}
.tf-btn.style-4 {
  height: 44px !important;
}
.tf-btn-tab {
  border-radius: 8px !important;
  height: 40px !important;
  font-weight: 500 !important;
}

/* CTA dell'hero */
.section-hero .hero-main-grid .hero-cta .tf-btn {
  height: 52px !important;
  padding: 0 28px !important;
}

/* header: resta compatto (definito in fv-header.css) */
.tf-header .tf-btn {
  height: 42px !important;
  border-radius: 8px !important;
  padding: 0 18px !important;
}
.tf-header .menu-item a.tf-btn {
  height: 38px !important;
  padding: 0 14px !important;
}
.tf-header .tf-btn .text-body-3 {
  font-size: 15px !important;
}
.tf-header .btn-menu_mobile {
  width: 42px !important;
  padding: 0 !important;
}

/* ------------------------------------------------------------
   3. BOTTONI DELLE SINGOLE PAGINE (erano a pillola)
   ------------------------------------------------------------ */
/* careers */
.fv-btn-primary,
.fv-btn-secondary,
.fv-apply-btn,
.fv-form-wrap input[type="file"]::file-selector-button,
.fv-form-wrap .ff-btn-submit,
.fv-form-wrap button[type="submit"],
/* master affiliate */
.fv-ma-btn-primary,
.fv-ma-btn-secondary,
.fv-ma-cta-banner-btn,
.fv-ma-form-wrap .ff-btn-submit,
.fv-ma-form-wrap button[type="submit"],
/* live room */
#fv-live-trading .lt-cta,
/* ecosistema */
.ecosystem-community_btn,
/* blocchi WordPress */
.wp-block-button__link {
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  /* senza questo il bordo del bottone secondario si somma
     all'altezza e resta 2px piu' alto del primario */
  box-sizing: border-box !important;
}

/* Scala delle altezze, per non ritrovarsi 48/52/54 sparsi:
     header 42 · standard 48 · CTA principali 52
   Uso min-height (non height) perche' questi bottoni si
   dimensionano col padding: forzare l'altezza li spezzerebbe. */
.fv-btn-primary,
.fv-btn-secondary,
.fv-ma-btn-primary,
.fv-ma-btn-secondary,
.fv-ma-cta-banner-btn,
#fv-live-trading .lt-cta {
  min-height: 52px !important;
  height: auto !important;
}
/* Le varianti BORDATE hanno 1px di bordo per lato che si somma
   all'altezza guidata dal padding (14+14+24 = 52 + 2 = 54).
   Tolgo 1px di padding per lato cosi' combaciano col primario. */
.fv-btn-secondary,
.fv-ma-btn-secondary {
  padding-block: 13px !important;
}

.fv-apply-btn,
.fv-form-wrap .ff-btn-submit,
.fv-form-wrap button[type='submit'],
.fv-ma-form-wrap .ff-btn-submit,
.fv-ma-form-wrap button[type='submit'],
.ecosystem-community_btn,
.wp-block-button__link {
  min-height: 48px !important;
  height: auto !important;
}

/* ------------------------------------------------------------
   4. FOCUS VISIBILE — accessibilita'
   ------------------------------------------------------------ */
.tf-btn:focus-visible,
.fv-btn-primary:focus-visible,
.fv-btn-secondary:focus-visible,
.fv-apply-btn:focus-visible,
.fv-ma-btn-primary:focus-visible,
.fv-ma-btn-secondary:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--fv-teal, #45c8b4) !important;
  outline-offset: 2px !important;
}

/* ------------------------------------------------------------
   5. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 575px) {
  .tf-btn {
    height: 46px !important;
    padding: 0 20px !important;
  }
  .section-hero .hero-main-grid .hero-cta .tf-btn {
    height: 48px !important;
    padding: 0 22px !important;
  }
}