/* ============================================================
   PROPICO — foglio di stile principale
   Direzione visiva: "colata" — metallo liquido su grafite.
   Palette: grigi scuri, blu acciaio, viola.
   ============================================================ */

@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo.woff2") format("woff2-variations");
  font-weight:100 900; font-stretch:62% 125%; font-display:swap; font-style:normal;
}
@font-face{
  font-family:"Plex";
  src:url("../fonts/plexsans.woff2") format("woff2-variations");
  font-weight:100 700; font-stretch:85% 100%; font-display:swap; font-style:normal;
}

/* ---------- Token ---------- */
:root{
  --void:#06070c;
  --ghisa:#0b0e17;
  --acciaio:#141828;
  --bordo:#242b41;
  --blu:#5b8def;
  --blu-scuro:#2b4c8c;
  --viola:#9d8cff;
  --viola-scuro:#5b47a8;
  --platino:#c9d3e2;
  --testo:#e8ecf4;
  --muto:#8792a8;

  --molten:linear-gradient(105deg,var(--platino) 0%,var(--blu) 42%,var(--viola) 100%);

  --sp-sec:clamp(5rem,10vw,9.5rem);
  --gut:clamp(1.25rem,5vw,4.5rem);
  --max:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--void); color:var(--testo);
  font-family:"Plex",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.94rem + .28vw,1.1rem); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-family:"Archivo",system-ui,sans-serif;line-height:1.02;letter-spacing:-.03em}
p{margin:0}
:focus-visible{outline:2px solid var(--viola);outline-offset:3px}
::selection{background:var(--viola);color:#0a0a14}

/* ---------- Utility ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:1}
.sec{padding-block:var(--sp-sec);position:relative;isolation:isolate}
.eyebrow{
  font-family:"Archivo",sans-serif;font-stretch:72%;font-weight:600;
  font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--viola);margin-bottom:1.25rem;display:block;
}
.eyebrow--blu{color:var(--blu)}
.h2{font-size:clamp(2rem,1.1rem + 3.6vw,4rem);font-weight:800;font-stretch:105%}
.lede{color:var(--muto);max-width:56ch;margin-top:1.5rem;font-size:1.05em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--viola);color:#0a0a14;padding:.75rem 1rem}

/* Sfondo ambientale animato delle sezioni */
.ambient{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none}

/* ---------- Barra di avanzamento (firma) ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:3px;z-index:60;background:rgba(255,255,255,.05);pointer-events:none}
.rail__fill{position:absolute;top:0;left:0;width:100%;height:0;
  background:linear-gradient(180deg,var(--platino),var(--blu) 40%,var(--viola));
  box-shadow:0 0 14px rgba(157,140,255,.6)}
@media(max-width:820px){.rail{display:none}}

/* ---------- Header ---------- */
.top{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;gap:1.5rem;
  padding:1rem var(--gut);
  transition:background .35s var(--ease),border-color .35s var(--ease),padding .35s var(--ease);
  border-bottom:1px solid transparent;
}
.top.is-stuck{background:rgba(6,7,12,.82);backdrop-filter:blur(14px);border-bottom-color:var(--bordo);padding-block:.6rem}
.top__brand img{height:clamp(28px,3.2vw,38px);width:auto}
.top__nav{margin-left:auto;display:flex;gap:clamp(1rem,2.2vw,2.25rem)}
.top__nav a{
  font-family:"Archivo",sans-serif;font-stretch:88%;font-weight:500;
  font-size:.86rem;letter-spacing:.06em;color:var(--muto);
  padding-block:.35rem;position:relative;transition:color .25s
}
.top__nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--molten);transition:width .35s var(--ease)}
.top__nav a:hover{color:var(--testo)}
.top__nav a:hover::after{width:100%}

