/* 045WEB, www.045web.it: foglio di stile unico.
   Valori dal CLAUDE.md §4-5 e dal prototipo Claude Design (tavole 1440 e 390).
   Fluido fra 768 e 1440: clamp(valore mobile, valore desktop / 14,4 vw, valore desktop). */

/* ---------- Font self-hosted (§3) ---------- */
@font-face{font-family:"DM Sans";src:url("/fonts/dm-sans-variable.woff2") format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/fonts/dm-sans-variable-italic.woff2") format("woff2");font-weight:100 1000;font-style:italic;font-display:swap}

/* ---------- Token (§4, tema Scuro) ---------- */
:root{
  --blue:#3398ff;
  --green:#32cc32;
  --ink:#f4f6f8;
  --ink-soft:#a3acb8;
  --surface:#0e1218;
  --surface-area:#181e27;
  --rule:#f4f6f8;
  --hairline:#2a313d;      /* mai per righe o filetti */
  --placeholder:#999999;
  --on-accent:#0e1218;
  --focus:#f4f6f8;
  --white:#ffffff;
  --white-72:rgba(255,255,255,.72);   /* eyebrow */
  --white-82:rgba(255,255,255,.82);   /* lead dell'hero */
  --legal:#c3cad3;                     /* corpo delle pagine legali (§4 Tipografia) */

  --font:"DM Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;

  /* Tipografia fluida 768-1440 (§4) */
  --fs-display:clamp(52px,7.2vw,104px);
  --fs-title:clamp(36px,4.3vw,62px);
  --fs-stat:clamp(52px,5vw,72px);
  --fs-card:clamp(22px,2.2vw,32px);
  --fs-lead:19px;
  --fs-body:16px;
  --fs-caption:13.5px;
  --fs-eyebrow:13px;
  --lh-display:.95;
  --lh-title:1.08;

  /* Spazi e layout (§4) */
  --content-max:1312px;
  --gutter:clamp(20px,4.5vw,64px);
  --radius:18px;
  --ease-out:cubic-bezier(.2,.7,.2,1);

  /* Header (§5) */
  --hh:88px;
  --logo-w:150px;
}
@media (max-width:767.98px){
  :root{--fs-lead:17px;--lh-display:.98;--lh-title:1.1;--fs-display:52px;--fs-title:36px;--fs-stat:52px;--gutter:20px}
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block}
a{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
h1,h2,h3,p,ol,ul{margin:0}
b,strong{font-weight:700}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.page{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;overflow-x:clip}
.page>main{flex:1 0 auto}
.wrap{width:100%;max-width:var(--content-max);margin-inline:auto}

/* Texture stelle 600x600 su tutta la pagina, 240s lineare (§5 Hero) */
.stars{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.stars::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 600px);background:url("/img/stelle-045web.svg") 0 0/600px 600px repeat;animation:w45-stars 240s linear infinite}
@keyframes w45-stars{to{transform:translateY(-600px)}}

/* ---------- Tipografia ricorrente ---------- */
.eyebrow{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--white-72);line-height:normal}
.title{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:500;letter-spacing:-.01em;text-wrap:balance}
.title b{font-weight:700}
.display{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:500;letter-spacing:-.02em;text-wrap:balance}
.display b{font-weight:700}
.lead{font-size:17px;line-height:1.6;color:var(--ink-soft)}
.section-head .eyebrow{margin-bottom:14px}
.section-head .lead{margin-top:16px;max-width:720px}

/* ---------- Pulsanti (§5 Hero e Stati interattivi) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:2px solid transparent;border-radius:999px;font-family:inherit;font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;text-align:center}
.btn-primary{isolation:isolate;background:linear-gradient(90deg,var(--blue) 0%,var(--green) 100%);background-origin:border-box;color:var(--on-accent)}
.btn-primary::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:linear-gradient(90deg,var(--green) 0%,var(--blue) 100%);opacity:0;transition:opacity .2s ease}
.btn-primary:focus-visible::before,.btn-primary:active::before{opacity:1}
@media (hover:hover){.btn-primary:hover::before{opacity:1}}
.btn-secondary{background:transparent;border-color:var(--white);color:var(--white);transition:background-color .15s ease,color .15s ease}
.btn-secondary:focus-visible,.btn-secondary:active{background:var(--white);color:var(--surface)}
@media (hover:hover){.btn-secondary:hover{background:var(--white);color:var(--surface)}}

/* ---------- Header (§5) ---------- */
.site-header{position:sticky;top:0;z-index:10;height:var(--hh);margin-bottom:calc(var(--hh) * -1);padding:0 var(--gutter);display:flex;align-items:center;transition:height .2s ease,margin-bottom .2s ease,background-color .2s ease,-webkit-backdrop-filter .2s ease,backdrop-filter .2s ease}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;max-width:var(--content-max);margin-inline:auto}
.site-logo{display:flex;align-items:center;min-height:48px;flex-shrink:0}
.site-logo img{width:var(--logo-w);height:auto;transition:width .2s ease}
.site-header.is-scrolled{--hh:72px;--logo-w:128px;background:rgba(14,18,24,.55);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.nav-desktop{display:flex;align-items:center;gap:clamp(16px,2.083vw,30px)}
.nav-link{position:relative;display:inline-flex;align-items:center;min-height:48px;padding:0;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;border-bottom:2px solid transparent;transition:color .15s ease}
.nav-link:focus-visible,.nav-link:active{color:var(--blue)}
@media (hover:hover){.nav-link:hover{color:var(--blue)}}
.nav-link[aria-current="page"]{border-bottom-color:var(--blue)}
.nav-cta{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--white);color:var(--surface);text-decoration:none;font-size:15px;font-weight:600;transition:background-color .15s ease,color .15s ease}
.nav-cta::after{content:"";position:absolute;inset:-2px 0}   /* area di tocco 48px senza cambiare la pillola */
/* Hover: fondo blu. Testo scuro (--on-accent) e non bianco: CLAUDE.md §4 e §10 vietano il bianco su azzurro (2,97:1). Vedi report. */
.nav-cta:focus-visible,.nav-cta:active,.nav-cta[aria-current="page"]{background:var(--blue);color:var(--on-accent)}
@media (hover:hover){.nav-cta:hover{background:var(--blue);color:var(--on-accent)}}
.menu-toggle{display:none}

