/* =====================================================================
   AUDEX v2 — ottobre 2026
   Sistema «Cerniera Calda»: nero caldo, arancio e viola mai puri accanto,
   mediati dal fucsia #d8478c. Osiris per i titoli, Manrope per il testo.
   Senza JavaScript, senza rete o con «riduci movimento» la pagina è già
   completa: le animazioni (script.js) partono da stati spostati e arrivano
   a quello scritto qui.
   ===================================================================== */

@font-face{font-family:'Osiris';src:url(assets/fonts/Osiris.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Manrope';src:url(assets/fonts/manrope-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url(assets/fonts/manrope-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url(assets/fonts/manrope-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#0b0a0d; --card:#131017; --card-2:#17131c;
  --ink:#f5f4f8; --txt:#d8d6e0; --dim:#a5a2b0;
  --o:#ff5a1e; --p:#9b3cf0; --p-txt:#bd78ff; --bridge:#d8478c; --bridge-txt:#ec6aa6;
  --o-soft:#d9662f; --p-soft:#8e5cc4;
  --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.2); --glow:rgba(216,71,140,.22);
  --grad:linear-gradient(120deg,var(--o) 0%,var(--bridge) 52%,var(--p) 100%);
  --display:'Osiris','Manrope',system-ui,sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:clamp(1rem,4vw,2.6rem);
  --testata-h:64px;
  --grana:url(assets/img/grana-scura.webp);
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f1ea; --card:#faf7f0; --card-2:#efebe2;
  --ink:#16151a; --txt:#3b3a42; --dim:#5f5d67;
  --o:#c23600; --p:#7a2fc9; --p-txt:#7a2fc9; --bridge:#b32e6e; --bridge-txt:#a8235f;
  --o-soft:#b0481f; --p-soft:#7e4bb0;
  --line:rgba(0,0,0,.12); --line-2:rgba(0,0,0,.2); --glow:rgba(179,46,110,.14);
  --grana:url(assets/img/grana-chiara.webp);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--testata-h) + 12px)}
body{background-color:var(--bg);background-image:var(--grana);color:var(--ink);font-family:var(--body);font-weight:400;font-size:1rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
::selection{background:var(--o);color:#0a0a0a}
:focus-visible{outline:2px solid var(--o);outline-offset:3px;border-radius:6px}
/* il cursore a X sostituisce quello di sistema solo quando script.js l'ha davvero acceso */
.cursore-x body,.cursore-x a,.cursore-x button,.cursore-x label{cursor:none}
.cursore-x input,.cursore-x textarea{cursor:text}

.solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.salta{position:fixed;left:1rem;top:-100px;z-index:200;background:var(--o);color:#0a0a0a;font-weight:700;padding:.7rem 1rem;border-radius:10px}
.salta:focus{top:1rem}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}

/* lo stato iniziale dell'apertura esiste solo con JavaScript e solo finché l'apertura sta per partire */
.js:not(.intro-off):not(.riduci) [data-intro]{visibility:hidden}

/* ---------------- atmosfera ---------------- */
/* grana: è nello sfondo stesso (una trama già del colore della pagina), non uno strato fisso sopra tutto:
   costa meno ai telefoni e non blocca le foto a pagina intera degli script di verifica */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none}
.prog i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:left}

/* cursore a X: solo mouse, nascosto finché il mouse non si muove */
.xc{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:26px;height:26px;opacity:0;mix-blend-mode:difference;
  transition:opacity .3s}
