/* styles.css — SYNEDO design system
   ------------------------------------------------------------------
   Il layout e lo styling di base sono fatti con le utility Tailwind
   (CDN, configurazione nel <head> di index.html). Questo file contiene
   solo ciò che Tailwind via CDN non copre bene:
     1. design token (variabili CSS)
     2. componenti condivisi: bottoni, card, badge, eyebrow, titoli
     3. motion: reveal on scroll, progress, anelli, hotspot
     4. stili specifici di sezione (in fondo, uno blocco per sezione)
   Tutto il motion è disattivato con prefers-reduced-motion.
   ------------------------------------------------------------------ */

/* ═══ 1. TOKEN ═══════════════════════════════════════════════════ */
:root {
  /* Palette di brand: Blu notte #1D2E46 · Turchese #0EA4A7 · Bianco carta #F5F5F5
     (nomi delle variabili invariati per non toccare il markup) */
  --c-emerald: #0B7C7F;
  --c-charcoal: #1D2E46;
  --c-orange: #0EA4A7;
  --c-bg: #F5F5F5;

  /* Tinte derivate (solo opacità/mix dei colori di brand) */
  --c-emerald-600: #0E8E91;
  --c-emerald-50: #E7F6F6;
  --c-emerald-soft: rgba(11, 124, 127, 0.08);
  --c-orange-600: #0B8C8F;
  --c-orange-soft: rgba(14, 164, 167, 0.12);
  --c-charcoal-900: #142236;
  --c-line: rgba(29, 46, 70, 0.10);
  --c-line-dark: rgba(255, 255, 255, 0.10);
  --c-muted: #475569;        /* slate-600, AA su chiaro */
  --c-muted-dark: #94a3b8;   /* slate-400, AA su charcoal */

  /* Stati (semafori) */
  --c-ok: #10b981;
  --c-warn: #f59e0b;
  --c-ko: #ef4444;

  /* Forme */
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --btn-h: 3.25rem;          /* 52px */
  --btn-h-sm: 2.75rem;       /* 44px, target touch minimo */

  /* Ombre morbide */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px -2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 12px 28px -12px rgba(15, 23, 42, 0.16);
  --shadow-lg: 0 28px 60px -24px rgba(15, 23, 42, 0.28);

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 200ms;
  --dur: 400ms;
  --dur-slow: 600ms;

  /* Header */
  --header-h: 4.5rem;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

::selection { background: rgba(14, 164, 167, 0.25); }

/* Focus visibile e coerente su tutto il sito */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
  border-radius: 6px;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  user-select: none;
}
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Skip link */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--c-charcoal); color: #fff; padding: .75rem 1rem; border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ═══ 2. TIPOGRAFIA ══════════════════════════════════════════════ */
.h1, .h2, .h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h1 { font-size: clamp(2.375rem, 1.6rem + 3.6vw, 4.5rem); line-height: 1.04; }
.h2 { font-size: clamp(1.875rem, 1.35rem + 2.2vw, 3.25rem); line-height: 1.08; }
.h3 { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); line-height: 1.18; }
.lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6; }