/* Header mobile: sotto i 900px il menu desktop completo non entra (vedi report); il resto della pagina passa a mobile sotto i 768px */
@media (max-width:899.98px){
  .site-header,.site-header.is-scrolled{--hh:64px;--logo-w:120px}
  .nav-desktop{display:none}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-right:-12px;padding:0;background:transparent;border:0;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .menu-toggle svg{width:24px;height:24px}
}

/* ---------- Menu mobile (tavola MenuMobile del prototipo v103: sette voci a tutta altezza, filetti --rule) ---------- */
.menu-panel{display:none}
@media (max-width:899.98px){
  /* Senza JavaScript: il nav sta in fondo al documento, raggiungibile con l'ancora #menu */
  .menu-panel{display:block;position:relative;z-index:1;padding:48px var(--gutter);background:var(--surface)}
  .menu-list{list-style:none;padding:0;border-bottom:1px solid var(--rule)}
  .menu-list li{border-top:1px solid var(--rule)}
  .menu-list a{display:flex;align-items:center;min-height:64px;padding:8px 0;font-size:34px;line-height:1.15;font-weight:500;color:var(--ink);text-decoration:none;transition:color .15s ease}
  .menu-list a:focus-visible,.menu-list a:active,.menu-list a[aria-current="page"]{color:var(--blue)}

  /* Con JavaScript: pannello a tutto schermo, scende dall'alto in 250ms; sotto l'header (64px) 48px di respiro sopra e sotto,
     le voci si dividono l'altezza disponibile (minimo 56px: su schermi bassi il pannello scorre) */
  .js-ok .menu-panel{position:fixed;inset:0;z-index:9;display:flex;flex-direction:column;padding:112px var(--gutter) calc(48px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:var(--surface) url("/img/stelle-045web.svg") 0 0/600px 600px repeat;visibility:hidden;transform:translateY(-100%)}
  .menu-ready .menu-panel{transition:transform .25s var(--ease-out),visibility 0s linear .25s}
  .js-ok .menu-panel.is-open{visibility:visible;transform:none}
  .menu-ready .menu-panel.is-open{transition:transform .25s var(--ease-out)}
  .js-ok .menu-list{flex:1 1 auto;display:flex;flex-direction:column}
  .js-ok .menu-list li{flex:1 1 0;display:flex;min-height:56px}
  .js-ok .menu-list a{flex:1 1 auto;min-height:0}
  .js-ok .menu-panel li{opacity:0;transform:translateY(-8px)}
  .menu-ready .menu-panel li{transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
  .js-ok .menu-panel.is-open li{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 40ms)}
  body.menu-open{overflow:hidden}
}
@media (max-width:899.98px) and (hover:hover){
  .menu-list a:hover{color:var(--blue)}
}
@media (min-width:900px){.menu-panel{display:none!important}}

/* ---------- Hero (§5) ---------- */
.hero{--hero-pb:clamp(88px,11.667vw,168px);position:relative;z-index:auto;overflow:hidden;padding:clamp(136px,15vw,216px) var(--gutter) var(--hero-pb);color:var(--white)}
main>section.hero{z-index:auto}
/* I blob stanno a destra del paragrafo (largo 680px): la posizione orizzontale è ancorata al suo bordo destro,
   come nella tavola 1440 (blob-a 720, blob-b 900, blob-c 560 con colonna da 64+680=744) */
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;--text-start:max(var(--gutter),(100% - var(--content-max)) / 2);--text-end:calc(var(--text-start) + 680px)}
/* Blob: gruppo in «screen» sopra le stelle. Niente veli scuri sopra il fondo: sono i blob a essere attenuati con maschere,
   così le stelle restano sempre visibili. .blobs svanisce verso il basso (niente taglio al bordo dell'hero);
   .blobs-x attenua i blob dietro la colonna di testo: soste ancorate alla colonna (a 1440 = 32% / 58% / 78% del prototipo),
   così fra 768 e 1440 il paragrafo resta leggibile anche quando i blob, più piccoli, gli passano dietro */
.blobs{position:absolute;inset:0;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
.blobs-x{position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.22) 0,rgba(0,0,0,.22) var(--text-start),rgba(0,0,0,.3) calc(var(--text-start) + 397px),rgba(0,0,0,.65) calc(var(--text-start) + 771px),#000 calc(var(--text-start) + 1059px));mask-image:linear-gradient(90deg,rgba(0,0,0,.22) 0,rgba(0,0,0,.22) var(--text-start),rgba(0,0,0,.3) calc(var(--text-start) + 397px),rgba(0,0,0,.65) calc(var(--text-start) + 771px),#000 calc(var(--text-start) + 1059px))}
.blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.blob-a{width:min(68.06vw,980px);height:min(68.06vw,980px);left:calc(var(--text-end) - 24px);top:max(-26px,calc(160px - 12.93vw));background:radial-gradient(circle,rgba(51,152,255,.9) 0%,rgba(51,152,255,0) 62%);animation:w45-a 9s ease-in-out infinite alternate}
.blob-b{width:min(59.72vw,860px);height:min(59.72vw,860px);left:calc(var(--text-end) + 156px);top:min(287px,calc(160px + 8.8vw));background:radial-gradient(circle,rgba(50,204,50,.8) 0%,rgba(50,204,50,0) 62%);animation:w45-b 11s ease-in-out infinite alternate}
.blob-c{width:min(43.06vw,620px);height:min(43.06vw,620px);left:calc(var(--text-end) - 184px);top:min(276px,calc(160px + 8.06vw));background:radial-gradient(circle,rgba(51,152,255,.5) 0%,rgba(51,152,255,0) 62%);animation:w45-c 13s ease-in-out infinite alternate}
@keyframes w45-a{0%{transform:translate(0,0) scale(1)}50%{transform:translate(max(-200px,-13.89vw),min(130px,9.03vw)) scale(1.18)}100%{transform:translate(min(90px,6.25vw),min(240px,16.67vw)) scale(.92)}}
@keyframes w45-b{0%{transform:translate(0,0) scale(1)}50%{transform:translate(max(-260px,-18.06vw),max(-150px,-10.42vw)) scale(1.22)}100%{transform:translate(max(-70px,-4.86vw),max(-290px,-20.14vw)) scale(1)}}
/* Mobile: movimenti soprattutto verticali, in orizzontale al massimo 60px, così il blob resta sempre a cavallo del bordo destro */
@keyframes w45-a-m{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,150px) scale(1.1)}100%{transform:translate(30px,260px) scale(.92)}}
@keyframes w45-b-m{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,-180px) scale(1.15)}100%{transform:translate(10px,-330px) scale(1)}}
@keyframes w45-c-m{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-60px,170px) scale(1.2)}}
@keyframes w45-c{0%{transform:translate(0,0) scale(1)}100%{transform:translate(min(330px,22.92vw),max(-180px,-12.5vw)) scale(1.28)}}
.hero-content{position:relative;z-index:1}
.hero .eyebrow{margin-bottom:20px}
.hero-title{position:relative}
.hero-lead{margin-top:36px;max-width:680px;font-size:var(--fs-lead);line-height:1.6;color:var(--white-82)}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:44px}

