/* ==========================================================================
   OPLYO — HERO "telefono protagonista" (2026-10-03)
   Testo centrato + 3 passi + grande smartphone che racconta il prodotto:
     imposti il target (app reale) > avvii la crescita > arrivano le interazioni (notifiche stile Instagram).
   Isolato: tutte le regole sono sotto .hero--demo / .hp. Caricato dopo oplyo-ai.css (sovrascrive la hero a 2 colonne).
   Il telefono e' dimensionato da UNA variabile, --k (scala della tela app 390 px): niente JS per il layout.
   js: oplyo-hero.js (regia). Senza JS / reduced-motion: schermata finale = notifiche.
   ========================================================================== */

/* ---- layout: colonna centrata ------------------------------------------------------------------------------- */
.hero--demo { overflow: hidden; padding-bottom: 0; }   /* il bordo inferiore taglia il telefono: fa parte della composizione */
/* sfondo (2026-10-05): bianco pulito in alto, alone lavanda dietro il titolo, luce viola morbida sul telefono, caldo cream/giallo
   chiarissimo verso il bordo basso. Solo gradienti (nessuna immagine, nessuna animazione): il colore e' costruito per strati,
   dal piu' alto al piu' basso, e la base verticale e' a molte tappe per evitare bande. Il bordo inferiore resta tinto (cream)
   perche' la sezione 03 e' bianca: nessuno stacco brusco, ma nemmeno una linea dura. */