/* Selettore lingua con bandiere */
.lang{display:flex;gap:.4rem;align-items:center}
.lang button{
  width:34px;height:24px;padding:0;border:1px solid var(--bordo);overflow:hidden;
  display:grid;place-items:center;opacity:.42;filter:grayscale(.55);
  transition:opacity .3s var(--ease),filter .3s var(--ease),border-color .3s,transform .3s,box-shadow .3s
}
.lang button svg{width:100%;height:100%;display:block}
.lang button:hover{opacity:.85;filter:none;transform:translateY(-1px)}
.lang button[aria-pressed="true"]{opacity:1;filter:none;border-color:var(--viola);box-shadow:0 0 0 1px rgba(157,140,255,.35)}

.burger{display:none;width:34px;height:34px;position:relative}
.burger span{position:absolute;left:6px;right:6px;height:1.5px;background:var(--testo);transition:.3s var(--ease)}
.burger span:nth-child(1){top:12px}.burger span:nth-child(2){top:21px}
.top.is-open .burger span:nth-child(1){top:16px;transform:rotate(45deg)}
.top.is-open .burger span:nth-child(2){top:16px;transform:rotate(-45deg)}

@media(max-width:880px){
  .burger{display:block;margin-left:auto;order:3}
  .lang{order:2}
  .top__nav{
    position:fixed;inset:64px 0 auto 0;margin:0;flex-direction:column;gap:0;
    background:rgba(6,7,12,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--bordo);
    max-height:0;overflow:hidden;transition:max-height .4s var(--ease)
  }
  .top.is-open .top__nav{max-height:70vh}
  .top__nav a{padding:1rem var(--gut);border-top:1px solid var(--bordo);font-size:1rem}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
#forge{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,7,12,.93) 0%,rgba(6,7,12,.62) 32%,transparent 60%),
    linear-gradient(180deg,rgba(6,7,12,.88) 0%,transparent 22%,transparent 60%,var(--void) 100%),
    radial-gradient(125% 95% at 74% 46%,transparent 30%,rgba(6,7,12,.82) 86%)
}
@media(max-width:900px){
  #forge{opacity:.6}
  .hero::after{background:
    linear-gradient(180deg,rgba(6,7,12,.88) 0%,rgba(6,7,12,.34) 26%,rgba(6,7,12,.74) 58%,var(--void) 100%)}
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  align-items:center;gap:clamp(2rem,5vw,5rem);
  padding-block:8rem 5rem;width:100%
}
.hero h1{font-size:clamp(2.45rem,1rem + 6.4vw,5.4rem);font-weight:800;font-stretch:110%;margin-block:.4rem 0}
.hero h1 em{
  font-style:normal;display:block;font-weight:500;font-stretch:96%;
  background:linear-gradient(100deg,#59617a 0%,var(--platino) 24%,var(--blu) 48%,var(--viola) 70%,#4a4470 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 9s linear infinite
}
@keyframes sheen{to{background-position:280% 0}}
.hero__intro{color:var(--muto);max-width:48ch;margin-top:1.9rem;font-size:1.08em}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.6rem}
.hero__mark{position:relative;justify-self:center;will-change:transform}
.hero__mark img{width:min(100%,420px);filter:drop-shadow(0 0 70px rgba(91,141,239,.3))}
.hero__mark::before{
  content:"";position:absolute;inset:-20%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(157,140,255,.22),rgba(91,141,239,.08) 45%,transparent 66%);
  animation:pulse 7s ease-in-out infinite
}
@keyframes pulse{50%{transform:scale(1.1);opacity:.6}}
.hero__scroll{
  position:absolute;bottom:1.8rem;left:var(--gut);
  font-family:"Archivo",sans-serif;font-stretch:72%;font-size:.7rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muto)
}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;padding-block:7rem 4.5rem}
  .hero__mark{order:-1}
  .hero__mark img{width:min(58%,260px)}
}

