@font-face{font-family:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url(../fonts/mona-sans-latin-standard-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url(../fonts/mona-sans-latin-ext-standard-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(../fonts/instrument-sans-latin-standard-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(../fonts/instrument-sans-latin-ext-standard-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Spline Sans Mono";font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/spline-sans-mono-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spline Sans Mono";font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/spline-sans-mono-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* HAGIS Marketing · tema scuro dal logo (bianco, blu, ciano su nero). I colori della scena 3D vengono da qui. */
:root {
  --notte: #04060C;
  --notte-2: #080C17;
  --notte-3: #0E1424;
  --riga: #1B2336;
  --riga-forte: #2B3651;
  --bordo-campo: #5B6785;
  --bianco: #FFFFFF;
  --testo: #EEF2F8;
  --testo-2: #B6BFD0;
  --testo-3: #8A95AB;
  --blu: #0150FB;
  --blu-2: #2A68FF;
  --ciano: #01F5FD;
  --errore: #FF8A9A;
  --f-titoli: "Mona Sans", "Arial", system-ui, sans-serif;
  --f-testo: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-dati: "Spline Sans Mono", ui-monospace, "Cascadia Mono", monospace;
  --esce: cubic-bezier(.22, 1, .36, 1);
  --molla: cubic-bezier(.34, 1.4, .64, 1);
  --pad: clamp(16px, 5vw, 72px);
  --testata: 68px;
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--notte); scroll-padding-top: var(--testata); }
body {
  margin: 0; background: var(--notte); color: var(--testo-2);
  font: 400 1.0625rem/1.6 var(--f-testo); font-synthesis: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent; overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--bianco); margin: 0; font-family: var(--f-titoli); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blu); color: var(--bianco); }

.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.salta { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 18px; background: var(--bianco); color: var(--notte); border-radius: 999px; font-weight: 600; transform: translateY(-150%); transition: transform .2s var(--esce); }
.salta:focus { transform: none; }

/* ---------- Etichette e pulsanti ---------- */
.sigla {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
  font: 500 .78rem/1.2 var(--f-dati); letter-spacing: .14em; text-transform: uppercase; color: var(--ciano);
}
.sigla::before { content: ""; width: 34px; height: 10px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M0 5 Q4.25 -1 8.5 5 T17 5 T25.5 5 T34 5' fill='none' stroke='%2301F5FD' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain; }
.sigla .num { color: var(--bianco); margin-right: -2px; }
.sigla .num::after { content: "·"; margin-left: 10px; color: var(--testo-3); }
.capitolo .sigla::before { display: none; }

.pulsante {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 24px; border-radius: 999px; border: 0;
  background: var(--blu); color: var(--bianco); text-decoration: none; cursor: pointer;
  font: 600 1rem/1.2 var(--f-testo); letter-spacing: .005em; text-align: center;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 10px 30px -12px rgb(1 80 251 / .8);
  transition: background-color .2s ease, transform .16s var(--esce);
}
/* Al passaggio del mouse parte un'onda dal bordo, una volta sola. */
.pulsante::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--ciano); opacity: 0; pointer-events: none; }
.pulsante:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .pulsante:hover { background: var(--blu-2); }
  .pulsante:hover::after { animation: onda .45s var(--esce); }
}
@keyframes onda { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.06, 1.2); } }
.pulsante-chiaro { background: var(--bianco); color: var(--notte); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .pulsante-chiaro:hover { background: #DDE6F5; } }

.collegamento {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--bianco); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(1 245 253 / .5); text-underline-offset: 5px; text-decoration-thickness: 1.5px;
}
.collegamento::after { content: "→" / ""; text-decoration: none; display: inline-block; transition: transform .2s var(--esce); }
@media (hover: hover) and (pointer: fine) { .collegamento:hover { text-decoration-color: var(--ciano); } .collegamento:hover::after { transform: translateX(4px); } }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 34px; }

