/* Vetrina Marcello Paruano — home "Innovazione" (02/10/2026)
   Nero, un solo accento verde (dal 07/10/2026, colore del logo Bespoke Lab), scritta gigante che scorre, cornice fissa. */

:root {
  --nero: #050505;
  --carbone: #0e0e0f;
  --bianco: #f4f2ee;
  --grigio: #8d8b88;
  --linea: rgba(244, 242, 238, .13);
  --verde: #19c37d;
  --verde-fondo: #06502f;
  --bordo: clamp(1.25rem, 3vw, 3rem);
  --titoli: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --corsivo: 'Instrument Serif', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--nero); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--titoli); font-size: 1rem; line-height: 1.5; color: var(--bianco);
  background: var(--nero); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-family: var(--corsivo); font-style: italic; font-weight: 400; color: var(--verde); letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; }
::selection { background: var(--verde); color: #fff; }

.etichetta { font-family: var(--mono); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 400; }

/* sfumatura fissa in basso, solo su computer, per il nastro dei servizi. In alto niente:
   lo schermo resta tutto libero e sopra la pagina galleggia solo il logo (richiesta di Marcello) */
body::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 7.5rem; z-index: 40; pointer-events: none;
  background: linear-gradient(to top, rgba(5, 5, 5, .95) 25%, transparent);
}

