/* ==================================================================
   MAST — pagine interne. Estende assets/mast.css (Style del template
   Vexon): stessi token, stessa scala tipografica, stesse hairline.
================================================================== */

/* ---------------- breadcrumb ---------------- */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);opacity:.5;margin-bottom:2rem;
}
.crumb a{color:inherit;text-decoration:none;transition:opacity .3s ease,color .3s ease}
.crumb a:hover{color:#fff;opacity:1}
.crumb i{font-style:normal;opacity:.4}
.crumb b{color:#fff;font-weight:400;opacity:.8}

/* ---------------- hero di pagina ---------------- */
.page-hero{
  position:relative;padding:8rem 1.5rem 4rem;
}
/* velo locale: crumb, eyebrow e titolo restano leggibili sulla zona calda dell'alone */
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.8),rgba(0,0,0,.5) 50%,transparent);
}
@media (min-width:768px){.page-hero{padding:10rem 2.5rem 5rem}}
.page-hero-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media (min-width:1024px){
  .page-hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem}
  .page-hero-grid .ph-l{grid-column:span 7/span 7}
  .page-hero-grid .ph-r{grid-column:span 5/span 5;align-self:end}
}
.page-h1{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:.98;
  color:rgba(255,255,255,.62);margin:1.5rem 0 0;
  font-size:clamp(2.25rem,7.5vw,5.25rem);
}
.page-h1 em{
  font-style:normal;color:#fff;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.28));
}
.page-lead{
  margin-top:2rem;max-width:44rem;font-size:1rem;line-height:1.7;color:var(--muted);font-weight:300;
}
@media (min-width:768px){.page-lead{font-size:1.0625rem}}

/* riquadro "in breve" */
.brief{
  position:relative;border:1px solid rgba(255,255,255,.1);border-radius:.375rem;
  background:rgba(0,0,0,.82);
  padding:1.75rem;
}
.brief .tick{position:absolute;z-index:2;height:1.25rem;width:1.25rem}
.brief .tick.tr{top:0;right:0;border-top:2px solid rgba(255,255,255,.35);border-right:2px solid rgba(255,255,255,.35)}
.brief .tick.bl{bottom:0;left:0;border-bottom:2px solid rgba(255,255,255,.35);border-left:2px solid rgba(255,255,255,.35)}
.brief .lbl{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:#fff;opacity:.7;margin-bottom:1.25rem;
}
.brief ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.brief li{
  font-size:.8125rem;line-height:1.6;color:var(--muted);opacity:.75;font-weight:300;
  padding:.7rem 0 .7rem 1.1rem;border-top:1px solid var(--hairline);position:relative;
}
.brief li:first-child{border-top:0}
.brief li::before{
  content:"";position:absolute;left:0;top:1.35rem;width:.5rem;height:1px;background:rgba(160,195,255,.7);
}

