/* Audit Lampo — grafica allineata a evolutionweb.agency
   Valori presi dal sito live (assets/style.css): palette, font (Sora titoli, Montserrat testo, Fraunces sottotitoli),
   pulsanti (raggio 8px), card (raggio 12px, bordo #E3E9F2), fascia scura con l'immagine della pagina
   "Controllo visibilità AI", footer #080D18. Font e immagini sono copie locali: nulla si carica da altri siti. */

:root {
  color-scheme: light;
  --ink: #0D1524;
  --ink-soft: #22303F;
  --muted: #5C6879;
  --muted-2: #8A94A3;
  --line: #E3E9F2;
  --line-soft: #EFF3F8;
  --paper: #FBFCFE;
  --surface: #FFFFFF;
  --wash: #F1F5FB;
  --blue: #1E63C4;
  --blue-deep: #0B3A82;
  --blue-lift: #2B7FE0;
  --red: #E02328;
  --red-deep: #96131C;
  --red-soft: #FDEBEB;
  --r: 12px;
  --r-btn: 8px;
  --gutter: clamp(16px, 4vw, 64px);
  --f-display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-text: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --swift: cubic-bezier(.19, 1, .22, 1);
  /* colori di servizio (avanzamento, esiti) e quelli che app.js usa per nome */
  --verde: #1d7a46;
  --rosso: var(--red-deep);
  --ambra: #8a5300;
  --blu: var(--blue);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-text); font-size: clamp(.98rem, .35vw + .9rem, 1.0625rem); line-height: 1.72;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2 { font-family: var(--f-display); font-weight: 700; margin: 0; text-wrap: balance; letter-spacing: -.035em; line-height: 1.06; color: var(--ink); }
h3 { font-family: var(--f-serif); font-weight: 600; margin: 0; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
p { margin: 0; }
a { color: var(--blue); text-underline-offset: 3px; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.visivamente-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- fascia scura in alto (come le pagine interne del sito) ---------- */
.fascia {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: #0A1326 url("/static/hero.webp") center / cover no-repeat;
  padding-bottom: clamp(44px, 7vw, 96px);
}
.fascia::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 14, 26, .5), rgba(8, 14, 26, .2) 45%, rgba(8, 14, 26, .55)); }
.fascia-segno { position: absolute; right: clamp(-40px, -2vw, 0px); top: 55%; translate: 0 -50%; z-index: -1; width: clamp(240px, 32vw, 470px); height: clamp(240px, 32vw, 470px); pointer-events: none; }
.fascia-segno svg { width: 100%; height: 100%; stroke: rgba(255, 255, 255, .085); stroke-width: .55; fill: none; }
@media (max-width: 900px) { .fascia-segno { opacity: .5; right: -18%; width: 60vw; height: 60vw; } }
/* nei passi successivi la fascia è solo la testata: la scheda bianca ci sale sopra */
body:has(#passo-sito[hidden]) .fascia { padding-bottom: 96px; }
body:has(#passo-sito[hidden]) .fascia-segno { display: none; }

.testata { display: flex; align-items: center; min-height: 68px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.brand img { width: 34px; height: auto; }
.brand b { display: block; font-family: var(--f-display); font-weight: 600; font-size: .95rem; letter-spacing: -.02em; line-height: 1.15; }
.brand i { display: block; font-style: normal; font-size: .57rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .62); font-weight: 600; }

.intro-fascia { padding-top: clamp(28px, 6vw, 72px); }
.eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); display: flex; align-items: center; gap: .7em; margin: 0 0 1rem; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; flex: none; }
.fascia .eyebrow { color: #BFD8F7; }
.fascia h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.6rem); max-width: 19ch; }
.lede { font-size: clamp(1.02rem, .5vw + .95rem, 1.2rem); line-height: 1.62; color: var(--ink-soft); max-width: 60ch; }
.fascia .lede { color: rgba(255, 255, 255, .84); font-weight: 300; margin-top: 1.1em; }