/* ---------- Bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:"Archivo",sans-serif;font-stretch:88%;font-weight:600;font-size:.9rem;
  letter-spacing:.04em;padding:.95rem 1.6rem;border:1px solid transparent;
  position:relative;overflow:hidden;will-change:transform;
  transition:color .3s,border-color .3s,transform .25s var(--ease)
}
.btn--molten{color:#0a0c16;background:var(--molten);background-size:220% 100%;
  transition:background-position .6s var(--ease),transform .25s var(--ease)}
.btn--molten:hover{background-position:100% 0}
.btn--ghost{border-color:var(--bordo);color:var(--testo)}
.btn--ghost:hover{border-color:var(--viola);color:var(--viola)}

/* ---------- Aree ---------- */
.areas__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
@media(max-width:820px){.areas__head{grid-template-columns:1fr}}
.area{
  display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.25rem,3vw,3rem);
  padding-block:clamp(2rem,4vw,3.25rem);
  border-top:1px solid var(--bordo);position:relative;
  transition:background .5s var(--ease)
}
.area:last-of-type{border-bottom:1px solid var(--bordo)}
.area::before{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--molten);transition:width .7s var(--ease)
}
.area:hover::before,.area:focus-within::before{width:100%}
.area:hover{background:linear-gradient(90deg,rgba(157,140,255,.05),transparent 55%)}
.area__tag{
  font-family:"Archivo",sans-serif;font-stretch:72%;font-weight:600;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muto);padding-top:.6rem
}
.area h3{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.25rem);font-weight:700;font-stretch:100%}
.area p{color:var(--muto);margin-top:1rem;max-width:46ch}
.area ul li{
  padding:.5rem 0 .5rem 1.35rem;position:relative;color:var(--testo);font-size:.94rem;
  border-bottom:1px solid rgba(255,255,255,.045)
}
.area ul li::before{content:"";position:absolute;left:0;top:1.05em;width:6px;height:6px;transform:rotate(45deg);background:var(--blu)}
@media(max-width:980px){.area{grid-template-columns:1fr}.area__tag{padding-top:0}}

/* ---------- Griglie di schede con luce reattiva ---------- */
.academy__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem)}
@media(max-width:900px){.academy__grid{grid-template-columns:1fr}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--bordo)}
.cards article{
  background:var(--ghisa);padding:clamp(1.5rem,2.6vw,2.25rem);
  position:relative;overflow:hidden;transition:background .45s var(--ease)
}
.cards article::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(157,140,255,.13),transparent 70%)
}
.cards article:hover{background:var(--acciaio)}
.cards article:hover::before{opacity:1}
.cards h3{font-size:1.18rem;font-weight:700;font-stretch:96%;margin-bottom:.7rem;position:relative}
.cards p{color:var(--muto);font-size:.94rem;position:relative}
.cards .glyph{display:block;width:26px;height:26px;margin-bottom:1.1rem;
  background:var(--molten);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.link-arrow{display:inline-flex;align-items:center;gap:.5rem;margin-top:2rem;
  font-family:"Archivo",sans-serif;font-stretch:88%;font-weight:600;font-size:.9rem;
  color:var(--viola);border-bottom:1px solid var(--viola-scuro);padding-bottom:.3rem;transition:.3s}
.link-arrow:hover{border-bottom-color:var(--viola);gap:.9rem}

/* ---------- Competenze specialistiche ---------- */
.skillgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--bordo);margin-top:clamp(2.5rem,5vw,4rem)}
.skill{
  background:var(--ghisa);padding:clamp(1.5rem,2.6vw,2.1rem);position:relative;overflow:hidden;
  transition:background .45s var(--ease)
}
.skill::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(91,141,239,.14),transparent 70%)
}
.skill:hover{background:var(--acciaio)}
.skill:hover::before{opacity:1}
.skill h3{font-size:1.1rem;font-weight:700;font-stretch:96%;margin-bottom:.85rem;position:relative}
.skill p{color:var(--muto);font-size:.92rem;position:relative;margin-bottom:1.1rem}
.skill ul{position:relative;display:flex;flex-wrap:wrap;gap:.4rem}
.skill li{
  font-size:.75rem;color:var(--platino);
  border:1px solid var(--bordo);padding:.28rem .6rem;background:rgba(255,255,255,.02)
}
.skill__rule{position:absolute;left:0;top:0;height:2px;width:0;background:var(--molten);transition:width .8s var(--ease)}
.skill:hover .skill__rule{width:100%}

