/* ============================================================
   ZAC design — foglio di stile condiviso (home + pagine interne)
   Temi: scuro (default) + chiaro. Token colore commutabili via data-theme.
   ============================================================ */

/* ---------- TEMA SCURO (default) ---------- */
:root{
  color-scheme: dark;
  --bg:        #0b0c12;
  --bg-2:      #12131e;
  --bg-3:      #191b29;
  --ink:       #f3f0ea;
  --muted:     #aab0c2;
  --muted-2:   #767b91;
  --line:      rgba(255,255,255,0.10);
  --line-soft: rgba(255,255,255,0.055);
  --glass:     rgba(18,19,30,0.72);
  --nav-bg:    rgba(11,12,18,0.72);

  --violet:    #7d5fff;   /* riempimenti/accento */
  --violet-2:  #ab98ff;   /* TESTO accento (chiaro, leggibile su scuro) */
  --indigo:    #4a37dd;
  --orange:    #ff7a33;   /* riempimenti */
  --orange-ink:#ff9a5e;   /* TESTO accento su scuro */
  --amber:     #ffba6e;   /* sempre su superfici scure (media) */
  --neon:      125,95,255; /* RGB del viola-blu dei pulsanti (glow hover card video) */

  --shadow:    0 40px 90px -34px rgba(0,0,0,0.85);
  --blob-op:   0.30;
  --glass-sec: rgba(20,18,34,0.34);   /* sfondo "vetro" (lieve cast viola) delle sezioni-pannello (cubo 3D sotto) */
  --grain-op:  0.038;

  --font-display:'Fraunces', Georgia, serif;
  --font-sans:'Archivo', system-ui, sans-serif;
  --font-mono:'Space Mono', monospace;
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- TEMA CHIARO ---------- */
[data-theme="light"]{
  color-scheme: light;
  --bg:        #f5f3ec;   /* carta calda */
  --bg-2:      #ffffff;
  --bg-3:      #ebe7dd;
  --ink:       #171821;
  --muted:     #53586a;
  --muted-2:   #888da0;
  --line:      rgba(23,24,33,0.12);
  --line-soft: rgba(23,24,33,0.07);
  --glass:     rgba(255,255,255,0.82);
  --nav-bg:    rgba(245,243,236,0.82);

  --violet:    #5b40f0;
  --violet-2:  #4124cc;   /* TESTO accento profondo per il bianco */
  --indigo:    #3a27bf;
  --orange-ink:#c84c06;   /* TESTO accento profondo per il bianco */

  --shadow:    0 30px 70px -36px rgba(40,30,80,0.22);
  --blob-op:   0.13;
  --glass-sec: rgba(255,255,255,0.46);
  --grain-op:  0.020;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .4s var(--ease), color .4s var(--ease);
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--orange); color:#0a0a0a; }

::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#7d5fff55; border-radius:20px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--violet); }

/* ---------- atmosfera: grana + bagliori (calmi) ---------- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:var(--grain-op);
  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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- sfondo 3D: cubo wireframe fisso dietro a tutto (z:0, sotto grana e sezioni) ----------
   Render e moto sono gestiti in assets/zac-bg3d.js. Il canvas sfuma all'avvio (.ready). */
#bg3d{ position:fixed; inset:0; z-index:0; pointer-events:none; }
#bg3d canvas{ display:block; width:100%; height:100%; opacity:0; transition:opacity 1.4s ease-in-out; }
#bg3d canvas.ready{ opacity:1; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
section{ position:relative; z-index:2; }

/* ---------- tipografia condivisa ---------- */
.kicker{
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--violet-2);
  display:inline-flex; align-items:center; gap:.7em;
}
.kicker::before{ content:""; width:26px; height:1px; background:var(--orange); display:inline-block; }
.kicker.center{ justify-content:center; }
/* attenzione per sezione: il trattino del kicker si "disegna" da sinistra quando la sezione
   entra in vista — sottolinea l'inizio di ogni sezione. Solo dentro i blocchi [data-reveal]
   (l'hero ha la sua animazione, resta intatto). */
[data-reveal] .kicker::before{ transform:scaleX(0); transform-origin:left center; transition:transform .7s var(--ease) .15s; }
[data-reveal].is-in .kicker::before{ transform:scaleX(1); }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-.015em; }
.serif-it{ font-style:italic; font-weight:500; }
.grad{ background:linear-gradient(105deg,var(--violet-2),var(--orange-ink)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ color:var(--muted); font-size:1.12rem; max-width:60ch; }

/* ---------- bottoni ----------
   Linguaggio premium condiviso: attrazione magnetica leggera (zac.js imposta
   --tx/--ty) e spotlight che segue il cursore (--mx/--my). Ogni variante ha
   la sua firma: primary = gradiente che scivola + lama di luce; wa = stessa
   meccanica in arancio (niente verde: solo i due colori del brand);
   ghost = cometa viola→arancio che percorre il bordo. */
@property --gx{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-sans); font-weight:600; font-size:.95rem;
  padding:.92em 1.5em; border-radius:100px; cursor:pointer; border:1px solid transparent;
  transform:translate(var(--tx,0px),var(--ty,0px));
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background-color .3s, background-position .6s var(--ease), color .3s, border-color .3s;
  will-change:transform;
}
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn:focus-visible{ outline:2px solid var(--violet-2); outline-offset:3px; }

/* spotlight comune: alone che segue il cursore dentro il bottone (sotto il testo) */
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(110px circle at var(--mx,70%) var(--my,50%), rgba(255,255,255,.28), transparent 62%);
  opacity:0; transition:opacity .35s var(--ease);
}
.btn:hover::after{ opacity:1; }

/* lama di luce: striscia diagonale che attraversa il bottone una volta per hover */
@keyframes btnSheen{ from{ transform:translateX(-180%) skewX(-20deg); } to{ transform:translateX(380%) skewX(-20deg); } }
.btn-primary::before,.btn-wa::before{
  content:""; position:absolute; z-index:-1; top:-6px; bottom:-6px; left:0; width:36%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35) 50%,transparent);
  transform:translateX(-180%) skewX(-20deg);
}
.btn-primary:hover::before,.btn-wa:hover::before{ animation:btnSheen .85s var(--ease) .05s; }

.btn-primary{
  background:linear-gradient(115deg,var(--violet),var(--indigo) 55%,#2c1ca4) 0 0 / 220% 100%;
  color:#fff; box-shadow:0 10px 30px -12px rgba(91,64,240,.6);
}
.btn-primary:hover{
  background-position:95% 0;
  transform:translate(var(--tx,0px),calc(var(--ty,0px) - 3px));
  box-shadow:0 18px 44px -14px rgba(91,64,240,.85), inset 0 0 0 1px rgba(171,152,255,.35);
}

/* WhatsApp: seconda tinta del brand (arancio), testo scuro per contrasto */
.btn-wa{
  background:linear-gradient(115deg,#ffa25c,var(--orange) 45%,#e8560c) 0 0 / 220% 100%;
  color:#211008; box-shadow:0 10px 28px -12px rgba(255,122,51,.55);
}
.btn-wa:hover{
  background-position:95% 0;
  transform:translate(var(--tx,0px),calc(var(--ty,0px) - 3px));
  box-shadow:0 18px 42px -14px rgba(255,122,51,.8), inset 0 0 0 1px rgba(255,186,110,.5);
}
.btn-wa:focus-visible{ outline-color:var(--orange-ink); }
.btn-wa::after{ background:radial-gradient(110px circle at var(--mx,70%) var(--my,50%), rgba(255,255,255,.4), transparent 62%); }

.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--gx), transparent 0deg 235deg, var(--violet) 300deg, var(--orange) 345deg, transparent 360deg);
  -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;
  opacity:0; transition:opacity .4s var(--ease);
}
.btn-ghost:hover{
  border-color:rgba(125,95,255,.28); background:rgba(125,95,255,.07);
  transform:translate(var(--tx,0px),calc(var(--ty,0px) - 3px));
  box-shadow:0 14px 34px -18px rgba(125,95,255,.55);
}
.btn-ghost:hover::before{ opacity:1; animation:btnComet 1.6s linear infinite; }
@keyframes btnComet{ to{ --gx:360deg; } }
.btn-ghost::after{ background:radial-gradient(110px circle at var(--mx,70%) var(--my,50%), rgba(125,95,255,.16), transparent 62%); }

.btn:active{ transition-duration:.12s; transform:translate(var(--tx,0px),var(--ty,0px)) scale(.97); }
.btn-lg{ padding:1.05em 1.8em; font-size:1.02rem; }

@media (prefers-reduced-motion:reduce){
  .btn{ transition:opacity .3s, background-color .3s, color .3s, border-color .3s; }
  .btn-primary:hover::before,.btn-wa:hover::before,.btn-ghost:hover::before{ animation:none; }
  .btn-primary:hover,.btn-wa:hover,.btn-ghost:hover,.btn:active{ transform:none; }
}

/* =========================================================
   NAV
   ========================================================= */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
  border-bottom:1px solid transparent;
}
header.nav.scrolled{
  background:var(--nav-bg); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:78px; }   /* altezza testata FISSA: non si restringe allo scroll */
.brand{ display:flex; align-items:center; gap:.6em; flex:none; }
.brand img{ height:35px; transition:transform .4s var(--ease), filter .4s; }
.brand:hover img{ transform:scale(1.04); }
[data-theme="dark"] .brand img{ filter:brightness(1.18) drop-shadow(0 0 14px rgba(125,95,255,.35)); }
[data-theme="light"] .brand img{ filter:brightness(.33) saturate(1.25); }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a.lnk{ font-size:.9rem; color:var(--muted); position:relative; padding:4px 0; transition:color .25s; }
.nav-links a.lnk::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--orange); transition:width .3s var(--ease); }
.nav-links a.lnk:hover{ color:var(--ink); }
.nav-links a.lnk:hover::after,.nav-links a.lnk.current::after{ width:100%; }
.nav-links a.lnk.current{ color:var(--ink); }
/* larghezza fissa del CTA: il testo cambia tra le pagine ("Parliamo del progetto"
   vs "Lavoriamo insieme") → senza questo la testata si sposta di qualche px */
.nav-links .btn-primary{ min-width:174px; justify-content:center; }
.nav-cta{ display:flex; align-items:center; gap:12px; }

/* selettore tema */
.theme-toggle{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease), border-color .3s, color .3s, background .3s;
}
.theme-toggle:hover{ border-color:var(--violet-2); color:var(--violet-2); transform:rotate(18deg); }
.theme-toggle svg{ width:22px; height:22px; }
.theme-toggle .moon{ display:none; }
[data-theme="light"] .theme-toggle .sun{ display:none; }
[data-theme="light"] .theme-toggle .moon{ display:block; }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--ink); transition:.3s; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; padding:170px 0 90px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(80px); opacity:var(--blob-op); }
.blob.b1{ width:520px; height:520px; top:-160px; right:-110px; background:radial-gradient(circle,rgba(125,95,255,.9),transparent 65%); animation:drift1 20s var(--ease) infinite alternate; }
.blob.b2{ width:440px; height:440px; bottom:-180px; left:-140px; background:radial-gradient(circle,rgba(255,122,51,.65),transparent 62%); animation:drift2 24s var(--ease) infinite alternate; }
.blob.b3{ width:320px; height:320px; top:32%; left:42%; background:radial-gradient(circle,rgba(74,55,221,.7),transparent 65%); animation:drift1 28s var(--ease) infinite alternate; }
@keyframes drift1{ to{ transform:translate(-50px,44px) scale(1.1);} }
@keyframes drift2{ to{ transform:translate(60px,-34px) scale(1.08);} }
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; }

