/* ===========================================================================
   Medilust · Mami AI — Home "cinematic premium"
   Brand-true (Brand Guidelines v1.0): near-black, alto contrasto, blu #0086C4
   unico accento, metallo #B8A98C raro. Niente neon. Tokens da site.css :root.

   IL VIDEO-SCROLL NON SI TOCCA: canvas .home-stage-video pilotato da scroll.js
   sull'altezza pinnata di .home-depth; scene (.home-scene) mosse da home.js via
   transform translate(-50%,-50%) scale(). Qui si STILIZZA soltanto.
   Le scene hanno BOX leggibili sul video, con reveal a comparsa quando diventano
   attive (.is-active da home.js). Il prodotto è spiegato sotto con FLUSSI visivi.
   PERF: solo transform/opacity; reduced-motion/mobile -> stack verticale.
   =========================================================================== */

/* Tipografia "hero" premium per le scene cinematografiche — scelta libera,
   fuori dai font di brand (questa è una vetrina, non un documento):
   Satoshi (grottesca geometrica moderna e premium) per i titoli, General Sans per il corpo. */
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@500,700,900&f[]=general-sans@400,500,600&display=swap");

#home {
  position: relative;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  /* cornice "viewport": il video E la nav della fase iniziale stanno DENTRO
     (stesso inset/raggio). Letti sia da .home-stage sia da .home-nav. */
  --frame-inset: clamp(12px, 1.5vw, 22px);
  --frame-radius: 16px;
}
#home *,
#home *::before,
#home *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ Nav */
/* Fase iniziale: l'header sta DENTRO il panel del video (stesso inset/raggio
   della cornice, angoli alti arrotondati). Superata la sequenza cinematografica
   (.is-pinned, da home.js) si stacca in una barra a tutta larghezza. */
.home-nav {
  position: fixed;
  top: var(--frame-inset);
  left: var(--frame-inset);
  right: var(--frame-inset);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem clamp(1.1rem, 2.6vw, 1.9rem);
  background: rgba(6, 8, 12, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* la nav (fixed) copre il filo superiore della cornice (.home-stage::before):
     per non "interromperlo", lo prolunga lei sui tre lati alti. Allineata al
     pixel perché ha stesso inset e stesso raggio della cornice. Bottom = hairline
     come divisore tra header e video. */
  border: 1px solid rgba(0, 134, 196, 0.5);
  border-bottom-color: var(--hairline);
  border-top-left-radius: var(--frame-radius);
  border-top-right-radius: var(--frame-radius);
  transition:
    top 0.45s var(--ease),
    left 0.45s var(--ease),
    right 0.45s var(--ease),
    padding 0.45s var(--ease),
    background 0.45s var(--ease),
    border-color 0.45s var(--ease),
    border-radius 0.45s var(--ease);
}
.home-nav.is-pinned {
  top: 0;
  left: 0;
  right: 0;
  padding: 1.05rem clamp(1.25rem, 4vw, 2.6rem);
  background: rgba(6, 8, 12, 0.72);
  border-radius: 0;
  /* barra a tutta larghezza: la cornice non c'è più → niente filo cyan ai lati */
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}
.home-nav__brand {
  display: inline-flex;
  align-items: center;
}
.home-nav__brand img {
  height: 22px;
  width: auto;
}
.home-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2rem);
}
.home-nav__links a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch target su tablet/touch */
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--text-2);
  transition: color 0.3s var(--ease);
}
.home-nav__links a:not(.btn):hover {
  color: #fff;
}
.home-nav__cta {
  --pad-y: 0.72rem; /* >= 44px di altezza tap */
  --pad-x: 1.15rem;
  font-size: 0.82rem;
}
@media (max-width: 760px) {
  .home-nav__links a:not(.btn) {
    display: none;
  }
}
/* su mobile non c'è il panel cornice: l'header resta sempre a tutta larghezza */
@media (max-width: 820px) {
  .home-nav {
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    padding: 0.95rem clamp(1.1rem, 4vw, 1.6rem);
    /* mobile: header a tutta larghezza, niente cornice → niente filo cyan ai lati */
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    /* barra quasi piena: niente re-blur GPU per-frame sopra il canvas scrub */
    background: rgba(6, 8, 12, 0.86);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ================================================================ DEPTH STAGE */
.home-depth {
  position: relative;
  height: 800vh; /* fallback; impostata inline da home.js = numScene * 160vh */
}
.home-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  perspective: 1200px;
  transform-style: preserve-3d;
  isolation: isolate;
  background: var(--bg);
  /* il video è CONTENUTO dentro questa cornice: --frame-inset/--frame-radius
     ereditati da #home (vedi sopra). */
}
/* scrim neutro per profondità/leggibilità (sotto le scene, sopra il video) */
.home-stage::after {
  content: "";
  position: absolute;
  inset: var(--frame-inset);
  border-radius: var(--frame-radius);
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 28%, rgba(4, 6, 10, 0.48) 58%, rgba(4, 6, 10, 0.8) 100%),
    linear-gradient(to bottom, rgba(4, 6, 10, 0.42), transparent 24%, transparent 50%, rgba(4, 6, 10, 0.64));
}
/* cornice "viewport" blu brand: il video sta DENTRO (stesso inset/raggio) */
.home-stage::before {
  content: "";
  position: absolute;
  inset: var(--frame-inset);
  z-index: 3;
  border: 1px solid rgba(0, 134, 196, 0.5);
  border-radius: var(--frame-radius);
  pointer-events: none;
}

/* il background scrub (canvas): pilotato da scroll.js — NON TOCCARE la logica.
   Contenuto dentro la cornice. NB: il canvas è un elemento "replaced": con il
   solo `inset` non si stira (resterebbe mini in alto a sx) → width/height espliciti. */
#home .home-stage-video {
  position: absolute;
  top: var(--frame-inset);
  left: var(--frame-inset);
  width: calc(100% - 2 * var(--frame-inset));
  height: calc(100% - 2 * var(--frame-inset));
  object-fit: cover;
  border-radius: var(--frame-radius);
  z-index: 0;
  pointer-events: none;
}

/* ----------------------------------------------- Scene (stacked in depth) */
.home-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1720px, 96vw);
  height: 100vh;
  transform: translate(-50%, -50%) scale(1); /* sovrascritto dal JS */
  opacity: 0;
  will-change: transform, opacity;
  display: flex;
  align-items: flex-end; /* ancora il TITOLO al terzo inferiore (uguale per tutte) */
  justify-content: flex-end; /* blocco testo ancorato a destra */
  padding-right: clamp(0.5rem, 0.9vw, 1.1rem); /* gutter minimo dalla cornice */
  padding-bottom: clamp(12rem, 37vh, 28rem); /* ancora il titolo e riserva spazio al sub */
  text-align: left;
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 2;
}
.home-scene.is-active {
  pointer-events: auto;
}
.home-scene--hero {
  opacity: 1; /* presente al caricamento, prima del JS */
}

/* NIENTE card glass: blocco editoriale agganciato al bordo destro, sul video. */
.home-scene__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: min(82rem, 86vw); /* si stringe alle righe del titolo → colonna compatta */
  margin-left: auto; /* ancora il blocco a destra */
  padding: 0;
}
/* DECOUPLING: il TITOLO è l'unico elemento in flusso (l'ancora). pre/sub sono
   fuori flusso e gli stanno intorno → il titolo cade nello stesso punto in
   tutte le scene, indipendentemente da badge/demo/lead/bottoni. */
