/* Hero — 14:523 · 1512 x 1480
   Flusso verticale: 171 + 231 + 80 + 800 + 80 + 38 + 80 = 1480 */

.hero {
  position: relative;
  width: var(--page-width);
  height: 1480px;
  padding: 171px var(--page-gutter) var(--space-6);
  background: var(--gradient-hero);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
  overflow: hidden;              /* i Pattern sbordano fino a x = -313.145px */
}

/* --- I 4 Pattern -----------------------------------------------------------
   Quadrati concentrici, solo contorno, ruotati -45deg.
   Centro condiviso: x 756, y 1168.1454 nel sistema di coordinate dell'Hero.
   Lati: 1512 / 1012 / 512 / 12 (passo costante -500).
--------------------------------------------------------------------------- */
.hero__patterns { position: absolute; inset: 0; pointer-events: none; }

.hero__pattern {
  position: absolute;
  left: 50%;
  top: 1168.1454px;
  width: var(--side);
  height: var(--side);
  transform: translate(-50%, -50%) rotate(-45deg);
  border: var(--stroke-pattern);   /* 5px solid #29384d — non scala con la rotazione */
  border-radius: var(--radius-none);
  opacity: .25;
  background: none;
}

/* --- Title 14:529 — 1432 x 231, row, align-items flex-end, space-between --- */
.hero__title {
  position: relative;
  z-index: 1;
  width: var(--container-width);
  height: 231px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.hero__h1 {
  width: 782px;
  color: var(--color-white);
  text-align: left;
}

/* Description 14:573 — in Figma 468 x 121, column, gap 40, ancorato in basso.
   Qui 476px: con Inter v4 la riga 2 del paragrafo misura 475px e a 468
   andrebbe su 3 righe invece di 2. Gli 8px extra vengono presi dai 182px di
   spazio vuoto della riga Title (space-between), quindi il blocco slitta a
   sinistra di 8px e nient'altro cambia. Compensazione voluta e documentata. */
.hero__description {
  width: 476px;
  height: 121px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.hero__lead { width: 100%; color: var(--text-on-dark-muted); text-align: left; }
.hero__description .btn { width: 195px; }

/* --- Immagine 14:533 — 1432 x 800, radius 16 -------------------------------
   Il fill del rettangolo non e emesso da Figma: NON hard-codato.
   Il render isolato suggerisce #00122b, da confermare col designer. */
.hero__media {
  position: relative;
  z-index: 1;
  width: var(--container-width);
  height: 800px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- Paragrafo sotto-immagine 14:577 — 1432 x 38, centrato ---------------- */
.hero__footnote {
  position: relative;
  z-index: 1;
  width: var(--container-width);
  color: var(--text-on-dark-muted);
  text-align: center;
}
.hero__footnote b { font-weight: 700; color: inherit; }  /* stesso colore, solo il peso cambia */