/* modulo del sito, dentro la fascia */
#form-sito { margin-top: clamp(24px, 4vw, 40px); max-width: 640px; }
.fascia label { color: rgba(255, 255, 255, .72); }
.fascia .errore { color: #FFB3B5; }
.riga-campo { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 560px) { .riga-campo { flex-direction: row; } .riga-campo input { flex: 1; } }
.turnstile:not(:empty) { margin-top: .8rem; }

/* ---------- contenuto: schede bianche ---------- */
main { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter) clamp(40px, 6vw, 72px); position: relative; }
body:has(#passo-sito[hidden]) main { margin-top: -64px; }
body:has(#passo-sito:not([hidden])) main { padding-bottom: 0; }
.pannello { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 36px); margin-bottom: 18px; box-shadow: 0 1px 2px rgb(13 21 36 / 4%), 0 12px 32px rgb(13 21 36 / 6%); }
.pannello h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin-bottom: .5rem; }
.sopratitolo { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin: 0 0 .8rem; display: flex; align-items: center; gap: .7em; }
.sopratitolo::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
.intro { color: var(--muted); margin: 0 0 1.25rem; }

/* campi (come il modulo contatti del sito) */
label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 1.1rem 0 .6em; }
.obbligatorio, .facoltativo { text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--muted-2); }
input[type="text"], input[type="email"], input[type="tel"], select {
  width: 100%; font-family: var(--f-text); font-size: 1rem; line-height: 1.3; color: var(--ink); min-height: 52px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-btn); padding: .92em 1em;
  transition: border-color .35s, box-shadow .45s;
}
select { appearance: none; cursor: pointer; padding-right: 2.6em;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6879' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1em center; }
input:hover, select:hover { border-color: var(--muted-2); }
input:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30, 99, 196, .14); }
input[aria-invalid="true"], input:user-invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(224, 35, 40, .1); }
.aiuto { color: var(--muted); font-size: .86rem; margin: .4rem 0 0; }
.errore { color: var(--red-deep); font-size: .9rem; font-weight: 600; margin: .5rem 0 0; }
.errore:empty { display: none; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-family: var(--f-serif); font-weight: 600; font-size: 1.2rem; color: var(--ink); padding: 0; margin-top: 1.4rem; }
.scelta legend { font-family: var(--f-text); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.scelta label { text-transform: none; letter-spacing: normal; font-size: 1rem; font-weight: 400; color: var(--ink); display: flex; align-items: center; gap: .7rem; margin: .3rem 0; min-height: 44px; }
.due-colonne { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .due-colonne { grid-template-columns: 2fr 1fr; } }
/* caselle come nel sito */
input[type="checkbox"], input[type="radio"] { appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; cursor: pointer; border: 1px solid var(--muted-2); background: var(--surface); transition: background .3s, border-color .3s; }
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / 13px no-repeat; border-color: var(--blue); }
input[type="radio"]:checked { border: 6px solid var(--blue); }

