/* fisiodev.it — foglio di stile unico del sito.
   08/10/2026, notte: rifatto con la stessa logica del sito del noleggio — un film 3D che si
   muove con lo scorrimento in apertura, titoli che entrano parola per parola, foto che
   scorrono più piano della pagina, l'anello delle pagine. Resta scuro, come scelto da Daniel. */
:root{
  --fondo:#0E1D23;      /* sezioni normali */
  --fondo-2:#122930;    /* sezioni alterne (classe .nebbia) */
  --fondo-3:#08141A;    /* sezioni più profonde (classe .notte) e il film */
  --carta:#17323B;      /* riquadri */
  --bordo:rgba(201,214,216,.14);
  --testo-1:#EEF3F3; --testo-2:#A9BCC0;
  --acc:#1CB5A8; --acc-testo:#43D3C5; --acc-velo:rgba(28,181,168,.13);
  --scuro:#0E1D23;      /* testo sopra il verde e sopra il bianco */
  --display:"Funnel Display",system-ui,sans-serif; --testo:"Albert Sans",system-ui,sans-serif; --mono:"Martian Mono",ui-monospace,monospace;
  --r-grande:28px; --r-medio:18px;
  --molla:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--fondo-3);touch-action:manipulation}
body{background:var(--fondo);color:var(--testo-1);font:400 17px/1.6 var(--testo);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,a{touch-action:manipulation}
::selection{background:var(--acc);color:var(--scuro)}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:8px}
.wrap{max-width:1248px;margin:0 auto;padding:0 24px}
.salta{position:absolute;left:-9999px;top:0;background:var(--acc);color:var(--scuro);padding:12px 20px;z-index:100;font-weight:600}
.salta:focus{left:0}

/* ---------- tipografia */
.eti{font:500 12px/1.35 var(--mono);letter-spacing:.075em;text-transform:uppercase;color:var(--acc-testo)}
.d-xl,.d-l,.t-l,.t-m,.t-s{font-family:var(--display);font-weight:700;text-wrap:balance}
.d-xl{font-size:clamp(46px,6.4vw,100px);line-height:.98;letter-spacing:-.035em}
.d-l{font-size:clamp(36px,4.4vw,64px);line-height:1.02;letter-spacing:-.032em}
.t-l{font-size:clamp(30px,3.1vw,44px);line-height:1.09;letter-spacing:-.027em}
.t-m{font-size:clamp(24px,2.1vw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:600}
.t-s{font-size:22px;line-height:1.27;letter-spacing:-.014em;font-weight:600}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.52;color:var(--testo-2)}
.piccolo{font-size:15px;line-height:1.55;color:var(--testo-2)}
.testa{display:flex;flex-direction:column;gap:18px;max-width:820px;margin-bottom:60px}
.testa.centro{margin-left:auto;margin-right:auto;text-align:center;align-items:center}

