/* ==========================================================================
   Evo Sistemi — design system del nuovo sito
   Un solo foglio di stile. Nessun framework, nessun Elementor, nessun jQuery.
   Riferimento di linguaggio: scui.it (sezioni ritmate, card morbide, ombre ampie,
   una fascia scura come contrappunto). Palette e tono sono di Evo Sistemi.
   ========================================================================== */

/* ---------- caratteri (self-hosted, niente CDN esterni) ---------- */
@font-face{font-family:'Switzer';src:url('fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* ---------- token ---------- */
:root{
  /* colore — sono i colori già in uso sul sito, applicati con disciplina */
  --violet:#5B168C;        --violet-2:#7A2BB8;   --violet-soft:#F2EAFA;
  --magenta:#B0245F;       --magenta-soft:#FCEDF3;
  --green:#0F766E;         --green-soft:#E6F5F3;
  --amber:#B45309;         --amber-soft:#FDF3E4;
  --star:#E0A106;

  --ink:#1A0E2E;           --text:#3F3555;       --muted:#6E6282;   --muted-2:#8C81A3;
  --line:#E7E0F0;          --line-2:#D6CCE6;
  --page:#FFFFFF;          --card:#FFFFFF;       --soft:#FAF8FC;    --soft-2:#F4F0F9;

  /* fascia scura — viola profondo, non nero */
  --deep-1:#1B0B33;        --deep-2:#2A1150;     --deep-3:#3B1A66;
  --on-deep:#F4EFFA;       --on-deep-muted:#B3A3CC;

  /* forma */
  --r-sm:12px; --r:20px; --r-lg:30px; --r-pill:999px;
  --shadow-sm:0 8px 24px rgba(26,14,46,.07);
  --shadow:0 22px 60px rgba(26,14,46,.12);
  --shadow-lg:0 34px 90px rgba(26,14,46,.20);

  /* tipografia */
  --display:'Satoshi','Switzer',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Switzer',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* misure */
  --wrap:1180px;
  --sec:88px;
}

@media (prefers-color-scheme: dark){
  :root{
    --violet:#C495EC; --violet-2:#DDBBF7; --violet-soft:#2A1748;
    --magenta:#F58BB2; --magenta-soft:#3A1730;
    --green:#5EEAD4;  --green-soft:#10312E;
    --amber:#FBBF64;  --amber-soft:#332312;
    --ink:#F7F3FC;    --text:#CBC0DE;   --muted:#9E92B8;  --muted-2:#7E7196;
    --line:#2E2145;   --line-2:#3D2D59;
    --page:#0F0719;   --card:#180E29;   --soft:#150C24;   --soft-2:#1D1231;
    --deep-1:#150826; --deep-2:#220E42; --deep-3:#311557;
    --shadow-sm:0 8px 24px rgba(0,0,0,.5);
    --shadow:0 22px 60px rgba(0,0,0,.6);
    --shadow-lg:0 34px 90px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --violet:#C495EC; --violet-2:#DDBBF7; --violet-soft:#2A1748;
  --magenta:#F58BB2; --magenta-soft:#3A1730;
  --green:#5EEAD4;  --green-soft:#10312E;
  --amber:#FBBF64;  --amber-soft:#332312;
  --ink:#F7F3FC;    --text:#CBC0DE;   --muted:#9E92B8;  --muted-2:#7E7196;
  --line:#2E2145;   --line-2:#3D2D59;
  --page:#0F0719;   --card:#180E29;   --soft:#150C24;   --soft-2:#1D1231;
  --deep-1:#150826; --deep-2:#220E42; --deep-3:#311557;
  --shadow-sm:0 8px 24px rgba(0,0,0,.5);
  --shadow:0 22px 60px rgba(0,0,0,.6);
  --shadow-lg:0 34px 90px rgba(0,0,0,.75);
}
:root[data-theme="light"]{
  --violet:#5B168C; --violet-2:#7A2BB8; --violet-soft:#F2EAFA;
  --magenta:#B0245F; --magenta-soft:#FCEDF3;
  --green:#0F766E;  --green-soft:#E6F5F3;
  --amber:#B45309;  --amber-soft:#FDF3E4;
  --ink:#1A0E2E;    --text:#3F3555;   --muted:#6E6282;  --muted-2:#8C81A3;
  --line:#E7E0F0;   --line-2:#D6CCE6;
  --page:#FFFFFF;   --card:#FFFFFF;   --soft:#FAF8FC;   --soft-2:#F4F0F9;
  --deep-1:#1B0B33; --deep-2:#2A1150; --deep-3:#3B1A66;
  --shadow-sm:0 8px 24px rgba(26,14,46,.07);
  --shadow:0 22px 60px rgba(26,14,46,.12);
  --shadow-lg:0 34px 90px rgba(26,14,46,.20);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--page); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--violet); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--magenta); outline-offset:3px; border-radius:6px}
::selection{background:var(--violet-soft); color:var(--ink)}