.hero h1{ font-size:clamp(2.6rem,5.6vw,5rem); margin:.35em 0 .5em; }
.hero h1 .l{ display:block; opacity:0; transform:translateY(26px); animation:rise .9s var(--ease) forwards; }
.hero h1 .l:nth-child(1){ animation-delay:.15s; }
.hero h1 .l:nth-child(2){ animation-delay:.30s; }
.hero .kicker{ opacity:0; animation:fade .8s ease forwards; }
.hero .lead{ opacity:0; transform:translateY(20px); animation:rise .9s var(--ease) .5s forwards; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; opacity:0; transform:translateY(20px); animation:rise .9s var(--ease) .65s forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@keyframes fade{ to{ opacity:1; } }

.hero-portrait{ position:relative; opacity:0; transform:translateY(30px) scale(.97); animation:rise 1.1s var(--ease) .4s forwards; }
.portrait-frame{
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow), 0 0 0 1px rgba(125,95,255,.12);
  animation:float 7s ease-in-out infinite;
}
.portrait-frame img,
.portrait-frame video{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.portrait-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(8,9,15,.5)); }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
.stat-chip{
  position:absolute; backdrop-filter:blur(10px); background:var(--glass);
  border:1px solid var(--line); border-radius:16px; padding:14px 18px; z-index:3;
  box-shadow:var(--shadow);
}
.stat-chip .n{ font-family:var(--font-display); font-size:1.7rem; line-height:1; color:var(--ink); }
.stat-chip .n b{ color:var(--orange-ink); }
.stat-chip .t{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
.chip-1{ top:24px; left:-34px; animation:float 7s ease-in-out infinite .8s; }
.chip-2{ bottom:34px; right:-30px; animation:float 7s ease-in-out infinite 1.6s; }

/* =========================================================
   MARQUEE PROOF
   ========================================================= */
.proof{ border-block:1px solid var(--line-soft); background:var(--glass-sec); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); overflow:hidden; }
.proof-row{ display:flex; padding:22px 0; }
.marquee{ display:flex; white-space:nowrap; animation:scroll 40s linear infinite; }
.proof:hover .marquee{ animation-play-state:paused; }
.marquee span{ font-family:var(--font-display); font-size:1.45rem; color:var(--muted); padding:0 30px; display:inline-flex; align-items:center; gap:30px; }
.marquee span::after{ content:"\25C6"; color:var(--orange); font-size:.55rem; }
.marquee span em{ color:var(--ink); font-style:normal; }
@keyframes scroll{ to{ transform:translateX(-50%);} }

/* =========================================================
   SECTION SHELL
   ========================================================= */
.sec{ padding:clamp(80px,9vw,140px) 0; }
.sec-head{ max-width:760px; margin-bottom:60px; }
.sec-head.center{ margin:0 auto 64px; text-align:center; }
.sec-head h2{ font-size:clamp(2rem,4vw,3.3rem); margin:.4em 0 .45em; }
.sec-head p{ color:var(--muted); font-size:1.1rem; }

.js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-d="1"]{ transition-delay:.08s; }
[data-reveal][data-d="2"]{ transition-delay:.16s; }
[data-reveal][data-d="3"]{ transition-delay:.24s; }
[data-reveal][data-d="4"]{ transition-delay:.32s; }

/* =========================================================
   TWO DOORS
   ========================================================= */
.doors{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.door{
  position:relative; border:1px solid var(--line); border-radius:22px; padding:42px 38px 38px; overflow:hidden;
  background:linear-gradient(165deg,var(--bg-2),var(--bg)); transition:transform .5s var(--ease), border-color .5s, box-shadow .5s;
  min-height:340px; display:flex; flex-direction:column;
}
.door::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s; pointer-events:none; }
.door.az::before{ background:radial-gradient(600px 300px at 80% -10%,rgba(125,95,255,.20),transparent 70%); }
.door.ag::before{ background:radial-gradient(600px 300px at 80% -10%,rgba(255,122,51,.16),transparent 70%); }
.door:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.door.az:hover{ border-color:rgba(125,95,255,.5); }
.door.ag:hover{ border-color:rgba(255,122,51,.45); }
.door:hover::before{ opacity:1; }
.door .num{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; color:var(--muted-2); }
.door h3{ font-size:2rem; margin:18px 0 14px; }
.door.az h3 b{ color:var(--violet-2); }
.door.ag h3 b{ color:var(--orange-ink); }
.door p{ color:var(--muted); flex:1; }
.door .door-cta{ margin-top:26px; display:inline-flex; align-items:center; gap:.5em; font-weight:600; }
.door .door-cta .arr{ transition:transform .35s var(--ease); }
.door:hover .door-cta .arr{ transform:translateX(5px); }
.door.az .door-cta{ color:var(--violet-2); }
.door.ag .door-cta{ color:var(--orange-ink); }

/* =========================================================
   DIFFERENTIATOR
   ========================================================= */
.diff{ background:var(--glass-sec); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border-block:1px solid var(--line-soft); }
.diff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.diff-art{ position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); aspect-ratio:1/1; }
.diff-art img,.diff-art video{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.diff:hover .diff-art img,.diff:hover .diff-art video{ transform:scale(1.05); }
.diff-art .tag{ position:absolute; left:16px; bottom:16px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; background:rgba(10,10,16,.66); border:1px solid rgba(255,255,255,.18); padding:7px 12px; border-radius:8px; color:var(--amber); }
/* controlli del video (play/pausa + audio) — al posto del vecchio tag */
.vid-controls{ position:absolute; left:14px; bottom:14px; z-index:2; display:flex; gap:9px; }
.vc-btn{
  width:40px; height:40px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer; color:#f6f3ee;
  background:rgba(10,11,18,.55); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.vc-btn:hover{ transform:translateY(-3px) scale(1.08); background:rgba(125,95,255,.28); border-color:var(--violet-2); box-shadow:0 10px 24px -10px rgba(91,64,240,.7); }
.vc-btn:active{ transform:translateY(-1px) scale(.97); }
.vc-btn:focus-visible{ outline:2px solid var(--violet-2); outline-offset:2px; }
.vc-btn svg{ width:20px; height:20px; display:block; }
.vc-btn .ic-b{ display:none; }
.vc-btn.active .ic-a{ display:none; }
.vc-btn.active .ic-b{ display:block; }
.diff h2{ font-size:clamp(2rem,3.6vw,3rem); margin:.4em 0; }
.diff .two{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:34px; }
.diff .two .c h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:10px; }
.diff .two .c.craft h4{ color:var(--violet-2); }
.diff .two .c.ai h4{ color:var(--orange-ink); }
.diff .two .c p{ color:var(--muted); font-size:.96rem; }

/* =========================================================
   SERVICES
   ========================================================= */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:20px; overflow:hidden; }
.svc{ background:var(--bg); padding:38px 32px; transition:background .4s; }
.svc:hover{ background:var(--bg-3); }
.svc .n{ font-family:var(--font-mono); font-size:.8rem; color:var(--orange-ink); letter-spacing:.1em; }
.svc h3{ font-size:1.5rem; margin:18px 0 12px; }
.svc p{ color:var(--muted); font-size:.95rem; }

/* --- icone servizi: wireframe animato ---------------------------------
   Stato base = icona interamente disegnata (visibile anche senza animazioni:
   reduced-motion e mobile le fermano). I tratti "che si scrivono" usano
   pathLength=1 + dasharray, così i keyframes valgono per ogni lunghezza. */