/* Macchina da scrivere (§5 Animazioni) */
.tw-visual{display:inline}
.tw-c{opacity:0}
.tw-c.on{opacity:1}
.tw-cursor{position:absolute;width:4px;background:var(--green);pointer-events:none;opacity:0}
.tw-cursor.on{opacity:1}
.tw-cursor.blink{animation:w45-blink 1s step-end 5}
.tw-cursor.on.gone{opacity:0;transition:opacity .3s ease}
@keyframes w45-blink{50%{opacity:0}}

/* ---------- Sezioni della Home ---------- */
main>section{position:relative;z-index:1}
.numbers{padding:24px var(--gutter) clamp(56px,7.78vw,112px)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.stat-card{background:var(--surface-area);border-radius:var(--radius);padding:36px 32px}
.stat{font-size:var(--fs-stat);line-height:.95;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-label{margin-top:16px;font-size:16px;line-height:1.45;font-weight:500;color:var(--ink-soft)}
.c-blue{color:var(--blue)}
.c-green{color:var(--green)}

.services{padding:0 var(--gutter) clamp(64px,8.89vw,128px)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(36px,3.89vw,56px)}
.service{display:flex;flex-direction:column;gap:14px}
.service h3{font-size:clamp(28px,2.5vw,36px);line-height:1.1;font-weight:700}
.service p{font-size:16px;line-height:1.5;color:var(--ink)}
.more{position:relative;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:auto;padding-top:6px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:color .15s ease}
.more::after{content:"";position:absolute;inset:-8px -4px -14px}   /* area di tocco >= 48px senza spostare nulla */
.more svg{width:26px;height:26px;stroke:var(--ink);transition:transform .2s ease,stroke .15s ease}
.more span{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:6px;transition:text-decoration-color .15s ease}
.more:focus-visible svg,.more:active svg{transform:translateX(4px)}
.more-b:focus-visible,.more-b:active{color:var(--blue)}
.more-b:focus-visible span,.more-b:active span{text-decoration-color:var(--blue)}
.more-b:focus-visible svg,.more-b:active svg{stroke:var(--blue)}
.more-g:focus-visible,.more-g:active{color:var(--green)}
.more-g:focus-visible span,.more-g:active span{text-decoration-color:var(--green)}
.more-g:focus-visible svg,.more-g:active svg{stroke:var(--green)}
@media (hover:hover){
  .more:hover svg{transform:translateX(4px)}
  .more-b:hover{color:var(--blue)}.more-b:hover span{text-decoration-color:var(--blue)}.more-b:hover svg{stroke:var(--blue)}
  .more-g:hover{color:var(--green)}.more-g:hover span{text-decoration-color:var(--green)}.more-g:hover svg{stroke:var(--green)}
}

.method{padding:clamp(56px,7.78vw,112px) var(--gutter);background:var(--surface-area)}
.method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,6.667vw,96px);align-items:start}
.method .section-head .lead{margin-top:24px;max-width:520px}
.steps{list-style:none;padding:0;border-bottom:1px solid var(--rule)}
.steps li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;padding:26px 0;border-top:1px solid var(--rule)}
.step-n{font-size:18px;font-weight:700;line-height:normal;font-variant-numeric:tabular-nums}
.step-t{display:block;margin-bottom:8px;font-size:clamp(24px,2.083vw,30px);line-height:1.1;font-weight:700}
.step-d{display:block;font-size:16px;line-height:1.5;color:var(--ink-soft)}

.sectors{padding:clamp(64px,8.89vw,128px) var(--gutter) 0}
.sectors .grid-4{gap:22px}
.services .grid-4{row-gap:40px}
[id]{scroll-margin-top:calc(var(--hh) + 16px)}
.card{display:flex;flex-direction:column;gap:12px;background:var(--surface-area);border-radius:var(--radius);padding:32px 30px}
.card svg{width:28px;height:28px;flex-shrink:0}
.card h3{font-size:clamp(22px,1.667vw,24px);line-height:1.15;font-weight:700}
.card p{font-size:16px;line-height:1.5;color:var(--ink-soft)}