/* ---------- Intestazione ---------- */
.testata {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--testata);
  display: flex; align-items: center; gap: 20px; padding: 0 var(--pad); padding-top: env(safe-area-inset-top);
  transition: background-color .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.testata.piena, .menu-aperto .testata { background: rgb(4 6 12 / .82); border-color: var(--riga); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.marchio { display: block; flex: none; margin-right: auto; padding: 12px 0; }
.marchio img { height: 26px; width: auto; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu > a:not(.pulsante) { white-space: nowrap; padding: 10px 12px; border-radius: 999px; text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--testo-2); transition: color .15s ease, background-color .15s ease; }
@media (hover: hover) and (pointer: fine) { .menu > a:not(.pulsante):hover { color: var(--bianco); background: rgb(255 255 255 / .06); } }
.lingue { display: flex; gap: 2px; margin: 0 10px; padding: 3px; border: 1px solid var(--riga-forte); border-radius: 999px; }
.lingue a { display: grid; place-items: center; min-width: 34px; height: 30px; border-radius: 999px; text-decoration: none; font: 500 .72rem/1 var(--f-dati); color: var(--testo-3); letter-spacing: .06em; }
.lingue a[aria-current] { background: var(--bianco); color: var(--notte); }
@media (hover: hover) and (pointer: fine) { .lingue a:not([aria-current]):hover { color: var(--bianco); } }
.testata .pulsante { white-space: nowrap; min-height: 42px; padding: 10px 18px; font-size: .92rem; }
.menu-cta, .apri-menu { display: none; }
.apri-menu { width: 46px; height: 46px; border: 1px solid var(--riga-forte); border-radius: 999px; background: rgb(4 6 12 / .5); cursor: pointer; place-items: center; }
.apri-menu i, .apri-menu i::before { display: block; width: 18px; height: 1.6px; background: var(--bianco); border-radius: 2px; transition: transform .25s var(--esce); }
.apri-menu i { position: relative; transform: translateY(-3px); }
.apri-menu i::before { content: ""; position: absolute; top: 6px; }
.menu-aperto .apri-menu i { transform: translateY(0) rotate(45deg); }
.menu-aperto .apri-menu i::before { transform: translateY(-6px) rotate(-90deg); }

@media (max-width: 1300px) {
  .apri-menu { display: grid; }
  .testata-cta { display: none; }
  .menu {
    position: fixed; inset: var(--testata) 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--pad) 28px; background: rgb(4 6 12 / .96); border-bottom: 1px solid var(--riga);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .25s var(--esce), visibility 0s linear .25s;
  }
  .menu-aperto .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .25s var(--esce); }
  .menu > a:not(.pulsante) { padding: 14px 4px; font-size: 1.125rem; color: var(--bianco); border-bottom: 1px solid var(--riga); border-radius: 0; }
  .lingue { align-self: flex-start; margin: 18px 0 6px; }
  .lingue a { min-width: 46px; height: 44px; }
  .menu-cta { display: inline-flex; margin-top: 16px; }
}
@media (min-width: 1301px) { .testata-cta { display: inline-flex; } }

/* ---------- Scena ---------- */
#scena { position: fixed; inset: 0; width: 100%; height: 100vh; z-index: 0; pointer-events: none; }
.nogl #scena { display: none; }
main, .piede { position: relative; z-index: 1; }