.xc::before,.xc::after{content:'';position:absolute;background:#fff;border-radius:2px;transition:transform .25s var(--ease)}
.xc::before{left:50%;top:0;width:2px;height:100%;margin-left:-1px;transform:rotate(45deg)}
.xc::after{top:50%;left:0;height:2px;width:100%;margin-top:-1px;transform:rotate(45deg)}
.xc.on{opacity:1}
.xc.grow::before{transform:rotate(45deg) scale(2)}.xc.grow::after{transform:rotate(45deg) scale(2)}
/* il cursore esiste solo quando script.js l'ha acceso (mouse, movimento gradito) */
.xc{display:none}
.cursore-x .xc{display:block}
@media (hover:none),(pointer:coarse){.cursore-x .xc{display:none}}

/* ---------------- testata ---------------- */
.testata{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--testata-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 var(--gutter);padding-top:env(safe-area-inset-top,0px);transition:transform .45s var(--ease)}
/* il fondo della testata entra con l'opacità di uno strato, non animando colori */
.testata::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);opacity:0;transition:opacity .35s}
.testata.fondo::before,.testata.menu-aperto::before{opacity:1}
.testata.su{transform:translateY(-110%)}
.testata:focus-within{transform:none}
.marchio{font-family:var(--display);font-size:1.35rem;letter-spacing:.06em;line-height:1;padding:.7rem 0}
.menu{display:flex;gap:clamp(1rem,2vw,1.7rem);font-family:var(--display);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase}
.menu a{position:relative;color:var(--dim);padding:.5rem 0;transition:color .25s}
.menu a::after{content:'';position:absolute;left:0;right:0;bottom:.25rem;height:1px;background:var(--o);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.menu a:hover,.menu a[aria-current="true"]{color:var(--ink)}
.menu a:hover::after,.menu a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
/* sotto i 981 px il menu sta dietro un pulsante (con JavaScript); si apre come un pannello sotto la testata */
.menu-btn{display:none}
@media (max-width:980px){
  .menu{display:none}
  .js .menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:.5rem 1rem;border-radius:100px;
    border:1px solid var(--line-2);background:rgba(255,255,255,.03);font-weight:700;font-size:.9rem;transition:border-color .25s,color .25s}
  .js .menu-btn:hover{border-color:var(--o);color:var(--o)}
  html[data-theme="light"] .menu-btn{background:rgba(0,0,0,.04)}
  .testata.menu-aperto .menu{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;padding:.3rem var(--gutter) 1rem;
    background:var(--bg);border-bottom:1px solid var(--line);font-size:.85rem}
  .testata.menu-aperto .menu a{display:flex;align-items:center;min-height:52px;padding:0;border-bottom:1px solid var(--line);color:var(--ink)}
  .testata.menu-aperto .menu a::after{display:none}
}
.testata-dx{display:flex;align-items:center;gap:.7rem}
.tema{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.03);
  transition:border-color .25s,color .25s}
.tema:hover{border-color:var(--o);color:var(--o)}
html[data-theme="light"] .tema{background:rgba(0,0,0,.04)}
/* la CTA della testata è la stessa del titolo, in piccolo: stesso colore, stesso nome. Sul telefono c'è la barra in basso */
.cta-testata{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.1rem;border-radius:100px;border:1px solid var(--o);
  background:var(--o);color:#0a0a0a;font-weight:700;font-size:.88rem;transition:background-color .25s,border-color .25s,opacity .3s,visibility .3s}
.cta-testata:hover{background:#ff7340;border-color:#ff7340}
html[data-theme="light"] .cta-testata{color:#fff}
html[data-theme="light"] .cta-testata:hover{background:#a82e00;border-color:#a82e00}
.testata.senza-cta .cta-testata{opacity:0;visibility:hidden}
@media (max-width:899px){.cta-testata{display:none}}

/* ---------------- pulsanti ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:50px;padding:.8rem 1.45rem;border-radius:100px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--ink);font-family:var(--body);font-weight:700;font-size:.98rem;
  line-height:1.2;text-align:center;transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s}
.btn:hover{border-color:var(--ink)}
.btn.primario{background:var(--o);border-color:var(--o);color:#0a0a0a}
.btn.primario:hover{background:#ff7340;border-color:#ff7340;box-shadow:0 14px 40px -14px rgba(255,90,30,.7)}
html[data-theme="light"] .btn{background:rgba(0,0,0,.03)}
html[data-theme="light"] .btn.primario{background:var(--o);color:#fff}
html[data-theme="light"] .btn.primario:hover{background:#a82e00;border-color:#a82e00}
.btn.grande{min-height:58px;font-size:1.05rem;padding:1rem 1.8rem}

/* ---------------- occhielli e titoli di sezione ---------------- */
.occhiello{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--display);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ac,var(--o))}
.occhiello::before{content:'';width:34px;height:2px;background:currentColor;transform:skewX(-20deg)}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(2.3rem,5.8vw,4.6rem);line-height:.98;letter-spacing:0;margin-top:1rem}
.h2 em{font-style:normal;color:var(--ac,var(--o))}
.lead{color:var(--txt);font-size:clamp(1.02rem,1.5vw,1.18rem);margin-top:1.1rem;max-width:56ch}
.sez-testa{max-width:60rem;margin-bottom:clamp(2rem,4.5vw,3.4rem)}
.lavori .sez-testa{margin-bottom:0}
/* parole che salgono da sotto una maschera (le crea script.js solo quando le animazioni sono attive) */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .14em;margin:0 -.04em -.14em}
.w>*{display:inline-block}

