/* Home: hero con titolo animato CENTRATO + 4 box statistiche in fila su desktop.
   Solo la homepage usa .hero-grid/.hero-stats: override sicuro qui. */

/* --- Copy centrato (desktop e mobile) --- */
.hero .hero-copy{ text-align: center; }
.hero .hero-copy .actions{ justify-content: center; }

/* --- Titolo impilato: Sviluppiamo / [parola] / su misura ---
   Ogni parte e' un blocco sulla propria riga: la parola animata eredita
   l'allineamento centrato del titolo, quindi resta SEMPRE centrata.
   Essendo sola sulla sua riga, quando si scrive/cancella cresce simmetrica
   dal centro e non sposta ne' "su misura" ne' il resto. */
.hero-title{ line-height: 1.1; }
.hero-title .hero-pre,
.hero-title .type-rotate,
.hero-title .hero-post{ display: block; }
.hero-title .type-rotate{
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
  min-height: 1.1em;   /* stabilita' verticale anche quando e' vuota */
}
.hero-title .type-rotate::after{
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-left: 5px;
  vertical-align: -0.08em;
  background: var(--accent);
  animation: pw-caret 1s steps(1, end) infinite;
}
@keyframes pw-caret{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
@media (prefers-reduced-motion: reduce){
  .hero-title .type-rotate::after{ animation: none; opacity: .55; }
}

/* --- Layout: copy sopra, statistiche sotto a piena larghezza --- */
.hero .hero-grid{ grid-template-columns: 1fr; }
.hero .hero-stats{ margin-top: 0.5rem; }

/* Desktop: i 4 box tutti sulla stessa riga. Sotto 980px invariato. */
@media (min-width: 980px){
  .hero .hero-stats{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}