/* ════════════════════════════════════════════════════════════════════════════
   STILE DEL SITO — stessi caratteri e colori dell'app (build/IDENTITA.md).
   Mobile prima di tutto: le regole senza @media valgono per il telefono,
   quelle sotto @media allargano per tablet e computer.
   ════════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Archivo';
  src: url(caratteri/archivo.woff2) format('woff2-variations'), url(caratteri/archivo.woff2) format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url(caratteri/inter.woff2) format('woff2-variations'), url(caratteri/inter.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --carta: #F5F7FA;
  --superficie: #FFFFFF;
  --inchiostro: #0E1726;
  --inchiostro-2: #4A5568;
  --inchiostro-3: #6B7280;
  --blu: #1F5FBF;
  --blu-scuro: #174A96;
  --blu-tenue: #E6EEFA;
  --lime: #D4F24A;
  --lime-tenue: #F3FBD0;
  --verde: #1E8E5A;
  --corallo: #E0533D;
  --ambra: #D98A0B;
  --linea: #E3E8EF;

  --titoli: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --testo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --margine: 20px;
  --larghezza: 1180px;
  --curva: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blu); }
h1, h2, h3 { margin: 0; font-family: var(--titoli); font-weight: 800; font-stretch: 112%; letter-spacing: -0.01em; line-height: 1.1; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }

.salta { position: absolute; left: -999px; top: 8px; background: var(--inchiostro); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.salta:focus { left: 8px; }

:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; border-radius: 6px; }

/* ── Pezzi ricorrenti ──────────────────────────────────────────────────────── */
.stretto { max-width: 860px; margin: 0 auto; padding: 0 var(--margine); text-align: center; }

.occhiello {
  display: inline-block;
  background: var(--lime);
  color: var(--inchiostro);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.occhiello-scuro { background: var(--lime); }

.titolo {
  font-size: clamp(36px, 9.4vw, 76px);
  line-height: 1.02;
  text-wrap: balance;
}
.titolo-medio { font-size: clamp(30px, 7vw, 48px); }

.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px;
  padding: 16px 38px;
  border: 0; border-radius: 999px;
  background: var(--blu); color: #fff;
  font: 600 19px/1 var(--testo);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(31, 95, 191, .7);
  transition: transform .25s var(--curva), background .2s, box-shadow .25s;
}
.pulsante span { transition: transform .25s var(--curva); }
.pulsante:hover { background: var(--blu-scuro); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(31, 95, 191, .8); }
.pulsante:hover span { transform: translateX(4px); }
.pulsante:active { transform: translateY(0) scale(.98); }
.pulsante-bianco { background: #fff; color: var(--blu); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .45); }
.pulsante-bianco:hover { background: var(--lime); color: var(--inchiostro); }
.pulsante-piccolo { min-height: 48px; padding: 12px 24px; font-size: 17px; }

/* Descrizione SOTTO al pulsante, mai di fianco */
.cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta-sotto { font-size: 16px; color: var(--inchiostro-3); max-width: 30ch; text-align: center; line-height: 1.45; }

.pallina {
  position: absolute; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.75) 0 10%, transparent 11%),
    radial-gradient(circle at 50% 50%, var(--lime) 0 62%, #C3E23A 100%);
  box-shadow: inset -6px -8px 0 rgba(0,0,0,.06), 0 18px 30px -12px rgba(14, 23, 38, .35);
  pointer-events: none;
}
.pallina::after {
  content: ''; position: absolute; inset: 8%;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.9) transparent rgba(255,255,255,.9) transparent;
  transform: rotate(28deg);
}

/* ── Barra in alto ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 var(--margine);
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
.nav.scorsa {
  background: rgba(245, 247, 250, .82);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 1px 0 rgba(14, 23, 38, .07);
}
.nav-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--inchiostro); font: 800 23px/1 var(--titoli); font-stretch: 118%; letter-spacing: -0.01em; }
.nav-logo .logo { width: 36px; height: 36px; }
.nav-prova {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; background: var(--inchiostro); color: #fff;
  font-weight: 600; font-size: 16px; text-decoration: none;
  transition: background .2s, transform .2s;
}
.nav-prova:hover { background: var(--blu); }

/* ── Apertura ──────────────────────────────────────────────────────────────── */
.apertura { position: relative; padding: 108px 0 0; text-align: center; overflow: hidden; }
.apertura-testo { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 0 var(--margine); }
.apertura-nome {
  /* si adatta al numero di lettere del nome: un nome lungo non esce dallo schermo */
  font-size: min(220px, calc((100vw - 2 * var(--margine)) / (var(--lettere, 5) * .8)));
  white-space: nowrap;
  line-height: .9;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 6px 0 22px;
  transform-origin: 50% 100%;
}
.apertura-promessa {
  font: 700 clamp(25px, 6.4vw, 44px)/1.12 var(--titoli);
  font-stretch: 108%;
  letter-spacing: -0.01em;
  max-width: 22ch; margin: 0 auto 18px;
  text-wrap: balance;
}
.apertura-sotto { font-size: clamp(17px, 4.4vw, 21px); color: var(--inchiostro-2); max-width: 40ch; margin: 0 auto 34px; text-wrap: pretty; }