/* ---------- Nastro scorrevole ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--bordo);padding-block:1.15rem;margin-top:clamp(3rem,6vw,4.5rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{
  font-family:"Archivo",sans-serif;font-stretch:78%;font-weight:600;font-size:.8rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muto);white-space:nowrap;
  display:inline-flex;align-items:center;gap:2.4rem;padding-right:2.4rem
}
.marquee span::after{content:"";width:5px;height:5px;transform:rotate(45deg);background:var(--viola);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Temi ---------- */
.topics__cloud{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(2rem,4vw,3rem)}
.topics__cloud span{
  border:1px solid var(--bordo);padding:.7rem 1.15rem;font-size:.9rem;color:var(--muto);
  transition:border-color .3s,color .3s,background .3s,transform .3s var(--ease)
}
.topics__cloud span:hover{border-color:var(--viola);color:var(--testo);background:rgba(157,140,255,.07);transform:translateY(-2px)}

/* ---------- Metodo ---------- */
.method{background:var(--ghisa);border-block:1px solid var(--bordo)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2rem;margin-top:clamp(2.5rem,5vw,4rem);position:relative}
.steps::before{content:"";position:absolute;top:14px;left:0;right:0;height:1px;background:var(--bordo)}
.steps__fill{position:absolute;top:14px;left:0;height:1px;width:0;background:var(--molten);box-shadow:0 0 12px rgba(157,140,255,.65);transition:width 1.4s var(--ease)}
.step{position:relative;padding-top:2.6rem}
.step__dot{position:absolute;top:8px;left:0;width:13px;height:13px;transform:rotate(45deg);background:var(--acciaio);border:1px solid var(--bordo);transition:.5s}
.step.is-on .step__dot{background:var(--viola);border-color:var(--viola);box-shadow:0 0 16px rgba(157,140,255,.75)}
.step b{display:block;font-family:"Archivo",sans-serif;font-stretch:72%;font-weight:600;
  font-size:.72rem;letter-spacing:.2em;color:var(--muto);margin-bottom:.5rem}
.step h3{font-size:1.22rem;font-weight:700;font-stretch:96%;margin-bottom:.5rem}
.step p{color:var(--muto);font-size:.92rem}
@media(max-width:760px){.steps::before,.steps__fill{display:none}}

/* ---------- Finanziata ---------- */
.funded{position:relative;overflow:hidden;background:var(--void)}
.funded__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,5vw,4rem);align-items:center}
.funded h2{max-width:18ch}
.funded p{color:var(--muto);margin-top:1.4rem;max-width:60ch}
.round{
  width:76px;height:76px;border-radius:50%;border:1px solid var(--viola);
  display:grid;place-items:center;font-size:1.3rem;color:var(--viola);
  transition:background .4s var(--ease),color .4s,transform .4s
}
.round:hover{background:var(--viola);color:#0a0a14;transform:rotate(45deg)}
@media(max-width:700px){.funded__inner{grid-template-columns:1fr}}

/* ---------- Contatti ---------- */
.contact{background:linear-gradient(180deg,var(--void),var(--ghisa))}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);margin-top:clamp(2.5rem,5vw,4rem);align-items:start}
@media(max-width:900px){.contact__grid{grid-template-columns:1fr}}
.infocard{border:1px solid var(--bordo);padding:clamp(1.25rem,2.4vw,1.75rem);margin-bottom:1px;background:var(--ghisa);transition:border-color .35s,background .35s}
.infocard:hover{border-color:var(--blu);background:var(--acciaio)}
.infocard small{
  font-family:"Archivo",sans-serif;font-stretch:72%;font-weight:600;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--viola);display:block;margin-bottom:.5rem
}
.infocard h3{font-size:1.25rem;font-weight:700;font-stretch:96%}
.infocard p{color:var(--muto);margin-top:.5rem;font-size:.94rem}
.infocard a{color:var(--blu);font-size:.9rem;display:inline-block;margin-top:.85rem;border-bottom:1px solid var(--blu-scuro);padding-bottom:2px}
.direct{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:1rem}
.direct a{background:var(--ghisa);border:1px solid var(--bordo);padding:1.25rem;display:block;
  transition:background .3s,border-color .3s,transform .3s var(--ease)}
