/* ==========================================================================
   Sito SPATIAL Intelligence: marchio e stili propri sopra Vuexy (core.css + front-page.css)
   Marchio: grafite #1E2330 (primario), lime #A3D911 (accento, mai testo su fondo chiaro), Manrope per i titoli.
   In tema scuro il primario si inverte (chiaro su scuro); l'accento resta lime.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Caratteri (ospitati nel sito, licenza OFL)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/public-sans-latin-wght-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: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/public-sans-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/manrope-latin-wght-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: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Variabili del marchio
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

:root,
html[data-bs-theme="light"] {
  --bs-primary: #1E2330;
  --bs-primary-rgb: 30, 35, 48;
  --bs-primary-contrast: #FFFFFF;
  --bs-primary-bg-subtle: #E4E6EB;
  --bs-primary-border-subtle: #B8BCC6;
  --bs-primary-text-emphasis: #1E2330;
  --bs-link-color: #1E2330;
  --bs-link-color-rgb: 30, 35, 48;
  --bs-link-hover-color: #3A4152;
  --bs-link-hover-color-rgb: 58, 65, 82;
  --bs-body-font-family: 'Public Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-secondary-color: #6F6D7A;
  --bs-secondary-color-rgb: 111, 109, 122;
  --sp-accent: #A3D911;
  --sp-accent-rgb: 163, 217, 17;
  --sp-accent-soft: #D4EE8A;
  --sp-ink: #1E2330;
  --sp-grey: #8A93A6;
  --sp-up: #1A7F45;
  --sp-down: #C9302C;
  --sp-brand-font: 'Manrope', 'Public Sans', sans-serif;
  --sp-bg: #F3F4F7;
  --sp-surface: #FFFFFF;
  --sp-grid: rgba(30, 35, 48, .07);
  --sp-shadow: 0 24px 60px -20px rgba(30, 35, 48, .28);
}

html[data-bs-theme="dark"] {
  --bs-primary: #E8EAF0;
  --bs-primary-rgb: 232, 234, 240;
  --bs-primary-contrast: #1E2330;
  --bs-primary-bg-subtle: #3A3F52;
  --bs-primary-border-subtle: #5A6075;
  --bs-primary-text-emphasis: #E8EAF0;
  --bs-link-color: #E8EAF0;
  --bs-link-color-rgb: 232, 234, 240;
  --bs-link-hover-color: #FFFFFF;
  --bs-link-hover-color-rgb: 255, 255, 255;
  --bs-secondary-color: #A5A7BB;
  --bs-secondary-color-rgb: 165, 167, 187;
  --sp-accent-soft: #5E7A12;
  --sp-grey: #6B7388;
  --sp-up: #4FD18B;
  --sp-down: #FF7A7E;
  --sp-bg: #1B1F2C;
  --sp-surface: #262B3B;
  --sp-grid: rgba(232, 234, 240, .06);
  --sp-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
}

body { font-family: var(--bs-body-font-family); background: var(--sp-bg); }
h1, h2, h3, .sp-brand-font { font-family: var(--sp-brand-font); }

/* Pulsanti: primario grafite, accento lime con testo grafite */
.btn-primary { --bs-btn-hover-bg: #2E3547; --bs-btn-hover-border-color: #2E3547; --bs-btn-active-bg: #2E3547; }
html[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #1E2330; --bs-btn-hover-color: #1E2330; --bs-btn-hover-bg: #FFFFFF; --bs-btn-hover-border-color: #FFFFFF; }
.btn-accent {
  --bs-btn-bg: var(--sp-accent); --bs-btn-border-color: var(--sp-accent); --bs-btn-color: var(--sp-ink);
  --bs-btn-hover-bg: #93C40F; --bs-btn-hover-border-color: #93C40F; --bs-btn-hover-color: var(--sp-ink);
  --bs-btn-active-bg: #86B30E; --bs-btn-active-border-color: #86B30E; --bs-btn-active-color: var(--sp-ink);
  --bs-btn-focus-shadow-rgb: var(--sp-accent-rgb);
  font-weight: 600;
  box-shadow: 0 8px 20px -8px rgba(var(--sp-accent-rgb), .8);
}
.btn-accent:hover { transform: translateY(-1px); }
.btn { transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.text-accent { color: var(--sp-accent) !important; }

:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 3px; }
.sp-skip { position: absolute; top: .5rem; left: .5rem; z-index: 2000; background: var(--sp-surface); color: var(--bs-heading-color); padding: .5rem 1rem; border-radius: .375rem; }

/* --------------------------------------------------------------------------
   Logo (SVG inline, segue il colore del testo)
   -------------------------------------------------------------------------- */
.sp-logo { display: inline-flex; align-items: center; gap: calc(var(--sp-logo-h) * .228); color: var(--bs-heading-color); line-height: 0; }
.sp-logo-mark { display: block; flex: none; height: var(--sp-logo-h); width: auto; }
.sp-wordmark { display: inline-flex; line-height: 0; }
.sp-wordmark svg { display: block; height: var(--sp-logo-h); width: auto; }
.sp-brand-link, .sp-brand-link:hover { color: var(--bs-heading-color); }

/* --------------------------------------------------------------------------
   Barra di navigazione (struttura e stato "navbar-active" da front-page.css)
   -------------------------------------------------------------------------- */
nav.layout-navbar { position: fixed; inset-inline: 0; top: 0; z-index: 1030; }
nav.layout-navbar .navbar.landing-navbar { --bs-front-navbar-bg: rgba(var(--bs-paper-bg-rgb), .55); }
nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link { font-size: .9375rem; }
nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.active { box-shadow: inset 0 -2px 0 var(--sp-accent); }
.sp-lang { font-weight: 600; letter-spacing: .04em; }
html[data-bs-theme="light"] .sp-theme-light, html[data-bs-theme="dark"] .sp-theme-dark { display: none; }
@media (max-width: 991.98px) {
  nav.layout-navbar .navbar.landing-navbar .landing-nav-menu { padding-top: 1.25rem; }
  nav.layout-navbar .navbar.landing-navbar .landing-nav-menu .nav-link { padding-block: .75rem; border-bottom: 1px solid var(--bs-border-color); }
  body.sp-menu-open { overflow: hidden; }
}
@media (max-width: 575.98px) {
  nav.layout-navbar .navbar.landing-navbar { margin-block-start: .5rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.sp-hero { position: relative; overflow: hidden; padding-block: 9.5rem 5rem; isolation: isolate; }
.sp-hero-short { padding-block-end: 7rem; min-height: 70vh; display: flex; align-items: center; }
.sp-hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(var(--sp-accent-rgb), .22), transparent 60%),
    radial-gradient(40rem 26rem at 0% 30%, rgba(138, 147, 166, .18), transparent 65%),
    var(--sp-bg);
}
/* reticolo isometrico leggero, eco del segno "Livelli" */
.sp-hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(30deg, var(--sp-grid) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-30deg, var(--sp-grid) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 55%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 55%, transparent 95%);
}
.sp-hero-text { max-width: 66rem; }
.sp-kicker {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem;
  padding: .375rem .875rem; border-radius: 2rem; font-size: .875rem; font-weight: 600; letter-spacing: .02em;
  color: var(--bs-heading-color); background: rgba(var(--bs-paper-bg-rgb), .8); border: 1px solid var(--bs-border-color);
}
.sp-kicker-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--sp-accent); box-shadow: 0 0 0 4px rgba(var(--sp-accent-rgb), .25); animation: sp-pulse 2.4s ease-in-out infinite; }
@keyframes sp-pulse { 50% { box-shadow: 0 0 0 7px rgba(var(--sp-accent-rgb), .08); } }
.sp-hero-title {
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--bs-heading-color);
  font-size: clamp(2.125rem, 1.1rem + 3.9vw, 3.875rem); margin-bottom: 1.5rem; text-wrap: balance;
}
/* evidenziatore del marchio: riquadro lime come la "IA" del logotipo; con box-decoration-break resta pulito anche
   quando la frase va a capo (telefono) */
