/* Boosted v4 · bozza E — pagina «Assistente telefonico, bot WhatsApp e intelligenza artificiale».
   Usa e.css (colori, cromo, titoli che salgono), tasti/tasti.css (il metallo) e parti/menu.css (testata e menu).
   Le schermate d'esempio sono HTML/CSS con la tipografia e i colori delle app vere (iPhone, WhatsApp);
   il gestionale e le impostazioni dell'assistente sono nei colori del brand.
   Dentro le schermate ritagliate (.sm) le misure sono in cqw: scalano con la larghezza, come uno screenshot.
   Si muove solo con transform, opacity e clip-path. Senza JS, movimento ridotto e html.fermo = stato finale. */

.ia-simboli { position: absolute; width: 0; height: 0; overflow: hidden; }
main { display: block; }
main h3, main h4, main figure, main dl, main dd { margin: 0; }
:root { --molla: cubic-bezier(0.34, 1.5, 0.64, 1); --ui: 'Inter', -apple-system, 'SF Pro Text', system-ui, sans-serif; }

/* small «Esempio» pill: the screens are examples, with invented names */
.etichetta-esempio {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--lilla-chiaro); white-space: nowrap;
  background: rgba(8, 9, 10, 0.6); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.35);
}
.sfoca { filter: blur(0.2em); }
.ia-unito { white-space: nowrap; }

/* reveal once (the JS adds .rv only when it can also add .visto) */
html.js .rv { transition: opacity 700ms ease-out, transform 900ms var(--curva); }
html.js .rv:not(.visto) { opacity: 0; transform: translateY(24px); }

/* the replay: classes f1…f6 are the steps of each example; .azzera puts it back without animating */
.azzera, .azzera *, .azzera *::before, .azzera *::after { transition: none !important; animation: none !important; }

/* the replay button of an example (44 px) */
.sc { position: relative; }
.sc__esempio { position: absolute; z-index: 6; top: 9px; left: 0; pointer-events: none; }
.sc__ancora {
  position: absolute; z-index: 6; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 999px; cursor: pointer; color: var(--sec); background: rgba(8, 9, 10, 0.6); box-shadow: inset 0 0 0 1px var(--riga-2);
  transition: transform 160ms ease-out, color 200ms ease-out; touch-action: manipulation;
}
.sc__ancora svg { width: 18px; height: 18px; transition: transform 500ms var(--curva); }
.sc__ancora:active { transform: scale(0.94); color: var(--lilla); }
.sc__ancora:active svg { transform: rotate(-200deg); }
@media (hover: hover) { .sc__ancora:hover { color: var(--testo); } }

/* ══ Apertura ═════════════════════════════════════════════════ */
.ia-eroe {
  position: relative; display: grid; gap: 52px; justify-items: center;
  padding: calc(var(--testa) + env(safe-area-inset-top) + 34px) var(--g) 24px;
  isolation: isolate; overflow-x: clip;
}
.ia-eroe__luce {
  position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 30%;
  width: 150vw; max-width: 1400px; aspect-ratio: 1.3; transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side at 40% 50%, rgba(139, 111, 184, 0.3), rgba(139, 111, 184, 0) 70%),
    radial-gradient(closest-side at 66% 44%, rgba(201, 169, 233, 0.13), rgba(201, 169, 233, 0) 70%);
}
@media (prefers-reduced-motion: no-preference) { html:not(.fermo) .ia-eroe__luce { animation: ia-respira 9s ease-in-out infinite alternate; } }
@keyframes ia-respira { to { transform: translate(-50%, -50%) scale(1.08); opacity: 0.8; } }
.ia-eroe__testo { justify-self: stretch; }
.ia-eroe__sopra { font-size: 14.5px; line-height: 1.45; color: var(--sec); margin-bottom: 16px; max-width: 22em; }
.ia-eroe__titolo { font-size: clamp(40px, 11.2vw, 132px); line-height: 0.99; font-weight: 760; letter-spacing: -0.034em; text-wrap: balance; max-width: 10em; }
.ia-eroe__sotto { margin-top: 22px; max-width: 30em; color: var(--sec); font-size: clamp(17px, 4.6vw, 21px); line-height: 1.5; }
.ia-eroe__azione { margin-top: 28px; }
.ia-eroe__azione .cta { width: 100%; justify-content: space-between; }
.ia-eroe__azione .nota { margin-top: 12px; max-width: 24em; }
@media (min-width: 768px) { .ia-eroe__azione .cta { width: auto; min-width: 340px; } }
@media (min-width: 1024px) {
  .ia-eroe { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 72px; min-height: 100svh; padding-bottom: 56px; max-width: 1440px; margin: 0 auto; }
  .ia-eroe__titolo { font-size: clamp(64px, 6.2vw, 112px); }
}

