@font-face{font-family:"Sora";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/sora-latin-300-normal.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:"Sora";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/sora-latin-400-normal.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:"Sora";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/sora-latin-500-normal.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:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/sora-latin-600-normal.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:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-400-normal.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:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-500-normal.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:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-600-normal.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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400-normal.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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500-normal.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:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-600-normal.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}

/* Layout: colonna unica a bande. Blu notte del marchio come mondo "strumento", una sola banda chiara
   (carta) per il fascicolo e il contatto. L'arancio del marchio è il segnale: solo azioni ed esiti. */
:root {
  --ink-0: #050E26;      /* fondo profondo */
  --ink-1: #0A1A3F;      /* superfici */
  --ink-2: #13296099;    /* pannelli traslucidi */
  --brand: #264593;      /* blu del marchio */
  --signal: #F68644;     /* arancio del marchio */
  --signal-ink: #2A1203;
  --mist: #B9C6E6;       /* testo secondario su scuro */
  --snow: #F3F6FD;       /* testo primario su scuro */
  --rule: rgba(185, 198, 230, .16);
  --ok: #57D3A8;
  --warn: #FFB25E;
  --paper: #EEF2FA;
  --paper-2: #FFFFFF;
  --paper-ink: #0C1C45;
  --paper-mute: #4A5A80;
  --paper-rule: #D3DCEE;

  --display: "Sora", "Poppins", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1180px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-0);
  color: var(--snow);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--ink-0);
}
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.wrap {
  width: 100%; max-width: calc(var(--wrap) + 64px); margin-inline: auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.2vw, 54px); }
h3 { font-size: 21px; letter-spacing: -.012em; line-height: 1.25; }
p { margin: 0; }
.lead { font-size: clamp(18px, 1.5vw, 20px); color: var(--mist); max-width: 60ch; }
.kicker { font-family: var(--display); font-size: 15px; font-weight: 500; color: var(--signal); letter-spacing: 0; }

/* ---------------------------------------------------------------- bottoni */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  font: 600 16px/1 var(--display); letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn-signal { background: var(--signal); color: var(--signal-ink); box-shadow: 0 10px 40px -12px rgba(246, 134, 68, .7); }
.btn-signal:hover { background: #FF9A5E; transform: translateY(-1px); }
.btn-line { background: transparent; color: var(--snow); box-shadow: inset 0 0 0 1.5px rgba(185, 198, 230, .38); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--snow); }

/* ---------------------------------------------------------------- testata */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(5, 14, 38, .72); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
.top.scrolled { border-bottom-color: var(--rule); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.brand img { height: 38px; width: auto; display: block; }
.menu { display: flex; align-items: center; gap: 30px; }
.menu a { text-decoration: none; color: var(--mist); font-size: 15px; font-weight: 500; transition: color .2s; }
.menu a:hover { color: var(--snow); }
.menu .btn { min-height: 44px; padding: 0 20px; font-size: 15px; color: var(--signal-ink); }
.menu-toggle { display: none; background: none; border: 0; color: var(--snow); padding: 10px; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; border-radius: 2px; transition: transform .25s, opacity .25s; }

/* ---------------------------------------------------------------- apertura */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero canvas.flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 40%, rgba(38, 69, 147, .55), transparent 70%),
    radial-gradient(40% 50% at 10% 100%, rgba(246, 134, 68, .10), transparent 70%);
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; padding-block: 72px 96px; }
.hero h1 { font-size: clamp(42px, 5.6vw, 78px); letter-spacing: -.035em; line-height: 1.02; }
.hero h1 .l2 { display: block; color: var(--mist); font-weight: 300; }
.hero .lead { margin-top: 28px; }
.hero .azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero .nota { margin-top: 30px; font-size: 14px; color: var(--mist); display: flex; gap: 10px; align-items: center; }
.hero .nota::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(87, 211, 168, .18); flex: none; }