/* ---------- pulsanti */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:100px;font:600 16px/1.2 var(--testo);
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:transform .2s var(--molla),background-color .2s ease,box-shadow .3s ease,border-color .2s ease}
.btn::after{content:"→";transition:transform .25s var(--molla)}
.btn:hover::after{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn-acc{background:var(--acc);color:var(--scuro);box-shadow:0 10px 30px -12px rgba(28,181,168,.7)}
.btn-acc:hover{background:#3cc9bc;box-shadow:0 14px 40px -12px rgba(28,181,168,.9)}
.btn-acc::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--molla)}
.btn-acc:hover::before{transform:translateX(120%)}
.btn-chiaro{background:#fff;color:var(--scuro)}.btn-chiaro:hover{background:#dff5f2}
.btn-cont{border-color:rgba(238,243,243,.4);color:var(--testo-1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(14,29,35,.25)}
.btn-cont:hover{background:rgba(238,243,243,.08);border-color:rgba(238,243,243,.7)}
.btn-nudo{padding:16px 4px}.btn-nudo:hover{color:var(--acc-testo)}
.azioni{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- elenchi a punti */
.voci{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.voci li{position:relative;padding-left:24px;line-height:1.5}
.voci li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(28,181,168,.16)}
.voci.piccole{gap:9px;font-size:15.5px}
.voci.no{color:var(--testo-2)}
.voci.no li::before{background:none;border:1.5px solid #6E8287;box-shadow:none}

/* ---------- testata: trasparente sopra il film, si fa piena scorrendo */
.testata{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background-color .4s ease,border-color .4s ease,backdrop-filter .4s ease}
.testata.piena{background:rgba(8,20,26,.74);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:var(--bordo)}
.testata .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.logo{font:700 25px/1 var(--display);letter-spacing:-.03em;color:var(--testo-1)}.logo b{color:var(--acc-testo);font-weight:700}
.menu{display:flex;gap:30px;font-weight:600;font-size:15.5px}
.menu a{color:var(--testo-2);position:relative;transition:color .2s}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--molla)}
.menu a:hover,.menu a[aria-current]{color:var(--testo-1)}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
.testata .btn{padding:12px 20px;font-size:15px}

/* ---------- il film in apertura */
.film{position:relative;height:430vh;background:var(--fondo-3);padding:0}
.film[data-film="home"]{height:720vh}
.film[data-film="home"] .capitoli{gap:10px}
.film[data-film="home"] .capitoli li{min-width:clamp(18px,3.4vw,62px)}
.film[data-film="gestionale"],.film[data-film="social"]{height:330vh}
.film-palco{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(90% 70% at 70% 42%,#173a42 0%,#0d2128 38%,#08141a 72%),var(--fondo-3)}
.film-palco::before{content:"";position:absolute;inset:auto -10% -30% -10%;height:70%;background:radial-gradient(50% 50% at 50% 50%,rgba(28,181,168,.16),transparent 70%);pointer-events:none}
.film-tela{position:absolute;inset:0;width:100%;height:100%;display:block}
.film-riserva{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:brightness(.42) saturate(.85);transition:opacity .8s ease}
.film.senza-3d .film-riserva{opacity:1}
.film.senza-3d .film-tela{display:none}
.velo{position:absolute;inset:0;pointer-events:none;opacity:0}
.velo.s{background:linear-gradient(90deg,rgba(8,20,26,.88) 0%,rgba(8,20,26,.5) 36%,transparent 60%)}
.velo.d{background:linear-gradient(270deg,rgba(8,20,26,.88) 0%,rgba(8,20,26,.5) 36%,transparent 60%)}
.velo.c{background:linear-gradient(180deg,rgba(8,20,26,.85) 0%,rgba(8,20,26,.35) 40%,transparent 60%)}
.grana{position:absolute;inset:-50%;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
  animation:grana 1.2s steps(6) infinite}
@keyframes grana{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
.battute{position:absolute;inset:0;left:50%;translate:-50% 0;width:100%;pointer-events:none}
.battuta{position:absolute;top:50%;translate:0 -50%;max-width:min(560px,45%);display:flex;flex-direction:column;gap:20px;
  --o:0;opacity:var(--o);transform:translateY(calc((1 - var(--o)) * 34px));filter:blur(calc((1 - var(--o)) * 8px))}
.battuta.prima{--o:1;max-width:min(700px,56%)}
.battuta.su{pointer-events:auto}
.battuta.s{left:24px}
.battuta.d{right:24px;text-align:right;align-items:flex-end}
.battuta.d .voci li{padding-left:0;padding-right:24px}
.battuta.d .voci li::before{left:auto;right:0}
.battuta.c{left:50%;top:14%;translate:-50% 0;max-width:min(860px,90%);text-align:center;align-items:center}
.battuta .d-xl{font-size:clamp(46px,5.4vw,90px)}
.battuta .voci{gap:10px;font-size:17px;color:#d6e2e3}
.battuta .lead{max-width:30em}
.cifra-piccola{font-size:15.5px;color:var(--testo-2)}
.cifra-piccola b{font:700 26px/1 var(--display);color:var(--acc-testo);margin-right:4px}
.hud{position:absolute;left:50%;translate:-50% 0;width:100%;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;pointer-events:none}
.orologio{display:flex;flex-direction:column;gap:6px}
.orologio b{font:300 clamp(34px,3.6vw,54px)/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--testo-1)}
.orologio .stato{font-size:14px;color:var(--testo-2);min-height:1.4em}
.capitoli{display:flex;gap:14px;list-style:none;padding:0}
.capitoli li{min-width:clamp(30px,5vw,72px)}
.capitoli i{display:block;height:2px;background:var(--bordo);position:relative;overflow:hidden}
.capitoli i::after{content:"";position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(var(--f,0))}
.capitoli span{display:block;font:500 10px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--testo-2);margin-top:8px;white-space:nowrap}
/* la sezione dopo il film ci sale sopra come un foglio */
.film + section{border-radius:36px 36px 0 0;margin-top:-36px;z-index:2;box-shadow:0 -30px 60px -20px rgba(0,0,0,.6)}

/* ---------- sezioni */
section{padding:128px 0;position:relative}
.nebbia{background:var(--fondo-2)}
.notte{background:var(--fondo-3)}
section:not(.film):not(.copertina)::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(28,181,168,.35),transparent);opacity:.6}
.film + section::before{display:none}
.foto{border-radius:var(--r-grande);overflow:hidden;background:var(--carta);position:relative}
.foto img{width:100%;height:100%;object-fit:cover}
[data-parallasse]{transform:scale(1.12);will-change:transform}

/* ---------- le due porte */
.porte-sez{padding:120px 0}
.porte{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.porta{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;min-height:620px;padding:44px;border-radius:var(--r-grande);overflow:hidden;color:#fff;isolation:isolate;
  transition:transform .5s var(--molla),box-shadow .5s ease}
.porta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.porta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,20,26,0) 26%,rgba(8,20,26,.94) 100%)}
.porta::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.porta:hover{transform:translateY(-6px);box-shadow:0 40px 80px -30px rgba(28,181,168,.45)}
.porta .chip{align-self:flex-start;background:var(--acc);color:var(--scuro);font:500 12px/1 var(--mono);letter-spacing:.075em;text-transform:uppercase;padding:9px 14px;border-radius:100px}
.porta .t-l{max-width:15em}
.porta .btn{pointer-events:none;align-self:flex-start}