h1,h2,h3,h4{font-family:var(--display); color:var(--ink); margin:0; text-wrap:balance; letter-spacing:-.03em}
h1{font-size:clamp(36px,5.2vw,60px); font-weight:900; line-height:1.03}
h2{font-size:clamp(28px,3.6vw,42px); font-weight:700; line-height:1.1; letter-spacing:-.028em}
h3{font-size:19px; font-weight:700; line-height:1.3; letter-spacing:-.02em}
p{margin:0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.sec{padding-block:var(--sec)}
.sec-soft{background:var(--soft)}
.sec-grad{background:linear-gradient(180deg,var(--page) 0%,var(--soft) 100%)}
.stack{display:flex; flex-direction:column}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}

/* ---------- elementi ricorrenti ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--magenta); margin-bottom:16px;
}
.kicker::before{content:""; width:22px; height:2px; border-radius:2px; background:currentColor}
.kicker-light{color:#F0A9C6}
.kicker-light::before{background:currentColor}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 15px 7px 11px; border-radius:var(--r-pill);
  background:var(--violet-soft); color:var(--violet);
  font-size:13.5px; font-weight:600; letter-spacing:-.01em; margin-bottom:22px;
}
.eyebrow i{width:7px; height:7px; border-radius:50%; background:var(--magenta); flex:none}

.sec-head{max-width:36em; margin-bottom:44px}
.sec-head p.lead{margin-top:14px; font-size:18.5px; color:var(--muted)}
.sec-head.center{margin-inline:auto; text-align:center}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:16.5px; font-weight:600; letter-spacing:-.01em;
  padding:15px 26px; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s, border-color .18s, color .18s;
}
.btn:hover{text-decoration:none}
.btn svg{flex:none; transition:transform .18s}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--violet); color:#fff; box-shadow:var(--shadow-sm)}
:root[data-theme="dark"] .btn-primary{color:#12071F}
@media (prefers-color-scheme: dark){:root:not([data-theme]) .btn-primary{color:#12071F}}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--violet); color:var(--violet)}
.btn-light{background:#fff; color:var(--deep-2)}
.btn-light:hover{transform:translateY(-2px)}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn-outline-light:hover{border-color:#fff}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:26px; box-shadow:var(--shadow-sm);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
a.card{display:block; color:inherit}
a.card:hover{transform:translateY(-5px); border-color:var(--violet); box-shadow:var(--shadow); text-decoration:none}
.card h3{margin-bottom:8px}
.card p{color:var(--muted); font-size:15.5px}

.ico{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:var(--violet-soft); color:var(--violet); margin-bottom:16px; flex:none;
}
.ico svg{width:21px; height:21px}
.ico-magenta{background:var(--magenta-soft); color:var(--magenta)}
.ico-green{background:var(--green-soft); color:var(--green)}
.ico-amber{background:var(--amber-soft); color:var(--amber)}

.go{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-weight:600; font-size:15px; color:var(--violet);
}
.go svg{transition:transform .2s}
a.card:hover .go svg{transform:translateX(4px)}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--page) 86%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .2s, box-shadow .2s;
}
.site-header[data-scrolled="true"]{border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(26,14,46,.02)}
.hd{display:flex; align-items:center; gap:28px; height:74px}
/* Marchio: il logo vero di Evo Sistemi, non un segnaposto.
   Due file — nero per fondo chiaro, bianco per fondo scuro — perché il
   marchio è nero e sul footer scuro sparirebbe. Il verde e il rosso della
   bandiera restano identici in entrambe le versioni. */
.brand{display:inline-flex; align-items:center; flex:none}
.brand:hover{text-decoration:none}
/* NB: la regola che nasconde una delle due versioni deve avere specificità
   maggiore di .brand img, altrimenti perde e si vedono tutti e due i loghi. */
.brand img{height:54px; width:auto; display:block}
.brand .logo-chiaro{display:none}
.brand .logo-scuro{display:block}
:root[data-theme="dark"] .site-header .brand .logo-scuro{display:none}
:root[data-theme="dark"] .site-header .brand .logo-chiaro{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .site-header .brand .logo-scuro{display:none}
  :root:not([data-theme]) .site-header .brand .logo-chiaro{display:block}
}
/* nel footer il fondo è sempre scuro, in entrambi i temi */
.site-footer .brand .logo-scuro{display:none}
.site-footer .brand .logo-chiaro{display:block}
.site-footer .brand img{height:58px}
@media (max-width:600px){ .brand img{height:44px} }
.nav{display:flex; align-items:center; gap:22px; margin-left:auto}
/* La navigazione è una lista: senza list-style il browser stampa i pallini. */
.nav-list{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0}
.nav-list li{list-style:none}
.nav-list li::marker{content:""}
.nav a{font-size:15.5px; font-weight:500; color:var(--text); white-space:nowrap}
.nav a:hover{color:var(--violet); text-decoration:none}
.nav a[aria-current="page"]{color:var(--violet); font-weight:600}
.hd-cta{display:flex; align-items:center; gap:12px}
.hd-cta .btn{padding:11px 20px; font-size:15px}
.hd-tel{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15.5px; color:var(--ink)}
.hd-tel:hover{color:var(--violet); text-decoration:none}
.burger{display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2); background:transparent; color:var(--ink); cursor:pointer; align-items:center; justify-content:center}

/* ---------- mega-menu dei servizi ----------
   Tutti i servizi restano raggiungibili da ogni pagina, ma in un pannello che
   si apre: l'utente non si trova 51 voci sempre aperte davanti agli occhi. */