.svc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.svc-ico{ width:42px; height:42px; flex:none; margin-top:-8px; color:var(--muted); opacity:.8; transition:color .4s, opacity .4s; }
.svc:hover .svc-ico{ color:var(--violet-2); opacity:1; }
.i-line,.i-draw{ stroke-dasharray:1; stroke-dashoffset:0; animation:icoDraw 4.6s ease-in-out infinite; }
.i-draw{ animation-duration:6.5s; }
.i-l2{ animation-delay:.3s; }
.i-l3{ animation-delay:.6s; }
@keyframes icoDraw{ 0%{ stroke-dashoffset:1; } 40%{ stroke-dashoffset:0; } 74%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:1; } }
.i-rotor{ animation:icoSpin 16s linear infinite; transform-box:fill-box; transform-origin:center; }
@keyframes icoSpin{ to{ transform:rotate(360deg); } }
.i-iris,.i-play{ animation:icoPulse 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes icoPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(.7); } }
.i-march{ stroke-dasharray:4 3; animation:icoMarch 3s linear infinite; }
@keyframes icoMarch{ to{ stroke-dashoffset:-14; } }
.i-spark{ animation:icoBreathe 3.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes icoBreathe{ 0%,100%{ transform:scale(1) rotate(0deg); } 50%{ transform:scale(.8) rotate(10deg); } }
.i-sat{ animation:icoTwinkle 3.8s ease-in-out infinite; }
.i-s2{ animation-delay:1.3s; }
@keyframes icoTwinkle{ 0%,100%{ opacity:.15; } 50%{ opacity:1; } }

/* --- icone "pains" (per le agenzie) ----------------------------------
   Stessa tecnica delle icone servizi (wireframe che si anima, stato base
   interamente disegnato), montate dentro il badge arancio della card.
   Ereditano currentColor = --orange-ink dal badge .ic. */
.pain-ico{ width:26px; height:26px; }
.pain:hover .ic{ background:rgba(255,122,51,.2); }
.i-lift{ animation:icoLift 3.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }   /* il foglio in cima alla pila si solleva: lo tolgo io */
@keyframes icoLift{ 0%,100%{ transform:translateY(0); opacity:1; } 50%{ transform:translateY(-4px); opacity:.5; } }
.i-add{ animation:icoPop 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }     /* la competenza mancante che si aggiunge on-demand */
@keyframes icoPop{ 0%,100%{ transform:scale(.4); opacity:0; } 32%,68%{ transform:scale(1); opacity:1; } }

/* =========================================================
   PORTFOLIO  (le tile media restano scure/colorate in entrambi i temi)
   ========================================================= */
.work-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:38px; align-items:center; }
.work-tabs .tab{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; padding:8px 16px; border:1px solid var(--line); border-radius:100px; color:var(--muted); cursor:pointer; transition:.3s; display:inline-flex; align-items:center; gap:.6em; }
.work-tabs .tab:hover{ color:var(--ink); border-color:var(--violet-2); background:rgba(125,95,255,.08); transform:translateY(-2px); box-shadow:0 8px 20px -12px rgba(125,95,255,.6); }
.work-tabs .tab.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.work-tabs .tab .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.tab .dot.cat-hotel{ background:#7d5fff; }
.tab .dot.cat-turismo{ background:#19a784; }
.tab .dot.cat-ecommerce{ background:#ff7a33; }
.tab .dot.cat-industria{ background:#3a86e0; }
.tab .dot.cat-servizi{ background:#d24a97; }
.tab .dot.cat-studi{ background:#d24a97; }
.tab .dot.cat-agroenergia{ background:#8bb02a; }
.tab .dot.cat-formazione{ background:#ff7a33; }
.work-count{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--muted-2); margin-left:auto; }
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card{ position:relative; border-radius:18px; overflow:hidden; height:140px; display:block; isolation:isolate; transition:transform .5s var(--ease); }
#lavori .card:hover{ transform:scale(1.04); }
.card.is-hidden{ display:none; }
/* filtro animato: le card filtrate entrano con dissolvenza + salita scaglionata */
@keyframes cardIn{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }
.work-grid .card.card-enter{ animation:cardIn .5s var(--ease) backwards; }
.card .media{ position:absolute; inset:0; }
.card .media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.card:hover .media img{ transform:scale(1.08); }
.card .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; }
.card .ph span{ font-family:var(--font-mono); font-size:.82rem; letter-spacing:.06em; color:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.2); border-radius:100px; padding:7px 15px; }
/* copertine-colore per categoria (placeholder finché non arrivano le copertine reali) */
.card .ph.cat-hotel{ background:linear-gradient(150deg,#3a2bd6,#11121d 72%); }
.card .ph.cat-turismo{ background:linear-gradient(150deg,#0e7d63,#0b1118 72%); }
.card .ph.cat-ecommerce{ background:linear-gradient(150deg,#c4571a,#160f0b 72%); }
.card .ph.cat-industria{ background:linear-gradient(150deg,#1d4f9c,#0a0e18 72%); }
.card .ph.cat-servizi{ background:linear-gradient(150deg,#9c2f6f,#150b13 72%); }
/* copertine nascoste "per ora": le card mostrano solo colore-categoria + titolo.
   Il colore passa dalla card stessa (via data-cat); per riattivare le copertine
   reali basta togliere la riga `.card .media{ display:none }`. */
.card .media{ display:none; }
.card[data-cat="hotel"]    { background:#3f366d; }
.card[data-cat="turismo"]  { background:#25574a; }
.card[data-cat="ecommerce"]{ background:#885133; }
.card[data-cat="industria"]{ background:#2f4668; }
.card[data-cat="studi"]      { background:#683c58; }
.card[data-cat="agroenergia"]{ background:#4e5a2d; }
.card[data-cat="formazione"] { background:#885133; }
.card[data-cat="servizi"]  { background:#683c58; }
/* hover: velo scuro (sotto al testo) che scurisce ulteriormente il colore */
.card::after{ content:""; position:absolute; inset:0; z-index:1; background:#000; opacity:0; transition:opacity .35s var(--ease); pointer-events:none; }
.card:hover::after{ opacity:.2; }
.card .overlay{ position:absolute; inset:0; z-index:2; background:none; display:flex; flex-direction:column; justify-content:flex-end; padding:14px 16px; }
.card .cat{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); text-shadow:0 1px 3px rgba(0,0,0,.45); }
.card .nm{ font-family:var(--font-display); font-size:1.35rem; margin-top:4px; color:#f6f3ee; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.card .url{ font-size:.8rem; color:rgba(255,255,255,.62); margin-top:4px; display:flex; align-items:center; gap:.4em; opacity:0; transform:translateY(6px); transition:.4s; }
.card:hover .url{ opacity:1; transform:none; }
/* credito di relazione sulle card — default: realizzato in Web Studio.
   Per un cliente diretto: aggiungere data-rel="diretto" sulla card. Per nasconderlo: data-rel="none". */
.card::before{
  content:"Web Studio"; position:absolute; top:12px; right:12px; z-index:3;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.9); text-shadow:0 1px 3px rgba(0,0,0,.5);
  pointer-events:none;
}
.card[data-rel="diretto"]::before{ content:"Cliente diretto"; }
.card[data-rel="none"]::before{ content:none; }

/* marcatore "sito web": la stessa icona della sezione Servizi, in basso a destra di ogni card */
.work-grid .card .overlay::after{
  content:""; position:absolute; right:14px; bottom:14px; width:26px; height:26px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='9' width='36' height='30' rx='3'/%3E%3Cpath d='M6 17h36'/%3E%3Cpath stroke-width='3' d='M11 13h.01M16 13h.01'/%3E%3Cpath d='M12 24h17'/%3E%3Cpath d='M12 29h24'/%3E%3Cpath d='M12 34h13'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.7; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.work-grid .card:hover .overlay::after{ opacity:1; transform:translateY(-2px); }

/* nota onesta + legenda sotto il titolo del portfolio */
.work-note{ color:var(--muted); font-size:.98rem; max-width:72ch; margin-top:18px; }
.work-note strong{ color:var(--ink); font-weight:600; }
.work-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:16px; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; color:var(--muted-2); }
.work-legend > span{ display:inline-flex; align-items:center; gap:.6em; }
.work-legend .lg{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; border-radius:7px; }
.work-legend .lg-studio,
.work-legend .lg-diretto{ background:var(--bg-3); color:var(--muted); border:1px solid var(--line); }

/* =========================================================
   VIDEO SHOWCASE (gallery + lightbox inline)
   ========================================================= */
.vhead-h{ font-size:clamp(1.7rem,3.2vw,2.6rem); margin:.3em 0 .3em; }
.vhead-p{ color:var(--muted); font-size:1.06rem; max-width:62ch; }
.vhead-p strong{ color:var(--ink); font-weight:600; }

/* striscia full-bleed che scorre da sola (stesso principio della marquee dei settori) */
.vstrip-sec{ padding:clamp(36px,5vw,72px) 0 clamp(70px,9vw,120px); }
.vstrip-sec .vhead{ margin-bottom:34px; }
.vstrip{
  overflow-x:auto; overflow-y:hidden; padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-overflow-scrolling:touch;              /* momentum su iOS quando il JS non c'è (fallback) */
  scrollbar-width:none;                          /* Firefox: niente barra */
  touch-action:pan-x;
}
.vstrip::-webkit-scrollbar{ display:none; }      /* Chrome/Safari: niente barra */

/* modalità potenziata (attivata dal JS): si trascina con mouse/dito + scorre da sola */
.vstrip.vdrag{ overflow:hidden; cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.vstrip.vdrag.is-grabbing{ cursor:grabbing; }
.vstrip.vdrag .vcard, .vstrip.vdrag .vthumb{ -webkit-user-drag:none; }

.vmarquee{ display:flex; width:max-content; will-change:transform; }

.vcard{
  position:relative; display:block; overflow:hidden; isolation:isolate; cursor:pointer;
  border-radius:16px; aspect-ratio:16/9;
  background:var(--bg-2); border:1px solid var(--line);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.vstrip .vcard{ flex:0 0 clamp(270px,27vw,380px); margin:0 9px; }
.vcard:hover{
  transform:translateY(-4px);
  border-color:var(--violet-2);        /* la linea che c'era già */
  box-shadow:                          /* + alone neon viola-blu tenue (oltre alla linea e all'ombra) */
    0 0 12px rgba(var(--neon),.38),
    0 0 28px rgba(var(--neon),.26),
    0 0 56px rgba(var(--neon),.14),
    var(--shadow);
}
.vcard:focus-visible{ outline:2px solid var(--violet-2); outline-offset:3px; }

.vthumb{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .8s var(--ease);
}
.vcard:hover .vthumb{ transform:scale(1.06); }

.vscrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,8,14,0) 32%, rgba(8,8,14,.5) 76%, rgba(8,8,14,.84) 100%);
  transition:background .45s;
}
.vcard:hover .vscrim{ background:linear-gradient(180deg, rgba(8,8,14,.14) 0%, rgba(8,8,14,.48) 58%, rgba(8,8,14,.86) 100%); }

.vplay{
  position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  background:transparent; border:1.5px solid rgba(255,255,255,.92); color:#fff;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));   /* leggibilità su copertine chiare */
  transition:transform .45s var(--ease), border-color .3s;
}
/* triangolo a sola linea bianca (la CSS vince sull'attributo fill inline) */
.vplay svg{ width:24px; height:24px; margin-left:3px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.vcard:hover .vplay{ transform:translate(-50%,-50%) scale(1.12); }

.vinfo{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:16px 18px; display:flex; flex-direction:column; gap:3px; }
.vttl{ font-family:var(--font-display); font-weight:600; line-height:1.15; font-size:1.02rem; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.55); }
.vsub{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.8); }

@media (prefers-reduced-motion:reduce){
  .vcard, .vthumb, .vplay, .vscrim{ transition:none; }
  .vcard:hover, .vcard:hover .vthumb, .vcard:hover .vplay{ transform:none; }
  /* nessuno scorrimento automatico (lo gestisce il JS): la striscia resta ferma finché non la si trascina */
}

/* ---- lightbox ---- */
html.vlb-lock{ overflow:hidden; }
.vlb{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:max(20px,4vh) clamp(16px,5vw,80px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.vlb.open{ opacity:1; visibility:visible; }
.vlb-backdrop{ position:absolute; inset:0; background:rgba(6,6,10,.82); backdrop-filter:blur(10px) saturate(120%); }
.vlb-stage{ position:relative; z-index:1; width:100%; max-width:1140px; transform:translateY(14px) scale(.985); transition:transform .4s var(--ease); }
.vlb.open .vlb-stage{ transform:none; }
.vlb-frame{
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
  border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.9);
}
.vlb-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vlb-cap{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:15px; }
.vlb-ttl{ font-family:var(--font-display); color:#fff; font-size:1.12rem; font-weight:600; }
.vlb-count{ font-family:var(--font-mono); color:rgba(255,255,255,.6); font-size:.8rem; letter-spacing:.1em; flex:none; }

.vlb-x, .vlb-nav{
  position:absolute; z-index:2; display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(20,20,28,.55); border:1px solid rgba(255,255,255,.2); border-radius:50%;
  cursor:pointer; backdrop-filter:blur(6px);
  transition:background .25s, transform .25s, border-color .25s;
}
.vlb-x:hover, .vlb-nav:hover{ background:var(--violet); border-color:var(--violet); }
.vlb-x{ top:18px; right:clamp(16px,4vw,40px); width:46px; height:46px; }
.vlb-x svg{ width:22px; height:22px; }
.vlb-x:hover{ transform:scale(1.08); }
.vlb-nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; }
.vlb-nav:hover{ transform:translateY(-50%) scale(1.08); }
.vlb-nav svg{ width:26px; height:26px; }
.vlb-prev{ left:clamp(8px,2.5vw,28px); }
.vlb-next{ right:clamp(8px,2.5vw,28px); }

@media (max-width:680px){
  .vlb{ padding:14px; }
  .vlb-nav{ width:42px; height:42px; }
  .vlb-nav svg{ width:22px; height:22px; }
  .vlb-prev{ left:6px; } .vlb-next{ right:6px; }
  .vlb-x{ width:40px; height:40px; top:10px; right:10px; }
}
@media (prefers-reduced-motion:reduce){
  .vlb, .vlb-stage{ transition:none; } .vlb-stage{ transform:none; }
}

/* =========================================================
   AGENCY BAND
   ========================================================= */
.agency{ background:var(--glass-sec); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border-block:1px solid var(--line-soft); }
.agency-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; }
.reassure{ display:grid; grid-template-columns:1fr 1fr; gap:18px 30px; }
.reassure .it{ display:flex; gap:14px; align-items:flex-start; }
.reassure .it .ck{ flex:none; width:26px; height:26px; border-radius:8px; background:rgba(255,122,51,.14); color:var(--orange-ink); display:flex; align-items:center; justify-content:center; font-size:.8rem; margin-top:2px; }
.reassure .it b{ display:block; font-size:1rem; }
.reassure .it span{ color:var(--muted); font-size:.9rem; }

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center; }
.about-photo{ border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.about-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.about blockquote{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:500; line-height:1.25; }
.about blockquote .grad{ font-style:italic; }
.about .meta{ display:flex; gap:30px; flex-wrap:wrap; margin-top:30px; }
.about .meta div .k{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }
.about .meta div .v{ font-size:.98rem; margin-top:4px; }

/* --- Chi sono · autoritratto → wireframe (sequenza frame su canvas) --------
   Il background = primo fotogramma: si vede anche senza JS/GSAP e con
   reduced-motion; il canvas ci disegna sopra i frame durante lo scroll. */
.about-clip{ background:var(--bg-3); }
.about-clip canvas{
  display:block; width:100%; aspect-ratio:4/5;
  background:url("../immagini/chi-sono-frames/f_001.avif") center/cover no-repeat;
  pointer-events:none; user-select:none; -webkit-user-select:none;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ border-top:1px solid var(--line-soft); }   /* niente vetro opaco: si vede il cubo wireframe dietro */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:flex-start; }
.contact h2{ font-size:clamp(2.2rem,4.4vw,3.6rem); }
.contact-info{ margin-top:34px; display:flex; flex-direction:column; gap:16px; }
.contact-info a{ display:flex; align-items:center; gap:16px; font-size:1.05rem; color:var(--ink); transition:color .3s; }
.contact-info a:hover{ color:var(--orange-ink); }

/* icone contatti — wireframe minimal, animate e coerenti fra loro (in tinta col cubo dietro) */
.contact-info a .ic{
  width:58px; height:58px; border-radius:50%; flex:none; position:relative; isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  color:var(--violet-2); border:1px solid var(--line); background:rgba(125,95,255,.05);
  transition:border-color .35s, background .35s, box-shadow .45s, transform .5s var(--ease);
}
.contact-info a .ic svg{ width:30px; height:30px; overflow:visible; display:block; }
.contact-info .ic svg .sig, .contact-info .ic svg .pulse{ transform-box:fill-box; transform-origin:center; }
.contact-info .ic--wa .pulse{ opacity:0; }

/* alone "respiro" tenue a riposo — su ::after per non litigare col glow dell'hover */
.contact-info a .ic::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; animation:icBreath 5s ease-in-out infinite; }
.contact-info a:nth-of-type(2) .ic::after{ animation-delay:1.6s; }
.contact-info a:nth-of-type(3) .ic::after{ animation-delay:3.2s; }

/* comparsa: le linee si "disegnano" quando la sezione entra in vista (a riposo restano piene, ok anche senza JS) */
.contact-info .ic .dr{ stroke-dasharray:1; }
[data-reveal].is-in .contact-info a:nth-of-type(1) .ic .dr{ animation:icDraw 1s var(--ease) .15s both; }
[data-reveal].is-in .contact-info a:nth-of-type(2) .ic .dr{ animation:icDraw 1s var(--ease) .30s both; }
[data-reveal].is-in .contact-info a:nth-of-type(3) .ic .dr{ animation:icDraw 1s var(--ease) .45s both; }

/* hover: cornice viola + glow neon (stesso linguaggio delle card video) + micro-gesto per icona */
.contact-info a:hover .ic{ transform:translateY(-3px); border-color:var(--violet-2); background:rgba(125,95,255,.12);
  box-shadow:0 0 12px rgba(var(--neon),.38), 0 0 30px rgba(var(--neon),.22), 0 0 60px rgba(var(--neon),.12); }
.contact-info a:hover .ic::after{ animation:none; }
.contact-info .ic--mail .sig{ transition:transform .4s var(--ease); }
.contact-info a:hover .ic--mail .sig{ transform:translateY(-2.5px); }      /* la falda della busta si solleva */
.contact-info a:hover .ic--tel .sig{ animation:icRing .7s var(--ease); }   /* il telefono squilla */
.contact-info a:hover .ic--wa .pulse{ animation:icPulse .9s var(--ease); } /* la notifica pulsa */

@keyframes icDraw{ from{ stroke-dashoffset:1; opacity:0; } 30%{ opacity:1; } to{ stroke-dashoffset:0; opacity:1; } }
@keyframes icBreath{ 0%,100%{ box-shadow:0 0 10px rgba(var(--neon),0); } 50%{ box-shadow:0 0 18px rgba(var(--neon),.16); } }
@keyframes icRing{ 0%,100%{ transform:rotate(0); } 18%{ transform:rotate(-14deg); } 36%{ transform:rotate(11deg); } 54%{ transform:rotate(-7deg); } 72%{ transform:rotate(4deg); } }
@keyframes icPulse{ from{ opacity:.55; transform:scale(.45); } to{ opacity:0; transform:scale(1.35); } }

@media (prefers-reduced-motion:reduce){
  .contact-info .ic .dr{ animation:none !important; }
  .contact-info a .ic::after,
  .contact-info a:hover .ic--tel .sig,
  .contact-info a:hover .ic--wa .pulse{ animation:none !important; }
}
form{ background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:34px; }
.fld{ margin-bottom:18px; }
.fld label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px; }
.fld input,.fld textarea,.fld select{
  width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:13px 15px;
  color:var(--ink); font-family:var(--font-sans); font-size:.98rem; transition:border-color .3s, box-shadow .3s;
}
[data-theme="light"] .fld input,[data-theme="light"] .fld textarea,[data-theme="light"] .fld select{ background:var(--bg-3); }
.fld input:focus,.fld textarea:focus,.fld select:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(125,95,255,.18); }
.fld textarea{ resize:vertical; min-height:110px; }
.seg{ display:flex; gap:10px; }
.seg label{ flex:1; cursor:pointer; position:relative; }
.seg input{ position:absolute; opacity:0; }
.seg .opt{ display:block; text-align:center; padding:12px; border:1px solid var(--line); border-radius:12px; font-size:.9rem; transition:.3s; }
.seg input:checked + .opt{ border-color:var(--violet); background:rgba(125,95,255,.12); color:var(--ink); }

/* presa visione privacy sotto i form (GDPR art. 13) */
.consent{ display:flex; gap:10px; align-items:flex-start; margin:2px 0 16px; font-size:.84rem; color:var(--muted); line-height:1.5; cursor:pointer; }
.consent input{ margin-top:3px; width:15px; height:15px; flex:none; accent-color:var(--violet); cursor:pointer; }
.consent a{ color:var(--violet-2); font-weight:600; }
.consent a:hover{ text-decoration:underline; }

/* =========================================================
   PAGINA PRIVACY — prosa informativa
   ========================================================= */
.legal{ max-width:860px; }
.legal h2{ font-size:clamp(1.25rem,2vw,1.55rem); margin:46px 0 14px; }
.legal h2 .fn{ font-family:var(--font-mono); font-size:.72rem; color:var(--orange-ink); margin-right:12px; letter-spacing:.1em; }
.legal p,.legal li{ color:var(--muted); line-height:1.75; font-size:.98rem; }
.legal p + p{ margin-top:12px; }
.legal ul{ list-style:none; margin:14px 0; display:grid; gap:10px; }
.legal li{ padding-left:22px; position:relative; }
.legal li::before{ content:"→"; position:absolute; left:0; color:var(--violet-2); font-family:var(--font-mono); font-size:.8rem; }
.legal b,.legal strong{ color:var(--ink); font-weight:600; }
.legal a{ color:var(--violet-2); font-weight:600; }
.legal a:hover{ text-decoration:underline; }
.legal .upd{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted-2); letter-spacing:.08em; text-transform:uppercase; margin-top:54px; }

/* =========================================================
   FOOTER
   ========================================================= */
footer{ background:var(--bg); padding:64px 0 40px; border-top:1px solid var(--line-soft); position:relative; z-index:2; }
.foot-grid{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; }
.foot-grid img{ height:35px; margin-bottom:16px; }
[data-theme="dark"] .foot-grid img{ filter:brightness(1.18); }
[data-theme="light"] .foot-grid img{ filter:brightness(.33) saturate(1.25); }
.foot-grid p{ color:var(--muted); font-size:.9rem; max-width:34ch; }
.foot-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.foot-col h5{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px; }
.foot-col a{ display:block; color:var(--muted); font-size:.92rem; margin-bottom:9px; transition:color .25s; }
.foot-col a:hover{ color:var(--ink); }
.foot-bottom{ margin-top:50px; padding-top:24px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--muted-2); font-size:.82rem; }

.note{ font-family:var(--font-mono); font-size:.7rem; color:var(--muted-2); letter-spacing:.04em; }

/* =========================================================
   PAGINE INTERNE — sotto-hero
   ========================================================= */
.subhero{ position:relative; padding:160px 0 70px; overflow:hidden; }
.subhero .crumb{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:22px; }
.subhero .crumb a{ color:var(--muted-2); }
.subhero .crumb a:hover{ color:var(--ink); }
.subhero h1{ font-size:clamp(2.4rem,5vw,4.2rem); margin:.2em 0 .4em; max-width:16ch; }
.subhero .lead{ font-size:1.18rem; }
.subhero .hero-actions{ margin-top:30px; opacity:1; transform:none; animation:none; }
/* hero agenzie a due colonne: testo + clip video (formato "Il metodo") */
.subhero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:center; }
.subhero-copy{ min-width:0; }
.subhero-art{ position:relative; }
.subhero-art .diff-art{ aspect-ratio:4/3; box-shadow:var(--shadow), 0 0 0 1px rgba(125,95,255,.12); }   /* clip hero in 4:3 (il video si vede meglio del quadrato) */
.subhero-art:hover .diff-art video{ transform:scale(1.05); }

/* pains / problemi che risolvo */
.pains{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pain{ border:1px solid var(--line); border-radius:18px; padding:30px 26px; background:linear-gradient(165deg,var(--bg-2),var(--bg)); transition:transform .5s var(--ease), border-color .5s; }
.pain:hover{ transform:translateY(-5px); border-color:rgba(255,122,51,.4); }
.pain .ic{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; background:rgba(255,122,51,.13); color:var(--orange-ink); margin-bottom:16px; }
.pain h3{ font-size:1.3rem; margin-bottom:10px; }
.pain p{ color:var(--muted); font-size:.96rem; }

/* steps / come lavoriamo */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:20px; overflow:hidden; }
.step{ background:var(--bg); padding:34px 28px; transition:background .4s; }
.step:hover{ background:var(--bg-3); }
.step .n{ font-family:var(--font-display); font-size:2.2rem; color:var(--violet-2); line-height:1; }
.step h3{ font-size:1.2rem; margin:14px 0 10px; }
.step p{ color:var(--muted); font-size:.93rem; }

/* chips formati/handoff */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chips span{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; border:1px solid var(--line); border-radius:100px; padding:8px 14px; color:var(--muted); background:var(--bg-2); }

/* CTA finale */
.cta-band{ text-align:center; }
.cta-band h2{ font-size:clamp(2rem,4.2vw,3.4rem); margin-bottom:16px; }
.cta-band p{ color:var(--muted); max-width:60ch; margin:0 auto 30px; font-size:1.1rem; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* solo screen-reader */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* =========================================================
   PAGINA AGENZIE — infografiche & sezioni interattive
   ========================================================= */

/* ---- credenziale: contatori ---- */
.cred-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:20px; overflow:hidden; margin:58px 0 64px; }
.cs{ background:var(--bg); padding:28px 20px 24px; text-align:center; transition:background .4s; }
.cs:hover{ background:var(--bg-3); }
.cs-n{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.3rem,4vw,3.3rem); line-height:1; color:var(--ink); display:block; font-variant-numeric:tabular-nums; }
.cs-n b{ font-weight:600; color:var(--violet-2); }
.cs:nth-child(even) .cs-n b{ color:var(--orange-ink); }
.cs-t{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-top:10px; display:block; }

/* ---- credenziale: timeline che si disegna ---- */
.tline{ position:relative; }
.tline-bar{ position:absolute; left:0; right:0; top:8px; height:2px; background:var(--line-soft); border-radius:2px; overflow:hidden; }
.tline-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--violet),var(--orange)); transform-origin:left center; }
.js .tline .tline-bar i{ transform:scaleX(0); transition:transform 1.8s var(--ease) .25s; }
.js .tline.is-in .tline-bar i{ transform:scaleX(1); }
.tline-steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.tline-steps li{ position:relative; padding-top:36px; }
.tline-steps li::before{
  content:""; position:absolute; top:0; left:0; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--violet); background:var(--bg); box-shadow:0 0 12px rgba(var(--neon),.45);
}
.tline-steps li:last-child::before{ border-color:var(--orange); box-shadow:0 0 12px rgba(255,122,51,.5); }
/* le tappe si accendono in sequenza, a tempo con la linea */
.js .tline .tline-steps li{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js .tline.is-in .tline-steps li{ opacity:1; transform:none; }
.js .tline.is-in .tline-steps li:nth-child(1){ transition-delay:.30s; }
.js .tline.is-in .tline-steps li:nth-child(2){ transition-delay:.75s; }
.js .tline.is-in .tline-steps li:nth-child(3){ transition-delay:1.2s; }
.js .tline.is-in .tline-steps li:nth-child(4){ transition-delay:1.65s; }
.tline .ty{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--orange-ink); }
.tline h3{ font-size:1.15rem; margin:8px 0 6px; }
.tline p{ color:var(--muted); font-size:.92rem; }

/* ---- orbita delle discipline (scena 3D) ----
   La scena dà la prospettiva; .orbit è il piano che si inclina (variabili
   --rx/--ry aggiornate con inerzia dal JS: mouse quando c'è, dondolio da solo).
   Nucleo e nodi vivono su quote Z diverse: il 3D si vede appena il piano ruota. */
.orbit-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.orbit-scene{ perspective:1100px; position:relative; }
/* alone d'energia sotto l'orbita: vende la profondità in entrambi i temi */
.orbit-scene::after{
  content:""; position:absolute; left:50%; bottom:-30px; width:72%; height:44px;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--neon),.22), rgba(var(--neon),0) 72%);
  filter:blur(10px); pointer-events:none;
}
.orbit{
  --R:clamp(120px,15vw,180px);
  position:relative; width:calc(var(--R)*2 + 116px); height:calc(var(--R)*2 + 116px); margin:0 auto; flex:none;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  will-change:transform;
}
/* anello orbitale tratteggiato che gira piano + anello interno in contro-rotazione */
.oring{
  position:absolute; inset:calc(50% - var(--R)); border-radius:50%;
  border:1px dashed rgba(var(--neon),.4);
  animation:oSpin 60s linear infinite; pointer-events:none;
}
.oring.r2{ inset:calc(50% - var(--R)*.56); border-color:transparent; border-top-color:rgba(255,122,51,.5); border-right-color:rgba(255,122,51,.14); animation:oSpinRev 22s linear infinite; }
@keyframes oSpin{ from{ transform:translateZ(-8px) rotate(0); } to{ transform:translateZ(-8px) rotate(360deg); } }
@keyframes oSpinRev{ from{ transform:translateZ(-4px) rotate(360deg); } to{ transform:translateZ(-4px) rotate(0); } }
/* satelliti: due scintille che percorrono l'anello, sotto i nodi */
.osat{ position:absolute; top:50%; left:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; z-index:1; pointer-events:none; }
.osat.s1{ background:var(--orange); box-shadow:0 0 10px var(--orange), 0 0 22px rgba(255,122,51,.5); animation:oSat 17s linear infinite; }
.osat.s2{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:var(--violet-2); box-shadow:0 0 9px rgba(var(--neon),.9); animation:oSatRev 26s linear infinite; }
@keyframes oSat{ from{ transform:rotate(0) translateX(var(--R)); } to{ transform:rotate(360deg) translateX(var(--R)); } }
@keyframes oSatRev{ from{ transform:rotate(200deg) translateX(var(--R)); } to{ transform:rotate(-160deg) translateX(var(--R)); } }
.ocore{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) translateZ(56px); z-index:2;
  width:144px; height:144px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--bg-2),var(--bg-3));
  border:1px solid rgba(125,95,255,.45);
  box-shadow:0 0 26px rgba(var(--neon),.28), inset 0 0 22px rgba(var(--neon),.12);
}
/* logo nel nucleo: stesso adattamento ai temi del logo in nav/footer */
.ocore img{ width:72%; height:auto; }
[data-theme="dark"] .ocore img{ filter:brightness(1.18) drop-shadow(0 0 10px rgba(125,95,255,.35)); }
[data-theme="light"] .ocore img{ filter:brightness(.33) saturate(1.25); }
/* respiro del nucleo: un anello che si espande e svanisce */
.ocore::after{ content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid rgba(var(--neon),.55); animation:oPulse 3.4s var(--ease) infinite; pointer-events:none; }
@keyframes oPulse{ from{ transform:scale(1); opacity:.7; } to{ transform:scale(1.55); opacity:0; } }
/* lampo del nucleo quando cambia disciplina (classe .kick dal JS) */
.ocore.kick{ animation:oKick .7s var(--ease); }
@keyframes oKick{ 30%{ box-shadow:0 0 44px rgba(var(--neon),.65), inset 0 0 30px rgba(var(--neon),.3); border-color:rgba(171,152,255,.9); } }
/* raggi centro→nodo; quello attivo si accende e fa viaggiare un segnale verso il centro */
.oline{ position:absolute; top:50%; left:50%; width:var(--R); height:1.5px; margin-top:-0.75px; background:var(--line); transform-origin:left center; transform:rotate(var(--a)); transition:background .4s; }
.oline.active{ background:linear-gradient(90deg,var(--violet),var(--orange)); box-shadow:0 0 8px rgba(var(--neon),.5); }
.oline::after{ content:""; position:absolute; top:50%; left:80%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--orange); opacity:0; }
.oline.active::after{ animation:oSignal 1.5s var(--ease) infinite; }
@keyframes oSignal{ 0%{ left:82%; opacity:0; } 18%{ opacity:1; } 100%{ left:8%; opacity:0; } }
.onode{
  position:absolute; top:50%; left:50%; z-index:3; width:96px; height:96px; margin:-48px 0 0 -48px;
  border-radius:50%; cursor:pointer;
  /* --tz: quota del nodo sul piano; sale su hover e quando è attivo (molla morbida) */
  --tz:16px;
  transform:rotate(var(--a)) translate(var(--R)) rotate(calc(var(--a)*-1)) translateZ(var(--tz)) scale(var(--sc,1));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:var(--bg-2); border:1px solid var(--line); color:var(--muted);
  font-family:var(--font-mono);
  transition:border-color .35s, box-shadow .35s, color .35s, background .35s,
             transform .65s cubic-bezier(.34,1.56,.64,1);
}
.onode svg{ width:30px; height:30px; }
.onode span{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; }
.onode:hover{ border-color:var(--violet-2); color:var(--ink); --tz:34px; }
.onode:focus-visible{ outline:2px solid var(--violet-2); outline-offset:3px; }
.onode.active{
  --tz:48px; --sc:1.07;
  border-color:var(--violet-2); color:var(--violet-2); background:rgba(125,95,255,.10);
  box-shadow:0 0 14px rgba(var(--neon),.42), 0 0 36px rgba(var(--neon),.2);
}
/* pannello dettagli: card bordata, giro completo di 360° sull'asse X.
   Il giro è spezzato in due metà nella stessa direzione: la scheda uscente
   (.leaving, classe dal JS) accelera da 0° a 180°, quella entrante prosegue
   la corsa da −180° a 0° con un piccolo ritardo — una rivoluzione intera,
   senza dissolvenze (le facce girate le nasconde backface-visibility).
   Bordo e sfondo riprendono lo stile card del sito (.pain), con l'accento
   viola dei nodi attivi quando la scheda è in primo piano. */
.opanel{ position:relative; perspective:1000px; }
.opanel article{
  position:absolute; inset:0; pointer-events:none;
  --pad:clamp(26px,3vw,40px); padding:var(--pad);
  border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(165deg,var(--bg-2),var(--bg));
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  transform:rotateX(-180deg); transform-origin:50% 50%;
}
.opanel article.active{
  position:relative; pointer-events:auto;
  transform:rotateX(0deg);
  transition:transform .6s var(--ease) .42s, border-color .5s, box-shadow .5s;
  border-color:rgba(125,95,255,.45);
  box-shadow:0 0 22px rgba(var(--neon),.14), var(--shadow);
}
/* uscita: prima metà del giro, in accelerazione (poi il JS toglie la classe
   e la card torna a −180° di scatto, già invisibile) */
.opanel article.leaving{
  transform:rotateX(180deg);
  transition:transform .5s cubic-bezier(.55,.06,.68,.19);
}
/* icona della disciplina in alto a destra (stesso trattamento delle card .pain) */
.opanel .oic{
  position:absolute; top:var(--pad); right:var(--pad);
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,122,51,.13); color:var(--orange-ink);
}
.opanel .oic svg{ width:26px; height:26px; }
.opanel .on{ display:inline-block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--orange-ink); }
.opanel h3{ font-size:clamp(1.5rem,2.4vw,2rem); margin:14px 0 12px; padding-right:60px; }
.opanel p{ color:var(--muted); margin-bottom:20px; max-width:52ch; }
/* touch: senza mouse il tilt lo fa il CSS — dondolio lento del piano
   (le custom property angolari vanno registrate per essere animabili) */