/* ---------- problemi */
.problemi{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:center}
.problemi .foto{aspect-ratio:4/5}
.prob{border-top:1px solid var(--bordo);padding:28px 0 6px;display:grid;grid-template-columns:220px 1fr;gap:28px;transition:background .3s}
.prob:last-child{border-bottom:1px solid var(--bordo);padding-bottom:30px}
.prob p{color:var(--testo-2)}
.prob h3{position:relative;padding-left:18px}
.prob h3::before{content:"";position:absolute;left:0;top:.45em;width:6px;height:6px;border-radius:50%;background:#ff7a6b;box-shadow:0 0 0 4px rgba(255,122,107,.15)}

/* ---------- video */
.schermo{border-radius:var(--r-grande);overflow:hidden;background:var(--fondo-3);aspect-ratio:16/9;border:1px solid var(--bordo);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(28,181,168,.08)}
.schermo video{width:100%;height:100%;object-fit:cover;background:var(--fondo-3)}
.nota-video{text-align:center;margin-top:16px}
#soluzione .schermo{max-width:1080px;margin:0 auto}

/* ---------- prodotto (gestionale / social in breve) */
.prodotto{display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:center}
.prodotto.rovescio{grid-template-columns:5fr 7fr}
.prodotto.rovescio .vis{order:2}
.prodotto .contenuto{display:flex;flex-direction:column;gap:24px}
.reel-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:center;perspective:1200px}
.reel{aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:var(--fondo-3);border:1px solid var(--bordo);position:relative;box-shadow:0 40px 70px -35px rgba(0,0,0,.9)}
.reel img,.reel video{width:100%;height:100%;object-fit:cover}
.reel-fila .reel:nth-child(1){transform:rotateY(14deg) translateZ(-30px)}
.reel-fila .reel:nth-child(2){transform:translateY(-28px) scale(1.04);z-index:1}
.reel-fila .reel:nth-child(3){transform:rotateY(-14deg) translateZ(-30px)}
.reel-nome{position:absolute;left:12px;top:12px;pointer-events:none;font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(8,20,26,.78);padding:8px 10px;border-radius:10px}

