/* Nuova versione (skill 10K Websites): un solo file di stile.
   Tela: il blu notte del film. Accento: il blu del brand, in dosi rare.
   Tutto quello che si muove usa solo transform e opacity. */

:root {
  --canvas: #070B17;
  --canvas-2: #0A0F1F;
  --panel-2: #111C3F;
  --accent: #1546E5;
  --accent-hover: #0E33B3;
  --luce: #8CA6FF;
  --text-primary: #F2F5FF;
  --text-secondary: #A9B4D0;
  --text-3: #8E9BBC;
  --riga: rgba(140, 166, 255, .16);
  --riga-forte: #5368B5;
  --errore: #FF8A8A;
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --tshadow: 0 1px 2px rgba(5, 5, 10, .95), 0 3px 12px rgba(5, 5, 10, .78), 0 10px 44px rgba(5, 5, 10, .8);
  --nav-h: 64px;
  --pad: clamp(20px, 5vw, 72px);
  --col: min(46vw, 620px);
  --max: 1180px;
  --sez: clamp(88px, 11vw, 150px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); color-scheme: dark; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (max-width: 860px) { html { scroll-padding-bottom: 90px; } }
body {
  margin: 0; overflow-x: clip;   /* su body solo clip: hidden farebbe di body il contenitore di scorrimento e romperebbe lo sticky dove manca clip */
  background: var(--canvas); color: var(--text-primary);
  font: 400 17px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@keyframes pagina { from { opacity: 0; } }
html.js body { animation: pagina .8s var(--ease-out); }
@media (prefers-reduced-motion: no-preference) { html.scorri { scroll-behavior: smooth; } }   /* morbido solo dopo il primo gesto: un link con l'ancora atterra subito, senza attraversare l'hero */

/* ---------- Tipografia ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 6.2vw, 80px); }
h2 { font-size: clamp(30px, 4.4vw, 54px); letter-spacing: -.028em; line-height: 1.06; }
h3 { font-size: clamp(21px, 2vw, 25px); letter-spacing: -.02em; line-height: 1.15; font-weight: 500; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.4vw, 54px); letter-spacing: -.028em; line-height: 1.06; margin: 0; text-wrap: balance; }
p { margin: 0; }
.kicker { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--luce); margin: 0 0 16px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.kicker::before { content: ""; width: 6px; height: 6px; margin-top: 6.5px; border-radius: 50%; background: var(--luce); box-shadow: 0 0 12px var(--luce); flex: none; }
.line { font-size: clamp(18px, 1.2vw + 12px, 22px); line-height: 1.45; color: var(--text-secondary); margin: 16px 0 0; max-width: 46ch; text-wrap: pretty; }
.small { font-size: 14.5px; line-height: 1.5; color: var(--text-3); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: -60px; left: 16px; z-index: 100; background: var(--accent); color: #fff; padding: 12px 18px; border-radius: 999px; text-decoration: none; }
.skip:focus-visible { top: 12px; border-radius: 999px; }
.featured :focus-visible { outline-color: #fff; }
main:focus-visible, .section:focus-visible, .hero:focus-visible { outline: 0; }

/* ---------- Tasti e link ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font: 500 16px/1 var(--font-body); text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(140, 166, 255, .28), 0 12px 40px -10px rgba(21, 70, 229, .8);
  transition: background .2s var(--ease-out), transform .16s var(--ease-out), box-shadow .2s var(--ease-out);
}
@media (hover: hover) { .btn:hover { background: var(--accent-hover); } }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-2 { background: var(--panel-2); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--riga-forte); }
@media (hover: hover) { .btn-2:hover { background: #17255A; } }
.btn-white { background: #fff; color: var(--accent); box-shadow: 0 12px 40px -14px rgba(0, 0, 0, .6); }
@media (hover: hover) { .btn-white:hover { background: #E8EEFF; } }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14.5px; }
.link { color: var(--luce); text-decoration: none; font-weight: 500; border-bottom: 1px solid rgba(140, 166, 255, .35); padding-bottom: 1px; transition: border-color .2s var(--ease-out); }
@media (hover: hover) { .link:hover { border-color: var(--luce); } }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
:focus-visible { outline: 2px solid var(--luce); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 4px; border-radius: 999px; }
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .link, .nav-links a, .job, summary { min-height: 44px; }
  .link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Ambiente fisso: un solo luogo dietro tutto ---------- */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glow { position: absolute; left: 50%; top: 45%; width: 80vmax; height: 80vmax; border-radius: 50%; background: radial-gradient(circle, rgba(21, 70, 229, .20), rgba(21, 70, 229, 0) 60%); transform: translate(-55%, -50%); }
.pts span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--luce); opacity: 0; box-shadow: 0 0 8px var(--luce); left: var(--x); top: 110%; }
.grid-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 38vh; opacity: .22; }
.grain { position: absolute; inset: 0; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px; }
@keyframes glow { from { transform: translate(-62%, -56%) scale(1); } to { transform: translate(-44%, -42%) scale(1.18); } }
@keyframes drift { 0% { transform: translateY(0) scale(var(--s, 1)); opacity: 0; } 8% { opacity: .5; } 92% { opacity: .5; } 100% { transform: translateY(-130vh) scale(var(--s, 1)); opacity: 0; } }
html.js .ambient.live .glow { animation: glow 90s var(--ease-in-out) infinite alternate; animation-delay: -30s; }
html.js .ambient.live .pts span { animation: drift var(--d, 70s) linear infinite; animation-delay: var(--dl, -10s); }
/* Mentre il palco dell'hero copre tutto, alone e particelle riposano (non si vedrebbero) */
html.js body.hero-covers .ambient.live .glow, html.js body.hero-covers .ambient.live .pts span { animation-play-state: paused; }   /* piu' specifico dello shorthand qui sopra */
/* Il comando "Ferma le animazioni" nel footer (WCAG 2.2.2): spegne i cicli infiniti, non le entrate */
html.ferme .glow, html.ferme .pts span, html.ferme .chip-dot::after, html.ferme .cue svg, html.ferme .mark-big::after, html.ferme .kicker::before, html.ferme .panel.featured::before { animation: none !important; }
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }
.nav, main, footer, .wa-bar { position: relative; z-index: 1; }