/* Pausa delle onde (WCAG 2.2.2), visibile solo durante il viaggio. */
.pausa { display: none; }
.gl:not(.rm) .pausa:not([hidden]) {
  display: inline-flex; align-items: center; gap: 9px; position: fixed; z-index: 40; right: var(--pad); top: calc(var(--testata) + 14px);
  min-height: 44px; padding: 0 16px 0 14px; border-radius: 999px; border: 1px solid var(--riga-forte); background: rgb(4 6 12 / .6); cursor: pointer;
  color: var(--testo-2); font: 500 .72rem/1 var(--f-dati); letter-spacing: .1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: color .15s ease, border-color .15s ease;
}
.pausa i { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.pausa[aria-pressed="true"] i { border: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; width: 0; height: 0; }
.pausa[aria-pressed="true"] { color: var(--ciano); border-color: rgb(1 245 253 / .5); }
@media (hover: hover) and (pointer: fine) { .pausa:hover { color: var(--bianco); border-color: var(--ciano); } }
.fermo .scorri i::after { animation: none; }

/* ---------- Viaggio ---------- */
.apertura {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; padding: calc(var(--testata) + 40px) var(--pad) 90px;
}
.apertura-testo { max-width: min(37rem, 45vw); }
h1 {
  font-weight: 800; font-stretch: 112%; font-size: clamp(2.6rem, 5.4vw, 5.4rem);
  line-height: .97; letter-spacing: -.028em;
}
.sotto { margin-top: 26px; max-width: 30ch; font-size: clamp(1.125rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--testo-2); }
.riserva { display: none; }
.scorri { position: absolute; left: var(--pad); bottom: 28px; display: flex; align-items: center; gap: 12px; font: 500 .7rem/1 var(--f-dati); letter-spacing: .16em; text-transform: uppercase; color: var(--testo-3); }
.scorri i { width: 54px; height: 1px; background: var(--riga-forte); overflow: hidden; position: relative; }
.scorri i::after { content: ""; position: absolute; inset: 0; background: var(--ciano); transform: translateX(-100%); animation: scorre 2.4s var(--esce) 2s 2; }
@keyframes scorre { 60%, 100% { transform: translateX(100%); } }

.capitolo { min-height: 145vh; min-height: 145svh; display: flex; align-items: center; padding: 0 var(--pad); }
.capitolo[data-lato="R"] { justify-content: flex-end; }
.capitolo-testo { max-width: min(31rem, 40vw); }
.capitolo h2 { font-weight: 760; font-stretch: 108%; font-size: clamp(2rem, 3.7vw, 3.5rem); line-height: 1.01; letter-spacing: -.024em; }
.capitolo-testo > p:not(.sigla) { margin-top: 22px; font-size: 1.125rem; }
.capitolo-testo > .collegamento { margin-top: 18px; }
.capitolo-fine { min-height: 130vh; min-height: 130svh; }

/* Titoli parola per parola: ogni parola sale dalla sua riga. */
.wm { display: inline-block; overflow: clip; vertical-align: top; padding: .06em .04em .24em; margin: -.06em -.04em -.24em; }
.w { display: inline-block; }
.js:not(.rm) [data-parole] .w { transform: translateY(108%); transition: transform .65s var(--esce); transition-delay: calc(var(--i) * 40ms); }
.js:not(.rm) h1[data-parole] .w { animation: sale .7s var(--esce) both; animation-delay: calc(.15s + var(--i) * 45ms); transition: none; }
.js:not(.rm) [data-parole].acceso .w { transform: none; }
@keyframes sale { from { transform: translateY(108%); } to { transform: none; } }
.js:not(.rm) .apertura .sigla, .js:not(.rm) .apertura .sotto, .js:not(.rm) .apertura .azioni { animation: appare .6s var(--esce) both; }
.js:not(.rm) .apertura .sigla { animation-delay: .1s; }
.js:not(.rm) .apertura .sotto { animation-delay: .45s; }
.js:not(.rm) .apertura .azioni { animation-delay: .55s; }
@keyframes appare { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Senza WebGL: onde disegnate al posto della scena e capitoli compatti. */
.nogl .riserva { display: block; position: absolute; right: var(--pad); top: 50%; width: min(46vw, 640px); transform: translateY(-50%); overflow: visible; }
.riserva path { fill: none; stroke: var(--ciano); stroke-width: 1.4; opacity: calc(.95 - var(--k) * .12); }
.riserva path:nth-child(even) { stroke: var(--blu); }
.nogl .capitolo, .nogl .capitolo-fine { min-height: 0; padding-block: 16vh; }

/* ---------- Telefono e tablet verticale: scena in alto, testo in basso ---------- */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  :root { --testata: 62px; }
  .marchio img { height: 21px; }
  .apertura { align-items: flex-end; padding-bottom: max(40px, 6svh); }
  .apertura-testo, .capitolo-testo { max-width: 34rem; }
  h1 { font-size: clamp(2.25rem, 9.4vw, 3.4rem); font-stretch: 106%; }
  .sotto { margin-top: 18px; font-size: 1.0625rem; }
  .azioni { margin-top: 26px; gap: 10px 22px; }
  .scorri { display: none; }
  .capitolo, .capitolo[data-lato="R"] { justify-content: flex-start; align-items: flex-end; padding-bottom: 12svh; }
  .gl .capitolo-testo { padding: 26px 0 0; background: linear-gradient(to top, var(--notte) 72%, rgb(4 6 12 / 0)); margin-inline: -4px; padding-inline: 4px; }
  .capitolo h2 { font-size: clamp(1.85rem, 7.6vw, 2.6rem); }
  .capitolo-testo > p:not(.sigla) { margin-top: 16px; font-size: 1.0625rem; }
  .sigla { margin-bottom: 14px; }
  .nogl .riserva { position: static; width: 100%; transform: none; margin-bottom: 24px; }
  .nogl .apertura { flex-direction: column; justify-content: flex-end; align-items: stretch; }
}

/* ---------- Sezioni piene ---------- */
.sezione { position: relative; background: var(--notte); padding: clamp(84px, 11vw, 150px) var(--pad); border-top: 1px solid var(--riga); }
.sezione:nth-of-type(even) { background: var(--notte-2); }
.testa-sezione { max-width: 46rem; margin-bottom: clamp(40px, 6vw, 72px); }
.testa-sezione h2 { font-weight: 760; font-stretch: 106%; font-size: clamp(2rem, 3.6vw, 3.3rem); line-height: 1.04; letter-spacing: -.022em; }
.testa-sezione > p:not(.sigla) { margin-top: 20px; font-size: 1.125rem; max-width: 40rem; }
.num { font: 500 .78rem/1 var(--f-dati); color: var(--ciano); letter-spacing: .08em; }

/* Comparse: partono già visibili senza script; con lo script salgono quando arrivano. */
.comparse:not(.rm) .entra { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .8s var(--esce); transition-delay: calc(var(--i, 0) * 70ms); }
.comparse:not(.rm) .entra.visto { opacity: 1; transform: none; }

/* Offerta: ogni lavoro ha la sua frequenza. */
.offerta { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--riga); }
.offerta li { display: grid; grid-template-columns: 13rem minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px 40px; align-items: center; padding: 30px 0; border-top: 1px solid var(--riga); }
.offerta h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 680; font-stretch: 104%; line-height: 1.15; letter-spacing: -.01em; }
.offerta .onda { width: 100%; height: 44px; overflow: visible; }
.onda path { fill: none; stroke: var(--ciano); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.comparse:not(.rm) .offerta .onda path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--esce) .25s; }
.comparse:not(.rm) .offerta .visto .onda path { stroke-dashoffset: 0; }
@media (max-width: 860px) {
  .offerta li { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .offerta .onda { width: 9rem; height: 32px; margin-bottom: 6px; }
}

/* Schema del funnel: quattro fasce che si stringono, con i servizi collegati. */
.imbuto { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 10px; max-width: 1180px; }
.stadio {
  --w: 100%; width: var(--w); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px 40px; align-items: center;
  padding: 28px 7%; position: relative;
  background: linear-gradient(100deg, rgb(1 80 251 / .22), rgb(1 245 253 / .07));
  clip-path: polygon(0 0, 100% 0, calc(100% - 3.2%) 100%, 3.2% 100%);
}
.stadio::before { content: ""; position: absolute; inset: 0; border-top: 1px solid rgb(1 245 253 / .35); pointer-events: none; }
.stadio:nth-child(2) { --w: 92%; }
.stadio:nth-child(3) { --w: 84%; background: linear-gradient(100deg, rgb(1 80 251 / .3), rgb(1 245 253 / .12)); }
.stadio:nth-child(4) { --w: 76%; background: linear-gradient(100deg, rgb(1 80 251 / .38), rgb(1 245 253 / .18)); }
.stadio-testo { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; }
.stadio-testo .num { grid-row: span 2; font-size: .9rem; }
.stadio h3 { font-size: 1.35rem; font-weight: 700; font-stretch: 104%; }
.stadio-testo p { grid-column: 2; color: var(--testo-2); }
.servizi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.servizi a {
  display: flex; flex-direction: column; gap: 1px; min-height: 44px; padding: 9px 16px; border-radius: 14px; text-decoration: none;
  background: rgb(4 6 12 / .55); border: 1px solid var(--riga-forte); transition: border-color .15s ease, background-color .15s ease, transform .16s var(--esce);
}
.servizi b { color: var(--bianco); font-size: .95rem; font-weight: 600; }
.servizi span { color: var(--testo-3); font-size: .82rem; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) { .servizi a:hover { border-color: var(--ciano); background: rgb(4 6 12 / .8); } }
.servizi a:active { transform: scale(.97); }
.comparse:not(.rm) .stadio.entra { transform: translateY(18px) scaleX(.96); }
.comparse:not(.rm) .stadio.entra.visto { transform: none; }
.nota-sezione { max-width: 1180px; margin: 22px auto 0; font: 500 .78rem/1.5 var(--f-dati); letter-spacing: .04em; color: var(--testo-3); text-align: center; }
@media (max-width: 860px) {
  .stadio { grid-template-columns: 1fr; padding: 24px 22px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 10px 100%); }
  .stadio:nth-child(2) { --w: 97%; } .stadio:nth-child(3) { --w: 94%; } .stadio:nth-child(4) { --w: 91%; }
  .nota-sezione { text-align: left; }
}