.home-scene__pre,
.home-scene__sub {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.home-scene__pre {
  bottom: 100%;
  margin-bottom: clamp(1rem, 2.2vh, 1.7rem);
  gap: 0.5rem;
}
.home-scene__sub {
  top: 100%;
  margin-top: clamp(1.1rem, 2.4vh, 1.8rem);
}
.home-scene__title {
  font-family: "Satoshi", var(--font-impact);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2.6rem, 4.8vw, 4.6rem); /* unica scala per TUTTI i titoli */
  line-height: 1;
  margin: 0;
  color: #fff;
}
.home-scene__lead {
  margin: 0;
  max-width: 52ch;
  font-family: "General Sans", var(--font-body);
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
}
.home-live,
.home-tier-line {
  font-family: "General Sans", var(--font-body);
}
.home-scene__lead strong {
  color: #fff;
  font-weight: 600;
}

/* ====== ENTRATA / USCITA PREMIUM ========================================
   Titolo: reveal a maschera, le righe salgono da dietro un overflow:hidden.
   Resto dei contenuti: blur-in + rise. Tutto a cascata, easing lungo,
   solo transform/opacity/filter (GPU). Scatta quando la scena è .is-active. */

/* -- titolo: maschere riga-per-riga -- */
.home-scene__title .home-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.16em; /* aria per i discendenti (g, p) senza clipparli */
  margin-bottom: -0.16em;
}
.home-scene__title .home-line > span {
  display: block;
  transform: translateY(115%);
  transition: transform 1.05s var(--ease);
  will-change: transform;
}
.home-scene.is-active .home-scene__title .home-line > span {
  transform: none;
}
.home-scene.is-active .home-scene__title .home-line:nth-child(2) > span {
  transition-delay: 0.09s;
}
.home-scene.is-active .home-scene__title .home-line:nth-child(3) > span {
  transition-delay: 0.18s;
}

/* -- resto: blur-in + rise -- */
.home-scene__inner > *:not(.home-scene__title) {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(8px);
  transition:
    opacity 0.85s var(--ease),
    transform 0.95s var(--ease),
    filter 0.85s var(--ease);
}
.home-scene.is-active .home-scene__inner > *:not(.home-scene__title) {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.home-scene.is-active .home-scene__inner > *:nth-child(1) {
  transition-delay: 0.04s;
}
.home-scene.is-active .home-scene__inner > *:nth-child(2) {
  transition-delay: 0.12s;
}
.home-scene.is-active .home-scene__inner > *:nth-child(3) {
  transition-delay: 0.28s;
}
.home-scene.is-active .home-scene__inner > *:nth-child(4) {
  transition-delay: 0.36s;
}

/* ----------------------------------------------- Scene 0 · HERO */
/* posizione (destra + terzo inferiore) e scala titolo ora sono nel .home-scene
   di base, condivise da tutte le scene. */
.home-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.2rem;
}
.home-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  animation: home-pulse 2.2s var(--ease) infinite;
}
.home-hero__grad {
  color: var(--blue-2);
}

/* micro-demo: ☎ squilla -> 🤖 Mami risponde -> 📅 in agenda (highlight a rotazione) */
.home-demo3 {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  max-width: 420px;
  margin: 0.5rem 0 0.1rem;
}
.home-demo3__step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.4rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.55);
  opacity: 0.55;
  animation: home-demo3 6s var(--ease) infinite;
}
.home-demo3__step svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}
.home-demo3__step span {
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.2;
}
.home-demo3 .home-demo3__step:nth-child(1) {
  animation-delay: 0s;
}
.home-demo3 .home-demo3__step:nth-child(3) {
  animation-delay: 2s;
}
.home-demo3 .home-demo3__step:nth-child(5) {
  animation-delay: 4s;
}
.home-demo3__arrow {
  align-self: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.95rem;
}
@keyframes home-demo3 {
  0% {
    opacity: 0.5;
    border-color: var(--hairline);
    color: rgba(255, 255, 255, 0.55);
    transform: translateY(0);
  }
  6% {
    opacity: 1;
    border-color: var(--blue);
    color: #fff;
    transform: translateY(-2px);
  }
  28% {
    opacity: 1;
    border-color: var(--blue);
    color: #fff;
    transform: translateY(-2px);
  }
  38% {
    opacity: 0.5;
    border-color: var(--hairline);
    color: rgba(255, 255, 255, 0.55);
    transform: translateY(0);
  }
  100% {
    opacity: 0.5;
    border-color: var(--hairline);
    color: rgba(255, 255, 255, 0.55);
    transform: translateY(0);
  }
}
.home-scene__cta {
  margin-top: 2.1rem;
  width: 100%;
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
}
.home-enter {
  position: absolute;
  bottom: clamp(1.4rem, 5vh, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.55);
}
.home-enter__label {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.home-enter__chevron {
  width: 11px;
  height: 11px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.6);
  transform: rotate(45deg);
  animation: home-dive 1.8s var(--ease) infinite;
}

/* ----------------------------------------------- Scene · "il ribaltamento" */
.home-strike {
  color: rgba(255, 255, 255, 0.42);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.32);
}
.home-accent {
  color: var(--metal); /* accento metallo: usato di rado */
}

/* ----------------------------------------------- Scene · "la crescita" */
.home-tier-line {
  margin-top: 1.4rem;
  display: inline-flex;
  gap: 0.8rem;
  font-family: var(--font-impact);
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.62);
}
.home-tier-line span {
  color: var(--blue-2);
}

/* ================================================================ FLOW (vertical) */
.home-flow {
  position: relative;
  padding: clamp(5rem, 14vh, 9rem) 0;
  background: var(--bg); /* tutta la parte sotto: stesso near-black dell'hero (niente stacco) */
}
/* niente più banding near-black/navy: solo un divisore sottile tra le sezioni */
.home-flow--alt {
  border-block: 1px solid var(--hairline);
}
.home-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.6rem);
}
.home-flow__title {
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 20ch;
  margin-top: 1.1rem;
  color: #fff;
}
.home-flow__lead {
  margin-top: 1.2rem;
  max-width: 56ch;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-2);
}
.home-note {
  margin-top: 1.8rem;
  max-width: 64ch;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-3);
}

/* ================================================================ SHOWCASE (media reali)
   Screen/video VERI dell'app al centro, testo a lato (righe alternate sx/dx).
   Finestra-app premium con barra + alone cyan. Reveal a maschera + parallax.
   PERF: il parallax (home.js) scrive transform su .home-show__media, il reveal
   su .home-show__frame -> nessun conflitto. Solo transform/opacity/filter. */
.home-show {
  position: relative;
  padding: clamp(4.5rem, 12vh, 8.5rem) 0;
  background: var(--bg);
}
.home-show + .home-show {
  border-top: 1px solid var(--hairline);
}
.home-show__grid {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.6rem);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
/* neutralizza il reveal generico sul grid: animiamo i figli a cascata */
.home-show__grid[data-home-reveal] {
  opacity: 1;
  transform: none;
}
/* riga invertita: media a sinistra */
.home-show--rev .home-show__media {
  order: -1;
}