/* ---------- Barra in alto ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 var(--pad);
  background: rgba(7, 11, 23, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(140, 166, 255, .08);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text-primary); text-decoration: none; font-weight: 500; font-size: 15.5px; letter-spacing: -.01em; }
.mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.04em; color: #fff; box-shadow: 0 0 24px -4px rgba(21, 70, 229, .9); flex: none; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 15px; transition: color .2s var(--ease-out); display: inline-flex; align-items: center; }
@media (hover: hover) { .nav-links a:hover { color: var(--text-primary); } }
@media (max-width: 860px) { .nav-links { gap: 0; } .nav-links a:not(.nav-prezzi) { display: none; } .brand .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } }   /* da telefono il nome resta per lo screen reader, si vede solo il 48 */
@media (pointer: coarse) { .brand { min-height: 44px; } }

/* ---------- Hero: il film allo scroll ---------- */
.hero { position: relative; isolation: isolate; background: var(--canvas-2); }
html.js .hero { height: 1100vh; height: min(1100vh, 12000px); }   /* il tetto serve ai renderer con finestre altissime (Googlebot) */
.stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--canvas-2); }   /* 100lvh: con la barra di Safari aperta il fondo del palco sta sotto la barra, e la striscia che scopre ritirandosi e' film */
.scene { position: absolute; inset: 0; min-height: 100vh; min-height: 100lvh; transform: translate3d(var(--shift, 0px), 0, 0); will-change: transform; }   /* copre anche la striscia che Safari scopre quando ritira la barra */
.stage.shifted .scene { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.poster { position: absolute; inset: 0; background: center / cover no-repeat; }
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease-out); transform: translateZ(0); }
.stage.video-ready .film { opacity: 1; }
.stage.video-failed .film { display: none; }