/* Video di presentazione: dal brief al montaggio. */
.campione { margin: 0 0 56px; max-width: 980px; }
.campione video { width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--notte-3); border: 1px solid var(--riga-forte); }
.campione figcaption { margin-top: 10px; font: 500 .78rem/1.4 var(--f-dati); color: var(--testo-3); }
.montaggio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: passo; }
.passo { position: relative; }
.passo .num { display: block; margin: 20px 0 8px; }
.passo h3 { font-size: 1.25rem; font-weight: 700; font-stretch: 104%; margin-bottom: 8px; }
.vista { position: relative; height: 112px; border-radius: 16px; background: var(--notte-3); border: 1px solid var(--riga); padding: 20px; overflow: hidden; }
.passo:not(:last-child) .vista::after { content: ""; position: absolute; right: -29px; top: 50%; width: 30px; height: 1px; background: linear-gradient(90deg, var(--riga-forte), var(--ciano)); }
.passo:not(:last-child) .vista { overflow: visible; }
.vista i { display: block; height: 7px; border-radius: 4px; background: var(--riga-forte); margin-bottom: 11px; }
.vista-brief i:nth-child(1) { width: 62%; } .vista-brief i:nth-child(2) { width: 48%; } .vista-brief i:nth-child(3) { width: 30%; }
.vista-brief b { position: absolute; right: 20px; bottom: 18px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ciano); box-shadow: inset 0 0 0 7px var(--notte-3), inset 0 0 0 20px var(--blu); }
.vista-testo i:nth-child(1) { width: 88%; } .vista-testo i:nth-child(2) { width: 72%; background: var(--ciano); } .vista-testo i:nth-child(3) { width: 80%; } .vista-testo i:nth-child(4) { width: 44%; }
.vista-voce { display: grid; place-items: center; padding: 14px; }
.vista-voce svg { width: 100%; height: 100%; }
.vista-voce rect { fill: var(--ciano); transform-box: fill-box; transform-origin: center; }
.vista-voce rect:nth-child(3n) { fill: var(--blu-2); }
.comparse:not(.rm) .passo .vista-voce rect { transform: scaleY(.15); transition: transform .7s var(--molla); transition-delay: calc(.3s + var(--i) * 18ms); }
.comparse:not(.rm) .passo.visto .vista-voce rect { transform: none; }
.vista-montaggio { display: flex; align-items: center; gap: 6px; container-type: inline-size; }
.vista-montaggio i { height: 30px; margin: 0; border-radius: 8px; background: var(--blu); flex: 3; }
.vista-montaggio i:nth-child(2) { flex: 2; background: var(--ciano); }
.vista-montaggio i:nth-child(3) { flex: 4; background: var(--riga-forte); }
.vista-montaggio u { position: absolute; top: 14px; bottom: 14px; left: 20px; width: 2px; background: var(--bianco); border-radius: 2px; }
.comparse:not(.rm) .passo.visto .vista-montaggio u { animation: testina 2.2s linear .5s both; }
@keyframes testina { to { transform: translateX(calc(100cqw - 2px)); } }
@media (max-width: 1060px) { .montaggio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; } .passo .vista::after { display: none; } }
@media (max-width: 560px) { .montaggio { grid-template-columns: 1fr; } .vista { height: 96px; } }

