/* ══════════ Attrai Chi Vuoi · anteprima · concept «La chat» · rosso e nero ══════════
   Regola di casa: niente muri di testo. Ogni testo è un blocco corto con la sua gerarchia:
   .riga-forte (la frase che porta la promessa) · .riga-piano (il resto, piccolo) · .chip (il dettaglio)
   La tavolozza sta in index.html (<style> in testa). */
@layer base, motion;

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { overflow-x: clip; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; font-family: var(--testo); font-size: 17px; line-height: 1.55; color: var(--bianco); background: var(--nero); -webkit-font-smoothing: antialiased; }
  img, svg, picture { display: block; max-width: 100%; }
  img { height: auto; }
  h1, h2, h3, p { margin: 0; }
  a { color: inherit; }
  mark { background: none; color: inherit; }
  button { font: inherit; color: inherit; }
}

/* ── impianto ── */
.scena { position: relative; padding: clamp(84px, 13dvh, 150px) 0; overflow: hidden; background: var(--nero); color: var(--bianco); }
.scena.due-toni { background: var(--nero-2); }
.scena.rossa { background: radial-gradient(120% 90% at 15% 0%, #C40814 0%, #7A0710 55%, #3D0308 100%); }
.dentro { position: relative; z-index: 2; width: min(100% - 40px, 1200px); margin-inline: auto; }
@media (min-width: 1024px) { .dentro { padding-right: 360px; } }
.colonna { max-width: 660px; }
.due { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 760px) { .due { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; } .due.rovescia > :first-child { order: 2; } }

/* ── tipografia: poca, grande, a blocchi ── */
.cappello { display: inline-flex; align-items: center; gap: 10px; font: 800 12.5px/1 var(--titoli); letter-spacing: .24em; text-transform: uppercase; color: var(--rosso-vivo); }
.cappello::before { content: ""; width: 26px; height: 3px; background: currentColor; border-radius: 2px; }
.rossa .cappello { color: #fff; }
.titolo { margin-top: 16px; font: 900 clamp(38px, 10vw, 72px)/.98 var(--titoli); letter-spacing: -.035em; word-spacing: .06em; text-wrap: balance; }
.gigante { font: 900 clamp(46px, 12.5vw, 112px)/.93 var(--titoli); letter-spacing: -.04em; word-spacing: .08em; text-wrap: balance; }
.cifra { font: 900 clamp(110px, 32vw, 250px)/.82 var(--titoli); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.rosso { color: var(--rosso-vivo); }
.rossa .rosso { color: #fff; }
b, strong { font-weight: 800; }
mark { background: linear-gradient(transparent 55%, rgba(225, 6, 19, .8) 55%, rgba(225, 6, 19, .8) 92%, transparent 92%); padding: 0 .06em; color: #fff; }

/* il blocco di testo: una frase forte, una piana, i dettagli in chip */
.taglio { margin-top: 22px; display: grid; gap: 10px; justify-items: start; }
.riga-forte { font: 800 clamp(24px, 6.6vw, 40px)/1.12 var(--titoli); letter-spacing: -.025em; text-wrap: balance; }
.riga-piano { font: 500 clamp(16px, 4.2vw, 19px)/1.45 var(--testo); color: var(--grigio); max-width: 34ch; text-wrap: pretty; }
.rossa .riga-piano { color: #FFD9DC; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--rosso); color: #fff; font: 800 13.5px/1.1 var(--titoli); letter-spacing: .02em; }
.chip.vuoto { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.rossa .chip { background: #0A0A0B; }
.colpo { margin-top: 26px; padding: 16px 20px; border-left: 5px solid var(--rosso); background: linear-gradient(90deg, rgba(225, 6, 19, .2), transparent); font: 900 clamp(21px, 5.8vw, 30px)/1.15 var(--titoli); letter-spacing: -.02em; }

/* sottolineatura e barrato a mano (l'SVG lo aggiunge store.js) */
.sott, .barrato { position: relative; display: inline-block; white-space: nowrap; }
.sott > svg, .barrato > svg { position: absolute; left: -3%; width: 106%; pointer-events: none; overflow: visible; }
.sott > svg { bottom: -.14em; height: .32em; }
.barrato > svg { top: 34%; height: .4em; }
.sott path, .barrato path { fill: none; stroke: var(--rosso); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rossa .sott path { stroke: #fff; }
.da-disegnare path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.da-disegnare.disegnato path { stroke-dashoffset: 0; transition-property: stroke-dashoffset; transition-duration: .9s; transition-timing-function: cubic-bezier(.6, .1, .3, 1); transition-delay: .35s; }

/* note a margine a mano */
.nota-mano { position: relative; display: inline-block; font: 700 clamp(25px, 6.4vw, 31px)/1.05 var(--mano); color: var(--rosso-vivo); transform: rotate(-4deg); }
.rossa .nota-mano { color: #fff; }
.nota-mano svg { position: absolute; width: 46px; height: 34px; left: -52px; top: -6px; overflow: visible; }
.nota-mano svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* bottoni */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; padding: 17px 30px; border-radius: 14px; background: var(--rosso); color: #fff; font: 900 clamp(17px, 4.5vw, 20px)/1.15 var(--titoli); letter-spacing: -.005em; word-spacing: .12em; text-transform: uppercase; text-decoration: none; text-align: center; box-shadow: 0 8px 0 0 #6E050C, 0 22px 40px -14px rgba(225, 6, 19, .75); transition-property: transform, box-shadow; transition-duration: .15s; }
.bottone:hover { transform: translateY(-2px); }
.bottone:active { transform: translateY(6px); box-shadow: 0 2px 0 0 #6E050C, 0 10px 20px -12px rgba(225, 6, 19, .7); }
.rossa .bottone { background: #0A0A0B; box-shadow: 0 8px 0 0 #000, 0 22px 40px -14px rgba(0, 0, 0, .7); }
.rischio { margin-top: 18px; font: 600 13.5px/1.4 var(--testo); color: var(--grigio); }
.rischio s { color: #7a7a80; }

/* foto di sfondo che respirano */
.foto-sfondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.foto-sfondo img { width: 100%; height: 100%; object-fit: cover; opacity: .34; animation: respira 26s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.foto-sfondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, .85), rgba(10, 10, 11, .6) 45%, rgba(10, 10, 11, .95)); }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.09); } }

/* foto accanto al testo */
.foto-accanto { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.foto-accanto img { width: 100%; height: 100%; object-fit: cover; }
.foto-accanto .nota-mano { position: absolute; left: 18px; right: 16px; bottom: 18px; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
@media (max-width: 759px) { .foto-accanto { max-width: 440px; aspect-ratio: 4 / 5; } }

/* ═══ s01 · apertura: la promessa in grande, il gancio sopra, tanti dettagli vivi ═══ */
.eroe { position: relative; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding: calc(80px + env(safe-area-inset-top, 0px)) 0 0; background: var(--nero); overflow: hidden; }
@media (min-width: 1024px) { .eroe { padding-top: 64px; } }
.eroe .foto-sfondo img { opacity: .38; }
.eroe .foto-sfondo::after { background: linear-gradient(180deg, rgba(10, 10, 11, .6), rgba(10, 10, 11, .82) 55%, var(--nero)); }
@media (min-width: 760px) { .eroe .foto-sfondo::after { background: linear-gradient(90deg, rgba(10, 10, 11, .96) 0%, rgba(10, 10, 11, .75) 50%, rgba(10, 10, 11, .3) 100%); } }
.bagliore { position: absolute; z-index: 1; left: -30%; top: 8%; width: 100vw; height: 100vw; max-width: 900px; max-height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(225, 6, 19, .32), transparent 62%); animation: pulsa-luce 6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes pulsa-luce { from { opacity: .5; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
.lama { position: absolute; z-index: 1; inset: -20% auto -20% 0; width: 38%; background: linear-gradient(100deg, transparent, rgba(255, 36, 51, .10) 45%, rgba(255, 255, 255, .06) 50%, transparent 60%); transform: translateX(-120%) skewX(-12deg); animation: lama 7s ease-in-out 1.8s infinite; pointer-events: none; }
@keyframes lama { 0% { transform: translateX(-120%) skewX(-12deg); } 55%, 100% { transform: translateX(320%) skewX(-12deg); } }

/* il badge vivo */
.live { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; background: rgba(225, 6, 19, .14); box-shadow: inset 0 0 0 1px rgba(255, 36, 51, .45); font: 800 12px/1 var(--titoli); letter-spacing: .08em; text-transform: uppercase; color: #FF8A92; }
.live .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--rosso-vivo); box-shadow: 0 0 0 0 rgba(255, 36, 51, .7); animation: vivo 1.4s ease-out infinite; }
@keyframes vivo { 0% { box-shadow: 0 0 0 0 rgba(255, 36, 51, .7); } 100% { box-shadow: 0 0 0 10px rgba(255, 36, 51, 0); } }

/* il gancio: piccolo, sopra la promessa */
.gancio { margin-top: 16px; display: block; max-width: 30ch; font: 900 clamp(18px, 4.6vw, 20px)/1.25 var(--titoli); letter-spacing: .02em; text-transform: uppercase; color: #fff; padding-left: 12px; border-left: 3px solid var(--rosso); }
.gancio .barrato { margin: 0 .22em; color: #B5B5BA; }
.gancio .barrato path { stroke-width: 5; }

/* la promessa: righe a pesi diversi, le parole chiave riempiono la colonna (motion 01) */
.eroe [data-motion="titolo-compone"] { max-width: 600px; }
.promessa.mo-titolo { margin: 14px 0 0; font-family: var(--titoli); font-weight: 900; line-height: .98; letter-spacing: -.025em; color: #fff; }
.promessa .r-maiuscola { text-transform: uppercase; }
.promessa .r-piccola { font: 800 clamp(17px, 4.6vw, 22px)/1.1 var(--titoli); letter-spacing: 0; color: #C9C9CC; }
.promessa .r-corsivo { margin-top: .25em !important; font: italic 700 clamp(19px, 5.2vw, 26px)/1.2 var(--titoli); letter-spacing: -.01em; color: #fff; }
.promessa .r-media { margin-top: .35em !important; font: 800 clamp(21px, 5.8vw, 30px)/1.1 var(--titoli); letter-spacing: -.02em; }
.promessa .r-spenta { margin-top: .3em !important; color: #B5B5BA; text-decoration: line-through; text-decoration-color: var(--rosso); text-decoration-thickness: 2px; }
.promessa .mo-evid { color: var(--rosso-vivo); text-shadow: 0 0 44px rgba(225, 6, 19, .6); }
.promessa .r-letto { position: relative; }

/* il bottone col bordo che gira (motion 54) */
.cta-riga { margin-top: 26px; }
.eroe [data-motion="bottone-bordo"] .mo-cta { font-family: var(--titoli); font-weight: 900; text-transform: uppercase; word-spacing: .12em; }
.eroe .rischio { margin-top: 14px; }

/* la prova piccola: le facce */
.prova-mini { margin-top: 22px; display: flex; align-items: center; gap: 12px; }
.facce { display: flex; }
.facce img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--nero); }
.facce img + img { margin-left: -10px; }
.prova-mini p { font: 700 13.5px/1.3 var(--titoli); color: #C9C9CC; }
.prova-mini .stelle { color: var(--rosso-vivo); letter-spacing: .08em; }

/* la domanda in bolle di chat */
.domanda-bolle { position: relative; margin-top: 44px; display: grid; gap: 6px; justify-items: start; max-width: 420px; }
.bq { padding: 10px 14px; border-radius: 4px 18px 18px 18px; background: #1E1E21; font: 700 clamp(16px, 4.3vw, 18px)/1.3 var(--titoli); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8); }
.bq-colpo { background: #fff; color: #0A0A0B; }
.domanda-bolle .nota-mano { margin: 6px 0 0 20px; }

/* il mockup, piccolo e che galleggia */
.mockup-fascia { position: relative; z-index: 2; margin-top: 36px; display: flex; align-items: center; gap: 20px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(120deg, rgba(225, 6, 19, .22), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); max-width: 460px; }
.mini-tel { flex: 0 0 auto; width: 70px; aspect-ratio: 9 / 19; border-radius: 13px; background: #000; padding: 4px; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .8); animation: galleggia 5s ease-in-out infinite alternate; }
.mini-tel img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
@keyframes galleggia { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(-3deg) translateY(-6px); } }
.m-titolo { font: 900 20px/1.05 var(--titoli); letter-spacing: -.02em; text-transform: uppercase; }
.mockup-fascia .chips { margin-top: 8px; }
.mockup-fascia .chip { font-size: 11.5px; padding: 6px 10px; }

/* il nastro delle notifiche che scorre in fondo */
.nastro { position: relative; z-index: 2; margin-top: 40px; padding: 14px 0 22px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nastro-scorre { display: flex; width: max-content; animation: scorri 34s linear infinite; }
.nastro-giro { display: flex; gap: 10px; padding-right: 10px; }
.notif { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(30, 30, 33, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 13.5px; white-space: nowrap; color: #E6E6E9; }
.notif img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.notif b { font: 800 13px/1 var(--titoli); color: #fff; }
@keyframes scorri { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nastro-scorre, .lama, .live .punto, .mini-tel { animation: none; } }

/* ═══ la chat: telefono fisso (computer), in modalità scura ═══ */
.tel { display: none; }
@media (min-width: 1024px) {
  .tel { display: block; position: fixed; z-index: 40; top: 50%; right: max(28px, calc(50vw - 600px)); width: 300px; height: min(616px, 88dvh); translate: 0 -50%; border-radius: 46px; background: #000; padding: 11px; box-shadow: 0 0 0 1.5px #2a2a2e, 0 0 60px -10px rgba(225, 6, 19, .35), 0 40px 90px -30px rgba(0, 0, 0, .9); transition-property: opacity, translate; transition-duration: .45s; }
  .chat-via .tel { opacity: 0; translate: 40px -50%; pointer-events: none; }
}
.tel-schermo { position: relative; height: 100%; border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; background: #0E0E10; background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 16px 16px; }
.tel-stato { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px 4px; font: 700 13px/1 var(--titoli); color: #fff; background: #161618; }
.tel-stato span:last-child { letter-spacing: .1em; font-size: 11px; }
.tel-testa { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; background: #161618; border-bottom: 1px solid rgba(255, 255, 255, .06); color: #fff; }
.tel-testa img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.tel-testa b { display: block; font: 700 15px/1.1 var(--titoli); }
.tel-testa small { display: block; font-size: 11.5px; color: #9a9aa0; }
.tel-testa small.scrive { color: var(--rosso-vivo); font-weight: 700; }
.tel-corpo { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 12px 10px; overflow: hidden; }
.tel-scrivi { display: flex; align-items: center; gap: 8px; margin: 0 8px 12px; padding: 10px 14px; border-radius: 999px; background: #1E1E21; font-size: 13px; color: #7a7a80; }
.bolla { position: relative; max-width: 80%; padding: 7px 10px 5px; border-radius: 14px; font-size: 14px; line-height: 1.35; color: #fff; animation: bolla-entra .38s cubic-bezier(.3, 1.3, .5, 1) both; }
.bolla.lei { align-self: flex-start; background: #242427; border-top-left-radius: 4px; }
.bolla.lui { align-self: flex-end; background: #8E0A14; border-top-right-radius: 4px; }
.bolla .meta { display: block; text-align: right; font-size: 10.5px; color: rgba(255, 255, 255, .5); margin-top: 1px; }
.bolla.lui .meta::after { content: " ✓✓"; color: #FF8A92; letter-spacing: -.1em; }
.bolla.sistema { align-self: center; max-width: 90%; background: rgba(255, 255, 255, .07); color: #a1a1a6; font-size: 11.5px; padding: 4px 10px; border-radius: 8px; }
.bolla.puntini { display: flex; gap: 4px; padding: 11px 13px; }
.bolla.puntini i { width: 7px; height: 7px; border-radius: 50%; background: #8a8a90; animation: salta 1s infinite ease-in-out; }
.bolla.puntini i:nth-child(2) { animation-delay: .15s; }
.bolla.puntini i:nth-child(3) { animation-delay: .3s; }
@keyframes bolla-entra { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes salta { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* la chat: fascia-notifica (telefono) */
.fascia { position: fixed; z-index: 45; top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; height: 58px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 16px; background: rgba(18, 18, 20, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; box-shadow: inset 3px 0 0 var(--rosso), 0 12px 30px -12px rgba(0, 0, 0, .8); translate: 0 calc(-100% - 20px); transition-property: translate, opacity; transition-duration: .45s; transition-timing-function: cubic-bezier(.3, 1.2, .5, 1); }
.fascia.vis { translate: 0 0; }
.chat-via .fascia { opacity: 0; }
.fascia img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.fascia-testo { min-width: 0; flex: 1; }
.fascia-riga { display: flex; justify-content: space-between; gap: 8px; font: 700 13.5px/1.2 var(--titoli); }
.fascia-riga span { font: 500 11.5px/1.2 var(--testo); color: #9a9aa0; }
.fascia-msg { font-size: 14px; line-height: 1.3; color: #E6E6E9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) { .fascia { display: none; } }

/* ═══ s02 · le frasi ═══ */
.fatti { margin-top: 24px; display: grid; gap: 10px; }
.fatto { display: flex; align-items: center; gap: 14px; font: 800 clamp(18px, 4.9vw, 23px)/1.2 var(--titoli); }
.fatto span:first-child { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #1C1C1F; font-size: 21px; }
[data-motion="messaggi-chat"] { max-width: 520px; background-color: #151517; background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); }
[data-motion="messaggi-chat"] .mo-bolla { background: #fff; color: #0A0A0B; }
[data-motion="messaggi-chat"] .mo-nota { color: #9a9aa0; }

/* ═══ s03 · il pannello dell'app ═══ */
.app { margin-top: 30px; max-width: 480px; padding: 22px; border-radius: 24px; background: #151517; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 70px -30px rgba(0, 0, 0, .9); }
.app-testa { display: flex; justify-content: space-between; align-items: center; font: 800 16px/1 var(--titoli); }
.app-testa .gold { font: 800 11px/1 var(--titoli); letter-spacing: .12em; padding: 6px 10px; border-radius: 999px; background: #fff; color: #0A0A0B; }
.app-numeri { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.app-numeri div { padding: 14px 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .05); text-align: center; }
.app-numeri strong { display: block; font: 900 clamp(34px, 9vw, 46px)/1 var(--titoli); letter-spacing: -.04em; }
.app-numeri span { display: block; margin-top: 6px; font-size: 12.5px; color: #9a9aa0; }
.app-numeri .zero { background: rgba(225, 6, 19, .18); box-shadow: inset 0 0 0 1.5px var(--rosso); }
.app-numeri .zero strong { color: var(--rosso-vivo); animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.app-riga { margin-top: 16px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #C9C9CC; min-height: 1.4em; }
.app-riga::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rosso-vivo); flex: 0 0 auto; }
.cursore::after { content: "▍"; margin-left: 1px; animation: lampeggia 1s steps(1) infinite; color: var(--rosso-vivo); }
@keyframes lampeggia { 50% { opacity: 0; } }
.zero-gigante { margin-top: 40px; display: flex; align-items: flex-end; gap: 16px; }
.zero-gigante .cifra { color: var(--rosso-vivo); text-shadow: 0 0 60px rgba(225, 6, 19, .5); }
.zero-gigante p { font: 900 clamp(20px, 5.4vw, 30px)/1.1 var(--titoli); padding-bottom: 14px; max-width: 11ch; text-transform: uppercase; }

/* ═══ s04 · termometro dell'amico ═══ */
.termo { margin-top: 28px; display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .termo { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; } }
.spunte { display: grid; gap: 10px; }
.spunte .nota-mano { margin: 12px 0 0 62px; justify-self: start; }
.spunta { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #161618; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); cursor: pointer; font: 700 16px/1.3 var(--titoli); transition-property: background-color, box-shadow, transform; transition-duration: .2s; }
.spunta:active { transform: scale(.98); }
.spunta input { position: absolute; opacity: 0; pointer-events: none; }
.interr { flex: 0 0 auto; position: relative; width: 46px; height: 28px; border-radius: 999px; background: #3a3a3f; transition-property: background-color; transition-duration: .25s; }
.interr::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition-property: translate; transition-duration: .25s; transition-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
.spunta input:checked + .interr { background: var(--rosso); }
.spunta input:checked + .interr::after { translate: 18px 0; }
.spunta input:focus-visible + .interr { outline: 3px solid #fff; outline-offset: 2px; }
.spunta:has(input:checked) { background: rgba(225, 6, 19, .16); box-shadow: inset 0 0 0 1.5px var(--rosso); }
.quadrante { position: relative; padding: 24px 20px 22px; border-radius: 22px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); text-align: center; }
@media (min-width: 900px) { .quadrante { position: sticky; top: 90px; } }
.quadrante svg { width: 100%; max-width: 300px; margin-inline: auto; overflow: visible; }
.quadrante .ago { transform-origin: 150px 150px; transition-property: transform; transition-duration: .8s; transition-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
.quadrante .etich { font: 800 12px var(--titoli); letter-spacing: .14em; fill: #C9C9CC; }
.conteggio { margin-top: 4px; font: 900 48px/1 var(--titoli); letter-spacing: -.04em; }
.conteggio small { font-size: 18px; color: #7a7a80; }
.verdetto { margin-top: 10px; font: 800 19px/1.3 var(--titoli); min-height: 2.6em; color: var(--rosso-vivo); }
.verdetti { display: none; }

/* ═══ s05 · la verità scomoda (sfondo rosso) ═══ */
#s05 [data-motion="testo-si-accende"] { color: #fff; }
#s05 [data-motion="testo-si-accende"] .mo-pa.mo-chiave { color: #0A0A0B; }
.confronto { margin-top: 40px; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.confronto > div { padding: 18px 16px; border-radius: 18px; }
.confronto .amico { background: rgba(0, 0, 0, .28); }
.confronto .uomo { background: #0A0A0B; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); }
.confronto h3 { font: 900 12.5px/1.2 var(--titoli); letter-spacing: .14em; text-transform: uppercase; }
.confronto .amico h3 { color: rgba(255, 255, 255, .72); }
.confronto .uomo h3 { color: var(--rosso-vivo); }
.confronto ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; font: 800 clamp(15.5px, 4.2vw, 19px)/1.25 var(--titoli); }
.confronto .amico li { color: rgba(255, 255, 255, .72); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .6); text-decoration-thickness: 3px; }
.confronto .uomo li::before { content: "→ "; color: var(--rosso-vivo); }
#s05 .due { margin-top: 40px; }

/* ═══ s06 · sipario ═══ */
[data-motion="sipario"] .mo-dietro img { opacity: .92; }
[data-motion="sipario"] .mo-grande { color: #fff; text-shadow: 0 0 40px rgba(225, 6, 19, .7); }

/* ═══ s07 · come funziona: l'equazione e la schermata bloccata ═══ */
.equazione { margin-top: 22px; display: grid; gap: 8px; justify-items: start; }
.equazione .pezzo { display: inline-block; padding: 10px 16px; border-radius: 12px; font: 900 clamp(19px, 5.4vw, 28px)/1.05 var(--titoli); letter-spacing: -.015em; text-transform: uppercase; }
.equazione .p1 { background: #1C1C1F; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.equazione .p2 { background: var(--rosso); }
.equazione .segno { font: 900 30px/1 var(--titoli); color: var(--rosso-vivo); padding-left: 14px; }
.equazione .risultato { font: 900 clamp(28px, 8vw, 46px)/1 var(--titoli); letter-spacing: -.03em; text-transform: uppercase; }
.blocco { margin-top: 28px; max-width: 420px; padding: 26px 16px 18px; border-radius: 32px; background: linear-gradient(170deg, #3A0409 0%, #0A0A0B 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 70px -30px rgba(0, 0, 0, .9); }
.blocco-ora { text-align: center; font: 800 58px/1 var(--titoli); letter-spacing: -.03em; }
.blocco-data { text-align: center; margin-top: 4px; font-size: 14px; color: #BDBDC2; }
.notifiche { margin-top: 22px; display: grid; gap: 8px; }
.notifica { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 16px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; text-align: left; border: 0; width: 100%; }
.notifica .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--rosso); font: 900 15px var(--titoli); }
.notifica b { display: block; font: 800 14.5px/1.2 var(--titoli); }
.notifica span { display: block; font-size: 13px; line-height: 1.3; color: #D2D2D6; }
.notifica em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--rosso-vivo); white-space: nowrap; }
.notifica.trema { animation: trema .45s; }
@keyframes trema { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.blocco-avviso { margin-top: 12px; text-align: center; font-size: 12.5px; color: #9a9aa0; min-height: 1.3em; }
.sotto-blocco { margin-top: 20px; }

/* ═══ s08 · bullet che arrivano ═══ */
.arrivi { margin-top: 28px; display: grid; gap: 14px; max-width: 600px; }
.arrivo { position: relative; padding: 18px 20px; border-radius: 6px 22px 22px 22px; background: #fff; color: #0A0A0B; box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .8); }
.arrivo h3 { font: 900 clamp(19px, 5vw, 23px)/1.18 var(--titoli); letter-spacing: -.015em; }
.arrivo p { margin-top: 6px; font-size: 16px; line-height: 1.45; color: #4a4a50; }
.arrivo .emo { font-size: 26px; line-height: 1; margin-bottom: 8px; display: block; }
.arrivo .punt { position: absolute; left: 20px; top: 20px; display: flex; gap: 5px; opacity: 0; }
.arrivo .punt i { width: 8px; height: 8px; border-radius: 50%; background: #b3b3b8; animation: salta 1s infinite ease-in-out; }
.arrivo .punt i:nth-child(2) { animation-delay: .15s; }
.arrivo .punt i:nth-child(3) { animation-delay: .3s; }
.arrivi.armato .arrivo:not(.scrive) { opacity: 0; transform: translateY(12px); }
.arrivi.armato .arrivo { transition-property: clip-path, opacity, transform; transition-duration: .5s, .3s, .3s; transition-timing-function: cubic-bezier(.3, .9, .25, 1); clip-path: inset(0 calc(100% - 78px) calc(100% - 50px) 0 round 6px 22px 22px 22px); }
.arrivi.armato .arrivo > :not(.punt) { opacity: 0; transition-property: opacity; transition-duration: .3s; }
.arrivi.armato .arrivo.scrive .punt { opacity: 1; }
.arrivi.armato .arrivo.aperto { clip-path: inset(0 0 0 0 round 6px 22px 22px 22px); }
.arrivi.armato .arrivo.aperto > :not(.punt) { opacity: 1; transition-delay: .15s; }
.arrivi.armato .arrivo.aperto .punt { opacity: 0; }
#s08 .bottone { margin-top: 32px; }

/* ═══ s09 · l'indice come lista delle chat ═══ */
.numeri-guida { margin-top: 22px; display: grid; gap: 6px; }
.ng-riga { display: flex; align-items: center; gap: 12px; }
.numeri-guida .n { font: 900 clamp(64px, 18vw, 110px)/.85 var(--titoli); letter-spacing: -.05em; color: var(--rosso-vivo); }
.numeri-guida .l { font: 900 clamp(15px, 4.2vw, 19px)/1.1 var(--titoli); text-transform: uppercase; max-width: 10ch; }
.numeri-guida .piu { font: 900 38px/1 var(--titoli); }
.lista { margin-top: 26px; max-width: 520px; border-radius: 24px; overflow: hidden; background: #fff; color: #0A0A0B; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.lista-testa { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 18px 10px; font: 900 26px/1 var(--titoli); letter-spacing: -.03em; }
.lista-testa .badge { font: 800 12px/1 var(--titoli); letter-spacing: .1em; color: var(--rosso); }
.riga-chat { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid #EEEEF0; }
.riga-chat .av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 900 16px var(--titoli); color: #fff; background: #0A0A0B; }
.riga-chat:nth-child(odd) .av { background: var(--rosso); }
.riga-chat b { display: block; font: 800 15.5px/1.25 var(--titoli); }
.riga-chat span { display: block; font-size: 14px; line-height: 1.35; color: #5c5c63; }
.riga-chat .dx { text-align: right; font-size: 11.5px; color: var(--rosso); font-weight: 700; }
.riga-chat .dx i { display: inline-grid; place-items: center; margin-top: 5px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rosso); color: #fff; font: 800 11px var(--titoli); font-style: normal; }

/* ═══ s10 · zoom nel telefono ═══ */
[data-motion="zoom-telefono"] .mo-palco { background: #0A0A0B; }
[data-motion="zoom-telefono"] .mo-sopra { color: #fff; }
[data-motion="zoom-telefono"] .mo-velo { background: linear-gradient(180deg, rgba(10, 10, 11, .25) 15%, rgba(10, 10, 11, .95) 62%); }

/* ═══ s11 · bonus ═══ */
[data-motion="carte-inclinate"] { margin-top: 28px; }
[data-motion="carte-inclinate"] .mo-carta { background: #161618; border-color: rgba(255, 255, 255, .1); color: #fff; }
[data-motion="carte-inclinate"] .mo-img { padding: 0; background: #000; }
[data-motion="carte-inclinate"] .mo-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transform: none; }
[data-motion="carte-inclinate"] .mo-etichetta { color: var(--rosso-vivo); }
[data-motion="carte-inclinate"] h3 { color: #fff; font-family: var(--titoli); font-weight: 900; }
[data-motion="carte-inclinate"] .mo-corpo p:last-child { color: #C9C9CC; }

/* ═══ s12 · testimonianze ═══ */
.voci { margin-top: 28px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .voci { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.voce { padding: 20px; border-radius: 20px; background: #151517; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.voce-risultato { font: 900 clamp(21px, 5.6vw, 26px)/1.15 var(--titoli); letter-spacing: -.02em; }
.voce-risultato::before { content: "“"; display: block; font: 900 54px/.5 var(--titoli); color: var(--rosso); margin: 8px 0 6px; }
.voce-contesto { margin-top: 8px; font-size: 18px; line-height: 1.45; color: #A6A6AB; }
.voce-chi { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.voce-chi img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.voce-chi b { display: block; font: 800 15px/1.2 var(--titoli); }
.voce-chi span { display: block; font-size: 13px; color: #8a8a90; }
.stelle { color: var(--rosso-vivo); letter-spacing: .1em; font-size: 14px; }
.vocale-box { margin-top: 22px; padding: 20px; border-radius: 20px; background: #fff; color: #0A0A0B; max-width: 520px; }
.vocale-box .voce-chi { margin-top: 0; }
.vocale-box .voce-chi span { color: #5c5c63; }

/* ═══ s13 · i sabati ═══ */
.calcolo { margin-top: 26px; padding: 22px; border-radius: 22px; background: #151517; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); max-width: 560px; }
.calcolo label { display: flex; justify-content: space-between; font: 800 15px/1.3 var(--titoli); }
.calcolo label output { color: var(--rosso-vivo); }
.calcolo input[type="range"] { width: 100%; margin-top: 14px; accent-color: var(--rosso); height: 30px; }
.sabati { margin-top: 10px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.sabati .cifra { font-size: clamp(96px, 28vw, 170px); }
.sabati span { font: 900 clamp(20px, 5.4vw, 28px)/1.1 var(--titoli); color: var(--rosso-vivo); text-transform: uppercase; }
.calcolo .dopo { margin-top: 8px; font: 700 16px/1.4 var(--titoli); color: #C9C9CC; }
.copie { margin-top: 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.copie [data-motion="orologio-palette"] { font-size: clamp(64px, 18vw, 110px); }
.copie p { max-width: 20ch; font: 900 clamp(19px, 5vw, 24px)/1.2 var(--titoli); }

/* ═══ s14 · offerta (sfondo rosso) ═══ */
.offerta-box { margin-top: 28px; max-width: 620px; padding: 28px 22px; border-radius: 26px; background: #fff; color: #0A0A0B; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.riepilogo { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.riepilogo li { display: flex; gap: 12px; align-items: flex-start; font: 800 16.5px/1.35 var(--titoli); }
.riepilogo li::before { content: "✓"; flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--rosso); color: #fff; font-size: 13px; margin-top: 1px; }
.prezzo-zona { margin-top: 22px; padding-top: 20px; border-top: 1px dashed #D5D5DA; }
[data-motion="prezzo-rullo"] .mo-rullo { color: var(--rosso); }
.meno-di { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.meno-di span { padding: 8px 12px; border-radius: 10px; background: #F3F3F5; font: 800 13.5px/1.2 var(--titoli); }
.meno-di span:first-child { background: none; padding-left: 0; color: #5c5c63; }
.offerta-box .bottone { margin-top: 22px; width: 100%; background: var(--rosso); box-shadow: 0 8px 0 0 #6E050C, 0 22px 40px -14px rgba(225, 6, 19, .75); }
.offerta-box .rischio { text-align: center; color: #5c5c63; }
.pagamenti { margin-top: 10px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pagamenti span { font: 800 11px/1 var(--titoli); letter-spacing: .08em; padding: 7px 10px; border-radius: 8px; background: #F0F0F2; color: #3b3b40; }

/* ═══ s15 · garanzia ═══ */
.garanzia { display: grid; gap: 30px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .garanzia { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }
[data-motion="timbro"] { max-width: 240px; margin-inline: auto; }

/* ═══ s16 · domande ═══ */
.domande { margin-top: 28px; display: grid; gap: 10px; max-width: 680px; }
.domande details { border-radius: 16px; background: #151517; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.domande summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 20px; position: relative; font: 800 17px/1.3 var(--titoli); }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: "+"; position: absolute; right: 16px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--rosso); color: #fff; font: 900 20px/1 var(--titoli); transition-property: rotate; transition-duration: .25s; }
.domande details[open] summary::after { rotate: 45deg; }
.dr-corpo { padding: 0 20px 20px; font-size: 16px; line-height: 1.55; color: #C9C9CC; }

/* ═══ s17 · congedo ═══ */
#s17 { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
#s17 .foto-sfondo img { opacity: .36; }
.ultimo { margin-top: 28px; display: inline-flex; flex-direction: column; gap: 4px; max-width: 360px; padding: 12px 16px 8px; border-radius: 4px 20px 20px 20px; background: #242427; box-shadow: inset 3px 0 0 var(--rosso), 0 20px 40px -20px rgba(0, 0, 0, .8); }
.ultimo small { font: 800 12px/1 var(--titoli); color: var(--rosso-vivo); }
.ultimo p { font: 800 clamp(20px, 5.4vw, 25px)/1.25 var(--titoli); }
.ultimo span { align-self: flex-end; font-size: 11px; color: #8a8a90; }
#s17 .bottone { margin-top: 32px; }

/* ── footer ── */
.piede { padding: 44px 0 110px; background: #050505; color: #7a7a80; font-size: 13px; line-height: 1.6; }
.piede nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.piede a { color: #BDBDC2; }

/* ── barra d'acquisto (telefono) ── */
#barra-acquisto { position: fixed; z-index: 46; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 16px; background: rgba(10, 10, 11, .96); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 14px 34px -12px rgba(0, 0, 0, .8); }
#barra-acquisto[hidden] { display: none; }
#barra-acquisto .barra-acquisto-prezzo { font: 900 22px/1 var(--titoli); }
#barra-acquisto .barra-acquisto-prezzo s { font-size: 13px; color: #7a7a80; font-weight: 600; margin-right: 6px; }
#barra-acquisto .bottone { min-height: 48px; padding: 12px 18px; font-size: 14px; box-shadow: none; }
@media (min-width: 1024px) { #barra-acquisto { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .foto-sfondo img, .app-numeri .zero strong, .bolla, .bolla.puntini i, .bagliore { animation: none; }
}

/* via d'uscita: la riga che chiude le scene sul problema lasciando intravedere la soluzione */
.uscita { position: relative; margin-top: 22px; max-width: 40rem; padding: 18px 20px 18px 54px; border-radius: 16px; border: 1.5px solid rgba(255, 36, 51, .55); background: rgba(245, 245, 246, .05); font: 600 clamp(17px, 4.6vw, 21px)/1.42 var(--testo); color: #E4E4E6; text-wrap: pretty; }
.uscita::before { content: "→"; position: absolute; left: 20px; top: 19px; color: var(--rosso-vivo); font: 900 1.35em/1 var(--titoli); }
.uscita b { color: #fff; font-weight: 800; }
.uscita .sott { color: #fff; font-weight: 800; white-space: normal; }
.rossa .uscita { background: #0A0A0B; border-color: #0A0A0B; }

/* ── grafiche del cliente (05/10) ── */
.mockup-mini { flex: 0 0 auto; width: 150px; height: auto; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .7)); animation: galleggia 5s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .mockup-mini { animation: none; } }
[data-motion="carte-inclinate"] .mo-img.mockup { padding: 14px 10px 0; background: radial-gradient(120% 90% at 50% 30%, rgba(225, 6, 19, .28), #0A0A0B 70%); }
[data-motion="carte-inclinate"] .mo-img.mockup img { object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); }
.mockup-bundle { display: block; width: 100%; max-width: 380px; height: auto; margin: -4px auto 16px; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .35)); }
.piede-logo { display: block; width: 190px; height: auto; margin-bottom: 18px; }

/* ── aria e righe (tetto 04/10) ── */
.foto-sfondo picture, .foto-sfondo img { position: absolute; inset: 0; }
.eroe { padding-bottom: 72px; }
[data-motion="zoom-telefono"] .mo-piccola, [data-motion="zoom-telefono"] .mo-grande, [data-motion="zoom-telefono"] .mo-sopra { max-width: 680px; margin-inline: auto; }
@media (min-width: 760px) { .scena { padding: max(140px, 15dvh) 0; } .eroe { padding-top: 150px; padding-bottom: 120px; } }