/* La schermata vera dentro lo schermo del telefono del film (posizione misurata da hero.js) */
.screen {
  position: absolute; left: var(--sx, 0); top: var(--sy, 0); width: var(--sw, 0); height: var(--sh, 0); border-radius: var(--sr, 0);
  overflow: hidden; background: #fff; color: #0A0F1F; container-type: inline-size; display: none; transform: translate3d(var(--shift, 0px), 0, 0);
  opacity: clamp(0, calc(var(--k7, 0) * 2.5), 1); box-shadow: 0 0 60px -10px rgba(140, 166, 255, .6);
}
.screen.ready { display: block; }
@supports not (container-type: inline-size) { .screen { display: none !important; } }   /* senza container query (iOS 15) resta lo schermo bianco del film */
.sch { position: absolute; inset: 0; padding: 12cqw 7cqw 0; display: flex; flex-direction: column; gap: 5cqw; font-family: var(--font-body); }
.sch > * { --kc: clamp(0, calc((var(--k7, 0) - var(--th, 0)) * 4), 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * 6cqw)); }
.sch-bar { --th: .1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 3cqw; }
.sch-name { font-size: 4.2cqw; font-weight: 600; letter-spacing: -.02em; }
.sch-menu { width: 6cqw; height: 1.6cqw; border-radius: 1cqw; background: #0A0F1F; box-shadow: 0 2.6cqw 0 #0A0F1F; }
.sch-h1 { --th: .22; font-family: var(--font-display); font-size: 8.4cqw; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.sch-month { --th: .34; font-size: 3.6cqw; color: #5B6478; }
.sch-cal { --th: .42; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.6cqw; }
.sch-cal span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-size: 3.4cqw; font-weight: 500; font-variant-numeric: tabular-nums; }
.sch-cal .full { color: #6B7488; text-decoration: line-through; }
.sch-cal .pick { background: var(--accent); color: #fff; }
.sch-hours { --th: .58; display: flex; gap: 2cqw; }
.sch-hours span { flex: 1; padding: 2.6cqw 0; border-radius: 99cqw; border: .4cqw solid #C9CFDB; text-align: center; font-size: 3.4cqw; font-weight: 500; }
.sch-hours .pick { border-color: var(--accent); color: var(--accent); background: #E8EEFF; }
.sch-btn { --th: .7; margin-top: auto; margin-bottom: 8cqw; height: 13cqw; border-radius: 99cqw; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 4cqw; font-weight: 500; }

/* I quattro strati di leggibilita' */
.scrim { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 120% 90% at 50% 45%, rgba(7, 11, 23, 0) 35%, rgba(7, 11, 23, .62) 100%),
  linear-gradient(90deg, rgba(7, 11, 23, .88) 0%, rgba(7, 11, 23, .74) 30%, rgba(7, 11, 23, .46) 52%, rgba(7, 11, 23, 0) 68%); }
.bands { position: absolute; left: var(--pad); top: var(--nav-h); bottom: 0; width: var(--col); display: grid; align-items: center; pointer-events: none; }
.band { grid-area: 1 / 1; opacity: 0; --k: 0; position: relative; padding: 24px 0; text-shadow: var(--tshadow); visibility: hidden; }
.band.on { visibility: visible; }
.band > * { position: relative; }
.band::before { content: ""; position: absolute; inset: -24% -34%; pointer-events: none; opacity: calc(.3 + .7 * var(--k, 1)); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(5, 8, 18, .78) 0%, rgba(5, 8, 18, .6) 42%, rgba(5, 8, 18, .2) 78%, rgba(5, 8, 18, 0) 100%); }
.band-1::before { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(5, 8, 18, .82) 0%, rgba(5, 8, 18, .62) 42%, rgba(5, 8, 18, .2) 78%, rgba(5, 8, 18, 0) 100%); }
.band .btn { text-shadow: none; }
.band.on .cta { pointer-events: auto; }
.band .note { margin-top: 22px; max-width: 46ch; }
.band .t.price { color: var(--luce); display: block; text-shadow: 0 0 28px rgba(140, 166, 255, .45), var(--tshadow); }
.band .t { display: inline; }
.band .w { display: inline-block; white-space: nowrap; }
.band .c { display: inline-block; }
.band .vis { display: inline; }

/* Le entrate, una per banda, scrubbate su --k. Solo transform e opacity. */
.band[data-entrance="depth"] .w { --kc: clamp(0, calc((var(--k, 0) - var(--th, 0)) * 3), 1); opacity: var(--kc); transform: scale(calc(.86 + .14 * var(--kc))); transform-origin: left center; }
.band[data-entrance="grid"] .c { --kc: clamp(0, calc((var(--k, 0) - var(--th, 0)) * 2.6), 1); opacity: var(--kc); transform: translateX(calc((1 - var(--kc)) * var(--jx, 0px))); }
.band[data-entrance="scatter"] .c { --kc: clamp(0, calc((var(--k, 0) - var(--th, 0)) * 2.6), 1); opacity: var(--kc); transform: translate(calc((1 - var(--kc)) * var(--jx, 0px)), calc((1 - var(--kc)) * var(--jy, 0px))) rotate(calc((1 - var(--kc)) * var(--jr, 0deg))); }
.band[data-entrance="weave"] .c { --kc: clamp(0, calc((var(--k, 0) - var(--th, 0)) * 2.6), 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * var(--jy, 0px))); }
.band[data-entrance="drift"] .w { --kc: clamp(0, calc((var(--k, 0) - var(--th, 0)) * 2.8), 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * -26px)); }
.band[data-entrance="rise"] .w { --kc: clamp(0, calc((var(--k, 0) - var(--th, 0)) * 3), 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * 22px)); }
.band[data-entrance="rise"] .line { --ks: clamp(0, calc((var(--k, 0) - .5) * 4), 1); opacity: var(--ks); transform: translateY(calc((1 - var(--ks)) * 12px)); }
.band[data-entrance="rise"] .cta { --kb: clamp(0, calc((var(--k, 0) - .7) * 5), 1); opacity: var(--kb); transform: translateY(calc((1 - var(--kb)) * 12px)); }
.band[data-entrance="blur"] .t { display: grid; }
.band[data-entrance="blur"] .soft, .band[data-entrance="blur"] .sharp { grid-area: 1 / 1; }
.band[data-entrance="blur"] .soft { filter: blur(10px); opacity: calc(1 - var(--k, 0)); }
.band[data-entrance="blur"] .soft::before { content: attr(data-text); }   /* la frase sfocata viene dal CSS: nel DOM c'e' una volta sola */
.band[data-entrance="blur"] .sharp { opacity: var(--k, 0); }
.band:not([data-entrance="rise"]) .kicker, .band:not([data-entrance="rise"]) .line, .band:not([data-entrance="rise"]) .cta, .band .note { opacity: var(--k, 0); transform: translateY(calc((1 - var(--k, 0)) * 10px)); }
.band[data-entrance="rise"] .kicker { opacity: var(--k, 0); }