/* ---- copy ---- */
.home-show__copy {
  max-width: 38ch;
}
.home-show__kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-2);
  margin-bottom: 1.1rem;
}
.home-show__title {
  font-family: "Satoshi", var(--font-impact);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  line-height: 1.05;
  margin: 0;
  color: #fff;
}
.home-show__lead {
  margin: 1.2rem 0 0;
  font-family: "General Sans", var(--font-body);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--text-2);
}
.home-show__points {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.home-show__points li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.96rem;
  color: var(--text);
}
.home-show__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 134, 196, 0.16);
}
.home-show__note {
  margin: 1.6rem 0 0;
  max-width: 48ch;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-3);
}

/* ---- media (finestra app premium) ---- */
.home-show__media {
  position: relative;
  margin: 0;
  will-change: transform;
  backface-visibility: hidden;
}
.home-show__glow {
  position: absolute;
  inset: 6% 4%;
  z-index: 0;
  border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0, 134, 196, 0.36), transparent 72%);
  filter: blur(22px);
  opacity: 0.7;
  pointer-events: none;
}
.home-show__frame {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  box-shadow:
    0 44px 90px -36px rgba(0, 0, 0, 0.8),
    0 2px 0 0 rgba(255, 255, 255, 0.04) inset;
  /* reveal: rise + straighten (scatta con .is-in sul grid) */
  opacity: 0;
  transform: translateY(46px) scale(0.965);
  transition:
    opacity 1s var(--ease),
    transform 1.15s var(--ease);
  transition-delay: 0.1s;
}
.home-show__grid.is-in .home-show__frame {
  opacity: 1;
  transform: none;
}
.home-show__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--hairline);
}
.home-show__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hairline-strong);
}
.home-show__bar i:first-child {
  background: rgba(0, 134, 196, 0.7);
}
.home-show__url {
  margin-left: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.home-show__vid {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1500 / 812;
  object-fit: cover;
  background: var(--surface);
}

/* ---- variante centrata (apertura/chiusura) ---- */
.home-show--center .home-show__grid {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: clamp(2.4rem, 5vw, 3.6rem);
  max-width: 1060px;
}
.home-show--center .home-show__copy {
  max-width: 60ch;
}
.home-show--center .home-show__title {
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
}
.home-show--center .home-show__points {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 1.8rem;
}
.home-show--center .home-show__media {
  width: 100%;
  max-width: 980px;
}

/* ---- reveal a cascata del copy (scatta con .is-in sul grid) ---- */
.home-show__copy > *:not(.home-show__title) {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity 0.85s var(--ease),
    transform 0.95s var(--ease),
    filter 0.85s var(--ease);
}
.home-show__grid.is-in .home-show__copy > *:not(.home-show__title) {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.home-show__copy > *:nth-child(3) {
  transition-delay: 0.1s;
}
.home-show__copy > *:nth-child(4) {
  transition-delay: 0.18s;
}
.home-show__copy > *:nth-child(5) {
  transition-delay: 0.26s;
}
/* titolo: maschere riga-per-riga */
.home-show__title .home-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.home-show__title .home-line > span {
  display: block;
  transform: translateY(112%);
  transition: transform 1.05s var(--ease);
  will-change: transform;
}
.home-show__grid.is-in .home-show__title .home-line > span {
  transform: none;
}
.home-show__grid.is-in .home-show__title .home-line:nth-child(2) > span {
  transition-delay: 0.09s;
}

@media (max-width: 860px) {
  .home-show__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.8rem, 6vw, 2.6rem);
  }
  .home-show--rev .home-show__media {
    order: 0;
  }
  .home-show__copy,
  .home-show--center .home-show__copy {
    max-width: 100%;
  }
  .home-show__media {
    transform: none !important; /* niente parallax su mobile */
  }
}

/* ================================================================ COLLEZIONE (carosello)
   CAROSELLO auto-play: stage 100vh, media reale GIGANTE al centro; a sx
   numero+nome+headline+CTA, a dx specs 2x2; sfondo navy che muta per TONO
   (brand, niente neon). L'indice attivo arriva da home.js (initCollections):
   avanzamento a tempo + dot-pill col fill di progresso; transizione "finestra
   3D" direzionale pilotata da --dir. PERF: solo opacity/transform; <=820 e
   reduced-motion -> stack verticale statico. */
.home-coll {
  position: relative;
  background: var(--bg);
}
.home-coll__stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  --dir: 1; /* direzione di viaggio: 1 avanti, -1 indietro (da home.js) */
}

/* -- morph di sfondo: 6 layer tonali navy, crossfade -- */
.home-coll__bgs,
.home-coll__bg,
.home-coll__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.home-coll__bgs {
  z-index: 0;
}
.home-coll__bg {
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.home-coll__bg.is-on {
  opacity: 1;
}
.home-coll__bg--0 {
  background: radial-gradient(60% 80% at 22% 28%, rgba(0, 134, 196, 0.22), transparent 62%);
}
.home-coll__bg--1 {
  background: radial-gradient(60% 80% at 80% 32%, rgba(31, 159, 218, 0.18), transparent 60%);
}
.home-coll__bg--2 {
  background: radial-gradient(70% 80% at 50% 70%, rgba(0, 86, 126, 0.3), transparent 64%);
}
.home-coll__bg--3 {
  background: radial-gradient(60% 80% at 78% 72%, rgba(0, 134, 196, 0.2), transparent 60%);
}
.home-coll__bg--4 {
  background: radial-gradient(60% 80% at 20% 70%, rgba(31, 159, 218, 0.16), transparent 60%);
}
.home-coll__bg--5 {
  background: radial-gradient(70% 70% at 50% 22%, rgba(0, 86, 126, 0.26), transparent 62%);
}

/* -- pulviscolo discreto (particelle minime, brand) -- */
.home-coll__particles {
  z-index: 1;
  opacity: 0.5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 24%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 68%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 18%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 74% 52%, rgba(255, 255, 255, 0.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 80%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 88%, rgba(255, 255, 255, 0.3), transparent 60%);
  animation: coll-drift 26s linear infinite;
}

/* -- intestazione fissa nello stage -- */
.home-coll__head {
  position: absolute;
  top: clamp(4.5rem, 12vh, 7rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.home-coll__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-2);
}
.home-coll__count {
  font-family: "Satoshi", var(--font-impact);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

/* -- slide impilate: solo l'attiva visibile -- */
.home-coll__slides {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.home-coll__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 15vh, 9rem) clamp(1.25rem, 4vw, 3rem) clamp(4rem, 10vh, 6rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.7s var(--ease),
    visibility 0s linear 0.7s;
}
.home-coll__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transition: opacity 0.7s var(--ease) 0.04s;
}
.home-coll__slide.is-leaving {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.6s var(--ease);
}
/* PERF: promuovi a layer SOLO le due slide in transizione, così il crossfade
   non deve creare il layer del video a metà scroll (causa dei micro-scatti). */
.home-coll__slide.is-active,
.home-coll__slide.is-leaving {
  will-change: opacity;
}
.home-coll__slide.is-active .home-coll__frame,
.home-coll__slide.is-leaving .home-coll__frame {
  will-change: transform;
}
.home-coll__grid3 {
  width: 100%;
  max-width: min(1860px, 96vw);
  display: grid;
  grid-template-columns: minmax(210px, 0.82fr) minmax(0, 2.6fr) minmax(210px, 0.82fr);
  gap: clamp(1.4rem, 2.4vw, 2.8rem);
  align-items: center;
}
/* Desktop stretto / tablet landscape (821-1100px): le colonne laterali fisse a
   210px comprimevano la finestra centrale (~290px su iPad Pro portrait). Qui le
   restringiamo così il media reale — il pezzo forte — resta grande e leggibile.
   Sotto 820px il layout è già impilato con finestra full-width. */
@media (min-width: 821px) and (max-width: 1100px) {
  .home-coll__grid3 {
    grid-template-columns: minmax(150px, 0.62fr) minmax(0, 3.1fr) minmax(150px, 0.62fr);
    gap: clamp(0.9rem, 1.8vw, 1.6rem);
  }
}

/* left column */
.home-coll__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.home-coll__num {
  font-family: "Satoshi", var(--font-impact);
  font-weight: 900;
  font-size: clamp(3rem, 5.5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.13);
}
.home-coll__name {
  margin: 0.45rem 0 0;
  font-family: "Satoshi", var(--font-impact);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  line-height: 1.03;
  color: #fff;
}
.home-coll__headline {
  margin: 1.1rem 0 0;
  max-width: 22ch;
  font-family: "General Sans", var(--font-body);
  font-size: clamp(1.08rem, 1.45vw, 1.35rem);
  line-height: 1.5;
  color: var(--text-2);
}
.home-coll__cta {
  margin-top: 1.8rem;
}
.home-coll__note {
  margin: 1.2rem 0 0;
  max-width: 30ch;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-2);
}