/* =====================================================================
   APERTURA
   ===================================================================== */
.apertura{position:relative;isolation:isolate}
.scena{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.alone{position:absolute;left:50%;top:42%;width:min(110vmin,1000px);height:min(110vmin,1000px);margin:calc(min(110vmin,1000px) / -2) 0 0 calc(min(110vmin,1000px) / -2);
  border-radius:50%;background:radial-gradient(circle,rgba(255,90,30,.14),rgba(216,71,140,.08) 38%,rgba(155,60,240,.06) 52%,transparent 68%);
  animation:respiro 7s ease-in-out 6}
@keyframes respiro{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
html[data-theme="light"] .alone{opacity:.6}
.anelli{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 50%;display:none}
.anelli i{position:absolute;left:50%;top:50%;width:84vmin;height:84vmin;margin:-42vmin 0 0 -42vmin;border:2px solid var(--o);border-radius:28px;
  box-shadow:0 0 22px -6px var(--o),inset 0 0 22px -8px var(--o);opacity:0;will-change:transform,opacity}
.anelli i:nth-child(even){border-radius:50%;border-color:var(--p);box-shadow:0 0 22px -6px var(--p),inset 0 0 22px -8px var(--p)}

.hero{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.55rem,1.6svh,1.2rem);padding:calc(var(--testata-h) + 1rem) var(--gutter) clamp(2.6rem,7svh,4.5rem);text-align:center}
.simbolo{position:relative;flex:none;height:clamp(150px,44svh,500px);aspect-ratio:1050/1000;max-width:100%}
.simbolo .meta,.simbolo .par,.simbolo .ent{position:absolute;inset:0}
.simbolo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.scia{display:none}
.maschere .scia{display:block;position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen;pointer-events:none;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.maschere .meta.a .scia{-webkit-mask-image:url(assets/img/x-a.webp);mask-image:url(assets/img/x-a.webp)}
.maschere .meta.b .scia{-webkit-mask-image:url(assets/img/x-b.webp);mask-image:url(assets/img/x-b.webp)}
.scia i{position:absolute;top:-25%;bottom:-25%;left:0;width:26%;
  background:linear-gradient(90deg,transparent,rgba(255,236,226,.15) 25%,rgba(255,255,255,.85) 50%,rgba(255,236,226,.15) 75%,transparent);
  transform:translateX(-200%) skewX(-18deg)}
html[data-theme="light"] .scia{display:none}
.lampo{position:absolute;left:52%;top:50%;width:3px;height:118%;border-radius:3px;opacity:0;
  background:linear-gradient(transparent,#fff 28%,var(--bridge) 50%,#fff 72%,transparent);box-shadow:0 0 26px 6px rgba(216,71,140,.55);
  transform:translate(-50%,-50%) rotate(33deg)}
.parola{position:absolute;left:50%;top:50%;z-index:2;display:flex;white-space:nowrap;font-family:var(--display);font-size:clamp(2.8rem,10vw,8.2rem);line-height:.9;
  letter-spacing:.04em;color:var(--ink);transform:translate(-50%,-50%);opacity:0;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.parola span{display:inline-block}

.hero-testi{display:flex;flex-direction:column;align-items:center;gap:clamp(.5rem,1.6svh,1.05rem)}
.hero .occhiello{color:var(--txt)}
.hero .occhiello::before{background:var(--o)}
.titolo{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,7.4vw,6.4rem);line-height:.95;letter-spacing:.01em}
.frase{color:var(--txt);max-width:44ch;font-size:clamp(1rem,1.35vw,1.15rem)}
.azioni{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:.3rem}
.veloci{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem;font-size:.9rem;color:var(--dim)}
.veloci a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.veloci a:hover{color:var(--ink);border-bottom-color:var(--o)}

.manifesto{position:relative;z-index:2;padding:clamp(4rem,12svh,7rem) var(--gutter);text-align:center}
.mani{font-family:var(--display);font-size:clamp(2.2rem,6.4vw,5.2rem);line-height:1.02;max-width:15ch;margin:0 auto}
.mani em{font-style:normal;color:var(--o)}
.cue{position:absolute;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));z-index:2;transform:translateX(-50%);display:none;
  font-family:var(--display);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-align:center}
.cue span{display:block;width:1px;height:22px;margin:.45rem auto 0;background:linear-gradient(var(--o),transparent);transform-origin:top;animation:cue 1.8s ease-in-out 6}
@keyframes cue{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* con le animazioni attive: l'apertura è una scena bloccata di una schermata */
.anim-ready .apertura{height:100vh;height:100svh;overflow:hidden}
.anim-ready .hero{height:100%;min-height:0}
.anim-ready .anelli{display:block}
.anim-ready .manifesto{position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--gutter);pointer-events:none;visibility:hidden}
.anim-ready .cue{display:block}
/* il nastro chiude la scena: entra in fondo alla schermata alla fine del tuffo, così dopo il manifesto non resta un vuoto */
.anim-ready .apertura .nastro{position:absolute;left:0;right:0;bottom:0;z-index:4;visibility:hidden}
@media (max-height:800px){.anim-ready .cue{display:none}}

@media (max-width:640px){
  :root{--testata-h:58px}
  .simbolo{height:clamp(140px,30svh,290px)}
  .titolo{font-size:clamp(2.3rem,11vw,3.4rem)}
  .frase{font-size:.98rem}
  .azioni{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .veloci{font-size:.86rem}
}

/* ---------------- nastro cinetico ---------------- */
.nastro{position:relative;z-index:2;overflow:hidden;padding:1.1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background-color:var(--bg);background-image:var(--grana);user-select:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* il nastro gira per otto minuti (12 giri) e si ferma: il punto d'arrivo è identico a quello di partenza */
.nastro-track{display:flex;width:max-content;animation:nastro 40s linear 12}
.nastro:hover .nastro-track{animation-play-state:paused}
@keyframes nastro{to{transform:translateX(-50%)}}
.nastro-set{display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem;white-space:nowrap;font-family:var(--display);
  font-size:clamp(1.25rem,3vw,2.3rem);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.nastro-set .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nastro-set .d{color:var(--dim)}
.nastro-set svg{width:1.05em;height:1.05em;flex:none}
@media (max-width:820px){.nastro-set{gap:1.6rem;padding-right:1.6rem}}

/* =====================================================================
   SEZIONI
   ===================================================================== */
.sezione{position:relative;padding:clamp(4.5rem,10vw,8.5rem) 0;border-top:1px solid var(--line);background-color:var(--bg);background-image:var(--grana)}
.griglia{display:grid;gap:1rem}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.g3{grid-template-columns:1fr}}
@media (max-width:600px){.g4{grid-template-columns:1fr}}
.tag{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.tag span{font-family:var(--display);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;border:1px solid var(--line);border-radius:100px;color:var(--dim)}
.vai{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;margin-top:1.2rem;min-height:44px;padding:.45rem 1rem;border-radius:100px;
  border:1px solid var(--line-2);font-weight:600;font-size:.88rem;color:var(--ink);transition:border-color .25s,color .25s}
.vai::after{content:'';width:.55em;height:.55em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:.1rem}
.vai:hover{border-color:var(--ac,var(--o));color:var(--ac,var(--o))}

/* schede (servizi, perché) */
.scheda{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-left:2px solid color-mix(in srgb,var(--ac,var(--o)) 60%,var(--line));
  border-radius:18px;padding:1.6rem 1.5rem 1.5rem;background:var(--card);transition:border-color .3s,box-shadow .3s}
.scheda:hover{border-color:color-mix(in srgb,var(--ac,var(--o)) 55%,var(--line));box-shadow:0 14px 44px -20px var(--glow)}
.scheda h3{font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,1.6vw,1.4rem);line-height:1.08;margin-bottom:.6rem}
.scheda p{color:var(--txt);font-size:.96rem}
.scheda .num{font-family:var(--display);font-size:1.7rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--ac,var(--o));margin-bottom:1rem}
/* etichette piccole: l'accento «soft» da solo non regge il testo piccolo, si schiarisce verso il colore del testo */
.scheda .meta-s{font-family:var(--display);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--ac,var(--o)) 70%,var(--ink));margin-bottom:.7rem}
.scheda .vai{margin-top:auto;padding-top:.45rem}
.servizi-griglia .scheda>p:not(.meta-s){margin-bottom:1.2rem}
.scheda .tag{margin-bottom:1.2rem}
/* alternanza «Cerniera Calda»: due schede vicine non hanno mai lo stesso accento puro */
.g4>.scheda:nth-child(odd){--ac:var(--o-soft)}
.g4>.scheda:nth-child(even){--ac:var(--p-soft)}
.g3>.scheda:nth-child(3n+1){--ac:var(--o-soft)}
.g3>.scheda:nth-child(3n+2){--ac:var(--p-soft)}
.g3>.scheda:nth-child(3n+3){--ac:var(--bridge)}
.scheda .vai:hover{color:var(--ink);border-color:var(--ac)}
/* la scheda dei contenuti con l'AI è larga e viola */
.g4>.scheda.ai{--ac:var(--p-soft)}
.scheda.larga{grid-column:span 2}
@media (max-width:600px){.scheda.larga{grid-column:auto}}
.scheda.ai{background:radial-gradient(120% 140% at 100% 0,color-mix(in srgb,var(--p) 14%,transparent),transparent 60%),var(--card)}