.contact{display:flex;flex-direction:column;padding:clamp(96px,13.33vw,192px) var(--gutter) clamp(64px,8.33vw,120px);color:var(--ink)}
.contact .eyebrow{margin-bottom:20px}
.contact .lead{margin-top:28px;max-width:640px;font-size:var(--fs-lead)}
.contact-items{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px 64px;margin-top:clamp(36px,3.89vw,56px)}
.contact-item{display:flex;flex-direction:column;gap:8px}
.contact-label{line-height:normal;font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.contact-mail{display:inline-flex;align-items:center;align-self:flex-start;min-height:48px;line-height:normal;font-size:clamp(24px,2.222vw,32px);font-weight:500;color:var(--white);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:8px;overflow-wrap:anywhere;transition:color .15s ease}
.contact-mail:focus-visible,.contact-mail:active{color:var(--blue)}
@media (hover:hover){.contact-mail:hover{color:var(--blue)}}
.contact-address{font-size:20px;line-height:1.5;color:var(--white);font-style:normal}

/* ---------- Footer (§5, mai animato) ---------- */
.site-footer{position:relative;z-index:1;margin-top:auto;padding:clamp(48px,4.44vw,64px) var(--gutter) 40px;font-size:14px;line-height:1.8;color:var(--ink)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.9fr)) minmax(0,1.3fr);grid-template-areas:"logo servizi agenzia legali impronta";gap:40px;align-items:start}
.f-logo{grid-area:logo}
.f-logo img{width:198px;height:auto}
.f-servizi{grid-area:servizi}.f-agenzia{grid-area:agenzia}.f-legali{grid-area:legali}.f-impronta{grid-area:impronta}
.f-title{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;line-height:1.8;color:var(--ink)}
.f-links a{color:var(--ink);transition:color .15s ease}
.f-links a:focus-visible,.f-links a:active{color:var(--blue)}
@media (hover:hover){.f-links a:hover{color:var(--blue)}}
.wcb{display:flex;flex-direction:column;gap:6px}
.wcb[hidden],.f-impronta[hidden]{display:none}
.wcb .f-title{margin-bottom:6px}
.wcb-value{font-size:20px;line-height:1.1;font-weight:700;color:var(--green)}
.wcb-value sub{font-size:.65em;vertical-align:baseline;position:relative;top:.25em}
.wcb-note{font-size:13px;line-height:1.5;color:var(--ink-soft)}
.wcb-note a{color:var(--ink);transition:color .15s ease}
.wcb-note a:focus-visible,.wcb-note a:active{color:var(--blue)}
@media (hover:hover){.wcb-note a:hover{color:var(--blue)}}
.f-legal{margin-top:56px;font-size:12px;line-height:1.6;color:var(--ink-soft)}
.f-legal-m{display:none}

/* ---------- Pagine interne (§6): hero, sezioni e blocchi ricorrenti ---------- */
/* Hero delle pagine interne: 200/136 desktop, 136/88 mobile (tavole), con briciole «Home / Pagina» */
.hero-int{--hero-pb:clamp(88px,9.444vw,136px);padding-top:clamp(136px,13.89vw,200px)}
.hero-404{--hero-pb:clamp(48px,6.667vw,96px);padding-top:clamp(96px,13.89vw,200px)}
.hero-404 .hero-lead{max-width:640px}
.crumbs{margin-bottom:28px;font-size:13px;line-height:normal;color:var(--white-72)}
.crumbs a{position:relative;color:var(--white-72);transition:color .15s ease}
.crumbs a::after{content:"";position:absolute;inset:-16px -8px}   /* area di tocco 48px */
.crumbs a:focus-visible,.crumbs a:active{color:var(--blue)}
@media (hover:hover){.crumbs a:hover{color:var(--blue)}}

/* Sezioni: padding 128 / 112 (fascia surface-area) / 32 (prima dopo l'hero) / 0, metà su mobile */
.sec{--pt:clamp(64px,8.889vw,128px);--pb:clamp(64px,8.889vw,128px);position:relative;z-index:1;padding:var(--pt) var(--gutter) var(--pb)}
.band{--pt:clamp(56px,7.778vw,112px);--pb:clamp(56px,7.778vw,112px);background:var(--surface-area)}
.pt-first{--pt:32px}
.pt-0{--pt:0px}
.pt-24{--pt:24px}
.pb-112{--pb:clamp(56px,7.778vw,112px)}
.contact-s{padding-top:clamp(40px,4.444vw,64px)}
.contact-m{padding-top:clamp(64px,8.889vw,128px)}
.section-head .lead.mw-520{margin-top:24px;max-width:520px}
.section-head .lead.mw-620{margin-top:24px;max-width:620px}
.section-head .lead.mw-680{max-width:680px}

/* Qualità / requisiti: filetto 2px in testa, titolo colorato */
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:clamp(36px,3.889vw,56px)}
.feats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.feat{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:2px solid var(--rule)}
.feat-n{font-size:11px;line-height:normal;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.feat h3{font-size:28px;line-height:1.1;font-weight:700}
.feats-30 .feat h3{font-size:clamp(24px,2.083vw,30px)}
.feat p{font-size:16px;line-height:1.55;color:var(--ink-soft)}

/* Card con icona (§5 Card grid) */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:clamp(36px,3.889vw,56px)}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards-26 .card p,.card-lg p{line-height:1.55}
.cards-26 .card h3{font-size:clamp(22px,1.806vw,26px)}
.card-lg{gap:14px;padding:36px 34px}
.card-lg h3{font-size:clamp(28px,2.222vw,32px);line-height:1.1}
.card .icon-64{width:64px;height:64px;margin-bottom:12px}
.dots{list-style:none;padding:0;margin-top:4px}
.dots-6{margin-top:6px}
.dots li{position:relative;margin-top:8px;padding-left:18px;font-size:15px;line-height:1.5;color:var(--ink)}
.dots li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--dot,var(--blue))}
.dots-g{--dot:var(--green)}

/* Citazione (Nielsen, Ford) */
.quote figure{margin:0 0 0 clamp(0px,12.5vw,180px);max-width:860px;padding-left:32px;border-left:2px solid var(--blue)}
.quote blockquote{margin:0;font-size:clamp(26px,2.778vw,40px);line-height:1.3;font-style:italic;font-weight:400;text-wrap:balance}
.quote figcaption{margin-top:24px}
.quote-note{margin:36px 0 0 calc(clamp(0px,12.5vw,180px) + 32px);max-width:720px;font-size:17px;line-height:1.6;color:var(--ink-soft)}