/* center media (gigante; larghezza limitata dall'altezza per stare nel viewport) */
.home-coll__media {
  position: relative;
  margin: 0 auto;
  width: 100%;
  /* riempie la colonna centrale; il cap in vh evita che superi il viewport in altezza */
  max-width: min(100%, calc(68vh * 1.847));
}
.home-coll__glow {
  position: absolute;
  inset: 4% 2%;
  z-index: 0;
  border-radius: 44px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0, 134, 196, 0.34), transparent 72%);
  filter: blur(24px);
  opacity: 0.75;
  pointer-events: none;
}
.home-coll__frame {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.85);
}
.home-coll__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--hairline);
}
.home-coll__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hairline-strong);
}
.home-coll__bar i:first-child {
  background: rgba(0, 134, 196, 0.7);
}
.home-coll__url {
  margin-left: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.home-coll__vid {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1500 / 812;
  object-fit: cover;
  background: var(--surface);
}

/* right column: specs 2x2 */
.home-coll__right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 1.8vw, 1.7rem) clamp(0.9rem, 1.6vw, 1.4rem);
}
.home-coll__spec {
  border-top: 1px solid var(--hairline-strong);
  padding-top: 0.7rem;
}
.home-coll__spec span {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.home-coll__spec b {
  display: block;
  margin-top: 0.34rem;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 600;
  color: #fff;
}

/* FINESTRA 3D direzionale: la slide entrante arriva ruotata dal lato di
   viaggio (rotateY + translateZ), l'uscente prosegue oltre la camera
   specchiata; i testi scivolano in orizzontale con stagger. --dir è fissata
   da home.js PRIMA del toggle. Liste di transform IDENTICHE in tutti gli
   stati -> interpolazione funzione-per-funzione pulita, solo GPU (no blur).
   Transizioni CSS a tempo (scattano col toggle di is-active/is-leaving)
   -> si completano sempre, niente mezzo-blend tra due slide. */
.home-coll__slide .home-coll__frame {
  transform: perspective(1200px) translate3d(calc(14% * var(--dir)), 0, -340px)
    rotateY(calc(-22deg * var(--dir)));
}
.home-coll__slide .home-coll__left,
.home-coll__slide .home-coll__right {
  transform: translate3d(calc(60px * var(--dir)), 0, 0);
}
/* --- attiva: la finestra "atterra" frontale, i testi la seguono --- */
.home-coll__slide.is-active .home-coll__frame {
  transform: perspective(1200px) translate3d(0, 0, 0) rotateY(0deg);
  transition: transform 1.15s var(--ease) 0.05s;
}
.home-coll__slide.is-active .home-coll__left {
  transform: translate3d(0, 0, 0);
  transition: transform 0.95s var(--ease) 0.12s;
}
.home-coll__slide.is-active .home-coll__right {
  transform: translate3d(0, 0, 0);
  transition: transform 0.95s var(--ease) 0.2s;
}
/* --- uscente: continua il moto oltre, specchiata --- */
.home-coll__slide.is-leaving .home-coll__frame {
  transform: perspective(1200px) translate3d(calc(-12% * var(--dir)), 0, -290px)
    rotateY(calc(19deg * var(--dir)));
  transition: transform 0.72s var(--ease);
}
.home-coll__slide.is-leaving .home-coll__left,
.home-coll__slide.is-leaving .home-coll__right {
  transform: translate3d(calc(-46px * var(--dir)), 0, 0);
  transition: transform 0.6s var(--ease);
}

/* riflesso "vetro" che attraversa la finestra quando atterra (one-shot, GPU;
   clippato dall'overflow del frame). Spento nel fallback statico. */
.home-coll__frame::after {
  content: "";
  position: absolute;
  inset: -30% -60%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 255, 255, 0.085) 50%,
    transparent 58%
  );
  transform: translate3d(-70%, 0, 0);
  opacity: 0;
}
/* .is-ready arriva da home.js alla prima vista: lo sheen della slide iniziale
   parte quando la sezione è davanti agli occhi, non al parse sotto la fold */
#home:not(.home--static) .is-ready .home-coll__slide.is-active .home-coll__frame::after {
  animation: coll-sheen 1.5s var(--ease) 0.45s both;
}
@keyframes coll-sheen {
  0% {
    transform: translate3d(-70%, 0, 0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translate3d(70%, 0, 0);
    opacity: 0;
  }
}

/* dot-pill di avanzamento: l'attivo si allunga in pill e il fill dentro
   mostra il tempo che manca al prossimo modulo (transform da home.js, GPU) */
.home-coll__dots {
  position: absolute;
  bottom: clamp(1.4rem, 4vh, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.85rem; /* più aria tra i dot: aree tap che non si accavallano */
}
.home-coll__dot {
  position: relative;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  appearance: none;
  cursor: pointer;
  border-radius: 999px;
  background: var(--hairline-strong);
  transition:
    width 0.55s var(--ease),
    background 0.35s var(--ease);
}
/* area cliccabile molto più ampia del pallino: alta ~45px (spazio libero
   sopra/sotto) e ~23px larga, per un tap comodo su touch senza accavallarsi */
.home-coll__dot::before {
  content: "";
  position: absolute;
  inset: -18px -7px;
  border-radius: 999px;
}
.home-coll__dot:hover {
  background: var(--text-2);
}
/* track interna clippata: il fill scorre in translateX (niente scaleX ->
   niente raggi schiacciati sulle estremità della pill) */
.home-coll__dot-track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.home-coll__dot-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--blue);
  transform: translateX(-101%);
}
.home-coll__dot.is-on {
  width: 44px;
  background: rgba(255, 255, 255, 0.13);
}
.home-coll__dot.is-on:hover {
  background: rgba(255, 255, 255, 0.2);
}
.home-coll__dot.is-on .home-coll__dot-track {
  opacity: 1;
}