@property --rx{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@property --ry{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@media (pointer:coarse) and (prefers-reduced-motion:no-preference){
  .orbit{ animation:oSway 16s ease-in-out infinite; }
}
@keyframes oSway{
  0%,100%{ --rx:4deg;  --ry:-5deg; }
  50%    { --rx:-3deg; --ry:5deg; }
}
/* niente moto per chi lo chiede */
@media (prefers-reduced-motion:reduce){
  .oring, .osat, .ocore::after{ animation:none; }
  .osat{ display:none; }
  .onode{ transition:border-color .35s, box-shadow .35s, color .35s, background .35s; }
  /* il giro diventa un cambio istantaneo (le facce girate restano nascoste) */
  .opanel article, .opanel article.active, .opanel article.leaving{ transition:none; }
}
.onote{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; color:var(--muted-2); margin-top:46px; }
.onote strong{ color:var(--orange-ink); font-weight:700; }

/* ---- processo: binario con linea che si disegna ---- */
.flow{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:34px 28px; }
.flow-line{ position:absolute; top:23px; left:24px; right:24px; height:2px; background:var(--line-soft); border-radius:2px; overflow:hidden; }
.flow-line i{ display:block; height:100%; background:linear-gradient(90deg,var(--violet),var(--orange)); transform-origin:left center; }
.js .flow .flow-line i{ transform:scaleX(0); transition:transform 1.6s var(--ease) .2s; }
.js .flow.is-in .flow-line i{ transform:scaleX(1); }
.fstep{ position:relative; }
.fdot{
  position:relative; z-index:1; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-2); border:1px solid rgba(125,95,255,.45);
  font-family:var(--font-display); font-size:1.3rem; color:var(--violet-2);
  transition:box-shadow .4s, border-color .4s, color .4s;
}
.fstep:hover .fdot{ border-color:var(--violet-2); box-shadow:0 0 14px rgba(var(--neon),.45), 0 0 34px rgba(var(--neon),.18); }
.js .flow .fstep{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js .flow.is-in .fstep{ opacity:1; transform:none; }
.js .flow.is-in .fstep:nth-child(2){ transition-delay:.25s; }
.js .flow.is-in .fstep:nth-child(3){ transition-delay:.6s; }
.js .flow.is-in .fstep:nth-child(4){ transition-delay:.95s; }
.js .flow.is-in .fstep:nth-child(5){ transition-delay:1.3s; }
.fstep h3{ font-size:1.2rem; margin:18px 0 8px; }
.fstep p{ color:var(--muted); font-size:.93rem; }
.ftag{
  display:inline-block; margin-top:14px; padding:5px 11px; border-radius:8px;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange-ink); border:1px dashed rgba(255,122,51,.45);
}

/* ---- simulatore "capacità elastica" ---- */
.sim{ border:1px solid var(--line); border-radius:22px; padding:clamp(24px,4vw,44px); background:linear-gradient(165deg,var(--bg-2),var(--bg)); }
.sim-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.stab{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  padding:9px 18px; border:1px solid var(--line); border-radius:100px; color:var(--muted);
  background:transparent; cursor:pointer; transition:.3s;
}
.stab:hover{ color:var(--ink); border-color:var(--violet-2); background:rgba(125,95,255,.08); transform:translateY(-2px); }
.stab.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); transform:none; }
/* i valori dei tre scenari vivono qui: le barre transiscono da sole */
.sim[data-scen="scarico"]{ --hw:30; --hf:100; --ho:26; }
.sim[data-scen="normale"]{ --hw:62; --hf:100; --ho:58; }
.sim[data-scen="picco"]  { --hw:114; --hf:100; --ho:106; }
.sim-stage{ position:relative; display:flex; align-items:flex-end; justify-content:center; gap:clamp(26px,7vw,90px); padding-top:44px; }
.sim-cap{ position:absolute; left:0; right:0; bottom:calc(190px + 34px); border-top:2px dashed rgba(255,122,51,.4); pointer-events:none; }
.sim-cap span{ position:absolute; right:0; top:-22px; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-ink); opacity:.75; }
.sbar-g{ display:flex; flex-direction:column; align-items:center; gap:14px; width:clamp(64px,10vw,96px); }
.sbar{
  position:relative; width:100%; height:190px; display:flex; align-items:flex-end; border-radius:12px;
  background:repeating-linear-gradient(45deg, transparent 0 6px, var(--line-soft) 6px 7px);
}
.sbar i{ display:block; width:100%; border-radius:12px; transition:height .9s var(--ease); }
.sbar.work i{ height:calc(var(--hw,50)*1.9px); background:linear-gradient(180deg,#ffa25c,var(--orange)); box-shadow:0 6px 26px -8px rgba(255,122,51,.55); }
.sbar.fix i { height:calc(var(--hf,100)*1.9px); background:linear-gradient(180deg,var(--bg-3),var(--bg-2)); border:1px solid var(--line); box-sizing:border-box; }
.sbar.od i  { height:calc(var(--ho,50)*1.9px); background:linear-gradient(180deg,var(--violet-2),var(--indigo)); box-shadow:0 6px 26px -8px rgba(var(--neon),.6); }
/* etichette-flag contestuali, appoggiate sulla cima delle barre */
.sflag{
  position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; font-style:normal;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 9px; border-radius:7px; opacity:0; transition:opacity .5s var(--ease) .4s, bottom .9s var(--ease);
  pointer-events:none;
}
.sbar.work .sflag{ bottom:calc(var(--hw,50)*1.9px + 10px); background:rgba(255,122,51,.14); color:var(--orange-ink); border:1px dashed rgba(255,122,51,.5); }
.sbar.fix .sflag{ bottom:calc(var(--hf,100)*1.9px + 10px); color:var(--muted); border:1px dashed var(--line); }
.sim[data-scen="picco"] .sbar.work .sflag{ opacity:1; }
.sim[data-scen="scarico"] .sbar.fix .sflag{ opacity:1; }
.sl{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:center; }
.sim-note{ display:none; margin-top:36px; text-align:center; color:var(--muted); font-size:1.02rem; }
.sim-note strong{ color:var(--ink); font-weight:600; }
.sim[data-scen="scarico"] .sim-note[data-scen="scarico"],
.sim[data-scen="normale"] .sim-note[data-scen="normale"],
.sim[data-scen="picco"]   .sim-note[data-scen="picco"]{ display:block; animation:rise .6s var(--ease); }

/* ---- settori: doppia marquee contro-scorrevole ---- */
.smq{ border-block:1px solid var(--line-soft); background:var(--glass-sec); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); overflow:hidden; }
.smq-row{ display:flex; padding:15px 0; }
.smq-row + .smq-row{ border-top:1px dashed var(--line-soft); }
.smq-track{ display:flex; white-space:nowrap; animation:scroll 44s linear infinite; }
.smq-row.rev .smq-track{ animation-direction:reverse; animation-duration:52s; }
.smq:hover .smq-track{ animation-play-state:paused; }
.smq-track span{ font-family:var(--font-display); font-size:1.35rem; color:var(--muted); padding:0 26px; display:inline-flex; align-items:center; gap:26px; }
.smq-track span::after{ content:"\25C6"; color:var(--orange); font-size:.5rem; }
.smq-row.rev .smq-track span::after{ color:var(--violet); }
.smq-track span em{ color:var(--ink); font-style:normal; }

/* ---- FAQ a fisarmonica ---- */
.faq-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; }
.faq-head{ position:sticky; top:110px; }
.faq-head h2{ font-size:clamp(2rem,3.6vw,3rem); margin:.4em 0 .45em; }
.faq-head p{ color:var(--muted); font-size:1.1rem; }
.faqs{ border-top:1px solid var(--line); }
.faq{ border-bottom:1px solid var(--line); }
.fq{
  width:100%; display:flex; align-items:baseline; gap:18px; padding:22px 4px;
  background:none; border:0; cursor:pointer; text-align:left; color:var(--ink); font-family:var(--font-sans);
}
.fq:focus-visible{ outline:2px solid var(--violet-2); outline-offset:2px; border-radius:8px; }
.fn{ font-family:var(--font-mono); font-size:.7rem; color:var(--orange-ink); flex:none; }
.ft{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.1rem,1.8vw,1.3rem); flex:1; transition:color .3s; }
.fq:hover .ft{ color:var(--violet-2); }
.fx{ flex:none; position:relative; width:22px; height:22px; align-self:center; }
.fx::before,.fx::after{ content:""; position:absolute; top:50%; left:50%; background:var(--violet-2); transition:transform .45s var(--ease); }
.fx::before{ width:14px; height:1.6px; margin:-0.8px 0 0 -7px; }
.fx::after{ width:1.6px; height:14px; margin:-7px 0 0 -0.8px; }
.faq.open .fx::before{ transform:rotate(180deg); }
.faq.open .fx::after{ transform:scaleY(0); }
.fa{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.fa-in{ overflow:hidden; }
.fa-in p{ color:var(--muted); padding:0 44px 24px 40px; max-width:64ch; }
.faq.open .fa{ grid-template-rows:1fr; }

/* ---- responsive delle nuove sezioni ---- */
@media (max-width:980px){
  .cred-stats{ grid-template-columns:1fr 1fr; }
  .tline-steps{ grid-template-columns:1fr 1fr; gap:34px 28px; }
  .tline-bar{ display:none; }
  .orbit-wrap{ grid-template-columns:1fr; }
  .orbit{ --R:clamp(104px,26vw,150px); }
  .flow{ grid-template-columns:1fr 1fr; }
  .flow-line{ display:none; }
  .faq-grid{ grid-template-columns:1fr; gap:36px; }
  .faq-head{ position:static; }
}
@media (max-width:640px){
  .tline-steps{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr; }
  .orbit{ --R:min(30vw,118px); width:calc(var(--R)*2 + 80px); height:calc(var(--R)*2 + 80px); }
  .onode{ width:78px; height:78px; margin:-39px 0 0 -39px; }
  .onode svg{ width:24px; height:24px; }
  .ocore{ width:112px; height:112px; }
  .sim-stage{ gap:16px; }
  .sflag{ display:none; }
  .smq{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg-2); }
  .smq-track span{ font-size:1.1rem; padding:0 18px; gap:18px; }
}

