.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 120px var(--margine) 90px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(55% 45% at 50% 38%, rgba(215, 38, 61, 0.28), transparent 70%),
    var(--notte);
  overflow: hidden;
}
.hero__titolo { font-size: var(--t-hero); }
.hero__titolo em { color: #FF4D63; }
.hero__sotto { max-width: 34ch; color: var(--grigio-chiaro); font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.hero .occhiello { color: #FF7A8A; }

/* Il cuore disegnato dal JS: metà linea (persona), metà circuito (tecnologia) */
.hero__cuore { width: min(46vw, 300px); aspect-ratio: 1; margin-bottom: 8px; }
.hero__cuore svg { width: 100%; height: 100%; overflow: visible; }
.cuore__persona {
  stroke-dasharray: var(--l); stroke-dashoffset: var(--l);
  animation: disegna 1.6s var(--curva) 0.2s forwards;
}
.cuore__circuito { opacity: 0; animation: appare 0.9s ease 1.2s forwards; }
.cuore__pista {
  stroke-dasharray: var(--l); stroke-dashoffset: var(--l);
  animation: disegna 0.9s var(--curva) forwards;
}
.cuore__nodo { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: nodo 0.6s var(--curva) forwards; }
.cuore__testa { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: nodo 0.7s var(--curva) 1.5s forwards; }
.cuore__battito { transform-origin: 60px 62px; animation: battito 1.6s ease-in-out 2.6s infinite; }
.cuore__alone { opacity: 0; animation: alone 1.6s ease-in-out 2.6s infinite; }

@keyframes disegna { to { stroke-dashoffset: 0; } }
@keyframes appare { to { opacity: 1; } }
@keyframes nodo { 60% { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes battito { 0%, 40%, 100% { transform: scale(1); } 12% { transform: scale(1.06); } 26% { transform: scale(1.03); } }
@keyframes alone { 0%, 100% { opacity: 0; } 14% { opacity: 0.55; } 50% { opacity: 0; } }

.hero__scorri {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  width: 26px; height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
}
.hero__scorri::after {
  content: ""; position: absolute; left: 50%; top: 8px;
  width: 4px; height: 8px; margin-left: -2px; border-radius: 2px;
  background: #fff; animation: scorri 1.8s ease-in-out infinite;
}
@keyframes scorri { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }