/* Landing VoiceList — tema chiaro di default, scuro opzionale via [data-tema="scuro"].
   Le due varianti del design sono identiche nella struttura: cambia solo la palette,
   quindi tutto il colore vive nelle custom property qui sotto e il markup e' uno solo. */

:root,
[data-tema='chiaro'] {
  --pagina: #f4f6fb;

  --testo: #0b0d12;
  --testo-forte: #1a1e28;
  --testo-2: #444c5a;
  --testo-3: #7b8496;
  --testo-4: #9aa1ae;
  --testo-lista: #3a414e;

  --accento: #2547e0;
  --accento-hover: #3b5bf0;
  --accento-testo: #2547e0; /* occhielli e numeri: nel tema scuro schiariscono */
  --accento-titolo: #1a34ad;
  --accento-soft: #eef1ff;
  --accento-bordo: #c7d2fc;

  --card: #ffffff;
  --card-alt: #f7f8fa;
  --bordo: #e4e7ec;
  --bordo-forte: #c3cbdc;
  --header: rgba(255, 255, 255, 0.78);
  --hairline: rgba(11, 13, 18, 0.14);
  --ombra-header: 0 1px 0 rgba(11, 13, 18, 0.08);
  --velo: rgba(11, 13, 18, 0.05);
  --fascia: rgba(11, 13, 18, 0.03);
  --fascia-bordo: rgba(11, 13, 18, 0.07);
  --ombra-telefono: 0 14px 34px rgba(26, 32, 54, 0.16), 0 0 0 1px rgba(11, 13, 18, 0.06);
  --ombra-form: 0 1px 2px rgba(26, 32, 54, 0.06);

  --avviso-icona-bg: #fff4e5;
  --avviso-icona: #b25e09;
  --avviso-bg: #fff9ee;
  --avviso-bordo: #f0d9a8;
  --avviso-chip-bg: #ffe9c7;
  --avviso-chip-bordo: #f5a623;
  --avviso-chip-testo: #b25e09;

  --ok-icona-bg: #e9f7f1;
  --ok: #1a8a5f;
  --ok-bg: #e9f7f1;
  --ok-bordo: #b7e4d2;

  --input-bg: #f7f8fa;
  --input-bordo: #e4e7ec;
  --input-bg-focus: #ffffff;
  --input-focus: #2547e0;

  color-scheme: light;
}

[data-tema='scuro'] {
  --pagina: #080a12;

  --testo: #ffffff;
  --testo-forte: #e7eaf2;
  --testo-2: #a8b0c0;
  --testo-3: #6e7788;
  --testo-4: #545e73;
  --testo-lista: #d5dae5;

  --accento: #2547e0;
  --accento-hover: #3b5bf0;
  --accento-testo: #7e93ff;
  --accento-titolo: #a9b6ff;
  --accento-soft: rgba(37, 71, 224, 0.22);
  --accento-bordo: rgba(255, 255, 255, 0.14);

  --card: rgba(255, 255, 255, 0.06);
  --card-alt: rgba(255, 255, 255, 0.055);
  --bordo: rgba(255, 255, 255, 0.12);
  --bordo-forte: rgba(255, 255, 255, 0.18);
  --header: rgba(10, 14, 28, 0.72);
  --hairline: rgba(255, 255, 255, 0.12);
  --ombra-header: 0 1px 0 rgba(255, 255, 255, 0.07);
  --velo: rgba(255, 255, 255, 0.06);
  --fascia: rgba(255, 255, 255, 0.025);
  --fascia-bordo: rgba(255, 255, 255, 0.06);
  --ombra-telefono: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.09);
  --ombra-form: 0 1px 2px rgba(0, 0, 0, 0.3);

  --avviso-icona-bg: rgba(245, 166, 35, 0.16);
  --avviso-icona: #f5b547;
  --avviso-bg: rgba(245, 166, 35, 0.07);
  --avviso-bordo: rgba(245, 166, 35, 0.28);
  --avviso-chip-bg: rgba(245, 166, 35, 0.2);
  --avviso-chip-bordo: rgba(245, 166, 35, 0.55);
  --avviso-chip-testo: #ffcb7a;

  --ok-icona-bg: rgba(52, 192, 138, 0.16);
  --ok: #5fd9ac;
  --ok-bg: rgba(52, 192, 138, 0.12);
  --ok-bordo: rgba(52, 192, 138, 0.3);

  --input-bg: rgba(8, 9, 13, 0.5);
  --input-bordo: rgba(255, 255, 255, 0.14);
  --input-bg-focus: rgba(8, 9, 13, 0.75);
  --input-focus: #7e93ff;

  color-scheme: dark;
}

/* --- Base --- */

:root {
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-testo: 'Source Sans 3', 'Segoe UI', Roboto, Arial, sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--pagina);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

a {
  color: var(--accento-testo);
  text-decoration: none;
}

::selection {
  background: #2547e0;
  color: #fff;
}

input,
button,
textarea {
  font-family: inherit;
}

input::placeholder {
  color: var(--testo-4);
}

:focus-visible {
  outline: 2px solid var(--accento-testo);
  outline-offset: 3px;
}

.contenitore {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 22px;
  padding-right: 22px;
}

/* --- Header --- */

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header);
  backdrop-filter: blur(16px);
  box-shadow: var(--ombra-header);
}

.testata .contenitore {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 10px;
}

.marchio-nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--testo);
}

.fulmine {
  width: 32px;
  height: 32px;
  background: #2547e0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fulmine svg {
  width: 17px;
  height: 17px;
  fill: #fff;
}

.spinta {
  flex: 1;
}

.tasto-tema {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--bordo);
  background: transparent;
  color: var(--testo-2);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.tasto-tema:hover {
  color: var(--testo);
  border-color: var(--bordo-forte);
  background: var(--velo);
}

.tasto-tema svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Il tema attivo decide quale icona mostrare: sole quando siamo al scuro. */
[data-tema='chiaro'] .icona-sole,
[data-tema='scuro'] .icona-luna {
  display: none;
}

.cta-testata {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  background: #2547e0;
  color: #fff;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background 0.18s ease;
}

.cta-testata:hover {
  background: var(--accento-hover);
  color: #fff;
}

/* --- Bottoni --- */

.bottone {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 30px;
  background: #2547e0;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  cursor: pointer;
  transition: background 0.18s ease;
}

.bottone:hover {
  background: var(--accento-hover);
  color: #fff;
}

.bottone-medio {
  min-height: 56px;
  padding: 0 26px;
  border-radius: 10px;
  font-size: 16px;
}

.bottone-fantasma {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 26px;
  border: 1px solid var(--bordo-forte);
  color: var(--testo);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  transition: background 0.18s ease;
}

.bottone-fantasma:hover {
  background: var(--velo);
  color: var(--testo);
}


/* ============================================================
   LAYOUT: due strategie distinte.
   - Mobile (< 900px): una colonna, immagini "a sbirciata", strisce a
     scorrimento orizzontale con snap dove ci sono piu' elementi, FAQ a
     fisarmonica, barra CTA fissa in basso (zona pollice).
   - Desktop (>= 900px): griglie a due/quattro colonne, passi alternati
     testo/immagini, FAQ tutte aperte, CTA nell'header e nella hero.
   Le regole comuni stanno fuori dalle media query; le due strategie sotto.
   ============================================================ */

/* --- Cornice telefono (screenshot reali dell'app) --- */

.cornice {
  margin: 0;
  position: relative;
  border-radius: 34px;
  background: #14171f;
  padding: 8px;
  box-shadow: var(--ombra-telefono);
  overflow: hidden;
  flex-shrink: 0;
}

.cornice img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 27px;
  background: #fff;
}

.cornice figcaption {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(11, 13, 18, 0.86);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 13px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* --- Hero --- */

.hero .contenitore {
  padding-top: clamp(40px, 8vw, 100px);
  padding-bottom: clamp(24px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.hero-testo {
  max-width: 640px;
}



.hero h1 {
  font-family: var(--font-display);
  margin: 0 0 20px;
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

.hero h1 em {
  font-style: normal;
  color: var(--accento-testo);
}

/* Le due promesse della hero. Prima erano riquadri pieni con bordo e raggio:
   sembravano tasti e la gente ci provava a cliccare. Ora sono testo, con la
   spunta davanti e una riga sottile a separarle. */
.hero-evidenza {
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
}

.evidenza-voce {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16.5px, 2.1vw, 20px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--accento-titolo);
}

.evidenza-segno {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

.evidenza-divisore {
  width: 1px;
  height: 18px;
  background: var(--accento-bordo);
}

/* Sul tema scuro le onde sotto sono blu piene: il lavanda si perde, il bianco no. */
[data-tema='scuro'] .evidenza-voce {
  color: #fff;
}

[data-tema='scuro'] .evidenza-divisore {
  background: rgba(255, 255, 255, 0.3);
}

/* Su schermo stretto le due frasi vanno a capo: la riga in mezzo sparisce. */
@media (max-width: 619px) {
  .evidenza-divisore {
    display: none;
  }

  .hero-evidenza {
    flex-direction: column;
    align-items: center;
    gap: 9px;
  }
}

.hero-sottotitolo {
  margin: 0 0 30px;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--testo-2);
  max-width: 30em;
  text-wrap: pretty;
}

.gruppo-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}


/* --- Ticker --- */






/* --- Numeri --- */




/* --- Sezioni generiche --- */

.sezione .contenitore {
  padding-top: clamp(56px, 8vw, 108px);
  padding-bottom: clamp(56px, 8vw, 108px);
}


h2.titolo {
  font-family: var(--font-display);
  margin: 0 0 40px;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 16em;
  text-wrap: balance;
}

/* Riga d'appoggio sotto un titolo di sezione ("Tre schermate...", "Di solito ci
   chiedono questo."): risale verso il titolo per stargli attaccata. */
.sotto-titolo {
  margin: -28px 0 36px;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--testo-2);
  max-width: 36em;
  text-wrap: pretty;
}

/* --- Come funziona --- */

.passi-sezione {
  position: relative;
  overflow: hidden;
}


.passi-sezione .contenitore {
  position: relative;
}

/* Le tre schermate: una card ciascuna, telefono al centro, sotto la targhetta
   nera "a prova di stupido" con la freccetta che punta allo schermo. */
.schermate {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.schermata {
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  padding: 28px 22px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.schermata-testo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.schermata h3 {
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}

.schermata p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--testo-2);
  max-width: 26em;
  text-wrap: pretty;
}

.schermata .cornice {
  width: min(240px, 70vw);
}

/* La targhetta fuori dallo schermo: nera, un filo storta, con la freccetta
   disegnata che risale verso il telefono. */
.nota-schermata {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.freccetta {
  width: 22px;
  height: 27px;
  fill: none;
  stroke: var(--testo);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-8deg);
}

.nota-schermata span {
  display: inline-block;
  background: #0b0d12;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding: 10px 16px;
  border-radius: 10px;
  transform: rotate(-1.5deg);
  box-shadow: 0 10px 24px rgba(11, 13, 18, 0.28);
}

/* Nel tema scuro la targhetta resta nera, ma con un bordo che la stacca dal fondo. */
[data-tema='scuro'] .nota-schermata span {
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.passo-numero {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accento-testo);
}

.chiusura-passi {
  font-family: var(--font-display);
  margin: 30px 0 0;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--testo);
}

/* I passi chiudono con "E poi..." e la sezione dopo deve arrivare subito. */
.passi-sezione .contenitore {
  padding-bottom: clamp(28px, 3vw, 40px);
}

#cosa-facciamo .contenitore {
  padding-top: clamp(28px, 3vw, 40px);
}

/* --- Domande (FAQ) --- */

.griglia-domande {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.domanda {
  border: 1px solid var(--bordo);
  border-radius: 12px;
  background: var(--card-alt);
  padding: 0;
}

.domanda summary {
  font-family: var(--font-display);
  list-style: none;
  cursor: pointer;
  padding: 18px 50px 18px 20px;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  position: relative;
}

.domanda summary::-webkit-details-marker {
  display: none;
}

.domanda summary::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  border: 1px solid var(--bordo-forte);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232547e0' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 11px no-repeat;
  transition: transform 0.25s ease;
}

.domanda[open] summary::after {
  transform: rotate(45deg);
}

.domanda-corpo {
  overflow: hidden;
}

.domanda p {
  margin: 0;
  padding: 0 20px 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--testo-2);
  text-wrap: pretty;
}

.titolo-domande {
  max-width: 14em;
}

/* --- Testimonianze --- */

.testimonianze {
  background: var(--fascia);
  box-shadow: 0 1px 0 var(--fascia-bordo), 0 -1px 0 var(--fascia-bordo);
  overflow: hidden;
}

.testimonianze .contenitore {
  padding-top: clamp(52px, 7vw, 88px);
  padding-bottom: clamp(52px, 7vw, 88px);
}

.intro-testimonianze {
  margin-bottom: 30px;
}

.testimonianze h2 {
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.08;
  x0;
  max-width: 16em;
  text-wrap: balance;
}

/* Mobile: striscia orizzontale con snap. Desktop: griglia 2x2. */
.griglia-testimonianze {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 -18px;
  padding: 4px 18px 10px;
}

.griglia-testimonianze::-webkit-scrollbar {
  display: none;
}

.testimonianza {
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 min(300px, 82vw);
  scroll-snap-align: center;
}

.testimonianza blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  color: var(--testo-forte);
}

.testimonianza-firma {
  margin: auto 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--testo-3);
}

/* --- Cosa abbiamo costruito --- */

.intro-agenzia {
  max-width: 40em;
  margin-bottom: 36px;
}

.intro-agenzia h2 {
  font-family: var(--font-display);
  margin: 0 0 16px;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.intro-agenzia p:last-child {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--testo-2);
  text-wrap: pretty;
}

/* I 4 strumenti: quattro pannelli, illustrazione a tratto disegnata a mano,
   numero, titolo, una frase. Mobile: illustrazione a sinistra del testo.
   Desktop: 2x2, illustrazione grande in alto. */
.griglia-servizi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.servizio {
  position: relative;
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  padding: 24px 22px 26px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
  align-items: start;
  transition: border-color 0.25s ease, background 0.25s ease;
}

@media (hover: hover) {
  .servizio:hover {
    border-color: var(--accento-bordo);
    background: var(--accento-soft);
  }
}

.servizio-disegno {
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  fill: none;
  stroke: var(--accento-testo);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.servizio-numero {
  font-family: var(--font-display);
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--testo-4);
}

.servizio h3 {
  font-family: var(--font-display);
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  padding-right: 40px;
}

.servizio p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--testo-2);
  text-wrap: pretty;
  max-width: 34em;
}

/* Il sito: pannello a tutta larghezza con i tre livelli come tappe. */
.servizio-sito {
  grid-column: 1 / -1;
}

.servizio-sito-testo {
  position: relative;
  display: grid;
  row-gap: 8px;
}

.livelli {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  counter-reset: livello;
}

.livello {
  position: relative;
  padding: 16px 0 16px 34px;
  border-top: 1px solid var(--bordo);
}

.livello:last-child {
  border-bottom: 1px solid var(--bordo);
}

/* La tappa sulla linea: tutti i punti pieni, un colore solo. */
.livello::before {
  content: '';
  position: absolute;
  left: 0;
  top: 21px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--accento-testo);
  background: var(--accento-testo);
}

.livello-nome {
  font-family: var(--font-display);
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--testo);
  margin-bottom: 4px;
}

/* "Tutto il Base, più:" — la riga che dice cosa cambia da un livello all'altro. */
/* Ora e' una riga di spiegazione vera, non un'etichetta: tutto maiuscolo
   urlerebbe. Tono normale, corpo leggibile. */
.livello-per {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--testo-2);
  text-wrap: pretty;
}

.livello-punti {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.livello-punti li {
  position: relative;
  padding-left: 17px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--testo-2);
  max-width: 30em;
}

/* Pallini tutti dello stesso colore, di proposito: nessuna gerarchia finta. */
.livello-punti li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accento-testo);
}

/* --- Contatto --- */

.contatto {
  position: relative;
  overflow: hidden;
  /* spazio per la barra fissa mobile, che altrimenti copre il tasto Invia */
  scroll-margin-top: 20px;
}


.contatto .contenitore {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.contatto h2 {
  font-family: var(--font-display);
  margin: 0 0 18px;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 700;
  text-wrap: balance;
}

.contatto-testo {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--testo-2);
  max-width: 32em;
  text-wrap: pretty;
}

.contatto-urgenza {
  margin: 0 0 18px;
  color: var(--testo);
  font-size: 16.5px;
  line-height: 1.55;
  font-weight: 700;
  max-width: 32em;
  text-wrap: pretty;
}

.scheda-form {
  background: var(--card-alt);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--ombra-form);
}

[data-tema='chiaro'] .scheda-form {
  background: #ffffff;
}

.modulo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.campo label,
.campo legend {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--testo-2);
}

.campo label small {
  font-weight: 600;
  color: var(--testo-3);
}

.campo-doppio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Il fieldset porta con se' bordo e padding di default del browser: li azzero
   perche' deve sembrare un campo come gli altri, non un riquadro a se'. */
.campo-interessi,
.campo-piani {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.campo-interessi legend,
.campo-piani legend {
  padding: 0;
}

.interessi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.interesse {
  position: relative;
  display: inline-flex;
}

/* La casella resta nel flusso per la tastiera e gli screen reader, ma sopra ci
   sta l'etichetta: quello che si vede e si tocca e' il bottone. */
.interesse input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.interesse span {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--input-bordo);
  background: var(--input-bg);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--testo-2);
  line-height: 1.2;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.interesse span::before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 1.5px solid var(--input-bordo);
  flex-shrink: 0;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.interesse input:hover + span {
  border-color: var(--input-focus);
}

.interesse input:focus-visible + span {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px var(--accento-soft);
}

.interesse input:checked + span {
  border-color: #2547e0;
  background: var(--accento-soft);
  color: var(--accento-titolo);
}

.interesse input:checked + span::before {
  background: #2547e0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-color: #2547e0;
}

/* Il livello del sito: compare solo se si spunta "Sito web". Menu a tendina. */
.campo-piani {
  padding: 16px;
  border-radius: 14px;
  background: var(--accento-soft);
  border: 1px solid var(--accento-bordo);
}

.selettore {
  position: relative;
}

.selettore select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 54px;
  border: 1px solid var(--input-bordo);
  background: var(--card);
  border-radius: 11px;
  padding: 0 46px 0 15px;
  font-size: 16px;
  color: var(--testo);
  outline: none;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.selettore select:focus {
  border-color: var(--input-focus);
}

.selettore-freccia {
  position: absolute;
  right: 15px;
  top: 50%;
  translate: 0 -50%;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--testo-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.campo input {
  height: 54px;
  border: 1px solid var(--input-bordo);
  background: var(--input-bg);
  border-radius: 11px;
  padding: 0 15px;
  font-size: 16px;
  color: var(--testo);
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.campo input:focus {
  border-color: var(--input-focus);
  background: var(--input-bg-focus);
}

.modulo button {
  margin-top: 6px;
  border-radius: 10px;
}

.modulo button[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.privacy {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--testo-3);
  text-align: center;
}

.errore {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--avviso-chip-testo);
  background: var(--avviso-bg);
  border: 1px solid var(--avviso-bordo);
  border-radius: 10px;
  padding: 11px 13px;
}

.esito {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 26px 0;
}

.esito-cerchio {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--ok-icona-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.esito-cerchio svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--ok);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.esito-cerchio svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.esito h3 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.esito p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--testo-2);
  max-width: 26em;
}

[hidden] {
  display: none !important;
}

/* --- Footer --- */

.pieDiPagina {
  box-shadow: 0 -1px 0 var(--fascia-bordo);
  color: var(--testo-3);
}

.pieDiPagina .contenitore {
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.pieDiPagina .fulmine {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.pieDiPagina .fulmine svg {
  width: 15px;
  height: 15px;
}

.pieDiPagina .marchio-nome {
  font-weight: 700;
  font-size: 15px;
}

.pieDiPagina p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  max-width: 44em;
}

/* --- Animazioni --- */

/* ============================================================
   MOBILE (< 900px): rifiniture della strategia a una colonna
   ============================================================ */

@media (max-width: 899px) {
  .contenitore {
    padding-left: 18px;
    padding-right: 18px;
  }

  .etichetta-tema {
    display: none;
  }

  .tasto-tema {
    padding: 0 11px;
  }

  /* Senza la barra fissa in basso la CTA vive qui: piu' compatta, ma c'e'. */
  .cta-testata {
    height: 40px;
    padding: 0 14px;
    font-size: 13.5px;
  }

  .gruppo-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .gruppo-cta > a {
    width: 100%;
  }

  .hero h1 {
    font-size: clamp(32px, 9vw, 44px);
  }

}

/* ============================================================
   DESKTOP (>= 900px): griglie, passi alternati, FAQ aperte
   ============================================================ */

@media (min-width: 900px) {
  /* Le tre schermate affiancate: si leggono in un colpo d'occhio. */
  .schermate {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
  }

  .schermata {
    padding: 34px 26px 34px;
  }

  .schermata .cornice {
    width: 200px;
  }

  .griglia-servizi {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* L'app da sola: illustrazione a sinistra, testo a destra. */
  .servizio:not(.servizio-sito) {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 34px;
    align-items: center;
  }

  .servizio:not(.servizio-sito) .servizio-disegno {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .servizio-sito {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    column-gap: 48px;
    align-items: start;
    min-height: 0;
  }

  .servizio-sito .servizio-numero {
    top: 30px;
    right: 30px;
  }

  .livelli {
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
    padding-top: 18px;
    position: relative;
  }

  /* Linea continua che unisce le tre tappe */
  .livelli::before {
    content: '';
    position: absolute;
    left: 7px;
    right: 7px;
    top: 25px;
    height: 2px;
    background: var(--bordo-forte);
  }

  .livello {
    border: 0;
    padding: 30px 0 0;
  }

  .livello:last-child {
    border: 0;
  }

  .livello::before {
    top: 0;
  }

  .livello-nome {
    font-size: 16px;
  }

  .servizio {
    padding: 34px 30px 36px;
    row-gap: 10px;
  }

  .servizio-disegno {
    width: 96px;
    height: 96px;
    margin-bottom: 18px;
    stroke-width: 2;
  }

  .servizio-numero {
    top: 30px;
    right: 30px;
    font-size: 14px;
  }

  .servizio h3 {
    font-size: 25px;
    padding-right: 0;
  }

  .servizio p {
    font-size: 16.5px;
  }

  .griglia-domande {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  .domanda summary {
    padding: 22px 56px 22px 24px;
    font-size: 19px;
  }

  .domanda summary::after {
    right: 22px;
  }

  .domanda p {
    padding: 0 24px 24px;
  }

  .griglia-testimonianze {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    margin: 0;
    padding: 0;
    gap: 18px;
  }

  .testimonianza {
    flex: initial;
    padding: 26px;
  }

  .contatto .contenitore {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 64px);
  }

  .contatto-intro {
    position: sticky;
    top: 96px;
  }

  .campo-doppio {
    grid-template-columns: 1fr 1fr;
  }

}

@media (min-width: 1100px) {
  .schermata .cornice {
    width: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   RIFINITURE v3 — linguaggio "blueprint" (griglia puntinata, mirini,
   etichette mono), hero con demo vocale e cavi animati, nastro
   testimonianze, faretto sulle card, micro-dettagli su form e bottoni.
   ============================================================ */

:root,
[data-tema='chiaro'] {
  --puntini: rgba(11, 13, 18, 0.14);
  --mirino: rgba(11, 13, 18, 0.3);
  --cavo: rgba(37, 71, 224, 0.32);
}

[data-tema='scuro'] {
  --puntini: rgba(255, 255, 255, 0.09);
  --mirino: rgba(255, 255, 255, 0.28);
  --cavo: rgba(126, 147, 255, 0.3);
}

:root {
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  /* Mirini agli angoli (due segni "+", alto-sinistra e basso-destra): quattro
     lineette disegnate coi gradienti, niente markup in piu'. */
  --mirini-img: linear-gradient(var(--mirino), var(--mirino)),
    linear-gradient(var(--mirino), var(--mirino)),
    linear-gradient(var(--mirino), var(--mirino)),
    linear-gradient(var(--mirino), var(--mirino));
  --mirini-size: 12px 1.5px, 1.5px 12px, 12px 1.5px, 1.5px 12px;
  --mirini-pos: 10px 15px, 15px 10px, right 10px bottom 15px, right 15px bottom 10px;
}

/* --- Hero: titolo al centro, luci morbide dietro, griglia che sfuma --- */

.hero {
  position: relative;
  overflow: hidden;
}

.hero .contenitore {
  position: relative;
  padding-top: clamp(64px, 10vw, 136px);
  padding-bottom: clamp(56px, 9vw, 120px);
  display: block;
}

.hero-testo {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero h1 {
  max-width: 15em;
}

/* L'accento del titolo: un gradiente che si muove piano dentro le lettere. */
.hero h1 em {
  background: linear-gradient(100deg, var(--em-a), var(--em-b), var(--em-a));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accento-testo);
  animation: accento-scorre 7s ease-in-out infinite;
}

@keyframes accento-scorre {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

.hero-evidenza {
  justify-content: center;
}

.hero-sottotitolo {
  margin-left: auto;
  margin-right: auto;
}

.gruppo-cta {
  justify-content: center;
}

/* Le tre luci: chiazze sfocate nei blu del marchio che respirano e vagano.
   Nel tema chiaro sono un velo, nello scuro diventano la scena. */
.hero-luci {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.luce {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: var(--luce-opacita);
  will-change: transform;
}

.luce.l1 {
  width: 560px;
  height: 560px;
  left: 50%;
  top: -220px;
  margin-left: -280px;
  background: radial-gradient(circle, var(--accento) 0%, transparent 62%);
  animation: luce-vaga-1 16s ease-in-out infinite;
}

.luce.l2 {
  width: 420px;
  height: 420px;
  left: 12%;
  bottom: -180px;
  background: radial-gradient(circle, #7e93ff 0%, transparent 62%);
  animation: luce-vaga-2 20s ease-in-out infinite;
}

.luce.l3 {
  width: 440px;
  height: 440px;
  right: 8%;
  bottom: -200px;
  background: radial-gradient(circle, #4b6ef5 0%, transparent 62%);
  animation: luce-vaga-3 18s ease-in-out infinite;
}

@keyframes luce-vaga-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 30px) scale(1.12); }
}

@keyframes luce-vaga-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(90px, -40px) scale(1.08); }
}

@keyframes luce-vaga-3 {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  50% { transform: translate(-80px, -30px) scale(0.95); }
}

/* La griglia: righe sottili che tengono tutto "ingegneristico", sfumate ai bordi. */
.hero-griglia {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--griglia-riga) 1px, transparent 1px),
    linear-gradient(90deg, var(--griglia-riga) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 0%, transparent 68%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 0%, transparent 68%);
}

/* --- Mirini agli angoli: schede "da tavolo tecnico" --- */

.scheda-form,
.servizio,
.servizio:hover {
  background-image: var(--mirini-img);
  background-repeat: no-repeat;
  background-size: var(--mirini-size);
  background-position: var(--mirini-pos);
}

/* --- Etichette numeriche: monospazio da disegno tecnico --- */

.passo-numero,
.servizio-numero {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.12em;
}

.passo-numero::after {
  content: ' / 03';
  color: var(--testo-4);
}

/* --- Strumenti: faretto che segue il mouse --- */

.servizio::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--accento-soft), transparent 68%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .servizio:hover {
    background-color: var(--card);
    border-color: var(--accento-bordo);
  }

  .servizio:hover::after {
    opacity: 1;
  }
}

/* --- Bottoni: lampo di luce al passaggio --- */

.bottone,
.cta-testata {
  position: relative;
  overflow: hidden;
}

.bottone::after,
.cta-testata::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}

@keyframes lucentezza {
  from { left: -70%; }
  to { left: 135%; }
}

.bottone:hover::after,
.cta-testata:hover::after {
  animation: lucentezza 0.7s ease;
}

/* --- Form: spunta che "scatta", focus piu' visibile --- */

@keyframes spunta-pop {
  0% { transform: scale(0.5); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.interesse input:checked + span::before {
  animation: spunta-pop 0.25s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.campo input:focus {
  box-shadow: 0 0 0 3px var(--accento-soft);
}

.selettore select:focus {
  box-shadow: 0 0 0 3px var(--accento-soft);
}

/* --- FAQ: bordo che risponde al passaggio --- */

.domanda {
  transition: border-color 0.2s ease;
}

.domanda:hover {
  border-color: var(--bordo-forte);
}

/* --- Testimonianze: nastro continuo (solo desktop, solo se il movimento va bene) --- */

.testimonianza-clone {
  display: none;
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .nastro-testimonianze {
    overflow: hidden;
    margin: 0 -22px;
    padding: 4px 0 8px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }

  .griglia-testimonianze {
    display: flex;
    width: max-content;
    gap: 18px;
    margin: 0;
    padding: 0 0 0 18px;
    overflow: visible;
    animation: nastro 78s linear infinite;
  }

  .nastro-testimonianze:hover .griglia-testimonianze {
    animation-play-state: paused;
  }

  .testimonianza {
    flex: 0 0 340px;
  }

  .testimonianza-clone {
    display: flex;
  }

  /* 10 carte da 340px + 10 spazi da 18px: il nastro riparte da capo senza scatti. */
  @keyframes nastro {
    to { transform: translateX(-3580px); }
  }
}

/* --- Le tre schermate: la card risponde, il telefono si raddrizza --- */

.schermata {
  transition: transform 0.3s cubic-bezier(0.22, 0.7, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.schermata .cornice {
  transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.3, 1);
}

@media (hover: hover) {
  .schermata:hover {
    transform: translateY(-5px);
    border-color: var(--bordo-forte);
    box-shadow: 0 18px 40px rgba(11, 13, 18, 0.08);
  }

  .schermata:hover .cornice {
    transform: rotate(-1.4deg) scale(1.02);
  }

  [data-tema='scuro'] .schermata:hover {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  }
}

/* --- Testimonianze: la card si stacca appena, la firma prende l'accento --- */

.testimonianza {
  transition: transform 0.3s cubic-bezier(0.22, 0.7, 0.3, 1), border-color 0.3s ease;
}

@media (hover: hover) {
  .testimonianza:hover {
    transform: translateY(-4px);
    border-color: var(--accento-bordo);
  }
}

/* Le opacita' delle luci e della griglia: un velo sul chiaro, scena sullo scuro. */

:root,
[data-tema='chiaro'] {
  --luce-opacita: 0.16;
  --griglia-riga: rgba(11, 13, 18, 0.05);
  --em-a: #1a34ad;
  --em-b: #3b5bf0;
}

[data-tema='scuro'] {
  --luce-opacita: 0.3;
  --griglia-riga: rgba(255, 255, 255, 0.045);
  --em-a: #7e93ff;
  --em-b: #b7c4ff;
}

/* ============================================================
   V4 — shader "Waves" nella hero, livelli sito come card di prezzo,
   FAQ a conversazione, footer col nome gigante.
   ============================================================ */

/* --- Hero: il canvas WebGL dietro a tutto --- */

.hero-onde {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Quando lo shader gira, luci e griglia CSS si spengono: erano il piano B. */
.hero.con-onde .hero-luci,
.hero.con-onde .hero-griglia {
  display: none;
}

/* Un velo dietro il testo: le onde restano protagoniste ai bordi, il titolo
   resta leggibilissimo al centro. */
.hero.con-onde .hero-testo {
  position: relative;
}

.hero.con-onde .hero-testo::before {
  content: '';
  position: absolute;
  inset: -40px -60px;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, var(--velo-onde) 0%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}

:root,
[data-tema='chiaro'] {
  --velo-onde: rgba(244, 246, 251, 0.85);
}

[data-tema='scuro'] {
  --velo-onde: rgba(8, 10, 18, 0.55);
}

/* --- Livelli del sito: tre card di prezzo, la PRO in evidenza --- */

.livelli {
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  counter-reset: none;
}

.livello {
  border: 1px solid var(--bordo);
  border-radius: 14px;
  background: var(--card-alt);
  padding: 20px 20px 22px;
  transition: transform 0.3s cubic-bezier(0.22, 0.7, 0.3, 1), border-color 0.3s ease;
}

[data-tema='chiaro'] .livello {
  background: #fbfcfe;
}

.livello:last-child {
  border: 1px solid var(--bordo);
}

.livello::before {
  content: none;
}

@media (hover: hover) {
  .livello:hover {
    transform: translateY(-4px);
    border-color: var(--bordo-forte);
  }
}

.livello-pro {
  border-color: var(--accento-bordo);
  box-shadow: 0 0 0 1px var(--accento-bordo), 0 14px 34px rgba(37, 71, 224, 0.12);
  position: relative;
}



@media (hover: hover) {
  .livello-pro:hover {
    border-color: var(--accento-bordo);
  }
}

.livello-nome {
  font-size: 18px;
}

.livello-punti li {
  padding-left: 23px;
}

/* Dai pallini alle spunte: qui si elenca cosa e' compreso. */
.livello-punti li::before {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: 4px;
  background: var(--accento-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232547e0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
}

[data-tema='scuro'] .livello-punti li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e93ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

@media (min-width: 900px) {
  .livelli {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: 0;
  }

  .livelli::before {
    content: none;
  }

  .livello {
    padding: 24px 22px 26px;
  }
}

/* --- Footer: il nome, enorme, che sfuma verso il fondo pagina --- */

.pieDiPagina {
  overflow: hidden;
}

.pieDiPagina-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.pieDiPagina .contenitore {
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 0;
}

.pieDiPagina p.pieDiPagina-nome {
  margin: 28px 0 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 14.5vw, 208px);
  line-height: 0.78;
  letter-spacing: -0.04em;
  text-align: center;
  user-select: none;
  background: linear-gradient(180deg, var(--nome-alto) 0%, var(--nome-basso) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--nome-alto);
  transform: translateY(0.16em);
}

:root,
[data-tema='chiaro'] {
  --nome-alto: rgba(37, 71, 224, 0.2);
  --nome-basso: rgba(37, 71, 224, 0.02);
}

[data-tema='scuro'] {
  --nome-alto: rgba(126, 147, 255, 0.22);
  --nome-basso: rgba(126, 147, 255, 0.02);
}

/* ============================================================
   V5 — header trasparente sulla hero, onde che finiscono alla riga
   delle CTA, passi rifatti: card con lo screenshot, titolo e testo sotto.
   ============================================================ */

/* --- Header: vetro solo dopo la hero. Sulla hero, le onde passano sotto. --- */

.testata {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.testata.solida {
  background: var(--header);
  backdrop-filter: blur(16px);
  box-shadow: var(--ombra-header);
}

/* La hero risale sotto l'header e si riprende lo spazio col padding. */
.hero {
  margin-top: -72px;
}

.hero .contenitore {
  padding-top: clamp(136px, 10vw, 208px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

@media (max-width: 899px) {
  .hero {
    margin-top: -68px;
  }

  .hero .contenitore {
    padding-top: 132px;
  }
}

/* --- Le onde sfumano e finiscono alla riga delle CTA: da li' in giu'
   la pagina e' pagina, niente stacco con la sezione dopo. --- */

.hero-onde {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 92%);
}


/* --- Home senza elenco documenti: velo bianco sulla parte bassa dello screenshot --- */

.copri-documenti {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 63%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 7%);
  border-radius: 0 0 27px 27px;
  pointer-events: none;
}

/* ============================================================
   V5 — "Ecco cosa vedi" ridisegnata: niente screenshot, tre
   riquadri con mini-interfacce disegnate in CSS (stile card),
   titolo e testo sotto, allineati a sinistra.
   ============================================================ */

.passi-design {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
}

.passo-design {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Il riquadro grande: il "palcoscenico" chiaro dove galleggiano i pezzi di UI. */
.design-riquadro {
  position: relative;
  width: 100%;
  height: 334px;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--bordo);
  overflow: hidden;
  margin-bottom: 26px;
  box-shadow: 0 1px 2px rgba(26, 32, 54, 0.05);
}

[data-tema='scuro'] .design-riquadro {
  box-shadow: none;
}

.passo-titolo {
  font-family: var(--font-display);
  margin: 0 0 10px;
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.passo-testo {
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--testo-2);
  max-width: 30em;
  text-wrap: pretty;
}

/* --- I pezzi di interfaccia dentro i riquadri --- */

.mini {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(26, 32, 54, 0.1);
  transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.3, 1);
}

[data-tema='chiaro'] .design-riquadro {
  background: var(--card-alt);
}

[data-tema='scuro'] .mini {
  background: rgba(24, 28, 44, 0.92);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

/* Righe di testo finto: barrette grigie. */
.mini-riga,
.mini-riga-titolo {
  display: block;
}

.mini-riga {
  height: 8px;
  border-radius: 999px;
  background: var(--bordo);
  width: 100%;
}

.mini-riga.corta {
  width: 55%;
}

.mini-riga-titolo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--testo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Sticker di stato: usati sopra le card per raccontare "a che punto e'"
   un lavoro o un documento. Stessa "grammatica" in tutti e tre i riquadri. --- */
.mini-sticker {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(26, 32, 54, 0.14);
  transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.3, 1);
}

[data-tema='scuro'] .mini-sticker {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

.mini-sticker-corso {
  top: -11px;
  right: -9px;
  background: var(--accento-soft);
  border: 1px solid var(--accento-bordo);
  color: var(--accento-titolo);
  transform: rotate(6deg);
}

.mini-sticker-ok {
  top: -11px;
  right: 6px;
  background: var(--ok-bg);
  border: 1px solid var(--ok-bordo);
  color: var(--ok);
  transform: rotate(5deg);
}

/* Riquadro 1 — la home: seconda card "in coda" dietro, sfumata, per dare
   profondita' e far intuire che i lavori sono piu' di uno. Solo titolo:
   a schermi stretti la card davanti la copre in parte, niente sotto che
   possa finire tagliato. */
.mini-lavoro-sfondo {
  top: 14px;
  left: 22%;
  width: 56%;
  padding: 11px 14px;
  z-index: 1;
  opacity: 0.72;
  transform: rotate(-7deg) scale(0.96);
}

/* Riquadro 1 — la home: card di un lavoro + i due tasti grandi. */
.mini-lavoro {
  top: 58px;
  left: 8%;
  width: 66%;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transform: rotate(-2deg);
  z-index: 2;
}

.mini-punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accento);
  flex-shrink: 0;
  margin-top: 4px;
}

.mini-lavoro-testo {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 7px;
}

.mini-tasti {
  right: 8%;
  bottom: 34px;
  width: 62%;
  background: none;
  border: 0;
  box-shadow: none;
  display: grid;
  gap: 10px;
}

.mini-tasto {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 16px;
  border-radius: 12px;
  white-space: nowrap;
}

/* Pallino col numero di voci in attesa: un dettaglio che rende il tasto "vivo". */
.mini-badge {
  position: absolute;
  top: -7px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--accento);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  box-shadow: 0 4px 10px rgba(37, 71, 224, 0.4);
}

.mini-tasto svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.mini-tasto.secondario {
  background: var(--card);
  border: 1px solid var(--bordo);
  color: var(--testo);
  box-shadow: 0 10px 26px rgba(26, 32, 54, 0.1);
  transform: rotate(1.5deg);
}

[data-tema='scuro'] .mini-tasto.secondario {
  background: rgba(24, 28, 44, 0.92);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.mini-tasto.primario {
  background: var(--accento);
  color: #fff;
  box-shadow: 0 12px 28px rgba(37, 71, 224, 0.35);
  transform: rotate(-1deg);
}

/* Riquadro 2 — parli: la frase dettata + il tasto del microfono con le onde. */
.mini-dettato {
  top: 32px;
  left: 8%;
  right: 8%;
  padding: 14px 18px;
  border-radius: 14px 14px 14px 4px;
  transform: rotate(-1.2deg);
}

.mini-dettato-testo {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--testo-2);
  font-style: italic;
}

/* La seconda riga e' "ancora in scrittura": piu' tenue e con un lieve
   respiro, per far capire che la trascrizione sta arrivando in questo momento. */
.mini-dettato-ghost {
  margin-top: 2px;
  animation: mini-respiro 2.6s ease-in-out infinite;
}

@keyframes mini-respiro {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}

.mini-cursore {
  display: inline-block;
  width: 2px;
  height: 13px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--accento-testo);
  animation: mini-lampeggio 1s steps(1, end) infinite;
}

@keyframes mini-lampeggio {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.mini-voce {
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  background: none;
  border: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 14px;
}

.mini-mic {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--accento-hover), var(--accento));
  box-shadow: 0 14px 30px rgba(37, 71, 224, 0.4), 0 0 0 8px var(--accento-soft);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* L'anello che si espande "ad ascolto attivo" attorno al microfono. */
.mini-mic::before,
.mini-mic::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--accento-testo);
  opacity: 0;
  animation: mini-radar 2.4s ease-out infinite;
}

.mini-mic::after {
  animation-delay: 1.2s;
}

@keyframes mini-radar {
  0% { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.35); opacity: 0; }
}

.mini-mic svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-onde {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mini-onde i {
  width: 4px;
  border-radius: 999px;
  background: var(--accento-testo);
  animation: mini-onda 1.1s ease-in-out infinite;
}

.mini-onde i:nth-child(1) { height: 10px; animation-delay: 0s; }
.mini-onde i:nth-child(2) { height: 20px; animation-delay: 0.12s; }
.mini-onde i:nth-child(3) { height: 30px; animation-delay: 0.24s; }
.mini-onde i:nth-child(4) { height: 16px; animation-delay: 0.36s; }
.mini-onde i:nth-child(5) { height: 26px; animation-delay: 0.48s; }
.mini-onde i:nth-child(6) { height: 14px; animation-delay: 0.6s; }
.mini-onde i:nth-child(7) { height: 22px; animation-delay: 0.72s; }

@keyframes mini-onda {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1); }
}

.mini-chip {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--accento-titolo);
  background: var(--accento-soft);
  border: 1px solid var(--accento-bordo);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Riquadro 3 — il PDF: la pagina del preventivo, con voci vere e prezzi
   accennati, + la riga del file pronto e inviato. */
.mini-pagina {
  top: 26px;
  left: 10%;
  width: 64%;
  padding: 14px 16px;
  display: grid;
  gap: 7px;
  transform: rotate(-2deg);
  border-radius: 10px;
}