/* Il chip del conto alla rovescia, la barra, il cue, l'anello */
.hud { position: absolute; left: var(--pad); bottom: 26px; bottom: calc(26px + 100lvh - 100dvh); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-out) .3s; }
html.js .hud { opacity: 1; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; line-height: 1; border-radius: 10px; background: rgba(8, 8, 15, .55); border: 1px solid rgba(96, 96, 126, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--luce); text-shadow: 0 1px 3px rgba(5, 5, 10, .85); font-variant-numeric: tabular-nums; transition: background .4s var(--ease-out), color .4s var(--ease-out); }
.chip.on .t { display: none; }
.chip.on { color: #fff; background: rgba(21, 70, 229, .78); border-color: rgba(140, 166, 255, .5); }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; position: relative; }
.chip-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: currentColor; opacity: .3; }
html.js .ambient.live ~ main .hero.on-screen .chip-dot::after { animation: pulse 2s var(--ease-in-out) infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.6); opacity: .35; } 50% { transform: scale(1.1); opacity: 0; } }
.hud-bar { width: 160px; height: 2px; background: rgba(140, 166, 255, .18); border-radius: 2px; overflow: hidden; }
.hud-bar span { display: block; height: 100%; background: var(--luce); transform: scaleX(var(--p, 0)); transform-origin: left; }
.cue { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); text-shadow: 0 1px 3px rgba(5, 5, 10, .85); }
.cue svg { width: 14px; height: 14px; }
html.js .ambient.live ~ main .hero.on-screen .cue svg { animation: cue 2.4s var(--ease-in-out) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-2px); opacity: .5; } 50% { transform: translateY(3px); opacity: 1; } }
.ring { position: absolute; right: var(--pad); bottom: 26px; bottom: calc(26px + 100lvh - 100dvh); width: 36px; height: 36px; color: var(--luce); transform: rotate(-90deg); opacity: 0; transition: opacity .4s var(--ease-out); }
.ring circle { transition: stroke-dashoffset .15s linear; stroke-dashoffset: var(--ld, 126); }
.stage.loading .ring { opacity: 1; }
@media (max-height: 560px) { .hud { display: none; } }

/* Telefono e touch in verticale: il film 9:16, i testi in alto (stesse tre condizioni in hero.js) */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse) {
  .hero h1 { font-size: clamp(32px, 9.2vw, 46px); }
  .hero .line { font-size: 17px; margin-top: 12px; }
  .scrim { background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(7, 11, 23, 0) 35%, rgba(7, 11, 23, .5) 100%), linear-gradient(180deg, rgba(7, 11, 23, .92) 0%, rgba(7, 11, 23, .72) 36%, rgba(7, 11, 23, 0) 58%); }
  .bands { left: 16px; right: 16px; width: auto; top: calc(var(--nav-h) + 10px); bottom: auto; align-items: start; }
  .band { padding: 6px 0; }
  .band::before { inset: -30% -12%; background: radial-gradient(ellipse 90% 74% at 50% 42%, rgba(5, 8, 18, .66) 0%, rgba(5, 8, 18, .4) 48%, rgba(5, 8, 18, 0) 76%); }
  .band .note { display: none; }
  .band .cta { margin-top: 18px; gap: 12px 18px; }
  .band-7 .cta { margin-top: 14px; }
  .band-7 .link { display: none; }
  .hud { left: 16px; right: 16px; bottom: 18px; }
  .ring { right: 16px; bottom: 20px; }
  .stage.shifted .scene { -webkit-mask-image: none; mask-image: none; }
}

/* L'hero statico: riduci movimento, telefono in orizzontale (stesse due condizioni in hero.js),
   senza JavaScript, o risparmio dati (deciso da hero.js con la classe is-static). Le tre liste sono identiche. */