.apertura-scena { position: relative; height: 650px; margin-top: 56px; }
.apertura-campo {
  position: absolute; left: 50%; top: 190px; width: 820px; transform: translate3d(-50%, var(--py, 0px), 0);
  opacity: .95;
}
.apertura-campo .sc-campo { width: 100%; height: auto; border-radius: 26px; filter: drop-shadow(0 30px 40px rgba(23, 74, 150, .25)); }
.apertura-telefono { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 2; }
.pallina.p1 { width: 64px; height: 64px; left: calc(50% + 150px); top: 40px; z-index: 3; }
.pallina.p2 { width: 38px; height: 38px; left: calc(50% - 205px); top: 330px; z-index: 3; }

/* ── Il telefono ──────────────────────────────────────────────────────────── */
.telefono {
  --l: 300px;
  width: var(--l); height: calc(var(--l) * 2.06);
  padding: 11px;
  border-radius: 50px;
  background: linear-gradient(145deg, #1D2738, #0E1726 40%, #1A2334);
  box-shadow:
    0 0 0 1.5px #2B3547 inset,
    0 50px 80px -30px rgba(14, 23, 38, .55),
    0 20px 30px -20px rgba(14, 23, 38, .4);
  position: relative;
}
.telefono::before { /* l'isola in alto */
  content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 25px; border-radius: 20px; background: #0E1726; z-index: 5;
}
.telefono-schermo { position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; background: var(--carta); }

/* ── Schermate dell'app (mockup) ──────────────────────────────────────────── */
.sc { position: absolute; inset: 0; padding: 0 15px 16px; font-size: 13px; line-height: 1.35; color: var(--inchiostro); text-align: left; overflow: hidden; }
.sc b { font-weight: 600; }
.sc-stato { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 6px 14px 0 18px; font-weight: 600; font-size: 13.5px; }
.sc-stato-icone { display: flex; align-items: flex-end; gap: 2px; }
.sc-stato-icone i { width: 3px; background: var(--inchiostro); border-radius: 1px; }
.sc-stato-icone i:nth-child(1) { height: 5px; } .sc-stato-icone i:nth-child(2) { height: 7px; } .sc-stato-icone i:nth-child(3) { height: 9px; }
.sc-stato-icone b { width: 21px; height: 10px; border-radius: 3px; border: 1.5px solid var(--inchiostro); margin-left: 5px; background: linear-gradient(90deg, var(--inchiostro) 70%, transparent 70%); background-clip: content-box; padding: 1px; }
.sc-barra { display: flex; justify-content: space-between; align-items: center; min-height: 34px; margin: 2px 0 8px; }
.sc-indietro, .sc-azione { color: var(--blu); font-weight: 500; font-size: 14px; }
.sc-titolo-grande { font: 800 27px/1 var(--titoli); font-stretch: 112%; }
.sc-conta { font-weight: 600; color: var(--inchiostro-3); font-size: 13px; }
.sc-testa { display: flex; gap: 11px; align-items: center; margin-bottom: 12px; }
.sc-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--blu); color: #fff; display: grid; place-items: center; font: 800 16px/1 var(--titoli); }
.sc-av2 { background: var(--lime); color: var(--inchiostro); }
.sc-nome { font: 800 19px/1.1 var(--titoli); font-stretch: 108%; }
.sc-sotto { color: var(--inchiostro-3); font-size: 12px; }
.sc-schede, .sc-segmenti { display: flex; background: #E9EDF3; border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.sc-schede span, .sc-segmenti span { flex: 1; text-align: center; padding: 6px 0; border-radius: 8px; font-weight: 500; color: var(--inchiostro-2); font-size: 12.5px; }
.sc-schede .on, .sc-segmenti .on { background: #fff; color: var(--inchiostro); font-weight: 600; box-shadow: 0 1px 3px rgba(14,23,38,.12); }
.sc-card { background: #fff; border-radius: 16px; padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(14,23,38,.06), 0 0 0 1px rgba(14,23,38,.04); }
.sc-card-t { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.sc-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #EEF1F5; color: var(--inchiostro-2); white-space: nowrap; font-style: normal; }
.sc-lime { background: var(--lime); color: var(--inchiostro); }
.sc-verde { background: #DDF3E8; color: #146642; }
.sc-ambra-f { background: #FCEFD6; color: #8A5606; }
.sc-verde-t { color: var(--verde); font-weight: 600; }
.sc-ambra { color: #B06F05; font-weight: 600; }
.sc-corallo { color: var(--corallo); }
.sc-grafico { width: 100%; height: auto; }
.sc-asse { display: flex; justify-content: space-between; color: var(--inchiostro-3); font-size: 11px; margin-top: 4px; }
.sc-colpi { list-style: none; margin: 0 0 10px; padding: 4px 12px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(14,23,38,.05); }
.sc-colpi li { display: grid; grid-template-columns: 108px 1fr 26px; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #F0F2F5; }
.sc-colpi li:last-child { border: 0; }
.sc-colpi i { height: 7px; border-radius: 4px; background: #EEF1F5; overflow: hidden; }
.sc-colpi i b { display: block; height: 100%; background: var(--blu); border-radius: 4px; }
.sc-colpi em { font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.sc-colpi li.ev span { font-weight: 700; }
.sc-colpi li.ev i b { background: linear-gradient(90deg, var(--blu), #4C86DE); }
.sc-nota { background: var(--lime-tenue); border-radius: 14px; padding: 10px 12px; font-size: 12.5px; }
.sc-nota b { display: block; font-size: 11px; color: var(--inchiostro-2); margin-bottom: 2px; }

.sc-cerca { background: #E9EDF3; border-radius: 10px; padding: 8px 12px; color: var(--inchiostro-3); margin-bottom: 10px; }
.sc-card-campo { padding: 8px 8px 12px; }
.sc-campo { width: 100%; height: auto; border-radius: 10px; }
.sc-es-t { font: 800 16px/1.2 var(--titoli); font-stretch: 106%; margin: 10px 4px 6px; }
.sc-es-tag { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 4px 6px; }
.sc-es-d { margin: 0 4px; color: var(--inchiostro-2); font-size: 12.5px; }
.sc-lista { list-style: none; margin: 0 0 10px; padding: 2px 12px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(14,23,38,.05); }
.sc-lista li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #F0F2F5; }
.sc-lista li:last-child { border: 0; }
.sc-lista li span { color: var(--inchiostro-3); font-size: 12px; white-space: nowrap; }
.sc-storico li span { font-size: 12px; }
.sc-bottone { display: block; text-align: center; background: var(--blu); color: #fff; font-weight: 600; border-radius: 12px; padding: 11px; font-size: 13.5px; }
.sc-chiaro { background: var(--blu-tenue); color: var(--blu); }
.sc-due { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }

.sc-doc { background: #fff; border-radius: 18px; padding: 16px 14px; margin: 4px 0 10px; box-shadow: 0 0 0 1px rgba(14,23,38,.05); }
.sc-doc-occhiello { display: inline-block; background: var(--lime); border-radius: 999px; padding: 3px 9px; font-weight: 600; font-size: 11px; margin-bottom: 8px; }
.sc-doc-nome { font: 800 22px/1.1 var(--titoli); font-stretch: 110%; margin-bottom: 2px; }
.sc-doc-sez { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--inchiostro-3); margin: 14px 0 7px; }
.sc-doc-p { font-size: 13px; color: var(--inchiostro-2); }
.sc-confronto { list-style: none; margin: 0; padding: 0; }
.sc-confronto li { display: grid; grid-template-columns: 62px 1fr 36px; gap: 8px; align-items: center; padding: 5px 0; }
.sc-confronto i { position: relative; height: 10px; border-radius: 5px; background: #EEF1F5; }
.sc-confronto i b, .sc-confronto i s { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; }
.sc-confronto i b { background: var(--blu); }
.sc-confronto i s { background: #AFC6EA; z-index: 1; }
.sc-confronto em { text-align: center; }
.sc-legenda { display: flex; gap: 14px; font-size: 11px; color: var(--inchiostro-3); margin-top: 4px; }
.sc-legenda span { display: inline-flex; gap: 5px; align-items: center; }
.sc-legenda s, .sc-legenda b { width: 10px; height: 10px; border-radius: 3px; background: #AFC6EA; display: inline-block; }
.sc-legenda b { background: var(--blu); }

.sc-giorni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 10px; }
.sc-giorni span { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border-radius: 12px; font-weight: 600; font-size: 14px; }
.sc-giorni i { font-style: normal; font-size: 10.5px; color: var(--inchiostro-3); font-weight: 500; }
.sc-giorni .on { background: var(--inchiostro); color: #fff; }
.sc-giorni .on i { color: #C9D2DE; }
.sc-circoli { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--inchiostro-2); margin-bottom: 10px; }
.sc-circoli span { display: inline-flex; align-items: center; gap: 5px; }
.sc-circoli i { width: 9px; height: 9px; border-radius: 3px; }
.c1 { --c: var(--blu); } .c2 { --c: #0E1726; } .c3 { --c: #A8CC16; }
.sc-circoli i, .sc-pila i, .sc-barre i b { background: var(--c); }
.sc-agenda { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.sc-agenda li { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; background: #fff; border-radius: 12px; padding: 8px 10px 8px 12px; border-left: 4px solid var(--c); box-shadow: 0 0 0 1px rgba(14,23,38,.04); }
.sc-agenda time { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.sc-agenda span { display: block; font-size: 11.5px; color: var(--inchiostro-3); }
.sc-agenda em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-agenda .off { opacity: .5; }
.sc-agenda .off b { text-decoration: line-through; }
.sc-pila { display: flex; gap: 3px; height: 12px; margin: 4px 0 2px; }
.sc-pila i { border-radius: 4px; }

.sc-pacco-corpo { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; }
.sc-anello { width: 104px; height: 104px; flex: none; }
.sc-grande { font: 800 40px/1 var(--titoli); font-stretch: 112%; }
.sc-pacco-dx .sc-tag { margin-top: 8px; }
.sc-caselle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: 4px; }
.sc-caselle i { aspect-ratio: 1; border-radius: 5px; background: #EEF1F5; }
.sc-caselle i.ok { background: var(--blu); }
.sc-caselle i.rec { background: var(--ambra); }

.sc-totale { text-align: center; margin: 8px 0 12px; }
.sc-totale .sc-grande { font-size: 44px; margin: 2px 0; }
.sc-barre { list-style: none; margin: 0 0 10px; padding: 12px; background: #fff; border-radius: 16px; display: grid; gap: 10px; box-shadow: 0 0 0 1px rgba(14,23,38,.05); }
.sc-barre div { display: flex; justify-content: space-between; margin-bottom: 4px; }
.sc-barre i { display: block; height: 8px; border-radius: 4px; background: #EEF1F5; margin-bottom: 3px; }
.sc-barre i b { display: block; height: 100%; border-radius: 4px; }
.sc-due-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-mini { display: grid; gap: 2px; }
.sc-mini b { font: 800 20px/1.1 var(--titoli); }

.sc-browser { display: flex; align-items: center; justify-content: center; gap: 6px; background: #E9EDF3; border-radius: 10px; padding: 7px 10px; font-size: 12px; color: var(--inchiostro-2); margin: 2px 0 12px; }
.sc-browser svg { width: 10px; height: 12px; }
.sc-pubblica .sc-doc-nome { margin: 4px 0 10px; font-size: 26px; }
.sc-pub-marchio { display: flex; align-items: center; gap: 6px; font: 800 14px/1 var(--titoli); font-stretch: 115%; }
.sc-pub-logo { width: 22px; height: 22px; }
.sc-card-blu { background: var(--blu); color: #fff; }
.sc-card-blu .sc-grande { font-size: 52px; }
.sc-pub-tag { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.sc-piede { text-align: center; color: var(--inchiostro-3); font-size: 11.5px; margin-top: 10px; }

/* ── Il problema ──────────────────────────────────────────────────────────── */
.problema { background: var(--superficie); padding: 110px 0 120px; }
.problema .titolo { font-size: clamp(34px, 8.4vw, 64px); }
.problema-blocchi { display: grid; gap: 18px; max-width: var(--larghezza); margin: 56px auto 0; padding: 0 var(--margine); }
.blocco { position: relative; background: var(--carta); border-radius: 28px; padding: 30px 26px 30px; overflow: hidden; }
.blocco-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--inchiostro); color: #fff; font: 800 20px/1 var(--titoli); margin-bottom: 18px; }
.blocco h3 { font-size: clamp(26px, 6.6vw, 34px); line-height: 1.08; margin-bottom: 10px; }
.blocco > p { color: var(--inchiostro-2); font-size: 18px; }
.chat { display: grid; gap: 8px; margin-top: 22px; }
.bolla { max-width: 86%; padding: 11px 15px; border-radius: 20px; font-size: 16px; line-height: 1.35; }
.bolla.lui { background: #fff; justify-self: start; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(14,23,38,.08); }
.bolla.io { background: var(--blu); color: #fff; justify-self: end; border-bottom-right-radius: 6px; }
.appunto { margin-top: 22px; background: #fff; border-radius: 18px; padding: 14px 18px 16px; transform: rotate(-1.5deg); box-shadow: 0 14px 26px -16px rgba(14,23,38,.35); font-size: 16px; color: var(--inchiostro-2); display: grid; gap: 7px; }
.appunto b { color: #D9A200; font-weight: 600; font-size: 15px; }
.appunto-t { font: 800 21px/1.1 var(--titoli); color: var(--inchiostro); margin-bottom: 2px; }
.barrato { text-decoration: line-through; text-decoration-color: var(--corallo); text-decoration-thickness: 2px; }
.calcolo { margin-top: 22px; display: grid; gap: 4px; font: 600 20px/1.3 var(--testo); font-variant-numeric: tabular-nums; color: var(--inchiostro-2); }
.calcolo b { font: 800 34px/1.1 var(--titoli); color: var(--corallo); }
.problema-chiusura { max-width: 820px; margin: 64px auto 0; padding: 0 var(--margine); text-align: center; font: 700 clamp(26px, 6.2vw, 44px)/1.15 var(--titoli); font-stretch: 106%; text-wrap: balance; }
.problema-chiusura strong { background: linear-gradient(transparent 58%, var(--lime) 58% 92%, transparent 92%); font-weight: 800; }

/* ── Le funzioni ──────────────────────────────────────────────────────────── */
.funzioni { padding: 110px 0 60px; }
.funzioni-griglia { max-width: var(--larghezza); margin: 40px auto 0; padding: 0 var(--margine); }
.funzioni-fermo { display: none; }
.passi { list-style: none; margin: 0; padding: 0; }
.passo { padding: 44px 0 30px; }
.passo-gruppo { text-align: center; font: 800 15px/1 var(--testo); letter-spacing: .12em; text-transform: uppercase; color: var(--blu); margin: 40px 0 36px; display: flex; align-items: center; gap: 14px; }
.passo-gruppo::before, .passo-gruppo::after { content: ''; flex: 1; height: 2px; background: var(--blu-tenue); }
.passo-testo { text-align: center; max-width: 34rem; margin: 0 auto; }
.passo-etichetta { display: inline-block; font-weight: 600; font-size: 15px; color: var(--inchiostro); background: var(--lime); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; }
.passo h3 { font-size: clamp(30px, 7.6vw, 46px); line-height: 1.04; margin-bottom: 14px; text-wrap: balance; }
.passo-testo p:last-child { font-size: 18px; color: var(--inchiostro-2); text-wrap: pretty; }
.passo-telefono { display: flex; justify-content: center; margin-top: 34px; }
.passo-telefono .telefono { --l: min(300px, 78vw); }

/* ── Fatta da un maestro ──────────────────────────────────────────────────── */
.maestro { position: relative; background: var(--inchiostro); color: #fff; padding: 120px 0 130px; overflow: hidden; }
.maestro-in { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 0 var(--margine); }
.maestro .titolo { font-size: clamp(42px, 11vw, 96px); line-height: .98; margin-bottom: 36px; }
.maestro mark { background: var(--lime); color: var(--inchiostro); padding: 0 .12em; border-radius: .12em; }
.maestro-corpo { display: grid; gap: 18px; font-size: clamp(19px, 4.6vw, 24px); line-height: 1.45; color: #D5DCE6; max-width: 36ch; }
.maestro-corpo p:first-child { color: #fff; font-weight: 500; }
.maestro-etichette { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 36px 0 0; }
.maestro-etichette li { border: 1.5px solid rgba(255,255,255,.3); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 16px; }
.maestro-campo { position: absolute; right: -300px; bottom: -330px; width: 640px; opacity: .18; transform: translate3d(0, var(--py, 0px), 0) rotate(-12deg); }

/* ── Cosa non fa ──────────────────────────────────────────────────────────── */
.nonfa { padding: 120px 0; }
.nonfa-griglia { list-style: none; display: grid; gap: 14px; max-width: var(--larghezza); margin: 52px auto 0; padding: 0 var(--margine); }
.nonfa-voce { background: #fff; border-radius: 26px; padding: 28px 24px; box-shadow: 0 1px 2px rgba(14,23,38,.05); }
.nonfa-segno { display: block; width: 46px; height: 46px; border-radius: 50%; background: #FCE7E3; position: relative; margin-bottom: 18px; }
.nonfa-segno::before, .nonfa-segno::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 3px; border-radius: 2px; background: var(--corallo); transform: translate(-50%, -50%) rotate(45deg); }
.nonfa-segno::after { transform: translate(-50%, -50%) rotate(-45deg); }
.nonfa-voce h3 { font-size: 26px; line-height: 1.1; margin-bottom: 8px; }
.nonfa-voce p { color: var(--inchiostro-2); }

/* ── Dove va ──────────────────────────────────────────────────────────────── */
.roadmap { padding: 40px 0 130px; }
.roadmap-linea { list-style: none; position: relative; max-width: var(--larghezza); margin: 52px auto 0; padding: 0 var(--margine) 0 calc(var(--margine) + 34px); display: grid; gap: 30px; }
.roadmap-linea::before { content: ''; position: absolute; left: calc(var(--margine) + 9px); top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: repeating-linear-gradient(var(--blu-tenue) 0 8px, transparent 8px 14px); }
.roadmap-linea li { position: relative; }
.roadmap-linea li::before { content: ''; position: absolute; left: -34px; top: 4px; width: 21px; height: 21px; border-radius: 50%; background: var(--carta); border: 3px solid var(--blu); box-sizing: border-box; }
.roadmap-linea li.ora::before { background: var(--lime); border-color: var(--inchiostro); }
.roadmap-stato { display: inline-block; font-size: 14px; font-weight: 600; color: var(--blu); margin-bottom: 4px; }
.roadmap-linea .ora .roadmap-stato { background: var(--lime); color: var(--inchiostro); padding: 2px 10px; border-radius: 999px; }
.roadmap-linea h3 { font-size: 26px; margin-bottom: 4px; }
.roadmap-linea p { color: var(--inchiostro-2); }

/* ── Finale ───────────────────────────────────────────────────────────────── */
.finale { position: relative; background: var(--blu); color: #fff; padding: 120px 0 200px; text-align: center; overflow: hidden; }
.finale::before { /* il perimetro del campo, sullo sfondo, senza attraversare il testo */
  content: ''; position: absolute; inset: 28px 16px 150px; border: 2px solid rgba(255,255,255,.16); border-radius: 18px; pointer-events: none;
}
.finale-in { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 0 var(--margine); }
.finale .titolo { font-size: clamp(40px, 10.6vw, 90px); }
.finale-testo { font-size: clamp(18px, 4.6vw, 22px); color: #E1EAF7; max-width: 32ch; margin: 22px auto 38px; text-wrap: balance; }
.finale .cta-sotto { color: #D3E1F5; }
.pallina.p3 { width: 58px; height: 58px; right: 26px; top: 52px; }
@media (min-width: 700px) { .pallina.p3 { width: 84px; height: 84px; right: 8%; top: 70px; } }

.contatto { position: relative; z-index: 3; margin: -130px auto 0; padding: 0 var(--margine) 110px; max-width: 900px; }
.contatto-card { background: #fff; border-radius: 30px; padding: 36px 22px 32px; box-shadow: 0 30px 60px -30px rgba(14,23,38,.35); }
.contatto-card .titolo { text-align: center; }
.contatto-testo { text-align: center; color: var(--inchiostro-2); font-size: 18px; margin: 12px auto 28px; max-width: 34ch; }
.modulo { display: grid; gap: 18px; }
.campo { display: grid; gap: 7px; }
.campo label { font-weight: 600; font-size: 16px; }
.obbl { font-weight: 500; font-size: 13px; color: var(--corallo); margin-left: 4px; }
.facolt { font-weight: 500; font-size: 13px; color: var(--inchiostro-3); margin-left: 4px; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: 400 17px/1.3 var(--testo); color: var(--inchiostro);
  background: var(--carta); border: 1.5px solid var(--linea); border-radius: 14px;
  padding: 15px 16px; min-height: 54px; appearance: none; -webkit-appearance: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E1726' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 14px; padding-right: 44px; }
.campo textarea { resize: vertical; min-height: 100px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--blu); background: #fff; box-shadow: 0 0 0 4px var(--blu-tenue); }
.campo.errato input, .campo.errato select { border-color: var(--corallo); background: #FFF5F3; }
.modulo-errore { color: var(--corallo); font-weight: 600; text-align: center; min-height: 0; }
.modulo-errore:empty { display: none; }
.modulo .cta { margin-top: 6px; }

/* ── Piede ────────────────────────────────────────────────────────────────── */
.piede { border-top: 1px solid var(--linea); padding: 44px var(--margine) 56px; }
.piede-in { max-width: var(--larghezza); margin: 0 auto; display: grid; gap: 14px; justify-items: center; text-align: center; color: var(--inchiostro-2); }
.piede-link, .piede-lingue { display: flex; gap: 22px; }
.piede a { color: var(--inchiostro); font-weight: 500; }
.piede a.nav-logo { font-weight: 800; text-decoration: none; }
.piede-lingue a[aria-current] { font-weight: 700; text-decoration: none; }
.piede-c { font-size: 15px; color: var(--inchiostro-3); }

/* ── Pagina privacy ───────────────────────────────────────────────────────── */
.legale { max-width: 720px; margin: 0 auto; padding: 120px var(--margine) 80px; }
.legale .titolo { font-size: clamp(44px, 10vw, 72px); margin-bottom: 14px; }
.legale-data { color: var(--inchiostro-3); margin-bottom: 30px; }
.legale h2 { font-size: 26px; margin: 36px 0 10px; }
.legale p { font-size: 18px; color: var(--inchiostro-2); margin-bottom: 12px; }
.legale .pulsante { margin-top: 36px; color: #fff; }

/* ── Immagine per le anteprime (og.png) ───────────────────────────────────── */
.og { display: grid; grid-template-columns: 640px 560px; align-items: center; position: relative; }
.og-testo { padding: 0 0 0 80px; }
.og-marchio { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 26px; margin-bottom: 18px; }
.og-marchio .logo { width: 56px; height: 56px; }
.og-marchio span { background: var(--lime); padding: 6px 16px; border-radius: 999px; }
.og-nome { font: 800 min(172px, calc(520px / (var(--lettere, 5) * .8)))/.9 var(--titoli); white-space: nowrap; font-stretch: 125%; letter-spacing: -0.02em; margin-bottom: 26px; }
.og-promessa { font: 700 38px/1.14 var(--titoli); font-stretch: 106%; max-width: 15.5em; }
.og-scena { position: relative; height: 630px; }
.og-campo { position: absolute; left: 20px; top: 250px; width: 620px; }
.og-campo .sc-campo { border-radius: 22px; }
.og-scena .telefono { position: absolute; left: 130px; top: 60px; --l: 290px; }
.pallina.og-p { width: 70px; height: 70px; left: 390px; top: 110px; z-index: 4; }

/* ════════════════════════════════════════════════════════════════════════════
   EFFETTI DI SCORRIMENTO
   Senza JavaScript tutto è visibile. Con JavaScript (classe .js su <html>)
   gli elementi .rivela partono nascosti ed entrano quando arrivano sullo schermo.
   ════════════════════════════════════════════════════════════════════════════ */
.js .rivela { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--curva), transform .9s var(--curva); transition-delay: calc(var(--i, 0) * 90ms); }
.js .rivela.visto { opacity: 1; transform: none; }
.js .apertura-nome.rivela { transform: translateY(40px) scale(.96); }
.js .apertura-nome.rivela.visto { transform: none; }
.js .bolla.rivela { transform: translateY(14px) scale(.96); transition-delay: calc(var(--i, 0) * 380ms + 200ms); }
.js .bolla.rivela.visto { transform: none; }
.apertura-telefono .telefono { transition: transform .1s linear; }
[data-parallasse] { will-change: transform; }
.pallina[data-parallasse] { transform: translate3d(0, var(--py, 0px), 0); }

/* ── Tablet ───────────────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  :root { --margine: 36px; }
  body { font-size: 18px; }
  .nav { height: 72px; }
  .apertura { padding-top: 140px; }
  .apertura-scena { height: 810px; }
  .apertura-telefono .telefono { --l: 320px; }
  .apertura-campo { top: 240px; width: 1040px; }
  .pallina.p1 { left: calc(50% + 190px); width: 80px; height: 80px; }
  .pallina.p2 { left: calc(50% - 280px); top: 380px; width: 46px; height: 46px; }
  .problema-blocchi { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .nonfa-griglia { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .contatto-card { padding: 52px 48px 44px; }
  .modulo { grid-template-columns: 1fr 1fr; gap: 20px 18px; }
  .campo-largo, .modulo-errore { grid-column: 1 / -1; }
}

/* ── Computer: il telefono resta fermo e i testi gli scorrono accanto ─────── */
@media (min-width: 980px) {
  .funzioni-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 20px; }
  .funzioni-fermo { display: block; position: relative; }
  .funzioni-telefono { position: sticky; top: calc(50vh - 350px); height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
  .telefono-pila { --l: 318px; }
  .sc-strato { opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .55s var(--curva), transform .6s var(--curva); pointer-events: none; }
  .sc-strato.attivo { opacity: 1; transform: none; }
  .funzioni-indice { display: flex; gap: 14px; align-items: center; font-weight: 600; font-size: 16px; }
  .funzioni-indice [data-indice-etichetta] { background: var(--lime); padding: 5px 14px; border-radius: 999px; }
  .funzioni-indice [data-indice-numero] { color: var(--inchiostro-3); }
  .passo { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; padding: 0; }
  .passo-gruppo { justify-content: flex-start; margin: 0 0 30px; }
  .passo-gruppo::before { display: none; }
  .passo-testo { text-align: left; margin: 0; max-width: 30rem; transition: opacity .5s; }
  .js .passo:not(.attivo) .passo-testo.visto { opacity: .28; }
  .passo-telefono { display: none; }
  .passo h3 { font-size: clamp(40px, 4.2vw, 56px); }
  .passo-testo p:last-child { font-size: 20px; }
  .nonfa-griglia { grid-template-columns: repeat(4, 1fr); }
  .roadmap-linea { grid-template-columns: repeat(4, 1fr); padding: 38px var(--margine) 0; gap: 26px; }
  .roadmap-linea::before { left: var(--margine); right: var(--margine); top: 9px; bottom: auto; width: auto; height: 3px; background: repeating-linear-gradient(90deg, var(--blu-tenue) 0 10px, transparent 10px 16px); }
  .roadmap-linea li::before { left: 0; top: -38px; }
  .problema-blocchi { gap: 24px; }
  .blocco { padding: 36px 32px; }
  .maestro-campo { right: -120px; bottom: -80px; width: 860px; opacity: .22; }
}

@media (min-width: 1300px) {
  .apertura-campo { width: 1180px; top: 200px; }
  .apertura-scena { height: 840px; }
}

/* ── Chi ha chiesto meno movimento non ne riceve ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .js .rivela, .js .bolla.rivela, .js .apertura-nome.rivela { opacity: 1; transform: none; }
}

/* ── COS'È CAMBIATO (la linea del tempo, dallo stesso elenco dell'app) ── */
.cambiato { padding: 20px 0 120px; }
.cambiato-sotto { color: var(--inchiostro-2); margin-top: 14px; font-size: 18px; max-width: 46ch; }
.cambiato-linea { list-style: none; position: relative; max-width: 760px; margin: 44px auto 0; padding: 0 var(--margine) 0 calc(var(--margine) + 34px); display: grid; gap: 30px; }
.cambiato-linea::before { content: ''; position: absolute; left: calc(var(--margine) + 9px); top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: linear-gradient(var(--blu), var(--blu-tenue)); }
.cambiato-linea > li { position: relative; display: grid; gap: 12px; }
.cambiato-linea > li::before { content: ''; position: absolute; left: -34px; top: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--lime); border: 3px solid var(--blu); box-sizing: border-box; }
.cambiato-data { font: 700 14px var(--titoli); font-stretch: 108%; letter-spacing: .06em; text-transform: uppercase; color: var(--inchiostro-3); }
.cambiato-voce { display: grid; gap: 4px; }
.cambiato-voce h3 { font-size: 19px; }
.cambiato-voce p { color: var(--inchiostro-2); }
.cambiato-voce.grande-voce { background: #fff; border-radius: 20px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(14,23,38,.05), 0 12px 28px -18px rgba(14,23,38,.3); }
.cambiato-voce.grande-voce h3 { font-size: 22px; }
.cta-browser { display: inline-block; margin-top: 10px; font-weight: 600; }
.finale .cta-browser { color: rgba(255,255,255,.9); }