.mini-pagina-testa {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.mini-logo {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--accento);
  flex-shrink: 0;
}

/* Una riga voce = nome della lavorazione + prezzo accennato a destra. */
.mini-voce-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3.5px 6px;
  margin: 0 -6px;
  border-radius: 7px;
}

.mini-voce-nome {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-family: var(--font-testo);
  font-size: 12px;
  color: var(--testo-lista);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-voce-prezzo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--testo);
  flex-shrink: 0;
  white-space: nowrap;
}

/* La voce "da controllare": una funzione vera dell'app, non decorativa. */
.mini-voce-flag {
  background: var(--avviso-bg);
  border: 1px solid var(--avviso-bordo);
}

.mini-voce-flag .mini-voce-nome {
  color: var(--avviso-icona);
  font-weight: 600;
}

.mini-voce-avviso {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--avviso-icona);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-pagina-totale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px solid var(--bordo);
}

.mini-totale-etichetta {
  font-family: var(--font-testo);
  font-size: 12px;
  font-weight: 600;
  color: var(--testo-2);
}

.mini-totale {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--accento-testo);
  white-space: nowrap;
}

.mini-pdf {
  right: 7%;
  bottom: 26px;
  max-width: 82%;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: rotate(1.5deg);
}

.mini-pdf-icona {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #fff;
  background: #e5484d;
  border-radius: 6px;
  padding: 5px 6px;
  flex-shrink: 0;
}

.mini-pdf-nome {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--testo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-spunta {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ok);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mini-spunta svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Al passaggio del mouse i pezzi si raddrizzano appena: la card "risponde".
   La card sfondo si raddrizza solo in parte: resta "dietro", non salta avanti. */
@media (hover: hover) {
  .design-riquadro:hover .mini-lavoro,
  .design-riquadro:hover .mini-dettato,
  .design-riquadro:hover .mini-pagina {
    transform: rotate(0deg);
  }

  .design-riquadro:hover .mini-lavoro-sfondo {
    transform: rotate(-3deg) scale(0.97);
  }

  .design-riquadro:hover .mini-tasto.secondario,
  .design-riquadro:hover .mini-tasto.primario,
  .design-riquadro:hover .mini-pdf {
    transform: rotate(0deg) translateY(-2px);
  }
}

/* Desktop: le tre tappe affiancate, come i riquadri qui sopra. */
@media (min-width: 900px) {
  .passi-design {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
  }

  /* Il testo sta sopra il telefono e le tre didascalie non hanno la stessa
     lunghezza: il paragrafo si allarga per riempire il vuoto, cosi' i tre
     telefoni restano allineati sulla stessa riga. */
  .passi-telefoni .passo-testo {
    flex: 1 0 auto;
  }

  .design-riquadro {
    height: 354px;
  }
}

/* ============================================================
   V5 — form: la tendina dei livelli sito. Si apre spuntando
   «Sito web» (freccetta che ruota), tre scelte con casella
   quadrata ma input radio sotto: un livello solo.
   ============================================================ */

.interesse-freccia {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-left: 2px;
  transition: transform 0.25s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.interesse-tendina input:checked + span .interesse-freccia {
  transform: rotate(90deg);
}

.campo-piani legend {
  /* float: il legend esce dalla "tacca" del bordo fieldset e scorre nel padding */
  float: left;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--testo);
  margin-bottom: 12px;
}

.campo-piani legend small {
  font-weight: 400;
  color: var(--testo-3);
}

.piani-tendina {
  display: grid;
  gap: 8px;
}

.piano-scelta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--input-bordo);
  background: var(--card);
  border-radius: 11px;
  padding: 13px 15px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.piano-scelta input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* La casella: quadrata come una spunta, anche se sotto c'e' un radio. */
