/* =============================================================
   FD Consulting S.R.L. — foglio di stile del sito
   Scritto a mano: nessun framework, nessuna build, nessuna
   dipendenza esterna. Ogni classe che il sito usa e' definita
   qui sotto, quindi si possono aggiungere classi nuove senza
   ricompilare niente (era il vincolo del sito OPDesk).
   Palette e font: Template/Brand/README_BRAND.md
   ============================================================= */

/* ---------- 1. Font self-hostati ---------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/Montserrat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/Montserrat-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/Inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 2. Colori e misure ----------
   Il blu del logo (#7596F3) e' troppo chiaro per il testo: su
   bianco fa 2,7:1, sotto la soglia di leggibilita'. Resta come
   colore d'identita' (bordi, sfondi tenui, grafica) e per il
   testo/pulsanti si usa --primary, stesso blu piu' scuro (5,8:1). */
:root{
  --brand:#7596F3;
  --brand-soft:#B7D5F1;
  --primary:#2F5BD8;
  --primary-hover:#2449B4;
  --btn-fg:#FFFFFF;

  --bg:#FFFFFF;
  --bg-soft:#F5F8FE;
  --card:#FFFFFF;
  --fg:#222222;
  --fg-muted:#5A6070;
  --border:#E1E7F6;
  --shadow:0 1px 2px rgba(16,24,64,.04),0 8px 24px -12px rgba(16,24,64,.14);
  --shadow-lg:0 24px 60px -24px rgba(16,24,64,.28);

  --ok:#1B8A5A;
  --warn:#B26A00;
  --crit:#C0392B;

  --font-heading:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1180px;
  --radius:14px;
  --radius-lg:20px;
  --header-h:74px;
  color-scheme:light;
}
/* Il tema chiaro e' il predefinito, sempre: il sito non segue
   l'impostazione di sistema. Lo scuro si ottiene solo con il pulsante,
   che scrive data-theme="dark" e lo ricorda nel localStorage. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --primary:#93AEFA; --primary-hover:#AEC2FC; --btn-fg:#0A0E1A;
  --bg:#0A0E1A; --bg-soft:#0E1424; --card:#121A2E;
  --fg:#E9EDF8; --fg-muted:#9AA4BE; --border:#232D48;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.75);
  --ok:#3DD68C; --warn:#E8A33D; --crit:#FF6B5B;
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:800;line-height:1.15;
  letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:var(--primary);text-decoration-color:color-mix(in srgb,var(--primary) 35%,transparent);
  text-underline-offset:3px;transition:color .18s}
a:hover{color:var(--primary-hover)}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.4em}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}
[hidden]{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--primary);
  color:var(--btn-fg);padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}

/* ---------- 4. Impaginazione ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
@media (min-width:768px){.wrap{padding-inline:32px}}
section{padding-block:clamp(3.5rem,7vw,6rem)}
.section-soft{background:var(--bg-soft);border-block:1px solid var(--border)}
.section-head{max-width:56ch;margin-bottom:2.5rem}
.section-head.center{margin-inline:auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-heading);
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary);margin-bottom:.9rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--brand);border-radius:2px}
.section-head.center .eyebrow::before{display:none}
.lead{font-size:1.1rem;color:var(--fg-muted);max-width:60ch}
.section-head.center .lead{margin-inline:auto}

.grid{display:grid;gap:1.25rem}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:640px) and (max-width:899px){.grid-4{grid-template-columns:repeat(2,1fr)}}
.split{display:grid;gap:2.5rem;align-items:start}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:3.5rem}}

/* ---------- 5. Pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-heading);font-weight:700;font-size:.95rem;
  padding:.85rem 1.5rem;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color .18s,border-color .18s,color .18s,transform .18s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn-primary{background:var(--primary);color:var(--btn-fg);
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--primary) 80%,transparent)}
.btn-primary:hover{background:var(--primary-hover);color:var(--btn-fg)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-lg{padding:1rem 1.9rem;font-size:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.8rem}
/* dove il testo e' centrato lo sono anche i pulsanti: senza queste due
   righe la chiusura di pagina aveva titolo centrato e bottone a sinistra */