.direct a:hover{background:var(--acciaio);border-color:var(--viola);transform:translateY(-2px)}
.direct small{display:block;font-family:"Archivo",sans-serif;font-stretch:72%;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muto);margin-bottom:.35rem}
@media(max-width:520px){.direct{grid-template-columns:1fr}}

.mapbox{margin-top:1rem;border:1px solid var(--bordo);background:var(--acciaio);aspect-ratio:16/10;position:relative;display:grid;place-items:center;text-align:center;padding:1.5rem}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapbox p{color:var(--muto);font-size:.85rem;max-width:38ch;margin-bottom:1rem}

/* ---------- Footer ---------- */
.foot{background:var(--void);border-top:1px solid var(--bordo);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:2.5rem}
@media(max-width:760px){.foot__grid{grid-template-columns:1fr}}
.foot img{height:34px;width:auto;margin-bottom:1.25rem}
.foot p,.foot li{color:var(--muto);font-size:.86rem;line-height:1.85}
.foot h4{font-family:"Archivo",sans-serif;font-stretch:72%;font-weight:600;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--viola);margin:0 0 .9rem}
.foot a:hover{color:var(--blu)}
.foot__bar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--bordo);font-size:.78rem;color:var(--muto)}

/* ---------- Torna su ---------- */
.totop{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:55;width:46px;height:46px;
  border:1px solid var(--bordo);background:rgba(11,14,23,.9);backdrop-filter:blur(8px);
  display:grid;place-items:center;color:var(--viola);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.35s var(--ease)
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:var(--viola)}

/* ---------- Pagine di testo ---------- */
.doc{padding-block:clamp(7rem,12vw,9rem) var(--sp-sec);max-width:78ch}
.doc h1{font-size:clamp(2rem,1.2rem + 3vw,3.2rem);font-weight:800;font-stretch:105%;margin-bottom:2rem}
.doc h2{font-size:1.4rem;font-weight:700;font-stretch:98%;margin:2.75rem 0 .9rem;color:var(--testo)}
.doc p,.doc li{color:var(--muto);margin-bottom:.9rem}
.doc ul{list-style:disc;padding-left:1.25rem;margin-bottom:1rem}
.doc a{color:var(--blu);border-bottom:1px solid var(--blu-scuro)}
.doc .todo{color:var(--viola);border:1px dashed var(--viola);padding:.15rem .4rem;font-size:.85em}

/* ---------- Rivelazione allo scroll ---------- */
.rise{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
  .marquee__track{animation:none}
}

/* ============================================================
   Pagina "Propico e Collaboratori"
   ============================================================ */
.page-lead{padding-block:clamp(7.5rem,13vw,10rem) 0}
.page-lead h1{font-size:clamp(2.1rem,1.1rem + 4.2vw,4.2rem);font-weight:800;font-stretch:106%;max-width:20ch}