.grana {
  position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────── SIPARIO ───────── */
.sipario { display: none; }
.js .sipario {
  position: fixed; inset: 0; z-index: 100; background: var(--nero); display: flex;
  align-items: flex-end; justify-content: space-between; padding: var(--bordo);
}
/* al centro il logo </> che si apre in <Bespoke Lab />; in basso a sinistra un terminale che "lavora" */
.sipario-logo { position: absolute; left: 50%; top: 44%; width: min(84vw, 36rem); transform: translate(-50%, -50%); }
.sipario-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo-centro .tutto { transform: translateX(155px) !important; }
.logo-centro.aperto .tutto { transform: translateX(0) !important; }
.sipario-parola { display: block; margin-top: .9rem; font-family: var(--corsivo); font-style: italic; font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1; color: var(--verde); }
.sipario-terminale { font-family: var(--mono); font-size: clamp(.68rem, 1.3vw, .9rem); line-height: 1.75; color: var(--grigio); }
.sipario-terminale p { white-space: pre; }
.sipario-terminale b { color: var(--verde); font-weight: 500; }
.sipario-terminale i { font-style: normal; opacity: .45; }
.sipario-terminale .ok { color: var(--verde); }
.sipario-cursore { display: inline-block; width: .55em; height: 1.05em; margin-left: .35em; vertical-align: -.18em; background: var(--verde); animation: lampeggia 1s steps(1) infinite; }
@keyframes lampeggia { 50% { opacity: 0; } }
.sipario-numero { font-size: clamp(4rem, 16vw, 13rem); font-weight: 300; font-stretch: 75%; line-height: .8; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* ───────── CORNICE FISSA ───────── */
.hud { position: fixed; z-index: 50; }
.hud-firma {
  top: .55rem; left: calc(var(--bordo) - .45rem); display: block; pointer-events: none;
  transition: left .7s cubic-bezier(.7, 0, .2, 1), transform .7s cubic-bezier(.7, 0, .2, 1);
}
/* appena si scorre il logo va al centro da solo, chiuso (solo </>) e semitrasparente.
   Mentre la pagina scorre si accende di verde con un alone: --forza (0-1) arriva da vetrina.js */
.scorre .hud-firma { left: 50%; transform: translateX(-50%); }

/* ── logo Bespoke Lab: chiuso </>, aperto <Bespoke Lab /> (classe .aperto messa da vetrina.js) ── */
.hud-logo { display: block; height: 3.8rem; width: auto; overflow: visible; will-change: filter, opacity; transition: opacity .4s; }
.logo-bl .bersaglio { pointer-events: all; cursor: pointer; }
.logo-bl .bersaglio-aperto { pointer-events: none; }
.logo-bl.aperto .bersaglio-aperto { pointer-events: all; }
.logo-bl .tutto { transform: translateX(0); }
.scorre .logo-bl .tutto { transform: translateX(155px); }
.scorre .logo-bl.aperto .tutto { transform: translateX(0); }
.logo-bl .tutto, .logo-bl .muove { transition: transform .8s cubic-bezier(.7, 0, .2, 1) .25s; }
.logo-bl.aperto .tutto, .logo-bl.aperto .muove { transition-delay: 0s; }
.logo-bl.aperto .muove { transform: translateX(var(--sposta, 310px)); }
.logo-bl .appare { opacity: 0; transform: translateX(-24px); transition: opacity .3s, transform .3s; }
.logo-bl .sottotitolo { transform: none; }
.logo-bl.aperto .appare { opacity: 1; transform: none; transition: opacity .5s .5s, transform .6s .45s cubic-bezier(.2, .7, .2, 1); }
.logo-bl .ago { transform-box: fill-box; transform-origin: 50% 50%; }
.hud-firma:hover .logo-bl.aperto .ago { animation: cuci .7s cubic-bezier(.5, 0, .3, 1) 1s; }
@keyframes cuci { 40% { transform: translate(-3px, 12px); } 75% { transform: translate(1px, -3px); } }
.scorre .hud-logo:not(.aperto) {
  opacity: calc(.5 + var(--forza, 0) * .5);
  filter:
    brightness(calc(1 + var(--forza, 0) * .45))
    drop-shadow(0 0 calc(2px + var(--forza, 0) * 8px) rgba(60, 255, 165, calc(.25 + var(--forza, 0) * .6)))
    drop-shadow(0 0 calc(8px + var(--forza, 0) * 34px) rgba(25, 195, 125, calc(.15 + var(--forza, 0) * .7)));
}

.hud-menu { top: 1.35rem; right: var(--bordo); display: flex; gap: clamp(2rem, 5vw, 5rem); transition: opacity .35s, transform .35s; }
.hud-menu a { display: block; font-size: .82rem; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; line-height: 1.45; position: relative; width: max-content; }
.hud-menu a::after { content: ''; position: absolute; left: 0; bottom: 1px; width: 100%; height: 1px; background: var(--verde); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.hud-menu a:hover::after { transform: scaleX(1); }
.hud-menu ul + ul a { color: var(--grigio); }
.hud-menu ul + ul a:hover { color: var(--bianco); }
.scende .hud-menu { opacity: 0; transform: translateY(-.8rem); pointer-events: none; }
.hud-apri { display: none; }

.hud-badge {
  right: var(--bordo); bottom: 5rem; border: 1px solid rgba(244, 242, 238, .55); padding: .5rem .85rem .55rem;
  background: rgba(5, 5, 5, .7); display: grid; gap: .1rem; transition: background .3s, border-color .3s, opacity .4s;
}
.hud-badge.via { opacity: 0; pointer-events: none; }
.hud-badge:hover { background: var(--verde); border-color: var(--verde); color: var(--nero); }
.hud-badge-stato { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: .4rem; }
.hud-badge-stato i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); animation: battito 1.8s ease-in-out infinite; }
.hud-badge:hover .hud-badge-stato i { background: var(--nero); }
.hud-badge-azione { font-size: .92rem; font-weight: 600; letter-spacing: -.01em; }
@keyframes battito { 50% { opacity: .25; transform: scale(.7); } }

.hud-nastro {
  left: 0; right: 0; bottom: 1.5rem; display: flex; align-items: center; justify-content: space-around;
  padding: 0 var(--bordo); pointer-events: none;
}
.hud-nastro a { pointer-events: auto; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .01em; transition: color .3s; }
.hud-nastro a:hover, .hud-nastro a.qui { color: var(--verde); }
.piu { position: relative; width: 17px; height: 17px; }
.piu::before, .piu::after { content: ''; position: absolute; background: var(--bianco); }
.piu::before { left: 0; right: 0; top: 8px; height: 1px; }
.piu::after { top: 0; bottom: 0; left: 8px; width: 1px; }

/* ───────── TELEFONO ───────── */
.telefono {
  position: relative; width: min(290px, 62vw); aspect-ratio: 390 / 844; padding: 8px; border-radius: 46px;
  background: linear-gradient(145deg, #4a4a4d, #0c0c0d 28%, #161617 70%, #55555a);
  box-shadow: 0 0 0 1px #000, 0 50px 90px -40px #000; will-change: transform;
}
.telefono-vetro { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: #000; container-type: size; }
.telefono-vetro::after {
  content: ''; position: absolute; top: 1.5%; left: 50%; width: 27%; height: 3.1%; transform: translateX(-50%);
  background: #000; border-radius: 99px; z-index: 3;
}
.telefono-vetro img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.telefono-vetro.scorre img { height: auto; animation: pagina 30s ease-in-out infinite alternate; animation-play-state: paused; }
.in-vista .telefono-vetro.scorre img { animation-play-state: running; }
@keyframes pagina { 0%, 7% { transform: translateY(0); } 93%, 100% { transform: translateY(calc(-100% + 100cqh)); } }
.telefono-alone {
  position: absolute; width: min(620px, 120vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(25, 195, 125, .3), rgba(6, 80, 47, .12) 55%, transparent);
}

/* ───────── APERTURA ───────── */
.apertura { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.apertura-luce {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(110% 85% at 88% 0%, #0f9a5f 0%, #064a2c 30%, rgba(2, 38, 22, .55) 52%, transparent 72%),
    radial-gradient(60% 50% at 0% 100%, rgba(6, 80, 47, .25), transparent 70%);
}
.scorri { position: absolute; left: 0; top: 50%; translate: 0 -50%; z-index: -1; width: 100%; pointer-events: none; }
.scorri-riga { display: flex; width: max-content; animation: scorri 46s linear infinite; }
.scorri-riga span {
  font-size: clamp(6.5rem, 19vw, 21rem); font-weight: 500; line-height: 1; letter-spacing: -.045em;
  text-transform: uppercase; white-space: nowrap; padding-right: .3em;
}
.scorri-riga span::after { content: '—'; padding-left: .3em; color: var(--verde); }
@keyframes scorri { to { transform: translateX(-50%); } }

.apertura-centro { position: relative; display: grid; place-items: center; perspective: 1400px; padding-top: 1.5rem; }
.apertura-centro .telefono-alone { top: 50%; left: 50%; translate: -50% -50%; }
.telefono-eroe { width: auto; height: min(66svh, 620px); }
#giostra img { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .9s ease, transform 1.4s ease; }
#giostra img.attivo { opacity: 1; transform: none; }
.apertura-didascalia { margin-top: 1.1rem; display: flex; gap: .7rem; align-items: baseline; color: var(--grigio); font-size: .64rem; white-space: nowrap; }
.apertura-didascalia b { color: var(--bianco); font-weight: 500; }
.apertura-didascalia i { font-style: normal; color: var(--verde); }

.apertura-testo { display: contents; }
.apertura-testo h1 { position: absolute; left: var(--bordo); top: 13svh; width: min(27vw, 25rem); font-size: clamp(1.45rem, 2.05vw, 2.15rem); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.apertura-testo h1 em { color: var(--bianco); }
.apertura-testo p { position: absolute; left: var(--bordo); bottom: 23svh; width: min(23vw, 20rem); font-size: .95rem; line-height: 1.45; color: rgba(244, 242, 238, .78); }
.apertura-ruoli { position: absolute; right: var(--bordo); bottom: 23svh; text-align: right; font-size: .85rem; font-family: var(--titoli); font-weight: 500; letter-spacing: .01em; line-height: 1.4; }
.apertura-giu { position: absolute; left: var(--bordo); bottom: 8.4rem; color: var(--grigio); display: flex; align-items: center; gap: .6rem; }
.apertura-giu::after { content: ''; width: 1px; height: 2.2rem; background: linear-gradient(var(--verde), transparent); animation: giu 2s ease-in-out infinite; transform-origin: top; }
@keyframes giu { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }

/* ───────── SEZIONI ───────── */
main { overflow-x: clip; }
main > section:not(.apertura) { position: relative; padding: clamp(6rem, 15vh, 11rem) var(--bordo); }
.sezione-etichetta { color: var(--grigio); display: flex; align-items: center; gap: .7rem; margin-bottom: clamp(1.6rem, 4vh, 3rem); }
.sezione-etichetta::before { content: ''; width: 7px; height: 7px; background: var(--verde); }
.sezione-testa { margin-bottom: clamp(3rem, 9vh, 7rem); max-width: 68rem; }
.sezione-testa h2 { font-size: clamp(2.3rem, 6vw, 5.8rem); font-weight: 500; line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.sezione-nota { margin-top: 1.6rem; color: var(--grigio); max-width: 30rem; font-size: .95rem; }
.parola { display: inline-block; }

/* manifesto */
.manifesto-testo {
  font-size: clamp(1.75rem, 4.3vw, 4rem); font-weight: 400; line-height: 1.08; letter-spacing: -.035em;
  max-width: 21em; margin-left: auto; text-wrap: pretty;
}
.js:not(.fermo) [data-accendi] .parola { opacity: .13; }   /* si accendono scorrendo: vedi vetrina.js */
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 3rem); margin-top: clamp(4rem, 12vh, 9rem); }
.numero { border-top: 1px solid var(--linea); padding-top: 1.2rem; }
.numero b { display: block; font-size: clamp(5rem, 13vw, 12rem); font-weight: 300; font-stretch: 75%; line-height: .85; letter-spacing: -.05em; }
.numero b::after { content: '+'; font-size: .35em; vertical-align: top; color: var(--verde); margin-left: .08em; font-weight: 400; }
.numero:last-child b::after { content: ''; }
.numero p { margin-top: 1.1rem; color: var(--grigio); font-size: .95rem; line-height: 1.4; }

/* assistenza: banda che un raggio verde "scansiona" da sinistra a destra, con le scritte che si decifrano */
.assistenza { position: relative; margin-top: clamp(2.5rem, 7vh, 5rem); padding: clamp(1.3rem, 3.5vh, 2.4rem) 0 clamp(3.4rem, 8vh, 5rem); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); overflow: hidden; }
.assistenza-raggio { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -5px; background: var(--verde); box-shadow: 0 0 18px 4px rgba(25, 195, 125, .75), 0 0 60px 14px rgba(25, 195, 125, .35); opacity: 0; z-index: 2; }
.assistenza-stato { display: flex; align-items: center; gap: .6rem; color: var(--grigio); margin-bottom: clamp(.8rem, 2vh, 1.4rem); }
.assistenza-stato i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgba(25, 195, 125, .6); animation: sonar 1.8s ease-out infinite; }
@keyframes sonar { to { box-shadow: 0 0 0 14px rgba(25, 195, 125, 0); } }
.assistenza-titolo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .05em .42em; font-size: clamp(2.7rem, 9.4vw, 9.6rem); font-weight: 500; line-height: .92; letter-spacing: -.05em; }
.assistenza-titolo b { font-weight: 300; font-stretch: 75%; letter-spacing: -.03em; }
.assistenza-titolo em { letter-spacing: -.02em; }
.assistenza-battito { position: absolute; left: 0; right: 0; bottom: .7rem; width: 100%; height: clamp(1.8rem, 5vh, 2.8rem); fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.assistenza-battito path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.assistenza-battito .base { stroke: rgba(244, 242, 238, .16); }
.assistenza-battito .impulso { stroke: var(--verde); stroke-width: 2; stroke-dasharray: .16 .84; animation: impulso-linea 2.8s linear infinite; }
@keyframes impulso-linea { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* elenco con il "più" */
.elenco li { position: relative; padding: .78rem 0 .78rem 1.9rem; border-top: 1px solid var(--linea); font-size: 1rem; line-height: 1.35; }
.elenco li:last-child { border-bottom: 1px solid var(--linea); }
.elenco li::before { content: '+'; position: absolute; left: 0; top: .72rem; font-family: var(--mono); color: var(--verde); }

/* servizi */
.servizio {
  display: grid; grid-template-columns: 5rem minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 5rem);
  grid-template-areas: 'indice titolo corpo' 'indice figura corpo'; align-items: start;
  border-top: 1px solid var(--linea); padding: clamp(2.5rem, 7vh, 5rem) 0;
}
.servizio-indice { grid-area: indice; color: var(--verde); padding-top: 1rem; }
.servizio-titolo { grid-area: titolo; }
.servizio-titolo h3 { font-size: clamp(2.8rem, 7.4vw, 7.6rem); font-weight: 500; line-height: .92; letter-spacing: -.05em; }
.servizio-frase { font-family: var(--corsivo); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.15; color: var(--verde); margin-top: 1rem; }
.servizio-corpo { grid-area: corpo; padding-top: .8rem; }
.servizio-corpo > p { font-size: 1.12rem; line-height: 1.45; margin-bottom: 1.8rem; color: rgba(244, 242, 238, .85); max-width: 30rem; }
.servizio-figura { grid-area: figura; margin-top: clamp(2rem, 5vh, 3.5rem); align-self: end; }

.fig-flusso { display: flex; align-items: center; flex-wrap: nowrap; max-width: 34rem; }
.fig-flusso span { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--linea); padding: .5rem .7rem; white-space: nowrap; animation: nodo 6s infinite; }
.fig-flusso span:nth-of-type(2) { animation-delay: 1.5s; }
.fig-flusso span:nth-of-type(3) { animation-delay: 3s; }
.fig-flusso span:nth-of-type(4) { animation-delay: 4.5s; }
.fig-flusso i { flex: 1; min-width: .8rem; height: 1px; background: var(--linea); position: relative; overflow: hidden; }
.fig-flusso i::after { content: ''; position: absolute; inset: 0; background: var(--verde); transform: translateX(-100%); animation: impulso 6s infinite; }
.fig-flusso i:nth-of-type(2)::after { animation-delay: 1.5s; }
.fig-flusso i:nth-of-type(3)::after { animation-delay: 3s; }
@keyframes impulso { 0% { transform: translateX(-100%); } 25%, 100% { transform: translateX(100%); } }
@keyframes nodo { 0%, 20% { border-color: var(--verde); color: #fff; background: rgba(25, 195, 125, .18); } 30%, 100% { border-color: var(--linea); background: transparent; } }

.fig-app { display: grid; grid-template-columns: repeat(4, 3.6rem); gap: .9rem; }
.fig-app b { aspect-ratio: 1; border-radius: 26%; border: 1px solid var(--linea); background: rgba(244, 242, 238, .04); }
.fig-app b.tua { background: var(--verde); border-color: var(--verde); display: grid; place-items: center; font-family: var(--mono); font-size: .56rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--nero); animation: icona 3.2s ease-in-out infinite; }
@keyframes icona { 50% { transform: scale(1.09); box-shadow: 0 0 0 10px rgba(25, 195, 125, .14); } }

.fig-sito { width: min(22rem, 100%); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.fig-sito-barra { display: flex; align-items: center; gap: .35rem; padding: .55rem .7rem; border-bottom: 1px solid var(--linea); }
.fig-sito-barra i { width: 7px; height: 7px; border-radius: 50%; background: rgba(244, 242, 238, .25); }
.fig-sito-barra span { margin-left: .6rem; font-family: var(--mono); font-size: .62rem; color: var(--grigio); }
.fig-sito-corpo { padding: 1.1rem; display: grid; gap: .55rem; }
.fig-sito-corpo b { height: 1.4rem; width: 70%; background: rgba(244, 242, 238, .85); }
.fig-sito-corpo u { height: .45rem; width: 92%; background: rgba(244, 242, 238, .16); }
.fig-sito-corpo u + u { width: 60%; }
.fig-sito-corpo s { margin-top: .5rem; justify-self: start; text-decoration: none; background: var(--verde); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; padding: .45rem .9rem; color: var(--nero); animation: icona 3.2s ease-in-out infinite; }

/* lavori */
.lavoro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center;
  border-top: 1px solid var(--linea); padding: clamp(4rem, 11vh, 8rem) 0;
}
.lavoro:nth-of-type(even) .lavoro-schermo { order: 2; }
.lavoro-schermo { position: relative; display: grid; place-items: center; perspective: 1400px; min-height: min(640px, 150vw); }
.lavoro-schermo .telefono-alone { top: 50%; left: 50%; translate: -50% -50%; }
.lavoro-schermo.doppio .telefono { width: min(250px, 50vw); translate: -30% -3%; }
.lavoro-schermo.doppio .telefono.secondo { position: absolute; top: 50%; left: 50%; translate: 12% -40%; width: min(215px, 43vw); }
.lavoro-avviso { margin-top: 1.4rem; max-width: 22rem; text-align: center; font-size: .78rem; line-height: 1.4; color: var(--grigio); position: relative; }
.lavoro-indice { color: var(--grigio); margin-bottom: 1.2rem; }
.lavoro-testo h3 { font-size: clamp(2.8rem, 6.6vw, 6.6rem); font-weight: 500; line-height: .92; letter-spacing: -.05em; }
.lavoro-attivita { font-family: var(--corsivo); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.15; color: var(--verde); margin-top: .7rem; }
.lavoro-frase { margin: 1.6rem 0 1.8rem; font-size: 1.12rem; line-height: 1.45; color: rgba(244, 242, 238, .85); max-width: 32rem; }
.lavoro-testo .elenco { max-width: 36rem; }
.lavoro-piede { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-top: 2rem; }
.stato { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); display: flex; align-items: center; gap: .5rem; margin-right: auto; }
.stato::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--bianco); }
.stato.attesa::before { background: transparent; border: 1px solid var(--bianco); }