/* ══ Il telefono ═══════════════════════════════════════════════ */
.tel {
  --tel-w: 260px;
  position: relative; flex: none; width: var(--tel-w); height: calc(var(--tel-w) * 2.06);
  padding: calc(var(--tel-w) * 0.03); border-radius: calc(var(--tel-w) * 0.165);
  background: linear-gradient(165deg, #3a3c43 0%, #17191c 18%, #0c0d0f 58%, #1c1e23 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 44px 80px -30px rgba(0, 0, 0, 0.95);
  font-family: var(--ui); letter-spacing: -0.01em; text-align: left;
}
.tel__schermo {
  --u: calc(var(--tel-w) / 25);
  position: relative; height: 100%; overflow: hidden; isolation: isolate; border-radius: calc(var(--tel-w) * 0.137);
  font-size: var(--u); line-height: 1.3; color: #F5F5F7; background: #000;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
.tel__schermo::before {
  content: ''; position: absolute; z-index: 30; top: calc(var(--u) * 1.05); left: 50%;
  width: calc(var(--u) * 7.4); height: calc(var(--u) * 2.15); margin-left: calc(var(--u) * -3.7); border-radius: 999px; background: #000;
}
.tel__stato {
  position: absolute; z-index: 25; top: 0; left: 0; right: 0; height: calc(var(--u) * 4.3);
  display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 0.4) calc(var(--u) * 2) 0 calc(var(--u) * 2.5); pointer-events: none;
}
.tel__stato b { font-size: 1.22em; font-weight: 600; }
.tel__icone { width: calc(var(--u) * 5.4); height: calc(var(--u) * 0.95); fill: currentColor; }
.tel__barra { position: absolute; z-index: 25; bottom: calc(var(--u) * 0.55); left: 50%; width: calc(var(--u) * 8.6); height: calc(var(--u) * 0.36); margin-left: calc(var(--u) * -4.3); border-radius: 999px; background: rgba(255, 255, 255, 0.82); }
.tel svg { fill: currentColor; }

/* ── La chiamata: arriva, risponde l'assistente, si scrive la trascrizione ── */
.ch { position: relative; display: grid; justify-items: center; padding-top: 40px; }
.ch__esempio { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.ch__tel { --tel-w: min(72vw, 288px); }
@media (min-width: 1024px) { .ch__tel { --tel-w: 300px; } .ch { padding-top: 44px; } }
.ch__sfondo { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 60% at 50% 0%, #3a3d46 0%, #1b1d22 46%, #0b0c0e 100%); }
.ch__testa { padding: calc(var(--u) * 6.2) 1.4em 0; text-align: center; }
.ch__stato { display: grid; font-size: 1.05em; color: rgba(235, 235, 245, 0.62); }
.ch__stato span { grid-area: 1 / 1; transition: opacity 400ms ease-out; }
.ch__numero { margin-top: 0.15em; font-size: 2.1em; font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; }
.ch__dove { margin-top: 0.1em; font-size: 1.05em; color: rgba(235, 235, 245, 0.62); }
.ch__chi {
  display: flex; align-items: center; gap: 0.5em; margin: 1.1em 1.2em 0; padding: 0.62em 0.85em; border-radius: 1.1em;
  font-size: 0.95em; font-weight: 600; line-height: 1.25; color: #E9DBFA;
  background: rgba(201, 169, 233, 0.16); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.42);
  transition: opacity 450ms ease-out, transform 650ms var(--molla);
}
.ch__chi svg { flex: none; width: 1.1em; height: 1.1em; color: #C9A9E9; }
.ch__trascrizione {
  margin: 0.8em 1.2em 0; padding: 0.8em 0.9em 0.9em; border-radius: 1.2em;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: opacity 500ms ease-out, transform 700ms var(--curva);
}
.ch__titoletto { display: flex; align-items: center; gap: 0.5em; font-size: 0.8em; font-weight: 600; color: rgba(235, 235, 245, 0.6); letter-spacing: 0; }
.ch__onda { display: inline-flex; align-items: center; gap: 0.18em; height: 1.1em; }
.ch__onda i { width: 0.2em; height: 100%; border-radius: 1em; background: #C9A9E9; transform: scaleY(calc(var(--h) * 0.35)); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fermo) .ch.in-vista.parla .ch__onda i { animation: ia-onda 700ms ease-in-out infinite alternate; }
  html:not(.fermo) .ch.in-vista.parla .ch__onda i:nth-child(even) { animation-duration: 560ms; }
  html:not(.fermo) .ch.in-vista.parla .ch__onda i:nth-child(3) { animation-delay: -250ms; }
}
@keyframes ia-onda { from { transform: scaleY(calc(var(--h) * 0.3)); } to { transform: scaleY(var(--h)); } }
.ch__righe { list-style: none; margin: 0.65em 0 0; padding: 0; display: grid; gap: 0.6em; }
.ch__riga { max-width: 94%; transition: opacity 300ms ease-out, transform 500ms var(--curva); }
.ch__riga small { display: block; margin-bottom: 0.12em; font-size: 0.76em; font-weight: 650; color: rgba(235, 235, 245, 0.5); }
.ch__riga--ai small { color: #C9A9E9; }
.ch__riga--cliente { justify-self: end; text-align: right; }
.ch__parole { font-size: 1.06em; line-height: 1.34; }
.ch__parole .w { transition: opacity 220ms ease-out; transition-delay: calc(var(--w) * 38ms); }
.ch__arrivo, .ch__comandi { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 2.6); display: flex; justify-content: space-evenly; padding: 0 1em; transition: opacity 400ms ease-out, transform 600ms var(--curva); }
.ch__tasto { display: grid; justify-items: center; gap: 0.4em; font-size: 0.85em; color: #fff; }
.ch__tasto small { font-size: 1em; }
.ch__tondo { position: relative; display: grid; place-items: center; width: 4.2em; height: 4.2em; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.ch__tondo svg { width: 1.75em; height: 1.75em; }
.ch__tondo--no, .ch__tondo--fine { background: #FF3B30; }
.ch__tondo--no svg, .ch__tondo--fine svg { transform: rotate(135deg); }
.ch__tondo--si { background: #34C759; }
.ch__tondo--si::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0.25em rgba(52, 199, 89, 0.45); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fermo) .ch.in-vista:not(.f1) .ch__tondo--si::after { animation: ia-squilla 1300ms ease-out infinite; }
}
@keyframes ia-squilla { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.ch__comandi .ch__tondo { width: 3.9em; height: 3.9em; }

/* the steps (only with JS, and not when calm: then the JS gives the final state) */
html.js .ch:not(.f1) .ch__stato-2, html.js .ch.f1 .ch__stato-1 { opacity: 0; }
html.js .ch:not(.f1) .ch__chi { opacity: 0; transform: translateY(0.6em) scale(0.96); }
html.js .ch:not(.f1) .ch__trascrizione { opacity: 0; transform: translateY(1em); }
html.js .ch.f1 .ch__arrivo { opacity: 0; transform: translateY(1em); pointer-events: none; }
html.js .ch:not(.f1) .ch__comandi { opacity: 0; transform: translateY(1em); }
html.js .ch:not(.f2) .ch__riga:nth-child(1), html.js .ch:not(.f3) .ch__riga:nth-child(2), html.js .ch:not(.f4) .ch__riga:nth-child(3) { opacity: 0; transform: translateY(0.5em); }
html.js .ch:not(.f2) .ch__riga:nth-child(1) .w, html.js .ch:not(.f4) .ch__riga:nth-child(3) .w { opacity: 0; transition-delay: 0ms; }
html:not(.js) .ch__arrivo { display: none; }
html:not(.js) .ch__stato-1 { opacity: 0; }

/* ══ Sezioni ═══════════════════════════════════════════════════ */
.ia-sez { position: relative; padding: 88px var(--g) 0; }
@media (min-width: 1024px) { .ia-sez { padding-top: 168px; } }
.ia-testa { max-width: 1296px; margin: 0 auto; }
.ia-etichetta { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; font-weight: 650; letter-spacing: 0.01em; color: var(--lilla); }
.ia-etichetta::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--cromo); background-size: 240% 100%; }
.ia-titolo { font-size: clamp(38px, 10.4vw, 88px); line-height: 1.01; font-weight: 760; letter-spacing: -0.03em; text-wrap: balance; max-width: 11em; }
.ia-testa__lato, .ia-paragrafi { margin-top: 24px; display: grid; gap: 14px; max-width: 34em; }
.ia-cose { font-size: clamp(18.5px, 4.9vw, 23px); line-height: 1.4; font-weight: 600; letter-spacing: -0.015em; }
.ia-frase { color: var(--sec); font-size: 17px; line-height: 1.58; }
@media (min-width: 1024px) {
  .ia-testa { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; }
  .ia-testa--sola { display: block; }
  .ia-testa__lato { margin-top: 0; padding-bottom: 8px; }
  .ia-titolo { font-size: clamp(48px, 5.6vw, 88px); }
}

/* text and visual side by side on the computer */
.ia-due { max-width: 1296px; margin: 0 auto; display: grid; gap: 52px; }
.ia-due__vista { margin-top: 4px; }
@media (min-width: 1024px) {
  .ia-due { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
  .ia-due--rov { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ia-due--rov .ia-due__vista { order: -1; }
  .ia-due__testo .ia-titolo { font-size: clamp(44px, 4.6vw, 76px); }
}

/* ══ Le schermate ritagliate: iPhone e WhatsApp, misure in cqw ═════ */
.sm {
  container-type: inline-size; position: relative; overflow: hidden; isolation: isolate;
  border-radius: 34px 34px 22px 22px; background: #000; color: #fff; font-family: var(--ui); letter-spacing: -0.01em; text-align: left;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 0 0 7px #121316, 0 0 0 8px rgba(255, 255, 255, 0.08), 0 46px 90px -34px rgba(0, 0, 0, 0.95);
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
.sm svg { fill: currentColor; }
.sm__stato { display: flex; align-items: center; justify-content: space-between; height: 12cqw; padding: 1.5cqw 6cqw 0 8.4cqw; font-size: 4.4cqw; }
.sm__stato b { font-weight: 600; }
.sm__stato svg { width: 19cqw; height: 3.4cqw; }

/* ══ Il solito chatbot: due chat di WhatsApp affiancate ════════════ */
.wc { background: #0B141A; color: #E9EDEF; border-radius: 26px; }
.wc__testa { display: flex; align-items: center; gap: max(6px, 2.4cqw); padding: max(8px, 3cqw) max(8px, 3cqw); background: #1F2C34; font-size: clamp(11px, 4.2cqw, 15.5px); }
.wc__indietro { flex: none; width: 1.3em; height: 1.3em; color: #AEBAC1; }
.wc__foto { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; font-weight: 600; font-size: 1em; }
.wc__foto--s { background: #E0A458; color: #3A2410; }
.wc__foto--locale { color: #fff; background: linear-gradient(145deg, #C9A9E9, #8B6FB8 55%, #4A3B78); }
.wc__foto--locale svg { width: 58%; height: 58%; }
.wc__chi { display: grid; min-width: 0; flex: 1; }
.wc__chi b { font-size: 1.02em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc__chi small { display: grid; font-size: 0.8em; color: #8696A0; white-space: nowrap; }
.wc__chi small span { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; transition: opacity 250ms ease-out; }
.wc__sub-2 { color: #21C063; opacity: 0; }
.wc__ic { flex: none; width: 1.35em; height: 1.35em; color: #AEBAC1; }
@container (max-width: 240px) { .wc__ic { display: none; } }
.wc__chat {
  display: flex; flex-direction: column; gap: 0.42em;
  padding: 0.8em 0.65em 1.1em; font-size: clamp(11px, 3.9cqw, 15px);
  background-color: #0B141A; background-image: radial-gradient(rgba(255, 255, 255, 0.04) 0.09em, rgba(255, 255, 255, 0) 0.11em); background-size: 1.5em 1.5em;
}
.wc__giorno { align-self: center; margin: 0.1em 0 0.3em; padding: 0.3em 0.75em; border-radius: 0.6em; background: #182229; color: #8696A0; font-size: 0.86em; }
.wc__bolla { position: relative; max-width: 88%; padding: 0.42em 0.6em 1.3em; border-radius: 0.7em; line-height: 1.32; color: #E9EDEF; transition: opacity 300ms ease-out, transform 450ms var(--molla); }
.wc__bolla small { position: absolute; right: 0.55em; bottom: 0.3em; display: inline-flex; align-items: center; gap: 0.25em; font-size: 0.7em; color: rgba(233, 237, 239, 0.78); }
.wc__bolla small svg { width: 1.35em; height: 0.85em; color: #53BDEB; }
.wc__bolla--loro { align-self: flex-start; background: #1F2C34; border-top-left-radius: 0.15em; transform-origin: 0 0; }
.wc__bolla--mia { align-self: flex-end; background: #005C4B; border-top-right-radius: 0.15em; transform-origin: 100% 0; }
.wc__bot { display: flex; align-items: center; gap: 0.3em; margin-bottom: 0.18em; font-size: 0.78em; font-weight: 650; color: #C9A9E9; }
.wc__bot svg { width: 0.95em; height: 0.95em; }

.so { max-width: 860px; margin: 48px auto 0; padding-top: 54px; }
.so__coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.so__lato { display: grid; grid-template-rows: 1fr auto; gap: 14px; }
.so__lato .wc { display: flex; flex-direction: column; }
.so .wc__chat { flex: 1; justify-content: flex-end; }
.so__lato .wc { border-radius: 22px; }
.so__didascalia { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; color: var(--sec); }
.so__didascalia::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--riga-2); }
.so__lato--nostro .so__didascalia { color: var(--lilla-chiaro); }
.so__lato--nostro .so__didascalia::before { background: var(--cromo); background-size: 240% 100%; }
.so__lato--nostro .wc { box-shadow: 0 0 0 1px rgba(201, 169, 233, 0.5), 0 0 0 7px #121316, 0 0 0 8px rgba(201, 169, 233, 0.22), 0 46px 90px -34px rgba(0, 0, 0, 0.95); }
@media (min-width: 768px) { .so__coppia { gap: 28px; } .so__lato .wc { border-radius: 30px; } }
@media (min-width: 1024px) { .so { margin-top: 64px; } .so__coppia { gap: 40px; } }
html.js .so:not(.f1) .wc__m0, html.js .so:not(.f3) .wc__m1, html.js .so:not(.f4) .wc__m2, html.js .so:not(.f6) .wc__m3 { opacity: 0; transform: translateY(0.5em) scale(0.9); }
html.js .so.f2:not(.f3) .wc__sub-2, html.js .so.f5:not(.f6) .wc__sub-2 { opacity: 1; }
html.js .so.f2:not(.f3) .wc__sub-1, html.js .so.f5:not(.f6) .wc__sub-1 { opacity: 0; }

/* ══ La lista del gestionale (colori del brand) ══════════════════ */
.gs {
  width: min(100%, 460px); border-radius: 22px; padding: 12px 10px 10px; text-align: left; font-family: var(--ui); letter-spacing: -0.01em;
  background: rgba(16, 17, 20, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--riga-2), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -22px rgba(0, 0, 0, 0.9), 0 0 70px -26px rgba(139, 111, 184, 0.5);
}
.gs__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 6px 8px; }
.gs__testa b { font-size: 19px; font-weight: 760; letter-spacing: -0.02em; }
.gs__testa span { font-size: 13px; color: var(--sec); }
.gs__righe { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gs__riga {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ora ora stato" "chi da da"; align-items: center;
  column-gap: 10px; row-gap: 1px; min-height: 52px; padding: 7px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.025);
}
.gs__quando { display: contents; }
.gs__quando b { grid-area: ora; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gs__quando small { grid-area: chi; font-size: 13px; color: var(--sec); white-space: nowrap; }
.gs__da { grid-area: da; justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--sec); white-space: nowrap; }
.gs__da svg { width: 13px; height: 13px; fill: currentColor; }
.gs__da--wa { color: #7EE2A8; }
.gs__da--tel { color: #F7F8F8; }
.gs__da--sito { color: var(--lilla-chiaro); }
.gs__da--sito svg, .gs__da svg[data-linea] { fill: none; }
.gs__stato { grid-area: stato; justify-self: end; display: grid; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; color: var(--lilla-chiaro); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.45); }
.gs__stato--ok { color: var(--sec); box-shadow: inset 0 0 0 1px var(--riga-2); }
.gs__riga--nuova { background: rgba(201, 169, 233, 0.09); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.32); }
.gs__riga--aperta { grid-template-areas: "ora ora stato" "chi da da" "azioni azioni azioni"; }
.gs__azioni { grid-area: azioni; position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.gs__tasto {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px;
  font: 650 13.5px/1.2 var(--ui); letter-spacing: -0.01em; color: var(--testo); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--riga-2);
}
.gs__tasto--si { color: var(--nero); background: var(--lilla); box-shadow: none; }

/* ══ Come lo prepariamo ════════════════════════════════════════ */
.mt { max-width: 760px; margin: 36px auto 0; }
@media (min-width: 1024px) { .mt { margin-top: 56px; } }

/* the assistant's settings, like a real app (brand colours) */
.ap { position: relative; padding-top: 38px; }
.ap__esempio { position: absolute; top: 0; left: 0; }
.ap__finestra {
  display: grid; grid-template-areas: "barra" "pannelli" "tab"; grid-template-rows: auto 1fr auto;
  width: min(100%, 680px); margin: 0 auto; border-radius: 26px; overflow: hidden; font-family: var(--ui); letter-spacing: -0.01em; text-align: left;
  background: #0F1012; box-shadow: inset 0 0 0 1px var(--riga-2), 0 0 0 7px #121316, 0 0 0 8px rgba(255, 255, 255, 0.07), 0 46px 90px -34px rgba(0, 0, 0, 0.95), 0 0 90px -40px rgba(139, 111, 184, 0.55);
}
.ap__barra { grid-area: barra; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--riga); }
.ap__logo { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #C9A9E9, #8B6FB8 55%, #4A3B78); }
.ap__logo svg { width: 20px; height: 20px; fill: currentColor; }
.ap__chi { flex: 1; display: grid; min-width: 0; }
.ap__chi b { font-size: 15px; font-weight: 700; }
.ap__chi small { font-size: 12.5px; color: var(--sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap__stato { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; color: #F3D9A4; background: rgba(243, 217, 164, 0.1); box-shadow: inset 0 0 0 1px rgba(243, 217, 164, 0.32); }
.ap__stato::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #F3D9A4; }
.ap__tab { grid-area: tab; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 6px 8px; border-top: 1px solid var(--riga); background: #0C0D0F; }
.ap__voce {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 52px; padding: 4px 2px; border: 0; border-radius: 12px;
  background: none; color: #8A909A; font: 600 11px/1.15 var(--ui); letter-spacing: 0; cursor: pointer; touch-action: manipulation; transition: color 200ms ease-out;
}
.ap__voce svg { width: 21px; height: 21px; fill: currentColor; }
.ap__voce[aria-selected="true"] { color: var(--lilla-chiaro); }
.ap__voce[aria-selected="true"]::before { content: ''; position: absolute; inset: 2px 4px; z-index: -1; border-radius: 12px; background: rgba(201, 169, 233, 0.12); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.3); }
.ap__voce { isolation: isolate; }
.ap__voce:active { transform: scale(0.96); }
.ap__voce:focus-visible { outline-offset: -2px; }
.ap__pannelli { grid-area: pannelli; display: grid; }
.ap__pannello { grid-area: 1 / 1; padding: 16px 16px 18px; transition: opacity 320ms ease-out, transform 480ms var(--curva), visibility 0s linear 0s; }
.ap.con-js .ap__pannello[hidden] { display: block; }
.ap.con-js .ap__pannello:not(.su) { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity 200ms ease-out, transform 300ms ease-out, visibility 0s linear 200ms; }
.ap__titolo { font-size: 22px; font-weight: 760; letter-spacing: -0.025em; }
.ap__nota { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--sec); }
.ap__colonne { display: grid; gap: 4px; margin-top: 6px; }
.ap__gtitolo { display: flex; align-items: baseline; gap: 8px; margin: 12px 2px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--lilla); }
.ap__gtitolo small { font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--sec); }
.ap__righe { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--riga); overflow: hidden; }
.ap__righe li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 7px 12px; font-size: 13.5px; }
.ap__righe li + li::before { content: ''; position: absolute; left: 12px; right: 0; top: 0; height: 1px; background: var(--riga); }
.ap__righe span { min-width: 0; }
.ap__righe b { flex: none; font-weight: 500; color: var(--sec); text-align: right; font-variant-numeric: tabular-nums; }
.ap__righe--menu b { flex: 0 1 auto; max-width: 56%; }
.ap__righe--grandi li { min-height: 46px; font-size: 14.5px; }
.ap__righe + .ap__righe { margin-top: 12px; }
.ap__fonte { transition: background-color 400ms ease-out; }
.ap__int { flex: none; position: relative; width: 38px; height: 23px; border-radius: 99px; background: #3A3C42; }
.ap__int::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.ap__int.on { background: var(--lilla); }
.ap__int.on::after { transform: translateX(15px); }
.ap__scelta { color: var(--lilla-chiaro) !important; }
.ap__seg { flex: none; display: inline-flex; padding: 2px; border-radius: 9px; background: #23252A; font-size: 12.5px; font-weight: 600; }
.ap__seg > * { padding: 4px 12px; border-radius: 7px; color: var(--sec); }
.ap__seg b { background: #4A4D55; color: #fff; font-weight: 650; }
.ap__campo { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--riga); }
.ap__campo small { display: block; font-size: 12px; color: var(--sec); }
.ap__campo p { margin-top: 4px; font-size: 14.5px; line-height: 1.4; }
.ap__fisso { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; color: var(--lilla-chiaro); background: rgba(201, 169, 233, 0.1); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.35); }
.ap__fisso svg { width: 12px; height: 12px; fill: currentColor; }

.ap__pannello--prova { display: grid; grid-template-rows: auto 1fr auto; }
.ap.con-js .ap__pannello--prova[hidden] { display: grid; }
.ap__chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 0 12px; }
.ap__msg { max-width: 88%; padding: 8px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.4; transition: opacity 300ms ease-out, transform 450ms var(--molla); }
.ap__msg--tu { align-self: flex-end; color: var(--nero); background: var(--lilla); border-bottom-right-radius: 5px; transform-origin: 100% 100%; }
.ap__msg--ai { align-self: flex-start; background: #1E2025; border-bottom-left-radius: 5px; transform-origin: 0 100%; }
.ap__da { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--riga-2); font-size: 12px; color: var(--sec); }
.ap__da svg { flex: none; width: 14px; height: 14px; fill: currentColor; color: var(--lilla); }
.ap__da b { color: var(--lilla-chiaro); font-weight: 650; }
.ap__riga-fonte { display: grid; gap: 1px; margin-top: 6px; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; background: rgba(201, 169, 233, 0.1); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.35); }
.ap__riga-fonte b { color: var(--sec); font-weight: 500; }
.ap__scrivi { display: flex; align-items: center; min-height: 44px; padding: 0 6px 0 14px; border-radius: 999px; background: #1A1C20; box-shadow: inset 0 0 0 1px var(--riga-2); font-size: 14px; }
.ap__digita { white-space: nowrap; overflow: hidden; clip-path: inset(0 0 0 0); transition: clip-path 1100ms steps(28, end); }
.ap__cursore { flex: none; width: 1.5px; height: 18px; margin-left: 1px; background: var(--lilla); opacity: 0; }
.ap__invia { margin-left: auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lilla); color: var(--nero); }
.ap__invia svg { width: 15px; height: 15px; fill: currentColor; }
.ap__puntini { display: none; }
html.js .ap--prova:not(.f1) .ap__digita, html.js .ap--prova.f2 .ap__digita { clip-path: inset(0 100% 0 0); transition-duration: 0ms; }
html.js .ap--prova:not(.f2) .ap__nuovo.ap__msg--tu, html.js .ap--prova:not(.f3) .ap__nuovo.ap__msg--ai { opacity: 0; transform: translateY(8px) scale(0.92); }
html.js .ap--prova:not(.f3) .ap__nuovo .ap__da, html.js .ap--prova:not(.f3) .ap__nuovo .ap__riga-fonte { opacity: 0; }
.ap__nuovo .ap__da, .ap__nuovo .ap__riga-fonte { transition: opacity 400ms ease-out 350ms; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fermo) .ap--prova.f1:not(.f2) .ap__cursore { opacity: 1; animation: ia-cursore 900ms steps(1) infinite; }
}
@keyframes ia-cursore { 50% { opacity: 0; } }

.ap__conv { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ap__conv li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--riga); }
.ap__conv-su { display: grid; min-width: 0; }
.ap__conv-su b { font-size: 14px; font-weight: 600; }
.ap__conv-su small { font-size: 12px; color: var(--sec); }
.ap__etichetta { justify-self: end; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: var(--sec); box-shadow: inset 0 0 0 1px var(--riga-2); white-space: nowrap; }
.ap__etichetta--da { color: #F3D9A4; box-shadow: inset 0 0 0 1px rgba(243, 217, 164, 0.4); }
.ap__corretta { grid-column: 1 / -1; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--lilla-chiaro); background: rgba(201, 169, 233, 0.08); }
.ap__pannello .ap__righe:last-child { margin-top: 12px; }

@media (min-width: 1024px) {
  .ap__finestra { grid-template-areas: "barra barra" "tab pannelli"; grid-template-columns: 148px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .ap__tab { grid-template-columns: 1fr; align-content: start; gap: 2px; padding: 12px 8px; border-top: 0; border-right: 1px solid var(--riga); }
  .ap__voce { grid-template-columns: 22px 1fr; justify-items: start; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; font-size: 13.5px; text-align: left; }
  .ap__voce svg { width: 19px; height: 19px; }
  .ap__voce[aria-selected="true"]::before { inset: 0; }
  .ap__pannello { padding: 20px 22px 22px; }
}

/* ══ L'ultima parola: «Conferma» la tocchi tu ═══════════════════ */
.dc { position: relative; padding-top: 54px; }
.dc__esempio { position: absolute; top: 9px; left: 0; }
.dc__ancora { top: 0; }
.dc__coppia { display: grid; gap: 20px; justify-items: center; }
.dc__gest { width: min(100%, 440px); }
.dc__wa { width: min(86%, 330px); justify-self: end; margin-top: -10px; }
.dc .wc__chat { min-height: 0; }
.dc__stato { position: relative; }
.dc__stato > span { grid-area: 1 / 1; text-align: right; transition: opacity 300ms ease-out; }
.dc__conferma { position: relative; cursor: pointer; display: grid; transition: transform 120ms ease-out, background-color 300ms ease-out; }
.dc__conferma > span { grid-area: 1 / 1; transition: opacity 250ms ease-out; }
.dc__conferma:active { transform: scale(0.95); }
.dc__conferma:focus-visible { outline: 2px solid var(--lilla-chiaro); outline-offset: 2px; }
.dc__conferma-2 { opacity: 0; }
.dc__dito {
  position: absolute; left: 44px; top: 20px; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.18) 55%, rgba(255, 255, 255, 0) 72%);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6); opacity: 0; transform: scale(1.4);
  transition: opacity 300ms ease-out, transform 300ms var(--curva);
}
.dc.dito .dc__dito { opacity: 1; transform: scale(1); }
.dc.premuto .dc__dito { transform: scale(0.82); }
.dc.confermata .dc__dito { opacity: 0; transform: scale(1.3); transition-duration: 400ms; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fermo) .dc.in-vista.dito:not(.premuto) .dc__dito { animation: ia-invito 1100ms ease-in-out infinite; }
}
@keyframes ia-invito { 50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }
.dc.premuto:not(.confermata) .dc__conferma { transform: scale(0.94); }
.dc.confermata .dc__conferma { background: rgba(201, 169, 233, 0.16); color: var(--lilla-chiaro); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.4); cursor: default; }
.dc.confermata .dc__conferma-1 { opacity: 0; }
.dc.confermata .dc__conferma-2 { opacity: 1; }
.dc.confermata .dc__stato-1, .dc:not(.confermata) .dc__stato-2 { opacity: 0; }
.dc.confermata .dc__stato { color: var(--nero); background: var(--lilla); box-shadow: none; }
.dc__stato { transition: background-color 300ms ease-out, color 300ms ease-out; }
.dc__oggi, .dc__msg { transition: opacity 350ms ease-out, transform 500ms var(--molla); }
.dc:not(.arrivato) .dc__oggi, .dc:not(.arrivato) .dc__msg { opacity: 0; transform: translateY(0.6em) scale(0.92); }
html:not(.js) .dc__oggi, html:not(.js) .dc__msg { opacity: 1; transform: none; }
html:not(.js) .dc__stato-1 { opacity: 0; } html:not(.js) .dc__stato-2 { opacity: 1; }
html:not(.js) .dc__dito { display: none; }
@media (min-width: 1024px) {
  .dc { padding-top: 56px; }
  .dc__coppia { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 0; }
  .dc__gest { width: 100%; max-width: 460px; justify-self: start; position: relative; z-index: 2; }
  .dc__wa { width: 300px; margin: 120px 0 0 -40px; }
}
@media (min-width: 1200px) { .dc__coppia { grid-template-columns: minmax(0, 1fr) 320px; } .dc__wa { width: 320px; } }

/* ══ Domande frequenti ═════════════════════════════════════════ */
.fq { max-width: 1296px; margin: 0 auto; display: grid; gap: 30px; }
.fq__lista { border-top: 1px solid var(--riga); }
.fq__voce { border-bottom: 1px solid var(--riga); }
.fq__voce summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.35; touch-action: manipulation;
}
.fq__voce summary::-webkit-details-marker { display: none; }
.fq__voce summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--riga-2); transition: transform 300ms var(--curva), background-color 200ms ease-out; }
.fq__voce summary i::before, .fq__voce summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -0.8px 0 0 -5.5px; border-radius: 2px; background: var(--lilla); }
.fq__voce summary i::after { transform: rotate(90deg); transition: transform 300ms var(--curva); }
.fq__voce[open] summary i { transform: rotate(180deg); background: rgba(201, 169, 233, 0.1); }
.fq__voce[open] summary i::after { transform: rotate(0deg); }
.fq__voce summary:active { color: var(--lilla-chiaro); }
@media (hover: hover) { .fq__voce summary:hover { color: var(--lilla-chiaro); } }
.fq__voce p { max-width: 38em; padding: 0 44px 22px 0; color: var(--sec); font-size: 16.5px; line-height: 1.6; }
.da-confermare { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #F3D9A4; box-shadow: inset 0 0 0 1px rgba(243, 217, 164, 0.4); vertical-align: 1px; }
@media (min-width: 1024px) {
  .fq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; }
  .fq__titolo { position: sticky; top: calc(var(--testa) + 48px); font-size: clamp(44px, 4.4vw, 64px); }
  .fq__voce summary { font-size: 20px; min-height: 72px; }
}

/* ══ Lavoriamo con l'AI (dalla home) e contatto ════════════════ */
.ai__sopra { margin-bottom: 0; }
.ai { padding-top: 96px; padding-bottom: 8px; }
.contatto__email { margin-top: 6px; }
.contatto__email .collegamento { margin-left: 0; font-weight: 600; }
@media (min-width: 1024px) { .ai, .chiusura { max-width: 1440px; margin: 0 auto; } }

/* ══ Movimento ridotto, o «Ferma le animazioni»: lo stato finale ═ */
@media (prefers-reduced-motion: reduce) {
  html.js .rv:not(.visto) { opacity: 1; transform: none; }
}
html.fermo .rv { opacity: 1 !important; transform: none !important; }