/* pulsanti come nel sito (.btn) */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .65em; position: relative; overflow: hidden; isolation: isolate;
  font-family: var(--f-text); font-size: .9rem; font-weight: 600; letter-spacing: .02em; min-height: 52px; line-height: 1.2;
  padding: .98em 1.6em; border-radius: var(--r-btn); border: 1px solid transparent; cursor: pointer;
  background: var(--blue); color: #fff; text-decoration: none; transition: background .35s, color .35s, border-color .35s;
}
.bottone::before { content: ""; position: absolute; inset: 0; z-index: -1; translate: -120% 0; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent); transition: translate .85s var(--swift); }
.bottone:hover { background: var(--blue-deep); }
.bottone:hover::before { translate: 120% 0; }
.bottone[disabled] { opacity: .6; cursor: progress; }
.bottone.secondario { background: var(--surface); color: var(--ink); border-color: var(--line); }
.bottone.secondario:hover { border-color: var(--ink); }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.25rem 0 0; }
@media (max-width: 559px) { .azioni .bottone, #form-sito .bottone { width: 100%; } }
#form-correggi .bottone { margin-top: 1.4rem; width: 100%; }
@media (prefers-reduced-motion: reduce) { .bottone::before { display: none; } }

/* "È la sua azienda?" */
.scheda-azienda { border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.25rem; background: var(--wash); }
.scheda-azienda p { margin: .1rem 0; color: var(--ink-soft); }
.scheda-azienda p:empty { display: none; }
.nome-azienda { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; font-size: 1.25rem; color: var(--ink) !important; }

/* attesa */
progress { width: 100%; height: 6px; appearance: none; border: 0; border-radius: 3px; background: var(--line); margin: .5rem 0 1.25rem; overflow: hidden; }
progress::-webkit-progress-bar { background: var(--line); }
progress::-webkit-progress-value { background: var(--blue); transition: width .6s var(--swift); }
progress::-moz-progress-bar { background: var(--blue); }
.fasi { list-style: none; padding: 0; margin: 0; }
.fasi li { padding: .6rem 0 .6rem 2rem; position: relative; color: var(--muted); border-top: 1px solid var(--line-soft); }
.fasi li:first-child { border-top: 0; }
.fasi li::before { content: ""; position: absolute; left: .2rem; top: 1rem; width: .85rem; height: .85rem; border-radius: 50%; border: 2px solid var(--line); }
.fasi li.in-corso { color: var(--ink); }
.fasi li.in-corso::before { border-color: var(--blue); border-top-color: transparent; animation: gira .9s linear infinite; }
.fasi li.fatto { color: var(--ink); }
.fasi li.fatto::before { content: "✓"; border: 0; color: var(--verde); font-weight: 700; top: .6rem; width: auto; height: auto; }
.conta { color: var(--muted-2); font-size: .88rem; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fasi li.in-corso::before { animation: none; border-top-color: var(--blue); } }

/* colpo d'occhio */
.colpo-docchio h3 { font-size: 1.25rem; margin: 1.8rem 0 .6rem; }
.data-analisi { color: var(--muted-2); font-size: .85rem; }
.panoramica { color: var(--ink-soft); }
.punti-jolly { margin: 0; padding: 0; list-style: none; counter-reset: punto; }
.punti-jolly li { position: relative; padding: 1rem 0 1rem 2.6rem; border-top: 1px solid var(--line); counter-increment: punto; color: var(--ink-soft); }
.punti-jolly li:first-child { border-top: 0; }
.punti-jolly li::before { content: counter(punto); position: absolute; left: 0; top: 1.05rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #E6EFFB; color: var(--blue); font-family: var(--f-display); font-weight: 700; font-size: .9rem; display: grid; place-content: center; }
.punti-jolly strong { color: var(--ink); font-weight: 700; }
.punti-jolly em { font-style: normal; font-weight: 700; color: var(--ink); }
.colpo-docchio .chiusura { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.colpo-docchio .chiusura:empty { display: none; }

/* offerta: come la CTA scura del sito, l'unico punto dove entra il rosso del logo */
.offerta { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: #fff; border: 0; }
.offerta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 120% at 84% 4%, rgba(30, 99, 196, .46), transparent 62%), radial-gradient(56% 110% at 6% 100%, rgba(224, 35, 40, .3), transparent 64%); }
.offerta h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.35rem, 3vw, 1.8rem); color: #fff; line-height: 1.15; }
.offerta .condizioni { color: rgba(255, 255, 255, .78); margin: .7rem 0 .4rem; }
.offerta label { color: rgba(255, 255, 255, .7); }
.offerta .obbligatorio, .offerta .facoltativo { color: rgba(255, 255, 255, .5); }
.offerta .aiuto { color: rgba(255, 255, 255, .6); }
.offerta .errore { color: #FFB3B5; }
.offerta input[type="text"], .offerta input[type="email"], .offerta input[type="tel"] { border-color: transparent; }
.consenso { display: flex !important; gap: .8em; align-items: flex-start; text-transform: none !important; letter-spacing: normal !important; font-size: .88rem !important; font-weight: 400 !important; line-height: 1.6; margin-top: 1.4rem !important; color: rgba(255, 255, 255, .8) !important; }
.consenso input { border-color: rgba(255, 255, 255, .5); background: transparent; }
.offerta a { color: #8FBAF5; }
#form-contatto .bottone { width: 100%; margin-top: 1.4rem; background: var(--red); }
#form-contatto .bottone:hover { background: var(--red-deep); }
.esito { font-weight: 600; color: #8FE3B0; margin: .9rem 0 0; }
.esito:empty { display: none; }
.riservatezza { font-size: .85rem; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .06); border-radius: var(--r-btn); padding: .9rem 1rem; margin: 1.4rem 0 0; }
.trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* pagine di testo (privacy, disiscrizione) */
.testo h2 { font-family: var(--f-serif); font-weight: 600; letter-spacing: -.015em; font-size: 1.3rem; margin: 1.8rem 0 .5rem; }
.testo p, .testo li { color: var(--ink-soft); }
.testo ul { padding-left: 1.2rem; }
.testo li { margin: .35rem 0; }
#form-disiscrizione .bottone { margin-top: 1.5rem; }

/* ---------- footer come nel sito ---------- */
.foot { background: #080D18; color: rgba(255, 255, 255, .58); padding-block: clamp(38px, 5vw, 60px); font-size: .82rem; }
.foot-griglia { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(24px, 3vw, 44px); }
@media (max-width: 760px) { .foot-griglia { grid-template-columns: 1fr; } }
.foot h3 { font-family: var(--f-text); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .42); font-weight: 700; margin-bottom: 1.1em; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75em; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot .fbrand { display: flex; align-items: center; gap: 11px; margin-bottom: 1.1em; }
.foot .fbrand img { width: 30px; }
.foot .fbrand b { font-family: var(--f-display); color: #fff; font-size: .98rem; letter-spacing: -.02em; }
.foot-fondo { display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; align-items: center; margin-top: clamp(30px, 4vw, 48px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .76rem; }
.foot-fondo span:last-child { display: flex; gap: 20px; flex-wrap: wrap; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.scelta { margin-top: 1.4rem; }
.consiglio { margin-top: 1.25rem; padding: 1.1rem 1.25rem; background: var(--wash); border-radius: var(--r); }
.consiglio h3 { margin-top: 0 !important; }
/* lavoro fatto, cosa funziona già, il prossimo passo */
.lavoro { margin-top: 1.1rem; padding: .85rem 1rem; border-left: 3px solid var(--blue); background: var(--wash); border-radius: 0 var(--r-btn) var(--r-btn) 0; color: var(--ink-soft); font-size: .95rem; }
.funziona { list-style: none; margin: 0; padding: 0; }
.funziona li { position: relative; padding: .7rem 0 .7rem 2.2rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.funziona li:first-child { border-top: 0; }
.funziona li::before { content: "✓"; position: absolute; left: 0; top: .78rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #E7F5EC; color: var(--verde); font-weight: 700; font-size: .8rem; display: grid; place-content: center; }
.funziona strong { color: var(--ink); }
.funziona em { font-style: normal; font-weight: 700; color: var(--ink); }
.prossimo { margin-top: 1.25rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r); }
.prossimo h3 { margin-top: 0 !important; }
/* modello Telinco: quattro sezioni con titoli ben visibili */
.colpo-docchio h3.sezione { font-family: var(--f-display); font-weight: 700; letter-spacing: -.025em; font-size: clamp(1.3rem, 3.2vw, 1.6rem); line-height: 1.2; color: var(--ink); margin: 2.2rem 0 .75rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.colpo-docchio h3#t-panoramica { margin-top: 1.4rem; padding-top: 0; border-top: 0; }
.paragrafi p { color: var(--ink-soft); margin: 0 0 .9rem; }
.paragrafi p:last-child { margin-bottom: 0; }
.aiuta { list-style: none; margin: 0; padding: 0; }
.aiuta li { position: relative; padding: .8rem 0 .8rem 2.2rem; border-top: 1px solid var(--line-soft); color: var(--ink-soft); }
.aiuta li:first-child { border-top: 0; padding-top: .2rem; }
.aiuta li::before { content: "✓"; position: absolute; left: 0; top: .85rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #E7F5EC; color: var(--verde); font-weight: 700; font-size: .8rem; display: grid; place-content: center; }
.aiuta li:first-child::before { top: .25rem; }
.aiuta strong { color: var(--ink); font-weight: 700; }
#prossimo { color: var(--ink-soft); }