.bottone {
  position: relative; display: inline-flex; align-items: center; gap: .7rem; padding: .85rem 1.3rem; overflow: hidden;
  background: var(--bianco); color: var(--nero); font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; isolation: isolate; transition: color .35s;
}
.bottone::before { content: ''; position: absolute; inset: 0; background: var(--verde); transform: translateY(101%); transition: transform .4s cubic-bezier(.7, 0, .2, 1); z-index: -1; }
.bottone::after { content: '↗'; font-size: .95rem; line-height: 1; transition: transform .35s; }
.bottone[href^="/"]::after, .bottone[href^="tel"]::after { content: '→'; }
.bottone:hover { color: var(--nero); }
.bottone:hover::before { transform: none; }
.bottone:hover::after { transform: translate(2px, -2px); }
.bottone.chiaro { background: transparent; color: var(--bianco); box-shadow: inset 0 0 0 1px rgba(244, 242, 238, .5); }
.bottone.grande { padding: 1.15rem 1.8rem; font-size: .82rem; }

/* schermo simulato Academy (misure in cqw: scalano con il telefono) */
.sim { height: 100%; background: linear-gradient(180deg, #0c3a70, #06182f 62%); color: #fff; padding: 15cqw 6cqw 5cqw; display: flex; flex-direction: column; gap: 3.2cqw; font-family: var(--titoli); }
.sim img { height: auto; }
.sim-testa { display: flex; align-items: center; gap: 3cqw; }
.sim-testa img { width: 13cqw; }
.sim-testa b { display: block; font-size: 4.6cqw; line-height: 1.1; font-weight: 700; }
.sim-testa span { font-size: 3cqw; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.sim-card { position: relative; width: 62cqw; margin: 0 auto; }
.sim-voto { position: absolute; top: 13%; left: 17%; font-size: 15cqw; font-weight: 800; line-height: 1; color: #3b2a04; font-stretch: 75%; }
.sim-ruolo { position: absolute; top: 31%; left: 18.5%; font-style: normal; font-size: 4.2cqw; font-weight: 700; color: #3b2a04; }
.sim-nome { position: absolute; top: 61%; left: 0; right: 0; text-align: center; font-size: 6cqw; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.sim-stat { position: absolute; top: 73%; left: 9%; right: 9%; display: flex; justify-content: space-between; }
.sim-stat u { text-decoration: none; font-size: 4cqw; font-weight: 700; text-align: center; line-height: 1.1; }
.sim-stat small { display: block; font-size: 2.1cqw; font-weight: 500; opacity: .7; }
.sim-riga { text-align: center; font-size: 3.5cqw; opacity: .9; }
.sim-riga b { color: #f4cf6b; }
.sim-collezione { margin-top: auto; display: flex; align-items: center; gap: 2.5cqw; background: rgba(255, 255, 255, .08); border-radius: 4cqw; padding: 3cqw; }
.sim-collezione img { width: 12cqw; }
.sim-collezione p { font-size: 3.8cqw; font-weight: 700; line-height: 1.2; margin-left: 1cqw; }
.sim-collezione span { display: block; font-size: 2.9cqw; font-weight: 400; opacity: .7; }

/* schermo simulato MP San Giorgio */
.sim-sg { background: linear-gradient(180deg, #6e1624, #1a0508 72%); }
.sg-titolo { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2cqw; font-size: 5.6cqw; font-weight: 700; }
.sg-titolo span { font-size: 2.8cqw; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #7fd3ff; }
.sg-classifica { display: grid; gap: 1.7cqw; }
.sg-classifica li { display: grid; grid-template-columns: 5cqw 1fr auto; align-items: center; gap: 2.5cqw; padding: 2.7cqw 3.2cqw; border-radius: 3cqw; background: rgba(255, 255, 255, .07); font-size: 3.6cqw; line-height: 1.2; }
.sg-classifica i { font-style: normal; font-weight: 700; text-align: center; opacity: .6; }
.sg-classifica b { font-weight: 600; }
.sg-classifica u { text-decoration: none; font-weight: 800; }
.sg-classifica .noi { background: #3fb0e6; color: #1a0508; }
.sg-classifica .noi i { opacity: 1; }
.sg-avviso { margin-top: auto; padding: 3cqw 3.4cqw; border-radius: 3cqw; border-left: .9cqw solid #3fb0e6; background: rgba(255, 255, 255, .08); font-size: 3.2cqw; line-height: 1.3; }
.sg-avviso b { display: block; font-size: 3.7cqw; }
.sg-avviso span { opacity: .75; }

/* pagine dedicate */
.dedicate-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.dedicata { position: relative; background: var(--nero); padding: clamp(1.5rem, 3vw, 2.6rem); min-height: 21rem; display: flex; flex-direction: column; isolation: isolate; overflow: hidden; }
.dedicata::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, #0f9a5f, var(--verde-fondo)); transform: translateY(101%); transition: transform .55s cubic-bezier(.7, 0, .2, 1); z-index: -1; }
.dedicata:hover::before { transform: none; }
.dedicata .etichetta { color: var(--verde); transition: color .3s; }
.dedicata:hover .etichetta { color: #fff; }
.dedicata h3 { font-size: clamp(1.7rem, 3vw, 2.7rem); font-weight: 500; line-height: 1; letter-spacing: -.04em; margin-top: auto; }
.dedicata p { margin-top: .9rem; color: rgba(244, 242, 238, .72); max-width: 24rem; }
.dedicata b { margin-top: 1.6rem; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.dedicata b::after { content: ' →'; }

/* metodo */
.passi { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.5vw, 2.5rem); counter-reset: passo; }
.passi li { border-top: 1px solid var(--bianco); padding-top: 1.2rem; }
.passi .etichetta { color: var(--verde); }
.passi h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; margin: clamp(2.5rem, 9vh, 6rem) 0 .9rem; }
.passi p { color: rgba(244, 242, 238, .72); font-size: .98rem; line-height: 1.45; }

/* contatti */
.contatti { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; padding-bottom: 11rem !important; }
.contatti-fascio {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 7% 75% at 50% 100%, rgba(70, 255, 170, .95), transparent 72%),
    radial-gradient(ellipse 34% 85% at 50% 100%, rgba(6, 80, 47, .6), transparent 72%);
}
.contatti-titolo { font-size: clamp(4rem, 26vw, 34rem); font-weight: 600; font-stretch: 75%; line-height: .82; letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; margin-left: -.03em; }
.contatti-titolo span { display: inline-block; }
.contatti-titolo em { font-size: 1em; }
.contatti-testo { margin-top: clamp(1.6rem, 4vh, 2.6rem); font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.3; max-width: 34rem; letter-spacing: -.015em; }
.contatti-azioni { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.contatti-nota { margin-top: 1.6rem; color: var(--grigio); }
.contatti-sede { position: relative; z-index: 1; display: inline-flex; flex-direction: column; gap: .35rem; margin-top: 2rem; padding-left: 1rem; border-left: 2px solid var(--verde); font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; letter-spacing: -.01em; transition: color .3s; }
.contatti-sede .etichetta { color: var(--verde); }
.contatti-sede:hover { color: var(--verde); }

.piede { position: relative; z-index: 46; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; padding: 1.4rem var(--bordo) 6.5rem; border-top: 1px solid var(--linea); font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); background: var(--nero); }
.piede a:hover { color: var(--bianco); }

/* puntatore */
.puntatore { position: fixed; top: 0; left: 0; z-index: 99; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--verde); pointer-events: none; opacity: 0; transition: width .25s, height .25s, margin .25s, background .25s, opacity .3s; mix-blend-mode: difference; }
.puntatore.vivo { opacity: 1; }
.puntatore.sopra { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: var(--bianco); }

/* ───────── TELEFONI E TABLET ───────── */
@media (max-width: 900px) {
  body::after { display: none; }
  .hud-firma { top: calc(.5rem + env(safe-area-inset-top)); }
  .hud-logo { height: 3.1rem; }
  .hud-nastro, .apertura-ruoli, .apertura-giu, .puntatore { display: none; }
  .hud-badge { bottom: calc(1rem + env(safe-area-inset-bottom)); background: var(--nero); }   /* con "Disponibile", come su computer */

  .scende .hud-apri { opacity: 0; pointer-events: none; }   /* scendendo resta solo il logo; risalendo il menu torna */
  .menu-aperto .hud-apri { opacity: 1; pointer-events: auto; }
  .scorre .hud-apri { transition: opacity .3s; }
  .hud-apri { display: block; top: calc(.65rem + env(safe-area-inset-top)); right: var(--bordo); z-index: 60; font-family: var(--mono); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; border: 1px solid rgba(244, 242, 238, .55); padding: .55rem .8rem; background: rgba(5, 5, 5, .7); }
  .hud-menu { inset: 0; z-index: 55; background: var(--nero); flex-direction: column; justify-content: center; gap: 2.2rem; padding: 5rem var(--bordo) 2rem; opacity: 0; visibility: hidden; transform: none; transition: opacity .3s, visibility .3s; }
  .scende .hud-menu { transform: none; }
  .menu-aperto .hud-menu { opacity: 1; visibility: visible; pointer-events: auto; }
  .menu-aperto { overflow: hidden; }
  .hud-menu a { font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.12; text-transform: none; }
  .hud-menu ul + ul { border-top: 1px solid var(--linea); padding-top: 1.6rem; }
  .hud-menu ul + ul a { font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.7; }

  .apertura { display: flex; flex-direction: column; align-items: center; padding: 5.6rem var(--bordo) 6.5rem; min-height: 0; }
  .telefono-eroe { height: auto; width: 54vw; max-width: 250px; }
  .apertura-centro { padding-top: 0; }
  .scorri { top: calc(5.6rem + 58vw); }
  .scorri-riga span { font-size: 30vw; }
  .apertura-testo { display: block; margin-top: 2rem; }
  .apertura-testo h1 { position: static; width: auto; font-size: clamp(1.7rem, 7.4vw, 2.4rem); }
  .apertura-testo p { position: static; width: auto; margin-top: 1.1rem; font-size: 1rem; }

  .manifesto-testo { margin-left: 0; }
  .numeri { grid-template-columns: 1fr; gap: 2.2rem; }
  .numero { display: grid; grid-template-columns: 6.5rem 1fr; align-items: end; gap: 1rem; }
  .numero b { font-size: 6rem; }
  .numero p { margin: 0 0 .5rem; }

  .servizio { grid-template-columns: 1fr; grid-template-areas: 'indice' 'titolo' 'corpo' 'figura'; }
  .servizio-indice { padding: 0 0 1rem; }
  .servizio-corpo { padding-top: 1.6rem; }
  .servizio-figura { margin-top: 2.2rem; }
  .fig-app { grid-template-columns: repeat(4, 3.2rem); }

  .lavoro { grid-template-columns: 1fr; gap: 2.5rem; }
  .lavoro:nth-of-type(even) .lavoro-schermo { order: 0; }
  .lavoro-schermo { min-height: 0; padding: 1rem 0; }
  .telefono-alone { width: 96vw; }
  .lavoro-schermo .telefono { width: min(250px, 62vw); }
  .lavoro-schermo.doppio { min-height: 118vw; }
  .lavoro-schermo.doppio .telefono { width: 46vw; translate: -32% 0; }
  .lavoro-schermo.doppio .telefono.secondo { width: 40vw; translate: 4% -42%; }
  .stato { flex-basis: 100%; }

  .dedicate-griglia { grid-template-columns: 1fr; }
  .dedicata { min-height: 15rem; }
  .passi { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .passi h3 { margin-top: 2rem; }
  .contatti { padding-bottom: 8rem !important; }
  .contatti-azioni .bottone { width: 100%; justify-content: space-between; }
  .piede { padding-bottom: 6rem; }
}
@media (max-width: 520px) {
  .passi { grid-template-columns: 1fr; }
  .fig-flusso span { font-size: .56rem; padding: .45rem .45rem; letter-spacing: .02em; }
}

/* ───────── MENO MOVIMENTO ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scorri-riga, .assistenza-stato i, .assistenza-battito .impulso, .fig-flusso span, .fig-flusso i::after, .fig-app b.tua, .fig-sito-corpo s, .hud-badge-stato i, .apertura-giu::after, .telefono-vetro.scorre img { animation: none; }
  #giostra img { transition: none; }
  .logo-bl *, .hud-firma { transition: none !important; animation: none !important; }
}