/* ---------- linguette (video del gestionale, studi) */
.linguette{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.linguette button{font:600 15px/1 var(--testo);padding:12px 18px;border-radius:100px;border:1.5px solid var(--bordo);background:transparent;color:var(--testo-2);cursor:pointer;transition:all .2s ease}
.linguette button:hover{border-color:var(--testo-2);color:var(--testo-1)}
.linguette button[aria-selected="true"]{background:#fff;border-color:#fff;color:var(--scuro)}
[data-pannello][hidden]{display:none}
[data-pannello]:not([hidden]){animation:compare .6s var(--molla)}
@keyframes compare{from{opacity:0;transform:translateY(14px)}}

/* ---------- gruppi di funzioni */
.gruppi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gruppo{position:relative;background:linear-gradient(180deg,rgba(23,50,59,.9),rgba(19,42,50,.7));border:1px solid var(--bordo);border-radius:var(--r-medio);padding:30px 28px;display:flex;flex-direction:column;gap:16px;overflow:hidden;
  transition:border-color .3s ease,transform .4s var(--molla)}
.gruppo::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(400px circle at 0 0,rgba(28,181,168,.18),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.gruppo:hover{border-color:rgba(28,181,168,.45);transform:translateY(-4px)}
.gruppo:hover::after{opacity:1}
.gruppi .reel{border-radius:var(--r-medio)}

/* ---------- fascia "su misura" */
.fascia{background:linear-gradient(120deg,#1CB5A8,#2fd0c1 60%,#7fe7dc);color:var(--scuro);border-radius:var(--r-grande);padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:24px;box-shadow:0 40px 80px -40px rgba(28,181,168,.6)}
.fascia p{font-size:19px;line-height:1.55}

/* ---------- passi: la linea si riempie mentre si scorre */
.passi{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:0;position:relative}
.passi::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--acc),#7fe7dc);transform-origin:left;transform:scaleX(var(--avanza,1));box-shadow:0 0 18px rgba(28,181,168,.7)}
.passo{border-top:2px solid rgba(28,181,168,.18);padding:26px 24px 0 0;display:flex;flex-direction:column;gap:10px;position:relative}
.passo::before{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;border-radius:50%;background:var(--fondo-3);border:2px solid var(--acc)}
.passo .num{font:500 13px/1 var(--mono);color:var(--acc-testo)}
.passo p{font-size:15.5px;color:var(--testo-2)}

/* ---------- commento (scheda Telegram finta) */
.avviso{background:var(--fondo-3);border:1px solid var(--bordo);border-radius:var(--r-grande);padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}
.avviso .chi{display:flex;justify-content:space-between;font:500 12px/1 var(--mono);color:var(--testo-2);letter-spacing:.05em;text-transform:uppercase}
.avviso blockquote{font-size:17px;line-height:1.5;background:var(--carta);border-radius:14px;padding:16px 18px}
.avviso .domanda{color:var(--acc-testo);font-weight:600}
.avviso .scelte{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.avviso .scelte span{font:600 14px/1 var(--testo);text-align:center;padding:12px;border-radius:12px;background:var(--carta)}
.avviso .scelte span:first-child{background:var(--acc);color:var(--scuro)}

/* ---------- integrazioni */
.integrazioni{padding:64px 0;border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo)}
.integrazioni .wrap{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{border:1px solid var(--bordo);border-radius:100px;padding:11px 18px;font-weight:600;font-size:15px;background:var(--carta);transition:border-color .2s,transform .3s var(--molla)}
.chips span:hover{border-color:var(--acc);transform:translateY(-2px)}
.chips span small{font-weight:400;color:var(--testo-2);font-size:14px}

/* ---------- studi prima e dopo */
.scheda-studio{display:flex;flex-direction:column;gap:24px}
.fatti{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--bordo);border-radius:var(--r-medio);overflow:hidden;background:var(--carta)}
.fatti div{padding:18px 20px;border-left:1px solid var(--bordo);display:flex;flex-direction:column;gap:6px}
.fatti div:first-child{border-left:0}
.fatti b{font-weight:600}
.prima-ora{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.prima-ora>div{border-radius:var(--r-medio);padding:32px;display:flex;flex-direction:column;gap:18px}
.prima-ora .prima{background:transparent;border:1px solid var(--bordo)}
.prima-ora .ora{background:linear-gradient(160deg,rgba(28,181,168,.2),rgba(28,181,168,.06));border:1px solid rgba(28,181,168,.4)}

/* ---------- prezzi: l'unico posto del sito dove compaiono le cifre */
.prezzi{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;perspective:1400px}
.pacchetto{position:relative;border:1px solid var(--bordo);border-radius:var(--r-grande);padding:36px 32px;display:flex;flex-direction:column;gap:22px;background:var(--carta);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s var(--molla),box-shadow .3s ease}
.pacchetto::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(500px circle at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.07),transparent 40%)}
.pacchetto:hover{box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}
.cifra{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cifra b{font:700 64px/1 var(--display);letter-spacing:-.03em}
.cifra span{color:var(--testo-2);font-size:15.5px}
.pacchetto .gruppo-voci{display:flex;flex-direction:column;gap:12px}
.pacchetto .gruppo-voci .eti{margin-top:6px}
.pacchetto .attivazione{margin-top:auto;border-top:1px solid var(--bordo);padding-top:18px;display:flex;flex-direction:column;gap:4px}
.pacchetto .attivazione b{font-weight:600}
.pacchetto .btn{justify-content:center}
.pacchetto.forte{background:linear-gradient(180deg,rgba(28,181,168,.24),rgba(28,181,168,.06));border-color:var(--acc);box-shadow:0 40px 90px -45px rgba(28,181,168,.7)}
.pacchetto.forte .cifra b{color:var(--acc-testo)}
.consigliata{align-self:flex-start;background:var(--acc);color:var(--scuro);font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:100px}
.note-prezzi{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 32px}

/* ---------- l'anello delle pagine */
.anello-sez{padding-bottom:120px;overflow:hidden}
.anello-sez .testa{margin-bottom:24px}
.anello{position:relative;height:560px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.anello::before{content:"";position:absolute;left:50%;bottom:30px;width:min(900px,90%);height:90px;translate:-50% 0;background:radial-gradient(closest-side,rgba(28,181,168,.32),transparent);filter:blur(18px);pointer-events:none}
.anello.trascina{cursor:grabbing}
.anello:focus-visible .carta.scelta{outline:3px solid var(--acc);outline-offset:4px}
.giro{position:absolute;left:50%;top:48%;width:0;height:0}
.carta{position:absolute;left:0;top:0;border-radius:24px;overflow:hidden;background:var(--carta);color:#fff;will-change:transform,opacity;-webkit-user-drag:none;
  box-shadow:0 0 0 1px var(--bordo),0 50px 70px -36px rgba(0,0,0,.95);transition:box-shadow .4s ease}
.carta img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.carta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,26,0) 40%,rgba(8,20,26,.92) 100%);pointer-events:none}
.carta-testo{position:absolute;left:20px;right:20px;bottom:20px;z-index:1;display:flex;flex-direction:column;gap:8px}
.carta-testo small{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc-testo)}
.carta-testo b{font:700 23px/1.12 var(--display);letter-spacing:-.02em;text-wrap:balance}
.carta.scelta{box-shadow:0 0 0 1.5px var(--acc),0 0 70px -10px rgba(28,181,168,.7),0 50px 70px -36px rgba(0,0,0,.95)}
.anello-comandi{display:flex;justify-content:space-between;align-items:center;gap:16px}
.anello-comandi .eti{color:var(--testo-2)}
.frecce{display:flex;gap:8px}
.frecce button{width:50px;height:50px;border-radius:50%;border:1px solid var(--bordo);background:transparent;color:var(--testo-1);font:400 26px/1 var(--testo);cursor:pointer;transition:border-color .2s,background .2s}
.frecce button:hover{border-color:var(--acc);background:var(--acc-velo)}
.anello-scheda{max-width:780px;margin:44px auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;min-height:270px}
.anello-scheda.cambia>*{animation:compare .6s var(--molla) both}
.anello-scheda.cambia>*:nth-child(2){animation-delay:.04s}.anello-scheda.cambia>*:nth-child(3){animation-delay:.08s}.anello-scheda.cambia>*:nth-child(4){animation-delay:.12s}

/* ---------- domande */
.domande{display:grid;grid-template-columns:4fr 8fr;gap:80px}
.domande .elenco details{border-top:1px solid var(--bordo)}
.domande .elenco details:last-child{border-bottom:1px solid var(--bordo)}
.domande summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font:600 21px/1.3 var(--display);letter-spacing:-.012em;transition:color .2s}
.domande summary:hover{color:var(--acc-testo)}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:"+";font:400 26px/1 var(--testo);color:var(--acc-testo);transition:transform .3s var(--molla)}
.domande details[open] summary::after{transform:rotate(45deg)}
.domande details p{padding:0 48px 26px 0;color:var(--testo-2)}
.domande details[open] p{animation:compare .5s var(--molla)}