.esempi-titolo { margin: clamp(64px, 8vw, 96px) 0 24px; font-size: 1.5rem; font-weight: 700; font-stretch: 104%; }
.esempi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.esempio { position: relative; padding: 24px 24px 22px; border-radius: 18px; background: var(--notte-3); border: 1px solid var(--riga); overflow: hidden; }
.esempio::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: repeating-linear-gradient(90deg, var(--bianco) 0 14px, transparent 14px 26px); opacity: .5; }
.etichetta { display: inline-block; padding: 5px 10px; border-radius: 999px; border: 1px solid rgb(1 245 253 / .45); font: 500 .7rem/1 var(--f-dati); letter-spacing: .1em; text-transform: uppercase; color: var(--ciano); }
.esempio h4 { margin: 18px 0 16px; font-size: 1.25rem; font-weight: 700; font-stretch: 104%; }
.esempio dl { margin: 0; display: grid; gap: 12px; }
.esempio dt { font: 500 .72rem/1.3 var(--f-dati); letter-spacing: .08em; text-transform: uppercase; color: var(--testo-3); }
.esempio dd { margin: 3px 0 0; color: var(--testo); }
@media (max-width: 860px) { .esempi { grid-template-columns: 1fr; } }
.video-fine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--riga); }
.video-fine p { color: var(--testo-2); }