/* Eyebrow: label sopra i titoli, sempre identica */
.eyebrow {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: 'Inter', sans-serif;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-emerald);
}
.eyebrow::before {
  content: ""; width: 1.5rem; height: 2px; border-radius: 2px;
  background: currentColor;
}
.eyebrow--orange { color: #0EA4A7; }
.on-dark .eyebrow, .eyebrow--light { color: var(--c-orange); }

/* Tagline CONOSCERE · GESTIRE · MIGLIORARE */
.tagline {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; font-size: .8125rem;
}

/* ═══ 3. BOTTONI ═════════════════════════════════════════════════
   3 varianti: .btn-primary · .btn-secondary · .btn-ghost
   Stessa altezza e radius per primary/secondary. .btn-sm = 44px.
   Icona a destra opzionale: <span class="material-symbols-outlined btn-icon">arrow_forward</span>
   ═══════════════════════════════════════════════════════════════ */
.btn {
  --_bg: transparent; --_fg: var(--c-charcoal); --_bd: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: var(--btn-h); padding: 0 1.5rem;
  border-radius: 9999px;
  border: 1.5px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: -0.005em;
  line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
/* Il preflight di Tailwind (iniettato dopo questo file) azzera lo sfondo di
   button/[type=submit]: qui si alza la specificità per mantenere il colore. */
.btn:is(button, [type]) { background-color: var(--_bg); }
.btn-sm { height: var(--btn-h-sm); padding: 0 1.125rem; font-size: .9375rem; }
.btn-block { width: 100%; }
.btn .btn-icon { font-size: 1.25rem; transition: transform var(--dur-fast) var(--ease); }
.btn:hover .btn-icon { transform: translateX(4px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; border-radius: 9999px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Primario: pieno arancio, testo bianco (da brief).
   Nota contrasto: bianco su #0EA4A7 ≈ 2.9:1. Se serve AA pieno, usare
   --c-orange-600 come sfondo o testo blu notte: decisione del team brand. */
.btn-primary {
  --_bg: var(--c-orange); --_fg: #fff; --_bd: var(--c-orange);
  box-shadow: 0 8px 20px -8px rgba(14, 164, 167, .55);
}
.btn-primary:hover { --_bg: var(--c-orange-600); --_bd: var(--c-orange-600); box-shadow: 0 12px 26px -10px rgba(14, 164, 167, .6); }

/* Secondario: outline. Charcoal su chiaro, bianco su scuro (.on-dark su un antenato o .btn-secondary--dark) */
.btn-secondary { --_bg: transparent; --_fg: var(--c-charcoal); --_bd: rgba(29, 46, 70, .28); }
.btn-secondary:hover { --_bd: var(--c-charcoal); --_bg: rgba(29, 46, 70, .04); }
.on-dark .btn-secondary, .btn-secondary--dark { --_fg: #fff; --_bd: rgba(255, 255, 255, .38); }
.on-dark .btn-secondary:hover, .btn-secondary--dark:hover { --_bd: #fff; --_bg: rgba(255, 255, 255, .08); }

/* Ghost / link con freccia: azioni terziarie */
.btn-ghost {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 2.75rem; padding: 0;
  font-weight: 700; font-size: .9375rem; color: var(--c-emerald);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.btn-ghost .btn-icon { font-size: 1.125rem; transition: transform var(--dur-fast) var(--ease); }
.btn-ghost:hover { color: var(--c-orange-600); }
.btn-ghost:hover .btn-icon, .group:hover .btn-ghost .btn-icon { transform: translateX(4px); }
.on-dark .btn-ghost { color: #fff; }
.on-dark .btn-ghost:hover { color: var(--c-orange); }

/* ═══ 4. CARD ════════════════════════════════════════════════════ */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(11, 124, 127, .22); }
.card-dark {
  background: rgba(255, 255, 255, .04);
  border-color: var(--c-line-dark);
  box-shadow: none;
  color: #fff;
}
.card-dark.card-hover:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); box-shadow: 0 24px 50px -28px rgba(0,0,0,.6); }
/* Variante "opzionale" (es. Marketplace): tratteggiata, più leggera */
.card-dashed {
  background: transparent;
  border: 1.5px dashed rgba(29, 46, 70, .22);
  box-shadow: none;
}

/* Icona in riquadro, stessa misura ovunque */
.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: var(--radius);
  background: var(--c-emerald-soft); color: var(--c-emerald);
  flex-shrink: 0;
}
.icon-tile .material-symbols-outlined { font-size: 1.5rem; }
.icon-tile--orange { background: var(--c-orange-soft); color: var(--c-orange-600); }
.icon-tile--dark { background: rgba(255, 255, 255, .08); color: #fff; }
.icon-tile--sm { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); }
.icon-tile--sm .material-symbols-outlined { font-size: 1.125rem; }

/* ═══ 5. BADGE / CHIP ═══════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: .375rem;
  height: 1.625rem; padding: 0 .625rem;
  border-radius: 9999px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  background: var(--c-emerald-soft); color: var(--c-emerald);
}
.badge--orange { background: var(--c-orange-soft); color: #0A7174; }
.badge--neutral { background: rgba(29, 46, 70, .06); color: var(--c-charcoal); }
.badge--dark { background: rgba(255, 255, 255, .08); color: #e2e8f0; }
.badge--ok { background: rgba(16, 185, 129, .12); color: #047857; }
.badge--warn { background: rgba(245, 158, 11, .14); color: #b45309; }
.badge--ko { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.on-dark .badge--ok { color: #6ee7b7; }
.on-dark .badge--warn { color: #fcd34d; }
.on-dark .badge--ko { color: #fca5a5; }
.on-dark .badge--orange { color: #5FD3D5; }

.chip {
  display: inline-flex; align-items: center; gap: .375rem;
  height: 2rem; padding: 0 .75rem;
  border-radius: 9999px; border: 1px solid var(--c-line);
  background: #fff; color: var(--c-charcoal);
  font-size: .8125rem; font-weight: 600;
}
.on-dark .chip { background: rgba(255,255,255,.06); border-color: var(--c-line-dark); color: #e2e8f0; }

/* Pallino di stato */
.dot { width: .5rem; height: .5rem; border-radius: 9999px; flex-shrink: 0; background: var(--c-muted-dark); }
.dot--ok { background: var(--c-ok); }
.dot--warn { background: var(--c-warn); }
.dot--ko { background: var(--c-ko); }
.dot--live { background: var(--c-ok); box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: dot-pulse 2s var(--ease) infinite; }
@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* ═══ 6. TAB (pill) con indicatore che scorre ═══════════════════
   Markup: <div class="tabs" role="tablist"> <span class="tabs-indicator"></span>
           <button class="tab" role="tab" aria-selected="true">…</button> … </div>
   L'indicatore viene posizionato da JS (SYNEDO.syncIndicator).       */
.tabs {
  position: relative; display: inline-flex; gap: .25rem; padding: .25rem;
  border-radius: 9999px; background: rgba(29, 46, 70, .05); border: 1px solid var(--c-line);
  max-width: 100%; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: 0 1.125rem; border-radius: 9999px;
  font-weight: 600; font-size: .9375rem; color: var(--c-muted);
  white-space: nowrap; scroll-snap-align: center;
  background: none; border: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--c-charcoal); }
.tab[aria-selected="true"] { color: #fff; }
.tabs-indicator {
  position: absolute; z-index: 0; top: .25rem; bottom: .25rem; left: 0; width: 0;
  border-radius: 9999px; background: var(--c-charcoal);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
}
.on-dark .tabs { background: rgba(255,255,255,.06); border-color: var(--c-line-dark); }
.on-dark .tab { color: #cbd5e1; }
.on-dark .tab:hover { color: #fff; }
.on-dark .tab[aria-selected="true"] { color: var(--c-charcoal); }
.on-dark .tabs-indicator { background: #fff; }

/* ═══ 7. DATA VIZ di base ═══════════════════════════════════════ */
/* Barra di avanzamento: <div class="progress" style="--value:82"><span></span></div>
   Si riempie quando un antenato (o se stessa) riceve .is-visible / .is-active */
.progress { height: .5rem; border-radius: 9999px; background: rgba(29, 46, 70, .08); overflow: hidden; }
.on-dark .progress { background: rgba(255,255,255,.1); }
.progress > span {
  display: block; height: 100%; width: calc(var(--value, 0) * 1%);
  border-radius: inherit; background: var(--bar, var(--c-emerald));
  transform-origin: left; transform: scaleX(0);
  transition: transform 1000ms var(--ease);
}
.is-visible .progress > span, .progress.is-visible > span, .is-active .progress > span { transform: scaleX(1); }

/* Anello di completamento con --pct animabile */
@property --pct { syntax: '<number>'; inherits: true; initial-value: 0; }
.ring {
  --size: 7rem; --track: rgba(29, 46, 70, .08); --fill: var(--c-emerald); --pct: 0;
  width: var(--size); height: var(--size); border-radius: 9999px; flex-shrink: 0;
  background: conic-gradient(var(--fill) calc(var(--pct) * 1%), var(--track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .625rem), #000 calc(100% - .6rem));
          mask: radial-gradient(farthest-side, transparent calc(100% - .625rem), #000 calc(100% - .6rem));
  transition: --pct 1200ms var(--ease);
}
.on-dark .ring { --track: rgba(255,255,255,.1); --fill: var(--c-orange); }

/* ═══ 8. MOTION: reveal on scroll ══════════════════════════════
   <div data-reveal>…</div>  (+ style="--d:120ms" per stagger)
   main.js aggiunge .is-visible quando entra nel viewport.          */
.js [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease) var(--d, 0ms), transform var(--dur-slow) var(--ease) var(--d, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Hotspot pulsante (scena 3D e mock) */
.pulse-ring { position: relative; }
.pulse-ring::after {
  content: ""; position: absolute; inset: -6px; border-radius: 9999px;
  border: 2px solid currentColor; opacity: .6;
  animation: ring-pulse 2s var(--ease) infinite;
}
@keyframes ring-pulse { from { transform: scale(.6); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }

/* ═══ 9. HEADER ═════════════════════════════════════════════════ */
.site-header {
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ═══ 10. REDUCED MOTION ════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   STILI DI SEZIONE
   ═══════════════════════════════════════════════════════════════ */

/* ─── 04-azione ─────────────────────────────────────── */
/* §04 — SYNEDO in azione (classi az-*)
   Solo ciò che Tailwind non copre: stage 3D/slider, hotspot, tooltip,
   crossfade dei pannelli, stepper, grafico. Motion disattivato da
   prefers-reduced-motion (regola globale in styles.base.css). */

.az-bg {
  background:
    radial-gradient(55% 45% at 88% 0%, rgba(11, 124, 127, .5), transparent 70%),
    radial-gradient(35% 35% at 0% 100%, rgba(14, 164, 167, .07), transparent 70%);
}

/* Tab: su mobile solo il verbo, 3 tab a larghezza piena (niente overflow a 360px) */
.az-tab-verb { font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 767.98px) {
  .az-tabs { display: flex; width: 100%; }
  .az-tabs .tab { flex: 1 1 0; justify-content: center; padding: 0 .5rem; }
}
@media (min-width: 768px) {
  .az-tabs { align-self: flex-start; }
  .az-tab-verb { font-size: .6875rem; letter-spacing: .14em; opacity: .7; }
}
.az-tabs .tab > span { white-space: nowrap; } /* not-sr-only di Tailwind resetta white-space */
.on-dark .tab[aria-selected="true"] .az-tab-verb { color: var(--c-orange-600); opacity: 1; }

/* ── Stage ─────────────────────────────────────────────────── */
.az-stage {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 1 / 1;
  border-radius: 1.5rem;
  border: 1px solid var(--c-line-dark);
  background:
    radial-gradient(70% 55% at 50% 70%, rgba(11, 124, 127, .55), transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 22px 22px,
    #16263C;
  touch-action: pan-y;
}
@media (min-width: 480px) { .az-stage { aspect-ratio: 4 / 3; } }
@media (min-width: 768px) { .az-stage { aspect-ratio: 16 / 11; } }
@media (min-width: 1024px) {
  /* La scena si allunga fino all'altezza del pannello dati a destra:
     i due riquadri restano sempre allineati in alto e in basso. */
  .az-stage {
    aspect-ratio: auto; align-self: stretch;
    height: auto; min-height: 32rem;
  }
}

/* Illustrazioni statiche (default / fallback) */
.az-slides {
  position: absolute; inset: 0;
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  padding: 2.75rem .5rem .75rem;
  container-type: size;
  transition: opacity var(--dur-slow) var(--ease), visibility 0s linear 0s;
}
.az-slide {
  grid-area: 1 / 1; margin: 0;
  display: grid; place-items: center; min-height: 0;
  opacity: 0; visibility: hidden; transform: translateX(18px) scale(.98);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
}
.az-slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.az-art {
  position: relative;
  aspect-ratio: var(--ar);
  width: 100%;
  width: min(100cqw, 100cqh * var(--arn));
}
.az-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.az-svg polygon { stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.az-t polygon { stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.az-pad polygon { stroke: rgba(14, 164, 167, .7); stroke-width: 1; }
.az-b polygon { stroke: rgba(14, 164, 167, .7); stroke-width: 1; }
.az-tree polygon { stroke: rgba(14, 164, 167, .45); stroke-width: 1; }

/* Canvas 3D (attivato da JS solo se tutto va bene) */
.az-gl { position: absolute; inset: 0; opacity: 0; transition: opacity 800ms var(--ease); }
.az-canvas { display: block; width: 100%; height: 100%; }
.az-hs3d { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.az-stage.is-3d .az-gl { opacity: 1; }
.az-stage.is-3d .az-slides { opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow); }

/* Cromia sovrapposta */
.az-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 2rem; max-width: calc(100% - 1.5rem); padding: 0 .75rem;
  border-radius: 9999px; border: 1px solid var(--c-line-dark);
  background: rgba(20, 34, 54, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .75rem; font-weight: 700; color: #e2e8f0; white-space: nowrap; overflow: hidden;
}
.az-hint { display: none; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; color: var(--c-muted-dark); }
.az-hint .material-symbols-outlined { font-size: 1rem; }
.az-stage.is-3d .az-hint { display: inline-flex; }
.az-legend {
  flex-direction: column; gap: .375rem; padding: .625rem .75rem;
  border-radius: .75rem; border: 1px solid var(--c-line-dark);
  background: rgba(20, 34, 54, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .75rem; font-weight: 600; color: #cbd5e1;
}
.az-legend li { display: flex; align-items: center; gap: .5rem; }
.az-key { width: .625rem; height: .625rem; border-radius: 9999px; background: var(--c-orange); }
.az-key--info { background: #fff; }
.az-key--ok { background: var(--c-ok); }
.az-nav {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(20, 34, 54, .6); color: #fff; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.az-nav:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); }
.az-nav:focus-visible { border-radius: 9999px; }
.az-nav .material-symbols-outlined { font-size: 1.25rem; }

/* ── Hotspot ───────────────────────────────────────────────── */
.az-hs-group { position: absolute; inset: 0; pointer-events: none; }
.az-hs {
  --hs: var(--c-orange);
  position: absolute; left: var(--x); top: var(--y); z-index: 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: 9999px; background: none; cursor: pointer;
  pointer-events: auto;
  transition: opacity var(--dur) var(--ease) 250ms, visibility 0s linear 0s;
}
.az-hs--info { --hs: #ffffff; }
.az-hs--ok { --hs: var(--c-ok); }
.az-hs3d .az-hs { left: 0; top: 0; will-change: transform; }
.az-hs-group:not(.is-on) .az-hs {
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
.az-hs:hover, .az-hs:focus { z-index: 3; }
.az-hs:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 9999px; }
.az-hs-dot {
  position: relative; display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 9999px;
  background: var(--hs); color: #fff;
  box-shadow: 0 0 0 3px rgba(20, 34, 54, .6), 0 6px 16px -4px rgba(0, 0, 0, .55);
  transition: transform var(--dur-fast) var(--ease);
}
.az-hs--info .az-hs-dot { color: var(--c-charcoal); }
.az-hs-dot .material-symbols-outlined { font-size: 1rem; }
.az-hs-dot.pulse-ring::after { border-color: var(--hs); inset: -5px; }
.az-hs:hover .az-hs-dot, .az-hs:focus-visible .az-hs-dot { transform: scale(1.14); }

/* Tooltip col dato */
.az-tip {
  position: absolute; z-index: 5; bottom: calc(100% - .125rem); left: 50%;
  width: max-content; max-width: 15rem; padding: .5rem .75rem;
  border-radius: .625rem; background: #fff; color: var(--c-charcoal);
  box-shadow: var(--shadow-lg);
  font-size: .8125rem; line-height: 1.35; font-weight: 600; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
.az-tip-k {
  display: block; margin-bottom: .125rem;
  font-size: .625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted);
}
.az-hs--alert .az-tip-k { color: #0A7174; }
.az-hs--ok .az-tip-k { color: #047857; }
.az-hs:hover .az-tip, .az-hs:focus .az-tip {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.az-hs[data-align="start"] .az-tip { left: 0; transform: translate(0, 4px); }
.az-hs[data-align="end"] .az-tip { left: auto; right: 0; transform: translate(0, 4px); }
.az-hs[data-align="start"]:hover .az-tip, .az-hs[data-align="start"]:focus .az-tip,
.az-hs[data-align="end"]:hover .az-tip, .az-hs[data-align="end"]:focus .az-tip { transform: none; }
.az-hs--below .az-tip { bottom: auto; top: calc(100% - .125rem); }
.az-hs.az-hs--hide .az-tip { opacity: 0; visibility: hidden; }

/* ── Pannelli dati: crossfade ──────────────────────────────── */
.az-panels { display: flex; flex-direction: column; gap: 1.5rem; }
.js .az-panels { display: grid; gap: 0; }
.js .az-panel {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s linear 300ms;
}
.js .az-panel.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 500ms var(--ease) 120ms, transform 500ms var(--ease) 120ms, visibility 0s linear 0s;
}
/* Sotto lg i pannelli non sono impilati: solo quello attivo occupa spazio (niente vuoti) */
@media (max-width: 1023.98px) {
  .js .az-panel:not(.is-active) { display: none; }
  .js .az-panel.is-active { animation: az-in 450ms var(--ease) both; }
}
@keyframes az-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.az-panel:focus-visible { border-radius: var(--radius-xl); }

/* KPI */
.az-kpi {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .375rem;
  min-width: 0; padding: .75rem;
  border-radius: .875rem; border: 1px solid var(--c-line-dark); background: rgba(255, 255, 255, .04);
}
@media (min-width: 640px) { .az-kpi { padding: 1rem; } }
.az-kpi-label { font-size: .8125rem; line-height: 1.3; font-weight: 600; color: var(--c-muted-dark); }
.az-kpi-value {
  display: flex; align-items: flex-end; min-height: 2rem;
  font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); color: #fff; font-variant-numeric: tabular-nums;
}
@media (max-width: 639.98px) {
  .az-kpi { flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: .875rem; padding: .625rem .875rem; }
  .az-kpi-value { min-height: 0; min-width: 4.5rem; font-size: 1.5rem; }
  .az-kpi-label { font-size: .875rem; }
}
.az-spark { width: 100%; max-width: 4.5rem; height: 1.75rem; color: var(--c-orange); }

/* Widget e righe */
.az-widget { padding: 1rem; border-radius: 1rem; border: 1px solid var(--c-line-dark); background: rgba(255, 255, 255, .025); }
@media (min-width: 640px) { .az-widget { padding: 1.25rem; } }
.az-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: .75rem; row-gap: .375rem; padding: .625rem 0; }
.az-row-text { flex: 1 1 9rem; min-width: 0; font-size: .9375rem; font-weight: 500; line-height: 1.3; color: #e2e8f0; }
.az-row-meta { display: block; margin-top: .125rem; font-size: .75rem; font-weight: 500; color: var(--c-muted-dark); }
.az-row .badge { flex-shrink: 0; margin-left: auto; }

/* Stepper flusso segnalazione */
.az-steps { position: relative; }
.az-steps-track {
  position: absolute; top: calc(.875rem - 1px); left: 10%; right: 10%;
  height: 2px; --bar: linear-gradient(90deg, var(--c-ok), var(--c-orange));
}
.az-steps-list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
.az-step { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; min-width: 0; }
.az-step-dot {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 9999px;
  background: #24364F; border: 2px solid rgba(255, 255, 255, .18); color: #fff;
}
.az-step-dot .material-symbols-outlined { font-size: .9375rem; }
.az-step.is-done .az-step-dot { background: var(--c-ok); border-color: var(--c-ok); }
.az-step.is-current .az-step-dot { background: var(--c-orange); border-color: var(--c-orange); }
.az-step.is-current .az-step-dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 2px solid var(--c-orange); animation: ring-pulse 2s var(--ease) infinite;
}
.az-step-label { font-size: .6875rem; font-weight: 600; line-height: 1.25; color: var(--c-muted-dark); }
.az-step.is-done .az-step-label, .az-step.is-current .az-step-label { color: #e2e8f0; }
@media (min-width: 640px) { .az-step-label { font-size: .75rem; } }
/* Mobile: stepper verticale, etichette leggibili */
@media (max-width: 639.98px) {
  .az-steps-track { display: none; }
  .az-steps-list { grid-template-columns: minmax(0, 1fr); gap: .625rem; }
  .az-step { position: relative; flex-direction: row; gap: .75rem; text-align: left; }
  .az-step-label { font-size: .875rem; }
  .az-step:not(:last-child)::after {
    content: ""; position: absolute; left: calc(.875rem - 1px); top: 1.75rem; height: .625rem; width: 2px;
    background: rgba(255, 255, 255, .16);
  }
  .az-step.is-done:not(:last-child)::after { background: var(--c-ok); }
}

/* Grafico consumi (illustrativo) */
.az-illus {
  display: inline-flex; align-items: center; height: 1.375rem; padding: 0 .5rem;
  border-radius: 9999px; border: 1px dashed rgba(255, 255, 255, .24);
  font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted-dark);
}
.az-chart { display: block; width: 100%; height: auto; }
.az-swatch { width: .625rem; height: .625rem; border-radius: 2px; }
.az-swatch--before { background: rgba(255, 255, 255, .22); }
.az-swatch--after { background: var(--c-orange); }

/* Classe energetica */
.az-class {
  display: inline-flex; align-items: baseline; gap: .5rem; padding: .375rem .75rem;
  border-radius: .625rem; border: 1px solid var(--c-line-dark); background: rgba(255, 255, 255, .06);
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.25rem; color: #fff;
}
.az-class--after { border-color: rgba(14, 164, 167, .5); background: rgba(14, 164, 167, .1); }
.az-class-k { font-family: 'Inter', sans-serif; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted-dark); }
.az-scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.az-scale li { position: relative; padding-top: .625rem; text-align: center; font-size: .625rem; font-weight: 700; color: var(--c-muted-dark); }
.az-scale li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: .375rem; border-radius: 2px; background: var(--c); opacity: .85; }

/* Animazioni d'ingresso: partono quando la sezione è in vista (.az-seen) */
.js .az:not(.az-seen) .progress > span { transform: scaleX(0); }
.js .az-panel:not(.is-active) .progress > span { transition: transform 0s linear 450ms; }
.js .az-bar {
  transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0);
  transition: transform 700ms var(--ease) calc(var(--i) * 35ms);
}
.js .az-seen .az-panel.is-active .az-bar { transform: none; }
.js .az-panel:not(.is-active) .az-bar { transition: transform 0s linear 450ms; }

/* ─── 04b-approfondimento ─────────────────────────────────────── */
/* 04b-approfondimento.css — §04b Approfondimento servizi (prefisso ap-)
   Layout e colori sono utility Tailwind nel markup. Qui solo: stati JS,
   elementi ripetuti dei mock, keyframes. Stato senza classi = stato finale
   (così il contenuto è completo anche senza JS); .is-armed = pronto ad animare. */

/* ═══ NAV + PANNELLI ═════════════════════════════════════════════ */
.ap-nav {
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ap-nav.is-stuck {
  border-bottom-color: var(--c-line);
  box-shadow: 0 14px 28px -22px rgba(15, 23, 42, .4);
}
.ap-nav .tab .material-symbols-outlined { font-size: 1.25rem; }

.ap-panel:focus-visible { outline-offset: 10px; border-radius: var(--radius-lg); }
.ap-panel.is-entering { animation: ap-panel-in 460ms var(--ease) both; }
.ap-panel.is-entering .ap-mock { animation: ap-mock-in 620ms var(--ease) 40ms both; }
@keyframes ap-panel-in {
  from { opacity: 0; transform: translate3d(var(--ap-dx, 24px), 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes ap-mock-in {
  from { opacity: 0; transform: translate3d(calc(var(--ap-dx, 24px) * 1.5), 0, 0) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ═══ GUSCIO DEI MOCK (finestra app) ═════════════════════════════ */
.ap-tag {
  display: inline-flex; align-items: center; flex-shrink: 0;
  height: 1.375rem; padding: 0 .5rem; border-radius: 9999px;
  background: rgba(29, 46, 70, .06); color: var(--c-muted);
  font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.ap-kicker {
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #64748b; /* slate-500 */
}
.ap-side {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .625rem; color: #94a3b8;
}
.ap-side .material-symbols-outlined { font-size: 1.25rem; }
.ap-side.is-on { background: var(--c-emerald-soft); color: var(--c-emerald); }
.ap-side--home { margin-bottom: .5rem; background: var(--c-charcoal); color: #fff; }

/* ═══ 01 FASCICOLO ═══════════════════════════════════════════════ */
.ap-fa-progress > span { transition: transform 1000ms var(--ease), width 450ms var(--ease); }

.ap-fa-pip {
  flex: 1 1 0; height: .3125rem; border-radius: 9999px; background: #e2e8f0;
  transition: background-color 300ms var(--ease);
}
.ap-fa-pip[data-s="ok"] { background: var(--c-ok); }
.ap-fa-pip[data-s="warn"] { background: var(--c-warn); }
.ap-fa-pip[data-s="ko"] { background: var(--c-ko); }

.ap-fa-doc {
  display: flex; align-items: center; gap: .375rem;
  font-size: .75rem; line-height: 1.25rem; color: #475569;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.ap-fa-doc > .material-symbols-outlined { font-size: 1rem; }
.ap-fa-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-fa-meta { flex-shrink: 0; font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.ap-fa-folder { transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.ap-fa-folder.is-hit { border-color: rgba(11, 124, 127, .45); box-shadow: 0 0 0 3px rgba(11, 124, 127, .1); }

.ap-fa-mk, .ap-fa-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  font-size: .625rem; font-weight: 800; line-height: 1; color: #fff; background: #94a3b8;
}
.ap-fa-mk {
  position: absolute; top: 50%; margin: -.625rem 0 0 -.625rem;
  box-shadow: 0 0 0 3px #fff;
  transition: transform 400ms var(--ease), opacity 400ms var(--ease);
}
.ap-fa-num { margin-top: .0625rem; }
.ap-fa-mk[data-s="ok"], .ap-fa-num[data-s="ok"] { background: var(--c-emerald); }
.ap-fa-mk[data-s="warn"], .ap-fa-num[data-s="warn"] { background: var(--c-warn); color: var(--c-charcoal); }
.ap-fa-mk[data-s="ko"], .ap-fa-num[data-s="ko"] { background: var(--c-ko); }
li.ap-fa-tl { transition: opacity 400ms var(--ease), transform 400ms var(--ease); }

/* Documento "in volo" verso la cartella (creato da JS) */
.ap-fa-fly {
  position: absolute; z-index: 5; pointer-events: none;
  display: inline-flex; align-items: center; gap: .375rem; max-width: 13rem;
  padding: .375rem .625rem; border-radius: .5rem;
  background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow-md);
  font-size: .75rem; font-weight: 600; color: var(--c-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-fa-fly .material-symbols-outlined { font-size: 1rem; color: var(--c-ko); }

.ap-fa.is-armed .ap-fa-doc:not(.is-in) { opacity: 0; transform: translateX(-6px); }
.ap-fa.is-armed .ap-fa-pip:not(.is-in) { background: #e2e8f0; }
.ap-fa.is-armed .ap-fa-mk:not(.is-in) { opacity: 0; transform: scale(.3); }
.ap-fa.is-armed li.ap-fa-tl:not(.is-in) { opacity: 0; transform: translateY(6px); }

/* ═══ 02 RIQUALIFICAZIONE ════════════════════════════════════════ */
.ap-rq-track {
  background-color: #f8fafc;
  background-image:
    linear-gradient(to right, transparent calc(33.333% - 1px), rgba(29, 46, 70, .14) calc(33.333% - 1px), rgba(29, 46, 70, .14) 33.333%, transparent 33.333%, transparent calc(66.666% - 1px), rgba(29, 46, 70, .14) calc(66.666% - 1px), rgba(29, 46, 70, .14) 66.666%, transparent 66.666%),
    linear-gradient(to right, rgba(29, 46, 70, .05) 1px, transparent 1px);
  background-size: 100% 100%, calc(100% / 12) 100%;
}
.ap-rq-bar {
  position: absolute; top: .25rem; bottom: .25rem;
  display: flex; align-items: center; overflow: hidden;
  padding: 0 .5rem; border-radius: .375rem;
  background: var(--c-emerald); color: #fff;
  font-size: .625rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
  transform-origin: left center;
  transition: transform 800ms var(--ease) var(--d, 0ms), background-color 300ms var(--ease);
}
.ap-rq-bar > span { transition: opacity 300ms var(--ease) calc(var(--d, 0ms) + 450ms); }
.ap-rq-row { transition: background-color 300ms var(--ease); }
.ap-rq-row.is-hl { background: rgba(14, 164, 167, .07); }
.ap-rq-row.is-hl .ap-rq-bar { background: var(--c-orange-600); }
.ap-rq.is-armed .ap-rq-bar:not(.is-in) { transform: scaleX(0); }
.ap-rq.is-armed .ap-rq-bar:not(.is-in) > span { opacity: 0; transition-delay: 0ms; }

/* ═══ 03 FACILITY MANAGEMENT ═════════════════════════════════════ */
.ap-fm-av {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.75rem; height: 1.75rem; border-radius: 9999px; box-shadow: 0 0 0 2px #fff;
  font-size: .6875rem; font-weight: 800;
}
.ap-fm-av--sm { width: 1.25rem; height: 1.25rem; font-size: .625rem; box-shadow: none; margin-top: -.0625rem; }
.ap-fm-dot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 9999px;
  background: #fff; border: 1.5px solid #cbd5e1; color: #94a3b8;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.ap-fm-dot .material-symbols-outlined { font-size: 1rem; }
.ap-fm-label { font-size: .6875rem; font-weight: 600; line-height: 1.2; color: #64748b; transition: color 300ms var(--ease); }
.ap-fm-step[data-state="done"] .ap-fm-dot { background: var(--c-emerald); border-color: var(--c-emerald); color: #fff; }
.ap-fm-step[data-state="current"] .ap-fm-dot { background: var(--c-orange); border-color: var(--c-orange); color: #fff; box-shadow: 0 0 0 4px rgba(14, 164, 167, .18); }
.ap-fm-step[data-state="current"] .ap-fm-label, .ap-fm-step[data-state="done"] .ap-fm-label { color: var(--c-charcoal); }
.ap-fm-fill { transition: width 600ms var(--ease); }

.ap-fm-col { transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.ap-fm-col.is-current { background: rgba(14, 164, 167, .06); box-shadow: inset 0 0 0 1.5px rgba(14, 164, 167, .35); }
@media (max-width: 639.98px) {
  .ap-fm-col:not(.is-current) { display: none; }
}
.ap-fm-ghost {
  border-radius: .5rem; border: 1px solid rgba(226, 232, 240, .9); background: rgba(255, 255, 255, .7);
  padding: .5rem .625rem; font-size: .6875rem; line-height: 1.3;
}
.ap-fm-ghost p:first-child { font-weight: 600; color: #94a3b8; }
.ap-fm-ghost p + p { margin-top: .125rem; font-size: .625rem; color: #cbd5e1; }

.ap-pill {
  display: inline-flex; align-items: center; max-width: 100%;
  height: 1.25rem; padding: 0 .5rem; border-radius: 9999px;
  font-size: .625rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-pill--new { background: var(--c-orange-soft); color: #0A7174; }
.ap-pill--prog { background: rgba(29, 46, 70, .07); color: var(--c-charcoal); }
.ap-pill--done { background: rgba(16, 185, 129, .14); color: #047857; }

.ap-fm.is-armed .ap-fm-log > li:not(.is-in) { display: none; }
.ap-fm-log > li.is-new { animation: ap-rise 420ms var(--ease) both; }
@keyframes ap-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ═══ 04 BUILDING CHECK ══════════════════════════════════════════ */
.ap-bc-area {
  display: flex; align-items: center; gap: .625rem;
  padding: .375rem .5rem; border-radius: .625rem;
  transition: background-color 300ms var(--ease);
}
.ap-bc-area.is-hl { background: #f1f5f9; }
.ap-bc-n {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  background: rgba(29, 46, 70, .07); font-size: .625rem; font-weight: 800; color: var(--c-charcoal);
}
.ap-bc-light {
  display: inline-flex; flex-shrink: 0; gap: .25rem;
  padding: .3125rem .4375rem; border-radius: 9999px; background: var(--c-charcoal);
}
.ap-bc-light > span {
  width: .5rem; height: .5rem; border-radius: 9999px; background: rgba(255, 255, 255, .14);
  transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.ap-bc-area[data-s="ko"] .l-ko { background: var(--c-ko); box-shadow: 0 0 6px 1px rgba(239, 68, 68, .7); }
.ap-bc-area[data-s="warn"] .l-warn { background: var(--c-warn); box-shadow: 0 0 6px 1px rgba(245, 158, 11, .7); }
.ap-bc-area[data-s="ok"] .l-ok { background: var(--c-ok); box-shadow: 0 0 6px 1px rgba(16, 185, 129, .7); }
.ap-bc.is-armed .ap-bc-area:not(.is-in) .ap-bc-light > span { background: rgba(255, 255, 255, .14); box-shadow: none; }

.ap-bc-hot .core { fill: #94a3b8; stroke: #fff; stroke-width: 2; transition: fill 300ms var(--ease); }
.ap-bc-hot text { fill: #fff; font: 800 10px/1 Inter, sans-serif; text-anchor: middle; }
.ap-bc-hot[data-s="ok"] .core { fill: var(--c-ok); }
.ap-bc-hot[data-s="warn"] .core { fill: var(--c-warn); }
.ap-bc-hot[data-s="warn"] text { fill: var(--c-charcoal); }
.ap-bc-hot[data-s="ko"] .core { fill: var(--c-ko); }
.ap-bc-hot .halo { fill: none; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ap-bc-hot[data-s="ko"] .halo { stroke: var(--c-ko); }
.ap-bc-hot[data-s="warn"] .halo { stroke: var(--c-warn); }
.ap-bc-hot.is-hl .core { stroke: var(--c-charcoal); }
.ap-bc.is-live .ap-bc-hot.is-in:not([data-s="ok"]) .halo { animation: ap-halo 2s var(--ease) infinite; }
.ap-bc.is-armed .ap-bc-hot:not(.is-in) .core { fill: #cbd5e1; }
.ap-bc.is-armed .ap-bc-hot:not(.is-in) text { fill: #fff; }

.ap-bc-scan { opacity: 0; }
.ap-bc.is-scanning .ap-bc-scan { animation: ap-scan 2400ms var(--ease) both; }
@keyframes ap-scan {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(212px); opacity: 0; }
}
.ap-bc-needle {
  transform-box: view-box; transform-origin: 40px 40px;
  transform: rotate(var(--a, 0deg));
  transition: transform 1400ms var(--ease);
}

@keyframes ap-halo {
  from { transform: scale(.8); opacity: .8; }
  to { transform: scale(2); opacity: 0; }
}

/* ═══ 05 SMART BUILDING ══════════════════════════════════════════ */
.ap-sm-plot {
  background-image: linear-gradient(to bottom, rgba(29, 46, 70, .07) 1px, transparent 1px);
  background-size: 100% 25%;
  border-bottom: 1px solid rgba(29, 46, 70, .12);
}
.ap-sm-line { fill: none; stroke: var(--c-emerald); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.ap-sm-area { fill: url(#ap-sm-grad); transition: opacity 700ms var(--ease) 200ms; }
.ap-sm-thr { stroke: var(--c-warn); stroke-width: 1.5; stroke-dasharray: 6 5; }
.ap-sm-anom circle { fill: #fff; stroke: var(--c-warn); stroke-width: 2.5; }
.ap-sm-now .core { fill: var(--c-emerald); stroke: #fff; stroke-width: 2; }
.ap-sm-now .ring { fill: none; stroke: var(--c-emerald); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ap-sm.is-live .ap-sm-now .ring { animation: ap-halo 2s var(--ease) infinite; }
.ap-sm-anom, .ap-sm-now { transition: opacity 400ms var(--ease); }
.ap-sm.is-armed .ap-sm-area, .ap-sm.is-armed .ap-sm-anom, .ap-sm.is-armed .ap-sm-now { opacity: 0; }

/* ═══ 06 MARKETPLACE ═════════════════════════════════════════════ */
.ap-mk-card {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem; border-radius: .75rem;
  border: 1px solid #e2e8f0; background: #fff;
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease), opacity 400ms var(--ease), transform 400ms var(--ease);
}
@media (min-width: 640px) {
  .ap-mk-card { flex-direction: column; align-items: stretch; gap: 0; padding: .875rem; }
}
.ap-mk-meta { margin-top: .25rem; font-size: .6875rem; font-weight: 600; color: #475569; font-variant-numeric: tabular-nums; }
.ap-mk-card.is-hl { border-color: rgba(14, 164, 167, .55); box-shadow: 0 0 0 3px rgba(14, 164, 167, .12), var(--shadow-md); }
.ap-mk-toast {
  opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.ap-mk-toast.is-show { opacity: 1; transform: none; }
.ap-mk.is-armed .ap-mk-card:not(.is-in) { opacity: 0; transform: translateY(8px); }

/* ═══ REDUCED MOTION ═════════════════════════════════════════════
   (le durate sono già azzerate da styles.base.css; qui spegniamo i loop) */
@media (prefers-reduced-motion: reduce) {
  .ap-panel.is-entering, .ap-panel.is-entering .ap-mock { animation: none; }
  .ap-bc-scan { display: none; }
  .ap-bc-hot .halo, .ap-sm-now .ring { animation: none !important; opacity: 0; }
}

/* ─── narrative ─────────────────────────────────────── */
/* narrative.css — header, §01 hero, §02 pilastri, §03 servizi, §05 video,
   §06 esperienza, §07 insight, §08 CTA, footer.
   Solo ciò che le utility Tailwind non coprono bene: stati JS, mock, pseudo-elementi, keyframes. */

/* ═══ HEADER ════════════════════════════════════════════════════ */
.hd {
  --hd-fg: #fff;
  --hd-muted: rgba(255, 255, 255, .78);
  --hd-mark: #fff;
  color: var(--hd-fg);
  background-color: transparent;
  border-bottom: 1px solid transparent;
}
/* Solido: dopo lo scroll, con menu aperto, oppure sempre se JS non c'è */
.hd.is-solid, .hd.is-menu-open, html:not(.js) .hd {
  --hd-fg: var(--c-charcoal);
  --hd-muted: var(--c-muted);
  --hd-mark: var(--c-charcoal);
  background-color: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
          backdrop-filter: saturate(1.5) blur(14px);
  border-bottom-color: var(--c-line);
  box-shadow: 0 6px 24px -18px rgba(15, 23, 42, .35);
}
/* Con il menu aperto niente backdrop-filter: creerebbe un containing block per il pannello
   position:fixed (che resterebbe chiuso nei 72px dell'header invece di coprire la pagina). */
.hd.is-menu-open { background-color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hd-logo { color: var(--hd-fg); }
.hd-logo-mark { color: var(--hd-mark); transition: color var(--dur) var(--ease); }

.hd-link {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0 .875rem; border-radius: 9999px;
  font-size: .9375rem; font-weight: 600; color: var(--hd-muted);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.hd-link:hover { color: var(--hd-fg); }
.hd-link::after {
  content: ""; position: absolute; left: 50%; bottom: .3rem;
  width: 1rem; height: 2px; border-radius: 2px; margin-left: -.5rem;
  background: var(--c-orange);
  transform: scaleX(0); transition: transform var(--dur) var(--ease);
}
.hd-link[aria-current] { color: var(--hd-fg); }
.hd-link[aria-current]::after { transform: scaleX(1); }
/* 7 voci + logo + CTA: tra lg e xl i link si compattano per restare su una riga */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hd-link { padding: 0 .5rem; font-size: .875rem; }
}

/* Su schermi piccolissimi il CTA si compatta per non scontrarsi con logo e hamburger */
@media (max-width: 389px) {
  .hd .hd-cta { padding: 0 .875rem; font-size: .875rem; }
}

/* Hamburger animato */
.hd-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  color: var(--hd-fg); background: transparent; border: 0; cursor: pointer;
}
.hd-burger:hover { background-color: rgba(127, 127, 127, .12); }
.hd-burger-lines { position: relative; width: 1.25rem; height: .875rem; }
.hd-burger-lines > span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), top var(--dur) var(--ease);
}
.hd-burger-lines > span:nth-child(1) { top: 0; }
.hd-burger-lines > span:nth-child(2) { top: calc(50% - 1px); }
.hd-burger-lines > span:nth-child(3) { top: calc(100% - 2px); }
.hd-burger[aria-expanded="true"] .hd-burger-lines > span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.hd-burger[aria-expanded="true"] .hd-burger-lines > span:nth-child(2) { opacity: 0; }
.hd-burger[aria-expanded="true"] .hd-burger-lines > span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

/* Blocco scroll del body con menu aperto */
html.hd-lock, html.hd-lock body { overflow: hidden; }

/* Pannello mobile */
.hd-panel {
  position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0;
  background: #fff; color: var(--c-charcoal);
  overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--c-line);
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hd-panel.is-open { opacity: 1; transform: none; }
.hd-panel[hidden] { display: none; }
.hd-mlink {
  display: flex; align-items: center; gap: 1rem;
  min-height: 3.75rem; padding: .5rem .25rem;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.375rem; letter-spacing: -0.01em;
  color: var(--c-charcoal);
  transition: color var(--dur-fast) var(--ease);
}
.hd-mlink .material-symbols-outlined { color: #cbd5e1; font-size: 1.25rem; transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.hd-mlink:hover, .hd-mlink[aria-current] { color: var(--c-emerald); }
.hd-mlink:hover .material-symbols-outlined, .hd-mlink[aria-current] .material-symbols-outlined { color: var(--c-orange); transform: translateX(4px); }
.hd-mnum { font-family: 'Inter', sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: #94a3b8; width: 1.5rem; }

/* ═══ §01 HERO ══════════════════════════════════════════════════ */
.hero { min-height: clamp(640px, 100svh, 980px); display: flex; align-items: center; }
.hero-inner { z-index: 1; }

/* Disegno dell'edificio: invertito → linee chiare sul charcoal */
.hero-bg-img {
  position: absolute; top: 50%; right: -18%;
  height: 135%; width: auto; max-width: none; aspect-ratio: 1;
  transform: translateY(-50%);
  filter: invert(1) contrast(1.2);
  mix-blend-mode: screen;
  opacity: .16;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  user-select: none; pointer-events: none;
}
@media (min-width: 1024px) {
  .hero-bg-img { right: -6%; height: 125%; opacity: .26; }
}
.hero-glow {
  background:
    radial-gradient(48rem 32rem at 82% 28%, rgba(11, 124, 127, .55), transparent 70%),
    radial-gradient(30rem 22rem at 8% 92%, rgba(14, 164, 167, .10), transparent 70%),
    linear-gradient(90deg, rgba(29, 46, 70, .92) 0%, rgba(29, 46, 70, .55) 45%, rgba(29, 46, 70, 0) 75%);
}
.hero-grid {
  opacity: .07;
  background-image:
    linear-gradient(rgba(255, 255, 255, .7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .7) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 80% at 20% 40%, #000, transparent);
          mask-image: radial-gradient(70% 80% at 20% 40%, #000, transparent);
}
/* Evidenziazione nel titolo: sottolineatura arancio che si disegna */
.hero-mark {
  background-image: linear-gradient(var(--c-orange), var(--c-orange));
  background-repeat: no-repeat;
  background-size: 100% .12em;
  background-position: 0 92%;
  padding-bottom: .04em;
}
.js .hero-mark { background-size: 0 .12em; animation: hero-underline 900ms var(--ease) 600ms forwards; }
@keyframes hero-underline { to { background-size: 100% .12em; } }

/* Ingresso al caricamento (stagger con --d) */
.js .hero-in { opacity: 0; transform: translateY(14px); animation: hero-in var(--dur-slow) var(--ease) var(--d, 0ms) forwards; }
@keyframes hero-in { to { opacity: 1; transform: none; } }

/* Anteprima prodotto */
.hero-stage { padding: 3rem 0 3.5rem; perspective: 1400px; }
.hero-layer {
  --px: 0; --py: 0; --sy: 0;
  transform: translate3d(calc(var(--px) * var(--depth, 1) * 8px), calc(var(--py) * var(--depth, 1) * 8px + var(--sy) * var(--depth, 1) * 1px), 0);
  transition: transform 500ms var(--ease);
  will-change: transform;
}
.hero-mock {
  position: relative; z-index: 1;
  background: #fff; color: var(--c-charcoal);
  border-radius: var(--radius-xl);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .08);
  overflow: hidden;
}
/* Il mock è chiaro dentro una sezione scura: ripristina i colori "chiari" dei componenti */
.hero-mock .ring { --track: rgba(29, 46, 70, .08); --fill: var(--c-emerald); }
.hero-mock .badge--ok { color: #047857; }
.hero-mock .badge--warn { color: #b45309; }
.hero-float { position: absolute; z-index: 2; }
.hero-float--a { top: 0; left: -2.5rem; }
.hero-float--b { bottom: .75rem; right: -1.75rem; }
.js .hero-float { opacity: 0; animation: hero-fade var(--dur-slow) var(--ease) forwards; }
@keyframes hero-fade { to { opacity: 1; } }
.js .hero-float--a { animation-delay: 900ms; }
.js .hero-float--b { animation-delay: 1300ms; }
.js .hero-float > div { animation: hero-bob 6s ease-in-out infinite; }
.js .hero-float--b > div { animation-delay: -3s; }
@keyframes hero-bob { 50% { transform: translateY(-6px); } }

/* Indicatore di scroll */
.hero-scroll-line {
  position: relative; display: block; width: 1px; height: 2.5rem; overflow: hidden;
  background: rgba(255, 255, 255, .2);
}
.hero-scroll-line::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: var(--c-orange);
  animation: hero-scroll 2.2s var(--ease) infinite;
}
@keyframes hero-scroll { to { top: 100%; } }
@media (max-height: 700px) { .hero-scroll { display: none; } }

/* ═══ §02 PILASTRI ══════════════════════════════════════════════ */
.pl-num {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 2.75rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(29, 46, 70, .18);
  transition: -webkit-text-stroke-color var(--dur) var(--ease);
}
.pl-card:hover .pl-num { -webkit-text-stroke-color: var(--c-emerald); }
.pl-card--accent:hover .pl-num { -webkit-text-stroke-color: var(--c-orange); }
/* Filetto superiore che si disegna all'hover */
.pl-card::before {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: -1px; height: 2px; border-radius: 2px;
  background: var(--c-emerald); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.pl-card--accent::before { background: var(--c-orange); }
.pl-card:hover::before { transform: scaleX(1); }

/* ═══ §03 SERVIZI — indice compatto ════════════════════════════
   Un solo pannello a righe (1 colonna mobile, 2 da md). Le linee tra
   le voci sono il gap da 1px che lascia vedere il fondo del pannello.
   Hover (fondo, filetto, icona) su tutte le voci; solo le voci <a>
   hanno "Scopri" con freccia e il cursore da link.
   Varianti voce: --orange (Riqualificazione), --muted (Marketplace).  */
.svx {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
@media (min-width: 768px) { .svx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svx > li { display: flex; background: #fff; }

.svx-item {
  --_ac: var(--c-emerald);            /* barra, icona, riempimento */
  --_tx: var(--c-emerald);            /* testo d'accento (AA) */
  --_tint: rgba(11, 124, 127, .035);     /* fondo all'hover */
  position: relative; flex: 1;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: .875rem; padding: 1.125rem 1rem;
  color: inherit; text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
@media (min-width: 640px) { .svx-item { gap: 1.25rem; padding: 1.375rem 1.5rem; } }
@media (min-width: 1024px) { .svx-item { padding: 1.5rem 1.75rem; } }
.svx-item--orange { --_ac: var(--c-orange-600); --_tx: #0A7174; --_tint: rgba(14, 164, 167, .05); }
.svx-item--muted { --_ac: var(--c-charcoal); --_tx: var(--c-muted); --_tint: rgba(29, 46, 70, .03); }
a.svx-item { grid-template-columns: auto minmax(0, 1fr) auto; }
.svx-item:hover { background: var(--_tint); }
a.svx-item:focus-visible { outline-offset: -4px; }

/* Filetto verticale che entra all'hover */
.svx-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--_ac); transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur) var(--ease);
}
.svx-item:hover::before, a.svx-item:focus-visible::before { transform: scaleY(1); }

/* Icona in cerchio a filo: si riempie all'hover */
.svx-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  border: 1px solid var(--c-line); background: #fff; color: var(--_ac);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.svx-icon .material-symbols-outlined { font-size: 1.25rem; }
@media (min-width: 640px) {
  .svx-icon { width: 2.75rem; height: 2.75rem; }
  .svx-icon .material-symbols-outlined { font-size: 1.375rem; }
}
.svx-item--muted .svx-icon { border-style: dashed; border-color: rgba(29, 46, 70, .25); color: var(--c-muted); }
.svx-item:hover .svx-icon { background: var(--_ac); border-color: var(--_ac); border-style: solid; color: #fff; }

.svx-body { display: flex; flex-direction: column; }
/* Riga meta: numero · verbo-pilastro */
.svx-meta {
  display: flex; align-items: center; gap: .5rem;
  font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--_tx);
}
.svx-meta > span {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #64748b; font-variant-numeric: tabular-nums; letter-spacing: .06em;
}
.svx-meta > span::after { content: ""; width: .75rem; height: 1px; background: currentColor; opacity: .5; }
.svx-name {
  margin-top: .25rem;
  font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: -.01em;
  font-size: 1.0625rem; line-height: 1.3; color: var(--c-charcoal);
}
.svx-desc { margin-top: .25rem; font-size: .875rem; line-height: 1.5; color: var(--c-muted); }
@media (min-width: 1024px) {
  .svx-name { font-size: 1.125rem; }
  .svx-desc { font-size: .9375rem; }
}

/* "Scopri" della voce cliccabile */
.svx-cta {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .875rem; font-weight: 700; color: var(--_tx);
  transition: color var(--dur-fast) var(--ease);
}
.svx-cta .material-symbols-outlined { font-size: 1.125rem; transition: transform var(--dur-fast) var(--ease); }
a.svx-item:hover .svx-cta { color: var(--c-orange-600); }
a.svx-item:hover .svx-cta .material-symbols-outlined,
a.svx-item:focus-visible .svx-cta .material-symbols-outlined { transform: translateX(4px); }

/* ═══ §05 SCOPRI SYNEDO — percorso in 7 passaggi ═══════════════ */
.vd-bg {
  background:
    radial-gradient(50rem 30rem at 85% 0%, rgba(14, 164, 167, .12), transparent 65%),
    radial-gradient(40rem 30rem at 0% 100%, rgba(0, 0, 0, .25), transparent 70%);
}

/* Mobile/tablet: percorso verticale */
.vd-path { --node: 3rem; position: relative; display: grid; gap: 2rem; list-style: none; margin-left: 0; padding: 0; }
.vd-path::before,
.vd-path::after {
  content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: calc(var(--node) / 2); bottom: calc(var(--node) / 2);
  width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .15);
}
.vd-path::after {
  background: var(--c-orange);
  transform-origin: top; transform: scaleY(0);
  transition: transform 1600ms var(--ease) 150ms;
}
.vd-path.is-visible::after, html:not(.js) .vd-path::after { transform: none; }

.vd-step { position: relative; display: grid; grid-template-columns: var(--node) 1fr; gap: 1.25rem; align-items: start; }
.vd-node {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 9999px;
  background: var(--c-emerald); border: 1.5px solid rgba(255, 255, 255, .25); color: #fff;
  transition: border-color var(--dur) var(--ease) var(--d, 0ms), color var(--dur) var(--ease) var(--d, 0ms), box-shadow var(--dur) var(--ease) var(--d, 0ms);
}
.vd-node .material-symbols-outlined { font-size: 1.375rem; }
.vd-path.is-visible .vd-node, html:not(.js) .vd-node {
  border-color: var(--c-orange); color: var(--c-orange);
  box-shadow: 0 0 0 6px rgba(14, 164, 167, .12);
}
/* Servizi professionali: opzionali → nodo tratteggiato */
.vd-step:last-child .vd-node { border-style: dashed; }

.vd-step-num { font-size: .75rem; font-weight: 800; letter-spacing: .16em; color: var(--c-orange); padding-top: .125rem; }
.vd-step-title { margin-top: .375rem; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.01em; color: #fff; }
.vd-step-text { margin-top: .5rem; font-size: 1rem; line-height: 1.55; color: rgba(231, 246, 246, .75); }

.js .vd-step { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease) var(--d, 0ms), transform var(--dur-slow) var(--ease) var(--d, 0ms); }
.js .vd-path.is-visible .vd-step { opacity: 1; transform: none; }
/* Il percorso non sfuma come blocco: entrano i singoli passaggi */
.js .vd-path[data-reveal] { opacity: 1; transform: none; }

/* Desktop: percorso orizzontale su 7 colonne */
@media (min-width: 1024px) {
  .vd-path { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.5rem; }
  .vd-path::before,
  .vd-path::after {
    top: calc(var(--node) / 2 - 1px); bottom: auto; height: 2px; width: auto;
    left: calc(var(--node) / 2);
    right: calc((100% - 9rem) / 7 - var(--node) / 2);
  }
  .vd-path::after { transform-origin: left; transform: scaleX(0); }
  .vd-step { grid-template-columns: 1fr; gap: 1.25rem; }
  .vd-step-title { font-size: 1.0625rem; }
}

/* ═══ §06 ESPERIENZA ════════════════════════════════════════════ */
/* Numeri protagonisti: numero sopra, etichetta sotto (dt/dd invertiti visivamente) */
.ex-stat {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .875rem;
  padding-top: 1.5rem; border-top: 2px solid var(--c-charcoal);
}
.ex-stat-num {
  font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: -0.045em; line-height: .9;
  font-size: clamp(3.5rem, 2.4rem + 3vw, 5rem); color: var(--c-emerald); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ex-stat-num--todo { color: rgba(11, 124, 127, .35); }
.ex-stat-label { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--c-charcoal); max-width: 16rem; }
.ex-stat-sub { display: block; margin-top: .25rem; font-size: .8125rem; font-weight: 500; color: #94a3b8; }

/* Fascia partner */
.ex-logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-height: 7rem; padding: 1.25rem .75rem; text-align: center;
}
.ex-logo + .ex-logo { border-left: 1px solid rgba(29, 46, 70, .08); }
@media (max-width: 767px) {
  .ex-logo:nth-child(3) { border-left: 0; }
  .ex-logo:nth-child(n+3) { border-top: 1px solid rgba(29, 46, 70, .08); }
}
.ex-wordmark, .ex-logo-img {
  filter: grayscale(1); opacity: .5;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ex-logo:hover .ex-wordmark, .ex-logo:hover .ex-logo-img { filter: none; opacity: 1; }
.ex-wordmark { color: var(--c-charcoal); white-space: nowrap; font-size: clamp(1.0625rem, .95rem + .6vw, 1.375rem); line-height: 1; }
.ex-wordmark--ideas { font-family: 'Montserrat', sans-serif; font-weight: 900; letter-spacing: .28em; margin-right: -.28em; }
.ex-wordmark--zerokubo { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.04em; }
.ex-wordmark--nc { font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: .02em; }
.ex-wordmark--73 { font-family: 'Inter', sans-serif; font-weight: 500; letter-spacing: -0.01em; }
.ex-wordmark--73 b { font-family: 'Montserrat', sans-serif; font-weight: 900; }
.ex-amp { font-weight: 500; margin: 0 .05em; }
.ex-logo:hover .ex-wordmark--ideas, .ex-logo:hover .ex-wordmark--nc { color: var(--c-emerald); }
.ex-logo:hover .ex-amp, .ex-logo:hover .ex-wordmark--73 b { color: var(--c-orange-600); }
.ex-role { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: #94a3b8; }

/* ═══ §07 INSIGHT ═══════════════════════════════════════════════
   Stile editoriale, diverso dalle card prodotto (§02): niente box né ombra, filetto in alto
   che diventa arancione all'hover, fonte come occhiello, link esplicito con icona di link esterno. */
.in-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding-top: 1.5rem; border-top: 1px solid rgba(29, 46, 70, .16);
}
.in-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px;
  background: var(--c-orange); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.in-card:hover::before, .in-card:focus-visible::before { transform: scaleX(1); }
/* Da md in su: le 5 righe di ogni articolo (fonte, titolo, sottotitolo, descrizione, link) condividono
   le tracce della griglia → partono alla stessa altezza in tutte le colonne.
   Lo spazio verticale tra righe di articoli è dato dal margin dei <li>, non dal row-gap (che finirebbe tra le righe interne). */
@media (min-width: 768px) {
  ul.in-list { row-gap: 0; } /* ul. per vincere su gap-y-12 di Tailwind */
  .in-list > li { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  .in-list > li:nth-child(n+4) { margin-top: 3.5rem; }
  .in-list .in-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
}
.in-src {
  font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
  color: var(--c-charcoal);
}
.in-src-label { margin-right: .25rem; color: #94a3b8; }
.in-src abbr { text-decoration: none; }
.in-q {
  margin: 1rem 0 0;
  font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 1.15rem + .35vw, 1.375rem); line-height: 1.3; text-wrap: balance;
  color: var(--c-charcoal);
  transition: color var(--dur-fast) var(--ease);
}
.in-card:hover .in-q { color: var(--c-emerald); }
.in-sub {
  align-self: start; /* in subgrid la barretta resta alta quanto il testo, non quanto la riga */
  margin-top: 1rem; padding-left: .875rem; border-left: 2px solid var(--c-orange);
  font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--c-emerald);
}
.in-desc { margin: 1rem 0 1.5rem; font-size: .9375rem; line-height: 1.65; color: #475569; }
.in-foot {
  margin-top: auto; align-self: start; justify-self: start; /* a sinistra sia in flex (mobile) sia in subgrid */
  display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem;
  font-size: .9375rem; font-weight: 700; color: var(--c-charcoal);
  transition: color var(--dur-fast) var(--ease);
}
.in-ext { font-size: 1.125rem; transition: transform var(--dur-fast) var(--ease); }
.in-card:hover .in-foot { color: var(--c-orange-600); }
.in-card:hover .in-ext { transform: translate(2px, -2px); }

/* ═══ §08 CTA + FORM ════════════════════════════════════════════ */
.cta-deco {
  background:
    radial-gradient(36rem 24rem at 0% 0%, rgba(11, 124, 127, .55), transparent 70%),
    radial-gradient(28rem 20rem at 45% 110%, rgba(14, 164, 167, .14), transparent 70%);
}
.cta-label { display: block; margin-bottom: .5rem; font-size: .9375rem; font-weight: 700; color: var(--c-charcoal); }
.cta-form .cta-input {
  display: block; width: 100%; min-height: 3.25rem;
  padding: .75rem 1rem; border-radius: var(--radius);
  border: 1.5px solid rgba(29, 46, 70, .18); background-color: #fff;
  font-size: 1rem; color: var(--c-charcoal);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cta-form .cta-input::placeholder { color: #94a3b8; }
.cta-form .cta-input:hover { border-color: rgba(29, 46, 70, .32); }
.cta-form .cta-input:focus { outline: none; border-color: var(--c-emerald); box-shadow: 0 0 0 4px rgba(11, 124, 127, .14); }
.cta-form .cta-input[aria-invalid="true"] { border-color: var(--c-ko); box-shadow: 0 0 0 4px rgba(239, 68, 68, .1); }
.cta-form .cta-check {
  flex-shrink: 0; width: 1.375rem; height: 1.375rem; margin-top: .125rem;
  border-radius: .375rem; border: 1.5px solid rgba(29, 46, 70, .3); color: var(--c-emerald);
  cursor: pointer;
}
.cta-form .cta-check:focus { box-shadow: 0 0 0 4px rgba(11, 124, 127, .14); outline: none; }
.cta-form .cta-check:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }
.cta-form .cta-check[aria-invalid="true"] { border-color: var(--c-ko); }
.cta-error {
  display: flex; align-items: flex-start; gap: .375rem;
  margin-top: .5rem; font-size: .875rem; font-weight: 600; color: #b91c1c;
}
.cta-error::before { content: "error"; font-family: 'Material Symbols Outlined'; font-size: 1.125rem; line-height: 1.2; font-weight: 400; }
.cta-error[hidden] { display: none; }
/* Il preflight Tailwind azzera il background dei button[type=submit]: lo ripristino per il bottone del form */
.cta-form .btn-primary { background-color: var(--_bg); }
.cta-form .btn-primary.is-loading { pointer-events: none; opacity: .8; }
.cta-success[hidden] { display: none; }
.cta-success:focus { outline: none; }

/* ═══ FOOTER ════════════════════════════════════════════════════ */
.ft-head { font-family: 'Inter', sans-serif; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.ft-list { margin-top: 1rem; display: grid; gap: .125rem; }
.ft-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9375rem; color: #94a3b8; transition: color var(--dur-fast) var(--ease); }
.ft-link:hover { color: var(--c-orange); }
.ft-social {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem;
  border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .12); color: #cbd5e1; font-weight: 600; font-size: .875rem;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ft-social:hover { border-color: rgba(255, 255, 255, .4); color: #fff; }

/* ═══ TORNA SU (flottante) ═════════════════════════════════════ */
.to-top {
  position: fixed; z-index: 40;
  right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 9999px;
  background: var(--c-charcoal); color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .55);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.92);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur), background-color var(--dur-fast) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--c-orange); }
.to-top:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
.to-top .material-symbols-outlined { font-size: 1.375rem; transition: transform var(--dur-fast) var(--ease); }
.to-top:hover .material-symbols-outlined { transform: translateY(-2px); }
@media (min-width: 1024px) { .to-top { right: 1.5rem; bottom: 1.5rem; } }
/* Con il menu mobile aperto non serve */
html.hd-lock .to-top { opacity: 0; visibility: hidden; }

/* ═══ REDUCED MOTION (oltre alle regole globali di base) ═══════ */
@media (prefers-reduced-motion: reduce) {
  .js .hero-in, .js .hero-float { opacity: 1; transform: none; animation: none; }
  .to-top, .to-top .material-symbols-outlined { transition: none; transform: none; }
  .js .hero-float > div { animation: none; }
  .js .hero-mark { background-size: 100% .12em; animation: none; }
  .hero-layer { transform: none !important; }
  .hero-scroll-line::after { animation: none; top: 0; height: 100%; opacity: .4; }
}

/* Tagline hero su schermi stretti: resta su una riga */
@media (max-width: 400px) {
  .hero-tagline { font-size: .75rem; letter-spacing: .14em; }
}

/* ═══ ABOUT (about.html) ════════════════════════════════════════ */
/* Hero di pagina interna: stesso visual della home, altezza contenuta */
.hero.hero--page { min-height: 0; }

/* Le quattro realtà nel riquadro dell'hero */
.ab-node {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .5rem;
  min-height: 5.5rem; padding: 1rem;
  border-radius: var(--radius-lg); border: 1px solid var(--c-line-dark); background: rgba(255, 255, 255, .03);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ab-node:hover { border-color: rgba(14, 164, 167, .45); background: rgba(255, 255, 255, .06); }
.ab-node .ex-wordmark { color: #fff; filter: none; opacity: .92; font-size: clamp(1rem, .9rem + .4vw, 1.1875rem); }
.ab-node:hover .ex-amp, .ab-node:hover .ex-wordmark--73 b { color: var(--c-orange); }
.ab-node-role { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--c-muted-dark); }

/* Card partner: numero d'ordine e filo arancio che si disegna all'hover */
.ab-pillar { overflow: hidden; }
.ab-pillar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--c-orange); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.ab-pillar:hover::before { transform: scaleX(1); }
.ab-pillar-num { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .875rem; letter-spacing: .08em; color: #cbd5e1; }

/* CTA finale su emerald */
.ab-cta-glow {
  background:
    radial-gradient(40rem 24rem at 85% 20%, rgba(14, 164, 167, .16), transparent 70%),
    radial-gradient(36rem 24rem at 0% 100%, rgba(0, 0, 0, .25), transparent 70%);
}