.hero--demo::before {
  background:
    radial-gradient(58rem 20rem at 50% 12%, rgba(244, 214, 250, .80), rgba(236, 224, 254, .38) 52%, rgba(236, 224, 254, 0) 76%),          /* alone rosa/lilla in alto (Upgrow) */
    radial-gradient(32rem 22rem at 12% 8%, rgba(246, 196, 224, .50), rgba(246, 196, 224, 0) 70%),                                     /* rosa pastello, angolo alto sinistro */
    radial-gradient(34rem 22rem at 90% 14%, rgba(196, 178, 248, .50), rgba(196, 178, 248, 0) 70%),                                    /* lilla/viola, angolo alto destro */
    radial-gradient(56rem 24rem at 50% 58%, rgba(255, 252, 255, .65), rgba(255, 252, 255, 0) 72%),                                   /* centro luminoso */
    radial-gradient(110rem 34rem at 50% 108%, rgba(255, 192, 52, .92), rgba(255, 208, 84, .56) 52%, rgba(255, 220, 120, 0) 82%),       /* oro in basso */
    linear-gradient(180deg, #fffdff 0%, #fbf3ff 16%, #f6efff 32%, #fdf1f3 48%, #fff4d0 58%, #ffe99c 76%, #ffdd6b 91%, #ffd04a 100%);
}
@media (max-width: 991px) {   /* tablet/mobile: luce centrata piu' stretta, giallo comunque ben presente (il telefono sta piu' in alto nel viewport) */
  .hero--demo::before {
    background:
      radial-gradient(40rem 16rem at 50% 10%, rgba(244, 214, 250, .80), rgba(236, 224, 254, 0) 74%),
      radial-gradient(26rem 18rem at 4% 6%, rgba(246, 196, 224, .46), rgba(246, 196, 224, 0) 70%),
      radial-gradient(26rem 18rem at 98% 12%, rgba(196, 178, 248, .46), rgba(196, 178, 248, 0) 70%),
      radial-gradient(80rem 34rem at 50% 104%, rgba(255, 192, 52, .88), rgba(255, 208, 84, .52) 56%, rgba(255, 220, 120, 0) 86%),
      linear-gradient(180deg, #fffdff 0%, #faf3ff 18%, #f6efff 32%, #fdf2f2 44%, #fff4d2 58%, #ffe793 76%, #ffd95c 100%);
  }
}
.hero--demo .hero_grid { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.hero--demo .hero_copy { justify-items: center; max-width: 50rem; width: 100%; }
.hero--demo .hero_title { text-wrap: balance; max-width: 22ch; }
.hero--demo .hero_sub { margin-inline: auto; max-width: min(48rem, calc(720px * var(--vs))); text-wrap: balance; }   /* ~690-720 px su desktop: 2 righe (prima 37rem = 3 righe) */
.hero--demo .hero_cta { justify-content: center; }
.hero--demo .trust { justify-content: center; }
.hero--demo .proof { margin-inline: auto; }

/* ---- smartphone ---------------------------------------------------------------------------------------------- */
.hp {
  --k: calc(.82 * var(--vs)); --sb: calc(30px * var(--vs));
  --sw: calc(390px * var(--k)); --sh: calc(690px * var(--k));
  position: relative; margin: 3rem auto calc(var(--k) * -220px);   /* ~1/3 del telefono resta sotto il bordo della Hero (tagliato) */ width: max-content; max-width: 100%;
  font-size: calc(15px * var(--k)); text-align: left;
}
.hp::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -2rem; width: 150%; height: 60%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(14, 14, 17, .16), transparent); filter: blur(18px); pointer-events: none; }
.hp_dev { position: relative; padding: calc(10px * var(--vs)); border-radius: calc(44px * var(--k) + calc(10px * var(--vs))); background: linear-gradient(160deg, #2b2c33, #0e0e11 38%, #17181d); box-shadow: 0 0 0 1.5px #3b3c44, 0 0 0 5px #ececea, 0 40px 80px -30px rgba(16, 16, 22, .45), 0 18px 36px -18px rgba(16, 16, 22, .3), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.hp_key { position: absolute; width: calc(3px * var(--vs)); border-radius: 2px; background: #2b2c33; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.hp_key--a { left: calc(-6px * var(--vs)); top: 17%; height: calc(26px * var(--vs)); } .hp_key--b { left: calc(-6px * var(--vs)); top: 24%; height: calc(44px * var(--vs)); } .hp_key--c { left: calc(-6px * var(--vs)); top: 32%; height: calc(44px * var(--vs)); } .hp_key--p { right: calc(-6px * var(--vs)); top: 27%; height: calc(68px * var(--vs)); }
.hp_bezel { border-radius: calc(44px * var(--k)); overflow: hidden; background: #000; }
.hp_screen { position: relative; width: var(--sw); height: calc(var(--sh) + var(--sb)); overflow: hidden; background: #fff; border-radius: calc(44px * var(--k)); isolation: isolate; }
.hp_island { position: absolute; z-index: 5; top: calc(8px * var(--vs)); left: 50%; width: calc(84px * var(--vs)); height: calc(24px * var(--vs)); margin-left: calc(-42px * var(--vs)); border-radius: 999px; background: #000; }
.hp_sbar { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: var(--sb); display: flex; align-items: center; justify-content: space-between; padding: calc(8px * var(--vs)) calc(26px * var(--k)) 0; background: #fff; color: #111; font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.hp_sbar span { display: inline-flex; align-items: center; gap: calc(5px * var(--vs)); } .hp_sbar svg { height: calc(11px * var(--vs)); width: auto; }
.hp_stage { position: absolute; inset: var(--sb) 0 0 0; overflow: hidden; }

/* scena app (tela 390 x 690 nelle coordinate di cattura, scalata con --k) */
.hp_app { position: absolute; inset: 0; background: #fff; }
.hp_cv { position: absolute; left: 0; top: 0; width: 390px; height: 690px; transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden; }
.hp_sc { position: absolute; left: 0; top: 0; width: 100%; transform: translate3d(0, 0, 0); will-change: transform; transition: transform var(--d, 1.2s) cubic-bezier(.45, 0, .2, 1); }
.hp_cv img { position: absolute; display: block; max-width: none; height: auto; user-select: none; -webkit-user-drag: none; }
.hp_base { left: 0; top: 0; width: 390px; }
.hp_cv::after { content: ""; position: absolute; z-index: 3; top: 0; right: 0; width: 14px; height: 100%; background: #fff; }   /* nasconde l'ombra di scroll catturata nello screenshot (x > 376) */
.hp_p { opacity: 0; } .hp_p.is-on { opacity: 1; }
.hp_ch { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hp_toast { z-index: 6; opacity: 0; transform: translateY(-10px); transition: opacity .3s, transform .35s var(--ease); }
.hp_toast.is-on { opacity: 1; transform: none; }
.hp_cur { position: absolute; left: 0; top: 0; z-index: 7; width: 0; height: 0; opacity: 0; pointer-events: none; transition: transform var(--d, 1s) cubic-bezier(.33, .08, .25, 1), opacity .35s; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.hp_cur.is-on { opacity: 1; }
.hp_cy { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: transform var(--dy, 1s) cubic-bezier(.5, 0, .2, 1); }   /* asse Y con easing diverso da X: traiettoria curva, non rettilinea */
.hp_cur svg { position: absolute; display: block; max-width: none; overflow: visible; transform-origin: 0 0; transition: transform .12s ease-out; }
.hp_cur .hp_arw { left: 0; top: 0; width: 20px; height: 28px; }
.hp_cur .hp_ibm { left: -6px; top: -11px; width: 12px; height: 22px; display: none; }
.hp_cur.is-text .hp_arw { display: none; } .hp_cur.is-text .hp_ibm { display: block; }
.hp_cur.is-click .hp_arw { transform: scale(.88); }



/* ---- responsive (la scala --k decide tutto) ------------------------------------------------------------------- */
@media (min-width: 1200px) { .hp { --k: calc(.82 * var(--vs)); } }
@media (min-width: 600px) and (max-width: 1199px) { .hp { --k: calc(.8 * var(--vs)); } }
@media (max-width: 599px) {
  .hero--demo .hero_grid { display: flex; row-gap: 0; }
  .hero--demo .hero_copy { display: grid; }
  .hero--demo .hero_cta { display: grid; width: 100%; }
  .hero--demo .trust { order: 0; }
  .hp { --k: calc(.76 * var(--vs)); margin-top: 2rem; }
}
@media (max-width: 419px) { .hp { --k: calc(.73 * var(--vs)); } }
@media (max-width: 379px) { .hp { --k: calc(.7 * var(--vs)); } }


/* ---- Hero a tutta altezza (2026-10-03) ---------------------------------------------------------------------------
   A scroll 0 lo sfondo della Hero copre l'intera viewport (niente fascia bianca sotto il telefono): min-height = viewport
   (con tetto), il resto dello spazio si distribuisce sopra il testo e fra testo e telefono; il telefono resta tagliato dal
   bordo inferiore. Piu' aria sotto l'header. Lo sfondo (::before) e' quello di prima, la sezione dopo resta bianca. */
.hero--demo { display: flex; flex-direction: column; min-height: min(100vh, calc(1400px * var(--vs))); min-height: min(100svh, calc(1400px * var(--vs)));
  padding-top: calc(var(--hd) + clamp(2.25rem, 1rem + 2.2vw, 3.75rem)); }
.hero--demo .hero_grid { flex: 1 0 auto; }
.hero--demo .hero_copy { margin-top: auto; margin-bottom: 3rem; }
.hero--demo .hp { margin-top: auto; }
@media (max-width: 599px) { .hero--demo .hero_copy { margin-bottom: 2rem; } .hero--demo .hp { margin-top: auto; } }

/* ---- coriandoli (2026-10-12, rifinitura) ---------------------------------------------------------------------------
   Pochi rettangoli pastello (lilla / viola tenue / rosa / giallo crema), disposti A MANO ai lati della Hero, fuori da titolo, testo, CTA,
   indicatori di fiducia, telefono e notifiche. Niente linee radiali. Un solo SVG vettoriale nel ::after (sopra ::before, DIETRO il
   contenuto, z-index -1); versione verticale dedicata per < 992 px. Deriva lentissima (solo transform, compositor): la Hero ha
   overflow hidden e l'inset negativo e' minimo, quindi nessun overflow orizzontale. Con prefers-reduced-motion resta statico. */
.hero--demo::after { content: ""; position: absolute; inset: -.75rem; z-index: -1; pointer-events: none;
  background: url("/images/hero-confetti.svg") center / cover no-repeat;
  animation: hero-confetti-drift 70s ease-in-out infinite alternate; }
@media (max-width: 991px) { .hero--demo::after { background-image: url("/images/hero-confetti-m.svg"); background-position: center 60%; } }
@keyframes hero-confetti-drift { from { transform: translate3d(-.35rem, .3rem, 0); } to { transform: translate3d(.35rem, -.3rem, 0); } }
@media (prefers-reduced-motion: reduce) { .hero--demo::after { animation: none; } }

/* ---- notifiche flottanti attorno al telefono (2026-10-05) ----------------------------------------------------------
   Sono IL RISULTATO della crescita: compaiono solo dopo il click su "Avvia crescita" (regia in oplyo-hero.js), una dopo l'altra, e restano.
   Card bianche con avatar fotografico, badge d'azione sull'avatar, nome + tempo, testo dell'azione, miniatura del post o pulsante "Segui anche tu".
   Quattro zone ancorate al telefono (.hp): il layer sta PRIMA di .hp_dev nel DOM, quindi il device dipinge sempre sopra. Solo opacity + transform.
   Posizioni leggermente asimmetriche (nessuna simmetria perfetta). Variabili: --dx/--dy = micro-variazione per card, impostate dal JS mentre e' nascosta.
   Senza JS: tl + br (noscript in <head>). Reduced-motion: ferme, senza floating. < 768 px: UNA card alla volta sopra il telefono. */
.hn_layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hn {
  --dx: 0px; --dy: 0px; --ox: 0px; --oy: calc(8px * var(--vs));
  position: absolute; display: flex; align-items: center; gap: calc(12px * var(--vs)); width: calc(342px * var(--vs)); padding: calc(12px * var(--vs)) calc(14px * var(--vs)) calc(12px * var(--vs)) calc(12px * var(--vs)); box-sizing: border-box;
  border-radius: calc(20px * var(--vs)); background: #fff; border: 1px solid rgba(17, 17, 24, .07);
  box-shadow: 0 1px 2px rgba(16, 16, 28, .05), 0 12px 28px -10px rgba(16, 16, 28, .22), 0 26px 50px -26px rgba(16, 16, 28, .18);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; text-align: left;
  opacity: 0; filter: blur(5px); transform: translate3d(calc(var(--dx) + var(--ox)), calc(var(--dy) + var(--oy)), 0) scale(.97);
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1), filter .8s ease-out, transform 1s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform, filter;
}
.hn.is-in { opacity: 1; filter: blur(0); transform: translate3d(var(--dx), var(--dy), 0) scale(1); }
/* a entrata finita (JS, ~2,6 s): niente blur; la transizione resta solo per il cambio di contenuto (.is-swap, vedi sotto), solo floating organico con la proprieta' `translate` (indipendente da `transform`).
   Ogni card ha il suo percorso a 3 punti (x1,y1 > x2,y2 > origine), la sua durata (12-16 s) e il suo ritardo: mai in sincronia, ampiezza 3-6 px (--fk la scala). */
.hn.is-live { filter: none; transition: opacity .8s ease, filter .8s ease, transform .9s cubic-bezier(.22, .61, .36, 1); will-change: translate; animation: hn-float var(--fd, 14s) ease-in-out var(--fdl, 0s) infinite; }
/* cambio di contenuto (rotazione, JS nRot): la card resta opaca: sfuma solo il contenuto (avatar, testo, thumb), il JS cambia testo/persona, poi torna. Mai due card insieme: ognuna ha il suo ritmo. */
.hn.is-live .hn_a, .hn.is-live .hn_tx, .hn.is-live .hn_th, .hn.is-live .hn_fb { transition: opacity .5s ease, filter .5s ease, transform .5s ease; }
.hn.is-live.is-swap .hn_a, .hn.is-live.is-swap .hn_tx, .hn.is-live.is-swap .hn_th, .hn.is-live.is-swap .hn_fb { opacity: 0; filter: blur(3px); transform: translateY(calc(4px * var(--vs))); }
.hn--tl { --fd: 14s;   --fdl: 0s;   --x1: 2.5px;  --y1: -5px;   --x2: -1.5px; --y2: -2.5px; }
.hn--tr { --fd: 12s;   --fdl: 1.1s; --x1: -2px;   --y1: 4px;    --x2: 1.5px;  --y2: 5.5px; }
.hn--bl { --fd: 16s;   --fdl: 2.3s; --x1: 1.5px;  --y1: -3.5px; --x2: -2.5px; --y2: -5.5px; }
.hn--br { --fd: 13.4s; --fdl: 0.6s; --x1: -2.5px; --y1: 3.5px;  --x2: 2px;    --y2: 5px; }
@keyframes hn-float {
  0%, 100% { translate: 0 0; }
  34% { translate: calc(var(--x1) * var(--fk, 1)) calc(var(--y1) * var(--fk, 1)); }
  68% { translate: calc(var(--x2) * var(--fk, 1)) calc(var(--y2) * var(--fk, 1)); }
}
.hn_layer.is-off .hn { animation-play-state: paused; }
.hn_a { position: relative; flex: none; width: calc(52px * var(--vs)); height: calc(52px * var(--vs)); border-radius: 50%; }
.hn_av { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #e9e7ee; box-shadow: 0 0 0 1px rgba(17, 17, 24, .06); }
.hn--story .hn_a { padding: calc(2.5px * var(--vs)); background: linear-gradient(45deg, #f9b44a, #f0476b 52%, #b43cd1); }
.hn--story .hn_av { box-shadow: 0 0 0 2.5px #fff; }
.hn_bd { position: absolute; right: calc(-4px * var(--vs)); bottom: calc(-3px * var(--vs)); width: calc(22px * var(--vs)); height: calc(22px * var(--vs)); border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; background: #111 center / 12px no-repeat; display: none; }
.hn--like .hn_bd, .hn--follow .hn_bd, .hn--comment .hn_bd, .hn--save .hn_bd, .hn--story .hn_bd, .hn--share .hn_bd, .hn--ai .hn_bd { display: block; }
.hn--like .hn_bd { background-color: #ff3b57; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 21s-8.5-5.1-8.5-11.6A4.9 4.9 0 0 1 12 6.6a4.9 4.9 0 0 1 8.5 2.8C20.5 15.9 12 21 12 21z'/%3E%3C/svg%3E"); }
.hn--follow .hn_bd { background-color: #1d8cf8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.hn--comment .hn_bd { background-color: #111; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3.5c-5 0-8.5 3.3-8.5 7.5 0 2.3 1 4.3 2.8 5.7L5.6 21l4.3-2.4c.7.2 1.4.3 2.1.3 5 0 8.5-3.3 8.5-7.5S17 3.5 12 3.5z'/%3E%3C/svg%3E"); }
.hn--share .hn_bd { background-color: #14a38b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round' d='M21 3 10 14M21 3l-6.5 18-3.5-7-7-3.5z'/%3E%3C/svg%3E"); }
.hn--ai .hn_bd { background-color: #6b5cd6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2.2c.5 4.5 2.4 7.5 6.4 9.1.6.2.6 1.1 0 1.3-4 1.6-5.9 4.6-6.4 9.1-.5-4.5-2.4-7.5-6.4-9.1-.6-.2-.6-1.1 0-1.3 4-1.6 5.9-4.6 6.4-9.1z'/%3E%3C/svg%3E"); }
.hn--save .hn_bd { background-color: #f6a300; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.5 3h11a1 1 0 0 1 1 1v17.2a.5.5 0 0 1-.8.4L12 16.9l-5.7 4.7a.5.5 0 0 1-.8-.4V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.hn--story .hn_bd { background-color: #7a4bf0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23fff'/%3E%3C/svg%3E"); }
.hn_tx { flex: 1; min-width: 0; margin: 0; display: grid; gap: 2px; }
.hn_h { display: flex; align-items: baseline; gap: calc(6px * var(--vs)); min-width: 0; }
.hn_h b { font-size: calc(15.5px * var(--vs)); line-height: 1.25; font-weight: 650; letter-spacing: -.01em; color: #15151a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn_h em { flex: none; font-style: normal; font-size: calc(12.5px * var(--vs)); line-height: 1.25; color: #9a9ea6; }
.hn_ac { font-size: calc(14px * var(--vs)); line-height: 1.3; color: #5d626b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hn_th { flex: none; width: calc(52px * var(--vs)); height: calc(52px * var(--vs)); border-radius: calc(12px * var(--vs)); object-fit: cover; box-shadow: 0 0 0 1px rgba(17, 17, 24, .07); }
.hn_fb { flex: none; padding: calc(8px * var(--vs)) calc(12px * var(--vs)); border-radius: calc(10px * var(--vs)); background: #111; color: #fff; font-size: calc(13px * var(--vs)); font-weight: 600; line-height: 1; white-space: nowrap; }
/* desktop: le 4 zone (misure a 1440): il bordo vicino al telefono sta 26-50 px dal device, mai sul testo/CTA; lieve sfalsamento verticale e orizzontale */
.hn--tl { right: calc(100% + calc(30px * var(--vs))); top: calc(34px * var(--vs)); --ox: calc(-10px * var(--vs)); }
.hn--tr { left: calc(100% + calc(46px * var(--vs))); top: calc(104px * var(--vs)); --ox: calc(10px * var(--vs)); }
.hn--bl { right: calc(100% + calc(54px * var(--vs))); top: calc(244px * var(--vs)); --ox: calc(-10px * var(--vs)); }
.hn--br { left: calc(100% + calc(26px * var(--vs))); top: calc(262px * var(--vs)); --ox: calc(10px * var(--vs)); }
/* tablet (768-1199): card strette (220 px), accanto al telefono con 8 px di gap e >= 14 px dal bordo del viewport; thumb/bottone nascosti */
@media (min-width: 768px) and (max-width: 1199px) {
  .hn { width: calc(220px * var(--vs)); gap: calc(11px * var(--vs)); padding: calc(11px * var(--vs)) calc(13px * var(--vs)) calc(11px * var(--vs)) calc(11px * var(--vs)); border-radius: calc(18px * var(--vs)); }
  .hn_a, .hn_av { width: calc(46px * var(--vs)); height: calc(46px * var(--vs)); } .hn_a { width: calc(46px * var(--vs)); height: calc(46px * var(--vs)); }
  .hn_bd { width: calc(20px * var(--vs)); height: calc(20px * var(--vs)); } .hn_h b { font-size: calc(14.5px * var(--vs)); } .hn_ac { font-size: calc(13px * var(--vs)); } .hn_th { width: calc(42px * var(--vs)); height: calc(42px * var(--vs)); border-radius: calc(10px * var(--vs)); }
  .hn_fb, .hn_th { display: none; }
  .hn--tl { right: calc(100% + calc(8px * var(--vs))); top: calc(30px * var(--vs)); --ox: calc(-6px * var(--vs)); } .hn--tr { left: calc(100% + calc(8px * var(--vs))); top: calc(104px * var(--vs)); --ox: calc(6px * var(--vs)); }
  .hn--bl { right: calc(100% + calc(8px * var(--vs))); top: calc(214px * var(--vs)); --ox: calc(-6px * var(--vs)); } .hn--br { left: calc(100% + calc(8px * var(--vs))); top: calc(268px * var(--vs)); --ox: calc(6px * var(--vs)); }
}
/* mobile / tablet stretto (< 768 px): UNA card alla volta sopra il telefono, sul bordo alto, mai sul device ne' sulla status bar; alterna sinistra/destra.
   Il respiro sopra il telefono e' garantito dal margine di .hero_copy portato a 5.3rem solo qui. */
@media (max-width: 767px) {
  .hero--demo .hero_copy { margin-bottom: 5.3rem; }
  .hn { --fk: .8; width: min(calc(300px * var(--vs)), calc(100vw - calc(32px * var(--vs)))); gap: calc(10px * var(--vs)); padding: calc(9px * var(--vs)) calc(12px * var(--vs)) calc(9px * var(--vs)) calc(9px * var(--vs)); border-radius: calc(17px * var(--vs)); --oy: calc(8px * var(--vs)); }
  .hn_a { width: calc(40px * var(--vs)); height: calc(40px * var(--vs)); } .hn_bd { width: calc(18px * var(--vs)); height: calc(18px * var(--vs)); right: calc(-4px * var(--vs)); bottom: calc(-3px * var(--vs)); background-size: 10px; }
  .hn_h b { font-size: calc(14px * var(--vs)); } .hn_h em { font-size: calc(11.5px * var(--vs)); } .hn_ac { font-size: calc(12.5px * var(--vs)); -webkit-line-clamp: 1; }
  .hn_th { width: calc(38px * var(--vs)); height: calc(38px * var(--vs)); border-radius: calc(9px * var(--vs)); } .hn_fb { padding: calc(7px * var(--vs)) calc(10px * var(--vs)); font-size: calc(12px * var(--vs)); }
  .hn--tl { right: auto; left: 0; top: auto; bottom: calc(100% + calc(10px * var(--vs))); --ox: calc(-6px * var(--vs)); } .hn--tr { left: auto; right: 0; top: auto; bottom: calc(100% + calc(10px * var(--vs))); --ox: calc(6px * var(--vs)); }
  .hn--bl, .hn--br { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hn { transition: none; filter: none; animation: none !important; will-change: auto; } }

/* Titolo hero: Instagram / AI con accento lilla appena percettibile */
.hero--demo .hero_title .ht-acc {
  background: linear-gradient(100deg, var(--ai-ink, #5243bd) 0%, var(--ai, #6b5cd6) 55%, #9a6fd8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--ai, #6b5cd6);
  padding-bottom: .06em;   /* le discendenti (g, p) non vengono tagliate dal clip */
}

/* Titolo hero (ref. Upgrow): "Instagram" in gradiente Instagram, icona OpenAI su tessera a gradiente prima di "AI" */
.hero--demo .hero_title .ht-ig {
  background: linear-gradient(95deg, #7a3ff2 0%, #b43fe0 32%, #e2418f 64%, #f2683f 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #b43fe0;
  padding-bottom: .06em;   /* le discendenti (g) non vengono tagliate dal clip */
}
.hero--demo .hero_title .ht-ai { white-space: nowrap; }
.hero--demo .hero_title .ht-ico {
  display: inline-block; width: .84em; height: .84em; border-radius: .26em; margin: 0 .1em 0 .04em; vertical-align: -.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z'/%3E%3C/svg%3E") center / 66% no-repeat, linear-gradient(140deg, #8a45f5 0%, #c23fe6 100%);
  box-shadow: 0 .06em .16em rgba(138, 69, 245, .28);
}

/* ---- proporzioni laptop (>=992 px) -------------------------------------------------------------------------------
   Su 1280-1536 px la Hero superava il viewport e mostrava meno della meta' del telefono. Qui si recupera spazio SOLO nel blocco
   testo (respiro sotto l'header, intervalli fra titolo, sottotitolo, pulsanti e riga di fiducia) e si approfondisce di poco il
   taglio inferiore del telefono; dimensione del telefono, notifiche, animazioni e sfondo restano identici.
   Gli intervalli sono fluidi: ai valori laptop a 1366 px, ai valori originali (22 / 32 / 24 px) da 1920 px in su. */
@media (min-width: 992px) {
  .hero--demo { padding-top: calc(var(--hd) + clamp(1.5rem, 2.2vw, 3.75rem)); }
  .hero--demo .hero_sub { margin-top: clamp(calc(16px * var(--vs)), 1.08vw + 1.25px, calc(22px * var(--vs))); }
  .hero--demo .hero_cta { margin-top: clamp(calc(23px * var(--vs)), 1.62vw + .9px, calc(32px * var(--vs))); }
  .hero--demo .trust { margin-top: clamp(calc(18px * var(--vs)), 1.083vw + calc(3.2px * var(--vs)), calc(24px * var(--vs))); }
  .hero--demo .hero_copy { margin-bottom: 1.75rem; }
}
@media (min-width: 992px) and (max-width: 1439px) { .hero--demo .hp { margin-bottom: calc(var(--k) * -250px); } }
@media (min-width: 1440px) { .hero--demo .hero_copy { margin-bottom: 3rem; } }