.piano-casella {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--input-bordo);
  background: var(--input-bg);
  flex-shrink: 0;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.piano-testo {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--testo-2);
}

.piano-testo strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--testo);
}

.piano-scelta:hover {
  border-color: var(--input-focus);
}

.piano-scelta input:focus-visible ~ .piano-testo,
.piano-scelta:has(input:focus-visible) {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px var(--accento-soft);
}

.piano-scelta:has(input:checked) {
  border-color: #2547e0;
  background: var(--accento-soft);
}

.piano-scelta input:checked ~ .piano-casella {
  background: #2547e0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: #2547e0;
}

.piano-scelta input:checked ~ .piano-testo {
  color: var(--accento-titolo);
}

.piano-scelta input:checked ~ .piano-testo strong {
  color: var(--accento-titolo);
}

/* Col blu raddoppiato nella hero, l'header trasparente nel tema scuro poggia
   su un fondo acceso: link e tasto tema passano al bianco finche' il vetro
   non torna (.solida). */
[data-tema='scuro'] .testata:not(.solida) .tasto-tema {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.35);
}

/* ============================================================
   V6 — "Ecco cosa vedi": torna il telefono intero (screenshot
   reali nella cornice), ma la sezione deve stare in UNA
   schermata sul desktop: la larghezza del telefono si calcola
   dall'altezza del viewport, i padding della sezione si stringono.
   ============================================================ */

.passi-telefoni .cornice-passo {
  /* Il telefono: aspect ratio dell'immagine 780x1688 ≈ 0.462. */
  width: var(--telefono-w, min(240px, 64vw));
  align-self: center;
  margin: 24px auto 0;
}

/* Con la cornice piu' piccola, raggi e padding scalano un filo. */
.cornice-passo {
  border-radius: 30px;
  padding: 7px;
}

.cornice-passo img {
  border-radius: 24px;
}

.cornice-passo .copri-documenti {
  border-radius: 0 0 24px 24px;
}

@media (min-width: 900px) {
  /* Budget verticale: header + titolo + sottotitolo + testi sopra i telefoni
     + chiusura + padding ≈ 480px. Quel che resta e' l'altezza del telefono;
     larghezza = altezza × 0.462. Clamp per non degenerare. */
  :root {
    --telefono-w: clamp(150px, calc((100vh - 480px) * 0.462), 224px);
  }

  .passi-sezione .contenitore {
    padding-top: clamp(36px, 5vh, 64px);
    padding-bottom: clamp(32px, 5vh, 56px);
  }

  .passi-sezione .titolo {
    margin-bottom: 34px;
  }

  .passi-sezione .sotto-titolo {
    margin-bottom: 28px;
  }

  .passi-telefoni {
    gap: 28px;
  }

  .passi-sezione .chiusura-passi {
    margin-top: 22px;
  }
}

/* Il telefono si raddrizza appena al passaggio, come faceva prima. */
.cornice-passo {
  transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.3, 1);
}

@media (hover: hover) {
  .passo-design:hover .cornice-passo {
    transform: rotate(-1.2deg) scale(1.02);
  }
}


/* ============================================================
   Nota "su misura": gestionali e assistenti virtuali IA fatti
   apposta. Chiude la sezione degli strumenti, tono da riga di
   servizio: si legge, non urla.
   ============================================================ */

.nota-su-misura {
  margin: 34px auto 0;
  max-width: 46em;
  padding: 18px 22px;
  border: 1px dashed var(--bordo);
  border-radius: 14px;
  background: var(--card);
  color: var(--testo-2);
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
}

.nota-su-misura strong {
  color: var(--testo);
  font-weight: 700;
}

/* ============================================================
   V7 — "Guarda come funziona" non e' piu' un tasto ne' un titolo di
   sezione: e' un richiamo in fondo alla hero, dentro la prima
   schermata, con la freccia buttata giu' a mano. Non e' cliccabile:
   indica e basta. Il titolo della sezione resta per i lettori di
   schermo. Tecnica del tratto che si disegna presa dai componenti
   "draw" di 21st.dev (stroke-dasharray animato), path nostro.
   ============================================================ */

.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.richiamo {
  position: relative;
  display: block;
  width: max-content;
  margin: clamp(26px, 4.5vw, 52px) auto 0;
  padding-bottom: clamp(120px, 15vw, 170px);
  color: var(--testo);
  font-family: var(--font-display);
}

.richiamo-titolo {
  display: block;
  font-size: clamp(23px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
}

/* La freccia parte da sotto la coda del titolo e scende di lato, come
   se l'avessi disegnata sul foglio dopo aver scritto. */
.richiamo-freccia {
  position: absolute;
  top: calc(100% - clamp(120px, 15vw, 170px) + 4px);
  left: 50%;
  width: clamp(104px, 13vw, 152px);
  height: auto;
  transform: translateX(14%);
  overflow: visible;
  fill: none;
  stroke: var(--testo);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.richiamo-tratto,
.richiamo-punta {
  stroke-dasharray: var(--lunghezza, 200);
  stroke-dashoffset: var(--lunghezza, 200);
  animation: richiamo-traccia 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards;
}

.richiamo-punta {
  --lunghezza: 60;
  animation-delay: 1.6s;
  animation-duration: 0.5s;
}

@keyframes richiamo-traccia {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .richiamo-tratto,
  .richiamo-punta {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* Senza il titolo h2 la sezione dei passi partiva incollata: le ridiamo aria. */
.passi-sezione .contenitore {
  padding-top: clamp(36px, 5vw, 64px);
}

/* --- Livello Base: deve reggere lo sguardo da solo, non sembrare la scelta
   povera. Etichetta "Tutto compreso" e riquadro con lo stesso peso del PRO. --- */

.livello-base {
  position: relative;
  border-color: var(--bordo-forte);
}

.livello-etichetta {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accento-soft);
  color: var(--accento-testo);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Con il Base piu' ricco, le tre colonne dentro meta' card diventavano
   strettissime: il testo del servizio va sopra a tutta larghezza e i tre
   livelli si prendono la riga intera. */
@media (min-width: 900px) {
  .servizio-sito {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .servizio-sito-testo {
    max-width: 62ch;
  }

  .livelli {
    column-gap: 20px;
    padding-top: 4px;
  }
}

/* ============================================================
   Tasto prima delle FAQ: chi ha letto fino a qui va al form.
   ============================================================ */

.cta-prima-domande {
  display: flex;
  justify-content: center;
  padding: 8px 20px 0;
}