@media (prefers-reduced-motion: reduce), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (max-height: 600px) and (pointer: fine) {
  html.js .hero { height: auto; }
  .stage { position: relative; height: auto; min-height: 100vh; min-height: 100svh; --k7: 1; }
  .film { display: none; }
  .bands { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: var(--col); margin-left: var(--pad); padding: calc(var(--nav-h) + 40px) 0 72px; min-height: 100svh; pointer-events: auto; }
  .band { display: none; }
  .band-1 { display: block; opacity: 1 !important; --k: 1; visibility: visible; }
  .band .cta { pointer-events: auto; }
  .hud, .ring { display: none; }
}
html:not(.js) .hero { height: auto; }
html:not(.js) .stage { position: relative; height: auto; min-height: 100vh; min-height: 100svh; --k7: 1; }
html:not(.js) .stage { --shift: 19vw; }
html:not(.js) .scene { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
html:not(.js) .film { display: none; }
html:not(.js) .bands { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: var(--col); margin-left: var(--pad); padding: calc(var(--nav-h) + 40px) 0 72px; min-height: 100svh; pointer-events: auto; }
html:not(.js) .band { display: none; }
html:not(.js) .band-1 { display: block; opacity: 1 !important; --k: 1; visibility: visible; }
html:not(.js) .band .cta { pointer-events: auto; }
html:not(.js) .hud, html:not(.js) .ring { display: none; }
html:not(.js) .poster { background-image: url("film/hero-ending.webp"); }
html:not(.js) .divider path { --draw: 1; }
html.js .hero.is-static { height: auto; }
.hero.is-static .stage { position: relative; height: auto; min-height: 100vh; min-height: 100svh; --k7: 1; }
.hero.is-static .film { display: none; }
.hero.is-static .bands { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: var(--col); margin-left: var(--pad); padding: calc(var(--nav-h) + 40px) 0 72px; min-height: 100svh; pointer-events: auto; }
.hero.is-static .band { display: none; }
.hero.is-static .band-1 { display: block; opacity: 1 !important; --k: 1; visibility: visible; }
.hero.is-static .band .cta { pointer-events: auto; }
.hero.is-static .hud, .hero.is-static .ring { display: none; }
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse) {
  html:not(.js) .poster { background-image: url("film/hero-ending-mobile.webp"); }
  html:not(.js) .bands, .hero.is-static .bands { width: auto; margin: 0 16px; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 72vh; }   /* il telefono del fermo immagine parte sotto il link, non sotto il testo */
  html:not(.js) .band .link, .hero.is-static .band .link { min-height: 0; }   /* il box da 44px toccava la cornice del telefono nel fermo immagine */
  html:not(.js) .stage { --shift: 0px; }
  html:not(.js) .scene { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (max-height: 600px) and (pointer: fine) {
  @media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse) {
    .bands { width: auto; margin: 0 16px; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 72vh; }
    .band .link { min-height: 0; }
  }
}

/* ---------- Le sezioni ---------- */
.section { position: relative; padding: var(--sez) var(--pad); max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; }   /* lo scarto sotto la barra lo da' solo scroll-padding-top su html */
.head { max-width: 640px; }
.head .line { margin-top: 18px; }
.head-center { margin: 0 auto; text-align: center; max-width: 720px; }
.head-center .kicker { justify-content: center; }
.head-center .line { margin-left: auto; margin-right: auto; }
.head-split { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; align-items: end; }
.head-split .line { margin-top: 0; grid-column: 2; grid-row: 1 / 3; align-self: end; }
.head-split .kicker { grid-column: 1; }
.head-split h2 { grid-column: 1; }
@media (max-width: 860px) { .head-split { display: block; } .head-split .line { margin-top: 18px; } }
.divider { display: block; width: 100%; height: auto; max-height: 160px; opacity: .55; }
.divider path { stroke: var(--luce); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 0)); }