/* -------- badge "Ascolta una chiamata vera" (slide Reception) -------- */
.home-coll__play {
  position: absolute;
  left: 50%;
  bottom: clamp(0.9rem, 2.4vh, 1.6rem);
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.05rem 0.55rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  appearance: none;
  cursor: pointer;
  background: rgba(6, 8, 12, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition:
    background 0.3s var(--ease),
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.home-coll__play:hover {
  background: rgba(0, 134, 196, 0.26);
  border-color: rgba(0, 134, 196, 0.55);
  transform: translateX(-50%) translateY(-2px);
}
.home-coll__play-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue);
}
.home-coll__play-ic svg {
  width: 12px;
  height: 12px;
  margin-left: 1px;
}
/* badge "espandi" (slide non-Reception): icona in cerchio a filo, non pieno,
   per distinguerlo dal play della chiamata; il verbo è "guarda", non "ascolta" */
.home-coll__play-ic--ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.home-coll__play-ic--ghost svg {
  width: 13px;
  height: 13px;
  margin-left: 0;
}
.home-coll__play-len {
  color: var(--text-2);
  font-size: 0.74rem;
}

/* Mobile: nello stack verticale la CTA di ogni slide risultava troppo grande e
   il badge del popup andava a capo su 2 righe (icona sbilanciata). Qui la CTA
   diventa compatta (ma resta >=44px tap) e il badge sta su una riga sola. */
@media (max-width: 820px) {
  .home-coll__cta {
    --pad-y: 0.66rem;
    --pad-x: 1.25rem;
    align-self: flex-start;
    font-size: 0.9rem;
  }
  .home-coll__play {
    padding: 0.5rem 0.95rem 0.5rem 0.55rem;
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .home-coll__play-ic {
    width: 24px;
    height: 24px;
  }
}

/* -------- popup della chiamata: dialog fixed sopra tutto (nav = z 60) -------- */
.home-callpop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
/* l'attributo hidden deve vincere sul display:flex qui sopra */
.home-callpop[hidden] {
  display: none;
}
.home-callpop__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.home-callpop__panel {
  position: relative;
  /* larghezza limitata anche dall'altezza: il video 1500:812 + barra + nota
     devono stare nel viewport */
  width: min(1060px, 100%, calc((100vh - 11rem) * 1.847));
  opacity: 0;
  transform: translateY(26px) scale(0.97);
  transition:
    opacity 0.32s var(--ease),
    transform 0.45s var(--ease);
}
.home-callpop.is-open .home-callpop__backdrop {
  opacity: 1;
}
.home-callpop.is-open .home-callpop__panel {
  opacity: 1;
  transform: none;
}
.home-callpop__x {
  position: absolute;
  top: -2.7rem;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  appearance: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transition: background 0.3s var(--ease);
}
.home-callpop__x:hover {
  background: rgba(255, 255, 255, 0.14);
}
.home-callpop__x svg {
  width: 15px;
  height: 15px;
}
.home-callpop__frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9);
}
.home-callpop__vid {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1500 / 812;
  background: var(--surface);
}
.home-callpop__note {
  margin: 0.9rem auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-2);
}
.home-callpop__note[hidden] {
  display: none;
}

@keyframes coll-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -40px, 0);
  }
}

/* responsive: stack verticale statico (<=820, allineato al reduce di home.js) */
/* Mobile: CAROSELLO SWIPE nativo (scroll-snap orizzontale) al posto dello stack.
   Una slide a schermo, si scorre col dito; i dot sotto indicano/saltano. Leggero
   (scroll nativo, niente JS di moto) e touch-first. Sync dot/video da home.js. */
@media (max-width: 820px) {
  .home-coll {
    height: auto !important;
  }
  .home-coll__stage {
    position: static;
    height: auto;
    overflow: visible;
    padding: clamp(3.2rem, 9vh, 5rem) 0 0;
  }
  .home-coll__bgs,
  .home-coll__particles,
  .home-coll__head {
    display: none;
  }
  .home-coll__slides {
    position: static;
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .home-coll__slides::-webkit-scrollbar {
    display: none;
  }
  .home-coll__slide {
    position: static;
    inset: auto;
    flex: 0 0 100%;
    scroll-snap-align: center;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    padding: 0 clamp(1.1rem, 5vw, 1.6rem);
    transition: none !important;
  }
  /* niente pose 3D residue: nello swipe la posizione la dà lo scroll nativo */
  .home-coll__slide.is-active .home-coll__frame,
  .home-coll__slide.is-active .home-coll__left,
  .home-coll__slide.is-active .home-coll__right,
  .home-coll__slide.is-leaving .home-coll__frame,
  .home-coll__slide.is-leaving .home-coll__left,
  .home-coll__slide.is-leaving .home-coll__right {
    transform: none !important;
    transition: none !important;
  }
  .home-coll__grid3 {
    grid-template-columns: 1fr;
    gap: 0.95rem;
    align-content: start;
  }
  .home-coll__media {
    max-width: 100%;
  }
  .home-coll__slide .home-coll__left,
  .home-coll__slide .home-coll__right,
  .home-coll__slide .home-coll__media,
  .home-coll__slide .home-coll__frame,
  .home-coll__slide .home-coll__spec {
    opacity: 1 !important;
    transform: none !important;
  }
  /* slide compatta = una "schermata": la CTA per-modulo è ridondante (c'è in
     hero, nav sempre visibile e sezione demo) e il numero è più piccolo, così
     la card sta nel viewport senza scroll verticale dentro lo swipe */
  .home-coll__cta {
    display: none;
  }
  .home-coll__num {
    font-size: clamp(2.1rem, 11vw, 2.9rem);
  }
  .home-coll__name {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }
  /* dots: mostrati e riportati nel flusso, centrati sotto la traccia */
  .home-coll__dots {
    display: flex;
    justify-content: center;
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    margin: 1.5rem auto 0;
  }
  .home-coll__dot {
    height: 10px;
  }
}

/* ---------------------------- ④ Sostituisce il gestionale (convergenza) */
.home-converge {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}
.home-converge__stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 660px;
}
.home-prog {
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  font-size: 0.86rem;
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: var(--hairline-strong);
  transition:
    color 0.4s var(--ease),
    border-color 0.4s var(--ease);
}
.home-converge:hover .home-prog {
  color: var(--text-2);
}
.home-converge__arrow {
  color: var(--text-3);
  font-size: 1.5rem;
  line-height: 1;
}
.home-converge__one {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}
.home-converge__one img {
  height: 20px;
  width: auto;
}

/* ---------------------------- ② Chat → azione */
.home-chat {
  margin: clamp(2.6rem, 5vw, 4rem) auto 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.home-msg {
  max-width: 84%;
  padding: 0.8rem 1.05rem;
  border-radius: 16px;
  font-size: 0.97rem;
  line-height: 1.45;
}
.home-msg__who {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  color: var(--text-3);
}
.home-msg--you {
  align-self: flex-end;
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.home-msg--you .home-msg__who {
  color: rgba(255, 255, 255, 0.72);
}
.home-msg--mami {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: 5px;
}
.home-msg__ok {
  color: var(--blue-2);
  font-weight: 600;
}
.home-typing {
  display: inline-flex;
  gap: 4px;
  padding: 0.2rem 0;
}
.home-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  animation: home-typing 1.3s var(--ease) infinite;
}
.home-typing i:nth-child(2) {
  animation-delay: 0.2s;
}
.home-typing i:nth-child(3) {
  animation-delay: 0.4s;
}

/* ---------------------------- ③ Le 24 ore (timeline) */
.home-timeline {
  position: relative;
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding-left: 1.7rem;
  max-width: 640px;
}
.home-timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 2px;
  background: var(--hairline-strong);
}
.home-tl {
  position: relative;
  padding: 0.95rem 0;
}
.home-tl::before {
  content: "";
  position: absolute;
  left: calc(-1.7rem + 1px);
  top: 1.35rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  transform: translateX(-3px);
}
.home-tl__time {
  font-family: var(--font-impact);
  color: var(--blue-2);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  margin-right: 0.7rem;
}
.home-tl b {
  color: #fff;
  font-weight: 700;
}
.home-tl span {
  color: var(--text-2);
}