/* =========================================================
   LOGHI / BRAND — muro loghi monocromo (piccoli, adattivi al tema)
   Le silhouette usano il canale alpha del PNG: brightness(0) = nere,
   + invert(1) = bianche. Così ogni logo (colore, scuro o negativo) diventa
   uniforme e leggibile su entrambi i temi. Reduced-motion: filtro resta.
   ========================================================= */
/* muro loghi che scorre da solo: stessa .vstrip dei video, verso opposto (JS data-dir="rev").
   Set duplicato ×2 nel markup per il loop continuo. Ogni logo in un quadrato bordato. */
.logo-strip .vmarquee{ align-items:center; }
.logo-strip .logo-cell{
  /* larghezza = ~1/6 della viewport (16px = i due margini) → mai più di 6 celle in vista;
     min 240px = celle comunque grandi anche su schermi stretti (lì se ne vedono ~5),
     tetto 400px per non esagerare sugli schermi larghissimi */
  flex:0 0 clamp(240px, calc(100vw / 6 - 16px), 400px); aspect-ratio:1/1; margin:0 8px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.logo-strip .logo-cell:hover{ background:var(--bg-3); border-color:var(--violet-2); }
/* logo centrato, monocromo adattivo al tema, in percentuale sul quadrato (proporzioni preservate) */
.logo-cell img{ max-width:64%; max-height:42%; opacity:.7; transition:opacity .35s var(--ease), filter .35s var(--ease); }
.logo-cell img.is-trulli{ max-width:76%; max-height:50%; }   /* Trulli Rosalinda: un filo più grande */
[data-theme="dark"] .logo-cell img{ filter:brightness(0) invert(1); }
[data-theme="light"] .logo-cell img{ filter:brightness(0); }
.logo-cell:hover img{ opacity:1; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .hero-grid,.subhero-grid,.diff-grid,.agency-grid,.about-grid,.contact-grid{ grid-template-columns:1fr; }
  .hero-portrait{ max-width:420px; margin:10px auto 0; }
  .subhero-art{ max-width:440px; margin:8px auto 0; }
  .doors{ grid-template-columns:1fr; }
  .svc-grid{ grid-template-columns:1fr 1fr; }
  .work-grid{ grid-template-columns:1fr 1fr; }
  .diff .two{ grid-template-columns:1fr; }
  .about-photo{ max-width:360px; }
  .pains{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
}
/* nav: hamburger già sotto i 1080px — sopra non ci sta tutto orizzontale nella
   barra (con logo a piena larghezza), così si evita overflow/clipping della testata */
@media (max-width:1080px){ /* 960→1080: con la voce "Preventivo" il menu orizzontale richiede ~1040px */
  .nav-links{ position:fixed; inset:64px 0 auto 0; background:var(--bg); flex-direction:column; align-items:flex-start; gap:0; padding:14px 28px 26px; border-bottom:1px solid var(--line); transform:translateY(-130%); transition:transform .4s var(--ease); }
  .nav-links.open{ transform:none; }
  .nav-links a.lnk{ padding:14px 0; width:100%; border-bottom:1px solid var(--line-soft); }
  .nav-links .btn{ margin-top:14px; }
  .burger{ display:flex; }
  .nav-cta .btn-ghost{ display:none; }
}
@media (max-width:640px){
  .svc-grid,.work-grid,.reassure,.pains,.steps{ grid-template-columns:1fr; }
  .stat-chip{ display:none; }
  .wrap{ padding:0 20px; }
  .work-count{ width:100%; margin:6px 0 0; }
  /* perf: alleggerisce il lavoro GPU su schermi piccoli (blur + moto infinito) */
  .blob{ animation:none !important; filter:blur(60px); }
  .blob.b3{ display:none; }
  .portrait-frame{ animation:none !important; }
  .svc-ico *,.pain-ico *{ animation:none !important; }   /* icone servizi/pains: statiche (e interamente disegnate) su mobile */
  /* niente backdrop-blur su mobile (pesante sul cubo WebGL): sezioni piene */
  .proof,.diff,.agency,.contact{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg-2); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .js [data-reveal]{ opacity:1; transform:none; }
  [data-reveal] .kicker::before{ transform:none !important; }   /* trattino sempre visibile */
}

/* =========================================================
   PAGINA PREVENTIVO — calcolatore di stima in tempo reale
   Opzioni a sinistra, box-stima sticky a destra (logica in zac.js).
   I valori dinamici portano data-live: l'editor dei testi li ignora.
   ========================================================= */
/* il form unico avvolge tutta la griglia: azzera lo stile "form contatti" globale */
.calc-form{ background:none; border:0; border-radius:0; padding:0; }
.calc-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,4.5vw,60px); align-items:start; }

