/* LiveFidelity, sito vetrina (25 ottobre 2026), sui quattro riferimenti scelti da Ruben:
   - Apple Wallet per la prima pagina: titolo grande al centro e il telefono sotto;
   - Huly per lo stile tech: fondo quasi nero, una lama di luce, bordi che si illuminano;
   - Loopy Loyalty per colori e grafiche: viola, rosa per i bottoni, riquadri di numeri attorno al telefono;
   - Passcreator per i testi: schede per uso, tre passi, il canale, tre riquadri di fiducia.
   Caratteri: Plus Jakarta Sans per i titoli (quello di Loopy), Inter per il testo (quello di Huly).
   Nessuno stile in linea e nessuna libreria esterna: la pagina ha CSP 'self' (src/index.ts). */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --nero: #090a0c;
  --nero-2: #111217;
  --nero-3: #18191f;
  --filo-scuro: rgba(255, 255, 255, .09);
  --viola: #7e3de3;
  --viola-chiaro: #8f50df;
  --viola-fondo: #732fe5;
  --rosa: #f74780;
  --rosa-scuro: #e0336c;
  --verde: #14a05a;
  --ardesia: #353f4f;
  --grigio: #6c757d;
  --grigio-tono: #9aa0ad;
  --lavanda: #f4f4f9;
  --lavanda-2: #e9e8f4;
  --bianco: #ffffff;
  --su-scuro: rgba(255, 255, 255, .68);
  --tono-scuro: rgba(255, 255, 255, .5);
  --titoli: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --testo: "Inter", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --luce-viola: rgba(143, 80, 223, .7);
  --luce-rosa: rgba(247, 71, 128, .55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--nero); color: var(--ardesia); font-family: var(--testo); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--titoli); margin: 0; text-wrap: balance; }
h2 { font-size: clamp(34px, 5.2vw, 64px); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; color: var(--ardesia); }
h3 { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
p { margin: 0; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: 10px; }
.tono { color: var(--grigio-tono); }
/* punto e virgola dei titoli: il carattere li stacca troppo con le lettere strette */
h1 .p, h2 .p, h3 .p { margin-left: -.09em; }

.largo { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* --- marchio: la ı di Live ha come puntino il «punto vivo», rosa --- */
.marchio { font-family: var(--titoli); font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: -.035em; text-decoration: none; color: var(--bianco); white-space: nowrap; }
.i-viva { position: relative; display: inline-block; }
.i-viva::after { content: ""; position: absolute; left: 50%; top: .02em; width: .25em; height: .25em; margin-left: -.125em; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 10px rgba(247, 71, 128, .8); }
.marchio-piccolo { font-size: 20px; }
.punto-vivo { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 0 0 rgba(247, 71, 128, .6); animation: pulsa 2.2s ease-out infinite; }
@keyframes pulsa {
  0% { box-shadow: 0 0 0 0 rgba(247, 71, 128, .6); }
  70% { box-shadow: 0 0 0 7px rgba(247, 71, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(247, 71, 128, 0); }
}

/* --- testata --- */
.testata { position: sticky; top: 0; z-index: 30; background: rgba(9, 10, 12, .72); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); border-bottom: 1px solid var(--filo-scuro); padding-top: env(safe-area-inset-top, 0px); }
.testata-dentro { display: flex; align-items: center; gap: 32px; height: 66px; }
.menu { display: flex; gap: 26px; margin-inline: auto; font-size: 14.5px; }
.menu a { color: var(--su-scuro); text-decoration: none; transition: color .2s; }
.menu a:hover { color: var(--bianco); }
.testata-azioni { display: flex; align-items: center; gap: 18px; }
.link-accedi { color: var(--su-scuro); font-size: 14.5px; text-decoration: none; }
.link-accedi:hover { color: var(--bianco); }
.lingua { color: var(--su-scuro); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-decoration: none; padding: 4px 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; }
.lingua:hover { color: var(--bianco); border-color: rgba(255,255,255,.5); }

/* --- bottoni --- */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; background: var(--rosa); color: var(--bianco); font: 600 16px/1.2 var(--testo); text-decoration: none; box-shadow: 0 10px 30px -10px rgba(247, 71, 128, .75); transition: background .2s, transform .2s; }
.bottone:hover { background: var(--rosa-scuro); transform: translateY(-1px); }
.bottone-piccolo { padding: 10px 18px; font-size: 14px; box-shadow: none; }
.bottone-grande { padding: 18px 34px; font-size: 18px; }
.bottone-luce { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--nero); font: 700 12.5px/1.2 var(--testo); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; box-shadow: 0 0 0 5px rgba(255, 255, 255, .1), 0 0 34px rgba(255, 255, 255, .22); transition: box-shadow .25s; }
.bottone-luce:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, .16), 0 0 44px rgba(255, 255, 255, .35); }