.sp-title-line { display: block; }
.sp-mark {
  color: var(--sp-ink); padding: 0 .14em; border-radius: .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--sp-accent), var(--sp-accent)) no-repeat left center / 0% 88%;
  animation: sp-mark .7s .35s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes sp-mark { to { background-size: 100% 88%; } }
.sp-hero-sub { font-size: clamp(1.0625rem, .95rem + .45vw, 1.3125rem); color: var(--bs-body-color); max-width: 44rem; margin: 0 auto 2.25rem; text-wrap: pretty; }

.sp-hero-visual { position: relative; max-width: 68rem; margin: 4.5rem auto 0; perspective: 1600px; }
.sp-browser {
  border-radius: 1rem; overflow: hidden; background: var(--sp-surface); border: 1px solid var(--bs-border-color);
  box-shadow: var(--sp-shadow); transform: rotateX(8deg); transform-origin: top center; transition: transform .25s ease-out;
}
.sp-browser img { display: block; width: 100%; height: auto; }
.sp-browser-bar { display: flex; align-items: center; gap: .375rem; padding: .625rem .875rem; border-bottom: 1px solid var(--bs-border-color); background: var(--sp-surface); }
.sp-browser-bar span { width: .625rem; height: .625rem; border-radius: 50%; background: var(--bs-border-color); }
.sp-browser-bar span:first-child { background: var(--sp-accent); }
.sp-browser-bar em { margin-left: .75rem; font-style: normal; font-size: .75rem; color: var(--bs-secondary-color); }

/* schede dei numeri che "galleggiano" sopra la schermata */
.sp-float {
  position: absolute; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: .875rem;
  background: rgba(var(--bs-paper-bg-rgb), .92); backdrop-filter: blur(8px); border: 1px solid var(--bs-border-color);
  box-shadow: 0 14px 34px -12px rgba(30, 35, 48, .35); animation: sp-float 6s ease-in-out infinite;
}
.sp-float small { display: block; font-size: .75rem; color: var(--bs-secondary-color); line-height: 1.2; }
.sp-float strong { font-family: var(--sp-brand-font); font-size: 1.375rem; font-weight: 800; color: var(--bs-heading-color); line-height: 1.2; margin-right: .375rem; }
.sp-float em { font-style: normal; font-size: .8125rem; font-weight: 600; }
.sp-down { color: var(--sp-down); }
.sp-up { color: var(--sp-up); }
.sp-float-icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .625rem; background: var(--bs-primary-bg-subtle); color: var(--bs-heading-color); font-size: 1.375rem; }
.sp-float-icon-accent { background: var(--sp-accent); color: var(--sp-ink); }
.sp-float-1 { left: -2.5rem; top: 18%; }
.sp-float-2 { right: -2rem; top: 8%; animation-delay: -2s; }
.sp-float-3 { right: 6%; bottom: -1.75rem; animation-delay: -4s; }
@keyframes sp-float { 50% { transform: translateY(-10px); } }
@media (max-width: 1199.98px) { .sp-float-1 { left: -.75rem; } .sp-float-2 { right: -.75rem; } }
@media (max-width: 767.98px) {
  .sp-hero { padding-block: 7.5rem 3.5rem; }
  .sp-hero-visual { margin-top: 3rem; }
  .sp-browser { transform: none; border-radius: .625rem; }
  .sp-float { padding: .5rem .75rem; gap: .5rem; }
  .sp-float strong { font-size: 1.0625rem; }
  .sp-float-icon { width: 2rem; height: 2rem; font-size: 1.125rem; }
  .sp-float-1 { left: -.25rem; top: auto; bottom: -1.5rem; }
  .sp-float-2 { right: -.25rem; top: -1.5rem; }
  .sp-float-3 { display: none; }
}