/* il pacchetto «Ci pensiamo noi»: il cliente manda i prodotti, al resto pensa Audex */
.pacchetto{--ac:var(--o);position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  margin-top:clamp(2.5rem,5vw,4rem);padding:clamp(1.6rem,4vw,3rem);border-radius:26px;border:1px solid color-mix(in srgb,var(--bridge) 45%,var(--line));
  background:radial-gradient(90% 120% at 0% 0%,rgba(255,90,30,.12),transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(155,60,240,.16),transparent 55%),var(--card)}
@media (max-width:900px){.pacchetto{grid-template-columns:1fr}}
.pacchetto-titolo{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.02;margin:.9rem 0 1rem}
.pacchetto-testo>p:not(.occhiello){color:var(--txt);max-width:52ch}
.pacchetto .btn{margin-top:1.4rem}
.pacchetto-testo>p.pacchetto-nota{font-size:.92rem;color:var(--dim);margin-top:.9rem}
.pacchetto-passi{list-style:none;counter-reset:passo;display:flex;flex-direction:column;gap:.8rem}
.pacchetto-passi li{counter-increment:passo;position:relative;display:flex;flex-direction:column;gap:.15rem;padding:1.1rem 1.2rem 1.1rem 4rem;border-radius:16px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);border:1px solid var(--line)}
.pacchetto-passi li::before{content:counter(passo,decimal-leading-zero);position:absolute;left:1.1rem;top:1.05rem;font-family:var(--display);font-size:1.5rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.2px var(--bridge)}
.pacchetto-passi b{font-weight:700;color:var(--ink)}
.pacchetto-passi span{color:var(--txt);font-size:.95rem}
html[data-theme="light"] .pacchetto{background:radial-gradient(90% 120% at 0% 0%,rgba(194,54,0,.08),transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(122,47,201,.1),transparent 55%),var(--card)}