/* Lista definizioni: termine 1fr, testo 2fr, filetti --rule */
.deflist{list-style:none;padding:0;margin-top:56px;border-bottom:1px solid var(--rule)}
.deflist li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;align-items:baseline;padding:26px 0;border-top:1px solid var(--rule)}
.deflist b{font-size:24px;line-height:1.2;font-weight:700}
.deflist span{font-size:17px;line-height:1.55;color:var(--ink-soft)}

/* Metodo a 5 passi in riga (filetto 2px colorato) */
.steps5{list-style:none;padding:0;margin-top:56px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.steps5 li{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:2px solid var(--blue)}
.steps5 li.g{border-top-color:var(--green)}
.steps5 .n{font-size:18px;line-height:normal;font-weight:700}
.steps5 b{font-size:22px;line-height:1.15;font-weight:700}
.steps5 .d{font-size:16px;line-height:1.5;color:var(--ink-soft)}

/* FAQ: details/summary nativi, icona +/− */
.faq{margin-top:48px;border-bottom:1px solid var(--rule)}
.faq details{padding:34px 0;border-top:1px solid var(--rule)}
.faq summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;font-size:22px;line-height:1.3;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";position:absolute;inset:-2px 0}   /* area di tocco 48px */
.faq summary::after{content:"+";content:"+"/"";flex:none;font-size:24px;font-weight:400;color:var(--blue)}
.faq details[open] summary::after{content:"−";content:"−"/""}
.faq summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.faq details p{margin-top:10px;max-width:820px;font-size:16px;line-height:1.6;color:var(--ink-soft)}

/* Strategia: quattro domande numerate accanto al titolo */
.qlist{list-style:none;padding:0;border-bottom:1px solid var(--rule)}
.qlist li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:30px 0;border-top:1px solid var(--rule);font-size:20px;line-height:1.45;font-weight:500}
.qlist .n{font-weight:700}

/* Strategia: cinque lingue con la mappa del mondo decorativa (nascosta sotto i 768) */
.langs{--text-start:max(var(--gutter),(100% - var(--content-max)) / 2);overflow:hidden}
.langs .wrap>div{position:relative;z-index:1;max-width:560px}
.langs-map{position:absolute;left:calc(var(--text-start) + 596px);top:50%;width:980px;aspect-ratio:2/1;transform:translateY(-50%);pointer-events:none}
.langs-map img,.langs-map svg{position:absolute;inset:0;width:100%;height:100%}
.paese{fill:none;stroke:var(--green);stroke-width:5.2;stroke-linecap:round;opacity:0;animation:w45-paese 24s linear infinite}
@keyframes w45-paese{0%{opacity:1}6%{opacity:1}11%{opacity:0}100%{opacity:0}}
.langs-line{margin-top:20px;font-size:13px;line-height:normal;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}

/* Strategia: metodo a tabella (numero, passo, testo, «Cosa ricevete») */
.mtable{list-style:none;padding:0;margin-top:56px;border-bottom:1px solid var(--rule)}
.mtable li{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.6fr) minmax(0,1.6fr);gap:32px;align-items:center;padding:30px 0;border-top:1px solid var(--rule)}
.mtable .n{font-size:20px;line-height:normal;font-weight:700}
.mtable b{font-size:28px;line-height:1.1;font-weight:700}
.mtable .d{font-size:15px;line-height:1.55;color:var(--ink-soft)}
.mtable .get{padding:18px 22px;border-radius:14px;background:var(--surface-area);line-height:normal}
.mtable .get-l{display:block;margin-bottom:6px;font-size:11px;line-height:normal;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--white-72)}
.mtable .get-t{font-size:20px;line-height:1.3;font-weight:600;color:var(--ink)}