/* ---------- contatti */
.contatti{display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:center}
.contatti .contenuto{display:flex;flex-direction:column;gap:28px}
.recapiti{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;font-size:16px}
.recapiti dt{font:500 12px/1.9 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--testo-2)}
.contatti .foto{aspect-ratio:4/5}

/* ---------- testata delle pagine per argomento */
.copertina{position:relative;min-height:640px;display:flex;align-items:flex-end;color:#fff;padding:140px 0 80px;isolation:isolate;overflow:hidden}
.copertina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.copertina::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,20,26,.94) 0%,rgba(8,20,26,.62) 55%,rgba(8,20,26,.15) 100%),linear-gradient(0deg,var(--fondo) 0,rgba(14,29,35,0) 26%)}
.copertina .wrap{width:100%;display:flex;flex-direction:column;gap:22px}
.copertina .lead{max-width:34em}
.copertina .chip{align-self:flex-start;background:var(--acc);color:var(--scuro);font:500 12px/1 var(--mono);letter-spacing:.075em;text-transform:uppercase;padding:9px 14px;border-radius:100px}
.copertina .wrap>*{animation:compare 1s var(--molla) both}
.copertina .wrap>*:nth-child(2){animation-delay:.08s}.copertina .wrap>*:nth-child(3){animation-delay:.16s}.copertina .wrap>*:nth-child(4){animation-delay:.24s}.copertina .wrap>*:nth-child(5){animation-delay:.32s}