.has-mega{position:static}
.nav-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:15.5px; font-weight:500; color:var(--text);
  background:transparent; border:0; padding:0; cursor:pointer;
}
.nav-btn:hover{color:var(--violet)}
.nav-btn svg{transition:transform .2s}
.nav-btn[aria-expanded="true"]{color:var(--violet)}
.nav-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.mega{
  position:absolute; left:0; right:0; top:100%; z-index:49;
  background:var(--page); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow); animation:megaIn .18s cubic-bezier(.2,.7,.3,1);
}
.mega[hidden]{display:none}
@keyframes megaIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
/* Compatto: 10 colonne con 56 voci diventano un muro se le si lascia respirare
   come una sezione di pagina. Qui serve densità, non aria. */
.mega-in{padding-block:22px 18px; max-height:min(74vh, 620px); overflow-y:auto; overscroll-behavior:contain}
.mega-cols{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px 22px; align-items:start}
.mega-col{min-width:0}
.mega-h{
  display:block; font-family:var(--display); font-weight:700; font-size:13.5px;
  color:var(--ink); letter-spacing:-.01em; line-height:1.25;
  padding-bottom:6px; margin-bottom:7px; border-bottom:1.5px solid var(--line);
}
.mega-h:hover{color:var(--violet); border-color:var(--violet); text-decoration:none}
.mega-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.mega-col li{list-style:none}
.mega-col a:not(.mega-h){
  font-size:13.5px; line-height:1.35; color:var(--muted); display:block;
  padding:3px 8px; margin-left:-8px; border-radius:7px;
}
.mega-col a:not(.mega-h):hover{color:var(--violet); background:var(--violet-soft); text-decoration:none}
.mega-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 22px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; color:var(--muted);
}
@media (max-width:1180px){ .mega-cols{grid-template-columns:repeat(4,minmax(0,1fr))} }
.mega-foot b{color:var(--ink); font-weight:600}
.mega-foot .btn{padding:12px 22px; font-size:15px}

/* ---------- hero ---------- */
.hero{position:relative; overflow:clip; padding-block:64px 76px}
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -20%; height:130%; pointer-events:none; z-index:0;
  background:
    radial-gradient(34% 40% at 14% 22%, color-mix(in srgb,var(--violet) 20%, transparent) 0%, transparent 68%),
    radial-gradient(30% 34% at 78% 6%,  color-mix(in srgb,var(--magenta) 16%, transparent) 0%, transparent 66%),
    radial-gradient(26% 30% at 92% 52%, color-mix(in srgb,var(--green) 10%, transparent) 0%, transparent 70%);
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:60px; align-items:center}
.hero p.lead{font-size:19.5px; color:var(--text); max-width:32em; margin:20px 0 0}
.hero h1 em{font-style:normal; color:var(--violet)}

.proof-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  margin:26px 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-size:14.5px; color:var(--muted);
}
.proof-row b{color:var(--ink); font-weight:600}
.stars{color:var(--star); letter-spacing:.05em; font-size:15px}
.sep{width:3px; height:3px; border-radius:50%; background:var(--line-2); flex:none}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}

/* pannello "semaforo del sito" */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden}
.panel-top{padding:22px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px}
.panel-top h3{font-size:17.5px}
.panel-top .chip{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 10px}
.panel-body{padding:24px}
.field{display:flex; gap:10px; margin-bottom:22px}
.field input{
  flex:1; min-width:0; font-family:var(--sans); font-size:15.5px; color:var(--ink);
  background:var(--soft); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:13px 15px;
}
.field input::placeholder{color:var(--muted-2)}
.field input:focus{border-color:var(--violet); outline:none; background:var(--page)}
.field button{padding:13px 20px; font-size:15px; border-radius:var(--r-sm)}
.axes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:17px}
.axis{display:grid; grid-template-columns:1fr auto; gap:7px 12px; align-items:baseline}
.axis-name{font-size:15px; color:var(--text); font-weight:500}
.axis-tag{font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.04em; color:var(--muted-2)}
.track{grid-column:1/-1; height:7px; border-radius:var(--r-pill); background:var(--soft-2); overflow:hidden}
.track i{display:block; height:100%; width:0; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--violet),var(--magenta)); transition:width 1.05s cubic-bezier(.22,.85,.3,1)}
.panel-foot{padding:16px 24px; background:var(--soft); border-top:1px solid var(--line); font-size:13px; color:var(--muted)}

/* ---------- striscia fiducia ---------- */
.trust{border-block:1px solid var(--line); background:var(--card)}
.trust-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 30px; padding-block:22px}
.trust-item{display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--muted)}
.trust-item b{color:var(--ink); font-weight:600}
.trust-item svg{color:var(--violet); flex:none}

/* ---------- confronto ---------- */
.vs{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px}
.vs-col{border-radius:var(--r); padding:30px; border:1px solid var(--line); background:var(--card)}
.vs-col.bad{background:var(--soft-2); border-style:dashed}
.vs-col.good{border-color:var(--violet); box-shadow:var(--shadow)}
.vs-lab{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px}
.vs-col.bad .vs-lab{color:var(--muted-2)}
.vs-col.good .vs-lab{color:var(--violet)}
.vs-list{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:13px}
.vs-list li{display:flex; gap:11px; font-size:15.5px; align-items:flex-start}
.vs-list svg{flex:none; margin-top:3px}
.vs-col.bad .vs-list svg{color:var(--muted-2)}
.vs-col.good .vs-list svg{color:var(--green)}