/* --- prima pagina --- */
.eroe { position: relative; overflow: hidden; color: var(--bianco); background: radial-gradient(1100px 520px at 50% 108%, rgba(115, 47, 229, .42), transparent 70%), var(--nero); }
.fascio { position: absolute; left: 50%; top: -80px; width: 520px; height: 880px; margin-left: -260px; pointer-events: none; }
/* la lama di luce resta tenue dietro i testi e si accende sopra il telefono */
.fascio::before { content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 100%; margin-left: -1.5px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .95) 78%, rgba(197, 160, 255, .9) 92%, rgba(143, 80, 223, .2) 100%); filter: blur(1.5px); animation: respira 6s ease-in-out infinite; }
.fascio::after { content: ""; position: absolute; inset: 0; background: radial-gradient(150px 300px at 50% 84%, rgba(143, 80, 223, .6), rgba(143, 80, 223, 0)); filter: blur(24px); animation: respira 6s ease-in-out infinite; }
@keyframes respira { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.eroe-dentro { position: relative; display: grid; justify-items: center; text-align: center; padding-block: 72px 40px; }
.pillola { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); font-size: 13.5px; color: var(--su-scuro); }
.eroe h1 { margin-top: 26px; font-size: clamp(46px, 8vw, 104px); font-weight: 800; line-height: .98; letter-spacing: -.05em; color: var(--bianco); }
.eroe h1 .tono { color: var(--tono-scuro); }
.eroe-sotto { margin-top: 26px; max-width: 640px; font-size: clamp(17px, 1.6vw, 19px); color: var(--su-scuro); }
.eroe-azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; margin-top: 34px; }
.eroe-nota { margin-top: 22px; font-size: 13.5px; color: rgba(255, 255, 255, .5); }
.eroe-dentro > :not(.scena):not(.eroe-fonte) { animation: sale .8s cubic-bezier(.2, .8, .2, 1) both; }
.eroe-dentro > :nth-child(2) { animation-delay: .06s; }
.eroe-dentro > :nth-child(3) { animation-delay: .12s; }
.eroe-dentro > :nth-child(4) { animation-delay: .18s; }
.eroe-dentro > :nth-child(5) { animation-delay: .24s; }
@keyframes sale { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* la scena: il telefono al centro, i riquadri di Loopy attorno */
.scena { position: relative; width: 100%; max-width: 1000px; height: 600px; margin-top: 60px; }
.telefono { position: absolute; left: 50%; top: 0; width: 270px; margin-left: -135px; border-radius: 44px; overflow: hidden; background: #000; box-shadow: 0 0 0 9px #0d0e12, 0 0 0 10px rgba(255, 255, 255, .16), 0 40px 120px -20px rgba(143, 80, 223, .75), 0 0 160px -30px rgba(247, 71, 128, .45); animation: entra 1s .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes entra { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.galleggia { position: absolute; z-index: 2; text-align: left; animation: entra .9s cubic-bezier(.2, .8, .2, 1) both, ondeggia 7s ease-in-out 1.2s infinite; }
.galleggia-1 { left: 9%; top: 40px; animation-delay: .5s, 1.2s; }
.galleggia-2 { left: 0; top: 230px; width: 250px; animation-delay: .65s, 2s; }
.galleggia-3 { right: 0; top: 70px; width: 330px; animation-delay: .8s, 1.6s; }
.galleggia-4 { right: 8%; top: 300px; animation-delay: .95s, 2.4s; }
@keyframes ondeggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.dato { display: grid; gap: 2px; min-width: 176px; padding: 14px 16px; border-radius: 14px; background: var(--bianco); color: var(--ardesia); box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .6); }
.dato-titolo { font-size: 12px; color: var(--grigio); }
.dato b { font: 800 28px/1.15 var(--titoli); letter-spacing: -.03em; }
.dato .su { font-size: 12px; font-weight: 600; color: var(--verde); }
.dato-grafico { gap: 6px; }
.linea { width: 100%; height: 58px; }
.notifica { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 22px; background: rgba(245, 245, 250, .9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #111; box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .6); font-size: 14px; line-height: 1.35; }
.notifica-icona { flex: none; width: 38px; height: 38px; border-radius: 9px; background: radial-gradient(circle at 50% 50%, var(--rosa) 0 22%, transparent 24%), linear-gradient(135deg, var(--viola-chiaro), var(--rosa)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.notifica-testa { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.notifica-testa span { color: #8a8a90; font-size: 12.5px; }
.eroe-fonte { margin-top: 18px; font-size: 12.5px; color: rgba(255, 255, 255, .4); }

/* --- fascia dei settori --- */
.settori-fascia { background: var(--nero); border-top: 1px solid var(--filo-scuro); }
.settori-dentro { display: grid; justify-items: center; gap: 16px; padding-block: 30px 34px; text-align: center; }
.settori-dentro > p { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45); font-weight: 600; }
.settori { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.settori li { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--filo-scuro); color: var(--su-scuro); font-size: 14.5px; }

/* --- sezioni --- */
.sezione { padding-block: 112px; }
.sezione-chiara { background: var(--lavanda); }
.sezione-bianca { background: var(--bianco); }
.sezione-scura { background: var(--nero); color: var(--bianco); }
.sezione-scura h2 { color: var(--bianco); }
.sezione-scura h2 .tono { color: var(--tono-scuro); }
.occhiello { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--viola); margin-bottom: 16px; }
.occhiello-chiaro { color: #b48cff; }
.introduzione { margin-top: 22px; max-width: 60ch; font-size: 19px; color: var(--grigio); }
.introduzione.chiara { color: var(--su-scuro); }

/* le schede delle carte */
.schede { margin-top: 48px; }
.schede-bottoni { display: inline-flex; gap: 4px; padding: 6px; border-radius: 999px; background: var(--lavanda-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.schede-bottoni::-webkit-scrollbar { display: none; }
.schede-bottoni button { flex: none; border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; font: 600 15px/1.2 var(--testo); color: var(--grigio); cursor: pointer; transition: background .2s, color .2s; }
.schede-bottoni button:hover { color: var(--ardesia); }
.schede-bottoni button[aria-selected="true"] { background: var(--bianco); color: var(--viola); box-shadow: 0 4px 14px -6px rgba(53, 63, 79, .35); }
.pannello { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; margin-top: 32px; }
.pannello + .pannello { margin-top: 48px; }
.pannello[hidden] { display: none; } /* senza questo, display: grid qui sopra vincerebbe sull'attributo hidden */
.pannello-testo { display: grid; gap: 18px; }
.pannello-testo h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.03em; color: var(--ardesia); }
.pannello-testo p { color: var(--grigio); font-size: 17.5px; }
.punti { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.punti li { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 14px 0; border-top: 1px solid #dedfe9; font-weight: 500; color: var(--ardesia); }
.punti li span { font: 700 14px/1.6 var(--titoli); color: var(--viola); }
.pannello-figura { position: relative; display: grid; place-items: center; min-height: 520px; padding: 44px; border-radius: 28px; overflow: hidden; background: linear-gradient(135deg, var(--viola-chiaro), var(--viola-fondo)); }
.pannello-figura::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .28), transparent); top: -120px; right: -120px; }
.schermo-telefono { position: relative; width: min(250px, 70%); border-radius: 34px; box-shadow: 0 0 0 7px #0d0e12, 0 30px 60px -20px rgba(20, 0, 60, .7); }
.schermo-largo { position: relative; width: 100%; border-radius: 14px; box-shadow: 0 30px 60px -24px rgba(20, 0, 60, .7), 0 0 0 1px rgba(255, 255, 255, .25); }

/* i tre passi */
.passi { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; margin-top: 52px; }
.passi-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.passi-elenco button { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px; text-align: left; padding: 20px 22px; border-radius: 18px; border: 1px solid transparent; background: transparent; font: inherit; color: var(--grigio); cursor: pointer; transition: background .2s, border-color .2s; }
.passi-elenco button:hover { background: var(--lavanda); }
.passi-elenco button[aria-pressed="true"] { background: var(--lavanda); border-color: #e2ddf6; color: var(--ardesia); }
.passo-numero { font: 800 15px/1.6 var(--titoli); color: var(--grigio-tono); }
.passi-elenco button[aria-pressed="true"] .passo-numero { color: var(--viola); }
.passo-corpo { display: grid; gap: 6px; font-size: 16px; }
.passo-corpo b { font: 700 21px/1.25 var(--titoli); letter-spacing: -.02em; color: var(--ardesia); }
.passi-figure { position: relative; display: grid; place-items: center; min-height: 540px; padding: 40px; border-radius: 28px; background: radial-gradient(600px 400px at 70% 20%, rgba(143, 80, 223, .35), transparent 70%), var(--nero); overflow: hidden; }
.passi-figure img { display: none; }
.passi-figure[data-attivo="0"] img[data-figura="0"],
.passi-figure[data-attivo="1"] img[data-figura="1"],
.passi-figure[data-attivo="2"] img[data-figura="2"] { display: block; animation: compare .5s ease both; }
@keyframes compare { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.passi-figure .schermo-largo { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 60px -10px var(--luce-viola), 0 0 120px -30px var(--luce-rosa); }
.passi-figure .schermo-telefono { width: min(240px, 62%); box-shadow: 0 0 0 7px #1b1c22, 0 0 80px -10px var(--luce-viola); }

/* il canale: riquadri scuri che si illuminano (Huly) */
.luci { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.luce { position: relative; display: grid; gap: 12px; align-content: start; padding: 28px 24px 30px; border-radius: 20px; background: linear-gradient(180deg, var(--nero-3), var(--nero-2)); border: 1px solid var(--filo-scuro); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.luce::before { content: ""; position: absolute; left: 50%; top: -90px; width: 260px; height: 180px; margin-left: -130px; background: radial-gradient(closest-side, rgba(143, 80, 223, .45), transparent); pointer-events: none; }
.luce:hover { border-color: rgba(180, 140, 255, .45); box-shadow: 0 0 50px -12px var(--luce-viola); }
.luce .icona { position: relative; width: 30px; height: 30px; color: #c6a6ff; }
.luce h3 { position: relative; font-size: 20px; color: var(--bianco); }
.luce p { position: relative; color: var(--su-scuro); font-size: 15.5px; }

/* il gestionale: il vetro col bordo luminoso */
.sezione-gestionale { padding-top: 40px; }
.vetro { position: relative; margin-top: 56px; border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 1px rgba(180, 140, 255, .35), 0 0 70px -8px var(--luce-viola), 0 0 160px -30px var(--luce-rosa); }
.vetro img { width: 100%; }
.funzioni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 40px; margin-top: 64px; }
.funzione { display: grid; gap: 8px; padding-left: 18px; border-left: 2px solid rgba(180, 140, 255, .45); }
.funzione h3 { font-size: 19px; color: var(--bianco); }
.funzione p { color: var(--su-scuro); font-size: 15.5px; }
.vetri-piccoli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; margin-top: 64px; }
.vetro-piccolo { margin-top: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 50px -14px var(--luce-viola); }

/* fiducia */
.fiducia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 52px; }
.fiducia-riquadro { display: grid; gap: 12px; align-content: start; padding: 30px 28px; border-radius: 22px; background: var(--lavanda); }
.fiducia-riquadro h3 { color: var(--ardesia); }
.fiducia-riquadro p { color: var(--grigio); font-size: 16px; }
.chi-ce { margin-top: 32px; color: var(--grigio); font-size: 15.5px; }
.chi-ce b { color: var(--ardesia); }

/* catene */
.catene { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 52px; }
.catena { display: grid; gap: 12px; align-content: start; padding: 30px 28px; border-radius: 22px; background: var(--bianco); box-shadow: 0 12px 34px -20px rgba(53, 63, 79, .35); }
.catena h3 { color: var(--ardesia); }
.catena p { color: var(--grigio); font-size: 16px; }
.catene-piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 36px; }
.catene-piede p { font-size: 18px; color: var(--ardesia); font-weight: 500; }

/* chiusura */
.finale { position: relative; overflow: hidden; color: var(--bianco); text-align: center; background: linear-gradient(140deg, var(--viola-chiaro), var(--viola-fondo)); }
.fascio-finale { top: -420px; opacity: .55; }
.fascio-finale::before { display: none; }
.finale-dentro { position: relative; display: grid; justify-items: center; gap: 8px; }
.finale h2 { color: var(--bianco); font-size: clamp(36px, 5.4vw, 68px); }
.finale .introduzione { margin-inline: auto; margin-bottom: 26px; color: rgba(255, 255, 255, .85); }
.contatti { margin-top: 22px; color: rgba(255, 255, 255, .85); font-size: 15.5px; }
.contatti b { color: var(--bianco); }

.piede { background: var(--nero); color: rgba(255, 255, 255, .55); padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); font-size: 14px; border-top: 1px solid var(--filo-scuro); }
.piede-dentro { display: grid; gap: 10px; }
.piede .nota { font-size: 12.5px; }

/* --- schermi stretti e telefono --- */
@media (max-width: 1000px) {
  .menu, .link-accedi { display: none; }
  .testata-dentro { justify-content: space-between; }
  .scena { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; justify-items: stretch; }
  .telefono { position: relative; left: auto; margin: 0 auto 28px; grid-column: 1 / -1; }
  .galleggia { position: static; width: auto; animation: none; }
  .galleggia-2, .galleggia-3 { grid-column: 1 / -1; width: auto; }
  /* sul telefono: prima il messaggio, poi i due numeri affiancati, poi il grafico */
  .galleggia-3 { order: 1; } .galleggia-1 { order: 2; } .galleggia-4 { order: 3; } .galleggia-2 { order: 4; }
  .dato { min-width: 0; }
  .pannello, .passi { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pannello-figura { min-height: 420px; padding: 32px; }
  .passi-figure { min-height: 0; padding: 28px; }
  .luci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vetri-piccoli, .fiducia, .catene { grid-template-columns: minmax(0, 1fr); }
  .sezione { padding-block: 80px; }
  .sezione-gestionale { padding-top: 24px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .eroe-dentro { padding-block: 52px 32px; }
  .telefono { width: 230px; }
  .luci, .funzioni { grid-template-columns: minmax(0, 1fr); }
  .bottone-piccolo { padding: 9px 14px; font-size: 13px; }
  .introduzione { font-size: 17px; }
  .pannello-figura { min-height: 0; padding: 28px 20px; }
  .schede-bottoni button { padding: 9px 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* «Prenota una demo»: la finestra con il modulo */
.prenota { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: none; border-radius: 24px; background: var(--bianco); color: var(--ardesia); box-shadow: 0 40px 120px -20px rgba(20, 0, 60, .55); }
.prenota::backdrop { background: rgba(9, 10, 12, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.prenota-modulo { position: relative; display: grid; gap: 14px; padding: 30px 28px 24px; }
.prenota h2 { font-size: clamp(26px, 4vw, 34px); color: var(--ardesia); }
.prenota-sotto { color: var(--grigio); font-size: 15.5px; }
.prenota-campo { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ardesia); }
.prenota-campo input { width: 100%; padding: 12px 14px; border: 1px solid #dedfe9; border-radius: 12px; font: 400 16px var(--testo); color: var(--ardesia); background: var(--lavanda); }
.prenota-campo input:focus { outline: 2px solid var(--viola); outline-offset: 0; background: var(--bianco); }
.prenota-errore { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fdeaf0; color: #b3124a; font-size: 14px; }
.prenota-tasti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.prenota-tasti .bottone { width: 100%; }
.bottone-whatsapp { background: #1fa855; box-shadow: 0 10px 30px -10px rgba(31, 168, 85, .7); }
.bottone-whatsapp:hover { background: #178a45; }
.prenota-nota { font-size: 13px; color: var(--grigio); }
.prenota-nota a { color: var(--viola); }
.prenota-chiudi { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--lavanda); color: var(--ardesia); font-size: 22px; line-height: 1; cursor: pointer; }
.prenota-chiudi:hover { background: var(--lavanda-2); }
.contatti a { color: inherit; text-decoration: none; }
@media (max-width: 560px) {
  .prenota-modulo { padding: 26px 18px 20px; }
  .prenota-tasti { grid-template-columns: minmax(0, 1fr); }
}