/* ---- colonna opzioni: gruppi numerati come i Servizi ---- */
.pstep{ border:0; padding:0; margin:0 0 46px; min-width:0; }
.calc-opts .pstep:last-child{ margin-bottom:0; }
.pstep legend{ display:flex; align-items:baseline; gap:14px; padding:0; margin-bottom:4px; }
.pstep .pn{ font-family:var(--font-mono); font-size:.8rem; color:var(--orange-ink); letter-spacing:.1em; }
.pstep .pt{ font-family:var(--font-display); font-weight:600; font-size:1.45rem; letter-spacing:-.01em; }
.pstep .pdesc{ color:var(--muted); font-size:.93rem; margin:2px 0 18px; max-width:56ch; }

/* opzione-card (radio e checkbox condividono il linguaggio) */
.popt{ position:relative; display:block; cursor:pointer; margin-bottom:12px; }
.popt:last-child{ margin-bottom:0; }
.popt input{ position:absolute; opacity:0; pointer-events:none; }
.popt .box{
  display:flex; align-items:flex-start; gap:14px;
  border:1px solid var(--line); border-radius:16px; padding:17px 18px;
  background:var(--bg-2); transition:border-color .3s, background .3s, box-shadow .3s, transform .3s var(--ease);
}
[data-theme="light"] .popt .box{ background:var(--bg-2); }
.popt:hover .box{ border-color:var(--violet-2); transform:translateY(-2px); box-shadow:0 10px 26px -18px rgba(var(--neon),.55); }
.popt input:checked + .box{ border-color:var(--violet); background:rgba(125,95,255,.10); }
.popt input:focus-visible + .box{ outline:2px solid var(--violet-2); outline-offset:2px; }
.popt .ptxt{ flex:1; min-width:0; }
.popt .ptxt b{ display:block; font-size:1rem; font-weight:600; line-height:1.3; }
.popt .pd{ display:block; color:var(--muted); font-size:.87rem; line-height:1.5; margin-top:3px; }
.popt .pz{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; color:var(--muted-2); white-space:nowrap; margin-top:4px; transition:color .3s; }
.popt input:checked + .box .pz{ color:var(--violet-2); }
/* indicatore: cerchio per i radio, quadrato con ✓ per le checkbox */
.popt .ckk{
  flex:none; width:20px; height:20px; margin-top:2px; position:relative;
  border:1.5px solid var(--line); border-radius:6px; background:var(--bg);
  transition:border-color .3s, background .3s;
}
.popt input[type="radio"] + .box .ckk{ border-radius:50%; }
.popt input:checked + .box .ckk{ border-color:var(--violet); background:var(--violet); }
.popt .ckk::after{
  content:""; position:absolute; opacity:0; transition:opacity .25s, transform .3s var(--ease);
}
.popt input[type="radio"] + .box .ckk::after{
  inset:5px; border-radius:50%; background:#fff; transform:scale(.4);
}
.popt input[type="checkbox"] + .box .ckk::after{
  left:6px; top:2.5px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(.6);
}
.popt input:checked + .box .ckk::after{ opacity:1; }
.popt input[type="radio"]:checked + .box .ckk::after{ transform:scale(1); }
.popt input[type="checkbox"]:checked + .box .ckk::after{ transform:rotate(45deg) scale(1); }
/* nota informativa sotto le opzioni (es. autonomia di aggiornamento HTML vs WordPress) */
.pinfo{
  margin-top:16px; padding:12px 16px; border-radius:0 12px 12px 0;
  border-left:2px solid var(--orange); background:var(--bg-2);
  font-size:.86rem; line-height:1.55; color:var(--muted);
}
.pinfo strong{ color:var(--ink); font-weight:600; }