/* il fascicolo che si compone */
.dossier {
  position: relative; border-radius: 22px; padding: 26px;
  background: linear-gradient(160deg, rgba(25, 52, 118, .78), rgba(10, 26, 63, .92));
  border: 1px solid rgba(185, 198, 230, .22);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  font-size: 14.5px;
}
.dossier .d-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.dossier .d-num { font-family: var(--data); font-size: 12.5px; color: var(--mist); }
.dossier .d-az { font-family: var(--display); font-weight: 600; font-size: 19px; margin-top: 4px; letter-spacing: -.01em; }
.dossier .d-req { color: var(--mist); margin-top: 2px; }
.ring { width: 64px; height: 64px; flex: none; position: relative; }
.ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring .bg { stroke: rgba(185, 198, 230, .15); }
.ring .fg { stroke: var(--signal); stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; transition: stroke-dashoffset .6s ease; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px var(--data); }
.d-sez { margin-top: 16px; }
.d-sez h4 { margin: 0 0 8px; font: 500 12.5px var(--body); color: var(--mist); letter-spacing: .02em; }
.d-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.d-row .st { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid rgba(185, 198, 230, .35); position: relative; transition: all .35s ease; }
.d-row .st::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--ink-0); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s ease .1s; }
.d-row.done .st { background: var(--ok); border-color: var(--ok); }
.d-row.done .st::after { transform: rotate(45deg) scale(1); }
.d-row.busy .st { border-color: var(--signal); border-top-color: transparent; animation: gira .8s linear infinite; }
.d-row .lb { flex: 1; min-width: 0; }
.d-row .tg { font-family: var(--data); font-size: 12px; color: var(--mist); white-space: nowrap; opacity: .35; transition: opacity .3s; }
.d-row.done .tg, .d-row.busy .tg { opacity: 1; }
.d-fonte { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(5, 14, 38, .55); border: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; }
.d-fonte .k { color: var(--mist); font-size: 13px; }
.d-fonte .v { font: 600 17px var(--data); text-align: right; }
.d-fonte .src { grid-column: 1 / -1; font-size: 12.5px; color: var(--mist); display: flex; gap: 6px; align-items: center; }
.d-fonte .src i { font-style: normal; color: var(--signal); }
.d-esito { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--rule); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font: 600 13.5px var(--display); background: rgba(185, 198, 230, .1); color: var(--mist); transition: all .4s ease; }
.pill.ready { background: var(--signal); color: var(--signal-ink); }
.d-esito small { font-size: 12.5px; color: var(--mist); }
.d-esempio { position: absolute; top: -12px; right: 22px; font-size: 11.5px; background: var(--ink-0); color: var(--mist); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--rule); }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- numeri storici */
.storia { border-block: 1px solid var(--rule); background: rgba(10, 26, 63, .55); }
.storia .wrap { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; padding-block: 40px; align-items: center; }
.storia p.intro { color: var(--mist); font-size: 15px; max-width: 34ch; }
.storia .n b { display: block; font: 600 clamp(30px, 3vw, 42px)/1 var(--display); letter-spacing: -.03em; color: var(--snow); font-variant-numeric: tabular-nums; }
.storia .n span { display: block; margin-top: 8px; color: var(--mist); font-size: 14.5px; line-height: 1.4; }

/* ---------------------------------------------------------------- sezioni scure */
.sez { padding-block: clamp(80px, 11vw, 140px); position: relative; }
.sez-head { display: grid; gap: 20px; max-width: 780px; margin-bottom: 56px; }

/* oggi / con innovacredit */
.confronto { border: 1px solid var(--rule); border-radius: 20px; overflow: hidden; }
.cf-row { display: grid; grid-template-columns: 200px 1fr 1fr; border-top: 1px solid var(--rule); }
.cf-row:first-child { border-top: 0; }
.cf-row > div { padding: 22px 26px; min-width: 0; }
.cf-row .tema { font-family: var(--display); font-weight: 600; font-size: 16px; }
.cf-row .oggi { color: var(--mist); border-left: 1px solid var(--rule); }
.cf-row .poi { border-left: 1px solid var(--rule); background: linear-gradient(90deg, rgba(38, 69, 147, .32), rgba(38, 69, 147, .12)); }
.cf-head > div { padding-block: 16px; font: 600 14px var(--display); color: var(--mist); }
.cf-head .poi { color: var(--signal); }