/* ---------------------------- Clinica (3 punti compatti) */
.home-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3.4vw, 3rem);
  margin-top: clamp(2.6rem, 5vw, 4rem);
}
.home-pillar {
  border-top: 1px solid var(--hairline-strong);
  padding-top: 1.3rem;
}
.home-pillar b {
  display: block;
  font-weight: 700;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  color: #fff;
}
.home-pillar p {
  margin: 0.7rem 0 0;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .home-pillars {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .home-pillar {
    padding-block: 1.4rem;
  }
  .home-pillar + .home-pillar {
    border-top: none;
  }
}

/* ---------------------------- Sicurezza tags */
.home-compliance {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.home-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.7rem;
  margin-top: 0.4rem;
}
.home-tag {
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  transition:
    border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.home-tag:hover {
  border-color: var(--blue);
  color: #fff;
}
@media (max-width: 820px) {
  .home-compliance {
    grid-template-columns: 1fr;
  }
}

/* ================================================================ STATEMENT (~100vh)
   Due sezioni a tutta altezza, contenuto centrato: gestionale + sicurezza. */
.home-stmt {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 7vh, 5rem) 0;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}
.home-stmt__inner {
  width: 100%;
}
.home-stmt__head {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}
.home-stmt__title {
  font-family: "Satoshi", var(--font-impact);
  font-weight: 700;
  letter-spacing: -0.022em;
  font-size: clamp(2.4rem, 4.7vw, 4rem);
  line-height: 1.04;
  margin: 1.3rem 0 0;
  color: #fff;
}
.home-stmt__lead {
  margin: 1.5rem auto 0;
  max-width: 66ch;
  font-family: "General Sans", var(--font-body);
  font-size: clamp(1.08rem, 1.5vw, 1.38rem);
  line-height: 1.6;
  color: var(--text-2);
}

/* trust cards (sicurezza, 3 colonne, con icona + hover glow) */
.home-trust {
  margin-top: clamp(2.4rem, 4.5vw, 3.8rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2vw, 1.8rem);
}
.home-trust__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding: clamp(1.8rem, 3vw, 2.7rem);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  transition:
    border-color 0.45s var(--ease),
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
/* alone blu che appare all'hover */
.home-trust__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(85% 60% at 50% 0%, rgba(0, 134, 196, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.home-trust__card > * {
  position: relative;
  z-index: 1;
}
.home-trust__card:hover {
  border-color: rgba(0, 134, 196, 0.5);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.7);
}
.home-trust__card:hover::before {
  opacity: 1;
}
.home-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid var(--hairline-strong);
  background: rgba(0, 134, 196, 0.08);
  color: var(--blue-2);
  transition:
    border-color 0.45s var(--ease),
    background 0.45s var(--ease),
    transform 0.45s var(--ease);
}
.home-trust__icon svg {
  width: 23px;
  height: 23px;
}
.home-trust__card:hover .home-trust__icon {
  border-color: var(--blue);
  background: rgba(0, 134, 196, 0.18);
  transform: translateY(-2px);
}
.home-trust__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-2);
}
.home-trust__card .home-tags {
  margin: 0;
}
.home-trust__note {
  margin: auto 0 0; /* spinge la nota in basso: card piene e uniformi */
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-3);
}
@media (max-width: 880px) {
  .home-trust {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
}

/* ================================================================ CORE — "perché Mami"
   Sostituisce il gestionale (convergenza programmi -> Mami) + sicurezza/dati.
   Brand-true: navy, blu unico accento, hairline; alone blu soffuso (no neon). */
.home-core {
  position: relative;
  padding: clamp(5rem, 14vh, 9rem) 0;
  background: var(--bg);
  border-block: 1px solid var(--hairline);
}
.home-core__head {
  max-width: 56ch;
}
.home-core__title {
  font-family: "Satoshi", var(--font-impact);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  line-height: 1.05;
  margin: 1rem 0 0;
  color: #fff;
}
.home-core__title--sm {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
}
.home-core__lead {
  margin: 1.2rem 0 0;
  max-width: 56ch;
  font-family: "General Sans", var(--font-body);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-2);
}

/* ① convergenza: tanti programmi -> una sola Mami.
   Griglia allineata ai contenuti: chip a filo SINISTRO (come il titolo),
   nodo Mami a filo DESTRO (come il lead). Linee che convergono in mezzo. */
.home-core__merge {
  position: relative;
  margin-top: clamp(2.4rem, 4.5vw, 3.8rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(3rem, 10vw, 9rem) auto;
  align-items: center;
  gap: clamp(0.6rem, 1.5vw, 1.1rem);
  padding: clamp(2.2rem, 4.5vw, 4rem);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background:
    radial-gradient(120% 150% at 100% 50%, rgba(0, 134, 196, 0.07), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0));
  overflow: hidden;
}
/* il reveal lo gestiamo sui figli (chip a cascata, linee, nodo) */
.home-core__merge[data-home-reveal] {
  opacity: 1;
  transform: none;
}
.home-core__progs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.home-core__progs li {
  padding: 0.62rem 1.05rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 11px;
  font-size: 0.92rem;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.014);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.18);
  opacity: 0;
  transform: translateY(12px);
  transition:
    color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    text-decoration-color 0.35s var(--ease),
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.home-core__merge.is-in .home-core__progs li {
  opacity: 1;
  transform: none;
}
/* micro-hover: il singolo programma "si accende" e si toglie il barrato */
.home-core__progs li:hover {
  color: #fff;
  border-color: rgba(0, 134, 196, 0.55);
  text-decoration-color: transparent;
}
.home-core__merge.is-in .home-core__progs li:nth-child(1) { transition-delay: 0.04s; }
.home-core__merge.is-in .home-core__progs li:nth-child(2) { transition-delay: 0.09s; }
.home-core__merge.is-in .home-core__progs li:nth-child(3) { transition-delay: 0.14s; }
.home-core__merge.is-in .home-core__progs li:nth-child(4) { transition-delay: 0.19s; }
.home-core__merge.is-in .home-core__progs li:nth-child(5) { transition-delay: 0.24s; }
.home-core__merge.is-in .home-core__progs li:nth-child(6) { transition-delay: 0.29s; }
.home-core__merge.is-in .home-core__progs li:nth-child(7) { transition-delay: 0.34s; }
.home-core__merge.is-in .home-core__progs li:nth-child(8) { transition-delay: 0.39s; }
.home-core__merge.is-in .home-core__progs li:nth-child(9) { transition-delay: 0.44s; }
.home-core__merge:hover .home-core__progs li {
  color: var(--text-2);
  border-color: rgba(255, 255, 255, 0.24);
}