/* Entrate coreografate (site.js aggiunge .in, poi .done per ritirare i ritardi) */
html.js .reveal .part { opacity: 0; transform: translateY(22px); }
html.js .reveal.in .part { opacity: 1; transform: none; transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
html.js .reveal.in.done .part { transition-delay: 0s !important; }

/* I tre pannelli di vetro (il motivo del film) */
.panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; align-items: start; }
.panel { position: relative; border-radius: 24px; padding: 32px 28px 28px; background: linear-gradient(180deg, rgba(17, 28, 63, .72), rgba(14, 23, 51, .55)); border: 1px solid var(--riga); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -40px rgba(0, 0, 0, .9); }
.panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(140, 166, 255, .55), transparent 38%, transparent 62%, rgba(21, 70, 229, .55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
@media (min-width: 961px) {   /* il 650 e' primo nel DOM e al centro a schermo; sotto, i pannelli si impilano da soli */
  .panels .panel:nth-child(1) { grid-column: 2; grid-row: 1; }
  .panels .panel:nth-child(2) { grid-column: 1; grid-row: 1; }
  .panels .panel:nth-child(3) { grid-column: 3; grid-row: 1; }
}
.panel.featured { background: var(--accent); border-color: transparent; margin-top: -14px; box-shadow: 0 40px 90px -36px rgba(21, 70, 229, .95); }
.panel.featured::before { background: linear-gradient(135deg, rgba(255, 255, 255, .55), transparent 40%); }
.panel .kicker { margin-bottom: 12px; }
.panel .price { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 4.4vw, 62px); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.panel .price small { font-size: clamp(17px, 1.75vw, 24px); font-weight: 500; letter-spacing: 0; color: var(--text-secondary); }
.panel h3.kicker { line-height: 1.4; text-wrap: initial; }
.panel .for { margin-top: 10px; }
.panel .does { font-family: var(--font-display); font-weight: 500; font-size: 21px; letter-spacing: -.015em; color: var(--luce); margin: 6px 0 12px; }
.panel .line { font-size: 16.5px; margin-top: 0; }
.panel .btn { width: 100%; margin-top: 20px; }
.featured .kicker, .featured .does, .featured .price small, .featured .line, .featured .small, .featured .rows dt { color: rgba(255, 255, 255, .86); }
.featured .kicker::before { background: #fff; box-shadow: 0 0 12px #fff; }
.featured .does { color: #fff; }
.featured .price { color: #fff; }
.featured .rows dd { color: #fff; }
.featured .open { border-color: rgba(255, 255, 255, .25); }
.featured summary::after { color: #fff; }
.featured .btn { background: #fff; color: var(--accent); box-shadow: 0 12px 40px -14px rgba(0, 0, 0, .6); }
@media (hover: hover) { .featured .btn:hover { background: #E8EEFF; } }
@media (max-width: 960px) { .panels { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 560px; } .panel.featured { margin-top: 0; } }

.open { border-top: 1px solid var(--riga); margin-top: 20px; }
.open summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 500; }
.open summary::-webkit-details-marker { display: none; }
.open summary::after { content: "+"; content: "+" / ""; font-family: var(--font-mono); font-size: 20px; line-height: 1; color: var(--luce); transition: transform .24s var(--ease-out); flex: none; }
.open[open] summary::after { transform: rotate(45deg); }
.open .body { padding: 0 0 18px; color: var(--text-secondary); font-size: 16px; }
html.js .open[open] .body { animation: apri .3s var(--ease-out); }
@keyframes apri { from { opacity: 0; transform: translateY(-6px); } }
.rows { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 15px; margin: 4px 0 16px; }
.rows dt { color: var(--text-3); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding-top: 3px; }
.rows dd { margin: 0; color: var(--text-primary); }
.extras { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; margin-top: 56px; align-items: start; }
.extras h3 { margin-bottom: 12px; }
.extras ul { list-style: none; margin: 0; padding: 0; }
.extras li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(140, 166, 255, .12); align-items: baseline; }
.extras li span + span { font-family: var(--font-mono); color: var(--luce); text-align: right; }
.extras p { color: var(--text-secondary); font-size: 16px; margin-top: 8px; }
.extras .remake { grid-column: 1 / -1; border: 1px solid var(--riga); border-radius: 20px; padding: 24px 28px; display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: center; background: rgba(14, 23, 51, .45); }
.guarantee { margin-top: 36px; display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .02em; color: var(--luce); }
.guarantee svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .extras { grid-template-columns: minmax(0, 1fr); } .extras .remake { grid-template-columns: minmax(0, 1fr); } .extras .remake .btn { white-space: normal; height: auto; min-height: 52px; text-align: center; } }

/* Come funziona: i tre passi e il tieni premuto (il momento interattivo) */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 56px; align-items: start; }
.timeline { display: grid; gap: 26px; position: relative; list-style: none; margin: 0; padding: 0; }
.timeline::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 1px; background: var(--riga); }
.timeline::after { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 1px; background: var(--luce); transform: scaleY(var(--hold, 0)); transform-origin: top; box-shadow: 0 0 10px var(--luce); }
.step { display: grid; grid-template-columns: 48px 1fr; gap: 18px; opacity: .72; transition: opacity .6s var(--ease-out); position: relative; }
.step.lit { opacity: 1; }
.step .n { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 500; color: var(--luce); border: 1px solid rgba(140, 166, 255, .28); background: var(--canvas); transition: background .4s var(--ease-out), color .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.step.lit .n { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 0 30px -6px rgba(21, 70, 229, .95); }
.step h3 { margin-bottom: 6px; padding-top: 11px; }
.step p { color: var(--text-secondary); font-size: 16px; }
.hold-box { border: 1px solid var(--riga); border-radius: 24px; padding: 28px; background: rgba(10, 15, 31, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hold-row { display: flex; align-items: center; gap: 24px; }
.hold { position: relative; width: 116px; height: 116px; border-radius: 50%; border: 0; background: var(--panel-2); color: var(--text-primary); cursor: pointer; flex: none; display: grid; place-items: center; font: 500 13px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .16s var(--ease-out), background .3s var(--ease-out); box-shadow: inset 0 0 0 1px var(--riga-forte); }
.hold:active, .hold.pressing { transform: scale(.96); }
.hold svg { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); transform: rotate(-90deg); pointer-events: none; }
.hold svg circle { fill: none; stroke-width: 2; }
.hold .track { stroke: rgba(140, 166, 255, .18); }
.hold .arc { stroke: var(--luce); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--hold, 0)); stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(140, 166, 255, .8)); }
.hold-box.done .hold { background: var(--accent); color: #fff; box-shadow: 0 0 40px -8px rgba(21, 70, 229, .95); cursor: default; }
.hold-box.done .hold .arc { stroke: #fff; }
.hold-text { display: grid; gap: 6px; }
.hold-text .big { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.2vw, 40px); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.hold-text .big span { color: var(--luce); }
.hold-text .small { max-width: 30ch; }
.console { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.75; color: var(--text-secondary); background: var(--canvas); border: 1px solid rgba(140, 166, 255, .14); border-radius: 16px; padding: 16px 20px; margin-top: 22px; }
.console .ln { display: flex; gap: 14px; opacity: .72; transform: translateX(-6px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.console .ln.lit { opacity: 1; transform: none; color: var(--text-primary); }
.console .ln b { color: var(--luce); font-weight: 500; flex: none; width: 3ch; }
.console .ln.lit:last-child b { color: #fff; }
.console .ln:last-child.lit { color: #fff; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 480px) { .hold-row { flex-direction: column; align-items: flex-start; } .hold-box { padding: 22px; } }

/* Esempi: i due casi con consenso */
.case { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; margin-top: 64px; }
.case.flip .media { order: -1; }
.case h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; }
.case .who { color: var(--text-secondary); margin-top: 4px; }
.case .line { margin-top: 18px; font-size: 18px; }
.case ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--text-secondary); font-size: 16px; }
.case li { display: flex; gap: 12px; }
.case li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--luce); flex: none; margin-top: 9px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--luce); border: 1px solid rgba(140, 166, 255, .3); border-radius: 999px; padding: 6px 10px; }
.shots { display: flex; gap: 14px; align-items: flex-start; justify-content: center; perspective: 1200px; }
.phone { width: 31%; border-radius: 26px; border: 5px solid #0A0F1F; background: #0A0F1F; overflow: hidden; box-shadow: 0 0 0 1px rgba(140, 166, 255, .28), 0 30px 60px -28px rgba(0, 0, 0, .9); transform: rotate(var(--rot, 0deg)) translateY(var(--y, 0)); transition: transform .5s var(--ease-out); }
.case .shots .phone:nth-child(1) { --rot: -4deg; --y: 14px; }
.case .shots .phone:nth-child(2) { --y: -6px; }
.case .shots .phone:nth-child(3) { --rot: 4deg; --y: 14px; }
.case.flip .shots .phone { width: 38%; }
.case.flip .shots .phone:nth-child(1) { --rot: -3deg; --y: 10px; }
.case.flip .shots .phone:nth-child(2) { --rot: 3deg; --y: -8px; }
.mt { margin-top: 14px; }
.phone img, .phone video { display: block; width: 100%; height: auto; }
.phone.pl { position: relative; }
.phone.pl video { aspect-ratio: 9 / 16; object-fit: cover; }
.play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(7, 11, 23, 0), rgba(7, 11, 23, .5)); border: 0; cursor: pointer; color: #fff; font: 500 13px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; gap: 10px; grid-auto-flow: row; align-content: center; }
.play span { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 0 30px -4px rgba(21, 70, 229, .95); }
.play svg { width: 22px; height: 22px; margin-left: 3px; }
.phone.pl.playing .play { display: none; }
.case .cta { margin-top: 24px; }
.note-cases { margin-top: 48px; max-width: 60ch; }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; gap: 32px; } .case.flip .media { order: 0; } .shots { gap: 10px; } }

/* Mestieri: righe-link */
.jobs { margin-top: 48px; border-top: 1px solid var(--riga); }
.job { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--riga); color: inherit; text-decoration: none; transition: transform .3s var(--ease-out); }
@media (hover: hover) { .job:hover { transform: translateX(12px); } .job:hover .arrow { transform: translateX(6px); } }
.job h3 { margin-bottom: 4px; }
.job p { color: var(--text-secondary); font-size: 16px; }
.job .arrow { color: var(--luce); transition: transform .3s var(--ease-out); width: 28px; height: 28px; }
.job .price-tag { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--luce); margin-bottom: 8px; display: block; }
.other { margin-top: 40px; display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: center; }
.other p { color: var(--text-secondary); margin-top: 6px; }
@media (max-width: 700px) { .other { grid-template-columns: 1fr; } }