/* ---------------- lavori: un gruppo per cliente ---------------- */
.lavori{padding-top:0}
.lavori-scena{position:relative;padding-top:clamp(4.5rem,10vw,8.5rem)}
.lavori-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.video-ctrl{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.5rem 1.1rem;border-radius:100px;border:1px solid var(--line-2);
  font-weight:600;font-size:.88rem;transition:border-color .25s,color .25s}
.video-ctrl::before{content:'';width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.video-ctrl[aria-pressed="true"]::before{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.video-ctrl:hover{border-color:var(--bridge);color:var(--bridge-txt)}
.reel{margin-top:clamp(2rem,4vw,3rem)}
/* telefono e pagina senza animazioni: i gruppi uno sotto l'altro, i lavori di ognuno scorrono di lato */
.reel-track{display:flex;flex-direction:column;gap:clamp(2.6rem,6vw,3.6rem)}
.gruppo{display:flex;flex-direction:column;gap:1rem}
.gruppo-testa{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;padding:0 var(--gutter)}
.gruppo-logo{display:block;height:36px;width:auto;max-width:180px;object-fit:contain;object-position:left center}
.gruppo-logo.libra{height:56px}
.gruppo-logo.bv{height:64px}
.gruppo-logo.logo-testo{height:auto;font-family:var(--display);font-size:2rem;line-height:1;letter-spacing:.06em;color:var(--p-txt)}
.gruppo-info h3{font-family:var(--display);font-weight:400;font-size:1.65rem;line-height:1.02}
.gruppo-settore{font-family:var(--display);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:.45rem}
.gruppo-cosa{color:var(--txt);font-size:.95rem;max-width:36ch;margin-top:.5rem}
.gruppo-info .vai{margin-top:.9rem}
html[data-theme="light"] .gruppo-logo:not(.libra):not(.logo-testo){filter:invert(1)}
.clips{display:flex;gap:.8rem;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);
  padding:.3rem var(--gutter) 1rem;scrollbar-width:thin;scrollbar-color:var(--bridge) transparent}
.clips:focus-visible{outline-offset:-4px}
.clip{flex:none;width:clamp(190px,58vw,270px);scroll-snap-align:start}
.clip figure{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#000;border:1px solid var(--line)}
.clip video,.clip .poster,.clip .mosaico{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* il video (aggiunto dallo script) copre la foto ferma solo quando parte davvero */
.clip video{opacity:0;transition:opacity .4s}
.clip video.in-onda{opacity:1}
.mosaico{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:#000}
.mosaico img{width:100%;height:100%;object-fit:cover}
.clip.chiaro .mosaico{background:#fff}
.clip.chiaro .mosaico img{object-fit:contain;padding:8%}
/* didascalie leggibili anche sopra i fotogrammi chiari (il telefono bianco del configuratore, il banco di Bags Vision) */
.clip figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.1rem;padding:4.2rem 1.05rem 1rem;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.94),rgba(0,0,0,.82) 45%,rgba(0,0,0,.45) 75%,transparent);text-shadow:0 1px 10px rgba(0,0,0,.65)}
.clip figcaption b{font-family:var(--display);font-weight:400;font-size:1.08rem;letter-spacing:.02em;line-height:1.15}
.clip figcaption span{font-size:.86rem;color:rgba(255,255,255,.9)}
.badge{position:absolute;top:.8rem;left:.8rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem;border-radius:100px;
  font-size:.78rem;font-weight:700;color:#fff;background:rgba(11,10,13,.82);border:1px solid var(--bridge)}
.badge::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--grad)}

/* senza JavaScript, sul telefono: i lavori vanno a capo su due colonne, tutti in vista */
@media (max-width:899px){
  html:not(.js) .clips{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}
  html:not(.js) .clip{width:calc(50% - .4rem)}
}
/* su computer, senza animazioni (niente JavaScript o «riduci movimento»): testata del cliente a sinistra, lavori a capo, tutti in vista */
@media (min-width:900px){
  html:not(.anim-ready) .gruppo{flex-direction:row;align-items:flex-start;gap:1.5rem;padding:0 max(var(--gutter),calc((100vw - 1240px) / 2 + var(--gutter)))}
  html:not(.anim-ready) .gruppo-testa{width:250px;flex:none;padding:0}
  html:not(.anim-ready) .gruppo-info h3{font-size:1.38rem;overflow-wrap:anywhere}
  html:not(.anim-ready) .clips{flex-wrap:wrap;overflow:visible;padding:0;scroll-snap-type:none}
  html:not(.anim-ready) .clip{width:clamp(200px,17vw,240px)}
}
/* su computer, con le animazioni: la scena dei lavori si blocca e i gruppi scorrono di lato, uno dopo l'altro */
@media (min-width:900px){
  .anim-ready .lavori-scena{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
    padding-top:calc(var(--testata-h) + 1.2rem);padding-bottom:1.5rem}
  .anim-ready .reel-track{flex-direction:row;width:max-content;gap:clamp(1.8rem,2.6vw,2.6rem);
    padding-left:max(var(--gutter),calc((100vw - 1240px) / 2 + var(--gutter)));padding-right:var(--gutter)}
  .anim-ready .gruppo{flex-direction:row;gap:.9rem}
  .anim-ready .gruppo-info h3{font-size:1.38rem;overflow-wrap:anywhere}
  .anim-ready .gruppo-testa{width:270px;height:min(56svh,560px);justify-content:space-between;padding:1.5rem 1.3rem;border:1px solid var(--line);
    border-radius:20px;background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--bridge) 12%,transparent),transparent 60%),var(--card)}
  .anim-ready .clips{overflow:visible;padding:0;scroll-snap-type:none}
  .anim-ready .clip{width:auto;height:min(56svh,560px);aspect-ratio:9/16}
  .anim-ready .clip figure{height:100%}
  .anim-ready .lavori .h2{font-size:clamp(2.2rem,4.6vw,4rem)}
}