/* comparsa allo scorrimento (site.js aggiunge is-visible) */
[data-sp-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
[data-sp-reveal].is-visible { opacity: 1; transform: none; }
html:not(.sp-js) [data-sp-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sp-mark { background-size: 100% 88%; }
  [data-sp-reveal] { opacity: 1; transform: none; }
  .sp-browser { transform: none; }
}

/* --------------------------------------------------------------------------
   Footer: grafite (anche nel tema chiaro); fascia dei loghi del cofinanziamento su bianco
   -------------------------------------------------------------------------- */
.sp-footer { --sp-f-text: rgba(247, 248, 250, .72); color: var(--sp-f-text); }
.sp-footer-top { background: #1E2330; padding-block: 4rem 2.5rem; border-radius: 2.5rem 2.5rem 0 0; margin-top: 4rem; position: relative; overflow: hidden; }
.sp-footer-top::after {
  content: ''; position: absolute; right: -6rem; bottom: -8rem; width: 26rem; height: 26rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--sp-accent-rgb), .18), transparent 70%); pointer-events: none;
}
.sp-footer-logo, .sp-footer-logo:hover { color: #F7F8FA; }
.sp-footer-logo .sp-logo { color: #F7F8FA; }
.sp-footer-text { max-width: 24rem; }
.sp-footer-title { font-family: var(--bs-body-font-family); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #F7F8FA; margin-bottom: 1rem; }
.sp-footer-link { display: inline-block; padding-block: .25rem; color: var(--sp-f-text); text-decoration: none; font-size: .9375rem; }
.sp-footer-link:hover, .sp-footer-link:focus { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--sp-accent); text-underline-offset: 3px; }
.sp-footer-partner { border-top: 1px solid rgba(247, 248, 250, .12); padding-top: 1.5rem; font-size: .8125rem; position: relative; z-index: 1; }
.sp-footer-fesr { background: #FFFFFF; color: #1E2330; }
.sp-footer-fesr .text-heading { color: #1E2330 !important; text-decoration: underline; text-decoration-color: var(--sp-accent); text-underline-offset: 3px; }
.sp-fesr-logos img { display: block; width: min(520px, 100%); height: auto; }
.sp-footer-bottom { background: #171B26; color: rgba(247, 248, 250, .6); }

/* --------------------------------------------------------------------------
   Sezioni
   -------------------------------------------------------------------------- */
.sp-section { padding-block: 6rem; position: relative; }
@media (max-width: 767.98px) { .sp-section { padding-block: 4rem; } }

/* --------------------------------------------------------------------------
   Schermate della piattaforma: due immagini (chiara e scura), si vede quella del tema
   -------------------------------------------------------------------------- */
.sp-screen img { display: block; width: 100%; height: auto; }
html[data-bs-theme="light"] .sp-screen-dark, html[data-bs-theme="dark"] .sp-screen-light { display: none !important; }
.sp-section .sp-screen { transform: none; }

/* --------------------------------------------------------------------------
   Schema "come funziona"
   -------------------------------------------------------------------------- */
.sp-arch { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem minmax(0, 1.05fr) 5.5rem minmax(0, 1fr); align-items: center; }
.sp-arch-col { background: var(--sp-surface); border: 1px solid var(--bs-border-color); border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 10px 30px -18px rgba(30, 35, 48, .3); }
.sp-arch-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: 1rem; }
.sp-arch-item { display: flex; gap: .875rem; align-items: flex-start; }
.sp-arch-item + .sp-arch-item { margin-top: 1.125rem; padding-top: 1.125rem; border-top: 1px dashed var(--bs-border-color); }
.sp-arch-item strong { display: block; color: var(--bs-heading-color); font-weight: 600; line-height: 1.3; }
.sp-arch-item span span { display: block; font-size: .875rem; color: var(--bs-secondary-color); margin-top: .125rem; }
.sp-arch-icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--bs-primary-bg-subtle); color: var(--bs-heading-color); font-size: 1.375rem; }
.sp-arch-out .sp-arch-icon { background: rgba(var(--sp-accent-rgb), .22); }
.sp-arch-core {
  position: relative; background: #1E2330; color: rgba(247, 248, 250, .78); border-radius: 1.5rem; padding: 2rem 1.75rem;
  box-shadow: 0 30px 60px -24px rgba(30, 35, 48, .6), 0 0 0 1px rgba(255, 255, 255, .04) inset; overflow: hidden;
}
html[data-bs-theme="dark"] .sp-arch-core { background: #11141D; }
.sp-arch-core::before { content: ""; position: absolute; right: -4rem; top: -4rem; width: 14rem; height: 14rem; border-radius: 50%; background: radial-gradient(circle, rgba(var(--sp-accent-rgb), .3), transparent 70%); }
.sp-arch-core .sp-logo { display: flex; width: max-content; color: #F7F8FA; margin: 1rem 0 1rem; position: relative; }
.sp-arch-core p { position: relative; }
.sp-arch-badge { position: relative; display: inline-block; padding: .25rem .75rem; border-radius: 2rem; font-size: .8125rem; font-weight: 700; background: var(--sp-accent); color: var(--sp-ink); }
.sp-arch-tags { position: relative; display: flex; flex-wrap: wrap; gap: .375rem; margin-top: 1.25rem !important; }
.sp-arch-tags li { font-size: .75rem; padding: .25rem .625rem; border-radius: 2rem; border: 1px solid rgba(247, 248, 250, .2); color: #F7F8FA; }
/* frecce animate tra i blocchi */
.sp-arch-flow { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2.5rem; padding-inline: .25rem; }
.sp-arch-flow span { position: relative; display: block; font-size: .6875rem; line-height: 1.25; text-align: center; color: var(--bs-secondary-color); padding-bottom: .75rem; }
.sp-arch-flow span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--sp-accent) 0 8px, transparent 8px 14px); background-size: 28px 2px;
  animation: sp-flow 1.2s linear infinite;
}
.sp-arch-flow span::before { content: ""; position: absolute; right: -2px; bottom: -4px; border: 5px solid transparent; border-left-color: var(--sp-accent); }
@keyframes sp-flow { to { background-position: 28px 0; } }
@keyframes sp-flow-v { to { background-position: 0 28px; } }
@media (max-width: 991.98px) {
  .sp-arch { grid-template-columns: 1fr; gap: 0; }
  .sp-arch-flow { flex-direction: row; justify-content: center; gap: 1.5rem; padding-block: 1.5rem; }
  .sp-arch-flow span { padding: 0 0 0 1.25rem; text-align: left; }
  .sp-arch-flow span::after { left: .375rem; right: auto; top: -1.25rem; bottom: -1.25rem; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--sp-accent) 0 8px, transparent 8px 14px); background-size: 2px 28px; animation-name: sp-flow-v; }
  .sp-arch-flow span::before { right: auto; left: 2px; bottom: -1.75rem; border-left-color: transparent; border-top-color: var(--sp-accent); }
}

/* --------------------------------------------------------------------------
   Funnel
   -------------------------------------------------------------------------- */
.sp-funnel { display: flex; flex-direction: column; align-items: center; }
.sp-funnel-step {
  width: var(--sp-w); min-width: 15rem; display: flex; align-items: center; gap: .875rem; padding: 1rem 1.25rem; border-radius: 1rem;
  background: var(--sp-surface); border: 1px solid var(--bs-border-color); box-shadow: 0 10px 26px -18px rgba(30, 35, 48, .35);
}
.sp-funnel-step:last-child { background: #1E2330; border-color: #1E2330; color: #F7F8FA; }
html[data-bs-theme="dark"] .sp-funnel-step:last-child { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-ink); }
.sp-funnel-step:last-child .sp-funnel-label, .sp-funnel-step:last-child .sp-funnel-value { color: inherit; }
.sp-funnel-icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: rgba(var(--sp-accent-rgb), .22); color: var(--bs-heading-color); font-size: 1.375rem; }
.sp-funnel-step:last-child .sp-funnel-icon { background: var(--sp-accent); color: var(--sp-ink); }
html[data-bs-theme="dark"] .sp-funnel-step:last-child .sp-funnel-icon { background: var(--sp-ink); color: var(--sp-accent); }
.sp-funnel-label { flex: 1; font-weight: 600; color: var(--bs-heading-color); }
.sp-funnel-value { font-family: var(--sp-brand-font); font-weight: 800; font-size: 1.625rem; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; }
.sp-funnel-ratio { padding-block: .375rem; }
.sp-funnel-ratio span { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 600; padding: .125rem .625rem; border-radius: 2rem; background: var(--bs-primary-bg-subtle); color: var(--bs-heading-color); }
@media (max-width: 575.98px) { .sp-funnel-step { width: 100%; min-width: 0; } }

/* ==========================================================================
   Sezioni delle pagine (passi 4-5)
   ========================================================================== */
