/* ==========================================================================
   Finanzia · sito pubblico · grafica "istituzionale luminosa"
   CSS scritto a mano, nessuna libreria, nessuna richiesta a domini esterni.
   Font self-hosted in /sito/fonts (Poppins per i titoli, Inter per il testo).

   Indice
     1. Font                  9. Come funziona        11b. Catalogo bandi (elenco)
     2. Token                10. Per chi e'           11c. Scheda bando
     3. Base                 11. Bandi in evidenza    12. Perche' Finanzia
     4. Bottoni              13. CTA finale           14. Footer
     5. Header               15. Pagina legale        15b. Per chi e' (tendina, hub, landing)
     6. Intestazioni         15c. Flusso FinanzIA     15d. Modulo di contatto
     7. Hero e ingranaggio   16. Animazioni           17. Responsive
     8. Tipi di agevolazione 17b. Responsive: Per chi e'
   ========================================================================== */

/* ============================== 1. Font ================================= */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }

/* ============================== 2. Token ================================ */
:root {
  /* Colori campionati dall'ingranaggio del logo */
  --c-azzurro: #11a4d4;
  --c-blu: #0c79ba;
  --c-blu-logo: #034a87;
  --c-teal: #4ad0cd;
  --c-verde: #1b8848;
  --c-verde-scuro: #05492a;
  --c-ambra: #f99c04;
  --c-arancio: #fa600a;
  --c-rosso: #bd2920;
  --c-viola: #2d235a;
  --c-nero: #120e19;

  /* Autorita': il navy del gestionale (public/brand/finanzia-theme.css) */
  --navy: #0f1f3d;
  --navy-700: #1a3260;
  --navy-900: #0a1630;

  /* Neutri luminosi */
  --bg: #ffffff;
  --bg-soft: #f5f8fc;
  --bg-tint: #eaf1f8;
  --line: #e0e7f0;
  --line-strong: #c9d4e2;
  --text: #1d2939;
  --text-muted: #52607a;
  --ink: #292929;

  /* Ruoli */
  --heading: var(--navy);
  --link: var(--c-blu-logo);
  --focus: var(--c-blu);

  /* Tipi di agevolazione (allineati alle card bando del gestionale) */
  --t-fondo: var(--c-verde);
  --t-finanziamento: var(--c-blu);
  --t-credito: #4a3a8f;
  --t-voucher: var(--c-arancio);
  --t-garanzia: #16a3a0;
  --t-altro: var(--navy);

  /* Firma: gli 8 colori dei denti, in senso orario come nel logo */
  --seg: linear-gradient(90deg,
    var(--c-azzurro) 0 12.5%, var(--c-verde) 12.5% 25%, var(--c-ambra) 25% 37.5%, var(--c-viola) 37.5% 50%,
    var(--c-rosso) 50% 62.5%, var(--c-verde-scuro) 62.5% 75%, var(--c-blu-logo) 75% 87.5%, var(--c-arancio) 87.5% 100%);

  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(15, 31, 61, .06);
  --shadow: 0 1px 2px rgba(15, 31, 61, .05), 0 12px 32px -14px rgba(15, 31, 61, .18);
  --shadow-lg: 0 2px 6px rgba(15, 31, 61, .06), 0 28px 60px -22px rgba(15, 31, 61, .30);

  --header-h: 76px;
  --gutter: 24px;
}

/* ============================== 3. Base ================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); color: var(--heading); margin: 0; font-weight: 600; }
p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--link); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* Sprite delle icone (tratto a mano, 24x24), incluso una volta nel layout */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }

.container { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }

/* ============================= 4. Bottoni =============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px;
  border-radius: var(--r); border: 1px solid transparent;
  font: 600 16px/1 var(--font-body); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn .icon { width: 18px; height: 18px; transition: transform .18s ease; }
.btn:hover .icon { transform: translateX(3px); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 15px; border-radius: 10px; }
.btn-lg { height: 56px; padding: 0 26px; font-size: 16.5px; }

.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 10px 22px -12px rgba(15, 31, 61, .65); }
.btn-primary:hover { background: var(--navy-700); }
.btn-secondary { background: #fff; color: var(--navy); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--navy); }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--bg-tint); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: #eaf1f8; }
.cta-panel :focus-visible { outline-color: #fff; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  font-weight: 600; color: var(--c-blu-logo); text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--c-blu-logo) 25%, #fff); padding-bottom: 4px;
}
.link-arrow:hover { border-bottom-color: var(--c-blu-logo); }
.link-arrow .icon { width: 18px; height: 18px; transition: transform .18s ease; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ============================== 5. Header =============================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 10px 28px -20px rgba(15, 31, 61, .35); }
.site-header::before { content: ""; display: block; height: 3px; background: var(--seg); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; border-radius: 6px; }
.brand img { height: 30px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 40px; }
.nav-links { display: flex; gap: 34px; }
.nav-links a {
  position: relative; display: inline-block; padding: 8px 0;
  color: var(--text); text-decoration: none; font-weight: 500; font-size: 15.5px;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--seg); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 8px; }

.menu-toggle {
  display: none; place-items: center; width: 46px; height: 46px; margin-right: -6px;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r); color: var(--navy); cursor: pointer;
}
.menu-toggle .icon { width: 22px; height: 22px; grid-area: 1 / 1; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ================= 6. Eyebrow e intestazioni di sezione ================= */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 13px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-blu-logo);
}
.eyebrow::before { content: ""; width: 32px; height: 4px; border-radius: 2px; background: var(--seg); flex: none; }

.section { padding: 112px 0; }
.section-soft { background: var(--bg-soft); border-block: 1px solid var(--line); }
.section-head h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.15; letter-spacing: -.02em; margin-top: 16px; text-wrap: balance; }
.section-head .lead { font-size: 18px; color: var(--text-muted); margin-top: 16px; max-width: 56ch; }
.section-head.center { text-align: center; margin-inline: auto; max-width: 760px; }
.section-head.center .lead { margin-inline: auto; }
.section-head.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.section-head.split .lead { margin-top: 0; justify-self: end; }