/* ---------------- metodo ---------------- */
.fasi-wrap{position:relative}
.fasi{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.linea{position:absolute;left:1.5rem;right:1.5rem;top:2.4rem;height:2px;background:var(--line)}
.linea i{position:absolute;inset:0;background:var(--grad);transform-origin:left}
.fase{position:relative;border:1px solid var(--line);border-radius:18px;padding:1.5rem;background:var(--card)}
.fase .num{display:inline-grid;place-items:center;width:3rem;height:3rem;margin-bottom:1rem;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);
  font-family:var(--display);font-size:1rem;color:var(--ink)}
.fase:nth-child(odd){--ac:var(--o-soft)}.fase:nth-child(even){--ac:var(--p-soft)}
.fase .num{box-shadow:0 0 0 4px var(--card),0 0 22px -6px var(--ac)}
.fase h3{font-family:var(--display);font-weight:400;font-size:1.2rem;line-height:1.1;margin-bottom:.5rem}
.fase p{color:var(--txt);font-size:.93rem}
@media (max-width:1080px){.fasi{grid-template-columns:repeat(2,1fr)}.linea{display:none}}
@media (max-width:600px){
  .fasi{grid-template-columns:1fr}
  .fase{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;padding:1.2rem}
  .fase .num{grid-row:span 2;margin-bottom:0}
}