.section-head.center .btn-row,
.cta-band .btn-row,
.btn-row.center{justify-content:center}
.btn .ico{width:18px;height:18px;flex:none}

/* ---------- 6. Intestazione ---------- */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.site-header.is-stuck{border-bottom-color:var(--border);box-shadow:var(--shadow)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--header-h)}
.logo{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--fg);flex:none}
/* Il PNG del marchio e' quadrato ma il monogramma occupa solo una fascia
   centrale (36% dell'altezza): dentro un box quadrato risultava minuscolo.
   Qui si usa la versione ritagliata al contenuto, dimensionata per altezza. */
.logo img{height:30px;width:auto;flex:none}
@media (min-width:768px){.logo img{height:34px}}
.logo-text{display:flex;flex-direction:column;line-height:1.05}
.logo-name{font-family:var(--font-heading);font-weight:800;font-size:1.06rem;letter-spacing:-.02em}
.logo-tag{font-size:.66rem;color:var(--fg-muted);letter-spacing:.04em}
.nav{display:none}
@media (min-width:1000px){.nav{display:flex;align-items:center;gap:.15rem}}
.nav a,.nav-trigger{font-family:var(--font-body);font-size:.94rem;font-weight:500;color:var(--fg-muted);
  text-decoration:none;padding:.55rem .8rem;border-radius:9px;background:none;border:0;
  cursor:pointer;transition:color .18s,background-color .18s}
.nav a:hover,.nav-trigger:hover,.nav a[aria-current="page"]{color:var(--fg);background:var(--bg-soft)}
.nav a[aria-current="page"]{font-weight:600}
.has-menu{position:relative}
.nav-trigger{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-body)}
.nav-trigger .ico{width:15px;height:15px;transition:transform .2s}
.has-menu[data-open="true"] .nav-trigger .ico{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 8px);left:0;min-width:290px;padding:.5rem;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);display:grid;gap:1px}
.submenu a{display:block;padding:.6rem .75rem;border-radius:9px;font-size:.92rem;color:var(--fg)}
.submenu a small{display:block;font-size:.78rem;color:var(--fg-muted);font-weight:400;margin-top:.1rem}
.submenu a:hover{background:var(--bg-soft);color:var(--primary)}
.header-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--fg);
  cursor:pointer;transition:border-color .18s,color .18s}
.icon-btn:hover{border-color:var(--primary);color:var(--primary)}
.icon-btn .ico{width:19px;height:19px}
.header-actions .btn{display:none}
@media (min-width:1000px){.header-actions .btn{display:inline-flex}}
.menu-toggle{display:inline-flex}
@media (min-width:1000px){.menu-toggle{display:none}}
.theme-toggle .ico-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ico-moon{display:block}
.mobile-nav{border-top:1px solid var(--border);background:var(--bg);padding:1rem 0 1.5rem}
@media (min-width:1000px){.mobile-nav{display:none !important}}
.mobile-nav a{display:block;padding:.7rem .25rem;color:var(--fg);text-decoration:none;
  font-weight:500;border-bottom:1px solid var(--border)}
.mobile-nav a.sub{padding-left:1.1rem;font-size:.92rem;color:var(--fg-muted);font-weight:400}
.mobile-nav .btn{width:100%;margin-top:1.1rem}

/* ---------- 7. Copertina ---------- */
.hero{position:relative;padding-top:clamp(3rem,7vw,5.5rem);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% 45% 55% -20%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 26%,transparent),transparent);
  filter:blur(30px);z-index:-1}
.hero-inner{max-width:60ch}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:980px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:3.5rem}}
.hero-grid .hero-inner{max-width:none}
/* accanto al riquadro la colonna e' piu' stretta: il titolo scende di misura
   per non spezzarsi in cinque righe */
@media (min-width:980px){.hero-grid h1{font-size:clamp(2rem,3.5vw,2.9rem)}}
.hero h1{margin-bottom:1rem}
.hero .lead{font-size:clamp(1.05rem,1.9vw,1.25rem)}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:999px;
  font-size:.82rem;font-weight:600;border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);
  background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--primary);margin-bottom:1.4rem}