/* Patti chiari: la colonna fissa e il registro */
.pacts { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; margin-top: 8px; align-items: start; }
.pacts .head { position: sticky; top: calc(var(--nav-h) + 32px); }
.ledger .open { margin-top: 0; }
.ledger .open:last-child { border-bottom: 1px solid var(--riga); }
.ledger summary { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -.015em; padding: 20px 0; }
.ledger ul { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.ledger li { display: flex; gap: 12px; }
.ledger li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--luce); flex: none; margin-top: 9px; }
@media (max-width: 860px) { .pacts { grid-template-columns: 1fr; gap: 28px; } .pacts .head { position: static; } }

/* Chi te lo fa */
.who-box { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; margin-top: 8px; }
.mark-big { width: 112px; height: 112px; border-radius: 28px; font-size: 44px; box-shadow: 0 0 60px -10px rgba(21, 70, 229, .95); position: relative; }
.mark-big::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 80px -6px rgba(21, 70, 229, .9); opacity: .6; }
html.js .ambient.live ~ main #chi.vis .mark-big::after { animation: breathe 5s var(--ease-in-out) infinite; animation-delay: -1.5s; }
/* Un elemento vivo per sezione, a livello sussurro: il punto dell'etichetta respira, e la luce di bordo del 650 */
@keyframes sussurro { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
html.js .ambient.live ~ main .section.vis .head .kicker::before { animation: sussurro 5s var(--ease-in-out) infinite; animation-delay: -2s; }
html.js .ambient.live ~ main .section.vis .panel.featured::before { animation: sussurro 6s var(--ease-in-out) infinite; animation-delay: -3s; }
@keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@media (max-width: 600px) { .who-box { grid-template-columns: 1fr; gap: 24px; } }

/* Domande */
.faq-list { margin-top: 40px; max-width: 760px; margin-left: auto; margin-right: auto; }
.faq-list .open { margin-top: 0; }
.faq-list .open:last-child { border-bottom: 1px solid var(--riga); }
.faq-list summary { font-size: 18px; padding: 18px 0; }

/* Contatti: l'unica chiamata all'azione, tre vie alla pari */
.contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 56px; align-items: start; }
.way { min-width: 0; border: 1px solid var(--riga); border-radius: 24px; padding: 28px; background: rgba(14, 23, 51, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.way h3 { margin-bottom: 8px; }
.way > p { color: var(--text-secondary); font-size: 16px; }
.way .list { display: grid; gap: 10px; margin-top: 20px; }
.way .list .btn { width: 100%; justify-content: flex-start; padding: 12px 20px; height: auto; min-height: 52px; white-space: normal; text-align: left; line-height: 1.2; }
.way .list .btn .euro { margin-left: auto; font-family: var(--font-mono); font-weight: 500; opacity: .9; white-space: nowrap; flex: none; }
.way .list .link { margin-top: 6px; }
.way .btn.single { margin-top: 20px; }
.field { display: grid; gap: 6px; margin-top: 14px; font-size: 14px; color: var(--text-secondary); }
.field input, .field textarea, .field select { width: 100%; font: 400 16px/1.4 var(--font-body); color: var(--text-primary); background: var(--canvas); border: 1px solid var(--riga-forte); border-radius: 12px; padding: 12px 14px; transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 0; border-color: var(--luce); box-shadow: 0 0 0 3px rgba(140, 166, 255, .25); }
.field input:user-invalid { border-color: var(--errore); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; color: var(--text-secondary); }
.consent input { margin: 4px 0 0; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.consent a { color: var(--luce); padding: 4px 0; }
.form .btn { width: 100%; margin-top: 18px; }
.form .msg { margin-top: 12px; font-size: 14.5px; color: var(--errore); display: none; }
.form.err .msg { display: block; }
.form .msg a { color: var(--luce); padding: 4px 0; }
.form .ok { display: none; }
.form.sent .fields { display: none; }
.form.sent .ok { display: block; }
.way.sent > p { display: none; }
.form .ok h3 { font-size: 30px; font-weight: 700; margin-top: 8px; }
.form .ok p { margin-top: 10px; color: var(--text-secondary); }
.form.sending .btn { opacity: .7; pointer-events: none; }
.way .note { margin-top: 12px; }
@media (max-width: 1000px) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .way.wa { grid-column: 1 / -1; } }
@media (max-width: 680px) { .contact { grid-template-columns: minmax(0, 1fr); } }

/* Footer */
.footer { border-top: 1px solid rgba(140, 166, 255, .12); padding: 44px var(--pad) 120px; }
.footer-in { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; align-items: baseline; }
.footer-in .big { font-weight: 500; max-width: 28ch; text-wrap: pretty; }
.footer-in p.small { display: flex; flex-wrap: wrap; align-items: center; }
.footer-in p.small > *:not(:last-child)::after { content: "·"; content: "·" / ""; margin: 0 8px; color: var(--text-3); }
.footer a { color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; }   /* bersagli di almeno 24px anche col mouse (WCAG 2.5.8) */
.anim-toggle { background: none; border: 0; padding: 0; margin: 0; display: inline-flex; align-items: center; min-height: 28px; color: var(--text-secondary); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .anim-toggle:hover { color: var(--text-primary); } }
@media (pointer: coarse) { .footer a, .anim-toggle { min-height: 44px; } .consent a, .form .msg a { padding: 12px 0; } }   /* in coda al foglio, dopo le regole da 28px e da 4px: al tocco vincono il 44 e il padding (che non alza la riga di testo) */
@media (hover: hover) { .footer a:hover { color: var(--text-primary); } }
@media (min-width: 861px) { .footer { padding-bottom: 56px; } }

/* La barra WhatsApp da telefono: compare quando l'hero e' finito, sparisce sui contatti */
.wa-bar { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; display: none; visibility: hidden; transform: translateY(calc(100% + 20px + env(safe-area-inset-bottom))); transition: transform .5s var(--ease-out), visibility 0s .5s; }
.wa-bar.show { visibility: visible; transform: none; transition-delay: 0s; }
.wa-bar .btn { width: 100%; box-shadow: 0 0 0 1px rgba(140, 166, 255, .35), 0 18px 50px -12px rgba(21, 70, 229, .95); }
@media (max-width: 860px) { html.js .wa-bar { display: block; } }

/* Riduci movimento: tutto allo stato finale, nessun motore (hero.js e site.js spengono i loro) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
  html.js .reveal .part { opacity: 1; transform: none; }
  .divider path { --draw: 1; }
  .step { opacity: 1; }
  .console .ln { opacity: 1; transform: none; }
  .steps { --hold: 1; }
}
html.pinned .reveal .part { opacity: 1 !important; transform: none !important; }
html.pinned .divider path { --draw: 1; }
html.pinned .step { opacity: 1; }
html.pinned .console .ln { opacity: 1; transform: none; }
html.pinned .steps { --hold: 1; }