/* ---------------------------------------------------------------- banda carta */
.carta { background: var(--paper); color: var(--paper-ink); }
.carta .lead { color: var(--paper-mute); }
.carta .kicker { color: #C65A1C; }
.processo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.processo .sticky { position: sticky; top: 120px; display: grid; gap: 22px; }
.passi { list-style: none; margin: 0; padding: 0; counter-reset: p; display: grid; }
.passi li { counter-increment: p; display: grid; grid-template-columns: 64px 1fr; gap: 0 18px; padding: 30px 0; border-top: 1px solid var(--paper-rule); }
.passi li:last-child { border-bottom: 1px solid var(--paper-rule); }
.passi li::before { content: counter(p, decimal-leading-zero); font: 500 15px var(--data); color: #C65A1C; padding-top: 4px; }
.passi h3 { color: var(--paper-ink); }
.passi p { color: var(--paper-mute); margin-top: 8px; max-width: 58ch; }
.passi .banca { margin-top: 14px; display: inline-flex; gap: 8px; align-items: baseline; font-size: 14.5px; color: var(--paper-ink); background: var(--paper-2); border: 1px solid var(--paper-rule); border-radius: 10px; padding: 8px 12px; }
.passi .banca b { font-family: var(--display); font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- cockpit */
.cockpit { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; border-radius: 24px; overflow: hidden; border: 1px solid rgba(185, 198, 230, .22); background: var(--ink-1); box-shadow: 0 50px 120px -50px rgba(0, 0, 0, .9); }
.ck-sx { padding: 32px; border-right: 1px solid var(--rule); background: rgba(5, 14, 38, .5); display: grid; gap: 26px; align-content: start; }
.ck-dx { padding: 32px; display: grid; gap: 22px; align-content: start; }
.ck-tit { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ck-tit b { font: 600 18px var(--display); }
.ck-tit span { font-size: 12.5px; color: var(--mist); }
.campo label { display: flex; justify-content: space-between; font-size: 14px; color: var(--mist); margin-bottom: 10px; }
.campo label output { font: 600 22px var(--data); color: var(--snow); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--signal) var(--p, 30%), rgba(185, 198, 230, .2) var(--p, 30%)); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--snow); border: 5px solid var(--signal); cursor: grab; box-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--snow); border: 5px solid var(--signal); cursor: grab; }
input[type=range]:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; }
.seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.seg button { font: 500 14px var(--data); padding: 10px 0; border-radius: 10px; border: 1px solid var(--rule); background: transparent; color: var(--mist); cursor: pointer; transition: all .2s; }
.seg button[aria-pressed="true"] { background: var(--snow); color: var(--ink-0); border-color: var(--snow); }
.ck-dati { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.ck-dati div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.ck-dati div span { color: var(--mist); }
.ck-dati div b { font: 500 14px var(--data); text-align: right; }
.ck-dati div b small { display: block; font: 400 11.5px var(--body); color: var(--signal); }
.ind { display: grid; gap: 10px; }
.ind-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ind-top span { color: var(--mist); font-size: 14px; }
.ind-top b { font: 600 30px/1 var(--data); font-variant-numeric: tabular-nums; transition: color .3s; }
.ind-top b.ko { color: var(--warn); }
.barra { position: relative; height: 10px; border-radius: 10px; background: rgba(185, 198, 230, .12); }
.barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; background: var(--ok); transition: width .35s ease, background-color .3s; }
.barra i.ko { background: var(--warn); }
.barra em { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--snow); }
.barra em::after { content: attr(data-l); position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font: 400 11.5px var(--body); color: var(--mist); white-space: nowrap; font-style: normal; }
.ind .rata { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-block: 1px solid var(--rule); }
.ind .rata span { color: var(--mist); font-size: 14px; }
.ind .rata b { font: 600 24px var(--data); }
.ck-esito { border-radius: 16px; padding: 18px 20px; display: grid; gap: 6px; background: rgba(87, 211, 168, .1); border: 1px solid rgba(87, 211, 168, .35); transition: all .3s; margin-top: 10px; }
.ck-esito b { font: 600 17px var(--display); color: var(--ok); }
.ck-esito p { font-size: 14.5px; color: var(--mist); }
.ck-esito.ko { background: rgba(255, 178, 94, .1); border-color: rgba(255, 178, 94, .4); }
.ck-esito.ko b { color: var(--warn); }
.ck-esito button { justify-self: start; margin-top: 6px; background: none; border: 0; padding: 0; color: var(--snow); font: 600 14.5px var(--display); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ck-nota { font-size: 13px; color: var(--mist); margin-top: 18px; max-width: 80ch; }
.ck-privati { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mist); }
.ck-privati::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--mist); -webkit-mask: var(--lucchetto) center / contain no-repeat; mask: var(--lucchetto) center / contain no-repeat; }
:root { --lucchetto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- filiale */
.filiale { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: center; }
.canali { display: grid; gap: 0; margin-top: 40px; border-top: 1px solid var(--rule); }
.canale { display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.canale .ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(38, 69, 147, .45); border: 1px solid var(--rule); }
.canale .ico svg { width: 24px; height: 24px; stroke: var(--snow); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.canale h3 { font-size: 18px; }
.canale p { color: var(--mist); font-size: 15px; margin-top: 4px; }
.canale .qr { width: 64px; height: 64px; background: #fff; border-radius: 8px; padding: 5px; }
.canale .qr svg, .canale .qr img { width: 100%; height: 100%; display: block; }
.telefono { justify-self: center; width: 300px; max-width: 100%; aspect-ratio: 300 / 610; border-radius: 46px; padding: 12px; background: linear-gradient(150deg, #2C3B63, #0D1A3B); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.schermo { height: 100%; border-radius: 36px; background: #F6F8FC; color: #13214A; overflow: hidden; display: flex; flex-direction: column; font-size: 13.5px; }
.sc-top { background: #1B6B5A; color: #fff; padding: 34px 20px 18px; }
.sc-top .bk { display: flex; align-items: center; gap: 8px; font: 600 14px var(--display); }
.sc-top .bk i { width: 22px; height: 22px; border-radius: 6px; background: #fff; opacity: .9; display: block; }
.sc-top h5 { margin: 14px 0 2px; font: 600 18px/1.2 var(--display); }
.sc-top p { opacity: .85; font-size: 12.5px; }
.sc-body { padding: 16px; display: grid; gap: 8px; }
.sc-item { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 11px 12px; border: 1px solid #E0E6F1; }
.sc-item .c { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #E6F6EF; color: #14936A; font-size: 12px; font-weight: 700; }
.sc-item .c.todo { background: #FFF1E6; color: #C65A1C; }
.sc-item span { flex: 1; }
.sc-item small { color: #6A789C; font-size: 11.5px; }
.sc-btn { margin: 6px 16px 0; background: #1B6B5A; color: #fff; border-radius: 12px; text-align: center; padding: 13px; font: 600 14px var(--display); }
.sc-nota { text-align: center; font-size: 11px; color: #6A789C; margin-top: 10px; padding: 0 16px; }

/* ---------------------------------------------------------------- controllo */
.principio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.principio h2 { font-size: clamp(40px, 5.4vw, 72px); letter-spacing: -.035em; }
.regole { display: grid; gap: 0; }
.regola { padding: 24px 0; border-top: 1px solid var(--rule); display: grid; gap: 6px; }
.regola:last-child { border-bottom: 1px solid var(--rule); }
.regola p { color: var(--mist); max-width: 56ch; }
.profilo { margin-top: 96px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.voci { border-radius: 20px; border: 1px solid rgba(185, 198, 230, .22); background: var(--ink-1); overflow: hidden; }
.voci-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--rule); }
.voci-h b { font: 600 16px var(--display); }
.voce { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 16px 22px; border-bottom: 1px solid var(--rule); align-items: center; }
.voce:last-child { border-bottom: 0; }
.voce .t { font-size: 15px; }
.voce .m { grid-column: 1; font-size: 12.5px; color: var(--mist); }
.voce .tipo { grid-row: 1 / 3; grid-column: 2; font: 500 12px var(--body); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.tipo.reg { background: rgba(185, 198, 230, .14); color: var(--snow); }
.tipo.oss { background: rgba(87, 211, 168, .14); color: var(--ok); }
.tipo.ipo { background: rgba(255, 178, 94, .12); color: var(--warn); }
.voci-f { padding: 14px 22px; font-size: 12.5px; color: var(--mist); background: rgba(5, 14, 38, .5); }
.kpi { margin-top: 30px; padding: 22px 24px; border-radius: 16px; border: 1px dashed rgba(246, 134, 68, .5); }
.kpi b { display: block; font: 600 17px var(--display); color: var(--signal); }
.kpi p { color: var(--mist); font-size: 15px; margin-top: 6px; }

/* ---------------------------------------------------------------- economia */
.economia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.economia > div { padding: 32px 32px 32px 0; display: grid; gap: 10px; align-content: start; }
.economia > div + div { padding-left: 32px; border-left: 1px solid var(--rule); }
.economia .big { font: 600 clamp(28px, 2.6vw, 36px)/1.1 var(--display); letter-spacing: -.025em; }
.economia p { color: var(--mist); }

/* ---------------------------------------------------------------- contatti */
.contatti { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.contatti h2 { color: var(--paper-ink); }
.attese { margin-top: 36px; display: grid; gap: 0; }
.attese div { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--paper-rule); }
.attese div:last-child { border-bottom: 1px solid var(--paper-rule); }
.attese b { font: 500 14px var(--data); color: #C65A1C; padding-top: 2px; }
.attese p { color: var(--paper-mute); }
.attese p strong { color: var(--paper-ink); font-weight: 600; }
form.modulo { background: var(--paper-2); border-radius: 24px; padding: 36px; border: 1px solid var(--paper-rule); box-shadow: 0 40px 80px -50px rgba(12, 28, 69, .45); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; color: var(--paper-ink); }
.modulo .full { grid-column: 1 / -1; }
.modulo label { display: grid; gap: 7px; font-size: 14px; font-weight: 500; color: var(--paper-ink); }
.modulo label .opz { font-weight: 400; color: var(--paper-mute); }
.modulo input, .modulo textarea {
  width: 100%; font: 400 16px var(--body); color: var(--paper-ink); background: #F7F9FD;
  border: 1.5px solid var(--paper-rule); border-radius: 12px; padding: 13px 14px; transition: border-color .2s, background .2s;
  color-scheme: light;
}
.modulo textarea { min-height: 120px; resize: vertical; }
.modulo input:focus, .modulo textarea:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(38, 69, 147, .12); }
.modulo .consenso { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; color: var(--paper-mute); font-size: 14px; }
.modulo .consenso input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--brand); }
.modulo .consenso a { color: var(--brand); }
.modulo .invia { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.modulo .btn-signal { box-shadow: none; }
.modulo .riserv { font-size: 13px; color: var(--paper-mute); }
.modulo .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.esito-modulo { grid-column: 1 / -1; border-radius: 14px; padding: 16px 18px; font-size: 15px; }
.esito-modulo.ok { background: #E6F6EF; color: #0E5E43; }
.esito-modulo.err { background: #FDECEC; color: #8A1F1F; }
.mediatori { margin-top: 28px; font-size: 15px; color: var(--paper-mute); }
.mediatori strong { color: var(--paper-ink); }

/* ---------------------------------------------------------------- piede */
.piede { background: var(--ink-0); border-top: 1px solid var(--rule); }
.piede .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-block: 56px 40px; font-size: 14.5px; color: var(--mist); }
.piede img { height: 40px; width: auto; }
.piede address { font-style: normal; line-height: 1.7; }
.piede h4 { margin: 0 0 12px; font: 600 14px var(--display); color: var(--snow); }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.piede a { text-decoration: none; }
.piede a:hover { color: var(--snow); }
.piede .legale { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 24px; font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1020px) {
  .hero .wrap, .processo, .filiale, .principio, .profilo, .contatti { grid-template-columns: 1fr; gap: 48px; }
  .processo .sticky { position: static; }
  .cockpit { grid-template-columns: 1fr; }
  .ck-sx { border-right: 0; border-bottom: 1px solid var(--rule); }
  .storia .wrap { grid-template-columns: repeat(3, 1fr); }
  .storia p.intro { grid-column: 1 / -1; max-width: none; }
  .profilo { margin-top: 72px; }
}
@media (max-width: 880px) {
  .menu { position: fixed; inset: calc(76px + env(safe-area-inset-top, 0px)) 0 auto; flex-direction: column; align-items: stretch; gap: 0; padding: 8px max(24px, env(safe-area-inset-left, 0px)) 24px; background: rgba(5, 14, 38, .97); border-bottom: 1px solid var(--rule); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: all .25s ease; }
  .menu.aperto { transform: none; opacity: 1; pointer-events: auto; }
  .menu a { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
  .menu .btn { margin-top: 16px; border-bottom: 0; }
  .menu-toggle { display: block; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .cf-row { grid-template-columns: 1fr; }
  .cf-row .oggi, .cf-row .poi { border-left: 0; border-top: 1px solid var(--rule); }
  .cf-head { display: none; }
  .cf-row .oggi::before { content: "Oggi"; display: block; font: 600 13px var(--display); color: var(--mist); margin-bottom: 4px; opacity: .8; }
  .cf-row .poi::before { content: "Con InnovaCredit.ai"; display: block; font: 600 13px var(--display); color: var(--signal); margin-bottom: 4px; }
  .economia { grid-template-columns: 1fr; }
  .economia > div, .economia > div + div { padding: 28px 0; border-left: 0; border-top: 1px solid var(--rule); }
  .economia > div:first-child { border-top: 0; }
  .piede .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
  .hero .wrap { padding-block: 40px 64px; }
  .hero .azioni .btn { width: 100%; }
  .brand img { height: 30px; }
  .dossier { padding: 20px; }
  .d-row .tg { display: none; }
  .storia .wrap { grid-template-columns: 1fr; gap: 24px; }
  .passi li { grid-template-columns: 1fr; gap: 8px; }
  .ck-sx, .ck-dx { padding: 22px; }
  .seg button { font-size: 13px; }
  .canale { grid-template-columns: 44px 1fr; }
  .canale .ico { width: 44px; height: 44px; }
  .canale .qr { display: none; }
  form.modulo { grid-template-columns: 1fr; padding: 24px; }
  .voce { grid-template-columns: 1fr; }
  .voce .tipo { grid-row: auto; grid-column: 1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================================================================ comuni alle due pagine */
.pubblico { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(185, 198, 230, .08); border: 1px solid var(--rule); }
.menu .pubblico a { padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--mist); border: 0; }
.menu .pubblico a[aria-current="page"] { background: var(--snow); color: var(--ink-0); }
.menu .pubblico a:not([aria-current]):hover { color: var(--snow); }
.altro-pubblico { margin-top: 28px; font-size: 15px; color: var(--paper-mute); }
.altro-pubblico a { color: var(--brand); font-weight: 600; }

/* ================================================================ mediatori: analisi in apertura */
.analisi .piva { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(5, 14, 38, .6); border: 1px solid var(--rule); margin-bottom: 16px; }
.analisi .piva span { font-size: 12.5px; color: var(--mist); white-space: nowrap; }
.analisi .piva b { flex: 1; min-width: 0; font: 500 16px var(--data); letter-spacing: .04em; }
.analisi .piva b::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--signal); margin-left: 3px; vertical-align: -2px; animation: cursore 1s steps(2) infinite; }
.analisi .piva b.fermo::after { display: none; }
.analisi .piva i { font-style: normal; font: 600 12.5px var(--display); padding: 6px 12px; border-radius: 999px; background: var(--signal); color: var(--signal-ink); }
@keyframes cursore { 50% { opacity: 0; } }
.az-dati { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; padding: 4px 0 14px; border-bottom: 1px solid var(--rule); }
.az-dati div { display: flex; flex-direction: column; min-width: 0; transition: opacity .4s ease; }
.az-dati span { font-size: 12px; color: var(--mist); }
.az-dati b { font: 500 14px var(--data); }
.az-dati .nascosto { opacity: .15; }
.banche { display: grid; gap: 8px; margin-top: 8px; }
.bk-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(5, 14, 38, .45); border: 1px solid var(--rule); transition: opacity .45s ease, transform .45s ease; }
.bk-row.fuori { opacity: 0; transform: translateY(6px); }
.bk-row .pos { font: 600 13px var(--data); color: var(--mist); }
.bk-row .nm { font: 600 14.5px var(--display); }
.bk-row .why { grid-column: 2 / 4; font-size: 12.5px; color: var(--mist); }
.compat { font: 600 12px var(--body); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.compat.alta { background: rgba(87, 211, 168, .16); color: var(--ok); }
.compat.buona { background: rgba(120, 150, 230, .2); color: #C9D6FF; }
.compat.appr { background: rgba(255, 178, 94, .14); color: var(--warn); }
.bk-escluse { font-size: 12.5px; color: var(--mist); padding: 2px 2px 0; transition: opacity .45s; }

/* ================================================================ mediatori: il cliente fa da solo */
.prodotti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.prodotti button { font: 500 14.5px var(--display); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--mist); cursor: pointer; transition: all .2s; }
.prodotti button[aria-pressed="true"] { background: var(--snow); color: var(--ink-0); border-color: var(--snow); }
.prodotti button:hover:not([aria-pressed="true"]) { color: var(--snow); border-color: rgba(185, 198, 230, .5); }
.cosa-fa { margin-top: 28px; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.cosa-fa div { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--mist); }
.cosa-fa div b { color: var(--snow); font-weight: 600; }
.cosa-fa svg { width: 20px; height: 20px; stroke: var(--signal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 3px; }
.simula { margin-top: 26px; }
.schermo.studio .sc-top { background: #4A3C8F; }
.schermo.studio .sc-btn { background: #4A3C8F; }
.sc-item { transition: background-color .35s ease, border-color .35s ease; }
.sc-item.appena { background: #F1FBF6; border-color: #BFE8D3; }
.sc-prog { height: 6px; border-radius: 6px; background: #E0E6F1; margin: 0 16px; overflow: hidden; }
.sc-prog i { display: block; height: 100%; width: 0; background: #14936A; transition: width .4s ease; }

/* ================================================================ mediatori: portafoglio */
.radar { border-radius: 20px; border: 1px solid rgba(185, 198, 230, .22); background: var(--ink-1); overflow: hidden; }
.radar-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--rule); }
.radar-h b { font: 600 16px var(--display); }
.radar-h span { font-size: 12.5px; color: var(--mist); }
.evento { display: grid; grid-template-columns: 10px 1fr; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--rule); }
.evento:last-child { border-bottom: 0; }
.evento::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--ok); box-shadow: 0 0 0 4px rgba(87, 211, 168, .15); }
.evento.attenzione::before { background: var(--warn); box-shadow: 0 0 0 4px rgba(255, 178, 94, .15); }
.evento .t { font-size: 15px; }
.evento .t b { font-weight: 600; }
.evento .m { font-size: 13px; color: var(--mist); margin-top: 4px; }
.evento .az { margin-top: 10px; font: 600 13.5px var(--display); color: var(--signal); }

@media (max-width: 880px) {
  .menu .pubblico { align-self: flex-start; margin: 10px 0 6px; }
  .menu .pubblico a { padding: 8px 16px; border-bottom: 0; font-size: 14px; }
}
@media (max-width: 560px) {
  .az-dati { grid-template-columns: 1fr; }
  .bk-row .why { grid-column: 1 / -1; }
}

/* ritocchi dopo la revisione */
.schermo.studio .sc-body { gap: 6px; padding: 12px 14px; }
.schermo.studio .sc-item { padding: 8px 10px; }
.schermo.studio .sc-top { padding: 30px 18px 14px; }
.schermo.studio .sc-nota { margin: 8px 0 12px; }
.analisi .piva b { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.hero-m h1 { font-size: clamp(40px, 4.9vw, 70px); }