/* ---------------- studio ---------------- */
.persone{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:820px){.persone{grid-template-columns:1fr}}
.persona{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;padding:2.2rem 1.9rem;background:var(--card)}
.persona.carlo{--ac:var(--o)}.persona.lensy{--ac:var(--p-txt)}
.lettera{position:absolute;right:-.04em;top:-.26em;font-family:var(--display);font-size:clamp(8rem,16vw,12rem);line-height:1;color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--ac) 42%,transparent);pointer-events:none;user-select:none}
.ruolo{font-family:var(--display);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ac);margin-bottom:.5rem}
.persona h3{font-family:var(--display);font-weight:400;font-size:2rem;line-height:1;margin-bottom:.9rem}
.persona p{color:var(--txt);font-size:.96rem;max-width:46ch;position:relative}
.persona .tag{margin-top:1.3rem}

/* ---------------- contatti: il messaggio già scritto ---------------- */
.contatti-griglia{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1rem,3vw,2.5rem);align-items:start}
@media (max-width:900px){.contatti-griglia{grid-template-columns:1fr}}
.componi{display:flex;flex-direction:column;gap:1.4rem;border:1px solid var(--line);border-radius:22px;padding:clamp(1.3rem,3vw,2.2rem);background:var(--card)}
.componi fieldset{border:0}
.componi legend,.campo label{display:block;font-weight:700;font-size:1rem;margin-bottom:.7rem}
.facoltativo{font-weight:400;color:var(--dim)}
.scelte{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1.05rem;border-radius:100px;border:1px solid var(--line-2);font-weight:600;font-size:.92rem;
  color:var(--txt);transition:border-color .25s,color .25s}
.chip:hover span{border-color:var(--ink);color:var(--ink)}
/* scelto: testo scuro sul fucsia (4,9:1); nel tema chiaro bianco sul fucsia scuro (5,9:1) */
.chip input:checked+span{background:var(--bridge);border-color:var(--bridge);color:#0a0a0a}
html[data-theme="light"] .chip input:checked+span{color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--o);outline-offset:3px}
.campo input,.campo textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:12px;
  padding:.8rem .95rem;transition:border-color .25s}
