/* =========================================================
   TOKEN
   ========================================================= */
:root{
  --atv-orange:#E8501E;
  --atv-flame:#FF5A1F;
  --atv-black:#000000;
  --atv-white:#FFFFFF;
  --atv-ink:#353535;           /* testo su bianco */
  --atv-muted:#8A8A8A;         /* seconda parte dei titoli su bianco */
  --atv-line:rgba(0,0,0,.1);
  --atv-ink-d:rgba(255,255,255,.72);   /* testo su nero */
  --atv-muted-d:rgba(255,255,255,.46);
  --atv-line-d:rgba(255,255,255,.14);

  --atv-font:"Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --atv-fs-h1:clamp(2.4rem, 1.1rem + 4.8vw, 5.4rem);
  --atv-fs-h2:clamp(2rem, 1.15rem + 3vw, 3.7rem);
  --atv-fs-h3:clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
  --atv-fs-body:clamp(1.0625rem, 1rem + .22vw, 1.1875rem);

  --atv-sheet:clamp(26px, 3.2vw, 44px);   /* raggio dei fogli */
  --atv-r-card:22px;
  --atv-r-btn:999px;
  --atv-wrap:1240px;
  --atv-gutter:clamp(20px, 4vw, 56px);
  --atv-section:clamp(96px, 12vw, 176px);
  --atv-ease:cubic-bezier(.2,.7,.15,1);
  /* grana leggera, disegnata una volta sola dal browser */
  --atv-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --atv-grain-light:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media (min-width:1800px){:root{--atv-wrap:1400px;--atv-fs-body:1.25rem}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* lo sfondo "dietro la pagina": chiaro in alto, scuro in fondo, e niente rimbalzo oltre i bordi */
html{background:#ECEDF0;overscroll-behavior-y:none}
html::after{content:"";position:fixed;left:0;right:0;bottom:0;height:50vh;background:#141414;z-index:-1;pointer-events:none}
body{margin:0;font-family:var(--atv-font);font-size:var(--atv-fs-body);line-height:1.62;color:var(--atv-ink);background:transparent;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block}
h1,h2,h3{margin:0;font-family:var(--atv-font);color:var(--atv-black);letter-spacing:-.03em;overflow-wrap:break-word}
h1{font-size:var(--atv-fs-h1);line-height:.98;font-weight:500}
h2{font-size:var(--atv-fs-h2);line-height:1.02;font-weight:500}
h3{font-size:var(--atv-fs-h3);line-height:1.2;font-weight:600;letter-spacing:-.015em}
h2 .soft{color:var(--atv-muted);transition:color 1.1s var(--atv-ease)}
h2.is-lit .soft{color:#000}
p{margin:0 0 1em;max-width:64ch}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--atv-black)}
.atv-key{color:var(--atv-orange);font-weight:600}
h1 .atv-key,h2 .atv-key{font-weight:inherit}
html{-webkit-tap-highlight-color:transparent}
:focus{outline:none}
:focus-visible{outline:2px solid rgba(0,0,0,.55);outline-offset:3px;border-radius:6px}
.sheet--dark :focus-visible{outline-color:rgba(255,255,255,.7)}
.atv-btn--primary:focus-visible{outline-color:var(--atv-orange)}
::selection{background:rgba(255,90,31,.3)}
.skip{position:absolute;left:-999px;top:8px;background:#000;color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px}
.wrap{width:min(100% - 2*var(--atv-gutter), var(--atv-wrap));margin-inline:auto}

/* =========================================================
   FOGLI: sezioni bianche e nere che si sovrappongono
   ========================================================= */
.sheet{position:relative;padding-block:var(--atv-section);border-radius:var(--atv-sheet) var(--atv-sheet) 0 0;margin-top:calc(var(--atv-sheet) * -1);overflow:hidden;overflow:clip;isolation:isolate}
.sheet--light{background:var(--atv-white);color:var(--atv-ink)}
.sheet--dark{background:var(--atv-black);color:var(--atv-ink-d)}
.sheet--dark h1,.sheet--dark h2,.sheet--dark h3,.sheet--dark strong{color:#fff}
.sheet--dark h2 .soft{color:var(--atv-muted-d)}
.sheet--dark h2.is-lit .soft{color:#fff}
.sheet:first-of-type{margin-top:0;border-radius:0}
/* bagliori statici: danno qualcosa da "vedere attraverso" al vetro, senza animazioni */
.glow{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;width:var(--s,60vw);height:var(--s,60vw);background:radial-gradient(closest-side, var(--c), transparent)}
.sheet--light .glow{--c:rgba(255,120,60,.16)}
.sheet--dark .glow{--c:rgba(232,80,30,.34)}


/* =========================================================
   AURORA — solo CSS, anima soltanto transform
   ========================================================= */
.atv-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;background:#fff;pointer-events:none}
.atv-aurora i{position:absolute;display:block;border-radius:50%;will-change:transform}
.atv-aurora i:nth-child(1){width:72vmax;height:72vmax;left:38%;top:-38%;background:radial-gradient(closest-side, rgba(255,143,0,.5), rgba(255,143,0,0));animation:au1 24s ease-in-out infinite alternate}
.atv-aurora i:nth-child(2){width:62vmax;height:62vmax;left:58%;top:30%;background:radial-gradient(closest-side, rgba(232,80,30,.55), rgba(232,80,30,0));animation:au2 30s ease-in-out infinite alternate}
.atv-aurora i:nth-child(3){width:50vmax;height:50vmax;left:-14%;top:48%;background:radial-gradient(closest-side, rgba(255,120,60,.28), rgba(255,120,60,0));animation:au3 34s ease-in-out infinite alternate}
.atv-aurora i:nth-child(4){width:44vmax;height:44vmax;left:14%;top:-24%;background:radial-gradient(closest-side, rgba(255,214,190,.85), rgba(255,214,190,0));animation:au4 28s ease-in-out infinite alternate}
@keyframes au1{to{transform:translate(-16vw,14vh) scale(1.12)}}
@keyframes au2{to{transform:translate(-20vw,-16vh) scale(.92)}}
@keyframes au3{to{transform:translate(18vw,-10vh) scale(1.15)}}
@keyframes au4{to{transform:translate(12vw,18vh) scale(1.08)}}
@media (max-width:768px), (pointer:coarse){
  .atv-aurora i:nth-child(n+3){display:none}
  .atv-aurora i{animation-duration:44s}
  .atv-aurora i:nth-child(1){left:10%;top:-30%;width:120vmax;height:120vmax}
  .atv-aurora i:nth-child(2){left:30%;top:35%;width:100vmax;height:100vmax}
}
@media (prefers-reduced-motion:reduce){.atv-aurora i{animation:none}}

/* =========================================================
   VETRO
   ========================================================= */
.atv-glass{
  position:relative;border-radius:var(--atv-r-card);
  background-color:rgba(255,255,255,.72);
  background-image:var(--atv-grain), linear-gradient(140deg, rgba(255,255,255,.8), rgba(255,255,255,.15) 50%, rgba(255,255,255,.45));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.04), 0 24px 48px -30px rgba(110,40,10,.28);
}
.sheet--dark .atv-glass{
  background-color:rgba(255,255,255,.035);
  background-image:var(--atv-grain-light), linear-gradient(140deg, rgba(255,255,255,.1), rgba(255,255,255,0) 45%, rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -34px rgba(0,0,0,.8);
}
.atv-glass--blur{-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}

/* icona Microsoft Fluent in una piccola lente */
.atv-icon{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--atv-orange)}
.atv-icon svg{width:26px;height:26px}

/* =========================================================
   PULSANTI E LINK
   ========================================================= */
.atv-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:600 1rem/1 var(--atv-font);text-decoration:none;padding:1.05em 1.55em;border-radius:var(--atv-r-btn);border:1px solid transparent;cursor:pointer;transition:background-color .35s ease, color .3s ease, border-color .35s ease, transform .2s ease}
/* l'ombra vive in un livello a parte: appare sfumando, senza ridisegnare il pulsante */
.atv-btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .55s var(--atv-ease)}
.atv-btn:hover::after,.atv-btn:focus-visible::after{opacity:1}
.atv-btn:active{transform:translateY(1px)}
.atv-btn:active::after{opacity:.5;transition-duration:.15s}

/* pulsante arancione: vetro arancione trasparente, ombra arancione morbida */
.atv-btn--primary{
  color:#fff;
  background-color:rgba(255,63,0,.74);
  background-image:var(--atv-grain-light), linear-gradient(140deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%);
  border-color:rgba(255,190,160,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px -10px rgba(255,63,0,.45);
  -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
}
.atv-btn--primary::after{box-shadow:0 16px 32px -10px rgba(255,80,20,.45), 0 5px 12px -4px rgba(255,80,20,.25)}
.atv-btn--primary:hover{background-color:rgba(255,90,31,.84);border-color:rgba(255,215,195,.95)}

/* pulsante secondario: vetro chiaro, ombra grigia leggerissima */
.atv-btn--ghost{
  color:#000;
  background-color:rgba(255,255,255,.5);
  background-image:var(--atv-grain), linear-gradient(140deg, rgba(255,255,255,.75), rgba(255,255,255,.1) 60%);
  border-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff, 0 4px 12px -8px rgba(0,0,0,.08);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
}
.atv-btn--ghost::after{box-shadow:0 16px 30px -12px rgba(0,0,0,.13), 0 4px 10px -4px rgba(0,0,0,.06)}
.atv-btn--ghost:hover{background-color:rgba(255,255,255,.8)}
.sheet--dark .atv-btn--ghost{color:#fff;background-color:rgba(255,255,255,.08);background-image:var(--atv-grain-light), linear-gradient(140deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.sheet--dark .atv-btn--ghost::after{box-shadow:0 12px 30px -10px rgba(255,255,255,.12)}
.sheet--dark .atv-btn--ghost:hover{background-color:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .atv-btn--primary{background-color:rgba(255,63,0,.9)}
  .atv-btn--ghost{background-color:rgba(255,255,255,.88)}
}

/* link: un punto arancione che si apre in anello */
.atv-link{display:inline-flex;align-items:center;gap:.65em;font-weight:600;text-decoration:none;color:inherit;transition:color .25s ease}
.sheet--light .atv-link{color:#000}
.sheet--dark .atv-link{color:#fff}
.atv-link::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--atv-orange);box-shadow:0 0 0 0 var(--atv-orange);transition:background-color .3s ease, box-shadow .3s var(--atv-ease)}
.atv-link:hover{color:var(--atv-orange)}
.atv-link:hover::after{background:transparent;box-shadow:0 0 0 2px var(--atv-orange)}

/* apparizioni: una salita discreta, niente sfocature */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--atv-ease), transform .8s var(--atv-ease);transition-delay:calc(var(--i,0) * 60ms)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* =========================================================
   HEADER — sempre fisso
   ========================================================= */
.site-header{position:fixed;left:0;right:0;top:max(12px, env(safe-area-inset-top));z-index:50}
.site-header .bar{display:flex;align-items:center;gap:20px;padding:8px 8px 8px 22px;border-radius:999px}
.site-header .bar.atv-glass{background-color:rgba(255,255,255,.58)}
.site-header .bar.atv-glass{border-radius:999px}
.logo{margin-right:auto;display:flex;align-items:center;text-decoration:none;padding:4px 0}
.logo img{height:26px;width:auto;display:block}
@media (max-width:420px){.logo img{height:22px}}
.nav{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:.6em .85em;border-radius:999px;text-decoration:none;font-size:.96rem;font-weight:500;color:#000;transition:color .2s ease, background-color .2s ease}
.nav a:hover{color:var(--atv-orange)}
.header-cta{padding:.8em 1.25em}
.menu-toggle{display:none;font:600 .95rem var(--atv-font);color:#000;border:1px solid rgba(255,255,255,.95);border-radius:999px;padding:.72em 1.1em;cursor:pointer;background-color:rgba(255,255,255,.55);background-image:var(--atv-grain), linear-gradient(140deg, rgba(255,255,255,.8), rgba(255,255,255,.15));box-shadow:inset 0 1px 0 #fff, 0 6px 16px -10px rgba(110,40,10,.4)}
.menu-toggle[aria-expanded="true"]{background-color:rgba(255,255,255,.85)}
@media (max-width:980px){
  .site-header .bar{position:relative;padding-left:18px}
  .nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;padding:8px;border-radius:24px;background-color:rgba(255,255,255,.94);background-image:var(--atv-grain);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff, 0 30px 60px -30px rgba(0,0,0,.35)}
  .nav.is-open{display:flex}
  .nav a{padding:.95em 1.1em;font-size:1.08rem}
  .menu-toggle{display:inline-flex}
  .header-cta{display:none}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{min-height:100svh;display:flex;align-items:center;padding-block:130px calc(var(--atv-sheet) + 70px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,64px);align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(2.4rem, 1rem + 3.9vw, 4.8rem)}
/* ---------- area visiva della copertina ---------- */
.hero-art{position:relative;width:100%;aspect-ratio:1;max-width:620px;justify-self:end}
.art{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease, visibility 0s linear .6s}
.art.is-on{opacity:1;visibility:visible;transition:opacity .6s ease}
.art canvas{display:block;width:100%;height:100%}

.lab{position:fixed;max-width:calc(100vw - 24px);overflow-x:auto;right:max(12px, env(safe-area-inset-right));bottom:max(12px, env(safe-area-inset-bottom));z-index:60;display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(20,20,20,.84);box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
.lab button{font:600 .8rem var(--atv-font);color:#fff;background:transparent;border:0;border-radius:999px;padding:.6em .95em;cursor:pointer;white-space:nowrap}
.lab button[aria-pressed="true"]{background:var(--atv-orange)}
.lab small{align-self:center;color:rgba(255,255,255,.55);font-size:.72rem;padding:0 8px 0 10px}
@media (max-width:860px){.hero-art{max-width:440px;justify-self:center;margin-top:24px}.lab small{display:none}.lab button{padding:.6em .7em}}

/* ---------- mappa che si disegna (solo SVG e CSS) ---------- */
.map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map .ln{fill:none;stroke:rgba(232,80,30,.45);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.map .ring{fill:none;stroke:rgba(0,0,0,.08);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
.map.is-on .ln,.map.is-on .ring{animation:draw 1.6s var(--atv-ease) forwards;animation-delay:calc(var(--i,0) * 140ms + 200ms)}
@keyframes draw{to{stroke-dashoffset:0}}
.map .ln.is-hot{stroke:var(--atv-orange);stroke-width:2.4}
.map .pulse{fill:var(--atv-orange);offset-rotate:0deg;opacity:0}
.map.is-on .pulse{animation:travel 3.2s cubic-bezier(.45,0,.55,1) infinite, fadein .4s ease forwards;animation-delay:calc(var(--i,0) * 520ms + 1.8s)}
@keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes fadein{to{opacity:.9}}
.map .node{position:absolute;width:15%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;display:grid;place-items:center;color:var(--atv-orange);cursor:pointer;padding:0;
  background-color:var(--ctx-bg);background-image:linear-gradient(145deg, var(--ctx-hi), var(--ctx-lo));border:1px solid rgba(255,255,255,.7);
  box-shadow:4px 4px 10px var(--ctx-dk2), -4px -4px 10px var(--ctx-lt2);
  scale:.6;opacity:0;transition:scale .5s var(--atv-ease), box-shadow .3s ease}
.map.is-on .node{animation:pop .7s var(--atv-ease) forwards;animation-delay:calc(var(--i,0) * 140ms + 700ms)}
@keyframes pop{to{scale:1;opacity:1}}
.map .node svg{position:static;width:38%;height:38%}
.map .node:hover,.map .node:focus-visible{box-shadow:inset 3px 3px 8px var(--ctx-dk2), inset -3px -3px 8px var(--ctx-lt2)}
.map .core{width:24%;color:#fff;background-color:rgba(255,63,0,.85);background-image:linear-gradient(145deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%);border-color:rgba(255,190,160,.8);box-shadow:6px 6px 16px var(--ctx-dk2), -5px -5px 14px var(--ctx-lt2), inset 0 1px 0 rgba(255,255,255,.5);font-weight:700;letter-spacing:-.03em;font-size:clamp(.8rem, .5rem + .8vw, 1.25rem);cursor:default}
.map .tip{position:absolute;left:50%;top:calc(100% + 8px);translate:-50% 0;white-space:nowrap;font-size:.82rem;font-weight:600;color:#000;padding:.4em .75em;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid #fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .25s ease}
.map .node:hover .tip,.map .node:focus-visible .tip{opacity:1}
@media (prefers-reduced-motion:reduce){.map .ln,.map .ring{stroke-dashoffset:0;animation:none}.map .node{scale:1;opacity:1;animation:none}.map .pulse{display:none}}
.hero h1{text-wrap:balance;margin-bottom:.42em}
.hero-lead{font-size:clamp(1.08rem, 1rem + .35vw, 1.3rem);color:#2a2a2a;max-width:54ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.credentials{display:flex;flex-wrap:wrap;gap:0;margin:44px 0 0;padding:0;list-style:none;border-top:1px solid var(--atv-line);max-width:640px}
.credentials li{flex:1 1 auto;padding:14px 18px 0 0;font-size:.9rem;color:#555;line-height:1.35}
.credentials li strong{display:block;color:#000;font-size:1rem}
@media (max-width:860px){
  .hero{padding-top:120px}
  .hero-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.3rem, 1.4rem + 4vw, 3.4rem)}
}
@media (max-width:420px){
  .hero-actions .atv-btn{flex:1 1 100%}
  .credentials li{flex-basis:100%;padding-top:12px}
}

/* =========================================================
   CHI SIAMO (nero)
   ========================================================= */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,7vw,120px);align-items:start}
.statement{font-size:clamp(2rem, 1.1rem + 2.8vw, 3.5rem);line-height:1.06;font-weight:500;letter-spacing:-.03em}
.js-words .statement .w{color:rgb(var(--c,90),var(--c,90),var(--c,90))}
.js-words .statement .w.atv-key{color:var(--atv-orange);opacity:calc(.35 + .65 * var(--k,0))}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:40px 0 34px}
.facts div{padding:18px 20px}
.facts dt{font-size:.88rem;color:var(--atv-muted-d)}
.facts dd{margin:4px 0 0;color:#fff;font-weight:600}
@media (max-width:860px){.about{grid-template-columns:1fr}}
@media (max-width:420px){.facts{grid-template-columns:1fr}}

/* =========================================================
   INTESTAZIONE DI SEZIONE
   ========================================================= */
.head{display:grid;grid-template-columns:1.3fr 1fr;gap:24px 72px;align-items:end;margin-bottom:clamp(44px,6vw,80px)}
.head p{margin:0}
@media (max-width:860px){.head{grid-template-columns:1fr}}

/* =========================================================
   SERVIZI (bianco)
   ========================================================= */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc{padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:14px;min-height:280px;isolation:isolate}
.svc::after,.logo-tile::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:0 38px 64px -30px rgba(0,0,0,.16), 0 8px 18px -8px rgba(0,0,0,.06);transition:opacity .55s var(--atv-ease)}
.svc:hover::after,.logo-tile:hover::after{opacity:1}
.svc p{font-size:1.02rem;margin:0}
.svc .atv-link{margin-top:auto;padding-top:6px}
.svc--feature{grid-column:span 2}
.svc--feature h3{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem)}
.svc--feature p{font-size:1.1rem;max-width:58ch}
.svc--dark{grid-column:span 2;background:#000;border-color:#000;color:var(--atv-ink-d);justify-content:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.svc--dark h3{color:#fff}
.svc--dark::after{box-shadow:0 34px 64px -28px rgba(0,0,0,.35)}
.svc--dark .atv-btn{align-self:flex-start;margin-top:8px}
.svc .atv-icon{background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.06);box-shadow:inset 0 1px 0 #fff, 0 8px 18px -10px rgba(232,80,30,.45)}
@media (max-width:980px){.svc-grid{grid-template-columns:1fr 1fr}.svc--feature,.svc--dark{grid-column:span 2}}
@media (max-width:640px){.svc-grid{grid-template-columns:1fr}.svc--feature,.svc--dark{grid-column:auto}.svc{min-height:0}}

/* =========================================================
   ENERGIA (nero)
   ========================================================= */
.energy-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--atv-line-d)}
.energy-item{padding:30px 26px 6px 0;border-right:1px solid var(--atv-line-d)}
.energy-item + .energy-item{padding-left:26px}
.energy-item:last-child{border-right:0}
.energy-item .atv-icon{margin-bottom:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14)}
.energy-item h3{font-size:1.18rem;margin-bottom:10px}
.energy-item p{font-size:1rem}
.energy-foot{margin-top:52px}
@media (max-width:980px){.energy-grid{grid-template-columns:1fr 1fr}.energy-item:nth-child(2){border-right:0}.energy-item:nth-child(3){padding-left:0}.energy-item:nth-child(n+3){border-top:1px solid var(--atv-line-d)}}
@media (max-width:560px){.energy-grid{grid-template-columns:1fr}.energy-item,.energy-item + .energy-item{padding:26px 0 18px;border-right:0}.energy-item + .energy-item{border-top:1px solid var(--atv-line-d)}}

/* =========================================================
   PERCHÉ (bianco)
   ========================================================= */
.why{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(40px,7vw,120px)}
.why-head{position:sticky;top:130px;align-self:start}
.why-head p{margin-top:22px}
.why-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--atv-line)}
.why-list li{display:grid;grid-template-columns:minmax(190px,.8fr) 1.4fr;gap:10px 36px;padding:30px 0;border-bottom:1px solid var(--atv-line)}
.why-list h3{transition:color .25s ease}
.why-list li:hover h3{color:var(--atv-orange)}
.why-list p{margin:0}
@media (max-width:860px){.why{grid-template-columns:1fr}.why-head{position:static}.why-list li{grid-template-columns:1fr}}

/* =========================================================
   METODO (nero)
   ========================================================= */
.process{padding-block:0}
.process-track{position:relative}
.js-steps .process-track{height:300vh}
.process-sticky{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,7vw,120px);align-items:center;padding-block:var(--atv-section)}
.js-steps .process-sticky{position:sticky;top:0;min-height:100vh;padding-block:90px}
.process-head p{margin-top:22px}
.steps{list-style:none;margin:0;padding:0;position:relative}
.steps::before,.steps::after{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:1px}
.steps::before{background:var(--atv-line-d)}
.steps::after{background:var(--atv-orange);transform-origin:top;transform:scaleY(var(--pp,1))}
.step{display:grid;grid-template-columns:48px 1fr;gap:24px;padding:18px 0;transition:opacity .4s ease}
.step .n{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:600;color:#fff;background:#000;border:1px solid rgba(255,255,255,.22);transition:background-color .35s ease,border-color .35s ease}
.step h3{margin:9px 0 6px}
.step p{margin:0}
.js-steps .step{opacity:.35}
.js-steps .step.is-on{opacity:1}
.step.is-on .n,.no-steps .step .n{background:var(--atv-orange);border-color:var(--atv-orange)}
@media (max-width:860px){
  .process-sticky{grid-template-columns:1fr}
  .js-steps .process-track{height:auto}
  .js-steps .process-sticky{position:static;min-height:0;padding-block:var(--atv-section)}
  .js-steps .step{opacity:1}
  .step .n{background:var(--atv-orange);border-color:var(--atv-orange)}
  .steps::after{display:none}
}

/* =========================================================
   CLIENTI (bianco)
   ========================================================= */
.logo-wall{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;list-style:none;margin:0;padding:0}
.logo-tile{aspect-ratio:1;display:grid;place-items:center;padding:14px;border-radius:18px;transition:border-color .3s ease, box-shadow .35s var(--atv-ease)}
.logo-tile img{width:100%;height:100%;object-fit:contain;border-radius:10px;filter:grayscale(1);opacity:.75;transition:filter .4s ease, opacity .4s ease}
.logo-tile span{font-weight:600;font-size:.84rem;line-height:1.2;text-align:center;color:#555}
.logo-tile{position:relative;isolation:isolate}
.logo-tile:hover img,.logo-tile.is-lit img{filter:none;opacity:1}
@media (max-width:980px){.logo-wall{grid-template-columns:repeat(4,1fr)}}
@media (max-width:420px){.logo-wall{grid-template-columns:repeat(3,1fr)}}
.quote{margin:clamp(64px,8vw,110px) 0 0;max-width:980px}
.quote blockquote{margin:0;font-size:clamp(1.35rem,1rem + 1.2vw,2.1rem);line-height:1.28;color:#000;font-weight:500;letter-spacing:-.02em;text-indent:-.42em}
.quote figcaption{margin-top:22px;color:#666;font-size:1rem}
.quote figcaption strong{color:#000}

/* =========================================================
   FAQ (nero)
   ========================================================= */
.faq{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(40px,7vw,120px)}
.faq-list{border-top:1px solid var(--atv-line-d)}
.faq details{border-bottom:1px solid var(--atv-line-d)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:26px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:1.18rem;font-weight:500;transition:color .25s ease}
.faq summary:hover h3,.faq details[open] h3{color:var(--atv-orange)}
.plus{flex:none;width:26px;height:26px;position:relative;margin-top:2px}
.plus::before,.plus::after{content:"";position:absolute;left:4px;right:4px;top:12px;height:1.5px;background:var(--atv-orange);transition:transform .35s var(--atv-ease)}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0)}
.faq .answer p{padding:0 40px 28px 0}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* =========================================================
   CONTATTI (bianco) E FOOTER (nero)
   ========================================================= */
.careers{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-bottom:clamp(56px,7vw,96px);margin-bottom:clamp(56px,7vw,96px);border-bottom:1px solid var(--atv-line)}
.careers h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.3rem)}
.careers p{margin:10px 0 0}
.cta-panel{padding:clamp(32px,5vw,76px);display:grid;grid-template-columns:1.3fr 1fr;gap:36px 70px;align-items:end;border-radius:32px}
.cta-panel p{font-size:1.15rem;margin-top:20px}
.cta-contacts{display:flex;flex-direction:column;gap:10px}
.cta-contacts a{font-size:1.15rem}
.cta-contacts span{color:#555}
@media (max-width:860px){.cta-panel{grid-template-columns:1fr}}

.site-footer{padding-block:calc(var(--atv-sheet) + 70px) calc(34px + env(safe-area-inset-bottom));font-size:.97rem}
.site-footer a{text-decoration:none;transition:color .2s ease}
.site-footer a:hover{color:var(--atv-orange)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.foot-title{color:#fff;font-weight:600;margin:0 0 14px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.badges a{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.45em .95em;font-size:.86rem;color:#fff}
.badges a:hover{border-color:rgba(255,255,255,.55);color:#fff}
.legal{margin-top:60px;padding-top:24px;border-top:1px solid var(--atv-line-d);display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.88rem}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* =========================================================
   NEUMORFISMO + VETRO, v10
   Regole:
   1. una sola luce per tutta la pagina, in alto a sinistra;
   2. ombra chiara e ombra scura prese dal tono della superficie su cui l'elemento appoggia
      (su grigio: bianco e grigio-blu; su nero: nero pieno e un bianco quasi invisibile);
   3. ombre a due strati, uno stretto e uno ampio, più morbide e meno "timbrate";
   4. l'arancione proietta luce arancione solo se è lui l'oggetto arancione.
   ========================================================= */
:root,.sheet--light,.site-header{
  --ctx-bg:#ECEDF0; --ctx-hi:#F6F7F9; --ctx-lo:#E1E3E7;
  --ctx-dk1:rgba(160,167,182,.26); --ctx-dk2:rgba(160,167,182,.34);
  --ctx-lt1:rgba(255,255,255,.65); --ctx-lt2:rgba(255,255,255,.85);
  --ctx-edge:rgba(255,255,255,.6);
  --orange-a:.8;
  --atv-muted:#777;
}
.sheet--dark,.svc--dark{
  --ctx-bg:#141414; --ctx-hi:#1B1B1B; --ctx-lo:#0F0F0F;
  --ctx-dk1:rgba(0,0,0,.42); --ctx-dk2:rgba(0,0,0,.58);
  --ctx-lt1:rgba(255,255,255,.022); --ctx-lt2:rgba(255,255,255,.035);
  --ctx-edge:rgba(255,255,255,.05);
  --orange-a:.95;
}
:root{--d:8px;--b:20px}
@media (max-width:768px){:root{--d:5px;--b:12px}}

.sheet--light{background:var(--ctx-bg)}
.sheet--dark{background:var(--ctx-bg)}
.atv-aurora{background:#ECEDF0}
.sheet--light .glow{--c:rgba(255,120,60,.12)}
.sheet--dark .glow{--c:rgba(232,80,30,.26)}

/* ---------- superfici: rialzata e incavata ---------- */
.atv-glass,.neu-up{
  background-color:var(--ctx-bg);
  background-image:var(--atv-grain), linear-gradient(145deg, rgba(255,255,255,.45), rgba(255,255,255,0) 38%), linear-gradient(145deg, var(--ctx-hi), var(--ctx-lo));
  border:1px solid var(--ctx-edge);
  box-shadow:
    calc(var(--d) * .5) calc(var(--d) * .5) calc(var(--b) * .5) var(--ctx-dk1),
    var(--d) var(--d) var(--b) var(--ctx-dk2),
    calc(var(--d) * -.5) calc(var(--d) * -.5) calc(var(--b) * .5) var(--ctx-lt1),
    calc(var(--d) * -1) calc(var(--d) * -1) var(--b) var(--ctx-lt2);
}
.sheet--dark .atv-glass,.sheet--dark .neu-up{
  background-image:var(--atv-grain-light), linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,0) 38%), linear-gradient(145deg, var(--ctx-hi), var(--ctx-lo));
}
.neu-in{
  background-color:var(--ctx-bg);
  background-image:var(--atv-grain), linear-gradient(145deg, var(--ctx-lo), var(--ctx-hi));
  border:1px solid var(--ctx-edge);
  box-shadow:
    inset calc(var(--d) * .45) calc(var(--d) * .45) calc(var(--b) * .45) var(--ctx-dk2),
    inset calc(var(--d) * -.45) calc(var(--d) * -.45) calc(var(--b) * .45) var(--ctx-lt2);
}

/* card nera sulla sezione chiara: dentro è "nera", ma proietta ombre sul grigio */
.svc--dark{
  background-color:#161616;
  background-image:var(--atv-grain-light), linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), linear-gradient(145deg, #1E1E1E, #0E0E0E);
  border-color:rgba(255,255,255,.06);
  box-shadow:
    calc(var(--d) * .5) calc(var(--d) * .5) calc(var(--b) * .5) rgba(120,126,140,.3),
    var(--d) var(--d) var(--b) rgba(120,126,140,.4),
    calc(var(--d) * -1) calc(var(--d) * -1) var(--b) rgba(255,255,255,.85);
}

/* al passaggio: la superficie si solleva un po' (livello a parte, solo opacità) */
.svc::after,.logo-tile::after{
  box-shadow:calc(var(--d) * 1.5) calc(var(--d) * 1.5) calc(var(--b) * 1.4) var(--ctx-dk2), calc(var(--d) * -1.5) calc(var(--d) * -1.5) calc(var(--b) * 1.4) var(--ctx-lt2);
}
.svc--dark::after{box-shadow:calc(var(--d) * 1.5) calc(var(--d) * 1.5) calc(var(--b) * 1.4) rgba(120,126,140,.35)}

/* ---------- vetro vero dell'header (tecnica Comeau: saturazione + luminosità + bordo con spessore) ---------- */
.site-header .bar.atv-glass{
  background-color:rgba(236,237,240,.52);
  background-image:var(--atv-grain), linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,255,255,.08));
  border-color:rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(0,0,0,.05), 0 2px 6px -2px rgba(40,44,52,.08), 0 14px 30px -14px rgba(40,44,52,.2);
  -webkit-backdrop-filter:blur(16px) saturate(150%) brightness(1.04);
  backdrop-filter:blur(16px) saturate(150%) brightness(1.04);
}

/* icone: pozzetti incavati, presi dal tono della superficie */
.atv-icon,.svc .atv-icon,.energy-item .atv-icon{
  background-color:var(--ctx-bg);
  background-image:linear-gradient(145deg, var(--ctx-lo), var(--ctx-hi));
  border:1px solid var(--ctx-edge);
  box-shadow:inset 3px 3px 7px var(--ctx-dk2), inset -3px -3px 7px var(--ctx-lt2);
}

/* credenziali in copertina */
.credentials{border-top:0;border-radius:24px;padding:16px 22px 18px;gap:10px 28px;margin-top:40px}
.credentials li{padding:0}

/* ---------- pulsanti ---------- */
.atv-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .16s ease}
.atv-btn:active::before{opacity:1}
.atv-btn{transition:background-color .35s ease, color .3s ease, border-color .35s ease, transform .2s ease, box-shadow .2s ease}

/* arancione: vetro arancione pieno di colore, ombre neutre prese dalla superficie,
   bagliore arancione solo al passaggio */
.atv-btn--primary{
  background-color:rgba(255,63,0,var(--orange-a));
  border-color:rgba(255,190,160,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(120,30,0,.18),
    3px 3px 7px var(--ctx-dk1), 5px 5px 14px var(--ctx-dk2),
    -3px -3px 8px var(--ctx-lt2);
}
.atv-btn--primary::after{box-shadow:0 12px 28px -10px rgba(255,80,20,.45), 0 4px 10px -4px rgba(255,80,20,.25)}
.atv-btn--primary::before{box-shadow:inset 3px 3px 8px rgba(150,38,0,.45), inset -3px -3px 8px rgba(255,165,125,.4)}
.atv-btn--primary:hover{background-color:rgba(255,90,31,var(--orange-a))}
.atv-btn--primary:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}

/* chiaro: rialzato come la superficie */
.atv-btn--ghost,.sheet--dark .atv-btn--ghost{
  color:inherit;
  background-color:var(--ctx-bg);
  background-image:var(--atv-grain), linear-gradient(145deg, rgba(255,255,255,.5), rgba(255,255,255,0) 50%), linear-gradient(145deg, var(--ctx-hi), var(--ctx-lo));
  border-color:var(--ctx-edge);
  box-shadow:3px 3px 7px var(--ctx-dk1), 5px 5px 14px var(--ctx-dk2), -3px -3px 7px var(--ctx-lt1), -5px -5px 14px var(--ctx-lt2);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.sheet--light .atv-btn--ghost{color:#000}
.sheet--dark .atv-btn--ghost{color:#fff;background-image:var(--atv-grain-light), linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,0) 50%), linear-gradient(145deg, var(--ctx-hi), var(--ctx-lo))}
.atv-btn--ghost::after,.sheet--dark .atv-btn--ghost::after{box-shadow:8px 8px 20px var(--ctx-dk2), -8px -8px 20px var(--ctx-lt2)}
.atv-btn--ghost::before,.sheet--dark .atv-btn--ghost::before{box-shadow:inset 3px 3px 8px var(--ctx-dk2), inset -3px -3px 8px var(--ctx-lt2)}
.atv-btn--ghost:hover,.sheet--dark .atv-btn--ghost:hover{background-color:var(--ctx-bg);border-color:var(--ctx-edge)}
.atv-btn--ghost:active{box-shadow:none}

/* pulsante Menu */
.menu-toggle{
  background-color:var(--ctx-bg);
  background-image:linear-gradient(145deg, var(--ctx-hi), var(--ctx-lo));
  border-color:rgba(255,255,255,.7);
  box-shadow:2px 2px 5px var(--ctx-dk1), 3px 3px 9px var(--ctx-dk2), -3px -3px 8px var(--ctx-lt2);
  transition:box-shadow .3s ease;
}
.menu-toggle[aria-expanded="true"]{background-image:linear-gradient(145deg, var(--ctx-lo), var(--ctx-hi));box-shadow:inset 2px 2px 6px var(--ctx-dk2), inset -2px -2px 6px var(--ctx-lt2)}

/* metodo */
.step .n{
  background:linear-gradient(145deg, var(--ctx-lo), var(--ctx-hi));
  border-color:var(--ctx-edge);
  box-shadow:inset 3px 3px 7px var(--ctx-dk2), inset -3px -3px 7px var(--ctx-lt2);
  transition:box-shadow .45s ease;
}
.step.is-on .n,.no-steps .step .n{
  background:linear-gradient(145deg, #FF6B33, #E8501E);
  border-color:rgba(255,170,130,.5);
  box-shadow:3px 3px 8px var(--ctx-dk2), -3px -3px 8px var(--ctx-lt2), inset 0 1px 0 rgba(255,255,255,.35);
}
@media (max-width:860px){.step .n{background:linear-gradient(145deg, #FF6B33, #E8501E);border-color:rgba(255,170,130,.5);box-shadow:3px 3px 8px var(--ctx-dk2), -3px -3px 8px var(--ctx-lt2)}}

/* FAQ */
.faq-list{border-top:0;display:grid;gap:14px}
.faq details{
  border:1px solid var(--ctx-edge);border-radius:22px;padding:0 26px;
  background-color:var(--ctx-bg);
  background-image:var(--atv-grain-light), linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,0) 40%), linear-gradient(145deg, var(--ctx-hi), var(--ctx-lo));
  box-shadow:4px 4px 10px var(--ctx-dk1), 7px 7px 18px var(--ctx-dk2), -6px -6px 16px var(--ctx-lt2);
  transition:box-shadow .45s ease;
}
.faq details[open]{background-image:var(--atv-grain-light), linear-gradient(145deg, var(--ctx-lo), var(--ctx-hi));box-shadow:inset 5px 5px 12px var(--ctx-dk2), inset -5px -5px 12px var(--ctx-lt2)}
.faq summary{padding:22px 0}
.faq .answer p{padding:0 8px 24px 0}

/* badge del footer */
.badges a{border-color:var(--ctx-edge);background:linear-gradient(145deg, var(--ctx-hi), var(--ctx-lo));box-shadow:3px 3px 8px var(--ctx-dk2), -3px -3px 8px var(--ctx-lt2);transition:box-shadow .3s ease}
.badges a:hover{border-color:var(--ctx-edge);box-shadow:inset 2px 2px 6px var(--ctx-dk2), inset -2px -2px 6px var(--ctx-lt2)}

.logo-tile img{border-radius:12px}

/* header: il pulsante arancione non proietta luce bianca sul vetro */
.site-header .atv-btn--primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(120,30,0,.18), 0 6px 14px -8px rgba(232,80,30,.45)}
.site-header .atv-btn--primary:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}

/* voci del menu: pillole di vetro chiaro come gli altri pulsanti */
.nav{gap:6px}
.nav a{
  position:relative;padding:.58em 1.05em;border-radius:999px;color:#000;
  border:1px solid rgba(255,255,255,.75);
  background-color:rgba(236,237,240,.35);
  background-image:var(--atv-grain), linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 2px 2px 6px rgba(160,167,182,.22);
  transition:background-color .3s ease, box-shadow .3s ease, color .25s ease;
}
.nav a:hover{color:#000;background-color:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff, 3px 3px 10px rgba(160,167,182,.32), -2px -2px 6px rgba(255,255,255,.6)}
.nav a:active{box-shadow:inset 2px 2px 5px rgba(160,167,182,.4), inset -2px -2px 5px rgba(255,255,255,.8)}
@media (max-width:980px){
  .nav{gap:8px;padding:10px}
  .nav a{padding:.9em 1.2em;font-size:1.05rem}
}

.panels-mark{position:absolute;z-index:2;left:50%;top:50%;width:22%;translate:-50% -50%;filter:drop-shadow(0 6px 14px rgba(232,80,30,.35));pointer-events:none}


.page[hidden]{display:none}
.svc--plain{min-height:0}
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){.ex-grid{grid-template-columns:1fr}}
.brief{padding:clamp(24px,2.6vw,36px)}
.brief ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.brief li{display:flex;gap:.7em;align-items:flex-start;font-size:1.02rem}
.brief li::before{content:"";flex:none;width:9px;height:9px;margin-top:.55em;border-radius:50%;background:var(--atv-orange)}
.steps .recv{display:block;margin-top:6px;color:var(--atv-muted-d);font-size:.95rem}
.sheet--light .steps .recv{color:var(--atv-muted)}


/* =========================================================
   VERSIONE SCURA: nero prevalente, bianco in poche sezioni,
   arancione solo su parole chiave, pulsanti principali e logo
   ========================================================= */
html{background:#0B0B0C}
html::after{background:#0B0B0C}
.sheet--dark{background:#0B0B0C}
.sheet--dark.sheet--alt{background:#131315;--ctx-bg:#131315;--ctx-hi:#19191B;--ctx-lo:#0E0E10}
.sheet--dark{--ctx-bg:#0B0B0C;--ctx-hi:#141416;--ctx-lo:#070708;--ctx-edge:rgba(255,255,255,.06)}
.sheet--dark + .sheet--dark{box-shadow:0 -1px 0 rgba(255,255,255,.06)}
.sheet--dark .glow{--c:rgba(232,80,30,.12)}
.sheet--light .glow{--c:rgba(0,0,0,.035)}

/* copertina scura: aurora spenta, solo un calore lontano */
.sheet--dark .atv-aurora{background:#0B0B0C}
.sheet--dark .atv-aurora i:nth-child(1){background:radial-gradient(closest-side, rgba(232,80,30,.16), rgba(232,80,30,0))}
.sheet--dark .atv-aurora i:nth-child(2){background:radial-gradient(closest-side, rgba(255,120,60,.10), rgba(255,120,60,0))}
.sheet--dark .atv-aurora i:nth-child(3){background:radial-gradient(closest-side, rgba(255,255,255,.035), rgba(255,255,255,0))}
.sheet--dark .atv-aurora i:nth-child(4){background:radial-gradient(closest-side, rgba(255,255,255,.05), rgba(255,255,255,0))}
.sheet--dark .hero-lead{color:rgba(255,255,255,.74)}
.sheet--dark .credentials li{color:rgba(255,255,255,.6)}
.sheet--dark .credentials li strong{color:#fff}

/* header in vetro scuro */
.site-header .bar.atv-glass{background-color:rgba(18,18,20,.62);background-image:var(--atv-grain-light), linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,0));border-color:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px -14px rgba(0,0,0,.6)}
.nav a{color:rgba(255,255,255,.86);background-color:rgba(255,255,255,.03);background-image:none;border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.nav a:hover,.nav a[aria-current]{color:#fff;background-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px -8px rgba(0,0,0,.6)}
.nav a:active{box-shadow:inset 2px 2px 5px rgba(0,0,0,.6), inset -1px -1px 3px rgba(255,255,255,.05)}
.menu-toggle{color:#fff;background-color:#141416;background-image:linear-gradient(145deg,#1A1A1C,#0F0F11);border-color:rgba(255,255,255,.09);box-shadow:3px 3px 8px rgba(0,0,0,.6), -2px -2px 6px rgba(255,255,255,.03)}
.menu-toggle[aria-expanded="true"]{background-image:linear-gradient(145deg,#0F0F11,#1A1A1C);box-shadow:inset 2px 2px 6px rgba(0,0,0,.7), inset -2px -2px 6px rgba(255,255,255,.03)}
@media (max-width:980px){
  .nav{background-color:rgba(18,18,20,.97);background-image:none;border-color:rgba(255,255,255,.08);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
  .nav a{background:rgba(255,255,255,.04)}
}

/* icone e mappa: bianche; l'arancione resta al centro (il marchio) */
.sheet--dark .atv-icon,.sheet--dark .svc .atv-icon{color:rgba(255,255,255,.88)}
.sheet--light .atv-icon,.sheet--light .svc .atv-icon{color:#111}
.svc:hover .atv-icon{color:var(--atv-orange);transition:color .3s ease}
.map .node{color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.08)}
.map .ln{stroke:rgba(255,255,255,.22)}
.map .ln.is-hot{stroke:var(--atv-orange)}
.map .ring{stroke:rgba(255,255,255,.06)}
.map .pulse{fill:#fff}
.map .tip{background:rgba(20,20,22,.9);color:#fff;border-color:rgba(255,255,255,.1)}

/* link: punto neutro, arancione solo al passaggio */
.atv-link::after{background:currentColor;opacity:.55}
.atv-link:hover{color:var(--atv-orange)}
.atv-link:hover::after{background:transparent;opacity:1;box-shadow:0 0 0 2px var(--atv-orange)}

/* FAQ, elenchi e dettagli: bianco al posto dell'arancione */
.faq summary:hover h3,.faq details[open] h3{color:#fff}
.sheet--light .faq summary:hover h3,.sheet--light .faq details[open] h3{color:#000}
.plus::before,.plus::after{background:rgba(255,255,255,.7)}
.sheet--light .plus::before,.sheet--light .plus::after{background:#000}
.why-list li:hover h3{color:inherit}
.sheet--dark .why-list li:hover h3{color:#fff}
.steps::after{background:rgba(255,255,255,.7)}

/* card nera nella sezione scura: diventa la card chiara che richiama il contatto */
.sheet--dark .svc--dark{background-color:#F2F3F5;background-image:var(--atv-grain), linear-gradient(145deg,#FFFFFF,#E4E6EA);border-color:rgba(255,255,255,.9);box-shadow:8px 8px 22px rgba(0,0,0,.6)}
.sheet--dark .svc--dark h3{color:#000}
.sheet--dark .svc--dark p{color:#333}

/* pulsanti secondari su scuro */
.sheet--dark .atv-btn--ghost{color:#fff}
.sheet--dark .cta-contacts span{color:rgba(255,255,255,.6)}
.sheet--dark .cta-contacts a{color:#fff}
.sheet--dark .careers{border-bottom-color:rgba(255,255,255,.1)}
.sheet--dark .brief li::before{background:rgba(255,255,255,.6)}
.site-footer{background:#000}


/* =========================================================
   ANGOLI: molto meno arrotondati, più tecnici
   ========================================================= */
:root{--atv-sheet:10px;--atv-r-card:8px;--atv-r-btn:6px;--atv-r-panel:10px}
.sheet{border-radius:var(--atv-sheet) var(--atv-sheet) 0 0}
.sheet:first-of-type{border-radius:0}
.atv-glass{border-radius:var(--atv-r-card)}
.atv-btn,.atv-btn::before,.atv-btn::after{border-radius:var(--atv-r-btn)}
.site-header .bar,.site-header .bar.atv-glass{border-radius:10px}
.nav a{border-radius:6px}
.nav{border-radius:10px}
.menu-toggle{border-radius:6px}
.map .tip{border-radius:6px}
.logo-tile{border-radius:8px}
.logo-tile img{border-radius:4px}
.cta-panel{border-radius:10px}
.badges a{border-radius:5px}
.credentials{border-radius:8px}
.faq details{border-radius:8px}
.atv-icon{border-radius:8px}
.brief li::before{border-radius:1px}
.atv-link::after{border-radius:1px}
:focus-visible{border-radius:4px}


/* arancione al passaggio: icone della mappa, del settore energia e delle card */
.map .node svg{transition:color .3s ease}
.map .node:hover,.map .node:focus-visible{color:var(--atv-orange)}
.energy-item .atv-icon{transition:color .3s ease}
.energy-item:hover .atv-icon{color:var(--atv-orange)}
/* un dettaglio arancione anche nelle sezioni senza parole chiave */
.steps .recv{color:rgba(255,255,255,.62)}
.steps .recv::first-letter{color:var(--atv-orange)}
.steps .recv b{color:var(--atv-orange);font-weight:600}
.plus::before,.plus::after{background:var(--atv-orange)}
.sheet--light .plus::before,.sheet--light .plus::after{background:var(--atv-orange)}


.atv-form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;padding:clamp(24px,3vw,40px)}
.fld{display:flex;flex-direction:column;gap:8px;font-size:.92rem;color:rgba(255,255,255,.72)}
.sheet--light .fld{color:#333}
.fld--wide{grid-column:1 / -1}
.fld input,.fld select,.fld textarea{font:inherit;font-size:1rem;color:inherit;padding:.85em 1em;border-radius:6px;outline:none;width:100%}
.sheet--dark .fld input,.sheet--dark .fld select,.sheet--dark .fld textarea{color:#fff}
.fld select option{color:#000}
.fld input:focus,.fld select:focus,.fld textarea:focus{box-shadow:inset 3px 3px 7px var(--ctx-dk2), inset -3px -3px 7px var(--ctx-lt2), 0 0 0 2px rgba(255,90,31,.55)}
.chk{display:flex;gap:10px;align-items:center;font-size:.92rem;color:rgba(255,255,255,.72)}
.chk input{accent-color:var(--atv-orange);width:18px;height:18px}
.atv-form .atv-btn{grid-column:1 / -1;justify-self:start}
.atv-form .ok{grid-column:1 / -1;color:#fff;margin:0}
ul.plain{margin:0;padding:0;list-style:none;display:grid;gap:8px}
ul.plain li{display:flex;gap:.7em}
ul.plain li::before{content:"";flex:none;width:8px;height:8px;margin-top:.6em;background:rgba(255,255,255,.6)}
@media (max-width:640px){.atv-form{grid-template-columns:1fr}}
@media (max-width:860px){.energy-grid[style]{grid-template-columns:1fr !important}}


/* =========================================================
   REVISIONE: contrasti, punti dei link, vetro senza grana,
   aurora nelle sezioni con vetro, arancione al passaggio,
   icone convesse che diventano concave
   ========================================================= */
/* vetro senza grana: resta la sfocatura */
:root{--atv-grain:linear-gradient(transparent,transparent);--atv-grain-light:linear-gradient(transparent,transparent)}

/* contrasti: testimonianza e firma su fondo scuro */
.sheet--dark .quote blockquote{color:#fff}
.sheet--dark .quote figcaption{color:rgba(255,255,255,.6)}
.sheet--dark .quote figcaption strong{color:#fff}

/* link: di nuovo il punto che diventa anello */
.atv-link::after{border-radius:50%}

/* aurora leggera, due arancioni, solo nelle sezioni con vetro */
.has-aurora{isolation:isolate}
.sec-aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sec-aurora i{position:absolute;display:block;border-radius:50%;will-change:transform}
.sec-aurora i:nth-child(1){width:48vmax;height:48vmax;left:4%;top:8%;background:radial-gradient(closest-side, rgba(232,80,30,.32), rgba(232,80,30,0));animation:sa1 26s ease-in-out infinite alternate}
.sec-aurora i:nth-child(2){width:42vmax;height:42vmax;right:2%;bottom:-6%;background:radial-gradient(closest-side, rgba(255,143,0,.24), rgba(255,143,0,0));animation:sa2 32s ease-in-out infinite alternate}
.sec-aurora i:nth-child(3){width:30vmax;height:30vmax;left:42%;top:40%;background:radial-gradient(closest-side, rgba(255,90,31,.16), rgba(255,90,31,0));animation:sa3 22s ease-in-out infinite alternate}
.sheet--light .sec-aurora i:nth-child(1){background:radial-gradient(closest-side, rgba(232,80,30,.26), rgba(232,80,30,0))}
.sheet--light .sec-aurora i:nth-child(2){background:radial-gradient(closest-side, rgba(255,143,0,.28), rgba(255,143,0,0))}
@keyframes sa1{to{transform:translate(22vw,10vh) scale(1.12)}}
@keyframes sa2{to{transform:translate(-24vw,-14vh) scale(.9)}}
@keyframes sa3{to{transform:translate(-14vw,12vh) scale(1.2)}}

/* vetro vero sopra l'aurora */
.has-aurora .atv-glass:not(.svc--dark){
  background-color:rgba(255,255,255,.045);
  background-image:linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,0) 50%);
  border-color:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 8px 8px 22px rgba(0,0,0,.45);
}
.sheet--light.has-aurora .atv-glass:not(.svc--dark){
  background-color:rgba(255,255,255,.5);
  background-image:linear-gradient(145deg, rgba(255,255,255,.75), rgba(255,255,255,.15) 55%);
  border-color:rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 #fff, 8px 8px 22px rgba(120,120,130,.25);
}
@media (max-width:768px), (pointer:coarse){
  .sec-aurora i:nth-child(3){display:none}
  .sec-aurora i{animation-duration:48s}
  .has-aurora .atv-glass:not(.svc--dark){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
@media (prefers-reduced-motion:reduce){.sec-aurora i{animation:none}}

/* arancione al passaggio */
.svc h3,.energy-item h3,.why-list h3,.faq summary h3,.ex-grid h3{transition:color .3s ease}
.svc:hover h3,.energy-item:hover h3,.faq summary:hover h3{color:var(--atv-orange)}
.sheet--dark .why-list li:hover h3,.sheet--light .why-list li:hover h3{color:var(--atv-orange)}
.sheet--dark .svc--dark:hover h3{color:var(--atv-orange)}
.logo-tile:hover{border-color:rgba(255,90,31,.5)}

/* icone: convesse a riposo, concave al passaggio */
.atv-icon,.svc .atv-icon,.energy-item .atv-icon{
  background-image:linear-gradient(145deg, var(--ctx-hi), var(--ctx-lo));
  box-shadow:3px 3px 8px var(--ctx-dk2), -3px -3px 8px var(--ctx-lt2), inset 0 1px 0 rgba(255,255,255,.06);
  transition:box-shadow .35s ease, color .3s ease, background-image .35s ease;
}
.svc:hover .atv-icon,.energy-item:hover .atv-icon{
  background-image:linear-gradient(145deg, var(--ctx-lo), var(--ctx-hi));
  box-shadow:inset 3px 3px 8px var(--ctx-dk2), inset -3px -3px 8px var(--ctx-lt2);
  color:var(--atv-orange);
}


/* ---------- aurora: movimento visibile fin dal caricamento ---------- */
.sec-aurora i:nth-child(1){animation:sa1 11s ease-in-out -4s infinite alternate}
.sec-aurora i:nth-child(2){animation:sa2 14s ease-in-out -7s infinite alternate}
.sec-aurora i:nth-child(3){animation:sa3 9s ease-in-out -2s infinite alternate}
@keyframes sa1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(18vw,8vh) scale(1.15)}100%{transform:translate(30vw,-4vh) scale(.95)}}
@keyframes sa2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-20vw,-10vh) scale(.88)}100%{transform:translate(-8vw,-22vh) scale(1.1)}}
@keyframes sa3{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-16vw,10vh) scale(1.25)}100%{transform:translate(10vw,16vh) scale(.9)}}
.atv-aurora i:nth-child(1){animation-duration:14s;animation-delay:-5s}
.atv-aurora i:nth-child(2){animation-duration:17s;animation-delay:-8s}
.atv-aurora i:nth-child(3){animation-duration:12s;animation-delay:-3s}
.atv-aurora i:nth-child(4){animation-duration:15s;animation-delay:-6s}
.sheet--dark .atv-aurora i:nth-child(1){background:radial-gradient(closest-side, rgba(232,80,30,.24), rgba(232,80,30,0))}
.sheet--dark .atv-aurora i:nth-child(2){background:radial-gradient(closest-side, rgba(255,143,0,.14), rgba(255,143,0,0))}

/* trama di punti dietro il vetro: dà qualcosa di nitido da sfocare, così la lastra si vede */
.sec-aurora::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%)}
.sheet--light .sec-aurora::after{background-image:radial-gradient(rgba(0,0,0,.09) 1px, transparent 1.5px)}

@media (max-width:768px), (pointer:coarse){
  .sec-aurora i:nth-child(1){animation-duration:18s}
  .sec-aurora i:nth-child(2){animation-duration:22s}
}

/* ---------- icone convesse ben visibili anche su nero e sul vetro ---------- */
.sheet--dark .atv-icon,.sheet--dark .svc .atv-icon,.sheet--dark .energy-item .atv-icon{
  background-image:linear-gradient(145deg, #26262A, #111113);
  border-color:rgba(255,255,255,.1);
  box-shadow:4px 4px 10px rgba(0,0,0,.7), -3px -3px 8px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14);
}
.sheet--dark .svc:hover .atv-icon,.sheet--dark .energy-item:hover .atv-icon{
  background-image:linear-gradient(145deg, #0E0E10, #1E1E22);
  box-shadow:inset 3px 3px 8px rgba(0,0,0,.8), inset -3px -3px 7px rgba(255,255,255,.08);
}
.sheet--light .atv-icon,.sheet--light .svc .atv-icon{
  background-image:linear-gradient(145deg, #FFFFFF, #E2E4E8);
  border-color:rgba(255,255,255,.9);
  box-shadow:4px 4px 10px rgba(150,156,168,.45), -4px -4px 10px rgba(255,255,255,.95);
}
.sheet--light .svc:hover .atv-icon{
  background-image:linear-gradient(145deg, #E2E4E8, #FFFFFF);
  box-shadow:inset 3px 3px 7px rgba(150,156,168,.5), inset -3px -3px 7px rgba(255,255,255,.95);
}


/* =========================================================
   NEUMORFISMO UNIFORME: un solo "rialzato" e un solo "incavato"
   per ogni contesto (scuro, chiaro, arancione), usati ovunque
   ========================================================= */
:root{
  --up-d-bg:linear-gradient(145deg,#26262A,#111113);
  --up-d:4px 4px 10px rgba(0,0,0,.7), -3px -3px 8px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14);
  --in-d-bg:linear-gradient(145deg,#0E0E10,#1E1E22);
  --in-d:inset 3px 3px 8px rgba(0,0,0,.8), inset -3px -3px 7px rgba(255,255,255,.08);
  --edge-d:rgba(255,255,255,.08);

  --up-l-bg:linear-gradient(145deg,#FFFFFF,#E2E4E8);
  --up-l:4px 4px 10px rgba(150,156,168,.45), -4px -4px 10px rgba(255,255,255,.95), inset 0 1px 0 #fff;
  --in-l-bg:linear-gradient(145deg,#E2E4E8,#FFFFFF);
  --in-l:inset 3px 3px 7px rgba(150,156,168,.5), inset -3px -3px 7px rgba(255,255,255,.95);
  --edge-l:rgba(255,255,255,.9);

  --up-o-bg:linear-gradient(145deg,rgba(255,112,60,.96),rgba(232,80,30,.94));
  --up-o-d:4px 4px 12px rgba(0,0,0,.6), -3px -3px 8px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(120,30,0,.25);
  --up-o-l:4px 4px 12px rgba(150,156,168,.5), -4px -4px 10px rgba(255,255,255,.95), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(120,30,0,.25);
  --in-o:inset 3px 3px 8px rgba(150,38,0,.55), inset -3px -3px 8px rgba(255,165,125,.45);
  --edge-o:rgba(255,190,160,.6);
}

/* ---- rialzati (scuro) ---- */
body .sheet--dark .atv-icon, body .map .node, body .menu-toggle, body .badges a,
body .sheet--dark .atv-btn--ghost, body .sheet--dark .faq details{
  background-color:#141416;background-image:var(--up-d-bg);border:1px solid var(--edge-d);box-shadow:var(--up-d);
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:box-shadow .35s ease, background-image .35s ease, color .3s ease;
}
/* ---- rialzati (chiaro) ---- */
body .sheet--light .atv-icon, body .sheet--light .atv-btn--ghost, body .sheet--light .faq details{
  background-color:#F1F2F4;background-image:var(--up-l-bg);border:1px solid var(--edge-l);box-shadow:var(--up-l);
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:box-shadow .35s ease, background-image .35s ease, color .3s ease;
}
/* ---- incavati (scuro) ---- */
body .sheet--dark .svc:hover .atv-icon, body .sheet--dark .energy-item:hover .atv-icon, body .map .node:hover, body .map .node:focus-visible,
body .menu-toggle[aria-expanded="true"], body .badges a:hover, body .sheet--dark .faq details[open],
body .sheet--dark .credentials, body .sheet--dark .step .n, body .sheet--dark .fld input, body .sheet--dark .fld select, body .sheet--dark .fld textarea,
body .sheet--dark .atv-btn--ghost:active{
  background-color:#141416;background-image:var(--in-d-bg);border-color:var(--edge-d);box-shadow:var(--in-d);
}
/* ---- incavati (chiaro) ---- */
body .sheet--light .svc:hover .atv-icon, body .sheet--light .faq details[open], body .sheet--light .credentials,
body .sheet--light .fld input, body .sheet--light .fld select, body .sheet--light .fld textarea, body .sheet--light .atv-btn--ghost:active{
  background-color:#F1F2F4;background-image:var(--in-l-bg);border-color:var(--edge-l);box-shadow:var(--in-l);
}
/* ---- arancione: stesso vetro per pulsanti principali, centro della mappa, fase attiva ---- */
body .atv-btn--primary, body .map .core, body .step.is-on .n, body .no-steps .step .n{
  color:#fff;background-color:transparent;background-image:var(--up-o-bg);border:1px solid var(--edge-o);box-shadow:var(--up-o-d);
  -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
}
body .sheet--light .atv-btn--primary{box-shadow:var(--up-o-l)}
body .atv-btn--primary:hover{background-image:linear-gradient(145deg,rgba(255,128,80,.98),rgba(255,90,31,.96))}
body .atv-btn--primary:active{box-shadow:var(--in-o)}
body .site-header .atv-btn--primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(120,30,0,.25), 0 6px 14px -8px rgba(232,80,30,.5)}
/* i livelli d'ombra al passaggio restano solo per il bagliore del pulsante arancione */
body .atv-btn--ghost::before,body .atv-btn--ghost::after{display:none}
body .atv-btn--primary::before{display:none}
@media (max-width:860px){body .step .n{background-image:var(--up-o-bg);border-color:var(--edge-o);box-shadow:var(--up-o-d)}}

/* colori coerenti al passaggio */
body .map .node:hover, body .map .node:focus-visible{color:var(--atv-orange)}
body .sheet--dark .svc:hover .atv-icon, body .sheet--dark .energy-item:hover .atv-icon, body .sheet--light .svc:hover .atv-icon{color:var(--atv-orange)}
body .menu-toggle{color:#fff}

/* =========================================================
   AURORA CHE SEGUE IL MOUSE, con un po' di ritardo
   ========================================================= */
.sec-aurora .follow,.atv-aurora .follow{position:absolute;left:0;top:0;width:36vmax;height:36vmax;margin:-18vmax 0 0 -18vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,110,50,.30), rgba(255,143,0,.12) 45%, rgba(255,143,0,0));
  transform:translate3d(var(--fx,50vw),var(--fy,50%),0);opacity:0;transition:opacity .8s ease;will-change:transform}
.sheet--light .sec-aurora .follow{background:radial-gradient(closest-side, rgba(255,110,50,.26), rgba(255,143,0,.1) 45%, rgba(255,143,0,0))}
.is-following .follow{opacity:1}
@media (hover:none),(prefers-reduced-motion:reduce){.sec-aurora .follow,.atv-aurora .follow{display:none}}

.logo-name{font-weight:600;font-size:.84rem;line-height:1.2;text-align:center;color:inherit;opacity:.8}

/* copertine visive per pagina: stesso linguaggio della mappa della home */
.viz{position:absolute;inset:0;opacity:1;visibility:visible}
.viz svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.viz .node{scale:.6;opacity:0}
.viz .node .tip{white-space:nowrap}
.viz.is-on .node{animation:pop .7s var(--atv-ease) forwards;animation-delay:calc(var(--i,0) * 110ms + 500ms)}
.viz .ln.thin{stroke:rgba(255,255,255,.1);stroke-width:1}
.viz .star{fill:rgba(255,255,255,.75);opacity:0;animation:starin .6s ease forwards, twinkle 3.5s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * 120ms + 600ms), calc(var(--i,0) * 400ms + 1.2s)}
@keyframes starin{to{opacity:.8}}
@keyframes twinkle{to{opacity:.35}}
.viz .sweep path{fill:url(#none);fill:rgba(232,80,30,.14)}
.viz .sweep{transform-origin:300px 300px;animation:sweep 6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.viz .orbit{stroke-dasharray:.02 .03 !important;animation:draw 1.6s var(--atv-ease) forwards, orbit 40s linear infinite !important;transform-origin:300px 300px}
@keyframes orbit{to{transform:rotate(360deg)}}
.viz .threat{fill:#fff;opacity:0;animation:threat 2.6s ease-in infinite;animation-delay:calc(var(--i,0) * 520ms + 1s)}
@keyframes threat{0%{offset-distance:0%;opacity:0}20%{opacity:.9}85%{offset-distance:100%;opacity:.9}100%{offset-distance:100%;opacity:0}}
.hero-art.viz-wrap{position:relative;width:100%;aspect-ratio:1;max-width:560px;justify-self:end}
.brief-inline{display:grid !important;grid-template-columns:1fr 1fr;gap:8px 22px;margin-top:30px !important;padding:16px 20px !important;list-style:none}
.brief-inline li{display:flex;gap:.6em;font-size:.92rem;color:rgba(255,255,255,.75);align-items:flex-start}
.brief-inline li::before{content:"";flex:none;width:7px;height:7px;margin-top:.55em;border-radius:50%;background:var(--atv-orange)}
.facts--hero{margin-top:30px}
@media (max-width:860px){.hero-art.viz-wrap{max-width:400px;margin:28px auto 0;justify-self:center}.brief-inline{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.viz .node{scale:1;opacity:1;animation:none}.viz .sweep,.viz .orbit{animation:none}.viz .threat{display:none}}

.viz .ring{stroke:rgba(255,255,255,.16);stroke-width:1.2}.viz .ring.orbit{stroke:rgba(255,255,255,.35)}.viz .ln{stroke:rgba(255,255,255,.28)}

/* ---------- menu Servizi a tendina ---------- */
.nav .has-sub{position:relative}
.subnav{position:absolute;left:50%;top:calc(100% + 10px);translate:-50% 0;width:min(92vw,620px);padding:12px;border-radius:12px;
  background-color:rgba(18,18,20,.94);border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 60px -28px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;z-index:5}
.nav .has-sub:hover .subnav,.nav .has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.subnav ul{display:grid;grid-template-columns:1fr 1fr;gap:4px;list-style:none;margin:0;padding:0}
.subnav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;text-decoration:none;color:rgba(255,255,255,.8);background:none;border:0;box-shadow:none;font-weight:400}
.subnav a svg{width:20px;height:20px;flex:none;color:var(--atv-orange)}
.subnav a strong{display:block;color:#fff;font-size:.95rem;font-weight:600}
.subnav a span{font-size:.82rem;line-height:1.3}
.subnav a:hover{background:rgba(255,255,255,.07);box-shadow:none}
.subnav-all{display:block;margin-top:8px;padding:10px 12px;border-radius:8px;text-align:center;font-weight:600;color:#fff;text-decoration:none;background:rgba(255,255,255,.05)}
.subnav-all:hover{background:rgba(255,90,31,.2)}
@media (max-width:980px){
  .nav .has-sub:not(.is-open) .subnav{display:none}
  .subnav{position:static;translate:none;width:auto;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;padding:4px 0 8px}
  .subnav ul{grid-template-columns:1fr}
  .subnav a{padding:.75em 1em}
  .subnav-all{display:none}
}

/* ---------- percorso di navigazione ---------- */
.crumbs{position:relative;z-index:3;width:min(100% - 2*var(--atv-gutter), var(--atv-wrap));margin:0 auto;padding-top:96px;font-size:.86rem;color:rgba(255,255,255,.5)}
.crumbs[hidden]{display:none}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--atv-orange)}
.crumbs li + li::before{content:"›";margin-right:6px;opacity:.6}
.crumbs [aria-current]{color:rgba(255,255,255,.85)}
.crumbs + main .sheet--first,.crumbs ~ main .page:not([hidden]) .sheet--first{--padding-top:40px}
body.has-crumbs .hero{--padding-top:40px}
@media (max-width:860px){.crumbs{padding-top:86px}}

/* ---------- barra di contatto su telefono ---------- */
.mobile-cta{position:fixed;left:12px;right:12px;bottom:max(12px, env(safe-area-inset-bottom));z-index:60;display:none;gap:10px;
  padding:10px;border-radius:12px;background-color:rgba(18,18,20,.88);border:1px solid rgba(255,255,255,.09);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transform:translateY(140%);transition:transform .45s var(--atv-ease)}
.mobile-cta .atv-btn{flex:1;padding:.95em 1em}
.mobile-call{flex:none;display:grid;place-items:center;padding:0 16px;border-radius:8px;color:#fff;text-decoration:none;font-weight:600;
  background-image:var(--up-d-bg);border:1px solid var(--edge-d);box-shadow:var(--up-d)}
.mobile-call:active{background-image:var(--in-d-bg);box-shadow:var(--in-d)}
@media (max-width:860px){.mobile-cta{display:flex}.mobile-cta.is-on{transform:none}.site-footer{padding-bottom:110px}}


/* ---------- Risorse ---------- */
.res-meta{font-size:.84rem;color:rgba(255,255,255,.5);margin:0 0 8px;letter-spacing:.01em}
.res-meta .soon{margin-left:8px;padding:.2em .6em;border-radius:4px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);font-size:.78rem}
.res-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.res-f{font:600 .9rem var(--atv-font);color:rgba(255,255,255,.75);padding:.55em 1.1em;border-radius:6px;cursor:pointer;
  background-image:var(--up-d-bg);border:1px solid var(--edge-d);box-shadow:var(--up-d);transition:box-shadow .3s ease, color .3s ease}
.res-f.is-on{color:#fff;background-image:var(--in-d-bg);box-shadow:var(--in-d)}
.res-f:hover{color:var(--atv-orange)}
.res-card[hidden]{display:none}
.res-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.res-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.res-grid{grid-template-columns:1fr}}
/* ---------- articolo ---------- */
.article{max-width:760px}
.article h2{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);margin:44px 0 14px}
.article p{margin:0 0 1.1em;max-width:70ch}
.article .brief-inline{margin:0 0 10px !important}
.article .faq-list{margin-top:10px}
.article-end{margin-top:40px;padding-top:22px;border-top:1px solid var(--ctx-line)}


.lang{display:grid;place-items:center;min-width:44px;padding:.6em .7em;border-radius:6px;font-weight:600;font-size:.9rem;color:rgba(255,255,255,.86);text-decoration:none;
  background-image:var(--up-d-bg);border:1px solid var(--edge-d);box-shadow:var(--up-d);transition:color .3s ease, box-shadow .3s ease}
.lang:hover{color:var(--atv-orange)}
@media (max-width:980px){.lang{margin-left:auto;margin-right:8px}}

.viz-inline{max-width:420px;margin:0 auto 30px}
/* ===== ponte per i blocchi di WordPress ===== */
.wp-block-group.sheet{display:block}
.wp-site-blocks > *{margin-block:0}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.atv-btn-primary .wp-block-button__link{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;font:600 1rem/1 var(--atv-font);color:#fff;padding:1.05em 1.55em;text-decoration:none;border-radius:var(--atv-r-btn,6px);background-image:var(--up-o-bg);border:1px solid var(--edge-o);box-shadow:var(--up-o-d);-webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);transition:background-image .3s ease, box-shadow .2s ease, transform .2s ease}
.atv-btn-primary .wp-block-button__link:hover{background-image:linear-gradient(145deg,rgba(255,128,80,.98),rgba(255,90,31,.96))}
.atv-btn-primary .wp-block-button__link:active{box-shadow:var(--in-o);transform:translateY(1px)}
.atv-btn-ghost .wp-block-button__link{position:relative;display:inline-flex;align-items:center;justify-content:center;font:600 1rem/1 var(--atv-font);color:#fff;padding:1.05em 1.55em;text-decoration:none;border-radius:var(--atv-r-btn,6px);background-image:var(--up-d-bg);border:1px solid var(--edge-d);box-shadow:var(--up-d);transition:box-shadow .3s ease}
.atv-btn-ghost .wp-block-button__link:active{background-image:var(--in-d-bg);box-shadow:var(--in-d)}
.editor-styles-wrapper [data-reveal]{opacity:1 !important;transform:none !important}
.editor-styles-wrapper .sheet{margin-top:0;border-radius:0}

/* ===== entrata della pagina ===== */
.atv-enter{opacity:0;transform:translateY(22px);transition:opacity .9s var(--atv-ease), transform .9s var(--atv-ease);transition-delay:calc((var(--e,0) + 1) * 110ms)}
body.atv-ready .atv-enter{opacity:1;transform:none}
.site-header .bar.atv-enter{transform:translateY(-14px)}
@media (prefers-reduced-motion:reduce){.atv-enter{opacity:1 !important;transform:none !important;transition:none}}
.editor-styles-wrapper .atv-enter{opacity:1;transform:none}

/* ===== correzioni ===== */
/* header: più respiro dal bordo superiore */
.site-header{top:max(22px, calc(env(safe-area-inset-top) + 16px))}
.admin-bar .site-header{top:calc(32px + 22px)}
body.has-crumbs .hero,.hero{--padding-top:150px}
@media (max-width:860px){
  .site-header{top:max(16px, calc(env(safe-area-inset-top) + 12px))}
  .hero{--padding-top:132px}
}

/* «Come lavoriamo»: niente sezione bloccata, si scorre normalmente */
.js-steps .process-track{height:auto !important}
.js-steps .process-sticky{position:static !important;min-height:0 !important;padding-block:var(--atv-section) !important}
.js-steps .step{opacity:1 !important}
.steps::after{transform:scaleY(1) !important}
.step .n,.js-steps .step .n{background:linear-gradient(145deg, #FF6B33, #E8501E) !important;border-color:rgba(255,170,130,.5) !important;box-shadow:var(--up-o-d) !important;color:#fff}

/* loghi clienti cliccabili */
.logo-tile a{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit}
.logo-tile a:focus-visible{outline:2px solid var(--atv-orange);outline-offset:4px}

/* =====================================================================
   RILIEVI UNIFORMI (ultima parola sul neumorfismo)
   Su scuro la luce è appena percepibile, l'ombra è profonda.
   Su chiaro la luce è bianca ma morbida.
   Sull'arancione la luce è calda, mai bianca piena.
   ===================================================================== */
:root{
  /* scuro */
  --up-d:5px 5px 14px rgba(0,0,0,.72), 2px 2px 6px rgba(0,0,0,.5), -2px -2px 9px rgba(255,255,255,.045), inset 0 1px 0 rgba(255,255,255,.07);
  --in-d:inset 4px 4px 11px rgba(0,0,0,.82), inset -2px -2px 8px rgba(255,255,255,.05);
  --edge-d:rgba(255,255,255,.07);
  /* chiaro */
  --up-l:6px 6px 16px rgba(150,156,168,.40), -4px -4px 12px rgba(255,255,255,.85), inset 0 1px 0 rgba(255,255,255,.9);
  --in-l:inset 4px 4px 10px rgba(150,156,168,.45), inset -3px -3px 9px rgba(255,255,255,.9);
  --edge-l:rgba(255,255,255,.85);
  /* arancione */
  --up-o-d:5px 5px 14px rgba(0,0,0,.55), -2px -2px 9px rgba(255,170,130,.13), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(120,30,0,.3);
  --up-o-l:6px 6px 16px rgba(150,156,168,.45), -3px -3px 10px rgba(255,220,200,.7), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(120,30,0,.3);
  --in-o:inset 4px 4px 10px rgba(140,36,0,.5), inset -3px -3px 9px rgba(255,150,105,.28);
  --edge-o:rgba(255,190,160,.45);
}
.sheet--dark,.svc--dark,.atv-sheet--dark{--ctx-lt1:rgba(255,255,255,.018);--ctx-lt2:rgba(255,255,255,.032)}

/* icone e nodi: stessi rilievi di tutto il resto */
body .sheet--dark .atv-icon,body .sheet--dark .svc .atv-icon,body .sheet--dark .energy-item .atv-icon,body .map .node,body .menu-toggle,body .badges a,body .res-f{
  box-shadow:var(--up-d);border-color:var(--edge-d)}
body .sheet--dark .svc:hover .atv-icon,body .sheet--dark .energy-item:hover .atv-icon,body .map .node:hover,body .map .node:focus-visible,
body .menu-toggle[aria-expanded="true"],body .badges a:hover,body .res-f.is-on{box-shadow:var(--in-d)}
body .sheet--light .atv-icon,body .sheet--light .svc .atv-icon{box-shadow:var(--up-l);border-color:var(--edge-l)}
body .sheet--light .svc:hover .atv-icon{box-shadow:var(--in-l)}

/* pulsanti: la luce in alto a sinistra non è più bianca piena */
body .atv-btn--primary,body .atv-btn-primary .wp-block-button__link,body .map .core,body .step .n,body .step.is-on .n{box-shadow:var(--up-o-d);border-color:var(--edge-o)}
body .sheet--light .atv-btn--primary,body .sheet--light .atv-btn-primary .wp-block-button__link{box-shadow:var(--up-o-l)}
body .atv-btn--primary:active,body .atv-btn-primary .wp-block-button__link:active{box-shadow:var(--in-o)}
body .site-header .atv-btn--primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(120,30,0,.3), 0 6px 14px -8px rgba(232,80,30,.5)}
body .sheet--dark .atv-btn--ghost,body .atv-btn-ghost .wp-block-button__link{box-shadow:var(--up-d);border-color:var(--edge-d)}
body .sheet--dark .atv-btn--ghost:active,body .atv-btn-ghost .wp-block-button__link:active{box-shadow:var(--in-d)}
body .sheet--light .atv-btn--ghost{box-shadow:var(--up-l);border-color:var(--edge-l)}
body .sheet--light .atv-btn--ghost:active{box-shadow:var(--in-l)}

/* card e FAQ: sollevamento coerente, senza alone bianco in alto */
body .sheet--dark .faq details,body .sheet--dark .atv-glass,body .sheet--dark .neu-up{
  box-shadow:6px 6px 18px rgba(0,0,0,.6), 2px 2px 8px rgba(0,0,0,.45), -2px -2px 10px rgba(255,255,255,.035), inset 0 1px 0 rgba(255,255,255,.06)}
body .sheet--dark .faq details[open]{box-shadow:var(--in-d)}
body .sheet--dark .credentials,body .sheet--dark .neu-in,body .sheet--dark .fld input,body .sheet--dark .fld select,body .sheet--dark .fld textarea{box-shadow:var(--in-d)}
body .has-aurora .atv-glass:not(.svc--dark){box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 8px 8px 24px rgba(0,0,0,.5)}
body .sheet--light.has-aurora .atv-glass:not(.svc--dark){box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 8px 8px 22px rgba(120,126,140,.22)}
body .svc.atv-lift::after,body .logo-tile.atv-lift::after,body .svc::after,body .logo-tile::after{
  box-shadow:12px 12px 32px rgba(0,0,0,.6), -3px -3px 12px rgba(255,255,255,.04)}
body .sheet--light .svc::after,body .sheet--light .logo-tile::after{box-shadow:12px 12px 30px rgba(150,156,168,.35), -5px -5px 14px rgba(255,255,255,.9)}

/* =====================================================================
   CARATTERI: Familjen Grotesk per i titoli, Inter per il testo
   I file sono nel tema, con font-display:swap e una riserva calibrata
   perché il testo non si sposti mentre il font arriva.
   ===================================================================== */
@font-face{font-family:"Familjen Grotesk";src:url("font/familjen-grotesk-latin-wght-normal.woff2") format("woff2-variations");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Familjen Grotesk";src:url("font/familjen-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("font/inter-latin-wght-normal.woff2") format("woff2-variations");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("font/inter-latin-ext-wght-normal.woff2") format("woff2-variations");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* riserva con le stesse proporzioni: evita lo scatto al cambio di font */
@font-face{font-family:"Inter riserva";src:local("Segoe UI"),local("Helvetica Neue"),local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Grotesk riserva";src:local("Segoe UI"),local("Helvetica Neue"),local("Arial");size-adjust:104%;ascent-override:94%;descent-override:24%;line-gap-override:0%}

:root{
  --atv-font:"Familjen Grotesk", "Grotesk riserva", ui-sans-serif, system-ui, sans-serif;
  --atv-font-testo:"Inter", "Inter riserva", ui-sans-serif, system-ui, sans-serif;
}
body,p,li,dd,dt,input,select,textarea,button,.hero-lead,.answer,.article,.res-meta,.credentials,.brief-inline,.cta-contacts,.legal,.foot-grid,.tip{font-family:var(--atv-font-testo)}
h1,h2,h3,h4,.statement,.atv-btn,.wp-block-button__link,.nav a,.logo,.step .n,.menu-toggle,.lang,.foot-title,.quote blockquote,.res-f{font-family:var(--atv-font)}
body{letter-spacing:-.005em}
p,li{line-height:1.65}

/* ===== «Come lavoriamo»: i punti si colorano scorrendo, senza bloccare ===== */
.js-steps .process-track{height:auto !important}
.js-steps .process-sticky{position:static !important;min-height:0 !important}
.step .n{background:linear-gradient(145deg, var(--ctx-lo), var(--ctx-hi)) !important;border-color:var(--edge-d) !important;box-shadow:var(--in-d) !important;color:rgba(255,255,255,.45)}
.step.is-on .n{background:linear-gradient(145deg, #FF6B33, #E8501E) !important;border-color:var(--edge-o) !important;box-shadow:var(--up-o-d) !important;color:#fff}
.js-steps .step{opacity:1 !important}
.js-steps .step h3,.js-steps .step p{transition:color .45s ease, opacity .45s ease}
.js-steps .step:not(.is-on) h3{color:rgba(255,255,255,.5)}
.js-steps .step:not(.is-on) p{opacity:.5}
.steps::after{transform:scaleY(var(--pp,0)) !important;transition:transform .25s linear}

/* ===== grafiche: solo i nodi che portano a una pagina sono cliccabili ===== */
.map .node:not(a){cursor:default}
.map .node:not(a):hover{box-shadow:var(--up-d)}
.sheet--light .map .node:not(a):hover{box-shadow:var(--up-l)}
.map a.node{cursor:pointer}

/* ===== modulo in fondo alle pagine ===== */
.cta-panel .atv-form{grid-column:1 / -1;margin-top:8px}
.cta-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.cta-form .fld--wide{grid-column:1 / -1}
@media (max-width:640px){.cta-form{grid-template-columns:1fr}}