.ico-box {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: color-mix(in srgb, var(--c) 12%, #fff);
  color: color-mix(in srgb, var(--c) 82%, #0f1f3d);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, #fff);
}
.ico-box .icon { width: 24px; height: 24px; }

/* ========================= 7. Hero e ingranaggio ======================== */
.hero { position: relative; overflow: hidden; padding: 72px 0 104px; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 31, 61, .11) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 76% 48%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 75% at 76% 48%, #000 25%, transparent 72%);
}
.hero::after {
  content: ""; position: absolute; z-index: -2; inset: 0;
  background:
    radial-gradient(42% 58% at 76% 46%, rgba(17, 164, 212, .10), transparent 70%),
    linear-gradient(180deg, #f6f9fd 0%, #fff 100%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; align-items: center; }

.hero h1 {
  margin-top: 22px;
  font-size: clamp(38px, 4.6vw, 60px); line-height: 1.07; letter-spacing: -.025em; text-wrap: balance;
}
.u-seg { position: relative; white-space: nowrap; }
.u-seg::after {
  content: ""; position: absolute; z-index: -1; left: 2px; right: 0; bottom: -.03em; height: .1em; min-height: 5px;
  background: var(--seg); border-radius: 3px;
}
.hero-lead { margin-top: 24px; font-size: 19px; line-height: 1.6; color: var(--text-muted); max-width: 54ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; white-space: nowrap; font-weight: 500; color: var(--text); }
.hero-points .icon { width: 18px; height: 18px; color: var(--c-verde); stroke-width: 2.4; }

/* Ingranaggio a corona multicolore con il circuito al centro */
.hero-visual { position: relative; width: 100%; max-width: 600px; margin-left: auto; aspect-ratio: 1 / 1; container-type: inline-size; }
.gear { position: absolute; left: 9%; top: 6%; width: 88%; height: 88%; overflow: visible; }
.gear-halo { fill: #fff; stroke: var(--line); stroke-width: 1; }
.gear-rotor { transform-origin: 280px 280px; animation: tick 48s cubic-bezier(.65, 0, .35, 1) infinite; }
.gear-dash { fill: none; stroke: #b9c6d8; stroke-width: 1.5; stroke-dasharray: 2 7; }
.flow { stroke-dasharray: 14 86; stroke-dashoffset: 100; animation: flow 4.8s cubic-bezier(.45, 0, .55, 1) infinite; }
.flow-a { stroke: var(--c-ambra); }
.flow-b { stroke: var(--c-azzurro); animation-delay: 2.4s; }

/* Cartellini che accompagnano l'ingranaggio (profilo e avviso) */
.hv-card {
  position: absolute;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 3.4cqw 3.6cqw;
  font-size: clamp(11px, 2.35cqw, 14px); line-height: 1.35;
}
.hv-profile { left: 0; top: 1%; width: 45cqw; animation: rise .7s .15s both cubic-bezier(.2, .7, .2, 1); }
.hv-alert { right: 0; bottom: 2%; width: 45cqw; animation: rise .7s .35s both cubic-bezier(.2, .7, .2, 1); }
.hv-head { display: flex; align-items: center; gap: 2.2cqw; padding-bottom: 2.4cqw; margin-bottom: 2.4cqw; border-bottom: 1px solid var(--line); }
.hv-ico { display: grid; place-items: center; width: 7.4cqw; height: 7.4cqw; border-radius: 1.8cqw; flex: none; }
.hv-ico .icon { width: 4.2cqw; height: 4.2cqw; }
.hv-ico-blue { background: #e3f0f9; color: var(--c-blu-logo); }
.hv-ico-amber { background: #fff1d6; color: #8a4b00; }
.hv-kicker { font-size: .8em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.hv-title { font-family: var(--font-display); font-weight: 600; font-size: 1.12em; color: var(--navy); margin-top: 2px; }
.hv-fields { display: grid; gap: 1.9cqw; }
.hv-fields > div { display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: 1.6cqw; }
.hv-fields dt { color: var(--text-muted); font-size: .88em; white-space: nowrap; }
.hv-fields .hv-goals { align-items: start; }
.hv-goals dd { display: flex; flex-wrap: wrap; gap: 1cqw; }
.hv-chip { display: inline-block; padding: .28em .6em; border-radius: 999px; background: var(--bg-tint); color: var(--navy); font-size: .82em; font-weight: 500; }
.sk { display: block; height: .72em; width: var(--w, 60%); border-radius: 99px; background: linear-gradient(90deg, #dfe6f0, #eaeff6); }
.hv-alert .sk + .sk { margin-top: 1.4cqw; }
.hv-tags { display: flex; align-items: center; gap: 1.4cqw; flex-wrap: wrap; margin-bottom: 2.4cqw; }
.hv-tags .tipo { font-size: .82em; }
.hv-ok { display: flex; align-items: center; gap: 1.2cqw; margin-top: 2.6cqw; padding-top: 2.2cqw; border-top: 1px dashed var(--line); color: #146b38; font-weight: 600; font-size: .9em; }
.hv-ok .icon { width: 1.25em; height: 1.25em; stroke-width: 2.6; }

.hv-pill {
  position: absolute; left: 3%; bottom: 14%;
  display: inline-flex; align-items: center; gap: 1.6cqw;
  padding: 1.6cqw 3cqw; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: clamp(11px, 2.2cqw, 13.5px); font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 14px 30px -14px rgba(15, 31, 61, .7);
  animation: rise .7s .55s both cubic-bezier(.2, .7, .2, 1);
}
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c-teal); }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c-teal); opacity: 0; animation: ping 2.4s ease-out infinite; }

/* ======================= 8. Tipi di agevolazione ======================== */
/* Le classi tipo-* seguono i valori di bandi.tipo_agevolazione (HomeController::TIPI)
   e valgono sia sulla card (barra laterale) sia sulla legenda e sul chip. */
.tipo-fondo_perduto           { --tipo: var(--t-fondo); }
.tipo-finanziamento_agevolato,
.tipo-finanziamento           { --tipo: var(--t-finanziamento); }
.tipo-credito_imposta         { --tipo: var(--t-credito); }
.tipo-voucher                 { --tipo: var(--t-voucher); }
.tipo-garanzia                { --tipo: var(--t-garanzia); }
.tipo-misto,
.tipo-agevolazione            { --tipo: var(--t-altro); }

.tipo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--tipo) 10%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tipo) 25%, #fff);
  color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.tipo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tipo); flex: none; }

/* ========================== 9. Come funziona ============================ */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 64px; }
.steps::before {
  content: ""; position: absolute; top: 27px; left: calc(100% / 6); right: calc(100% / 6); height: 0;
  border-top: 2px dashed var(--line-strong);
}
.step { position: relative; display: flex; flex-direction: column; align-items: center; }
.step-node, .step-card { flex: none; }
.step-node {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 2px solid var(--c);
  font: 600 20px/1 var(--font-display); color: var(--navy);
  box-shadow: 0 0 0 8px #fff;
}
.step-card {
  margin-top: 28px; width: 100%; flex: 1 1 auto;
  padding: 32px 30px 34px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.step-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.step-card h3 { font-size: 21px; line-height: 1.3; margin-top: 22px; letter-spacing: -.01em; }
.step-card p { margin-top: 10px; color: var(--text-muted); font-size: 16px; }

/* ============================ 10. Per chi e' ============================ */
.personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; }
.persona {
  position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  padding: 34px 26px 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
/* Il dente dell'ingranaggio come linguetta colorata sul bordo alto */
.persona::before {
  content: ""; position: absolute; top: -8px; left: 25px; width: 50px; height: 9px;
  background: var(--c); clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); border-radius: 2px 2px 0 0;
}
.persona:hover { box-shadow: var(--shadow); border-color: var(--line-strong); transform: translateY(-2px); }
.persona .ico-box { align-self: start; }
.persona h3 { font-size: 20px; line-height: 1.3; margin-top: 22px; align-self: start; letter-spacing: -.01em; text-wrap: balance; }
.persona > p { margin-top: 10px; color: var(--text-muted); font-size: 15.5px; }
.ticks { align-self: start; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 14px; height: 14px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 16%, #fff);
}
.ticks li::after {
  content: ""; position: absolute; left: 4.5px; top: calc(.28em + 3.5px); width: 3px; height: 5.5px;
  border: solid color-mix(in srgb, var(--c) 80%, #0f1f3d); border-width: 0 1.8px 1.8px 0; transform: rotate(40deg);
}

/* ========================= 11. Bandi in evidenza ======================== */
#bandi { padding-bottom: 104px; }
.bandi-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  margin-top: 48px; padding: 16px 0; border-block: 1px solid var(--line);
}
.bandi-bar-label { font-size: 14.5px; color: var(--text-muted); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.legend li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tipo); }

.bandi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.bandi > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.bando {
  position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
  padding: 26px 26px 26px 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
/* Barra laterale nel colore del tipo di agevolazione */
.bando::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tipo); }
.bando-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bando h3 { margin-top: 20px; font-size: 20px; line-height: 1.32; letter-spacing: -.01em; overflow-wrap: anywhere; }
.bando-meta { display: grid; gap: 0; margin: 20px 0 24px; border-top: 1px solid var(--line); }
.bando-meta > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.bando-meta dt { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 14.5px; white-space: nowrap; }
.bando-meta dt .icon { width: 18px; height: 18px; color: #7a8699; }
.bando-meta dd { font-weight: 600; font-size: 15px; color: var(--text); text-align: right; overflow-wrap: anywhere; }
.btn-card {
  align-self: end; width: 100%; height: 48px; justify-content: space-between;
  background: var(--bg-soft); color: var(--navy); border-color: var(--line);
}
.btn-card:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Stato vuoto: nessun bando pubblicato, oppure lettura non riuscita */
.bandi-empty {
  margin-top: 32px; padding: 56px 32px; text-align: center;
  background: var(--bg-soft); border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
}
.bandi-empty .ico-box { margin-inline: auto; --c: var(--c-ambra); }
.empty-title { margin-top: 20px; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.bandi-empty > p { margin: 12px auto 0; max-width: 58ch; color: var(--text-muted); }
.bandi-empty .btn { margin-top: 28px; }

/* Link "Vedi tutti i bandi" sotto la griglia della home */
.bandi-tutti { margin-top: 8px; text-align: center; }
.bandi-tutti .link-arrow { margin-top: 24px; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.bandi-empty .btn { margin-top: 0; }

/* Titolo della card cliccabile: tutta la card e' raggiungibile anche dal bottone */
.bando-link { color: inherit; text-decoration: none; }
.bando-link:hover { color: var(--c-blu-logo); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

/* Etichetta di stato (in attivazione / chiuso / in evidenza) accanto al chip del tipo */
.stato {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; letter-spacing: .01em;
  background: var(--bg-tint); color: var(--navy);
}
.stato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .75; }
.stato-attivo { background: #e3f4ea; color: #0f5a30; }
.stato-in_attivazione { background: #fff1d6; color: #8a4b00; }
/* Scheda pubblicata in anticipo sul provvedimento (bandi.stato_pubblicazione): ambra pieno, bordo sottile */
.stato-in_anticipazione { background: #fde9c4; color: #6f3d00; box-shadow: inset 0 0 0 1px rgba(249, 156, 4, .55); }
.stato-chiuso { background: #eef0f4; color: #5b6473; }
.stato-evidenza { background: #e3f0f9; color: var(--c-blu-logo); }

/* ======================= 11b. Catalogo bandi (elenco) ==================== */
/* Intestazione di pagina: briciole, titolo, sottotitolo, sul fondo tenue dell'hero */
.catalogo-head {
  padding: 40px 0 44px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f6f9fd 0%, #fff 100%);
}
.catalogo-head h1 { margin-top: 16px; font-size: clamp(32px, 4vw, 46px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.catalogo-head .lead { margin-top: 16px; font-size: 18px; color: var(--text-muted); max-width: 62ch; }

.briciole { margin-bottom: 22px; font-size: 14px; color: var(--text-muted); }
.briciole ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.briciole li { display: inline-flex; align-items: center; gap: 10px; }
.briciole li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.briciole a { color: var(--text-muted); text-decoration: none; }
.briciole a:hover { color: var(--c-blu-logo); text-decoration: underline; text-underline-offset: 4px; }
.briciole [aria-current] { color: var(--navy); font-weight: 500; }

.catalogo { padding: 40px 0 96px; }

/* Tab di stato: una riga di link con conteggio, sottolineatura multicolore su quello attivo */
.tab-stato { border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-stato ul { display: flex; gap: 6px; min-width: max-content; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 16px; margin-bottom: -1px;
  color: var(--text-muted); text-decoration: none; font-weight: 500; font-size: 15.5px; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.tab:hover { color: var(--navy); }
.tab.is-active { color: var(--navy); font-weight: 600; }
.tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--seg); }
.tab-count {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px;
  background: var(--bg-tint); color: var(--navy); font-size: 12.5px; font-weight: 600;
}
.tab.is-active .tab-count { background: var(--navy); color: #fff; }

/* Barra dei filtri: modulo GET, una riga su desktop, a colonna su mobile */
.filtri {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) auto; gap: 14px; align-items: end;
  margin-top: 24px; padding: 20px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.filtro { display: grid; gap: 6px; min-width: 0; }
.filtro label { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.filtro input, .filtro select {
  width: 100%; height: 48px; padding: 0 14px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: #fff;
  font: 500 15.5px/1 var(--font-body); color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.filtro select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1f3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.filtro input::placeholder { color: #8a94a6; font-weight: 400; }
.filtro input:focus, .filtro select:focus { outline: none; border-color: var(--c-blu); box-shadow: 0 0 0 3px rgba(12, 121, 186, .18); }
.filtro input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.filtro-azioni { display: flex; align-items: center; gap: 16px; }
.filtro-azioni .btn { height: 48px; }
.filtri-azzera { font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.filtri-azzera:hover { color: var(--c-rosso); text-decoration: underline; text-underline-offset: 4px; }

/* Riga dei risultati: conteggio + legenda dei tipi */
.risultati-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
  margin-top: 36px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.risultati-titolo { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.risultati-dove { color: var(--text-muted); font-weight: 500; }
.catalogo .bandi { margin-top: 28px; }
.catalogo .bandi-empty { margin-top: 28px; }

/* Paginazione */
.paginazione { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-top: 48px; }
.pag-pagine { display: flex; flex-wrap: wrap; gap: 6px; }
.pag-num, .pag-punti {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 10px;
  font-weight: 600; font-size: 15px; color: var(--navy); text-decoration: none;
}
.pag-num { border: 1px solid var(--line); background: #fff; transition: border-color .18s ease, background-color .18s ease; }
.pag-num:hover { border-color: var(--navy); }
.pag-num.is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pag-punti { color: var(--text-muted); }
.pag-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 600; font-size: 15px; text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.pag-btn:hover { border-color: var(--navy); }
.pag-btn:first-child .icon { transform: rotate(180deg); }
.pag-btn.is-disabled { color: #a3adbd; border-color: var(--line); cursor: default; }

/* Elenco delle regioni in fondo al catalogo */
.regioni-sez { padding: 72px 0; }
.regioni-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 40px; }
.regioni-lista a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  color: var(--navy); font-weight: 500; font-size: 15px; text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.regioni-lista a::after { content: "\2192"; color: var(--line-strong); transition: color .18s ease, transform .18s ease; }
.regioni-lista a:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); }
.regioni-lista a:hover::after { color: var(--navy); transform: translateX(3px); }
.regioni-lista a[aria-current] { border-color: var(--navy); background: var(--navy); color: #fff; }
.regioni-lista a[aria-current]::after { color: #fff; }

/* =========================== 11c. Scheda bando =========================== */
.scheda { padding: 40px 0 96px; }
.scheda-head { padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.scheda-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.scheda-head h1 { margin-top: 18px; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; max-width: 30ch; overflow-wrap: anywhere; }
.scheda-ente { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 17px; font-weight: 500; color: var(--text); }
.scheda-ente .icon { color: #7a8699; }
.scheda-fatti { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; }
.scheda-fatti li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-muted); }
.scheda-fatti .icon { width: 18px; height: 18px; color: #7a8699; }

.scheda-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr); gap: 56px; align-items: start; margin-top: 40px; }
.scheda-main { min-width: 0; }
.scheda-blocco { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.scheda-h2 { position: relative; padding-top: 14px; font-size: 24px; line-height: 1.25; letter-spacing: -.015em; }
.scheda-h2::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 4px; border-radius: 2px; background: var(--seg); }
.scheda-h3 { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 24px 0 10px; font-weight: 600; font-family: var(--font-body); }
.testo-lungo { margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.testo-lungo + .testo-lungo { margin-top: 12px; }
.testo-muto { margin-top: 16px; color: var(--text-muted); }
.scheda-nota { margin-top: 12px; color: var(--text-muted); }
.scheda-nota .link-arrow { margin-top: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-block; padding: 7px 13px; border-radius: 999px;
  background: var(--bg-tint); color: var(--navy); font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none;
  overflow-wrap: anywhere;
}
a.chip { box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .18s ease, background-color .18s ease; }
a.chip:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--navy); }
.chips-mono .chip { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13.5px; }

.dati-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 18px; }
.dati-griglia > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.dati-griglia dt { font-size: 13px; color: var(--text-muted); }
.dati-griglia dd { margin-top: 4px; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }

.scheda-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 36px; }
.scheda-tags-head { margin: 18px 0 0; }
.tag { font-size: 14px; color: var(--text-muted); }

/* Testata: famiglia del bando (per i correlati) accanto a tipo e stato */
.chip-famiglia { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 13px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); }
.chip-famiglia .icon { width: 15px; height: 15px; color: #7a8699; }

/* Avvisi in scheda: nota di edizione (ambra) e regime de minimis (blu) */
.avviso {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 24px; padding: 16px 18px; border-radius: var(--r);
  background: #fff8e8; border: 1px solid #f3d38f; border-left: 4px solid var(--c-ambra);
  font-size: 15.5px; line-height: 1.55; color: #4a3200;
}
.avviso .icon { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; color: #b86e00; }
.avviso strong { display: block; margin-bottom: 2px; color: #3d2900; }
.avviso-info { margin-top: 12px; background: #eef5fc; border-color: #c3d8ee; border-left-color: var(--c-blu); color: var(--text); }
.avviso-info .icon { color: var(--c-blu-logo); }
.avviso-info strong { color: var(--navy); }

/* Timeline: pubblicazione prevista > inizio invio > scadenza */
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 28px; counter-reset: tappa; }
.timeline li { position: relative; padding: 22px 16px 0 0; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--line-strong); box-sizing: border-box; z-index: 1;
}
.timeline li::after { content: ""; position: absolute; left: 14px; right: 0; top: 10px; height: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li.is-nota::before { border-color: var(--c-ambra); background: var(--c-ambra); }
.timeline li.timeline-chiusura.is-nota::before { border-color: var(--c-verde); background: var(--c-verde); }
.timeline-label { display: block; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.timeline-data { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
.timeline li:not(.is-nota) .timeline-data { color: var(--text-muted); font-weight: 500; }

/* Elenchi puntati (maggiorazioni, regole delle spese) */
.elenco-voci { display: grid; gap: 8px; margin-top: 4px; font-size: 16.5px; line-height: 1.55; color: var(--text); }
.elenco-voci li { position: relative; padding-left: 24px; overflow-wrap: anywhere; }
.elenco-voci li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--tipo, var(--navy)); }

/* Codici ATECO in un blocco espandibile */
.ateco { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.ateco summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; font-weight: 600; color: var(--navy); list-style: none; }
.ateco summary::-webkit-details-marker { display: none; }
.ateco summary .icon { width: 18px; height: 18px; color: #7a8699; transition: transform .18s ease; }
.ateco[open] summary { border-bottom: 1px solid var(--line); }
.ateco[open] summary .icon { transform: rotate(180deg); }
.ateco .chips { padding: 14px 16px 16px; }

/* Link ufficiali dentro "Come si presenta la domanda" (riusa .sintesi-link) */
.link-lista { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 4px; }
.scheda-fonte { font-size: 14px; }

/* CTA in chiusura del contenuto */
.scheda-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  padding: 32px; border-radius: var(--r-lg); background: var(--bg-soft); border: 1px solid var(--line);
}
.scheda-cta-title { font-size: 22px; line-height: 1.3; letter-spacing: -.01em; }
.scheda-cta p { margin-top: 8px; color: var(--text-muted); max-width: 48ch; }
.scheda-cta .btn { height: auto; min-height: 56px; padding: 12px 24px; white-space: normal; text-align: left; }

/* Colonna laterale "In sintesi" */
.scheda-side { position: sticky; top: calc(var(--header-h) + 24px); }
.sintesi { position: relative; overflow: hidden; padding: 26px 26px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.sintesi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tipo, var(--navy)); }
.sintesi-title { font-size: 19px; letter-spacing: -.01em; }
.sintesi-dati { margin-top: 14px; border-top: 1px solid var(--line); }
.sintesi-dati > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sintesi-dati dt { color: var(--text-muted); font-size: 14.5px; white-space: nowrap; }
.sintesi-dati dd { font-weight: 600; font-size: 15px; color: var(--text); text-align: right; overflow-wrap: anywhere; }
.sintesi-dati .stato { vertical-align: middle; }
.btn-blocco { width: 100%; margin-top: 20px; }
.sintesi-link { display: grid; gap: 8px; margin-top: 16px; }
.sintesi-link a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r); color: var(--navy); text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.sintesi-link a:hover { border-color: var(--navy); background: var(--bg-soft); }
.sintesi-link .icon { width: 18px; height: 18px; color: #7a8699; }
.sintesi-link span { display: grid; min-width: 0; }
.sintesi-link strong { font-size: 15px; font-weight: 600; }
.sintesi-link small { font-size: 13px; color: var(--text-muted); }
.sintesi-cta { margin-top: 24px; padding-top: 22px; border-top: 1px dashed var(--line-strong); }
.sintesi-cta .btn { margin-top: 0; height: auto; min-height: 52px; padding: 12px 20px; white-space: normal; text-align: left; }
.sintesi-cta p { margin-top: 10px; font-size: 13.5px; color: var(--text-muted); text-align: center; }

/* Bandi correlati e ritorno all'elenco */
.correlati { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--line); }
.correlati .lead .link-arrow { margin-top: 0; }
.correlati .bandi { margin-top: 40px; }
.scheda-torna { margin-top: 56px; }

/* ========================= 12. Perche' Finanzia ========================= */
.section-why { padding-top: 0; }
.why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; padding-top: 104px; border-top: 1px solid var(--line); }
.why-head { position: sticky; top: calc(var(--header-h) + 40px); }

.features { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 40px; }
.feature { position: relative; padding-top: 32px; border-top: 1px solid var(--line); }
.feature::before { content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 3px; background: var(--c); }
.feature h3 { margin-top: 22px; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.feature p { margin-top: 10px; color: var(--text-muted); font-size: 16px; }

/* ============================ 13. CTA finale ============================ */
.section-cta { padding: 24px 0 112px; }
.cta-panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: block;
  padding: 80px 72px; border-radius: var(--r-xl);
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(17, 164, 212, .22), transparent 60%),
    radial-gradient(50% 80% at 85% 100%, rgba(3, 74, 135, .55), transparent 70%),
    var(--navy);
  color: #fff;
}
.cta-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--seg); }
.cta-panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 90%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 90%);
}
.cta-copy { position: relative; max-width: 620px; }
.cta-copy h2 { color: #fff; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.cta-copy > p { margin-top: 18px; font-size: 18.5px; color: rgba(255, 255, 255, .82); max-width: 50ch; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.cta-login { color: rgba(255, 255, 255, .82); font-size: 16px; }
.cta-login a { color: #fff; font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.cta-gear { position: absolute; z-index: -1; right: -70px; top: 50%; width: 480px; height: 480px; transform: translateY(-50%); overflow: visible; }
.cta-gear .gear-rotor.slow { animation-duration: 64s; animation-direction: reverse; }

/* ============================== 14. Footer ============================== */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1.3fr 1fr; gap: 40px; padding: 64px 0 48px; }
.footer-brand img { height: 28px; width: auto; }
.footer-brand p { margin-top: 18px; color: var(--text-muted); font-size: 15px; max-width: 40ch; }
.footer-brand .footer-company { margin-top: 10px; color: var(--text); }
.footer-title { font: 600 13px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.footer-nav ul { display: grid; gap: 10px; margin-top: 16px; }
.footer-nav a, .footer-legal a { color: var(--text); text-decoration: none; font-size: 15px; }
.footer-nav a:hover, .footer-legal a:hover { color: var(--c-blu-logo); text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  padding: 22px 0 26px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-legal a { font-size: 14px; color: var(--text-muted); }
.seg-strip { height: 4px; background: var(--seg); }

/* ===================== 15. Pagina legale (privacy) ====================== */
/* Informativa privacy e note legali: una colonna di testo, misura di lettura. */
.legal { padding: 72px 0 112px; }
.legal-wrap { max-width: 760px; }
.legal-head { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.legal-title { margin-top: 16px; font-size: clamp(32px, 4vw, 46px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.legal-lead { margin-top: 18px; font-size: 18px; color: var(--text-muted); }
.legal-meta { margin-top: 16px; font-size: 14px; color: var(--text-muted); }
.legal-block { padding-top: 44px; }
.legal-h2 { position: relative; padding-top: 14px; font-size: 24px; line-height: 1.25; letter-spacing: -.015em; }
.legal-h2::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 4px; border-radius: 2px; background: var(--seg); }
.legal-h3 { font-size: 17px; margin: 22px 0 8px; }
.legal-block p { margin-top: 12px; }
.legal-block a { color: var(--c-blu-logo); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.legal-list { margin-top: 12px; display: grid; gap: 10px; }
.legal-list li { position: relative; padding-left: 24px; }
.legal-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-blu-logo); }
.legal-block code { font: 500 .92em ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--bg-tint); padding: 1px 6px; border-radius: 4px; }
.legal-nowrap { white-space: nowrap; }
.legal-back { padding-top: 40px; }

/* ===================== 15b. Per chi e': tendina, hub, landing =========== */
/* Menu a tendina "Per chi e'" nell'header (partials/header.blade.php, sito.js).
   Su desktop e' un pannello sotto il pulsante; su mobile (dentro html.js) e senza
   JavaScript l'elenco resta espanso nel menu (vedi 17. Responsive). */
/* Il pannello si posiziona rispetto a .header-inner (allineato al bordo destro del contenitore):
   ancorato al pulsante sforerebbe la finestra sul lato destro */
.header-inner { position: relative; }
.nav-dd { position: static; }
.nav-dd-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 8px 0; background: none; border: 0; cursor: pointer;
  color: var(--text); font: 500 15.5px/1.6 var(--font-body);
}
.nav-dd-toggle .icon { width: 16px; height: 16px; stroke-width: 2.2; transition: transform .2s ease; }
.nav-dd-toggle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--seg); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav-dd-toggle:hover, .nav-dd-toggle[aria-expanded="true"], .nav-dd-toggle[aria-current] { color: var(--navy); }
.nav-dd-toggle:hover::after, .nav-dd-toggle[aria-current]::after, .nav-dd.is-open .nav-dd-toggle::after { transform: scaleX(1); }
.nav-dd.is-open .nav-dd-toggle .icon { transform: rotate(180deg); }
.nav-dd-panel {
  position: absolute; right: 0; top: calc(100% - 2px); z-index: 60;
  display: none; width: min(800px, 100%); padding: 14px 14px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.nav-dd-panel::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 3px; border-radius: 0 0 2px 2px; background: var(--seg); }
.nav-dd.is-open .nav-dd-panel { display: block; animation: drop .18s ease-out; }
/* Senza JavaScript il pannello si apre al passaggio del mouse o con il focus */
html:not(.js) .nav-dd:hover .nav-dd-panel, html:not(.js) .nav-dd:focus-within .nav-dd-panel { display: block; }
.nav-dd-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.nav-links .nav-dd-list a {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: var(--r);
  color: var(--text); text-decoration: none; font-weight: 500;
}
.nav-links .nav-dd-panel a::after { content: none; }
.nav-links .nav-dd-list a:hover, .nav-links .nav-dd-list a[aria-current] { background: var(--bg-soft); }
.nav-dd-ico {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: color-mix(in srgb, var(--c) 12%, #fff);
  color: color-mix(in srgb, var(--c) 82%, #0f1f3d);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, #fff);
}
.nav-dd-ico .icon { width: 20px; height: 20px; }
.nav-dd-text { display: grid; gap: 2px; min-width: 0; }
.nav-dd-text strong { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.nav-dd-text small { font-size: 13px; line-height: 1.35; color: var(--text-muted); }
.nav-links .nav-dd-all {
  display: flex; align-items: center; gap: 8px; width: auto;
  margin: 10px 12px 0; padding: 12px 0 4px; border-top: 1px solid var(--line);
  color: var(--c-blu-logo); font-weight: 600; font-size: 14.5px; text-decoration: none;
}
.nav-dd-all .icon { width: 18px; height: 18px; transition: transform .18s ease; }
.nav-dd-all:hover .icon { transform: translateX(3px); }

/* Etichetta "In arrivo" per tutto quello che non e' ancora in piattaforma */
.badge-arrivo {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  padding: 3px 9px; border-radius: 999px; background: #fff1d6; color: #8a4b00;
  font: 600 11.5px/1.3 var(--font-body); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.badge-arrivo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-ambra); }

/* "FinanzIA": le due lettere dell'IA in evidenza */
.finanzia-ia { white-space: nowrap; }
.finanzia-ia .ia {
  color: var(--c-arancio); font-weight: 700;
  background: linear-gradient(90deg, var(--c-arancio), var(--c-rosso)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Home: i titoli delle card "Per chi e'" portano alle landing */
.persona-link { color: inherit; text-decoration: none; }
.persona-link:hover { color: var(--c-blu-logo); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.personas-tutti { margin-top: 8px; text-align: center; }
.personas-tutti .link-arrow { margin-top: 36px; }

/* Hub: nove card, una per profilo */
.hub { padding: 56px 0 24px; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hub-grid > li { display: grid; }
.hub-card {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; align-content: start;
  padding: 32px 26px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.hub-card::before {
  content: ""; position: absolute; top: -8px; left: 25px; width: 50px; height: 9px;
  background: var(--c); clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); border-radius: 2px 2px 0 0;
}
.hub-card:hover { box-shadow: var(--shadow); border-color: var(--line-strong); transform: translateY(-2px); }
.hub-card h2 { margin-top: 22px; font-size: 21px; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.hub-card p { margin-top: 10px; color: var(--text-muted); font-size: 15.5px; }
.hub-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--c-blu-logo); font-weight: 600; font-size: 15px; }
.hub-more .icon { width: 18px; height: 18px; transition: transform .18s ease; }
.hub-card:hover .hub-more .icon { transform: translateX(3px); }

/* Landing: hero con briciole, testo e cartellino del profilo */
.per-hero { padding: 36px 0 88px; }
.per-hero .briciole { margin-bottom: 40px; }
.per-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 56px; align-items: center; }
.per-hero h1 { font-size: clamp(34px, 3.9vw, 52px); line-height: 1.1; }
.per-nota {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding: 16px 18px;
  border-radius: var(--r); background: #fff8e8; border: 1px solid #f3dfb0; color: var(--text); font-size: 15px; line-height: 1.55;
}
.per-nota .badge-arrivo { flex: none; margin-top: 3px; }
.per-scheda {
  position: relative; padding: 28px 28px 30px;
  background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg);
  animation: rise .7s .15s both cubic-bezier(.2, .7, .2, 1);
}
.per-scheda::before {
  content: ""; position: absolute; top: -8px; left: 27px; width: 50px; height: 9px;
  background: var(--c); clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); border-radius: 2px 2px 0 0;
}
.per-scheda-head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ico-box-lg { width: 60px; height: 60px; border-radius: 16px; }
.ico-box-lg .icon { width: 30px; height: 30px; }
.per-scheda-title { margin-top: 2px; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--navy); }
.per-scheda .ticks { margin-top: 0; padding-top: 16px; border-top: 0; gap: 12px; }
.per-scheda .ticks li { font-size: 15px; }
.ticks .badge-arrivo { margin-left: 6px; }

/* Landing: "cosa ottieni" */
.vantaggi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.vantaggio {
  position: relative; overflow: hidden; padding: 28px 24px 30px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.vantaggio::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.vantaggio-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vantaggio h3 { margin-top: 20px; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
.vantaggio p { margin-top: 10px; color: var(--text-muted); font-size: 15.5px; }
.step-card h3 .badge-arrivo { margin-left: 8px; }

/* Landing: blocco "in arrivo" */
.arrivo-panel {
  position: relative; overflow: hidden; padding: 56px 56px 60px; border-radius: var(--r-xl);
  background: linear-gradient(180deg, #f6f9fd 0%, #fff 100%); border: 1.5px dashed var(--line-strong);
}
.arrivo-panel .section-head { max-width: 680px; }
.arrivo-panel .eyebrow { color: #8a4b00; }
.arrivo-panel .eyebrow::before { background: var(--c-ambra); }
.arrivo-voci { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--line); }
.arrivo-voci h3 { margin-top: 18px; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.arrivo-voci p { margin-top: 8px; color: var(--text-muted); font-size: 15.5px; }

/* Landing: striscia "altri profili" sotto la CTA finale */
.altri-profili { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 40px; }
.altri-profili-label { font-size: 14.5px; font-weight: 500; color: var(--text-muted); }
.altri-profili ul { display: flex; flex-wrap: wrap; gap: 8px; }
a.chip-hub { background: var(--navy); color: #fff; }
a.chip-hub:hover { background: var(--navy-700); color: #fff; box-shadow: none; }

/* Footer: la colonna "Per chi e'" ha il titolo cliccabile (hub) */
.footer-title a { color: inherit; text-decoration: none; }
.footer-title a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ================ 15c. Flusso FinanzIA (partials/flusso-finanzia) ======== */
/* Sei tappe in una griglia 3x2 a serpentina: 1 2 3 da sinistra a destra, poi
   4 5 6 da destra a sinistra. Il circuito e' fatto di pseudo-elementi:
   .tr-linea corre all'altezza dei numeri (--y) e sporge per meta' spazio ai
   lati di ogni card, .tr-gomito scende sul lato destro dalla tappa 3 alla 4,
   .tr-freccia segna il verso in ogni spazio. Su mobile tutto in colonna con
   la dorsale a sinistra (17. Responsive). */
.flusso {
  --gx: 64px; --gy: 72px; --y: 48px;
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gy) var(--gx); margin-top: 64px;
}
.tappa { position: relative; }
.tappa-1 { grid-area: 1 / 1; } .tappa-2 { grid-area: 1 / 2; } .tappa-3 { grid-area: 1 / 3; }
.tappa-4 { grid-area: 2 / 3; } .tappa-5 { grid-area: 2 / 2; } .tappa-6 { grid-area: 2 / 1; }
.tappa-card {
  height: 100%; padding: 26px 26px 28px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.is-arrivo .tappa-card { border: 1.5px dashed var(--line-strong); background: #fcfdff; }
.tappa-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.tappa-n {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--c); color: #fff; font: 600 18px/1 var(--font-display);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px color-mix(in srgb, var(--c) 40%, #fff);
}
.tappa-top .ico-box { width: 44px; height: 44px; border-radius: 12px; }
.tappa-top .badge-arrivo { margin-left: auto; }
.tappa h3 { margin-top: 20px; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
.tappa p { margin-top: 10px; color: var(--text-muted); font-size: 15.5px; }

.tr { position: absolute; z-index: 1; pointer-events: none; }
.tr-linea {
  top: calc(var(--y) - 2px); height: 4px; left: calc(var(--gx) / -2); right: calc(var(--gx) / -2);
  border-radius: 2px; background: color-mix(in srgb, var(--c) 50%, #fff); overflow: hidden;
}
/* Impulso che percorre il circuito (verso destra in alto, verso sinistra in basso) */
.tr-linea::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60px; width: 60px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 80%, #fff), transparent);
  animation: scorri 3.2s linear infinite;
}
.tappa-4 .tr-linea::after, .tappa-5 .tr-linea::after, .tappa-6 .tr-linea::after { animation-direction: reverse; }
.tappa-2 .tr-linea::after { animation-delay: -1.6s; }
.tappa-5 .tr-linea::after { animation-delay: -1.6s; }
.tappa-1 .tr-linea, .tappa-6 .tr-linea { left: var(--y); }
.tappa-3 .tr-linea, .tappa-4 .tr-linea { right: -30px; }
.tr-gomito {
  top: calc(var(--y) - 2px); left: calc(100% + 26px); width: 4px; height: calc(100% + var(--gy) + 4px);
  border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 50%, #fff), color-mix(in srgb, var(--c-arancio) 50%, #fff));
}
.tr-gomito::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border-radius: 50%;
  transform: translate(-50%, -50%); background: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 50%, #fff), var(--shadow-sm);
}
.tr-gomito::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -6px 0 0 -3.5px;
  border: solid var(--navy); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.tr-freccia {
  top: calc(var(--y) - 10px); left: calc(100% + var(--gx) / 2 - 10px); width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 50%, #fff), var(--shadow-sm);
}
.tr-freccia::after {
  content: ""; position: absolute; left: 5px; top: 6px; width: 7px; height: 7px;
  border: solid var(--navy); border-width: 2.5px 2.5px 0 0; transform: rotate(45deg);
}
.tappa-4 .tr-freccia, .tappa-5 .tr-freccia { left: calc(var(--gx) / -2 - 10px); }
.tappa-4 .tr-freccia::after, .tappa-5 .tr-freccia::after { left: 8px; transform: rotate(-135deg); }

/* ===================== 15d. Modulo di contatto (fornitori) ============== */
.contatto-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.contatto-head .ticks { margin-top: 28px; }
.modulo {
  position: relative; overflow: hidden; padding: 32px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.modulo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--seg); }
.campi { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.campo { display: grid; gap: 6px; min-width: 0; align-content: start; }
.campo-largo { grid-column: 1 / -1; }
.campo label { font-size: 14px; font-weight: 600; color: var(--navy); }
.campo input, .campo textarea {
  width: 100%; height: 48px; padding: 0 14px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: #fff;
  font: 500 15.5px/1.4 var(--font-body); color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.campo textarea { height: auto; min-height: 130px; padding: 12px 14px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--c-blu); box-shadow: 0 0 0 3px rgba(12, 121, 186, .18); }
.campo [aria-invalid="true"] { border-color: var(--c-rosso); }
.campo-errore { font-size: 13.5px; font-weight: 500; color: var(--c-rosso); }
.req { color: var(--c-rosso); }
/* Campo esca: fuori schermo, non nel flusso del tab */
.campo-esca { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.campo .consenso { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; font-weight: 400; line-height: 1.5; color: var(--text); cursor: pointer; }
.consenso input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--navy); }
.consenso a { color: var(--c-blu-logo); text-underline-offset: 3px; }
.campo-consenso { margin-top: 4px; }
.modulo-azioni { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 26px; }
.modulo-nota { font-size: 13.5px; color: var(--text-muted); }
.modulo-esito { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; padding: 16px 18px; border-radius: var(--r); }
.modulo-esito .icon { width: 22px; height: 22px; flex: none; stroke-width: 2.4; margin-top: 1px; }
.modulo-esito strong { display: block; font-size: 16px; }
.modulo-esito p { margin-top: 2px; font-size: 15px; }
.modulo-ok { background: #e3f4ea; color: #0f5a30; }
.modulo-ko { background: #fdeceb; color: #8a1d14; }

/* ============================ 16. Animazioni ============================ */
/* L'ingranaggio avanza di un dente alla volta (45 gradi): uno scatto per ogni nuovo abbinamento */
@keyframes tick {
  0%, 9.5% { transform: rotate(0deg); }
  12.5%, 22% { transform: rotate(45deg); }
  25%, 34.5% { transform: rotate(90deg); }
  37.5%, 47% { transform: rotate(135deg); }
  50%, 59.5% { transform: rotate(180deg); }
  62.5%, 72% { transform: rotate(225deg); }
  75%, 84.5% { transform: rotate(270deg); }
  87.5%, 97% { transform: rotate(315deg); }
  100% { transform: rotate(360deg); }
}
@keyframes flow { 0% { stroke-dashoffset: 100; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Impulso lungo il circuito del flusso FinanzIA */
@keyframes scorri { from { left: -60px; } to { left: 100%; } }

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

/* ============================ 17. Responsive ============================ */
@media (max-width: 1100px) {
  .nav-links { gap: 24px; }
  .main-nav { gap: 24px; }
  .personas { grid-template-columns: repeat(2, 1fr); }
  .cta-panel { padding: 64px 56px; }
  .cta-copy { max-width: 540px; }
  .cta-gear { width: 380px; height: 380px; right: -120px; }
}

@media (max-width: 960px) {
  :root { --header-h: 68px; }
  /* Il menu a tendina vale solo con JavaScript attivo (html.js): senza, resta un elenco visibile */
  .menu-toggle { display: none; }
  .js .menu-toggle { display: grid; }
  .main-nav { flex-wrap: wrap; gap: 8px 20px; }
  .js .main-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 24px;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(15, 31, 61, .25);
    display: none;
    /* Il menu puo' essere piu' alto dello schermo (nove voci "Per chi e'"): scorre dentro il pannello */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .js .main-nav.is-open { display: flex; animation: drop .2s ease-out; }
  .js .nav-links { flex-direction: column; gap: 0; }
  .js .nav-links a { display: flex; padding: 16px 2px; font-size: 17px; border-bottom: 1px solid var(--line); }
  .js .nav-links a::after { display: none; }
  .js .nav-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
  .js .nav-actions .btn { height: 50px; font-size: 16px; }
  .js .nav-actions .btn-ghost { border-color: var(--line-strong); }
  .js .nav-actions .nav-area { grid-column: 1 / -1; }
  html:not(.js) .header-inner { height: auto; min-height: var(--header-h); flex-wrap: wrap; padding: 12px 0; }

  .hero { padding: 48px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { margin: 0 auto; max-width: 520px; }
  .section { padding: 80px 0; }
  .section-head.split { grid-template-columns: 1fr; gap: 0; }
  .section-head.split .lead { margin-top: 16px; justify-self: start; }
  .steps { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
  .steps::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 0; height: auto; border-top: 0; border-left: 2px dashed var(--line-strong); }
  .step { flex-direction: row; align-items: flex-start; gap: 20px; }
  .step-node { box-shadow: 0 0 0 6px #fff; }
  .step-card { margin-top: 0; }
  .bandi { grid-template-columns: 1fr; max-width: 620px; }
  .catalogo .bandi, .correlati .bandi { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .filtri { grid-template-columns: 1fr 1fr; }
  .filtro-q { grid-column: 1 / -1; }
  .filtro-azioni { grid-column: 1 / -1; justify-content: space-between; }
  .filtro-azioni .btn { flex: 1 1 auto; }
  .scheda-grid { grid-template-columns: 1fr; gap: 40px; }
  .scheda-side { position: static; }
  .section-why { padding-top: 0; }
  .why-grid { grid-template-columns: 1fr; gap: 48px; padding-top: 72px; }
  .why-head { position: static; }
  .section-cta { padding-bottom: 80px; }
  .cta-panel { padding: 56px 40px 200px; }
  .cta-gear { width: 340px; height: 340px; top: auto; bottom: -170px; right: 50%; transform: translateX(50%); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .legal { padding: 56px 0 80px; }
}

@media (max-width: 600px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .brand img { height: 26px; }
  .hero { padding: 36px 0 64px; }
  .hero h1 { font-size: 37px; line-height: 1.1; margin-top: 18px; }
  .hero-lead { font-size: 17px; margin-top: 18px; }
  .hero .eyebrow { display: grid; gap: 12px; letter-spacing: .1em; }
  .hero-cta { flex-direction: column; margin-top: 28px; }
  .hero-visual { aspect-ratio: 1 / 1.08; }
  .gear { left: 12%; top: 8%; width: 76%; height: auto; aspect-ratio: 1; }
  .hv-card { padding: 10px 12px; font-size: 12px; border-radius: 12px; }
  .hv-head { gap: 8px; padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
  .hv-ico { width: 30px; height: 30px; border-radius: 8px; }
  .hv-ico .icon { width: 17px; height: 17px; }
  .hv-profile { top: 0; left: 0; width: auto; }
  .hv-profile .hv-fields { display: none; }
  .hv-alert { width: 58%; right: 0; bottom: 0; }
  .hv-alert .hv-head { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
  .hv-alert .sk { display: none; }
  .hv-tags { gap: 6px; margin-bottom: 0; }
  .hv-ok { margin-top: 8px; padding-top: 8px; gap: 5px; font-size: 11.5px; }
  .hv-pill { left: 0; bottom: 20%; padding: 7px 12px; gap: 7px; font-size: 12px; }
  .hero-cta .btn { width: 100%; }
  .hero-points { flex-direction: column; gap: 10px; margin-top: 28px; padding-top: 22px; }
  .section { padding: 64px 0; }
  .section-head h2 { font-size: 30px; }
  .section-head .lead { font-size: 17px; }
  .personas { grid-template-columns: 1fr; margin-top: 40px; }
  .step-card { padding: 24px 22px 26px; }
  .steps::before { left: 21px; }
  .step { gap: 14px; }
  .step-node { width: 44px; height: 44px; font-size: 17px; }
  .bandi-bar { align-items: flex-start; flex-direction: column; }
  .bando { padding: 22px 20px 22px 26px; }
  .bandi-empty { padding: 40px 20px; }
  .empty-actions .btn { width: 100%; }
  .catalogo-head { padding: 28px 0 32px; }
  .catalogo-head h1 { font-size: 30px; }
  .catalogo-head .lead { font-size: 17px; }
  .catalogo { padding: 28px 0 64px; }
  .catalogo .bandi, .correlati .bandi { grid-template-columns: 1fr; }
  .tab { padding: 12px 12px; font-size: 15px; }
  .filtri { grid-template-columns: 1fr; padding: 16px; gap: 12px; }
  .risultati-bar .legend { display: none; }
  .paginazione { gap: 12px; }
  .pag-btn span { display: none; }
  .pag-btn { width: 44px; padding: 0; justify-content: center; }
  .regioni-sez { padding: 56px 0; }
  .regioni-lista { grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .regioni-lista a { padding: 11px 12px; font-size: 14px; }
  .scheda { padding: 28px 0 64px; }
  .scheda-head h1 { font-size: 28px; }
  .scheda-h2 { font-size: 22px; }
  .testo-lungo { font-size: 16px; }
  .scheda-cta { padding: 24px 20px; }
  .scheda-cta .btn { width: 100%; }
  .sintesi { padding: 20px 18px 22px; }
  .dati-griglia { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 14px; }
  .timeline li { padding: 0 0 0 26px; }
  .timeline li::before { top: 4px; }
  .timeline li::after { left: 6px; right: auto; top: 18px; bottom: -14px; width: 2px; height: auto; }
  .link-lista { grid-template-columns: 1fr; }
  .correlati { margin-top: 56px; padding-top: 40px; }
  .features { grid-template-columns: 1fr; gap: 36px; }
  .cta-panel { padding: 44px 24px 170px; border-radius: 22px; }
  .cta-gear { width: 300px; height: 300px; bottom: -160px; }
  .cta-copy > p { font-size: 17px; }
  .cta-actions .btn { width: 100%; }
  .footer-grid { padding: 48px 0 32px; gap: 32px; }
  .legal-h2 { font-size: 22px; }
}
/* ================== 17b. Responsive: Per chi e', flusso, modulo ========== */
@media (max-width: 1100px) {
  .vantaggi { grid-template-columns: repeat(2, 1fr); }
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .arrivo-panel { padding: 48px 40px; }
}

@media (max-width: 960px) {
  /* Tendina "Per chi e'": nel menu mobile (e senza JavaScript) l'elenco e' sempre espanso */
  .js .nav-dd-toggle, html:not(.js) .nav-dd-toggle {
    display: flex; width: 100%; justify-content: space-between; padding: 16px 2px; font-size: 17px; cursor: default;
    border-bottom: 1px solid var(--line);
  }
  .js .nav-dd-toggle .icon, html:not(.js) .nav-dd-toggle .icon { display: none; }
  .js .nav-dd-toggle::after, html:not(.js) .nav-dd-toggle::after { content: none; }
  .js .nav-dd-panel, html:not(.js) .nav-dd-panel {
    position: static; display: block; width: auto; padding: 4px 0 8px 8px; animation: none;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
  }
  .nav-dd-panel::before { content: none; }
  .nav-dd-list { grid-template-columns: 1fr; gap: 0; }
  .js .nav-links .nav-dd-list a, html:not(.js) .nav-links .nav-dd-list a { padding: 9px 6px; font-size: 15.5px; border-bottom: 0; }
  .nav-links .nav-dd-all { margin: 6px 6px 0; padding: 12px 0 6px; }

  .per-hero { padding: 28px 0 64px; }
  .per-hero .briciole { margin-bottom: 28px; }
  .per-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .per-scheda { max-width: 560px; }
  .hub { padding: 40px 0 8px; }
  .arrivo-voci { grid-template-columns: 1fr; gap: 28px; }
  .contatto-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Flusso FinanzIA in colonna, con la dorsale a sinistra che attraversa i numeri */
  .flusso { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
  .tappa-1, .tappa-2, .tappa-3, .tappa-4, .tappa-5, .tappa-6 { grid-area: auto; }
  .tappa { padding-left: 66px; }
  /* Dorsale: da ogni numero al successivo (l'ultima tappa non la disegna) */
  .tappa:not(:last-child)::before { content: ""; position: absolute; left: 20.5px; top: 46px; bottom: -20px; width: 0; border-left: 3px dashed var(--line-strong); }
  .tappa-top { position: static; }
  .tappa-n { position: absolute; left: 0; top: 24px; }
  .tr { display: none; }
}

@media (max-width: 600px) {
  .per-hero h1 { font-size: 31px; line-height: 1.12; }
  .per-nota { font-size: 14.5px; padding: 14px; flex-direction: column; gap: 8px; }
  .per-scheda { padding: 20px 18px 22px; }
  .hub-grid { grid-template-columns: 1fr; }
  .hub-card { padding: 26px 22px 24px; }
  .vantaggi { grid-template-columns: 1fr; margin-top: 40px; }
  .arrivo-panel { padding: 32px 20px 36px; border-radius: 22px; }
  .arrivo-voci { margin-top: 32px; padding-top: 28px; }
  .altri-profili { margin-top: 32px; }
  .campi { grid-template-columns: 1fr; gap: 16px; }
  .modulo { padding: 24px 18px; }
  .modulo-azioni .btn { width: 100%; }
  .tappa { padding-left: 56px; }
  .tappa-card { padding: 22px 20px 24px; }
  .tappa-top { flex-wrap: wrap; }
  .tappa-top .badge-arrivo { margin-left: 0; }
  .tappa-n { top: 22px; }
  .tappa:not(:last-child)::before { top: 44px; }
}

/* ============================== 11d. Blog =============================== */
/* Colori delle categorie, campionati dal logo (chiavi di App\Models\Articolo::CATEGORIE) */
.cat-guide        { --cat: var(--c-blu); }
.cat-agevolazioni { --cat: var(--c-verde); }
.cat-startup      { --cat: var(--c-arancio); }
.cat-regioni      { --cat: #16a3a0; }
.cat-adempimenti  { --cat: #4a3a8f; }
.cat-novita       { --cat: #b86e00; }

/* Chip della categoria (card, intestazione dell'articolo) */
.cat {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--cat, var(--navy)); background: color-mix(in srgb, var(--cat, var(--navy)) 10%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat, var(--navy)) 22%, #fff);
  transition: background-color .18s ease, color .18s ease;
}
.cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cat, var(--navy)); }
a.cat:hover { background: var(--cat, var(--navy)); color: #fff; }
a.cat:hover::before { background: #fff; }

/* Filtro per categoria in cima all'elenco */
.blog-cat { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.blog-cat ul { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-cat-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--navy); font-size: 14.5px; font-weight: 500; text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.blog-cat-link:hover { border-color: var(--cat, var(--navy)); }
.blog-cat-link.is-active { background: var(--cat, var(--navy)); border-color: var(--cat, var(--navy)); color: #fff; }
.blog-cat-link.is-active .tab-count { background: rgba(255, 255, 255, .22); color: #fff; }
.blog-conteggio { margin-top: 28px; }

/* Griglia delle card (elenco, correlati, "Dal blog" in home) */
.articoli { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.articoli > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.post-card {
  position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
  padding: 28px 26px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.post-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--cat, var(--navy)); }
.post-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.post-lettura { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-muted); white-space: nowrap; }
.post-lettura .icon { width: 16px; height: 16px; }
.post-card h3 { margin-top: 18px; font-size: 20px; line-height: 1.32; letter-spacing: -.01em; overflow-wrap: anywhere; }
.post-link { color: inherit; text-decoration: none; }
.post-link:hover { color: var(--c-blu-logo); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.post-estratto {
  margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; align-self: end;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-muted);
}
.post-card-foot .link-arrow { margin-top: 0; font-size: 15px; }
.section-soft .post-card { box-shadow: var(--shadow-sm); }
#blog .articoli { margin-top: 48px; }

/* Pagina dell'articolo (riusa scheda, scheda-head, scheda-grid, sintesi) */
.post-anteprima { margin-bottom: 24px; padding: 14px 18px; border-radius: var(--r); background: #fff1d6; color: #8a4b00; font-size: 15px; }
.post-head h1 { max-width: 34ch; }
.post-sub { margin-top: 16px; font-size: 20px; line-height: 1.5; color: var(--text-muted); max-width: 60ch; }
.post-meta time { color: inherit; }
.post-figura { margin: 0 0 24px; }
.post-figura img { width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line); }
.post-corpo { font-size: 17.5px; line-height: 1.75; color: var(--text); overflow-wrap: anywhere; }
.post-corpo > * + * { margin-top: 18px; }
.post-corpo h2 { position: relative; margin-top: 44px; padding-top: 14px; font-size: 26px; line-height: 1.25; letter-spacing: -.015em; }
.post-corpo h2::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 4px; border-radius: 2px; background: var(--seg); }
.post-corpo h2:first-child { margin-top: 0; }
.post-corpo h3 { margin-top: 32px; font-size: 20px; line-height: 1.3; }
.post-corpo ul, .post-corpo ol { padding-left: 26px; display: grid; gap: 8px; }
.post-corpo ul { list-style: disc; }
.post-corpo ol { list-style: decimal; }
.post-corpo li::marker { color: var(--c-blu-logo); font-weight: 600; }
.post-corpo blockquote {
  margin: 24px 0; padding: 18px 24px; border-left: 4px solid var(--c-ambra); background: var(--bg-soft);
  border-radius: 0 var(--r) var(--r) 0; font-size: 18px; color: var(--navy);
}
.post-corpo blockquote > * + * { margin-top: 10px; }
.post-corpo a { color: var(--c-blu-logo); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-corpo a:hover { text-decoration-thickness: 2px; }
.post-corpo strong { color: var(--navy); }
.post .scheda-tags { margin-top: 36px; }
.post-cta { margin-top: 40px; }
.post-cta-azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.post-cta .btn { height: 52px; min-height: 0; padding: 0 22px; white-space: nowrap; }
.post-side .sintesi::before { background: var(--cat, var(--navy)); }
.post-side .sintesi-dati a { color: var(--navy); }
.correlati .articoli { margin-top: 40px; }

@media (max-width: 960px) {
  .articoli { grid-template-columns: repeat(2, 1fr); }
  .post-head h1 { max-width: none; }
}

@media (max-width: 600px) {
  .articoli { grid-template-columns: 1fr; }
  .post-card { padding: 24px 20px 18px; }
  .post-sub { font-size: 18px; }
  .post-corpo { font-size: 16.5px; }
  .post-corpo h2 { font-size: 23px; margin-top: 36px; }
  .post-cta-azioni { width: 100%; }
  .post-cta-azioni .btn { width: 100%; }
  .blog-cat-link { padding: 8px 12px; font-size: 14px; }
}