/* piattaforma forzata da blog/e-commerce: nota esplicativa + opzione HTML spenta */
.pforce{
  display:none; margin:-4px 0 16px; padding:11px 14px; border-radius:12px;
  border:1px dashed rgba(125,95,255,.5); background:rgba(125,95,255,.08);
  font-size:.86rem; line-height:1.5; color:var(--muted);
}
.pforce.on{ display:block; }
.popt input:disabled + .box{ opacity:.45; }
.popt input:disabled ~ .flag{ opacity:.4; }
.popt:has(input:disabled){ cursor:not-allowed; }
.popt:has(input:disabled):hover .box{ transform:none; border-color:var(--line); box-shadow:none; }
/* impulso sulla card selezionata in automatico: attira l'occhio sul cambio */
@keyframes pAuto{ from{ box-shadow:0 0 0 0 rgba(var(--neon),.55); } to{ box-shadow:0 0 0 14px rgba(var(--neon),0); } }
.popt.autosel .box{ animation:pAuto .9s var(--ease) 2; }

/* bandierina "il più richiesto" (ancoraggio del prezzo, CRO) */
.popt .flag{
  position:absolute; top:-10px; right:16px; z-index:1;
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--violet); color:#fff; padding:4px 10px; border-radius:100px;
}

/* slider pagine aggiuntive */
.prange-row{ display:flex; align-items:center; gap:22px; }
.prange{
  -webkit-appearance:none; appearance:none; flex:1; height:28px;
  background:none; cursor:pointer; min-width:0;
}
.prange::-webkit-slider-runnable-track{
  height:6px; border-radius:100px;
  background:linear-gradient(90deg, var(--violet) var(--p,0%), var(--line) var(--p,0%));
}
.prange::-moz-range-track{ height:6px; border-radius:100px; background:var(--line); }
.prange::-moz-range-progress{ height:6px; border-radius:100px; background:var(--violet); }
.prange::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:50%;
  background:var(--violet); border:3px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.4), 0 0 14px rgba(var(--neon),.45);
}
.prange::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--violet); border:3px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.4), 0 0 14px rgba(var(--neon),.45);
}
.prange:focus-visible{ outline:2px solid var(--violet-2); outline-offset:4px; border-radius:100px; }
.prange-out{
  font-family:var(--font-display); font-weight:600; font-size:1.9rem; line-height:1;
  min-width:2.2ch; text-align:center; font-variant-numeric:tabular-nums;
}
.prange-cap{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); display:block; text-align:center; margin-top:6px; }