/* Vantaggi */
.vantaggi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 6vw, 96px); }
.vantaggi li { padding: 30px 0 34px; border-top: 1px solid var(--riga-forte); }
.vantaggi h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 700; font-stretch: 104%; line-height: 1.15; margin-bottom: 10px; }
.vantaggi li::before { content: ""; display: block; width: 44px; height: 3px; margin-bottom: 22px; border-radius: 2px; background: linear-gradient(90deg, var(--blu), var(--ciano)); }
@media (max-width: 760px) { .vantaggi { grid-template-columns: 1fr; } }

/* Domande frequenti */
.domande { max-width: 900px; border-top: 1px solid var(--riga-forte); }
.domande details { border-bottom: 1px solid var(--riga-forte); }
.domande summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 18px 0; cursor: pointer; list-style: none;
  color: var(--bianco); font-size: 1.15rem; font-weight: 600; line-height: 1.35;
}
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--riga-forte);
  background: linear-gradient(var(--ciano), var(--ciano)) center / 12px 1.6px no-repeat, linear-gradient(var(--ciano), var(--ciano)) center / 1.6px 12px no-repeat;
  transition: transform .25s var(--esce), border-color .2s ease;
}
.domande details[open] summary::after { transform: rotate(135deg); border-color: var(--ciano); }
@media (hover: hover) and (pointer: fine) { .domande summary:hover::after { border-color: var(--ciano); } }
.domande details p { padding: 0 60px 24px 0; max-width: 46rem; }
.domande details::details-content { height: 0; overflow: clip; transition: height .25s var(--esce), content-visibility .25s allow-discrete; }
.domande details[open]::details-content { height: auto; }
@media (max-width: 560px) { .domande details p { padding-right: 0; } .domande summary { font-size: 1.0625rem; } }

/* Contatti */
.contatto { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px clamp(40px, 7vw, 110px); align-items: start; }
.contatto .testa-sezione { position: sticky; top: calc(var(--testata) + 40px); }
@media (max-width: 960px) { .contatto { grid-template-columns: 1fr; } .contatto .testa-sezione { position: static; margin-bottom: 8px; } }
.modulo { display: grid; gap: 22px; padding: clamp(22px, 3.4vw, 40px); border-radius: 24px; background: var(--notte-3); border: 1px solid var(--riga); }
.campo { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.campo label, .campo legend { color: var(--bianco); font-weight: 600; font-size: .98rem; padding: 0; }
.campo legend { margin-bottom: 10px; }
.facoltativo { color: var(--testo-3); font-weight: 400; }
.aiuto { font-size: .9rem; color: var(--testo-3); margin-top: -4px; }
.campo input:not([type=radio]):not([type=checkbox]), .campo textarea {
  width: 100%; min-height: 50px; padding: 13px 16px; border-radius: 12px; font-size: 1rem;
  background: var(--notte-2); border: 1px solid var(--bordo-campo); color: var(--bianco);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--ciano); box-shadow: 0 0 0 3px rgb(1 245 253 / .22); }