.badge .ico{width:15px;height:15px}
.trustbar{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:2.5rem;padding-top:1.6rem;
  border-top:1px solid var(--border);font-size:.88rem;color:var(--fg-muted)}
.trustbar span{display:inline-flex;align-items:center;gap:.45rem}
.trustbar .ico{width:16px;height:16px;color:var(--brand);flex:none}

/* ---------- 7b. Riquadro "estratto di report" ----------
   Non e' una schermata finta di prodotto: e' la forma dei report
   che consegniamo davvero, barre di severita' comprese. */
.report-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden}
.report-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.3rem;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.report-head strong{font-family:var(--font-heading);font-size:.95rem}
.report-head span{font-size:.78rem;color:var(--fg-muted)}
.report-body{padding:1.3rem}
.report-meta{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.8rem;color:var(--fg-muted);
  margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px dashed var(--border)}
.report-meta b{display:block;font-family:var(--font-heading);font-size:1.35rem;
  color:var(--fg);font-weight:800;line-height:1.2}
.sev-row{display:grid;grid-template-columns:76px 1fr 28px;align-items:center;gap:.7rem;margin-bottom:.6rem}
.sev-row:last-of-type{margin-bottom:0}
.sev-label{font-size:.78rem;font-weight:700;font-family:var(--font-heading);letter-spacing:.02em}
.sev-track{display:block;height:9px;border-radius:999px;
  background:color-mix(in srgb,var(--fg-muted) 16%,transparent);overflow:hidden}
/* display:block indispensabile: e' uno <span>, e da inline non
   rispetterebbe ne' larghezza ne' altezza (barre tutte grigie) */
.sev-fill{display:block;height:100%;border-radius:999px}
.sev-count{font-size:.82rem;font-weight:700;text-align:right;font-family:var(--font-heading)}
.sev-crit .sev-fill{background:var(--crit)}.sev-crit .sev-label{color:var(--crit)}
.sev-high .sev-fill{background:#E8802B}.sev-high .sev-label{color:#E8802B}
.sev-med  .sev-fill{background:var(--warn)}.sev-med .sev-label{color:var(--warn)}
.sev-low  .sev-fill{background:var(--ok)}.sev-low .sev-label{color:var(--ok)}
.report-foot{padding:.9rem 1.3rem;border-top:1px solid var(--border);background:var(--bg-soft);
  font-size:.78rem;color:var(--fg-muted);display:flex;align-items:center;gap:.5rem}
.report-foot .ico{width:15px;height:15px;color:var(--brand);flex:none}

/* ---------- 8. Riquadri ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.6rem;box-shadow:var(--shadow);transition:border-color .2s,transform .2s,box-shadow .2s}
.card-link:hover{border-color:color-mix(in srgb,var(--brand) 60%,transparent);
  transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--fg-muted);font-size:.96rem;margin:0}
.card p+p{margin-top:.8rem}   /* senza questa i paragrafi si incollano */
.card ul,.card ol{color:var(--fg-muted);font-size:.96rem;margin:.8rem 0 0}
.card-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:12px;background:color-mix(in srgb,var(--brand) 14%,transparent);
  color:var(--primary);margin-bottom:1rem}
.card-icon .ico{width:22px;height:22px}
a.card{text-decoration:none;color:inherit;display:block}
.card-more{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;
  font-size:.88rem;font-weight:600;color:var(--primary);font-family:var(--font-heading)}
.card-more .ico{width:15px;height:15px;transition:transform .2s}
a.card:hover .card-more .ico{transform:translateX(3px)}
.step{counter-increment:step}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:999px;background:var(--primary);color:var(--btn-fg);
  font-family:var(--font-heading);font-weight:800;font-size:1rem;margin-bottom:1rem}