/* Strategia: indicatori (KPI) */
.kpis{list-style:none;padding:0;margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kpis li{display:flex;align-items:center;gap:14px;padding:20px 24px;border-radius:var(--radius);background:var(--surface-area);font-size:17px;line-height:1.4;font-weight:500}
.kpis svg{flex:none;width:26px;height:26px}

/* Portfolio: griglia loghi 6 / 4 / 3 colonne (§4), hover §5. content-visibility: le card hanno misure fisse (aspect-ratio),
   quindi nessuno spostamento; i loghi lontani dallo schermo non si scaricano finché non servono (Lighthouse mobile) */
.logos{list-style:none;padding:0;margin-top:56px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.logo{--logo-hover:#222a36;box-sizing:content-box;content-visibility:auto;position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;padding:12px;border-radius:var(--radius);background:var(--surface-area);transition:background-color .25s ease,transform .25s ease}
.logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.logo picture{display:contents}   /* loghi raster WebP+PNG: l'img si centra e si misura sulla card come gli SVG */
.logo img{width:var(--w,70%);height:auto;max-height:72%;object-fit:contain;filter:brightness(.92);transition:transform .25s ease,filter .25s ease}
.logo:focus-within{background:var(--logo-hover);transform:translateY(-3px)}
.logo:focus-within img{transform:scale(1.06);filter:brightness(1)}
@media (hover:hover){.logo:hover{background:var(--logo-hover);transform:translateY(-3px)}.logo:hover img{transform:scale(1.06);filter:brightness(1)}}

/* Contatti: card email, sede con mappa */
.mail-box{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;max-width:720px}
.mail-card{display:flex;flex-direction:column;gap:10px;padding:36px 34px;border-radius:var(--radius);background:var(--surface-area)}
.mail-card .contact-label{font-size:12px}
.mail-card a{display:inline-flex;align-items:center;align-self:flex-start;min-height:48px;font-size:28px;line-height:1.2;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:6px;overflow-wrap:anywhere;transition:color .15s ease}
.mail-card a:focus-visible,.mail-card a:active{color:var(--blue)}
@media (hover:hover){.mail-card a:hover{color:var(--blue)}}
.mail-card .note{font-size:15px;line-height:1.5;color:var(--ink-soft)}
.sede{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:56px}
.sede-map{aspect-ratio:16/9;border-radius:var(--radius);background:var(--surface-area);overflow:hidden}
.sede-map svg{width:100%;height:100%}
.sede-map .map-m{display:none}
.sede-info{display:flex;flex-direction:column;gap:20px}
.sede-info .contact-label{display:block;margin-bottom:6px;font-size:12px}
.sede-info address{font-size:24px;line-height:1.4;font-weight:500;font-style:normal}
.sede-info .btn{align-self:flex-start}

/* 404: pagine principali */
.toplinks{list-style:none;padding:0;max-width:720px;border-bottom:1px solid var(--rule)}
.toplinks li{border-top:1px solid var(--rule)}
.toplinks a{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:18px 0;font-size:24px;line-height:normal;font-weight:700;color:var(--ink);text-decoration:none;transition:color .15s ease}
.toplinks a span{font-size:15px;font-weight:500;color:var(--ink-soft)}
.toplinks a:focus-visible,.toplinks a:active{color:var(--blue)}
@media (hover:hover){.toplinks a:hover{color:var(--blue)}}
.sec-404 .eyebrow{margin-bottom:14px}

/* Pagine legali (§6): hero ridotto, indice sticky, articoli numerati. Mai animate (§5) */
.legal-hero{position:relative;z-index:1;padding:clamp(96px,12.78vw,184px) var(--gutter) 16px}
.legal-hero .crumbs,.legal-hero .crumbs a{color:var(--ink-soft)}
.legal-hero .eyebrow{margin-bottom:14px}
.legal-sub{margin-top:24px;max-width:760px;font-size:19px;line-height:1.5;color:var(--ink)}
.legal-mod{margin-top:10px;font-size:14px;line-height:normal;color:var(--ink-soft)}
.legal{position:relative;z-index:1;padding:40px var(--gutter) clamp(64px,8.889vw,128px)}
.legal-grid{display:grid;grid-template-columns:minmax(0,clamp(220px,23.61vw,340px)) minmax(0,1fr);gap:clamp(40px,6.667vw,96px);align-items:start}
.toc{position:sticky;top:112px;padding:28px;border-radius:var(--radius);background:var(--surface-area)}
.toc-t{margin-bottom:10px;font-size:12px;line-height:normal;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.toc ol{list-style:none;padding:0}
.toc a{display:block;padding:8px 0;font-size:15px;line-height:1.4;color:var(--ink);text-decoration:none;transition:color .15s ease}
.toc a span{display:inline-block;width:30px;font-weight:600;color:var(--ink-soft)}
.toc a:focus-visible,.toc a:active{color:var(--blue)}
@media (hover:hover){.toc a:hover{color:var(--blue)}}
.legal-body{max-width:780px}
.legal-body .legal-intro{max-width:760px;margin:0;font-size:21px;line-height:1.6;color:var(--ink-soft)}
.legal-body b{font-weight:600;color:var(--ink)}
.legal-body .legal-date{margin:28px 0 0;font-size:15px;line-height:normal;color:var(--ink-soft)}
.legal-body section{margin-top:40px;padding-top:40px;border-top:1px solid var(--rule)}
.legal-body h2{margin-bottom:20px;font-size:30px;line-height:1.2;font-weight:600}
.legal-body h2 span{margin-right:12px;font-weight:700;color:var(--blue)}
.legal-body h3{margin:28px 0 12px;font-size:20px;line-height:1.3;font-weight:600;color:var(--ink)}
.legal-body p{margin-bottom:18px;font-size:17px;line-height:1.7;color:var(--legal)}
.legal-body a{color:var(--ink);transition:color .15s ease}
.legal-body a:focus-visible,.legal-body a:active{color:var(--blue)}
@media (hover:hover){.legal-body a:hover{color:var(--blue)}}
.legal-body ol,.legal-body ul{list-style:none;padding:0;margin-bottom:20px}
.legal-body li{position:relative;margin-bottom:10px;font-size:17px;line-height:1.65;color:var(--legal)}
.legal-body ol li{padding-left:32px}
.legal-body ol li>span:first-child{position:absolute;left:0;top:0;font-weight:700;color:var(--blue)}
.legal-body ul li{padding-left:20px}
.legal-body ul li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--blue)}

/* ---------- Blob dell'hero per pagina (desktop): generati da blob.py, vedi commento in testa ---------- */
@media (min-width:768px){
  .page-strategia .blob-a{width:min(66.67vw,960px);height:min(66.67vw,960px);left:calc(var(--text-end) + 236px);top:max(1.39vw,calc(100px - 0.12 * min(66.67vw,960px)));background:radial-gradient(circle,rgba(51,152,255,0.9) 0%,rgba(51,152,255,0) 62%)}
  .page-strategia .blob-b{width:min(62.50vw,900px);height:min(62.50vw,900px);left:calc(var(--text-end) + 76px);top:max(-25.00vw,calc(100px + min(290px,20.14vw) - 0.12 * min(62.50vw,900px)));background:radial-gradient(circle,rgba(50,204,50,0.8) 0%,rgba(50,204,50,0) 62%)}
  .page-strategia .blob-c{width:min(38.89vw,560px);height:min(38.89vw,560px);left:calc(var(--text-end) - 104px);top:max(8.33vw,calc(100px + min(180px,12.5vw) - 0.0136 * min(38.89vw,560px)));background:radial-gradient(circle,rgba(51,152,255,0.45) 0%,rgba(51,152,255,0) 62%)}
  .page-siti-web .blob-a{width:min(43.06vw,620px);height:min(43.06vw,620px);left:calc(var(--text-end) + 256px);top:max(-20.83vw,calc(100px - 0.12 * min(43.06vw,620px)));background:radial-gradient(circle,rgba(50,204,50,0.85) 0%,rgba(50,204,50,0) 62%)}
  .page-siti-web .blob-b{width:min(33.33vw,480px);height:min(33.33vw,480px);left:calc(var(--text-end) - 24px);top:max(18.06vw,calc(100px + min(290px,20.14vw) - 0.12 * min(33.33vw,480px)));background:radial-gradient(circle,rgba(50,204,50,0.5) 0%,rgba(50,204,50,0) 62%)}
  .page-siti-web .blob-c{width:min(72.22vw,1040px);height:min(72.22vw,1040px);left:calc(var(--text-end) + 116px);top:max(-5.56vw,calc(100px + min(180px,12.5vw) - 0.0136 * min(72.22vw,1040px)));background:radial-gradient(circle,rgba(51,152,255,0.9) 0%,rgba(51,152,255,0) 62%)}
  .page-applicazioni .blob-a{width:min(62.50vw,900px);height:min(62.50vw,900px);left:calc(var(--text-end) + 156px);top:max(-23.61vw,calc(100px - 0.12 * min(62.50vw,900px)));background:radial-gradient(circle,rgba(50,204,50,0.85) 0%,rgba(50,204,50,0) 62%)}
  .page-applicazioni .blob-b{width:min(52.78vw,760px);height:min(52.78vw,760px);left:calc(var(--text-end) + 316px);top:max(8.33vw,calc(100px + min(290px,20.14vw) - 0.12 * min(52.78vw,760px)));background:radial-gradient(circle,rgba(51,152,255,0.9) 0%,rgba(51,152,255,0) 62%)}
  .page-applicazioni .blob-c{width:min(29.17vw,420px);height:min(29.17vw,420px);left:calc(var(--text-end) - 44px);top:max(4.17vw,calc(100px + min(180px,12.5vw) - 0.0136 * min(29.17vw,420px)));background:radial-gradient(circle,rgba(50,204,50,0.45) 0%,rgba(50,204,50,0) 62%)}
  .page-consulenza .blob-a{width:min(38.89vw,560px);height:min(38.89vw,560px);left:calc(var(--text-end) + 376px);top:max(12.50vw,calc(100px - 0.12 * min(38.89vw,560px)));background:radial-gradient(circle,rgba(50,204,50,0.8) 0%,rgba(50,204,50,0) 62%)}
  .page-consulenza .blob-b{width:min(26.39vw,380px);height:min(26.39vw,380px);left:calc(var(--text-end) + 236px);top:max(-18.06vw,calc(100px + min(290px,20.14vw) - 0.12 * min(26.39vw,380px)));background:radial-gradient(circle,rgba(50,204,50,0.55) 0%,rgba(50,204,50,0) 62%)}
  .page-consulenza .blob-c{width:min(69.44vw,1000px);height:min(69.44vw,1000px);left:calc(var(--text-end) + 36px);top:max(-13.89vw,calc(100px + min(180px,12.5vw) - 0.0136 * min(69.44vw,1000px)));background:radial-gradient(circle,rgba(51,152,255,0.85) 0%,rgba(51,152,255,0) 62%)}
  .page-chi-siamo .blob-a{width:min(31.94vw,460px);height:min(31.94vw,460px);left:calc(var(--text-end) + 16px);top:max(15.28vw,calc(100px - 0.12 * min(31.94vw,460px)));background:radial-gradient(circle,rgba(51,152,255,0.5) 0%,rgba(51,152,255,0) 62%)}
  .page-chi-siamo .blob-b{width:min(56.94vw,820px);height:min(56.94vw,820px);left:calc(var(--text-end) + 196px);top:max(-8.33vw,calc(100px + min(290px,20.14vw) - 0.12 * min(56.94vw,820px)));background:radial-gradient(circle,rgba(51,152,255,0.9) 0%,rgba(51,152,255,0) 62%)}
  .page-chi-siamo .blob-c{width:min(56.94vw,820px);height:min(56.94vw,820px);left:calc(var(--text-end) + 356px);top:max(-26.39vw,calc(100px + min(180px,12.5vw) - 0.0136 * min(56.94vw,820px)));background:radial-gradient(circle,rgba(50,204,50,0.8) 0%,rgba(50,204,50,0) 62%)}
  .page-portfolio .blob-a{width:min(76.39vw,1100px);height:min(76.39vw,1100px);left:calc(var(--text-end) + 136px);top:max(-29.17vw,calc(100px - 0.12 * min(76.39vw,1100px)));background:radial-gradient(circle,rgba(50,204,50,0.8) 0%,rgba(50,204,50,0) 62%)}
  .page-portfolio .blob-b{width:min(48.61vw,700px);height:min(48.61vw,700px);left:calc(var(--text-end) + 376px);top:max(11.11vw,calc(100px + min(290px,20.14vw) - 0.12 * min(48.61vw,700px)));background:radial-gradient(circle,rgba(51,152,255,0.85) 0%,rgba(51,152,255,0) 62%)}
  .page-portfolio .blob-c{width:min(29.17vw,420px);height:min(29.17vw,420px);left:calc(var(--text-end) - 104px);top:max(11.11vw,calc(100px + min(180px,12.5vw) - 0.0136 * min(29.17vw,420px)));background:radial-gradient(circle,rgba(51,152,255,0.4) 0%,rgba(51,152,255,0) 62%)}
  .page-contatti .blob-a{display:none}
  .page-contatti .blob-b{width:min(52.78vw,760px);height:min(52.78vw,760px);left:calc(var(--text-end) + 116px);top:max(5.56vw,calc(100px + min(290px,20.14vw) - 0.12 * min(52.78vw,760px)));background:radial-gradient(circle,rgba(50,204,50,0.75) 0%,rgba(50,204,50,0) 62%)}
  .page-contatti .blob-c{width:min(61.11vw,880px);height:min(61.11vw,880px);left:calc(var(--text-end) + 256px);top:max(-20.83vw,calc(100px + min(180px,12.5vw) - 0.0136 * min(61.11vw,880px)));background:radial-gradient(circle,rgba(51,152,255,0.9) 0%,rgba(51,152,255,0) 62%)}
}

/* ---------- Soglie interne fra 768 e 1100 (§4) ---------- */
@media (max-width:1099.98px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"logo servizi legali" "impronta agenzia legali"}
  .feats,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps5{grid-template-columns:minmax(0,1fr)}
  .logos{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- Mobile < 768px (§4 Regole di derivazione mobile) ---------- */
@media (max-width:767.98px){
  .hero{--hero-pb:88px;padding-top:136px}
  .numbers{padding-bottom:56px}
  .services{padding-bottom:64px}
  .method{padding-top:56px;padding-bottom:56px}
  .sectors{padding-top:64px}
  .contact{padding-top:96px;padding-bottom:64px}
  .hero-lead{margin-top:24px}
  .hero-actions{flex-direction:column;gap:12px;margin-top:32px}
  .hero-actions .btn{display:flex;width:100%;padding:0 24px}
  /* blob ancorati al bordo destro: il centro sta 30–110px dentro la pagina e il disco sborda sempre a destra */
  .blob-a{width:520px;height:520px;left:auto;right:-190px;top:-10px;animation-name:w45-a-m}
  .blob-b{width:460px;height:460px;left:auto;right:-180px;top:370px;animation-name:w45-b-m}
  .blob-c{width:340px;height:340px;left:auto;right:-140px;top:260px;animation-name:w45-c-m}
  /* su telefono il testo occupa tutta la larghezza: i blob si attenuano anche in verticale dietro paragrafo e pulsanti */
  .blobs{-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 25%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.45) 85%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 25%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.45) 85%,transparent 100%)}
  .blobs-x{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.8) 75%,#000 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.8) 75%,#000 100%)}
  .grid-3,.grid-4{grid-template-columns:minmax(0,1fr);gap:16px}
  .services .grid-4{gap:40px}
  .section-head .lead{margin-top:14px}
  .method-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .method .section-head .lead{margin-top:16px}
  .steps li{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:20px 0}
  .sectors .grid-4{gap:16px}
  .contact .lead{margin-top:20px}
  .contact-items{flex-direction:column;gap:28px}
  .contact-mail{text-underline-offset:6px}
  .site-footer{font-size:15px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"logo logo" "servizi agenzia" "legali legali" "impronta impronta";gap:36px 24px}
  .f-logo img{width:192px}
  .f-title{margin-bottom:10px}
  .f-legal{margin-top:44px;line-height:1.7}
  .f-legal-d{display:none}
  .f-legal-m{display:block}

  /* Pagine interne */
  .hero-404{--hero-pb:48px;padding-top:96px}
  .sec{--pt:64px;--pb:64px}
  .band{--pt:56px;--pb:56px}
  .pt-first{--pt:32px}
  .pt-0{--pt:0px}
  .pt-24{--pt:24px}
  .pb-112{--pb:56px}
  .contact-s{padding-top:40px}
  .contact-m{padding-top:64px}
  .section-head .lead.mw-520,.section-head .lead.mw-620{margin-top:16px}
  .feats,.feats-3,.cards,.cards-3,.cards-2{grid-template-columns:minmax(0,1fr);gap:16px}
  .feats-30 .feat h3{font-size:24px}
  .quote figure{margin:0;padding-left:20px}
  .quote-note{margin:28px 0 0;max-width:none}
  .deflist li{grid-template-columns:minmax(0,1fr);gap:8px;align-items:normal;padding:20px 0}
  .steps5{gap:16px}
  .mtable li{grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:baseline;padding:22px 0}
  .mtable .d,.mtable .get{grid-column:2}
  .mtable .get{padding:16px 18px}
  .kpis{grid-template-columns:minmax(0,1fr);gap:16px}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}   /* 2 colonne su mobile: Simone, 05/10/2026 (tavola a 3) */
  /* Strategia, lingue (Simone, 05/10/2026): la mappa animata va sotto il testo, a tutta larghezza; la riga delle lingue
     non si impagina bene e sparisce alla vista (resta per gli screen reader) */
  .langs{display:flex;flex-direction:column}
  .langs .wrap{order:1}
  .langs-map{order:2;position:relative;left:auto;top:auto;width:auto;margin:36px calc(var(--gutter) * -1) 0;transform:none}
  .langs-line{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .js-anim .langs-line[data-reveal]{opacity:1;transform:none}   /* nascosta alla vista: non aspetta l'animazione d'ingresso */
  .mail-card a{font-size:24px}
  .sede{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:36px}
  .sede-map{aspect-ratio:4/3}
  .sede-map .map-d{display:none}
  .sede-map .map-m{display:block}
  .sede-info .btn{display:flex;padding:0 24px}
  .toplinks a{flex-direction:column;align-items:stretch;gap:4px;padding:16px 0;font-size:22px}
  .legal-hero{padding-top:96px}
  .legal{padding-bottom:64px}
  .legal-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .toc{position:static;padding:24px}
  .legal-body .legal-intro{font-size:19px;max-width:none}
  .legal-sub{max-width:none}
}