/* linee che convergono verso Mami (si disegnano all'ingresso) */
.home-core__lines {
  width: 100%;
  height: clamp(145px, 16vw, 195px);
  overflow: visible;
}
.home-core__lines line {
  stroke: url(#coreLine);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s var(--ease);
}
.home-core__merge:hover .home-core__lines line {
  stroke-width: 1.6;
}
.home-core__merge.is-in .home-core__lines line {
  stroke-dashoffset: 0;
}
.home-core__merge.is-in .home-core__lines line:nth-child(2) { transition-delay: 0.28s; }
.home-core__merge.is-in .home-core__lines line:nth-child(3) { transition-delay: 0.33s; }
.home-core__merge.is-in .home-core__lines line:nth-child(4) { transition-delay: 0.38s; }
.home-core__merge.is-in .home-core__lines line:nth-child(5) { transition-delay: 0.43s; }
.home-core__merge.is-in .home-core__lines line:nth-child(6) { transition-delay: 0.48s; }
.home-core__merge.is-in .home-core__lines line:nth-child(7) { transition-delay: 0.53s; }
.home-core__merge.is-in .home-core__lines line:nth-child(8) { transition-delay: 0.58s; }

/* nodo Mami (focale, alone blu soffuso che pulsa lento) */
.home-core__mami {
  position: relative;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.45rem;
  padding: clamp(1.8rem, 3.2vw, 2.7rem) clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(0, 134, 196, 0.5);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(0, 134, 196, 0.12), rgba(0, 134, 196, 0.03));
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.7s var(--ease) 0.32s,
    transform 0.8s var(--ease) 0.32s;
}
.home-core__merge.is-in .home-core__mami {
  opacity: 1;
  transform: none;
}
/* nodo di convergenza: è DENTRO l'SVG (stesse coordinate delle linee) ->
   allineato al pixel, niente disallineamenti. meet = cerchi non distorti. */
.home-core__halo {
  opacity: 0;
  transition: opacity 0.7s var(--ease) 0.5s;
}
.home-core__node {
  fill: #dff1ff;
  opacity: 0;
  transition: opacity 0.45s var(--ease) 0.58s;
}
.home-core__merge.is-in .home-core__halo {
  opacity: 1;
}
.home-core__merge.is-in .home-core__node {
  opacity: 1;
}
.home-core__mami-glow {
  position: absolute;
  inset: -25% -15%;
  z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 134, 196, 0.3), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  animation: core-glow 4.5s var(--ease) infinite;
}
.home-core__mami img {
  position: relative;
  z-index: 1;
  height: clamp(40px, 5.5vw, 54px);
  width: auto;
}
.home-core__mami b {
  position: relative;
  z-index: 1;
  font-family: "Satoshi", var(--font-impact);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  color: #fff;
}
.home-core__mami-sub {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--blue-2);
}
@keyframes core-glow {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* divisore tra i due movimenti */
.home-core__rule {
  height: 1px;
  background: var(--hairline);
  margin: clamp(3rem, 7vw, 5.5rem) 0;
}

/* ② sicurezza — compliance raggruppata (Conformità / Connessioni / Architettura) */
.home-core__sec {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.home-core__sec-text {
  max-width: 42ch;
}
.home-core__compliance {
  display: flex;
  flex-direction: column;
  gap: clamp(1.3rem, 2.6vw, 2rem);
}
.home-core__cgroup {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.home-core__clabel {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.home-core__cgroup .home-tags {
  margin: 0;
}

@media (max-width: 880px) {
  .home-core__head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .home-core__merge {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.6rem;
  }
  .home-core__progs {
    justify-content: center;
  }
  .home-core__lines {
    display: none;
  }
  .home-core__mami {
    min-width: 0;
    width: 100%;
    max-width: 320px;
  }
  .home-core__sec {
    grid-template-columns: 1fr;
  }
  .home-core__sec-text {
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-core__mami-glow {
    animation: none !important;
  }
  .home-core__progs li,
  .home-core__mami {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .home-core__lines line {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .home-core__halo,
  .home-core__node {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ---------------------------- Team (ripristinato: foto quadrate, hover a colori) */
.home-team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: clamp(2.8rem, 5vw, 4rem);
}
.home-member {
  margin: 0;
  text-align: center;
}
.home-member__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--surface);
}
.home-member__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 6, 10, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.home-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) brightness(0.95);
  transition:
    transform 0.6s var(--ease),
    filter 0.6s var(--ease);
}
.home-member:hover .home-member__photo img {
  transform: scale(1.06);
  filter: grayscale(0) brightness(1.02);
}
.home-member:hover .home-member__photo::after {
  opacity: 1;
}
.home-member figcaption {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.home-member figcaption b {
  font-weight: 700;
  font-size: 1.04rem;
  color: #fff;
}
.home-member figcaption span {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--blue-2);
}
@media (max-width: 820px) {
  .home-team {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 440px) {
  .home-team {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-inline: auto;
  }
}

/* ----------------------------------------------- Demo */
.home-demo-sec {
  position: relative;
}
.home-demo-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-demo-wrap .home-flow__title {
  margin-inline: auto;
  max-width: 16ch;
}
.home-demo-wrap .home-flow__lead {
  margin-inline: auto;
}
.demo-form {
  margin-top: 2.6rem;
  width: 100%;
  max-width: 460px;
  display: grid;
  gap: 0.7rem;
  text-align: left;
}
.demo-form input:not(.hp) {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  font-family: var(--font-body);
  /* 16px minimo: sotto, iOS Safari zooma la pagina al focus dell'input */
  font-size: 1rem;
  transition:
    border-color 0.3s var(--ease),
    background 0.3s var(--ease);
}
.demo-form input::placeholder {
  color: var(--text-3);
}
.demo-form input:not(.hp):focus {
  outline: none;
  border-color: var(--blue);
  background: rgba(255, 255, 255, 0.04);
}
.demo-form button {
  margin-top: 0.4rem;
  width: 100%;
  padding: 1.02rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  background: var(--blue);
  transition:
    transform 0.3s var(--ease),
    background 0.3s var(--ease);
}
.demo-form button:hover {
  transform: translateY(-1px);
  background: var(--blue-2);
}
.demo-form button:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}
.demo-note {
  margin: 0.4rem 0 0;
  font-size: 0.86rem;
  color: var(--text-3);
  text-align: center;
}
.demo-form .hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none;
}

/* ----------------------------------------------- Footer */
.home-footer {
  border-top: 1px solid var(--hairline);
  padding: 3.4rem 0 2.4rem;
  background: var(--bg);
}
.home-footer__grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.home-footer__brand img {
  height: 24px;
  width: auto;
}
.home-footer__brand p {
  margin: 0.9rem 0 0;
  max-width: 32ch;
  color: var(--text-3);
  font-size: 0.92rem;
  line-height: 1.55;
}
.home-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
}
.home-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch target */
  color: var(--text-2);
  font-size: 0.9rem;
  transition: color 0.3s var(--ease);
}
.home-footer__links a:hover {
  color: #fff;
}
/* Socio Assintel + Partner 24 ORE: badge secondari, centrati in fondo (sopra il
   copyright). Targhetta bianca = area di rispetto + leggibilità sul near-black;
   loghi NON alterati (colori/proporzioni originali, nessun effetto). Il 24 ORE è
   al minimo digitale di 60px del suo regolamento; il marchio Medilust resta
   predominante (posizione primaria in alto a sinistra). */
.home-footer__partners {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.4rem;
}
.home-footer__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  background: #fff;
  border-radius: 8px;
}
a.home-footer__badge {
  transition: transform 0.3s var(--ease);
}
a.home-footer__badge:hover {
  transform: translateY(-2px);
}
.home-footer__badge-img {
  display: block;
  width: auto;
  height: auto;
}
.home-footer__badge-img--assintel {
  max-height: 26px;
}
.home-footer__badge-img--p24 {
  max-height: 60px; /* minimo digitale del regolamento Partner 24 ORE */
}
@media (max-width: 560px) {
  .home-footer__partners {
    justify-content: center;
  }
}
.home-footer__legal {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  color: var(--text-3);
  font-size: 0.84rem;
  text-align: center;
}