/* ---------- 9. Elenchi con spunta ---------- */
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.check-list li{display:flex;gap:.7rem;align-items:flex-start;margin:0}
.check-list .ico{width:20px;height:20px;flex:none;color:var(--ok);margin-top:.18rem}
.deliver-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.deliver-list li{margin:0;padding-left:1.1rem;border-left:2px solid var(--brand)}
.deliver-list strong{display:block;font-family:var(--font-heading);margin-bottom:.15rem}
.deliver-list span{color:var(--fg-muted);font-size:.95rem}

/* ---------- 10. Tabelle ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:480px}
th,td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
thead th{background:var(--bg-soft);font-family:var(--font-heading);font-weight:700;
  font-size:.84rem;letter-spacing:.02em;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td strong{color:var(--fg)}

/* ---------- 11. Domande frequenti ---------- */
.faq{display:grid;gap:.75rem;max-width:60ch}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.3rem;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-heading);font-weight:700;font-size:1rem;color:var(--fg)}
.faq-q .ico{width:19px;height:19px;flex:none;color:var(--primary);transition:transform .25s}
.faq-item[data-open="true"] .faq-q .ico{transform:rotate(180deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.22,1,.36,1)}
.faq-item[data-open="true"] .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 1.3rem 1.2rem;color:var(--fg-muted);font-size:.96rem}

/* ---------- 12. Richiami ---------- */
.callout{border:1px solid var(--border);border-left:3px solid var(--brand);
  border-radius:var(--radius);background:var(--bg-soft);padding:1.3rem 1.5rem}
.callout.warn{border-left-color:var(--warn)}
.callout h3{margin-bottom:.4rem;font-size:1.05rem}
.callout p{color:var(--fg-muted);font-size:.96rem}

/* ---------- 13. Modulo ---------- */
.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.88rem;font-weight:600;font-family:var(--font-heading)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.97rem;padding:.8rem .95rem;border-radius:10px;
  border:1px solid var(--border);background:var(--card);color:var(--fg);width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
.field-check{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--fg-muted)}
.field-check input{width:18px;height:18px;margin-top:.15rem;flex:none;accent-color:var(--primary)}
.form-note{font-size:.84rem;color:var(--fg-muted)}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}

/* ---------- 14. Chiusura di pagina ---------- */
.cta-band{background:var(--bg-soft);border-block:1px solid var(--border);text-align:center}
.cta-band .wrap{max-width:62ch}
.site-footer{background:var(--bg);border-top:1px solid var(--border);padding-block:3.5rem 2rem;font-size:.92rem}
.footer-top{display:grid;gap:2.5rem;margin-bottom:2.5rem}
@media (min-width:900px){.footer-top{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-brand .logo{margin-bottom:.9rem}
.footer-brand p{color:var(--fg-muted);font-size:.9rem;margin-bottom:.35rem}
.footer-payoff{font-family:var(--font-heading);font-style:italic;color:var(--brand)}
.footer-col h4{font-family:var(--font-heading);font-size:.8rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-muted);margin-bottom:.9rem}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.footer-col li{margin:0}
.footer-col a{color:var(--fg);text-decoration:none;font-size:.92rem}
.footer-col a:hover{color:var(--primary)}
.footer-legal{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  align-items:center;padding-top:1.6rem;border-top:1px solid var(--border);
  color:var(--fg-muted);font-size:.83rem}
.footer-social{display:flex;gap:.6rem}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--border);border-radius:999px;color:var(--fg-muted)}
.footer-social a:hover{border-color:var(--primary);color:var(--primary)}
.footer-social .ico{width:17px;height:17px}

/* ---------- 15. Comparsa in scroll ----------
   La faceva una libreria nel sito OPDesk; qui sono tre righe di
   JavaScript con IntersectionObserver. Senza JS resta visibile. */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}
.d4{transition-delay:.24s}.d5{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- 16. Utility ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:.75rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.25rem}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:1.5rem}
.text-muted{color:var(--fg-muted)}
.text-center{text-align:center}
.small{font-size:.88rem}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- 17. Stampa ---------- */
@media print{
  .site-header,.mobile-nav,.cta-band,.btn,.footer-social{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .card,.table-scroll{box-shadow:none;border:1px solid #ccc}
  a{color:#000;text-decoration:underline}
  .reveal{opacity:1;transform:none}
}