/* ---------------- sezione generica ---------------- */
.sec{
  padding:5rem 1.5rem;border-top:1px solid var(--hairline);
  background:rgba(0,0,0,.68);
}
@media (min-width:768px){.sec{padding:6rem 2.5rem}}
.sec.tone{
  background:rgba(0,0,0,.8);
}
.sec-head{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:3.5rem}
@media (min-width:1024px){
  .sec-head{grid-template-columns:repeat(12,minmax(0,1fr));gap:3rem}
  .sec-head .col-a{grid-column:span 4/span 4}
  .sec-head .col-b{grid-column:span 8/span 8}
}
.sec-h2{
  font-family:var(--font-display);font-size:1.875rem;font-weight:500;line-height:1.15;
  color:rgba(255,255,255,.72);letter-spacing:-.025em;margin:0;
}
@media (min-width:768px){.sec-h2{font-size:2.75rem}}
.sec-h2 em{font-style:normal;color:#fff;filter:drop-shadow(0 0 14px rgba(255,255,255,.22))}
.sec-lede{margin:1.25rem 0 0;max-width:42rem;font-size:.9375rem;line-height:1.7;color:var(--muted);opacity:.65;font-weight:300}

/* prose a due colonne */
.prose-block{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:1024px){
  .prose-block{grid-template-columns:repeat(12,minmax(0,1fr));gap:3rem}
  .prose-block .col-a{grid-column:span 4/span 4}
  .prose-block .col-b{grid-column:span 8/span 8}
}
.prose-block p{margin:0 0 1.25rem;max-width:44rem;font-size:.9375rem;line-height:1.8;color:var(--muted);opacity:.7;font-weight:300}
.prose-block p:last-child{margin-bottom:0}
.prose-block em{font-style:normal;color:#fff;opacity:.95}

/* pill / stack tecnologico */
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pills span{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);opacity:.65;padding:.55rem .85rem;border:1px solid var(--hairline);border-radius:2px;
  background:rgba(255,255,255,.02);transition:color .3s ease,opacity .3s ease,border-color .3s ease,transform .3s ease;
}
.pills span:hover{color:#fff;opacity:1;border-color:rgba(255,255,255,.3);transform:translateY(-2px)}

/* card testuali (ambiti, principi) */
.panels{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:.375rem;overflow:hidden}
@media (min-width:768px){.panels{grid-template-columns:repeat(3,minmax(0,1fr))}}
.panels.two{grid-template-columns:1fr}
@media (min-width:768px){.panels.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.panel{position:relative;background:rgba(0,0,0,.45);padding:2rem;transition:background .4s ease}
a.panel{display:block;text-decoration:none;color:inherit}
a.panel .vai{
  position:absolute;right:1.5rem;top:1.75rem;color:#fff;opacity:0;
  transition:opacity .35s ease,transform .35s var(--ease-expo);
}
a.panel .vai svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.5}
a.panel:hover .vai,a.panel:focus-visible .vai{opacity:.85;transform:translate(.2rem,-.2rem)}
a.panel h3{padding-right:2rem}
.panel:hover{background:rgba(255,255,255,.03)}
.panel .tag{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(160,195,255,.75);display:block;margin-bottom:1rem;
}
.panel h3{font-family:var(--font-display);font-size:1.25rem;font-weight:500;letter-spacing:-.02em;color:#fff;margin:0 0 .75rem}
.panel p{margin:0;font-size:.875rem;line-height:1.7;color:var(--muted);opacity:.65;font-weight:300}
.panel dl{margin:1rem 0 0}
.panel dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(160,195,255,.8);margin-top:1rem}
.panel dt:first-of-type{margin-top:0}
.panel dd{margin:.35rem 0 0;font-size:.8125rem;line-height:1.65;color:var(--muted);opacity:.65;font-weight:300}

/* FAQ */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.5rem 2.5rem 1.5rem 0;position:relative;
  font-family:var(--font-display);font-size:1.0625rem;font-weight:500;color:#fff;letter-spacing:-.015em;
  transition:opacity .3s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{opacity:.7}
.faq summary::after{
  content:"+";position:absolute;right:0;top:1.35rem;font-family:var(--font-mono);font-size:1.1rem;
  color:var(--muted);opacity:.6;transition:transform .35s var(--ease-expo);
}
.faq details[open] summary::after{content:"−"}
.faq .answer{padding:0 2.5rem 1.75rem 0;max-width:46rem;font-size:.875rem;line-height:1.8;color:var(--muted);opacity:.65;font-weight:300}

/* elenco capitoli (indice competenze) */
.chapters{border-top:1px solid var(--hairline)}
.chapters a{
  display:grid;grid-template-columns:1fr;gap:.5rem;padding:2rem 0;border-bottom:1px solid var(--hairline);
  text-decoration:none;position:relative;transition:padding-left .45s var(--ease-expo),background .45s ease;
}
@media (min-width:768px){
  .chapters a{grid-template-columns:5rem 1fr 22rem 3rem;align-items:baseline;gap:2rem;padding:2.25rem 1rem}
}
.chapters a:hover{background:rgba(255,255,255,.03)}
@media (min-width:768px){.chapters a:hover{padding-left:2rem}}
.chapters .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:rgba(160,195,255,.7)}
.chapters h3{font-family:var(--font-display);font-size:1.5rem;font-weight:500;letter-spacing:-.025em;color:#fff;margin:0}
@media (min-width:768px){.chapters h3{font-size:1.75rem}}
.chapters p{margin:0;font-size:.8125rem;line-height:1.65;color:var(--muted);opacity:.6;font-weight:300}
.chapters .go{justify-self:end;color:#fff;opacity:.35;transition:opacity .3s ease,transform .3s ease}
.chapters a:hover .go{opacity:1;transform:translate(.2rem,-.2rem)}
.chapters .go svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.5}

/* matrice decisionale / segnali / trust */
.matrix{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:.375rem;overflow:hidden}
@media (min-width:768px){.matrix{grid-template-columns:repeat(2,minmax(0,1fr))}}
.matrix > div,.matrix > a{background:rgba(0,0,0,.45);padding:1.75rem;transition:background .4s ease;text-decoration:none;display:block}
.matrix > div:hover,.matrix > a:hover{background:rgba(255,255,255,.03)}
.matrix > a:hover .if{opacity:1}
.matrix > a strong{color:#fff}
.matrix .if{
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;opacity:.85;margin-bottom:.75rem;
}
.matrix p{margin:0;font-size:.875rem;line-height:1.7;color:var(--muted);opacity:.65;font-weight:300}
.matrix strong{color:rgba(190,215,255,.95);font-weight:500}

.signals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:768px){.signals{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 3rem}}
.signals li{position:relative;padding-left:1.5rem;font-size:.9375rem;line-height:1.65;color:var(--muted);opacity:.7;font-weight:300}
.signals li::before{content:"";position:absolute;left:0;top:.7rem;width:.75rem;height:1px;background:rgba(160,195,255,.8)}
.signals strong{color:#fff;font-weight:500}

.trust{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:.375rem;overflow:hidden}
@media (min-width:768px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trust > div{background:rgba(0,0,0,.45);padding:2rem}
.trust .key{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);opacity:.5;margin-bottom:.9rem}
.trust .val{font-family:var(--font-display);font-size:1.375rem;font-weight:500;letter-spacing:-.02em;color:#fff;line-height:1.2}
.trust p{margin:.75rem 0 0;font-size:.875rem;line-height:1.7;color:var(--muted);opacity:.6;font-weight:300}

/* metodo: cinque passi */
.steps{border-top:1px solid var(--hairline)}
.step{display:grid;grid-template-columns:1fr;gap:.5rem;padding:2rem 0;border-bottom:1px solid var(--hairline)}
@media (min-width:768px){.step{grid-template-columns:14rem 1fr;gap:3rem;padding:2.25rem 0}}
.step .num{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(160,195,255,.75)}
.step h3{font-family:var(--font-display);font-size:1.25rem;font-weight:500;letter-spacing:-.02em;color:#fff;margin:0 0 .6rem}
.step p{margin:0;max-width:44rem;font-size:.875rem;line-height:1.75;color:var(--muted);opacity:.65;font-weight:300}

/* ---------------- fascia CTA ---------------- */
.cta-band{
  padding:6rem 1.5rem;border-top:1px solid var(--hairline);text-align:left;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,.88));
}
@media (min-width:768px){.cta-band{padding:7rem 2.5rem}}
.cta-h2{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-.025em;
  color:rgba(255,255,255,.72);font-size:clamp(2rem,6.5vw,4.5rem);margin:0;max-width:22ch;
}
.cta-h2 em{font-style:normal;color:#fff;filter:drop-shadow(0 0 18px rgba(255,255,255,.3))}
.cta-band .lede{margin:2rem 0 2.5rem;max-width:38rem;font-size:.9375rem;line-height:1.7;color:var(--muted);opacity:.7;font-weight:300}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
@media (min-width:768px){.cta-actions{gap:1.5rem}}

/* ---------------- modulo di contatto ---------------- */
.form-wrap{display:grid;grid-template-columns:1fr;gap:3rem}
@media (min-width:1024px){
  .form-wrap{grid-template-columns:repeat(12,minmax(0,1fr));gap:4rem}
  .form-wrap .fw-a{grid-column:span 7/span 7}
  .form-wrap .fw-b{grid-column:span 5/span 5}
}
.form-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:640px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:flex;flex-direction:column;gap:.5rem}
.field.full{grid-column:1/-1}
.field label{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:.55}
.field input,.field select,.field textarea{
  width:100%;background:rgba(0,0,0,.5);border:1px solid var(--hairline);border-radius:2px;
  padding:.85rem 1rem;color:#fff;font-family:var(--font-sans);font-size:.875rem;font-weight:300;
  transition:border-color .3s ease,background .3s ease;
}
.field textarea{min-height:9rem;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.28}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:rgba(160,195,255,.5);background:rgba(255,255,255,.04);
}
.field select{appearance:none;-webkit-appearance:none}
.field select option{background:#050505;color:#fff}
.consent{
  grid-column:1/-1;display:flex;gap:.75rem;align-items:flex-start;
  font-size:.75rem;line-height:1.6;color:var(--muted);opacity:.6;font-weight:300;
}
.consent input{margin-top:.15rem;accent-color:#7FB0FF;width:.95rem;height:.95rem;flex:none;cursor:pointer}
.consent a{color:#fff;opacity:.8}
.form-sent{
  display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;padding:3rem 0;
}
.form-sent .ok{font-family:var(--font-display);font-size:1.5rem;color:#fff;letter-spacing:-.02em}
.form-sent p{margin:0;font-size:.875rem;color:var(--muted);opacity:.6}

.contact-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hairline)}
.contact-list > div{padding:1.25rem 0;border-bottom:1px solid var(--hairline)}
.contact-list .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);opacity:.45;margin-bottom:.4rem}
.contact-list .v{font-size:.9375rem;line-height:1.6;color:#fff;opacity:.9;font-weight:300}
.contact-list .v a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2);transition:border-color .3s ease}
.contact-list .v a:hover{border-color:#fff}

/* ---------------- testi lunghi (legale, guida) ---------------- */
.prose{max-width:46rem}
.prose h2{
  font-family:var(--font-display);font-size:1.375rem;font-weight:500;letter-spacing:-.02em;color:#fff;
  margin:3.5rem 0 1rem;padding-top:1.5rem;border-top:1px solid var(--hairline);
}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose h3{font-family:var(--font-display);font-size:1.0625rem;font-weight:500;color:#fff;opacity:.9;margin:2rem 0 .75rem}
.prose p{margin:0 0 1.1rem;font-size:.9375rem;line-height:1.85;color:var(--muted);opacity:.7;font-weight:300}
.prose ul,.prose ol{margin:0 0 1.5rem;padding-left:1.1rem}
.prose li{margin-bottom:.6rem;font-size:.9375rem;line-height:1.75;color:var(--muted);opacity:.7;font-weight:300}
.prose a{color:#fff;opacity:.85;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.prose a:hover{border-color:#fff}
.prose strong{color:#fff;opacity:.95;font-weight:500}
.prose em{font-style:normal;color:#fff;opacity:.9}
.prose .meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:.45;margin-bottom:2.5rem}

/* ---------------- 404 ---------------- */
.err{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:8rem 1.5rem}
@media (min-width:768px){.err{padding:8rem 2.5rem}}

/* ---- link che usano gli stili bottone del template ---- */
a.btn-frame,a.btn-plain{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
a.btn-plain{padding:.75rem 0}

/* ---- messaggio di conferma iniettato da /contact-form.js ---- */
.form-grid + div .flex,div[class*="flex flex-col"]{display:flex;flex-direction:column;gap:1rem;padding:3rem 0}
div[class*="flex flex-col"] p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--muted)}
div[class*="flex flex-col"] p:first-of-type{font-family:var(--font-display);font-size:1.375rem;color:#fff;letter-spacing:-.02em}
div[class*="flex flex-col"] svg{width:2.5rem;height:2.5rem;color:#9CC4FF}
div[class*="flex flex-col"] .animate-ping{display:none}

/* ---------------- blog ---------------- */
.posts{border-top:1px solid var(--hairline)}
.posts .post{
  display:grid;grid-template-columns:1fr;gap:.75rem;padding:2rem 0;
  border-bottom:1px solid var(--hairline);text-decoration:none;
  transition:padding-left .45s var(--ease-expo),background .45s ease;
}
@media (min-width:768px){
  .posts .post{grid-template-columns:11rem 1fr 3rem;gap:2.5rem;align-items:start;padding:2.5rem 1rem}
}
.posts .post:hover{background:rgba(255,255,255,.03)}
@media (min-width:768px){.posts .post:hover{padding-left:2rem}}
.posts .post-meta{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(160,195,255,.7);
  padding-top:.4rem;
}
.posts .post-body h2{
  font-family:var(--font-display);font-size:1.375rem;font-weight:500;letter-spacing:-.025em;
  color:#fff;margin:0 0 .6rem;line-height:1.2;
}
@media (min-width:768px){.posts .post-body h2{font-size:1.625rem}}
.posts .post-body p{margin:0;max-width:44rem;font-size:.875rem;line-height:1.7;color:var(--muted);opacity:.62;font-weight:300}
.posts .post-body .pills{margin-top:1rem}
.posts .go{justify-self:end;color:#fff;opacity:.3;transition:opacity .3s ease,transform .3s ease;padding-top:.3rem}
.posts .post:hover .go{opacity:1;transform:translate(.2rem,-.2rem)}
.posts .go svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.5}

.pills.small span{font-size:9px;letter-spacing:.16em;padding:.4rem .6rem}
.post-h1{font-size:clamp(1.875rem,5vw,3.5rem);line-height:1.05}

/* il markdown degli articoli passa dentro .prose */
.prose pre{
  background:rgba(0,0,0,.6);border:1px solid var(--hairline);border-radius:.375rem;
  padding:1.25rem;overflow-x:auto;margin:0 0 1.5rem;
}
.prose pre code{font-family:var(--font-mono);font-size:.8125rem;line-height:1.7;color:#CFE4FF;background:none;padding:0}
.prose code{font-family:var(--font-mono);font-size:.8125rem;background:rgba(255,255,255,.06);padding:.15em .4em;border-radius:2px;color:#CFE4FF}
.prose blockquote{
  margin:0 0 1.5rem;padding:.25rem 0 .25rem 1.25rem;border-left:2px solid rgba(160,195,255,.5);
  color:var(--muted);opacity:.75;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose img{max-width:100%;height:auto;border-radius:.375rem;margin:0 0 1.5rem}
.prose hr{border:0;border-top:1px solid var(--hairline);margin:2.5rem 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:.875rem}
.prose th,.prose td{border:1px solid var(--hairline);padding:.65rem .85rem;text-align:left;color:var(--muted)}
.prose th{color:#fff;font-weight:500;background:rgba(255,255,255,.03)}


/* ==================================================================
   HOME — componenti aggiunti (trust bar, note, citazioni)
================================================================== */
.trustbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.6rem 2rem;padding:1rem 1.5rem;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  background:rgba(0,0,0,.7);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:.55;
}
@media (min-width:768px){.trustbar{padding:1.1rem 2.5rem;gap:.6rem 3rem}}
.trustbar span{position:relative;white-space:nowrap}
.trustbar span + span::before{
  content:"";position:absolute;left:-1.5rem;top:50%;width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.5;
}
@media (max-width:767px){.trustbar span + span::before{display:none}}

.cta-note{
  margin:.9rem 0 0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);opacity:.45;line-height:1.7;
}
.cta-band .cta-note{margin-top:1.5rem}

.stat-note{
  margin:.45rem 0 0;font-size:.75rem;line-height:1.6;font-weight:300;
  color:var(--muted);opacity:.62;
}

.quotes{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:.375rem;overflow:hidden}
@media (min-width:768px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.quote{margin:0;background:rgba(0,0,0,.45);padding:2.25rem 2rem;display:flex;flex-direction:column;gap:1.5rem}
.quote blockquote{
  margin:0;font-family:var(--font-display);font-size:1.0625rem;font-weight:500;line-height:1.55;
  letter-spacing:-.01em;color:#fff;opacity:.92;position:relative;padding-top:1.5rem;
}
@media (min-width:768px){.quote blockquote{font-size:1.125rem}}
.quote blockquote::before{
  content:"\201C";position:absolute;top:-.4rem;left:0;font-size:2.5rem;line-height:1;
  color:rgba(160,195,255,.55);font-family:var(--font-display);
}
.quote figcaption{display:flex;flex-direction:column;gap:.35rem;margin-top:auto}
.quote .who{font-size:.8125rem;color:var(--muted);opacity:.7;font-weight:300}
.quote .what{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(160,195,255,.75)}

/* ==================================================================
   SINTOMI — "Prima dello strumento, il problema"
   Impianto documentale: fondo pieno (nessuna particella sotto), griglia
   tecnica appena percettibile, tutto ancorato al rail di sinistra.
   Un solo accento, e solo sul sintomo: il colore vuol dire "questo sei tu".
================================================================== */
.sintomi{
  --accento:#7FA8FF;
  position:relative;background:#0a0a0c;border-top:1px solid var(--hairline);
  padding:5rem 1.5rem;
}
@media (min-width:768px){.sintomi{padding:7rem 2.5rem}}
/* griglia tecnica: 1px ogni 88px, quasi invisibile, fermata ai bordi */
.sintomi::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,rgba(255,255,255,.035) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 88px);
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
}
.sintomi > *{position:relative}

.sintomi-testata{max-width:52rem;margin-bottom:3.5rem}
@media (min-width:768px){.sintomi-testata{margin-bottom:4.5rem}}
.sintomi-h2{
  font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;line-height:1.1;
  color:rgba(255,255,255,.72);margin:1rem 0 0;font-size:clamp(1.75rem,4.2vw,2.75rem);
}
.sintomi-h2 em{font-style:normal;color:#fff}
.sintomi-lede{
  margin:1.25rem 0 0;max-width:44rem;font-size:.9375rem;line-height:1.7;
  color:var(--muted);opacity:.62;font-weight:300;
}

.diagnosi{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:600px){.diagnosi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.diagnosi{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}}

.record{
  display:block;text-decoration:none;color:inherit;
  border:1px solid rgba(255,255,255,.1);border-radius:3px;background:#0c0c10;
  padding:1.75rem 1.5rem 1.5rem;
  transition:transform .35s var(--ease-expo),border-color .35s ease,background .35s ease;
}
@media (min-width:768px){.record{padding:2rem 1.75rem 1.75rem}}
.record:hover,.record:focus-visible,.record.in-evidenza{
  transform:translateY(-4px);border-color:rgba(127,168,255,.45);background:#0d0e13;
}
.record-n{
  display:block;font-size:10px;letter-spacing:.3em;color:#fff;opacity:.4;margin-bottom:1.5rem;
}
.sintomo{
  margin:0;font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;
  font-size:1.375rem;line-height:1.25;color:var(--accento);
  text-wrap:balance;
}
@media (min-width:768px){.sintomo{font-size:1.5rem}}

/* La risposta si rivela al passaggio: lo spazio resta occupato, cosi' la
   griglia non salta e chi usa uno screen reader la legge comunque. */
.record-risposta{
  display:block;margin-top:1.5rem;min-height:6.5rem;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s var(--ease-expo);
}
.record:hover .record-risposta,.record:focus-visible .record-risposta,
.record:focus-within .record-risposta,.record.in-evidenza .record-risposta{opacity:1;transform:none}
.record-freccia{
  display:block;color:var(--accento);font-size:1.125rem;line-height:1;margin-bottom:.75rem;
}
.disciplina{
  display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;margin-bottom:.6rem;
}
.record-desc{
  display:block;font-size:.875rem;line-height:1.65;color:var(--muted);opacity:.65;font-weight:300;
}

/* Senza mouse non c'e' hover: la risposta sta sempre in chiaro. */
@media (hover:none),(pointer:coarse){
  .record-risposta{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .record-risposta{opacity:1!important;transform:none!important}
  .record:hover,.record:focus-visible{transform:none}
}

/* ---- diagramma del problema dentro il record ---- */
.record-testa{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.record-testa .record-n{margin-bottom:0}
.record-diag{
  width:112px;height:auto;opacity:.5;flex:none;margin-top:-.35rem;
  transition:opacity .4s ease;
}
.record:hover .record-diag,.record:focus-visible .record-diag{opacity:.85}
@media (min-width:1024px){.record-diag{width:126px}}

/* ==================================================================
   TERRENI — "Dove operiamo": schede vere, non celle di tabella
================================================================== */
.terreni{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:600px){.terreni{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.terreni{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}}
.terreno{
  border:1px solid rgba(255,255,255,.1);border-radius:3px;background:rgba(0,0,0,.45);
  padding:1.5rem;transition:border-color .35s ease,background .35s ease;
}
.terreno:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.02)}
.terreno-diag{display:block;width:100%;max-width:200px;height:auto;opacity:.55;margin-bottom:1.25rem}
.terreno:hover .terreno-diag{opacity:.8}
.terreno .tag{
  display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(160,195,255,.75);margin-bottom:.6rem;
}
.terreno h3{font-family:var(--font-display);font-size:1.125rem;font-weight:500;letter-spacing:-.02em;color:#fff;margin:0 0 .6rem}
.terreno p{margin:0;font-size:.875rem;line-height:1.65;color:var(--muted);opacity:.62;font-weight:300}

/* ==================================================================
   ROADMAP — le cinque fasi su una rotaia (composition helion-timeline:
   stazioni su una linea condivisa, tacca + nodo + indice + titolo).
   La rotaia si riempie scorrendo; niente scroll orizzontale forzato.
================================================================== */
.roadmap{padding:3.5rem 2rem 1rem}
@media (min-width:1024px){.roadmap{padding:4.5rem 3rem 1.5rem}}
.roadmap-testa{display:flex;align-items:center;gap:1rem;margin-bottom:3rem}
.roadmap-testa .lbl{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:.62;
}
.tappe{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:1fr;gap:2.25rem;
}
@media (min-width:900px){
  .tappe{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem;padding-top:2.75rem}
}
/* la rotaia: verticale in colonna, orizzontale quando le stazioni si allineano */
.rotaia{position:absolute;left:5px;top:.4rem;bottom:.4rem;width:1px;background:rgba(255,255,255,.12)}
.rotaia i{
  display:block;width:100%;height:calc(var(--avanzamento,0) * 100%);
  background:rgba(160,195,255,.85);transition:height .25s linear;
}
@media (min-width:900px){
  .rotaia{left:0;right:0;top:calc(2.75rem - 1px);bottom:auto;width:auto;height:1px}
  .rotaia i{height:100%;width:calc(var(--avanzamento,0) * 100%)}
}
.tappa{position:relative;padding-left:2rem}
@media (min-width:900px){.tappa{padding-left:0;padding-top:0}}
.tappa-nodo{
  position:absolute;left:0;top:.35rem;width:11px;height:11px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:#0a0a0c;
  transition:border-color .4s ease,box-shadow .4s ease,background .4s ease;
}
@media (min-width:900px){.tappa-nodo{left:0;top:-6px}}
.tappa.accesa .tappa-nodo{
  border-color:var(--accento,#7FA8FF);background:var(--accento,#7FA8FF);
  box-shadow:0 0 0 4px rgba(127,168,255,.14);
}
.tappa-n{
  display:block;font-size:10px;letter-spacing:.24em;color:#fff;opacity:.4;margin-bottom:.6rem;
  transition:opacity .4s ease,color .4s ease;
}
.tappa.accesa .tappa-n{opacity:1;color:#7FA8FF}
.tappa h4{
  font-family:var(--font-display);font-size:1.0625rem;font-weight:500;letter-spacing:-.015em;
  color:#fff;opacity:.72;margin:0 0 .5rem;transition:opacity .4s ease;
}
.tappa.accesa h4{opacity:1}
.tappa p{
  margin:0;font-size:.8125rem;line-height:1.6;color:var(--muted);opacity:.45;font-weight:300;
  transition:opacity .4s ease;
}
.tappa.accesa p{opacity:.68}
@media (prefers-reduced-motion:reduce){
  .tappa-nodo,.tappa-n,.tappa h4,.tappa p,.rotaia i{transition:none!important}
}