/* ---------- griglie ---------- */
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:18px}
.grid-4{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:18px}

/* metodo numerato: qui l'ordine è informazione, non decorazione */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; counter-reset:step}
.step{position:relative; padding-top:18px; border-top:2px solid var(--line)}
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--display); font-weight:900; font-size:13px; letter-spacing:.08em;
  color:var(--magenta); display:block; margin-bottom:10px;
}
.step h3{margin-bottom:8px}
.step p{color:var(--muted); font-size:15.5px}

/* ---------- fascia scura ---------- */
.deep{
  position:relative; color:var(--on-deep); overflow:clip;
  background:linear-gradient(135deg,var(--deep-1) 0%,var(--deep-2) 56%,var(--deep-3) 100%);
}
.deep::after{
  content:""; position:absolute; inset:auto -10% -50% 40%; height:120%; pointer-events:none;
  background:radial-gradient(40% 40% at 50% 50%, rgba(240,105,151,.18) 0%, transparent 70%);
}
.deep-in{position:relative; z-index:1}
.deep h2{color:#fff}
.deep .sec-head p.lead{color:var(--on-deep-muted)}
.deep-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; margin-top:8px}
.deep-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); border-radius:var(--r); padding:26px; backdrop-filter:blur(4px)}
.deep-card h3{color:#fff; margin-bottom:8px}
.deep-card p{color:var(--on-deep-muted); font-size:15.5px}
.deep-card .ico{background:rgba(255,255,255,.11); color:#fff}
.deep-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}

/* ---------- lavori ---------- */
.works{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px}
.work{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:230px;
  border-radius:var(--r); padding:26px; color:#fff; overflow:hidden; isolation:isolate;
  background:linear-gradient(150deg,var(--deep-2),var(--violet));
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}
.work:nth-child(2){background:linear-gradient(150deg,#3B1A66,#B0245F)}
.work:nth-child(3){background:linear-gradient(150deg,#1B0B33,#0F766E)}
.work:nth-child(4){background:linear-gradient(150deg,#2A1150,#7A2BB8)}
.work:nth-child(5){background:linear-gradient(150deg,#3B1A66,#5B168C)}
.work:nth-child(6){background:linear-gradient(150deg,#1B0B33,#B0245F)}
.work:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); text-decoration:none}
.work-tag{font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:auto}
.work h3{color:#fff; font-size:22px; margin:16px 0 6px}
.work .result{font-size:15px; color:rgba(255,255,255,.86)}
.work .go{color:#fff; margin-top:14px; font-size:14.5px}

/* ---------- prezzi / moduli ---------- */
.price-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px}
.price{display:flex; flex-direction:column; gap:16px; padding:32px}
.price .amount{font-family:var(--display); font-weight:900; font-size:40px; color:var(--ink); letter-spacing:-.04em; line-height:1}
.price .amount small{font-family:var(--sans); font-size:15px; font-weight:500; color:var(--muted); letter-spacing:0}
.price ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.price li{display:flex; gap:10px; font-size:15.5px; align-items:flex-start}
.price li svg{flex:none; margin-top:4px; color:var(--green)}
.price .btn{margin-top:auto; align-self:flex-start}
.badge{display:inline-flex; align-items:center; gap:7px; align-self:flex-start; padding:5px 12px; border-radius:var(--r-pill); background:var(--green-soft); color:var(--green); font-size:12.5px; font-weight:600; letter-spacing:.02em}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin-inline:auto; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px; margin-top:-7px;
  border-right:2.4px solid var(--violet); border-bottom:2.4px solid var(--violet);
  transform:rotate(45deg); transition:transform .22s;
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq summary:hover{color:var(--violet)}
.faq .answer{padding:0 0 24px; color:var(--muted); font-size:16px; max-width:64ch}

/* ---------- chi c'è dietro ---------- */
.owner{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px; align-items:center}
.owner-photo{
  aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:linear-gradient(150deg,var(--violet-soft),var(--magenta-soft));
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.owner-photo span{font-family:var(--display); font-weight:700; font-size:14px; color:var(--muted); text-align:center; padding:24px}
.facts{list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px 26px}
.facts li{display:flex; flex-direction:column; gap:2px; font-size:15px; color:var(--muted); border-left:2px solid var(--line); padding-left:14px}
.facts b{color:var(--ink); font-weight:600; font-family:var(--display); letter-spacing:-.01em}

/* ---------- CTA finale ---------- */
.final{text-align:center; padding-block:var(--sec)}
.final h2{max-width:16ch; margin-inline:auto}
.final p{max-width:44ch; margin:16px auto 0; color:var(--muted); font-size:18px}
.final .hero-cta{justify-content:center; margin-top:30px}

/* ==========================================================================
   LA FACCIA, SU OGNI PAGINA
   Evo Sistemi è una ditta individuale: la persona è il marchio. Il volto
   compare in tre punti, a tre scale diverse, con tre scopi diversi —
   non è la stessa immagine ripetuta.
   1. chip nell'header  → "con chi sto parlando" (riconoscimento)
   2. fascia sul footer → "chi risponde se scrivo" (conversione), su ogni pagina
   3. sezione "chi c'è dietro" in home e nelle pagine chiave (fiducia, EEAT)
   ========================================================================== */

/* 1 — nell'header la faccia NON è un elemento a sé: è il pulsante del telefono.
   Un avatar accanto a un numero è decorazione; un avatar CHE È il numero
   dice "chiami e ti risponde questa persona", che è il punto. */
.hd-call{
  display:inline-flex; align-items:center; gap:11px; padding:6px 16px 6px 6px;
  border-radius:var(--r-pill); border:1px solid var(--line); background:var(--card);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.hd-call:hover{border-color:var(--violet); box-shadow:var(--shadow-sm); transform:translateY(-1px); text-decoration:none}
.hd-call img{width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none}
.hd-call-txt{display:flex; flex-direction:column; line-height:1.18}
.hd-call-txt span{font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2)}
.hd-call-txt b{font-size:16px; font-weight:700; color:var(--ink); font-family:var(--display); letter-spacing:-.02em; white-space:nowrap}
@media (max-width:1080px){ .hd-call-txt{display:none} .hd-call{padding:5px; gap:0} }

/* 2 — fascia autore sopra il footer */
.author-strip{background:var(--soft); border-top:1px solid var(--line)}
.author-in{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:20px 26px; align-items:center; padding-block:30px;
}
.author-face{position:relative; flex:none}
.author-face img{
  width:88px; height:88px; border-radius:50%; object-fit:cover; display:block;
  border:3px solid var(--page); box-shadow:var(--shadow-sm);
}
.author-face::after{
  content:""; position:absolute; right:3px; bottom:3px; width:17px; height:17px;
  border-radius:50%; background:var(--green); border:3px solid var(--soft);
}
.author-txt .d{
  font-family:var(--display); font-weight:700; font-size:19px; color:var(--ink);
  letter-spacing:-.02em; margin-bottom:4px;
}
.author-txt p{font-size:15.5px; color:var(--muted); max-width:52ch}
.author-txt .creds{
  display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:9px;
  font-size:13.5px; color:var(--muted-2);
}
.author-txt .creds b{color:var(--text); font-weight:600}
.author-act{display:flex; flex-wrap:wrap; gap:10px}
.author-act .btn{padding:13px 22px; font-size:15.5px}

@media (max-width:860px){
  .author-in{grid-template-columns:auto minmax(0,1fr); padding-block:26px}
  .author-act{grid-column:1/-1}
  .author-act .btn{flex:1}
}
@media (max-width:600px){
  .hd-face-txt{display:none}
}

/* 3 — sezione "chi c'è dietro": foto vera al posto del segnaposto */
.owner-photo img{width:100%; height:100%; object-fit:cover; object-position:center 12%}

/* ---------- footer ---------- */
.site-footer{background:var(--deep-1); color:var(--on-deep-muted); padding-block:60px 30px; font-size:15px}
.ft-grid{display:grid; grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(150px,1fr)); gap:36px 30px}
.ft-brand p{max-width:38ch}
@media (max-width:900px){ .ft-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .ft-grid{grid-template-columns:1fr} }
.site-footer h4{font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:16px}
.site-footer a{color:var(--on-deep-muted)}
.site-footer a:hover{color:#fff}
.ft-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.ft-brand .brand{color:#fff; margin-bottom:14px}
.ft-legal{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:13.5px}
.ft-legal ul{list-style:none; display:flex; flex-wrap:wrap; gap:10px 20px; margin:0; padding:0}

/* ==========================================================================
   CONTENUTO REDAZIONALE (.prose)
   Serve agli articoli del blog e alle pagine che NON portano CSS proprio nel
   contenuto: 186 articoli e 27 pagine si appoggiano alla tipografia del tema.
   Senza queste regole, cambiando tema quei contenuti resterebbero senza stile.
   Le pagine con design system incorporato (126, classi .evo-lm / .evo-core)
   non passano di qui: si portano dietro il proprio <style> e restano identiche.
   ========================================================================== */
.prose{max-width:none}
.prose > *{max-width:68ch}
.prose > .full{max-width:none}
.prose h2{font-size:clamp(24px,2.8vw,32px); margin:44px 0 14px}
.prose h3{font-size:21px; margin:32px 0 10px}
.prose h4{font-size:18px; margin:26px 0 8px; font-weight:700}
.prose p{margin:0 0 18px; font-size:17.5px}
.prose > p:first-of-type{font-size:19.5px; color:var(--text)}
.prose a{color:var(--violet); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-color:var(--line-2)}
.prose a:hover{text-decoration-color:var(--violet)}
.prose ul,.prose ol{margin:0 0 20px; padding-left:22px; display:flex; flex-direction:column; gap:9px}
.prose li{padding-left:4px}
.prose li::marker{color:var(--magenta)}
.prose strong{color:var(--ink); font-weight:600}
.prose img,.prose figure{margin:28px 0; border-radius:var(--r); overflow:hidden}
.prose figcaption{margin-top:10px; font-size:14px; color:var(--muted-2)}
.prose hr{border:0; border-top:1px solid var(--line); margin:40px 0}
.prose blockquote{
  margin:28px 0; padding:20px 24px; border-left:3px solid var(--magenta);
  background:var(--soft); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:18px; color:var(--ink);
}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:.88em;
  background:var(--violet-soft); color:var(--violet); padding:2px 6px; border-radius:6px;
}
.prose pre{
  margin:24px 0; padding:20px; border-radius:var(--r-sm); overflow-x:auto;
  background:var(--deep-1); color:var(--on-deep); font-size:14.5px; line-height:1.6; max-width:none;
}
.prose pre code{background:none; color:inherit; padding:0; font-size:inherit}
.prose .table-wrap{overflow-x:auto; margin:26px 0; max-width:none}
.prose table{width:100%; border-collapse:collapse; font-size:15.5px}
.prose th,.prose td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.prose th{font-family:var(--display); font-weight:700; color:var(--ink); font-size:14px; letter-spacing:-.01em}
.prose td:not(:first-child),.prose th:not(:first-child){font-variant-numeric:tabular-nums}

/* intestazione di un articolo */
.entry-head{padding-block:52px 8px}
.entry-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:18px; font-size:14.5px; color:var(--muted)}
.entry-meta .sep{background:var(--line-2)}
.entry-cover{margin:32px 0 40px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow)}

/* ==========================================================================
   WOOCOMMERCE
   Il sito non sovrascrive nessun template di Woo: usa quelli predefiniti.
   Bastano quindi poche regole di superficie perché negozio, carrello e
   checkout ereditino il linguaggio del nuovo tema invece dello stile grezzo.
   ========================================================================== */
.woocommerce ul.products{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:18px; margin:0; padding:0}
.woocommerce ul.products li.product{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, border-color .2s;
}
.woocommerce ul.products li.product:hover{transform:translateY(-4px); border-color:var(--violet); box-shadow:var(--shadow)}
.woocommerce ul.products li.product img{border-radius:var(--r-sm); margin-bottom:14px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--display); font-weight:700; font-size:17px; color:var(--ink); letter-spacing:-.02em; margin:0 0 6px;
}
.woocommerce .price{font-family:var(--display); font-weight:700; color:var(--ink); font-size:19px}
.woocommerce .price del{color:var(--muted-2); font-weight:500; font-size:15px; margin-right:6px}
.woocommerce .price ins{text-decoration:none; color:var(--magenta)}
.woocommerce span.onsale{
  background:var(--magenta); color:#fff; border-radius:var(--r-pill);
  padding:4px 12px; font-size:12.5px; font-weight:600; letter-spacing:.02em;
}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  font-family:var(--sans); font-weight:600; font-size:15.5px; letter-spacing:-.01em;
  background:var(--violet); color:#fff; border:0; border-radius:var(--r-pill);
  padding:13px 24px; box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--violet-2); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow);
}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{
  border-top:0; border-left:3px solid var(--violet); background:var(--soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:16px 20px; color:var(--text);
}
.woocommerce .woocommerce-error{border-left-color:var(--magenta)}
.woocommerce .woocommerce-message{border-left-color:var(--green)}
.woocommerce table.shop_table{border:1px solid var(--line); border-radius:var(--r); border-collapse:separate; border-spacing:0; overflow:hidden}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:var(--line); padding:14px 16px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{
  font-family:var(--sans); font-size:15.5px; color:var(--ink);
  background:var(--soft); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px;
}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{
  border-color:var(--violet); outline:none; background:var(--page);
}
.woocommerce .star-rating span{color:var(--star)}

/* ==========================================================================
   HOME — i blocchi che danno respiro visivo fra una sezione di testo e l'altra
   ========================================================================== */

/* grana sottile: toglie la piattezza al bianco senza aggiungere richieste HTTP */
.grana::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .grana::after{mix-blend-mode:screen; opacity:.35}

/* fascia dei numeri */
.stats{background:var(--soft); border-block:1px solid var(--line)}
.stats-in{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px 26px; padding-block:38px}
.stat{display:flex; flex-direction:column; gap:2px; padding-left:18px; border-left:2px solid var(--line)}
.stat b{
  font-family:var(--display); font-weight:900; font-size:clamp(30px,3.4vw,42px);
  line-height:1; letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.stat b em{font-style:normal; color:var(--magenta)}
.stat span{font-size:14.5px; color:var(--muted); line-height:1.35}

/* striscia tecnologie */
.tech{padding-block:34px; border-bottom:1px solid var(--line)}
.tech-in{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px}
.tech-lab{font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-right:8px}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--card); font-size:14.5px; font-weight:500; color:var(--text);
  transition:border-color .18s, transform .18s, color .18s;
}
.chip:hover{border-color:var(--violet); color:var(--violet); transform:translateY(-2px); text-decoration:none}
.chip i{width:8px; height:8px; border-radius:2px; background:var(--violet); flex:none}
.chip:nth-child(3n) i{background:var(--magenta)}
.chip:nth-child(3n+1) i{background:var(--green)}

/* lavori con lo screenshot vero */
.work{padding:0; min-height:0; display:block; background:var(--card); border:1px solid var(--line); overflow:hidden}
.work:hover{border-color:var(--violet)}
.work-shot{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--soft-2)}
.work-shot img{width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.work:hover .work-shot img{transform:scale(1.05)}
.work-shot::after{content:""; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(180deg,transparent,rgba(15,5,28,.72))}
.work-shot .work-tag{
  position:absolute; left:16px; bottom:14px; z-index:1; margin:0;
  font-size:11.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:#fff;
}
.work-body{padding:20px 22px 22px}
.work-body h3{color:var(--ink); font-size:19px; margin:0 0 5px}
.work-body .result{display:block; font-size:14.5px; color:var(--muted)}
.work-body .go{margin-top:12px; font-size:14.5px; color:var(--violet)}

/* recensioni */
.reviews{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px}
.review{
  display:flex; flex-direction:column; gap:14px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow-sm);
}
.review-stars{color:var(--star); font-size:15px; letter-spacing:.08em}
.review p{font-size:15.5px; color:var(--text); margin:0}
.review footer{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  font-size:14px; color:var(--muted-2);
}
.review footer b{display:block; color:var(--ink); font-weight:600; font-family:var(--display); letter-spacing:-.01em; font-size:15px}
.rating-badge{
  display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border-radius:var(--r-pill);
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  font-size:15px; color:var(--muted); margin-top:14px;
}
.rating-badge b{color:var(--ink); font-weight:700; font-family:var(--display); font-size:17px}

/* ultimi articoli */
.posts{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px}
.post-card{
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.post-card:hover{transform:translateY(-5px); border-color:var(--violet); box-shadow:var(--shadow); text-decoration:none}
.post-shot{aspect-ratio:16/9; overflow:hidden; background:linear-gradient(140deg,var(--violet),var(--magenta))}
.post-shot img{width:100%; height:100%; object-fit:cover}
.post-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1}
.post-body .tag{font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--magenta)}
.post-body h3{font-size:17.5px; line-height:1.3; color:var(--ink)}
.post-body time{margin-top:auto; font-size:13.5px; color:var(--muted-2)}

/* fascia scura: trama geometrica leggera */
.deep::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(160deg, #000 10%, transparent 62%);
}

/* ==========================================================================
   SEMAFORO — esito dell'analisi
   ========================================================================== */
.track i[data-livello="basso"]{background:linear-gradient(90deg,#C2410C,var(--magenta))}
.track i[data-livello="medio"]{background:linear-gradient(90deg,var(--violet),var(--magenta))}
.track i[data-livello="alto"]{background:linear-gradient(90deg,var(--green),#22A08A)}

.sem-esito{margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:14.5px; color:var(--muted)}
.sem-attesa{color:var(--violet)}
.sem-errore{color:var(--magenta)}
.sem-ok{color:var(--green); border:0; padding:0; margin:0}
.sem-totale{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px;
  font-size:15.5px; color:var(--text); margin-bottom:14px;
}
.sem-totale b{
  font-family:var(--display); font-weight:900; font-size:30px; letter-spacing:-.03em;
  color:var(--ink); line-height:1;
}
.sem-totale span{width:100%; font-size:13px; color:var(--muted-2)}
.sem-titolo{font-family:var(--display); font-weight:700; font-size:14px; color:var(--ink); margin-bottom:8px; letter-spacing:-.01em}
.sem-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.sem-lista li{position:relative; padding-left:20px; font-size:14.5px; color:var(--text); line-height:1.45}
.sem-lista li::before{
  content:""; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:3px; background:var(--muted-2);
}
.sem-lista li[data-gravita="alta"]::before{background:var(--magenta)}
.sem-lista li[data-gravita="media"]::before{background:var(--amber)}
.sem-lista li[data-gravita="bassa"]::before{background:var(--muted-2)}
.sem-altro{margin-top:12px; font-size:13.5px; color:var(--muted-2)}

/* pagina audit */
.audit-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:52px; align-items:start}
.audit-lista{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
.audit-lista li{display:flex; gap:12px; font-size:16px; align-items:flex-start}
.audit-lista svg{flex:none; margin-top:4px; color:var(--green)}
.lead-box{
  margin-top:22px; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:26px; box-shadow:var(--shadow);
}
.lead-box h3{margin-bottom:6px}
.lead-box > p{color:var(--muted); font-size:15px; margin-bottom:18px}
.lead-griglia{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.lead-griglia label{display:flex; flex-direction:column; gap:5px; font-size:13.5px; font-weight:600; color:var(--ink)}
.lead-griglia label.pieno{grid-column:1/-1}
.lead-griglia input,.lead-griglia textarea{
  font-family:var(--sans); font-size:15.5px; color:var(--ink); width:100%;
  background:var(--soft); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px;
}
.lead-griglia input:focus,.lead-griglia textarea:focus{border-color:var(--violet); outline:none; background:var(--page)}
.lead-privacy{grid-column:1/-1; display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--muted); font-weight:400}
.lead-privacy input{width:auto; flex:none; margin-top:3px}
.lead-esca{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:900px){
  .audit-grid{grid-template-columns:1fr; gap:36px}
  .lead-griglia{grid-template-columns:1fr}
}

/* ---------- comparsa allo scroll ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  :root{--sec:64px}
  .hero-grid,.owner{grid-template-columns:1fr; gap:38px}
  .burger{display:inline-flex}
  .hd-tel span{display:none}

  /* Su mobile la navigazione diventa un pannello a scorrimento:
     il mega-menu si srotola dentro, senza sovrapposizioni. */
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:var(--page); border-top:1px solid var(--line); box-shadow:var(--shadow);
    max-height:calc(100dvh - 66px); overflow-y:auto; padding:8px 0 20px;
  }
  .nav[data-open="true"]{display:flex}
  .nav > a,.nav-btn{padding:14px 24px; font-size:17px; width:100%; justify-content:space-between; border-bottom:1px solid var(--line)}
  .mega{position:static; box-shadow:none; border:0; animation:none}
  .mega-in{padding:18px 0 4px}
  .mega-cols{grid-template-columns:1fr; gap:22px}
  .mega-foot{flex-direction:column; align-items:flex-start}
}
@media (max-width:600px){
  body{font-size:16.5px}
  .hd{height:66px}
  .hd-cta .btn-primary{display:none}
  .trust-in{justify-content:flex-start}
  .card,.vs-col{padding:22px}
}

/* barra azione fissa su mobile: telefono sempre a un pollice di distanza */
.mobile-bar{display:none}
@media (max-width:700px){
  .mobile-bar{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    position:fixed; inset:auto 0 0 0; z-index:60; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--page) 92%, transparent); backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
  }
  .mobile-bar .btn{width:100%; padding:13px 14px; font-size:15.5px}
  body{padding-bottom:78px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
}

/* ==========================================================================
   COMPARTI — mega-menu leggero + navigazione di sezione dentro le pagine
   Il menu non elenca più 56 voci: mostra le 10 aree. Le schede si trovano
   dentro la sezione, dove servono davvero, e restano tutte collegate.
   ========================================================================== */
.mega-aree{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:10px}
.mega-area{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card);
  transition:border-color .18s, background .18s, transform .18s;
}
.mega-area:hover{border-color:var(--violet); background:var(--violet-soft); transform:translateY(-2px); text-decoration:none}
.mega-area-nome{font-family:var(--display); font-weight:700; font-size:15.5px; color:var(--ink); letter-spacing:-.02em}
.mega-area-n{margin-left:auto; font-size:12.5px; color:var(--muted-2); white-space:nowrap}
.mega-area svg{color:var(--violet); flex:none; transition:transform .18s}
.mega-area:hover svg{transform:translateX(3px)}

.sezione{background:var(--soft); border-top:1px solid var(--line)}
.sezione-in{padding-block:34px 30px}
.sezione-testa{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin-bottom:18px}
.sezione-lab{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--magenta)}
.sezione-titolo{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:700; font-size:22px; color:var(--ink); letter-spacing:-.025em;
}
.sezione-titolo:hover{color:var(--violet); text-decoration:none}
.sezione-titolo svg{color:var(--violet); transition:transform .18s}
.sezione-titolo:hover svg{transform:translateX(3px)}
.sezione-lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px 14px;
}
.sezione-lista li{list-style:none}
.sezione-lista a{
  display:block; padding:9px 14px; border-radius:var(--r-sm);
  background:var(--card); border:1px solid var(--line);
  font-size:14.5px; color:var(--text);
  transition:border-color .16s, color .16s, transform .16s;
}
.sezione-lista a:hover{border-color:var(--violet); color:var(--violet); transform:translateY(-1px); text-decoration:none}
.sezione-lista a[aria-current="page"]{
  border-color:var(--violet); background:var(--violet-soft); color:var(--violet); font-weight:600;
}
.sezione-piede{margin-top:18px; font-size:14px; color:var(--muted)}
@media (max-width:600px){
  .sezione-in{padding-block:26px 24px}
  .sezione-lista{grid-template-columns:1fr}
}

/* ---------- pagina audit: card dei quattro assi e blocco referto ---------- */
.assi-card{display:flex; flex-direction:column; gap:8px; position:relative; padding-top:26px}
.assi-card .assi-tag{
  position:absolute; top:26px; right:24px;
  font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.08em;
  color:var(--muted-2); background:var(--soft); border:1px solid var(--line);
  padding:3px 9px; border-radius:var(--r-pill);
}
.assi-card h3{margin:0 0 2px}
.assi-card p{font-size:15px; color:var(--muted); margin:0}
.assi-perche{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  font-size:14.5px; color:var(--text);
}
.assi-perche b{color:var(--ink); font-weight:600}

.referto-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:52px; align-items:start}
.referto-firma{
  display:flex; align-items:center; gap:14px; margin-top:28px;
  padding-top:22px; border-top:1px solid var(--line);
}
.referto-firma img{width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none}
.referto-firma span{display:flex; flex-direction:column; font-size:14.5px; color:var(--muted); line-height:1.35}
.referto-firma b{font-family:var(--display); font-weight:700; font-size:16.5px; color:var(--ink); letter-spacing:-.02em}
.lead-griglia .fac{font-weight:400; color:var(--muted-2)}

@media (max-width:900px){
  .referto-grid{grid-template-columns:1fr; gap:34px}
}