/* ================================================================ Reveal (flow) */
[data-home-reveal] {
  opacity: 0;
  transform: translateY(22px);
}
[data-home-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}

/* ================================================================ Keyframes */
@keyframes home-dive {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-4px, -4px);
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(4px, 4px);
  }
}
@keyframes home-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@keyframes home-typing {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* ================================================================ REDUCED MOTION / STATIC
   Niente profondità: le scene tornano sezioni verticali leggibili su --bg.
   I box restano (sono ciò che rende leggibile). Contenuti sempre visibili.
   ================================================================ */
#home.home--static .home-depth,
.home-depth.home--static {
  height: auto !important;
}
#home.home--static .home-stage,
.home-stage.home--static {
  position: static;
  height: auto;
  overflow: visible;
  perspective: none;
}
#home.home--static .home-stage::after,
#home.home--static .home-stage::before {
  display: none;
}
#home.home--static .home-scene {
  position: relative;
  top: auto;
  left: auto;
  width: min(var(--maxw), 92vw);
  height: auto;
  max-height: none;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) 0;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto;
}
#home.home--static .home-scene__inner > * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
#home.home--static .home-scene__title .home-line > span {
  transform: none !important;
}
#home.home--static .home-scene__inner::before,
#home.home--static .home-scene__inner::after {
  display: none; /* niente video dietro: blocco editoriale piatto e leggibile */
}
/* in statico pre/sub tornano IN FLUSSO (stack verticale leggibile, a sinistra) */
#home.home--static .home-scene__inner {
  max-width: none;
  width: 100%;
  align-items: flex-start;
  text-align: left;
}
#home.home--static .home-scene__pre,
#home.home--static .home-scene__sub {
  position: static;
  width: 100%;
  margin: 0;
  align-items: flex-start;
}
#home.home--static .home-scene__pre {
  margin-bottom: 1.3rem;
}
#home.home--static .home-scene__sub {
  margin-top: 1.3rem;
}
#home.home--static .home-enter {
  display: none;
}
#home.home--static .home-stage-video {
  display: none;
}
#home.home--static .home-nav {
  top: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  padding: 1.05rem clamp(1.25rem, 4vw, 2.6rem);
  /* statico: nessuna cornice video → niente filo cyan ai lati */
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .home-depth {
    height: auto;
  }
  .home-stage {
    position: static;
    height: auto;
    overflow: visible;
    perspective: none;
  }
  .home-stage::after,
  .home-stage::before {
    display: none;
  }
  .home-scene {
    position: relative;
    top: auto;
    left: auto;
    width: min(var(--maxw), 92vw);
    height: auto;
    max-height: none;
    margin: 0 auto;
    padding: clamp(3rem, 8vh, 5rem) 0;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto;
  }
  .home-scene__inner > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .home-scene__title .home-line > span {
    transform: none !important;
  }
  .home-scene__inner {
    max-width: none;
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }
  .home-scene__pre,
  .home-scene__sub {
    position: static;
    width: 100%;
    margin: 0;
    align-items: flex-start;
  }
  .home-scene__pre {
    margin-bottom: 1.3rem;
  }
  .home-scene__sub {
    margin-top: 1.3rem;
  }
  .home-enter {
    display: none;
  }
  #home .home-stage-video {
    display: none;
  }
  .home-nav {
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
  }
  .home-enter__chevron,
  .home-live__dot,
  .home-typing i,
  .home-demo3__step {
    animation: none !important;
  }
  .home-demo3__step {
    opacity: 1 !important;
  }
  [data-home-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  /* showcase: tutto visibile e fermo, niente maschere/parallax */
  .home-show__copy > *,
  .home-show__title .home-line > span,
  .home-show__frame,
  .home-show__media {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  /* collezione: niente pin, stack verticale statico anche su desktop */
  .home-coll {
    height: auto !important;
  }
  .home-coll__stage {
    position: static;
    height: auto;
    overflow: visible;
  }
  .home-coll__bgs,
  .home-coll__particles,
  .home-coll__head,
  .home-coll__dots {
    display: none;
  }
  .home-coll__slides {
    position: static;
  }
  .home-coll__slide {
    position: static;
    inset: auto;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 4vw, 2.6rem);
    border-top: 1px solid var(--hairline);
  }
  .home-coll__slide:first-child {
    border-top: none;
  }
  .home-coll__grid3 {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .home-coll__media {
    max-width: 720px;
  }
  .home-coll__slide .home-coll__left,
  .home-coll__slide .home-coll__right,
  .home-coll__slide .home-coll__media,
  .home-coll__slide .home-coll__frame,
  .home-coll__slide .home-coll__spec {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ================================================================ MOBILE HERO 9:16 */
.home-mhero {
  display: none;
}
@media (max-width: 820px) {
  /* su mobile il video è un loop (non il video-scroll narrativo del desktop):
     senza "avanzamento" da sincronizzare, le scene reception/adempimenti/clinica
     resterebbero blocchi di testo su nero -> le togliamo, resta solo l'hero.
     Il loro contenuto è comunque dettagliato dal carosello prodotto sotto. */
  #home .home-scene:not(.home-scene--hero) {
    display: none;
  }
  #home.home--static .home-scene--hero,
  #home .home-scene--hero {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(3rem, 9vh, 6rem) clamp(1.1rem, 5vw, 1.8rem);
    justify-content: center;
    background: var(--bg) url("/images/home-mobile-poster-442a251a43d5c77c19f63905c66895f3.jpg?vsn=d") center / cover no-repeat;
  }
  #home .home-mhero {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
  }
  #home .home-scene--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(4, 6, 10, 0.5),
      rgba(4, 6, 10, 0.22) 35%,
      rgba(4, 6, 10, 0.42) 72%,
      rgba(4, 6, 10, 0.85)
    );
  }
  #home .home-scene--hero .home-scene__inner {
    position: relative;
    z-index: 2;
  }
  /* su mobile il blocco editoriale va a tutta larghezza, a sinistra */
  #home .home-scene {
    justify-content: flex-start;
  }
  #home .home-scene__inner {
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    text-align: left;
  }
  #home .home-scene__inner::before,
  #home .home-scene__inner::after {
    display: none; /* niente barra/alone: non c'è il video dietro */
  }
  /* contenuti sempre visibili: niente reveal d'ingresso senza il depth-scroll */
  #home .home-scene__title .home-line > span {
    transform: none;
  }
  #home .home-scene__inner > *:not(.home-scene__title) {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  #home .home-mhero {
    display: none;
  }
}