.hero {
  position: relative;
  overflow-x: clip;
  padding: 40px 0 56px;
  background: var(--color-bg-soft);
  text-align: center;
}

.hero__title {
  /* Mobile: ogni riga resta intera fino a 320px di larghezza */
  font-size: clamp(1.5rem, 6.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.hero__line { display: block; }
.hero__line--accent { color: var(--color-purple); }
.hero__line--ink { color: var(--color-ink); }

.hero__subtitle {
  max-width: 640px;
  margin: 16px auto 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
  text-wrap: pretty;
}

.hero__actions { margin-top: 24px; }
.hero__actions .btn { height: 42px; padding: 0 22px; }
.hero__note {
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--color-subtle);
}

/* Schermata + icone */
.hero__stage {
  position: relative;
  max-width: 890px;
  margin: 32px auto 0;
}
.hero__frame {
  position: relative;
  z-index: 1;
  padding: 8px;
  background: #EDEAF1;
  border: 1px solid var(--color-line);
  border-radius: 20px;
  box-shadow: var(--shadow-panel);
}
.hero__shot {
  overflow: hidden;
  aspect-ratio: 1200 / 750; /* mobile (16:10): deve coincidere con config.js */
  border-radius: 13px;
  background: #fff;
}
.hero__shot img { width: 100%; height: 100%; object-fit: cover; }
/* Video Tella incorporato: il contenitore segue il rapporto dell'embed (60,625%) e ritaglia gli angoli */
.hero .hero__frame .hero__shot.hero__shot--img { aspect-ratio: 1919 / 1049; } /* schermata della home: rapporto reale dell'immagine, nessun ritaglio */
.hero .hero__frame .hero__shot.hero__shot--embed { aspect-ratio: auto; } /* specificità alta: deve vincere su .hero__shot--video (16:9) delle pagine funzionalità */

/* Solo 2 icone su mobile, a cavallo del bordo superiore: non coprono la schermata */
.hero .float-icon { width: 44px; height: 44px; border-radius: 14px; }
.hero .float-icon svg { width: 22px; height: 22px; }
.hero__icon--1 { top: -26px; left: 16px; --r: -8deg; animation-duration: 7s; }
.hero__icon--3 { top: -26px; right: 16px; --r: 8deg; animation-duration: 8s; animation-delay: -3s; }
.hero__icon--2, .hero__icon--4 { display: none; }

/* Entrata morbida */
@media (prefers-reduced-motion: no-preference) {
  .hero__title, .hero__subtitle, .hero__actions, .hero__stage {
    animation: rise 0.8s var(--ease) both;
  }
  .hero__subtitle { animation-delay: 0.08s; }
  .hero__actions { animation-delay: 0.16s; }
  .hero__stage { animation-delay: 0.26s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 768px) {
  .hero { padding: 40px 0 96px; }
  .hero__subtitle { margin-top: 18px; font-size: 1.0625rem; }
  .hero__actions { margin-top: 28px; }
  .hero__title { font-size: clamp(2.5rem, 1rem + 3vw, 3.5rem); }
  .hero__actions .btn { height: 46px; padding: 0 26px; }
  .hero__stage { margin-top: 36px; }
  .hero__frame { padding: 12px; border-radius: var(--radius-lg); }
  .hero__shot { aspect-ratio: 16 / 9; border-radius: 14px; }

  .hero .float-icon { width: 52px; height: 52px; border-radius: 16px; }
  .hero .float-icon svg { width: 24px; height: 24px; }
  .hero__icon--2, .hero__icon--4 { display: grid; }
  .hero__icon--1 { top: 6%; left: -24px; --r: -12deg; }
  .hero__icon--2 { top: 66%; left: -34px; --r: 10deg; animation-duration: 8.5s; animation-delay: -2s; }
  .hero__icon--3 { top: 4%; right: -26px; --r: 11deg; }
  .hero__icon--4 { top: 62%; right: -34px; --r: -9deg; animation-duration: 7.5s; animation-delay: -5s; }
}

@media (min-width: 1200px) {
  .hero { padding-top: 44px; }
  .hero__icon--1 { left: -88px; }
  .hero__icon--2 { left: -98px; }
  .hero__icon--3 { right: -90px; }
  .hero__icon--4 { right: -96px; }
}