.campi-due { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 600px) { .campi-due { grid-template-columns: 1fr; } }
.gettoni { display: flex; flex-wrap: wrap; gap: 8px; }
.gettoni label { position: relative; }
.gettoni input { position: absolute; z-index: 1; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gettoni span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bordo-campo); color: var(--testo); font-weight: 500; font-size: .95rem; line-height: 1.25;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s var(--esce);
}
.gettoni input:checked + span { background: var(--blu); border-color: var(--blu); color: var(--bianco); }
.gettoni input:focus-visible + span { outline: 2px solid var(--ciano); outline-offset: 3px; }
.gettoni label:active span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .gettoni input:not(:checked):hover + span { border-color: var(--ciano); } }
.spunta { display: flex; gap: 12px; align-items: flex-start; font-weight: 400 !important; }
.spunta input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--blu); flex: none; }
.errore { color: var(--errore); font-size: .92rem; font-weight: 500; }
.sbagliato input:not([type=radio]):not([type=checkbox]), .sbagliato textarea { border-color: var(--errore); }
.sbagliato .gettoni span { border-color: rgb(255 138 154 / .6); }
.riepilogo { padding: 14px 16px; border-radius: 12px; background: rgb(255 138 154 / .1); border: 1px solid rgb(255 138 154 / .45); color: var(--bianco); font-weight: 500; }
.invio-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.nota-modulo { flex: 1 1 16rem; font-size: .88rem; color: var(--testo-3); }
.invia[aria-busy="true"] { opacity: .75; cursor: progress; }
.stato { display: grid; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--riga-forte); background: var(--notte-2); }
.stato:not([data-esito]) { padding: 0; border: 0; background: none; }
.stato[data-esito="scollegato"] { border-color: rgb(1 245 253 / .4); }
.stato[data-esito="errore"] { border-color: rgb(255 138 154 / .55); }
.stato[data-esito="ok"] { border-color: var(--ciano); }
.stato-testo { color: var(--bianco); }
.stato-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.stato-azioni[hidden] { display: none; }
.modulo.ricevuto { animation: ricevuto .9s var(--esce); }
@keyframes ricevuto { 30% { box-shadow: 0 0 0 4px rgb(1 245 253 / .35); } }

/* Piè di pagina */
.piede { background: var(--notte-2); border-top: 1px solid var(--riga); padding: 64px var(--pad) calc(28px + env(safe-area-inset-bottom)); }
.piede-alto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-bottom: 40px; border-bottom: 1px solid var(--riga); }
.piede-alto .marchio { margin: 0; }
.piede-alto .marchio img { height: 28px; }
.piede-colonne { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; padding: 40px 0; }
.piede h2 { font: 500 .74rem/1.2 var(--f-dati); letter-spacing: .12em; text-transform: uppercase; color: var(--testo-3); margin-bottom: 16px; }
.piede-colonne a { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--testo-2); }
@media (hover: hover) and (pointer: fine) { .piede-colonne a:hover { color: var(--bianco); } }
.famiglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.piede-basso { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid var(--riga); font-size: .9rem; color: var(--testo-3); }
.piede-basso a { color: var(--testo-2); }
@media (max-width: 860px) { .piede-colonne { grid-template-columns: 1fr 1fr; } .piede-colonne > nav:first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .famiglia { grid-template-columns: 1fr 1fr; } }

/* Avviso lingua */
.avviso-lingua {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60; translate: -50% 0;
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 10px 20px;
  border-radius: 999px; background: var(--bianco); color: var(--notte); box-shadow: 0 18px 40px -12px rgb(0 0 0 / .6);
  font-size: .95rem; animation: appare .5s var(--esce) both;
}
.avviso-lingua :focus-visible { outline-color: var(--blu); }
.avviso-lingua a { font-weight: 600; color: var(--blu); white-space: nowrap; }
.avviso-lingua button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #E7ECF4; color: var(--notte); cursor: pointer; flex: none; }
@media (max-width: 560px) { .avviso-lingua { border-radius: 18px; flex-wrap: wrap; row-gap: 4px; } }

/* Movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}