:root, html[data-bs-theme="light"] { --bs-heading-color: #1E2330; --sp-surface-2: #FAFBFC; --sp-dark: #1E2330; }
html[data-bs-theme="dark"] { --bs-heading-color: #F1F2F6; --sp-surface-2: #20242F; --sp-dark: #11141D; }
.sp-js [data-sp-hidden] { display: none !important; }
.flex-none { flex: none; }
[data-sp-reveal] { transition-delay: var(--sp-delay, 0ms); }

.sp-section-alt { background: var(--sp-surface-2); border-block: 1px solid var(--bs-border-color); }

/* intestazioni */
.sp-head { max-width: 46rem; margin-bottom: 3rem; }
.sp-head:not(.text-center) { margin-bottom: 0; }
.sp-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: 1rem; }
.sp-eyebrow::before { content: ''; width: 1.5rem; height: 3px; border-radius: 2px; background: var(--sp-accent); }
.sp-eyebrow-ai::before { display: none; }
.sp-h2 { font-weight: 800; letter-spacing: -.025em; line-height: 1.12; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); color: var(--bs-heading-color); margin-bottom: 1.25rem; text-wrap: balance; }
.sp-lead { font-size: 1.125rem; line-height: 1.65; color: var(--bs-body-color); margin-bottom: 0; text-wrap: pretty; }
.sp-caption { font-size: .875rem; color: var(--bs-secondary-color); max-width: 46rem; }
.sp-closing { max-width: 50rem; font-size: 1.0625rem; color: var(--bs-body-color); }

/* fascia di fiducia */
.sp-trust { position: relative; z-index: 2; margin-top: -1rem; padding-bottom: 1rem; }
.sp-trust-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sp-trust-item { display: flex; gap: .875rem; align-items: flex-start; padding: 1.25rem; border-radius: 1rem; background: var(--sp-surface); border: 1px solid var(--bs-border-color); box-shadow: 0 10px 28px -20px rgba(30, 35, 48, .35); }
.sp-trust-item strong { display: block; font-family: var(--sp-brand-font); font-weight: 800; color: var(--bs-heading-color); margin-bottom: .25rem; }
.sp-trust-item span span { display: block; font-size: .875rem; color: var(--bs-secondary-color); line-height: 1.5; }
.sp-trust-icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: rgba(var(--sp-accent-rgb), .22); color: var(--bs-heading-color); font-size: 1.5rem; }
.sp-trust-badge { flex: none; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: #fff; padding: .25rem; border: 1px solid var(--bs-border-color); }
.sp-trust-badge img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1199.98px) { .sp-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .sp-trust-list { grid-template-columns: 1fr; } .sp-trust { margin-top: 0; } }

/* schede */
.sp-card { position: relative; padding: 1.75rem; border-radius: 1.25rem; background: var(--sp-surface); border: 1px solid var(--bs-border-color); box-shadow: 0 10px 30px -22px rgba(30, 35, 48, .35); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .7s ease; }
.sp-card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(30, 35, 48, .45); border-color: rgba(var(--sp-accent-rgb), .7); }
.sp-card-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .875rem; background: rgba(var(--sp-accent-rgb), .22); color: var(--bs-heading-color); font-size: 1.5rem; margin-bottom: 1.25rem; }
.sp-card-num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--sp-accent); color: var(--sp-ink); font-family: var(--sp-brand-font); font-weight: 800; font-size: 1.125rem; margin-bottom: 1.25rem; box-shadow: 0 0 0 6px rgba(var(--sp-accent-rgb), .2); }
.sp-card-title { font-size: 1.125rem; font-weight: 800; color: var(--bs-heading-color); margin-bottom: .5rem; line-height: 1.3; }
.sp-card p { color: var(--bs-secondary-color); }

/* spunte */
.sp-check li { display: flex; gap: .625rem; align-items: flex-start; padding-block: .375rem; color: var(--bs-body-color); }
.sp-check i { flex: none; font-size: 1.25rem; color: var(--sp-up); margin-top: .125rem; }
.sp-check-light li { color: rgba(247, 248, 250, .86); }
.sp-check-light i { color: var(--sp-accent); }

/* linguette con schermata */
.sp-tabs { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
.sp-tab-list { display: flex; flex-direction: column; gap: .375rem; }
.sp-tab { display: flex; gap: .875rem; align-items: flex-start; width: 100%; text-align: left; padding: .875rem 1rem; border-radius: .875rem; border: 1px solid transparent; background: transparent; color: var(--bs-body-color); transition: background-color .15s ease, border-color .15s ease; }
.sp-tab:hover { background: var(--sp-surface); border-color: var(--bs-border-color); }
.sp-tab[aria-selected="true"] { background: var(--sp-surface); border-color: var(--bs-border-color); box-shadow: inset 3px 0 0 var(--sp-accent), 0 10px 24px -20px rgba(30, 35, 48, .45); }
.sp-tab-icon { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .625rem; background: var(--bs-primary-bg-subtle); color: var(--bs-heading-color); font-size: 1.25rem; }
.sp-tab[aria-selected="true"] .sp-tab-icon { background: var(--sp-accent); color: var(--sp-ink); }
.sp-tab-text strong { display: block; color: var(--bs-heading-color); font-weight: 700; line-height: 1.3; }
.sp-tab-text span { display: block; font-size: .8125rem; color: var(--bs-secondary-color); margin-top: .125rem; line-height: 1.4; }
.sp-tab-panel { outline: none; }
.sp-tab-panel:not([data-sp-hidden]) { animation: sp-fade .35s ease; }
@keyframes sp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sp-tab-desc { font-size: 1rem; margin-bottom: 1rem; color: var(--bs-body-color); }
.sp-tab-desc strong { color: var(--bs-heading-color); }
html:not(.sp-js) .sp-tab-panel + .sp-tab-panel { margin-top: 2.5rem; }
@media (max-width: 991.98px) {
  .sp-tabs { grid-template-columns: 1fr; gap: 1.25rem; }
  .sp-tab-list { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: thin; }
  .sp-tab { flex: none; width: auto; align-items: center; padding: .5rem .875rem; scroll-snap-align: start; border-color: var(--bs-border-color); background: var(--sp-surface); }
  .sp-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--sp-accent); }
  .sp-tab-text span { display: none; }
  .sp-tab-icon { width: 1.875rem; height: 1.875rem; font-size: 1.0625rem; }
}

/* FAQ */
.sp-faq { display: flex; flex-direction: column; gap: .75rem; }
.sp-faq-item { border-radius: 1rem; background: var(--sp-surface); border: 1px solid var(--bs-border-color); transition: border-color .15s ease, box-shadow .15s ease; }
.sp-faq-item[open] { border-color: rgba(var(--sp-accent-rgb), .8); box-shadow: 0 14px 30px -24px rgba(30, 35, 48, .45); }
.sp-faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.125rem 1.25rem; cursor: pointer; list-style: none; font-weight: 700; color: var(--bs-heading-color); }
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item summary i { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bs-primary-bg-subtle); font-size: 1rem; transition: transform .2s ease, background-color .2s ease; }
.sp-faq-item[open] summary i { transform: rotate(45deg); background: var(--sp-accent); color: var(--sp-ink); }
.sp-faq-a { padding: 0 1.25rem 1.25rem; color: var(--bs-body-color); line-height: 1.65; }