/* Metriche */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--bordo);margin-top:clamp(2.5rem,5vw,4rem)}
.metric{background:var(--ghisa);padding:clamp(1.35rem,2.4vw,1.9rem);position:relative;overflow:hidden;transition:background .4s var(--ease)}
.metric:hover{background:var(--acciaio)}
.metric b{
  display:block;font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:800;
  font-size:clamp(2.2rem,1.4rem + 2.4vw,3.2rem);line-height:1;letter-spacing:-.04em;
  background:var(--molten);-webkit-background-clip:text;background-clip:text;color:transparent
}
.metric h3{font-size:.94rem;font-weight:700;font-stretch:96%;margin:.7rem 0 .35rem}
.metric p{color:var(--muto);font-size:.84rem}

/* Etichette operative */
.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(2rem,4vw,2.75rem)}
.badges span{
  font-size:.78rem;color:var(--platino);border:1px solid var(--bordo);
  padding:.45rem .85rem;background:rgba(255,255,255,.02);
  transition:border-color .3s,background .3s,transform .3s var(--ease)
}
.badges span:hover{border-color:var(--blu);background:rgba(91,141,239,.08);transform:translateY(-2px)}

/* Riquadro di avvertenza professionale */
.notice{
  border:1px solid var(--bordo);border-left:2px solid var(--viola);
  background:rgba(157,140,255,.045);padding:clamp(1.2rem,2.4vw,1.6rem);
  margin-top:clamp(2rem,4vw,2.75rem);max-width:76ch
}
.notice h3{font-size:1rem;font-weight:700;font-stretch:96%;margin-bottom:.55rem}
.notice p{color:var(--muto);font-size:.9rem}

/* Fisarmonica */
.accordion{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--bordo)}
.accordion details{border-bottom:1px solid var(--bordo)}
.accordion summary{
  list-style:none;cursor:pointer;padding:1.4rem 3rem 1.4rem 0;position:relative;
  font-family:"Archivo",sans-serif;font-stretch:100%;font-weight:700;
  font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);letter-spacing:-.02em;
  transition:color .3s
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{
  content:"";position:absolute;right:.6rem;top:50%;width:12px;height:12px;
  border-right:1.5px solid var(--viola);border-bottom:1.5px solid var(--viola);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease)
}
.accordion details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.accordion summary:hover{color:var(--viola)}
.accordion .panel{padding:0 0 1.8rem;max-width:70ch}
.accordion .panel > p{color:var(--muto);margin-bottom:1rem}
.accordion .panel dl{margin:0}
.accordion .panel dt{font-weight:600;color:var(--testo);font-size:.94rem;margin-top:.9rem}
.accordion .panel dd{margin:.15rem 0 0;color:var(--muto);font-size:.92rem}

/* Elenco servizi a due colonne */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--bordo);margin-top:clamp(2.5rem,5vw,4rem)}
.svc article{background:var(--ghisa);padding:clamp(1.5rem,2.6vw,2.1rem);position:relative;overflow:hidden;transition:background .45s var(--ease)}
.svc article::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(157,140,255,.13),transparent 70%)
}
.svc article:hover{background:var(--acciaio)}
.svc article:hover::before{opacity:1}
.svc__filler{background:var(--ghisa)}
.svc .tag{
  font-family:"Archivo",sans-serif;font-stretch:72%;font-weight:600;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blu);display:block;margin-bottom:.7rem;position:relative
}
.svc h3{font-size:1.15rem;font-weight:700;font-stretch:96%;margin-bottom:.7rem;position:relative}
.svc p{color:var(--muto);font-size:.93rem;position:relative}

/* Fascia di rimando in home */
.crossref{position:relative;overflow:hidden;background:var(--ghisa);border-block:1px solid var(--bordo)}
.crossref__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,5vw,4rem);align-items:center}
.crossref h2{max-width:20ch}
.crossref p{color:var(--muto);margin-top:1.3rem;max-width:58ch}
.crossref .badges{margin-top:1.8rem}
@media(max-width:760px){.crossref__inner{grid-template-columns:1fr}}