/* ---- colonna stima: box sticky ---- */
.calc-aside{ position:sticky; top:98px; min-width:0; }
.quote{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--line); border-radius:22px; padding:clamp(24px,3vw,34px);
  background:linear-gradient(165deg,var(--bg-2),var(--bg)); box-shadow:var(--shadow);
}
.quote::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(560px 260px at 85% -12%, rgba(125,95,255,.18), transparent 70%);
}
.q-k{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); display:flex; align-items:center; gap:.8em; }
/* pallino "live" che respira: dice all'occhio che il numero è vivo */
.q-k::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--orange); animation:qLive 2.2s ease-in-out infinite; }
@keyframes qLive{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(255,122,51,.5);} 50%{ opacity:.55; box-shadow:0 0 0 5px rgba(255,122,51,0);} }
.q-price{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; line-height:1.08;
  font-size:clamp(1.75rem,3.2vw,2.5rem); margin:14px 0 4px;
}
.q-price b{
  font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;
  background:linear-gradient(105deg,var(--violet-2),var(--orange-ink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.q-price.tick{ animation:qTick .4s var(--ease); }
@keyframes qTick{ 30%{ transform:scale(1.02); } }
.q-vat{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
/* riepilogo voce-per-voce */
.q-sum{ list-style:none; margin:18px 0 0; padding:14px 0 0; border-top:1px dashed var(--line); }
.q-sum li{ display:flex; justify-content:space-between; gap:18px; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.02em; color:var(--muted); padding:3.5px 0; }
.q-sum li b{ font-weight:400; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* avviso copywriter */
.q-note{
  margin-top:18px; padding:14px 16px; border-radius:14px;
  border:1px dashed rgba(255,122,51,.45); background:rgba(255,122,51,.07);
  font-size:.88rem; line-height:1.55; color:var(--muted);
}
.q-note strong{ color:var(--ink); font-weight:600; }
/* form dentro il box: niente doppia cornice */
.quote .q-form{ background:none; border:0; border-radius:0; padding:0; margin-top:22px; }
.q-form h3{ font-size:1.25rem; margin-bottom:4px; }
.q-form .q-sub{ color:var(--muted); font-size:.9rem; margin-bottom:16px; }
.q-form .btn{ width:100%; justify-content:center; }
/* honeypot anti-spam: invisibile agli umani */
.q-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.q-alt{
  display:block; text-align:center; margin-top:14px;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.05em; color:var(--muted);
  text-decoration:none; transition:color .25s;
}
.q-alt:hover{ color:var(--orange-ink); }
.q-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-top:16px; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; color:var(--muted-2); }
.q-trust span::before{ content:"\2713\00a0"; color:var(--orange-ink); }
.q-status{ display:none; margin-top:14px; padding:12px 14px; border-radius:12px; font-size:.9rem; line-height:1.5; }
.q-status.ok{ display:block; background:rgba(25,167,132,.13); border:1px solid rgba(25,167,132,.4); color:var(--ink); }
.q-status.err{ display:block; background:rgba(255,90,90,.10); border:1px solid rgba(255,90,90,.4); color:var(--ink); }

/* ---- "cosa succede dopo": 3 tappe orizzontali ---- */
.q-flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:20px; overflow:hidden; }
.q-flow .qf{ background:var(--bg); padding:30px 26px; transition:background .4s; }
.q-flow .qf:hover{ background:var(--bg-3); }
.q-flow .qf .n{ font-family:var(--font-display); font-size:2rem; line-height:1; color:var(--violet-2); }
.q-flow .qf h3{ font-size:1.15rem; margin:14px 0 8px; }
.q-flow .qf p{ color:var(--muted); font-size:.92rem; }

/* ---- barra mobile: la stima segue mentre configuri ---- */
.calc-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  background:var(--nav-bg); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.calc-bar.show{ transform:none; }
.calc-bar .cb-k{ font-family:var(--font-mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); display:block; }
.calc-bar .cb-p{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.calc-bar .btn{ flex:none; padding:.7em 1.3em; font-size:.88rem; }

/* ---- responsive calcolatore ---- */
@media (max-width:980px){
  .calc-grid{ grid-template-columns:1fr; }
  .calc-aside{ position:static; }
  .q-flow{ grid-template-columns:1fr; }
  .calc-bar{ display:flex; }
}
@media (max-width:640px){
  .popt .box{ padding:15px 14px; gap:11px; }
  .popt .pz{ display:block; }
  .prange-row{ gap:16px; }
}


/* ============================================================
   ZAC design — livello di adattamento WordPress/Elementor.
   Accodato a zac.css: qui vivono SOLO le regole che servono perché
   il sito gira su WP con Elementor invece che come HTML statico.
   ============================================================ */

/* percorso reale della sequenza frame "Chi sono" negli uploads WP */
.about-clip canvas{
  background-image:url("/wp-content/uploads/zac-assets/chi-sono-frames/f_001.avif");
}

/* toggle tema: nel prototipo sta nella nav, qui è un FAB fisso
   (la testata è gestita da Elementor). Riusa .theme-toggle di zac.css. */
.zac-theme-fab{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:46px; height:46px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}

/* Global Colors di Elementor agganciati al tema chiaro/scuro:
   il Kit scrive i valori dark; qui li ribaltiamo quando il tema è light,
   così anche i widget nativi che usano i colori globali cambiano tema. */
html[data-theme="light"] body{
  --e-global-color-primary:#5B40F0;
  --e-global-color-accent:#4124CC;
  --e-global-color-text:#171821;
  --e-global-color-zacbg:#F5F3EC;
  --e-global-color-zacbg2:#FFFFFF;
  --e-global-color-zacbg3:#EBE7DD;
  --e-global-color-zacmuted:#53586A;
  --e-global-color-zacmuted2:#888DA0;
  --e-global-color-zacindigo:#3A27BF;
  --e-global-color-zacorink:#C84C06;
}

/* i container Elementor hanno un padding di DEFAULT di 10px che nel
   prototipo non esiste: si azzera il solo default tramite le variabili
   ufficiali --container-default-padding-*. Così i padding impostati a
   mano nell'editor (che scrivono --padding-top ecc. sull'elemento)
   continuano a funzionare. NON usare `padding:0` qui: sovrascriverebbe
   la proprietà e bloccherebbe ogni regolazione manuale. */
.e-con{
  --container-default-padding-top:0px;
  --container-default-padding-right:0px;
  --container-default-padding-bottom:0px;
  --container-default-padding-left:0px;
}

/* i container Elementor con le classi delle sezioni del prototipo devono
   restare trasparenti: sotto passa il cubo 3D, il "vetro" lo danno le
   classi di zac.css */
.elementor .e-con.sec, .elementor .e-con.hero, .elementor .e-con.vstrip-sec, .elementor .e-con.proof{
  background:transparent;
}

/* niente margini fantasma del tema Hello attorno al contenuto */
.elementor-kit-1316 h1, .elementor-kit-1316 h2, .elementor-kit-1316 h3{
  font-family:var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-.015em;
}

/* il widget HTML di Elementor non deve limitare i figli full-bleed
   (marquee video/loghi escono dal contenitore come nel prototipo) */
.elementor-widget-html .vstrip{ overflow:hidden; }

/* form Elementor (contatti home): stessa pelle dei campi del prototipo */
.zac-form .elementor-field-group label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.zac-form input[type="text"], .zac-form input[type="email"], .zac-form input[type="tel"], .zac-form textarea{
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  color:var(--ink); padding:14px 16px; font-family:var(--font-sans); font-size:1rem;
  transition:border-color .3s, box-shadow .3s;
}
.zac-form input:focus, .zac-form textarea:focus{
  outline:none; border-color:var(--violet-2); box-shadow:0 0 0 3px rgba(125,95,255,.18);
}
.zac-form .elementor-field-type-radio .elementor-field-subgroup{ display:flex; gap:10px; flex-wrap:wrap; }
.zac-form .elementor-field-type-radio .elementor-field-option{
  border:1px solid var(--line); border-radius:100px; padding:.55em 1.1em;
  background:var(--bg-2); cursor:pointer;
}
.zac-form .elementor-field-type-radio .elementor-field-option:has(input:checked){
  border-color:var(--violet-2); background:rgba(125,95,255,.12); color:var(--ink);
}
.zac-form .elementor-button{
  width:100%; justify-content:center; border-radius:100px; font-weight:600;
  background:linear-gradient(115deg,var(--violet),var(--indigo) 55%,#2c1ca4);
  box-shadow:0 10px 30px -12px rgba(91,64,240,.6);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.zac-form .elementor-button:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px -14px rgba(91,64,240,.85);
}
.zac-form .elementor-message-success{ color:var(--violet-2); }
/* checkbox privacy (campo acceptance): stessa pelle del .consent del prototipo
   — niente titolo "Privacy" sopra, testo normale non-mono, spunta e link viola */
.zac-form .elementor-field-type-acceptance > .elementor-field-label{ display:none; }
.zac-form .elementor-field-type-acceptance .elementor-field-option{ display:flex; gap:10px; align-items:flex-start; }
.zac-form .elementor-field-type-acceptance .elementor-field-option label{
  font-family:var(--font-sans); font-size:.84rem; letter-spacing:0; text-transform:none;
  color:var(--muted); line-height:1.5; cursor:pointer;
}
.zac-form .elementor-field-type-acceptance input[type="checkbox"]{
  margin-top:3px; width:15px; height:15px; flex:none; accent-color:var(--violet); cursor:pointer;
}
.zac-form .elementor-field-type-acceptance a{ color:var(--violet-2); font-weight:600; }
.zac-form .elementor-field-type-acceptance a:hover{ text-decoration:underline; }

/* La sezione "Chi sono" è pinnata da GSAP ScrollTrigger, che a fine pin
   la "parcheggia" con un transform ISTANTANEO. Elementor però dà a ogni
   .elementor-element una transition di default che include transform .4s:
   il parcheggio veniva animato → la sezione scattava in su e si
   riassestava piano. Niente transition sull'elemento pinnato. */
.elementor-element.about{ transition:none; }

/* pagine costruite con Elementor: il contenuto sta sopra cubo e grana.
   Testata e footer però devono stare SOPRA il contenuto: hanno anche loro
   la classe .elementor e, a pari z-index, la pagina (dopo nel DOM) li
   coprirebbe — la nav sticky finirebbe sotto le sezioni durante lo scroll. */
.elementor{ position:relative; z-index:2; }
header.elementor-location-header{ z-index:80; }
footer.elementor-location-footer{ z-index:3; }

/* ---- testata: replica fedele della nav del prototipo ----
   Il wrapper del template header riceve id/classe "nav" da zac-assets.php
   (solo frontend reale): header.nav di zac.css lo rende fisso e trasparente,
   zac.js aggiunge .scrolled (vetro+blur). Qui solo gli adattamenti WP. */
body.admin-bar header.nav{ top:32px; }                       /* barra admin di WP */
header.nav .e-con-inner > .e-con{ width:auto; }              /* colonne a misura di contenuto */
header.nav .e-con-inner > .e-con:first-child{ margin-inline-end:auto; } /* logo a sx, menu+CTA a dx */
.brand img{ width:auto; }  /* gli attributi width/height che WP mette sull'immagine
                              non devono distorcere il logo (height 35px dal prototipo) */

/* drawer responsive del menu (hamburger): i colori del widget sono hex fissi
   (scuri); col tema chiaro il pannello segue il tema come nel prototipo.
   Specificità alta per battere il CSS generato da Elementor per il widget. */
@media (max-width:1024px){
  html[data-theme="light"] .elementor-2370 .elementor-element.elementor-element-c72b9d5 .xpro-elementor-horizontal-menu-responsive-tablet{ background-color:#F5F3EC; }
  html[data-theme="light"] .elementor-2370 .elementor-element.elementor-element-c72b9d5 .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a{ color:#171821; }
  html[data-theme="light"] .elementor-2370 .elementor-element.elementor-element-c72b9d5 .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li:hover > a{ color:#171821; }
}

/* ---- footer: replica fedele (classi .foot-* del prototipo sui container) ---- */
footer .foot-grid > .e-con, footer .foot-cols > .e-con{ width:auto; }
/* Elementor impone width:48px agli SVG nel widget Immagine
   (.elementor-widget-image img[src$=".svg"]): serve più specificità */
footer .foot-grid img, footer .foot-grid .elementor-widget-image img{ width:auto; }

/* ---- reset.css di Hello Elementor: NON caricato ----
   Imponeva a tutti i <button> padding .5rem 1rem, bordo/testo #c36,
   white-space:nowrap e sfondo FUCSIA #c36 su hover/focus: schiacciava le
   icone dei bottoni tondi a larghezza fissa (toggle tema, controlli video)
   e colorava di fucsia domande FAQ, toggle e controlli. Il prototipo non ha
   mai avuto quel reset e ogni suo bottone si stila da sé: zac-assets.php lo
   toglie alla fonte (filtro hello_elementor_enqueue_style → false).
   Unica regola che i widget nativi usavano davvero: il margine dei paragrafi
   (p{margin-block-end:.9rem}) — ripristinata SOLO per i widget testo. */
.elementor-widget-text-editor p{ margin-block:0 .9rem; }

/* ---- FAQ: la classe .fa del prototipo (pannello-risposta) coincide con la
   classe-icona di Font Awesome caricato da Elementor, che le impone font
   "Font Awesome 5 Free", peso 900, line-height 1 e inline-block: il testo
   delle risposte usciva con font e interlinea sbagliati. Si ripristina
   l'ereditarietà del prototipo (il display:grid ribadisce zac.css). */
.faqs .fa{
  display:grid;
  font-family:inherit; font-weight:inherit; font-style:inherit;
  font-variant:inherit; line-height:inherit; text-rendering:inherit;
  -webkit-font-smoothing:inherit; -moz-osx-font-smoothing:inherit;
}

/* toggle tema anche in testata: iniettato da zac-wp-boot.js accanto alla CTA
   (nel prototipo sta lì). Riusa .theme-toggle di zac.css. Il contenitore
   Elementor della CTA è una colonna: quando ospita il toggle diventa riga,
   altrimenti i due si impilano e la testata si alza. */
.zac-theme-nav{ flex:none; align-self:center; }
header.nav .e-con:has(> .zac-theme-nav){ flex-direction:row; align-items:center; gap:14px; }