/* ---------- Animazioni di ingresso (§5): solo con JS avviato, mai su header e footer ---------- */
.js-anim [data-reveal]{opacity:0;transform:translateY(16px)}
.js-anim [data-reveal].in{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:var(--d,0ms)}
.js-anim .hero-title.tw-on{opacity:1;transform:none;transition:none}
.js-anim .btn-secondary[data-reveal].in{transition:opacity .5s var(--ease-out) var(--d,0ms),transform .5s var(--ease-out) var(--d,0ms),background-color .15s ease,color .15s ease}

/* ---------- prefers-reduced-motion: niente blob, stelle, ingressi, transizioni ---------- */
@media (prefers-reduced-motion:reduce){
  .stars::before,.blob,.paese{animation:none}
  .logo:hover,.logo:focus-within,.logo:hover img,.logo:focus-within img{transform:none}
  .js-anim [data-reveal]{opacity:1;transform:none}
  *,*::before,*::after{transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .js-ok .menu-panel,.js-ok .menu-panel.is-open{transform:none}
  .js-ok .menu-panel li{opacity:1;transform:none}
}

/* ---------- Stampa ---------- */
@media print{.js-anim [data-reveal],.tw-c{opacity:1!important;transform:none!important}.tw-cursor,.stars,.hero-bg,.langs-map,.menu-panel,.menu-toggle{display:none!important}.toc{position:static}}