/* Vidim Numbers — 34:1440 · 1512 x 1058
   Flusso verticale: 160 + 93 + 80 + 442 + 80 + 43 + 160 = 1058
   Fondo: gradiente verticale #00122b -> #29384d (= .section--dark) */

.vnum {
  gap: var(--space-6);            /* 80 tra Text, Cards e Pulsanti */
}

/* --- Text 34:1441 — 1432 x 93, column, align-items center, gap 16 -------- */
.vnum__head {
  width: var(--container-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.vnum__h2   { width: 100%; text-align: center; color: var(--color-white); }        /* 34:1443 — 48/58, 1 riga */
.vnum__lead { width: 100%; text-align: center; color: var(--text-on-dark-muted); } /* 34:1444 — 16/19, 1 riga */

/* --- Cards 34:1445 — 1432 x 442 -----------------------------------------
   Griglia 4 colonne 1fr, gap 16: (1432 - 3*16) / 4 = 346.
   Righe: 285 (4 card) + 16 + 115 (card larga) + 16 + 10 (nota) = 442. */
.vnum__cards {
  width: var(--container-width);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

/* --- Le 4 Card statistiche (34:1542 / 34:1554 / 34:1560 / 34:1566) -------
   Altezza fissa 285 = 40 + 87 (Number) + 80 + 38 (label 2 righe) + 40.
   space-between riproduce entrambe le varianti Figma (space-between / gap 80):
   con label a 1 riga la base resta a 245, quindi y label = 226. */
.vnum-card {
  height: 285px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-tertiary-400);   /* #29384d, tinta piatta */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

/* Number 34:1551 — row, gap 0, align-items flex-start, box 266 x 87 ---------
   Il top del suffisso coincide col top della cap-height della cifra: NON e un
   allineamento sulla baseline, e il semplice flex-start tra il box trimmato
   della cifra (87px) e il box non trimmato del suffisso (19px). */
.vnum-num {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  white-space: nowrap;
}
.vnum-num__digit  { color: var(--color-white); }              /* 120px, cap-trim -> 87 */
.vnum-num__suffix { color: var(--text-on-dark-muted); }       /* 16/19, nessun trim */

/* Label 34:1548 / 34:1558 / 34:1564 / 34:1570 — 266 x 19 o 38 */
.vnum-card__label {
  width: 100%;
  color: var(--text-on-dark-muted);
  text-align: left;
}

/* --- Card larga 34:1572 — span 4 colonne, 1432 x 115 ----------------------
   115 = 40 + 35 (titolo trimmato a 48px) + 40. align-items center centra il
   testo destro sui 35px della cap-height: y = 40 + (35 - 19)/2 = 48. */
.vnum-wide {
  grid-column: 1 / -1;
  height: 115px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-tertiary-400);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.vnum-wide__title { flex: 1 0 0; color: var(--color-white); text-align: left; }   /* 34:1574 */
.vnum-wide__aside { color: var(--text-on-dark-muted); white-space: nowrap; }      /* 34:1576 */

/* --- Nota legale 34:1578 — span 4 colonne, 1432 x 10 ---------------------
   8/10 #888888, centrata. Sta su UNA riga solo grazie ai 1432px del box:
   qualunque restringimento manda a capo e cambia l'altezza di sezione. */
.vnum__legal {
  grid-column: 1 / -1;
  align-self: start;
  width: 100%;
  color: var(--color-neutral-500);
  text-align: center;
}

/* --- Pulsanti 34:1450 — 347 x 43, row, gap 16, centrati ------------------ */
.vnum__actions { align-items: center; justify-content: center; }
.vnum__btn-demo    { width: 195px; }
.vnum__btn-contact { width: 136px; }