/* smart digital signage: riquadro scuro con lo schermo che cambia programma */
.sp-signage-box { position: relative; overflow: hidden; border-radius: 2rem; background: var(--sp-dark); color: rgba(247, 248, 250, .82); padding: clamp(1.5rem, 1rem + 3vw, 4rem); isolation: isolate; }
.sp-signage-box::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(36rem 22rem at 100% 0%, rgba(var(--sp-accent-rgb), .22), transparent 65%),
    repeating-linear-gradient(30deg, rgba(232, 234, 240, .05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-30deg, rgba(232, 234, 240, .05) 0 1px, transparent 1px 46px); }
.sp-signage-box .sp-h2 { color: #F7F8FA; }
.sp-signage-box .sp-lead { color: rgba(247, 248, 250, .78); }
.sp-signage-box .sp-eyebrow { color: var(--sp-accent); }
.sp-live { position: relative; max-width: 30rem; margin-inline: auto; }
.sp-live-detect { display: flex; align-items: center; gap: .75rem; width: max-content; max-width: 100%; margin-inline: auto; padding: .625rem 1rem .625rem .625rem; border-radius: 2rem; background: rgba(247, 248, 250, .08); border: 1px solid rgba(247, 248, 250, .14); position: relative; overflow: hidden; }
.sp-live-detect small { display: block; font-size: .75rem; color: rgba(247, 248, 250, .6); line-height: 1.2; }
.sp-live-detect strong { display: block; color: #F7F8FA; font-weight: 700; transition: opacity .3s ease, transform .3s ease; }
.sp-live-cam { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--sp-accent); color: var(--sp-ink); font-size: 1.25rem; }
.sp-live-scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(var(--sp-accent-rgb), .25), transparent); transform: translateX(-100%); animation: sp-scan 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes sp-scan { 0%, 30% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
.sp-live-link { width: 2px; height: 2.25rem; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--sp-accent) 0 6px, transparent 6px 11px); background-size: 2px 22px; animation: sp-flow-v 1s linear infinite; }
.sp-live-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 1rem; padding: .625rem; background: #0B0D13; border: 1px solid rgba(247, 248, 250, .16); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8), 0 0 0 6px rgba(247, 248, 250, .04); }
.sp-live-show { position: relative; height: 100%; border-radius: .625rem; padding: 1.25rem; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; transition: opacity .38s ease, transform .38s ease; }
.sp-live-show::after { content: ''; position: absolute; right: -12%; top: -20%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: currentColor; opacity: .1; }
.sp-live-show strong { position: relative; font-family: var(--sp-brand-font); font-weight: 800; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; max-width: 85%; }
.sp-live-onair { position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: 2rem; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(0, 0, 0, .45); color: #fff; }
.sp-live-onair span { width: .5rem; height: .5rem; border-radius: 50%; background: #FF4D4F; animation: sp-blink 1.4s ease-in-out infinite; }
@keyframes sp-blink { 50% { opacity: .25; } }
.sp-live-lines { position: relative; display: flex; gap: .375rem; margin-top: .875rem; }
.sp-live-lines i { height: .375rem; border-radius: 1rem; background: currentColor; opacity: .35; width: 30%; }
.sp-live-lines i + i { width: 18%; }
.sp-live-v0 { background: linear-gradient(135deg, #A3D911, #D4EE8A); color: #1E2330; }
.sp-live-v1 { background: linear-gradient(135deg, #2E3547, #4A5470); color: #F7F8FA; }
.sp-live-v2 { background: linear-gradient(135deg, #F7F8FA, #DDE1E8); color: #1E2330; }
.sp-live-v3 { background: linear-gradient(135deg, #1E2330, #3A4152); color: #A3D911; }
.sp-live.is-switching .sp-live-show { opacity: 0; transform: scale(.97); }
.sp-live.is-switching .sp-live-detect strong { opacity: 0; transform: translateY(4px); }
.sp-live-stand { width: 26%; height: .75rem; margin: 0 auto; border-radius: 0 0 .75rem .75rem; background: #0B0D13; border: 1px solid rgba(247, 248, 250, .12); border-top: 0; }
.sp-live-dots { display: flex; justify-content: center; gap: .375rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.sp-live-dots li { width: .5rem; height: .5rem; border-radius: 1rem; background: rgba(247, 248, 250, .25); transition: width .3s ease, background-color .3s ease; }
.sp-live-dots li.is-on { width: 1.5rem; background: var(--sp-accent); }
.sp-signage-steps { margin: 3.5rem 0 0; }
.sp-signage-steps li { position: relative; }
.sp-signage-steps h3 { font-size: 1.0625rem; font-weight: 800; color: #F7F8FA; margin: 1rem 0 .375rem; }
.sp-signage-steps p { font-size: .9375rem; color: rgba(247, 248, 250, .7); }
.sp-signage-step-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .875rem; background: rgba(247, 248, 250, .08); border: 1px solid rgba(247, 248, 250, .14); color: var(--sp-accent); font-size: 1.375rem; }
.sp-signage-step-num { position: absolute; top: -.375rem; left: 2.25rem; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--sp-accent); color: var(--sp-ink); font-size: .75rem; font-weight: 800; }
.sp-signage-shot { margin-top: 3rem; max-width: 58rem; margin-inline: auto; }
.sp-signage-shot .sp-browser { border-color: rgba(247, 248, 250, .14); }
.sp-signage-note { display: flex; justify-content: center; align-items: center; gap: .5rem; margin: 1.5rem 0 0; font-size: .875rem; color: rgba(247, 248, 250, .62); text-align: center; }
.sp-signage-note i { color: var(--sp-accent); font-size: 1.125rem; flex: none; }

/* Assistant: fondo verdino come i widget AI della piattaforma (sp-ai) */
.sp-ai-box { border-radius: 2rem; padding: clamp(1.5rem, 1rem + 3vw, 4rem); background: linear-gradient(135deg, rgba(var(--sp-accent-rgb), .16), rgba(var(--sp-accent-rgb), .04) 55%, transparent), var(--sp-surface); border: 1px solid rgba(var(--sp-accent-rgb), .45); }
.sp-ai-avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sp-accent); color: var(--sp-ink); font-size: 1.125rem; }
.sp-ai-visual { position: relative; padding-bottom: 4rem; }
.sp-ai-visual .sp-browser { transform: none; }
.sp-insight { position: absolute; left: -1.5rem; bottom: 0; width: min(25rem, 88%); padding: 1.25rem; border-radius: 1rem; background: var(--sp-surface); border: 1px solid var(--bs-border-color); border-left: 4px solid var(--sp-down); box-shadow: 0 24px 50px -20px rgba(30, 35, 48, .5); }
.sp-insight h3 { font-size: 1.0625rem; font-weight: 800; color: var(--bs-heading-color); margin-bottom: .375rem; line-height: 1.3; }
.sp-insight p { font-size: .875rem; color: var(--bs-body-color); margin-bottom: .5rem; }
.sp-insight-prio { font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .125rem .5rem; border-radius: 2rem; background: rgba(201, 48, 44, .12); color: var(--sp-down); }
.sp-insight-area { font-size: .75rem; color: var(--bs-secondary-color); }
.sp-insight-todo { padding: .5rem .625rem; border-radius: .5rem; background: rgba(var(--sp-accent-rgb), .16); }
.sp-insight-conf { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .75rem !important; color: var(--bs-secondary-color) !important; }
@media (max-width: 991.98px) { .sp-insight { left: .75rem; } }
@media (max-width: 575.98px) { .sp-ai-visual { padding-bottom: 0; } .sp-insight { position: relative; left: 0; width: 100%; margin-top: -1.5rem; } }

/* settori */
.sp-sector { display: flex; flex-direction: column; height: 100%; border-radius: 1.5rem; overflow: hidden; background: var(--sp-surface); border: 1px solid var(--bs-border-color); color: inherit; text-decoration: none; box-shadow: 0 14px 36px -26px rgba(30, 35, 48, .45); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .7s ease; }
.sp-sector:hover { transform: translateY(-4px); border-color: rgba(var(--sp-accent-rgb), .8); box-shadow: 0 30px 50px -28px rgba(30, 35, 48, .55); color: inherit; }
.sp-sector-shot { display: block; padding: 1.5rem 1.5rem 0; background: linear-gradient(180deg, rgba(var(--sp-accent-rgb), .18), transparent); max-height: 17rem; overflow: hidden; }
.sp-sector-shot .sp-browser { border-radius: .75rem .75rem 0 0; transform: none; box-shadow: 0 -6px 30px -16px rgba(30, 35, 48, .45); }
.sp-sector-body { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; flex: 1; }
.sp-sector-title { font-size: 1.5rem; font-weight: 800; line-height: 1.25; color: var(--bs-heading-color); margin: 0; }
.sp-sector-text { color: var(--bs-body-color); }
.sp-pill { display: inline-flex; align-items: center; gap: .375rem; width: max-content; padding: .25rem .75rem; border-radius: 2rem; font-size: .8125rem; font-weight: 700; background: var(--bs-primary-bg-subtle); color: var(--bs-heading-color); }
.sp-link { margin-top: auto; display: inline-flex; align-items: center; gap: .375rem; font-weight: 700; color: var(--bs-heading-color); text-decoration: underline; text-decoration-color: var(--sp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sp-link i { transition: transform .2s ease; }
.sp-sector:hover .sp-link i { transform: translateX(3px); }

/* partner e dati */
.sp-partner-badge { width: 5.5rem; height: 5.5rem; border-radius: 1rem; background: #fff; padding: .375rem; border: 1px solid var(--bs-border-color); box-shadow: 0 10px 24px -18px rgba(30, 35, 48, .45); }
.sp-partner-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sp-partner-logo { display: inline-flex; align-items: center; height: 5.5rem; padding: 1rem 1.25rem; border-radius: 1rem; background: #fff; border: 1px solid var(--bs-border-color); }
.sp-partner-logo img { height: 2.25rem; width: auto; display: block; }
.sp-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.sp-chips li { padding: .375rem .875rem; border-radius: 2rem; font-size: .875rem; font-weight: 600; background: var(--sp-surface); border: 1px solid var(--bs-border-color); color: var(--bs-heading-color); }
.sp-data-box { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 2rem; background: var(--sp-dark); color: rgba(247, 248, 250, .82); box-shadow: 0 30px 60px -30px rgba(30, 35, 48, .7); }
.sp-data-box::after { content: ''; position: absolute; right: -5rem; top: -5rem; width: 14rem; height: 14rem; border-radius: 50%; background: radial-gradient(circle, rgba(var(--sp-accent-rgb), .25), transparent 70%); pointer-events: none; }
.sp-data-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .875rem; background: var(--sp-accent); color: var(--sp-ink); font-size: 1.5rem; margin-bottom: 1.25rem; }
.sp-data-title { color: #F7F8FA; font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; }

/* percorso */
.sp-path { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0 0 3rem; }
.sp-path::before { content: ''; position: absolute; top: 1.75rem; left: 16%; right: 16%; height: 2px; background: repeating-linear-gradient(90deg, var(--sp-accent) 0 10px, transparent 10px 18px); }
.sp-path-step { position: relative; text-align: center; padding-inline: 1rem; }
.sp-path-dot { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--sp-surface); border: 2px solid var(--sp-accent); color: var(--bs-heading-color); font-size: 1.5rem; box-shadow: 0 0 0 8px var(--sp-surface-2); }
.sp-path-step h3 { font-size: 1.25rem; font-weight: 800; color: var(--bs-heading-color); }
.sp-path-num { color: var(--bs-secondary-color); font-weight: 600; }
.sp-path-step p { color: var(--bs-body-color); max-width: 20rem; margin-inline: auto; }
.sp-pay { display: flex; gap: 1.5rem; align-items: center; padding: 1.75rem 2rem; border-radius: 1.5rem; background: var(--sp-surface); border: 1px solid var(--bs-border-color); box-shadow: 0 14px 36px -28px rgba(30, 35, 48, .45); }
.sp-pay-icon { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: rgba(var(--sp-accent-rgb), .22); color: var(--bs-heading-color); font-size: 1.625rem; }
.sp-pay-title { font-size: 1.25rem; font-weight: 800; color: var(--bs-heading-color); margin-bottom: .375rem; }
@media (max-width: 767.98px) {
  .sp-path { grid-template-columns: 1fr; gap: 1.5rem; }
  .sp-path::before { top: 1.75rem; bottom: 1.75rem; left: 1.75rem; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--sp-accent) 0 10px, transparent 10px 18px); }
  .sp-path-step { text-align: left; padding: 0 0 0 5rem; min-height: 3.5rem; }
  .sp-path-dot { position: absolute; left: 0; top: 0; margin: 0; }
  .sp-path-step p { margin-inline: 0; }
  .sp-pay { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
}

/* contatti */
.sp-contact-box { border-radius: 2rem; overflow: hidden; background: var(--sp-surface); border: 1px solid var(--bs-border-color); box-shadow: var(--sp-shadow); }
.sp-contact-side { position: relative; overflow: hidden; padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); background: var(--sp-dark); color: rgba(247, 248, 250, .8); }
.sp-contact-side::after { content: ''; position: absolute; left: -6rem; bottom: -6rem; width: 18rem; height: 18rem; border-radius: 50%; background: radial-gradient(circle, rgba(var(--sp-accent-rgb), .25), transparent 70%); pointer-events: none; }
.sp-contact-side .sp-h2 { color: #F7F8FA; }
.sp-contact-side .sp-lead { color: rgba(247, 248, 250, .78); }
.sp-contact-side .sp-eyebrow { color: var(--sp-accent); }
.sp-contact-next-title { font-family: var(--bs-body-font-family); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #F7F8FA; margin: 2rem 0 1rem; }
.sp-contact-next li { display: flex; align-items: center; gap: .75rem; padding-block: .375rem; }
.sp-contact-next span { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid rgba(var(--sp-accent-rgb), .7); color: var(--sp-accent); font-size: .8125rem; font-weight: 700; }
.sp-contact-mail { position: relative; z-index: 1; margin: 2rem 0 .75rem; }
.sp-contact-mail small { display: block; color: rgba(247, 248, 250, .6); }
.sp-contact-mail a { color: #F7F8FA; font-weight: 700; font-size: 1.125rem; text-decoration: underline; text-decoration-color: var(--sp-accent); text-underline-offset: 4px; word-break: break-word; }
.sp-contact-address { position: relative; z-index: 1; display: flex; gap: .5rem; font-size: .875rem; color: rgba(247, 248, 250, .6); }
.sp-contact-form-wrap { padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.sp-contact-form .form-label { font-weight: 600; color: var(--bs-heading-color); }
.sp-contact-form .form-control, .sp-contact-form .form-select { padding: .625rem .875rem; border-radius: .625rem; }
.sp-req { color: var(--sp-down); }
.sp-opt { font-weight: 400; color: var(--bs-secondary-color); font-size: .8125rem; }
.sp-field-err { font-size: .8125rem; color: var(--sp-down); margin-top: .25rem; }
.sp-field-err:empty { display: none; }
.sp-consent-check .form-check-label { font-size: .875rem; }
.sp-consent-check a { color: var(--bs-heading-color); text-decoration: underline; text-decoration-color: var(--sp-accent); text-underline-offset: 3px; }
.sp-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* banner dei cookie */
.sp-consent { position: fixed; z-index: 1090; left: 1rem; bottom: 1rem; width: min(30rem, calc(100vw - 2rem)); padding: 1.5rem; border-radius: 1.25rem; background: var(--sp-surface); border: 1px solid var(--bs-border-color); box-shadow: 0 30px 70px -20px rgba(30, 35, 48, .55); opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; max-height: calc(100vh - 2rem); overflow-y: auto; }
.sp-consent.is-open { opacity: 1; transform: none; }
.sp-consent-x { position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--bs-secondary-color); font-size: 1.125rem; }
.sp-consent-x:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-heading-color); }
.sp-consent-title { display: flex; align-items: center; gap: .5rem; font-family: var(--sp-brand-font); font-size: 1.125rem; font-weight: 800; color: var(--bs-heading-color); margin: 0 2rem .5rem 0; }
.sp-consent-title i { font-size: 1.375rem; }
.sp-consent-text { font-size: .875rem; color: var(--bs-body-color); margin-bottom: 1rem; }
.sp-consent-panel { margin-bottom: 1rem; border-top: 1px solid var(--bs-border-color); }
.sp-consent-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--bs-border-color); }
.sp-consent-row label { margin: 0; cursor: pointer; }
.sp-consent-row strong { display: block; font-size: .875rem; color: var(--bs-heading-color); }
.sp-consent-row small { display: block; font-size: .8125rem; color: var(--bs-secondary-color); }
.sp-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sp-consent-actions [data-sp-consent-customize], .sp-consent-actions [data-sp-consent-save] { grid-column: 1 / -1; }
.sp-consent-links { margin-top: .875rem; font-size: .8125rem; color: var(--bs-secondary-color); }
.sp-consent-links a { color: var(--bs-heading-color); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 575.98px) { .sp-consent { left: .5rem; bottom: .5rem; width: calc(100vw - 1rem); padding: 1.25rem; } }

/* retail: indicazioni sotto il funnel, Shopper Yield, simulatore */
.sp-mini-list { display: flex; flex-direction: column; gap: .75rem; }
.sp-mini { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border-radius: .875rem; background: var(--sp-surface); border: 1px solid var(--bs-border-color); }
.sp-mini strong { color: var(--bs-heading-color); }
.sp-mini-icon { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; background: rgba(var(--sp-accent-rgb), .22); color: var(--bs-heading-color); font-size: 1.125rem; }
.sp-yield { border-radius: 2rem; padding: clamp(1.5rem, 1rem + 3vw, 4rem); background: linear-gradient(135deg, rgba(var(--sp-accent-rgb), .14), transparent 60%), var(--sp-surface); border: 1px solid var(--bs-border-color); }
.sp-formula { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-family: var(--sp-brand-font); font-weight: 800; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); color: var(--bs-heading-color); }
.sp-formula span { padding: .5rem .875rem; border-radius: .75rem; background: var(--bs-primary-bg-subtle); }
.sp-formula b { color: var(--bs-secondary-color); font-size: 1.5rem; }
.sp-formula .sp-formula-res { background: var(--sp-accent); color: var(--sp-ink); }
.sp-store { height: 100%; padding: 1.25rem; border-radius: 1rem; background: var(--sp-surface); border: 1px solid var(--bs-border-color); }
.sp-store-name { display: block; font-weight: 800; color: var(--bs-heading-color); }
.sp-store-text { display: block; font-size: .875rem; color: var(--bs-secondary-color); margin-bottom: .75rem; }
.sp-store-value { display: block; font-family: var(--sp-brand-font); font-weight: 800; font-size: 2rem; color: var(--bs-heading-color); line-height: 1.1; }
.sp-store small { color: var(--bs-secondary-color); }
.sp-sim { max-width: 68rem; margin-inline: auto; }
.sp-sim-inputs, .sp-sim-results { height: 100%; padding: 1.75rem; border-radius: 1.5rem; background: var(--sp-surface); border: 1px solid var(--bs-border-color); }
.sp-sim-field + .sp-sim-field { margin-top: 1.5rem; }
.sp-sim-field .form-label { font-weight: 600; color: var(--bs-heading-color); }
.sp-sim-out { font-family: var(--sp-brand-font); font-weight: 800; font-size: 1.25rem; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-range { --sp-fill: 50%; height: 1.75rem; margin-top: .5rem; }
.sp-range::-webkit-slider-runnable-track { height: .5rem; border-radius: 1rem; background: linear-gradient(90deg, var(--sp-accent) var(--sp-fill), var(--bs-primary-bg-subtle) var(--sp-fill)); }
.sp-range::-moz-range-track { height: .5rem; border-radius: 1rem; background: var(--bs-primary-bg-subtle); }
.sp-range::-moz-range-progress { height: .5rem; border-radius: 1rem; background: var(--sp-accent); }
.sp-range::-webkit-slider-thumb { width: 1.375rem; height: 1.375rem; margin-top: -.4375rem; border-radius: 50%; background: #1E2330; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(30, 35, 48, .35); }
.sp-range::-moz-range-thumb { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #1E2330; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(30, 35, 48, .35); }
.sp-sim-warn { margin-top: 1rem; color: var(--sp-down); }
.sp-sim-results { background: var(--sp-dark); color: rgba(247, 248, 250, .8); border-color: transparent; }
.sp-sim-now-title { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(247, 248, 250, .6); margin-bottom: .5rem; }
.sp-sim-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.sp-sim-now div { padding: .75rem; border-radius: .75rem; background: rgba(247, 248, 250, .06); }
.sp-sim-now dt { font-size: .75rem; font-weight: 400; color: rgba(247, 248, 250, .62); }
.sp-sim-now dd { margin: 0; font-family: var(--sp-brand-font); font-weight: 800; color: #F7F8FA; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.sp-sim-gain { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .875rem; border-top: 1px solid rgba(247, 248, 250, .12); }
.sp-sim-gain > span { font-size: .9375rem; }
.sp-sim-gain strong { flex: none; font-family: var(--sp-brand-font); font-weight: 800; font-size: 1.375rem; color: var(--sp-accent); text-align: right; font-variant-numeric: tabular-nums; }
.sp-sim-gain strong small { display: block; font-family: var(--bs-body-font-family); font-weight: 400; font-size: .75rem; color: rgba(247, 248, 250, .6); }
.sp-sim-gain-year strong { font-size: 1.75rem; }
@media (max-width: 575.98px) { .sp-sim-now { grid-template-columns: 1fr; } .sp-sim-inputs, .sp-sim-results { padding: 1.25rem; } }

/* musei: in arrivo, fiera */
.sp-coming { display: flex; gap: 1rem; align-items: center; max-width: 46rem; margin-inline: auto; padding: 1rem 1.25rem; border-radius: 1rem; border: 1px dashed var(--bs-border-color); background: var(--sp-surface); }
.sp-coming-tag { flex: none; padding: .25rem .75rem; border-radius: 2rem; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--bs-primary-bg-subtle); color: var(--bs-heading-color); }
@media (max-width: 575.98px) { .sp-coming { flex-direction: column; align-items: flex-start; } }
.sp-fair { border-radius: 2rem; overflow: hidden; background: var(--sp-surface); border: 1px solid var(--bs-border-color); box-shadow: var(--sp-shadow); }
.sp-fair-main { display: flex; gap: 2.5rem; align-items: flex-start; padding: clamp(1.5rem, 1rem + 3vw, 4rem); background: linear-gradient(135deg, rgba(var(--sp-accent-rgb), .18), transparent 60%); }
.sp-fair-date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 7.5rem; height: 7.5rem; border-radius: 1.5rem; background: var(--sp-dark); color: #F7F8FA; box-shadow: 0 20px 40px -20px rgba(30, 35, 48, .7); }
.sp-fair-date span { font-family: var(--sp-brand-font); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--sp-accent); }
.sp-fair-date small { font-size: .875rem; text-transform: uppercase; letter-spacing: .08em; }
.sp-fair-where { display: flex; gap: .5rem; align-items: flex-start; margin: 1.25rem 0 1.5rem; font-size: .9375rem; color: var(--bs-secondary-color); }
.sp-fair-fesr { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: 1.25rem clamp(1.5rem, 1rem + 3vw, 4rem); background: #fff; color: #1E2330; font-size: .875rem; }
.sp-fair-fesr img { width: min(420px, 100%); height: auto; }
.sp-fair-fesr a { color: #1E2330; font-weight: 700; text-decoration: underline; text-decoration-color: var(--sp-accent); text-underline-offset: 3px; }
@media (max-width: 767.98px) { .sp-fair-main { flex-direction: column; gap: 1.5rem; } .sp-fair-date { width: 6rem; height: 6rem; } }

/* pagine di servizio: cofinanziamento, privacy, cookie */
.sp-fesr-top { background: #fff; border-bottom: 1px solid #E4E6EB; padding: 6.5rem 0 1.25rem; }
.sp-fesr-top img { display: block; width: min(760px, 100%); height: auto; }
.sp-page-head { padding: 3rem 0 2.5rem; }
.sp-page-privacy .sp-page-head, .sp-page-cookie .sp-page-head { padding-top: 8.5rem; }
.sp-page-title { font-weight: 800; letter-spacing: -.025em; line-height: 1.12; font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem); color: var(--bs-heading-color); margin-bottom: 1rem; max-width: 52rem; text-wrap: balance; }
.sp-prose { font-size: 1.0625rem; line-height: 1.7; max-width: 44rem; }
.sp-prose h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; }
.sp-prose h3 { font-size: 1.125rem; font-weight: 800; margin: 2rem 0 .5rem; }
.sp-statement { display: flex; gap: .75rem; align-items: flex-start; margin-top: 2rem; padding: 1rem 1.25rem; border-radius: 1rem; background: rgba(var(--sp-accent-rgb), .16); font-weight: 600; color: var(--bs-heading-color); }
.sp-statement i { font-size: 1.375rem; flex: none; }
.sp-facts { padding: 1.75rem; border-radius: 1.25rem; background: var(--sp-surface); border: 1px solid var(--bs-border-color); }
.sp-facts-title { font-family: var(--bs-body-font-family); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: 1rem; }
.sp-facts dl div { padding-block: .625rem; border-bottom: 1px solid var(--bs-border-color); }
.sp-facts dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-facts dt { font-size: .8125rem; font-weight: 600; color: var(--bs-secondary-color); }
.sp-facts dd { margin: 0; color: var(--bs-heading-color); font-weight: 600; }
.sp-facts-links li { padding-block: .375rem; }
.sp-facts-links a { color: var(--bs-heading-color); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sp-accent); text-underline-offset: 3px; }
.sp-legal { max-width: 52rem; font-size: 1rem; line-height: 1.7; }
.sp-legal h2 { font-size: 1.25rem; font-weight: 800; margin: 2.25rem 0 .75rem; }
.sp-legal h2:first-child { margin-top: 0; }
.sp-legal ul { padding-left: 1.25rem; }
.sp-legal li { margin-bottom: .375rem; }
.sp-legal table { font-size: .9375rem; margin-bottom: 0; }
.sp-legal th { font-weight: 700; color: var(--bs-heading-color); }
.sp-legal .table-responsive { border: 1px solid var(--bs-border-color); border-radius: .75rem; margin-bottom: 1rem; background: var(--sp-surface); }
.sp-legal a { color: var(--bs-heading-color); text-decoration: underline; text-decoration-color: var(--sp-accent); text-underline-offset: 3px; word-break: break-word; }
.sp-legal code { color: var(--bs-heading-color); background: var(--bs-primary-bg-subtle); padding: .0625rem .375rem; border-radius: .25rem; font-size: .875em; }

/* sezioni a riquadro una dopo l'altra: meno spazio tra un riquadro e l'altro */
.sp-section.sp-signage, .sp-section.sp-tight { padding-block: 3rem; }
.sp-section.sp-contact { padding-block: 3rem 1rem; }