/* ---------- privacy e piede */
.privacy{padding:80px 0}
.privacy .colonne{display:grid;grid-template-columns:1fr 1fr;gap:20px 64px;font-size:15.5px;color:var(--testo-2)}
.privacy b{color:var(--testo-1);font-weight:600}
.piede{background:var(--fondo-3);color:var(--testo-2);font-size:14.5px;padding:28px 0 36px;border-top:1px solid var(--bordo)}
.piede .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}
.piede .logo{font-size:20px}
.piede a:hover{color:var(--testo-1)}

/* ---------- comparse allo scorrimento (solo con JavaScript e se l'utente non evita le animazioni) */
@media (prefers-reduced-motion:no-preference){
  .js .entra{opacity:0;translate:0 48px;scale:.97;filter:blur(6px);transition:opacity 1s ease,translate 1.1s var(--molla),scale 1.1s var(--molla),filter 1s ease}
  .js .entra.vista{opacity:1;translate:0 0;scale:1;filter:none}
  .js .gruppi>.entra:nth-child(3n+2),.js .prezzi>.entra:nth-child(2){transition-delay:.08s}
  .js .gruppi>.entra:nth-child(3n),.js .prezzi>.entra:nth-child(3){transition-delay:.16s}
  .js .passi>.entra:nth-child(2){transition-delay:.06s}.js .passi>.entra:nth-child(3){transition-delay:.12s}.js .passi>.entra:nth-child(4){transition-delay:.18s}.js .passi>.entra:nth-child(5){transition-delay:.24s}
  .js .entra-parole .parola{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
  .js .entra-parole .parola>span{display:inline-block;transform:translateY(110%) rotate(5deg);transform-origin:left bottom;transition:transform 1s var(--molla) calc(var(--i) * 55ms)}
  .js .entra-parole.vista .parola>span{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grana{animation:none}
  [data-parallasse]{transform:none}
}

/* ---------- schermi medi */
@media (max-width:1320px){.film[data-film="home"] .capitoli span{display:none}}
@media (max-width:1100px){
  section{padding:100px 0}
  section.film{padding:0}
  .menu{gap:22px;font-size:15px}
  .porta{min-height:540px;padding:32px}
  .problemi,.prodotto,.prodotto.rovescio,.contatti,.domande{grid-template-columns:1fr;gap:48px}
  .prodotto.rovescio .vis{order:0}
  .problemi .foto{aspect-ratio:16/10}
  .contatti .foto{display:none}
  .gruppi,.prezzi{grid-template-columns:1fr 1fr}
  .passi{grid-template-columns:repeat(3,1fr);row-gap:36px}
  .passi::after{display:none}
  .integrazioni .wrap{grid-template-columns:1fr;gap:20px}
  .fascia{grid-template-columns:1fr;padding:40px}
  .capitoli span{display:none}
}
/* ---------- telefono */
@media (max-width:760px){
  body{font-size:16.5px}
  .wrap{padding:0 20px}
  section{padding:76px 0}
  section.film{padding:0}
  .testata .wrap{height:auto;padding-top:12px;padding-bottom:10px;flex-wrap:wrap;row-gap:8px}
  .testata .btn{padding:10px 16px;font-size:14px}
  .testata .btn::after{content:none}
  .menu{order:3;flex-basis:100%;overflow-x:auto;gap:20px;font-size:14.5px;scrollbar-width:none;padding-bottom:4px}
  .menu::-webkit-scrollbar{display:none}
  .menu a{white-space:nowrap}
  .film{height:380vh}
  .film[data-film="home"]{height:620vh}
  .film[data-film="gestionale"],.film[data-film="social"]{height:300vh}
  .battuta,.battuta.s,.battuta.d,.battuta.c{left:20px;right:20px;top:calc(env(safe-area-inset-top,0px) + 118px);translate:none;max-width:none;text-align:left;align-items:flex-start;gap:14px}
  .battuta.d .voci li{padding-left:24px;padding-right:0}
  .battuta.d .voci li::before{left:0;right:auto}
  .battuta .d-xl{font-size:clamp(40px,11.5vw,58px)}
  .battuta .d-l{font-size:clamp(32px,9vw,44px)}
  .battuta .lead{font-size:16px}
  .battuta .voci{font-size:15px;gap:6px}
  .battuta .eti{font-size:10.5px}
  .velo.s,.velo.d{background:linear-gradient(180deg,rgba(8,20,26,.9) 0%,rgba(8,20,26,.55) 45%,transparent 66%)}
  .hud{bottom:calc(env(safe-area-inset-bottom,0px) + 18px);padding:0 20px}
  .orologio b{font-size:30px}
  .capitoli{gap:8px}
  .capitoli li{min-width:22px}
  .film + section{border-radius:26px 26px 0 0;margin-top:-26px}
  .porte{grid-template-columns:1fr}
  .porta{min-height:460px;padding:26px}
  .prob{grid-template-columns:1fr;gap:10px}
  .gruppi,.prezzi,.prima-ora{grid-template-columns:1fr}
  .fatti{grid-template-columns:1fr 1fr}
  .fatti div:nth-child(3){border-left:0}
  .fatti div:nth-child(n+3){border-top:1px solid var(--bordo)}
  .passi{grid-template-columns:1fr}
  .reel-fila{gap:10px}
  .reel-fila .reel:nth-child(2){transform:translateY(-16px) scale(1.04)}
  .pacchetto{padding:28px 24px}
  .cifra b{font-size:54px}
  .domande summary{font-size:19px}
  .domande details p{padding-right:0}
  .privacy .colonne{grid-template-columns:1fr}
  .copertina{min-height:600px;padding:160px 0 52px}
  .copertina::before{background:linear-gradient(180deg,rgba(8,20,26,.35) 0%,rgba(8,20,26,.94) 72%)}
  .fascia{padding:30px 24px}
  .btn{white-space:normal}
  .anello{height:440px}
  .anello-scheda{margin-top:28px;min-height:300px}
}

/* ---------- ancore: la testata fissa non deve coprire l'inizio della sezione */
[id]{scroll-margin-top:88px}
.ancora{position:absolute;top:0;left:0;width:1px;height:1px}

/* ---------- pagine per argomento */
.briciole{font-size:14px;color:var(--testo-2)}
.briciole a:hover{color:var(--acc-testo)}
.intro{display:flex;flex-direction:column;gap:16px;max-width:780px;margin-bottom:48px}
.vedi-anche{display:flex;flex-wrap:wrap;gap:10px}
.vedi-anche a{border:1px solid var(--bordo);background:var(--carta);border-radius:100px;padding:11px 18px;font-weight:600;font-size:15px;transition:border-color .2s,color .2s,transform .3s var(--molla)}
.vedi-anche a:hover{border-color:var(--acc);color:var(--acc-testo);transform:translateY(-2px)}

/* ---------- mappa delle pagine nel piede */
.piede .mappa{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 22px;padding-bottom:18px;margin-bottom:10px;border-bottom:1px solid var(--bordo)}
.piede .mappa a:hover{color:var(--testo-1)}
.piede .mappa .qui{color:var(--acc-testo)}