.campo input::placeholder{color:var(--dim);opacity:1}
.campo input:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--o);outline-offset:1px;border-color:transparent}
.campo textarea{resize:vertical;min-height:5.5rem}
.anteprima-box{border-radius:16px;padding:1rem 1.1rem;background:var(--card-2);border:1px dashed var(--line-2)}
.anteprima-titolo{font-family:var(--display);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:.6rem}
.anteprima{white-space:pre-line;background:#1f3b2f;color:#eafff3;padding:.8rem 1rem;border-radius:14px 14px 4px 14px;font-size:.95rem;max-width:42ch;margin-left:auto}
html[data-theme="light"] .anteprima{background:#d9fdd3;color:#0d2a1d}
.componi .btn.grande{align-self:flex-start}
@media (max-width:600px){.componi .btn.grande{align-self:stretch}}
.nota{font-size:.88rem;color:var(--dim);margin-top:-.6rem}
.dopo{border-left:2px solid var(--bridge);padding:.4rem 0 .4rem 1.4rem}
.dopo h3{font-family:var(--display);font-weight:400;font-size:1.5rem;margin-bottom:1.1rem}
.dopo ol{list-style:none;counter-reset:passo;display:flex;flex-direction:column;gap:1.1rem}
.dopo li{counter-increment:passo;position:relative;padding-left:2.6rem;color:var(--txt)}
.dopo li::before{content:counter(passo);position:absolute;left:0;top:-.1rem;width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:.9rem;color:var(--ink);border:1px solid var(--line-2)}
.dopo li b{display:block;color:var(--ink);font-weight:700}
.altre{margin-top:1.6rem;color:var(--txt);line-height:1.5}
.altre a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--bridge);text-underline-offset:4px;transition:color .25s}
.altre a:hover{color:var(--bridge-txt)}

/* ---------------- chiusura ---------------- */
.piede{position:relative;border-top:1px solid var(--line);padding:clamp(4rem,9vw,7rem) 0 0;background-color:var(--bg);background-image:var(--grana);overflow:hidden}
.piede-frase{font-family:var(--display);font-size:clamp(1.8rem,4vw,3.2rem);line-height:1}
.piede-contatti{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin-top:1.4rem;color:var(--txt)}
.piede-contatti a,.piede-contatti span{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.piede-contatti a:hover{color:var(--ink);border-bottom-color:var(--o)}
.firma{font-family:var(--display);font-size:clamp(4.5rem,25vw,23rem);line-height:.78;letter-spacing:.02em;text-align:center;margin-top:clamp(2rem,5vw,4rem);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;white-space:nowrap}
.legale{text-align:center;color:var(--dim);font-size:.85rem;padding:1.4rem var(--gutter) calc(1.6rem + env(safe-area-inset-bottom))}
@media (max-width:899px){.legale{padding-bottom:calc(5.6rem + env(safe-area-inset-bottom))}}

/* ---------------- barra su telefono ---------------- */
.barra-mobile{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:75;display:grid;grid-template-columns:1fr 1.4fr;gap:.5rem;
  padding:.45rem;border-radius:100px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line);transform:translateY(160%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s}
.barra-mobile.is-visible{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
.barra-mobile a{display:grid;place-items:center;min-height:48px;border-radius:100px;font-weight:700;border:1px solid var(--line-2)}
.barra-mobile a.wa{background:var(--o);border-color:var(--o);color:#0a0a0a}
html[data-theme="light"] .barra-mobile a.wa{color:#fff}
@media (min-width:900px){.barra-mobile{display:none}}

/* ---------------- interazioni col mouse (approvate a settembre: tilt e bottoni magnetici) ---------------- */
@media (hover:hover) and (pointer:fine){
  .tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),border-color .3s,box-shadow .3s}
  .tilt.tilting{transition:transform .1s ease-out,border-color .3s,box-shadow .3s}
  .tilt::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;
    background:radial-gradient(280px circle at var(--px,50%) var(--py,50%),color-mix(in srgb,var(--ac,var(--o)) 18%,transparent),transparent 62%)}
  .tilt:hover::after{opacity:1}
  .mag{transform:translate(var(--mx,0px),var(--my,0px));transition:transform .55s var(--ease),background-color .25s,color .25s,border-color .25s,box-shadow .25s}
  .mag.magnet{transition:transform .12s ease-out,background-color .25s,color .25s,border-color .25s,box-shadow .25s}
}

/* ---------------- tema: un cerchio che si apre dal bottone ---------------- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}

/* ---------------- riduci movimento: tutto fermo e visibile ---------------- */
@media (prefers-reduced-motion:reduce){
  .alone,.nastro-track,.cue span{animation:none}
  .testata,.barra-mobile{transition:none}
}