/* style.css - Foglio di stile principale per il sito Chiarazzo Food Group */

/*
*  Sommario:
*
*  :root                       - Definizioni di variabili CSS personalizzate per temi chiari e scuri
*  html, body                 - Stili di base per l'HTML e il corpo della pagina
*  .sr-only                    - Classe di utilità per nascondere elementi in modo accessibile
*  --- 1. TYPOGRAPHY & TEXT STYLES ---  - Stili per testi, titoli e paragrafi
*  --- 2. LAYOUT & CORE COMPONENTS ---  - Stili per layout, contenitori e componenti principali (card, timeline)
*  --- 3. BUTTONS ---                - Stili per pulsanti primari e secondari
*  --- 4. FORMS & INPUTS ---           - Stili per input di form (campi testo, select)
*  --- 5. NAVIGATION ---              - Stili per la navigazione (desktop e mobile)
*  --- 6. SECTION-SPECIFIC STYLES ---  - Stili specifici per singole sezioni (partner, principi)
*  --- 7. ANIMATIONS & EFFECTS ---     - Animazioni e effetti di transizione (aurora, staggering)
*  --- 8. COOKIE BANNER & MODALS ---    - Stili per banner cookie e finestre modali
*  --- 9. AI CHATBOT ---                - Stili specifici per il chatbot AI (widget e finestra)
*  --- 10. LANGUAGE SWITCHER ---       - Stili per il selettore della lingua
*  --- 11. HEADER CONTROLS ---         - Stili specifici per elementi dell'header
*  --- 12. CONTENT TABLE & LEGALS ---   - Stili per tabelle di contenuto e informazioni legali
*  --- 13. PERFORMANCE ANALYSIS SECTION (NUOVO) --- - Stili specifici per la sezione "Performance Analysis"
*/

/* Variabili CSS personalizzate per i temi chiaro e scuro.
*  Organizzate in categorie per chiarezza (sfondo, testo, bordi, colori principali).
*  Queste variabili consentono una facile personalizzazione del tema del sito.
*/
:root {
  /* Sfondi */
  --bg-light: #f4f8fa; /* Sfondo tema chiaro */
  --bg-dark: #050505; /* Sfondo tema scuro */
  --glass-bg-light: rgba(255, 255, 255, 0.6); /* Sfondo "vetro" tema chiaro */
  --glass-bg-dark: rgba(22, 22, 24, 0.65); /* Sfondo "vetro" tema scuro */

  /* Testo */
  --text-primary-light: #111827; /* Testo principale tema chiaro */
  --text-primary-dark: #f5f5f7; /* Testo principale tema scuro */
  --text-secondary-light: #64748b; /* Testo secondario tema chiaro */
  --text-secondary-dark: #9ca3af; /* Testo secondario tema scuro */

  /* Bordi */
  --border-light: rgba(0, 0, 0, 0.08); /* Bordo tema chiaro */
  --border-dark: rgba(255, 255, 255, 0.15); /* Bordo tema scuro */

  /* Colori Principali */
  --primary-color: #0062e0; /* Colore principale (azzurro) */
  --primary-gradient: linear-gradient(
    45deg,
    #0062e0,
    #1e88e5
  ); /* Gradiente colore principale */

  /* Colori Accento */
  --accent-amber: #f59e0b; /* Giallo ambrato */
  --accent-teal: #14b8a6; /* Verde teal */

  /* Stili specifici per la tabella */
  --table-bg-light: #ffffff; /* Sfondo tabella tema chiaro */
  --table-border-light: #e8edf2; /* Bordo tabella tema chiaro */
  --table-hover-bg-light: #f4f8fa; /* Sfondo riga tabella hover tema chiaro */

  --code-tag-bg-light: #eef5ff; /* Sfondo tag `code` (usato per codice) tema chiaro */

  /* Gestione Z-Index
    * Definisce gli z-index per controllare l'ordine di sovrapposizione degli elementi.
    * Questo facilita la gestione di elementi come header fissi, modali e banner, evitando conflitti di sovrapposizione.
    */
  --z-layer-background: -1; /* Elementi di sfondo (es: aurora-background) */
  --z-layer-base: 1; /* Elementi di base */
  --z-layer-content: 10; /* Contenuto principale (testo, immagini) */
  --z-layer-banner: 900; /* Banner cookie */
  --z-layer-chatbot: 950; /* Chatbot AI */
  --z-layer-header: 980; /* Header fisso */
  --z-layer-navigation: 1000; /* Menu di navigazione (mobile) */
  --z-layer-modal-overlay: 1010; /* Sovrapposizione per le modali (sfondo scuro) */
  --z-layer-modal-content: 1020; /* Contenuto delle modali */
}

/* Scroll morbido sull'intera pagina */
html {
  scroll-behavior: smooth;
}

/* Stili di base per il `body`.
*  - Imposta il font principale (Inter, sans-serif).
*  - Attiva l'antialiasing del font per una resa più nitida.
*  - Disabilita lo scrolling orizzontale.
*  - Imposta il colore di sfondo e del testo predefiniti.
*  - Aggiunge una transizione graduale per i cambiamenti di sfondo quando si cambia tema.
*/
body {
  font-family: "Inter", sans-serif; /* Font principale */
  -webkit-font-smoothing: antialiased; /* Antialiasing per Chrome/Safari */
  -moz-osx-font-smoothing: grayscale; /* Antialiasing per Firefox */
  overflow-x: hidden; /* Impedisce lo scrolling orizzontale */
  background-color: var(--bg-light); /* Sfondo predefinito tema chiaro */
  color: var(--text-primary-light); /* Testo predefinito tema chiaro */
  transition: background-color 0.4s; /* Transizione graduale del background */
}

/* Stili specifici per il `body` quando il tema è impostato su 'dark'.
*  Sovrascrive i colori di sfondo e del testo per il tema scuro.
*/
html[data-theme="dark"] body {
  background-color: var(--bg-dark); /* Sfondo tema scuro */
  color: var(--text-primary-dark); /* Testo tema scuro */
}

/* Classe per disabilitare lo scroll (utile quando si apre una modale o il menu mobile). */
body.no-scroll {
  overflow: hidden; /* Impedisce lo scroll della pagina */
}

/* Classe di utilità per nascondere elementi mantenendoli accessibili agli screen reader.
*  Utile per contenuti che devono essere letti, ma non visualizzati (es: label per accessibilità).
*/
.sr-only {
  position: absolute; /* Rimosso dal layout */
  width: 1px; /* Larghezza minima */
  height: 1px; /* Altezza minima */
  padding: 0; /* Nessun padding */
  margin: -1px; /* Margine negativo per nascondere eventuali bordi */
  overflow: hidden; /* Nasconde il contenuto */
  clip: rect(0, 0, 0, 0); /* Ritaglia l'elemento */
  white-space: nowrap; /* Impedisce l'a capo del testo */
  border-width: 0; /* Nessun bordo */
}

/* --- 1. TYPOGRAPHY & TEXT STYLES --- */
/* Stili per la tipografia e il testo: dimensioni dei font, interlinea, etc. */

/* Interlinea per i paragrafi (migliora la leggibilità) */
p {
  line-height: 1.75; /* Aumenta l'interlinea */
}

/* Stili per il titolo principale della pagina.
*  Utilizza la funzione `clamp()` per una dimensione del font responsiva (scala in base alla viewport).
*  - font-size: minimo 2.75rem, idealmente 8vw (8% della viewport width), massimo 6rem.
*  - font-weight: 900 (grassetto extra).
*  - line-height: 1.1 (riduce l'interlinea).
*  - letter-spacing: -0.05em (riduce lo spazio tra le lettere).
*/
.main-title {
  font-size: clamp(2.75rem, 8vw, 6rem); /* Dimensione font responsiva */
  font-weight: 900; /* Grassetto extra */
  line-height: 1.1; /* Interlinea ridotta */
  letter-spacing: -0.05em; /* Spaziatura lettere ridotta */
}

/* Stili per i titoli di sezione (come `.main-title`, ma con dimensioni più contenute). */
.section-title {
  font-size: clamp(2rem, 7vw, 3.25rem); /* Dimensione font responsiva */
  font-weight: 900; /* Grassetto extra */
  text-align: center; /* Allineamento centrale */
  letter-spacing: -0.04em; /* Spaziatura lettere ridotta */
  margin-bottom: 1rem; /* Margine inferiore */
}

/* Stili per i sottotitoli di sezione.
*  - font-size: responsiva (minimo 1rem, ideale 4vw, massimo 1.125rem).
*  - Larghezza massima: 650px (per evitare testi troppo lunghi).
*  - Allineamento: centrale.
*  - Margine inferiore: 3.5rem.
*  - Colore: testo secondario (leggermente più chiaro/scuro a seconda del tema).
*/
.section-subtitle {
  font-size: clamp(1rem, 4vw, 1.125rem); /* Dimensione font responsiva */
  max-width: 650px; /* Larghezza massima */
  margin-left: auto; /* Margine automatico sinistro (centra) */
  margin-right: auto; /* Margine automatico destro (centra) */
  text-align: center; /* Allineamento centrale */
  margin-bottom: 3.5rem; /* Margine inferiore */
  color: var(--text-secondary-light); /* Colore tema chiaro */
}

/* Aggiorna il colore del sottotitolo quando è attivo il tema scuro */
html[data-theme="dark"] .section-subtitle {
  color: var(--text-secondary-dark); /* Colore tema scuro */
}

/* Applica un gradiente di colore al testo (es: per i titoli).
*  - background: imposta il gradiente.
*  - -webkit-background-clip: text;  limita lo sfondo al testo
*  - -webkit-text-fill-color: transparent;  rende il testo trasparente in modo da far vedere il gradiente
*/
.gradient-text {
  background: var(--primary-gradient); /* Gradiente principale */
  -webkit-background-clip: text; /* Limita lo sfondo al testo */
  -webkit-text-fill-color: transparent; /* Rende il testo trasparente */
}

/* Titolo delle categorie di partner (es: "Alimentari", "Pet Food").
*  - font-size: 1.5rem.
*  - font-weight: 700 (grassetto).
*  - Allineamento: centrale.
*  - Margine superiore: 3rem.
*  - Margine inferiore: 1.5rem.
*  - Colore: testo principale.
*/
.partner-category-title {
  font-size: 1.5rem; /* Dimensione font */
  font-weight: 700; /* Grassetto */
  text-align: center; /* Allineamento centrale */
  margin-top: 3rem; /* Margine superiore */
  margin-bottom: 1.5rem; /* Margine inferiore */
  color: var(--text-primary-light); /* Colore tema chiaro */
}

/* Aggiorna il colore del titolo delle categorie dei partner quando è attivo il tema scuro */
html[data-theme="dark"] .partner-category-title {
  color: var(--text-primary-dark); /* Colore tema scuro */
}

/* Stili per l'elemento "eyebrow" (sopracciglio) dell'header (un testo breve sopra il titolo).
*  - font-size: 0.9rem.
*  - font-weight: 600 (semi-grassetto).
*  - text-transform: uppercase (rende il testo maiuscolo).
*  - letter-spacing: 0.1em (aumenta lo spazio tra le lettere).
*  - Colore: testo secondario.
*  - Margine inferiore: 1.5rem.
*/
.hero-eyebrow {
  font-size: 0.9rem; /* Dimensione font */
  font-weight: 600; /* Semi-grassetto */
  text-transform: uppercase; /* Maiuscolo */
  letter-spacing: 0.1em; /* Spaziatura lettere */
  color: var(--text-secondary-light); /* Colore tema chiaro */
  margin-bottom: 1.5rem; /* Margine inferiore */
}

/* Aggiorna il colore del testo eyebrow header quando è attivo il tema scuro */
html[data-theme="dark"] .hero-eyebrow {
  color: var(--text-secondary-dark); /* Colore tema scuro */
}

/* --- 2. LAYOUT & CORE COMPONENTS --- */
/* Stili per la struttura generale del layout e per i componenti principali (card, timeline, etc.). */

/* Imposta lo z-index del contenitore principale (`main`) */
main.container {
  z-index: var(--z-layer-content); /* Definisce lo z-index del container */
}

/* Nasconde di default le sezioni della pagina (per poi mostrarle dinamicamente con JavaScript). */
.page-view {
  display: none; /* Nasconde l'elemento */
}

/* Stili per l'header con effetto "vetro" (glassmorphism).
*  - background: un colore semitrasparente.
*  - backdrop-filter: sfocatura dello sfondo.
*  - border-bottom: un bordo sottile.
*  - z-index: per assicurarsi che l'header si sovrapponga al contenuto.
*/
.glass-header {
  background: rgba(244, 248, 250, 0.7); /* Sfondo semitrasparente */
  backdrop-filter: blur(20px); /* Effetto sfocatura dello sfondo */
  -webkit-backdrop-filter: blur(20px); /* Compatibilità Safari */
  border-bottom: 1px solid var(--border-light); /* Bordo inferiore sottile */
  z-index: var(--z-layer-header); /* Ordine di sovrapposizione */
}

/* CARD COMPONENT SYSTEM */
/* Definisce gli stili di base per il componente "card".
*  - border: un bordo sottile.
*  - border-radius: angoli arrotondati.
*  - transition: transizioni per `transform` e `box-shadow` (per l'effetto hover).
*  - position: relative (necessario per posizionare pseudo-elementi).
*  - overflow: hidden (per nascondere il contenuto che sporge).
*/
.card {
  border: 1px solid var(--border-light); /* Bordo sottile tema chiaro*/
  border-radius: 1.5rem; /* Angoli arrotondati */
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    /* Transizione fluid su transform */ box-shadow 0.35s
      cubic-bezier(0.2, 0.8, 0.2, 1),
    /* Transizione fluid su ombreggiatura */ background-color 0.3s; /* Transizione background */
  position: relative; /* Permette il posizionamento assoluto all'interno */
  overflow: hidden; /* Nasconde elementi che escono dai bordi */
}

/* Aggiorna il colore del bordo quando è attivo il tema scuro */
html[data-theme="dark"] .card {
  border-color: var(--border-dark); /* Bordo sottile tema scuro*/
}

/* Stili specifici per una card semplice (senza effetto vetro).
*  - background-color: bianco (tema chiaro).
*/
.card--simple {
  background-color: #ffffff; /* Sfondo bianco */
}

/* Aggiorna il colore di sfondo di una card semplice quando è attivo il tema scuro */
html[data-theme="dark"] .card--simple {
  background-color: #161618; /* Sfondo grigio scuro */
}

/* Effetto hover per le card semplici (solleva la card e aggiunge un'ombreggiatura).
*  - transform: solleva la card di 6px.
*  - box-shadow: aggiunge un'ombreggiatura.
*  `@media (hover: hover)` garantisce che l'effetto sia applicato solo su dispositivi che supportano l'hover (mouse).
*/
@media (hover: hover) {
  .card--simple:hover {
    transform: translateY(-6px); /* Solleva la card */
    box-shadow: 0 10px 20px -15px rgba(0, 0, 0, 0.1); /* Aggiunge un'ombreggiatura */
  }
}

/* Stili per le card con effetto "vetro".
*  - background: uno sfondo semitrasparente.
*  - backdrop-filter: sfocatura dello sfondo.
*/
.card--glass {
  background: var(--glass-bg-light); /* Sfondo semitrasparente tema chiaro */
  backdrop-filter: blur(40px); /* Effetto sfocatura dello sfondo */
  -webkit-backdrop-filter: blur(40px); /* Compatibilità Safari */
}

/* Aggiorna il colore di sfondo delle card glass quando è attivo il tema scuro */
html[data-theme="dark"] .card--glass {
  background: var(--glass-bg-dark); /* Sfondo semitrasparente tema scuro */
}

/* Effetto hover per le card "vetro" (solleva la card e aggiunge un'ombreggiatura più accentuata). */
@media (hover: hover) {
  .card--glass:hover {
    transform: translateY(-8px); /* Solleva la card */
    box-shadow: 0 25px 50px -20px rgba(0, 0, 0, 0.1); /* Aggiunge un'ombreggiatura più marcata */
  }
}

/* Aggiunge un bordo animato con gradiente alle card "vetro" quando sono in stato di hover.
*  - content:  assicura che il before sia effettivamente renderizzato
*  - position: absolute: per sovrapporlo alla card
*  - inset: 0 imposta tutti e quattro i lati dell'elemento a 0, allineandolo ai bordi del suo contenitore
*  - border-radius: riprende l'arrotondamento della card
*  - padding: 1px,  crea un leggero spazio tra il bordo dell'elemento pseudo e il bordo effettivo dell'elemento a cui si applica
*  - background: gradiente primario.
*  - -webkit-mask: ... (maschera che rende trasparente l'interno del bordo, creando l'effetto desiderato).
*  - opacity: inizialmente 0 (nascosto), diventa 1 in hover (vedi sotto).
*  - pointer-events: none; rende l'elemento non interattivo (in modo che l'hover funzioni correttamente).
*/
.card--glass::before {
  content: ""; /* Assicura che il before sia renderizzato */
  position: absolute; /* Posizionamento assoluto */
  inset: 0; /* Lo estende su tutta la card */
  border-radius: 1.5rem; /* Arrotondamento uguale alla card */
  padding: 1px; /* Crea uno spazio tra bordo e card */
  background: var(--primary-gradient); /* Applica il gradiente */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Crea la maschera */
  -webkit-mask-composite: xor; /* Combina le maschere */
  mask-composite: exclude; /* Per maggiore compatibilità */
  opacity: 0; /* Inizialmente nascosto */
  transition: opacity 0.4s; /* Transizione per l'opacità */
  pointer-events: none; /* Impedisce l'interazione con l'elemento */
}

/* Mostra il bordo animato in hover */
@media (hover: hover) {
  .card--glass:hover::before {
    opacity: 1; /* Mostra il bordo in hover */
  }
}

/* TIMELINE */
/* Stili per il contenitore della timeline.
*  - position: relative (per posizionare la linea verticale).
*  - max-width: 1000px (per limitare la larghezza).
*  - margin: auto (per centrare orizzontalmente).
*  - padding: 2rem 0 (padding verticale).
*/
.timeline-container {
  position: relative; /* Posizionamento relativo */
  max-width: 1000px; /* Larghezza massima */
  margin: 50px auto; /* Centra orizzontalmente */
  padding: 2rem 0; /* Spazio sopra e sotto */
}

/* Linea verticale che collega gli elementi della timeline.
*  - content: assicura la renderizzazione dell'elemento.
*  - position: absolute (posizionato rispetto al contenitore della timeline).
*  - width: 3px.
*  - background: colore del bordo (leggero).
*  - top/bottom: estende la linea verticalmente.
*  - left: posiziona la linea al centro.
*  - margin-left: compensa la larghezza della linea per centrarla.
*  - z-index: assicura che la linea sia sotto gli elementi della timeline.
*/
.timeline-container::after {
  content: ""; /* Assicura la renderizzazione */
  position: absolute; /* Posizionamento assoluto */
  width: 3px; /* Larghezza della linea */
  background: var(--border-light); /* Colore della linea tema chiaro*/
  top: 0; /* Inizia dall'alto */
  bottom: 0; /* Finisce in basso */
  left: 50%; /* Posizione orizzontale centrale */
  margin-left: -1.5px; /* Centra la linea */
  z-index: 0; /* Sotto gli altri elementi */
}

/* Aggiorna il colore della timeline quando è attivo il tema scuro */
html[data-theme="dark"] .timeline-container::after {
  background: var(--border-dark); /* Colore della linea tema scuro*/
}

/* Stili per ogni elemento della timeline.
*  - padding: spazio interno.
*  - position: relative (per posizionare il cerchio).
*  - width: 50% (ogni elemento occupa metà della timeline).
*/
.timeline-item {
  padding: 10px 40px; /* Spazio interno */
  position: relative; /* Posizionamento relativo */
  width: 50%; /* Larghezza elemento */
}

/* Posiziona gli elementi dispari a sinistra della timeline */
.timeline-item:nth-child(odd) {
  left: 0; /* Allinea a sinistra */
}

/* Posiziona gli elementi pari a destra della timeline */
.timeline-item:nth-child(even) {
  left: 50%; /* Inizia a metà (destra) */
}

/* Stili per il contenuto di ogni elemento della timeline.
*  - padding: spazio interno.
*  - position: relative.
*  - border-radius: angoli arrotondati.
*  - border: un bordo sottile.
*  - background-color: bianco (tema chiaro).
*/
.timeline-content {
  padding: 1.5rem; /* Spazio interno */
  position: relative; /* Posizionamento relativo */
  border-radius: 1.5rem; /* Arrotondamento bordi */
  border: 1px solid var(--border-light); /* Bordo sottile tema chiaro */
  background-color: #ffffff; /* Sfondo bianco tema chiaro*/
}

/* Effetti visivi per l'accessibilità tramite tastiera */
.timeline-content:focus-visible {
  outline: 2px solid var(--primary-color); /* Bordo evidenziato al focus */
  outline-offset: 4px; /* Spazio dal bordo */
  box-shadow: 0 0 0 4px rgba(0, 98, 224, 0.2); /* Ombreggiatura esterna */
  border-radius: 1.5rem; /* Bordi arrotondati */
}

/* Aggiorna il colore di sfondo e del bordo del contenuto della timeline quando è attivo il tema scuro */
html[data-theme="dark"] .timeline-content {
  background-color: #161618; /* Sfondo grigio scuro */
  border-color: var(--border-dark); /* Bordo sottile tema scuro*/
}

/* Cerchio che indica ogni punto della timeline.
*  - content:  assicura che il after sia effettivamente renderizzato
*  - position: absolute (posizionato rispetto all'elemento della timeline).
*  - width/height: 20px (dimensione del cerchio).
*  - background-color: colore di sfondo (leggero).
*  - border: bordo con il colore principale.
*  - top: posizionamento verticale.
*  - border-radius: 50% (rende l'elemento un cerchio).
*  - z-index: per sovrapporsi alla linea verticale.
*  - transition: transizione per il background-color.
*/
.timeline-item::after {
  content: ""; /* Assicura che il after sia renderizzato */
  position: absolute; /* Posizionamento assoluto */
  width: 20px; /* Larghezza del cerchio */
  height: 20px; /* Altezza del cerchio */
  background-color: var(--bg-light); /* Sfondo tema chiaro*/
  border: 4px solid var(--primary-color); /* Bordo tema primario */
  top: 30px; /* Posizione verticale */
  border-radius: 50%; /* Rende un cerchio */
  z-index: 1; /* Sovrappone alla linea */
  transition: background-color 0.4s; /* Transizione colore di sfondo */
}

/* Aggiorna il colore del cerchio timeline quando è attivo il tema scuro */
html[data-theme="dark"] .timeline-item::after {
  background-color: var(--bg-dark); /* Sfondo tema scuro*/
}

/* Posiziona il cerchio a destra per gli elementi dispari */
.timeline-item:nth-child(odd)::after {
  right: -10px; /* Sposta a destra */
}

/* Posiziona il cerchio a sinistra per gli elementi pari */
.timeline-item:nth-child(even)::after {
  left: -10px; /* Sposta a sinistra */
}

/* Data dell'elemento della timeline (grassetto, colore primario). */
.timeline-date {
  font-weight: 900; /* Grassetto extra */
  font-size: 1.5rem; /* Dimensione font */
  color: var(--primary-color); /* Colore primario */
  margin-bottom: 0.5rem; /* Margine inferiore */
}

/* Titolo dell'elemento della timeline (grassetto). */
.timeline-title {
  font-weight: 700; /* Grassetto */
  font-size: 1.125rem; /* Dimensione font */
  margin-bottom: 0.5rem; /* Margine inferiore */
}

/* Testo dell'elemento della timeline (colore secondario, dimensione ridotta). */
.timeline-text {
  font-size: 0.9rem; /* Dimensione font ridotta */
  color: var(--text-secondary-light); /* Colore secondario tema chiaro */
}

/* Aggiorna il colore del testo della timeline quando è attivo il tema scuro */
html[data-theme="dark"] .timeline-text {
  color: var(--text-secondary-dark); /* Colore secondario tema scuro */
}

/* Media query per schermi più piccoli (<= 768px): modifica il layout della timeline per adattarsi meglio. */
@media screen and (max-width: 768px) {
  /* Nasconde la linea verticale */
  .timeline-container::after {
    display: none; /* Nasconde la linea verticale */
  }

  /* Imposta la larghezza degli elementi al 100% */
  .timeline-item {
    width: 100%; /* Larghezza massima */
    padding-left: 0; /* Rimuove padding a sinistra */
    padding-right: 0; /* Rimuove padding a destra */
  }

  /* Reimposta il posizionamento degli elementi (sia pari che dispari) */
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    left: 0; /* Allinea a sinistra */
    margin-bottom: 1rem; /* Margine inferiore */
  }

  /* Allinea il testo a sinistra */
  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    text-align: left; /* Allinea a sinistra */
  }

  /* Nasconde i cerchi */
  .timeline-item::after {
    display: none; /* Nasconde i cerchi */
  }
}

/* --- 3. BUTTONS --- */
/* Stili per i pulsanti (primari e secondari). */

/* Stili per i pulsanti primari (es: "Contattaci").
*  - background: colore primario.
*  - color: bianco.
*  - font-weight: grassetto.
*  - border-radius: molto arrotondato (pillola).
*  - padding: spazio interno.
*  - transition: transizioni per `transform`, `box-shadow` e `background-color`.
*/
.primary-button {
  background: var(--primary-color); /* Colore primario */
  color: white; /* Testo bianco */
  font-weight: 700; /* Grassetto */
  font-size: 0.9rem; /* Dimensione testo */
  border-radius: 99px; /* Arrotondato */
  padding: 0.8rem 1.75rem; /* Spazio interno */
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s; /* Transizioni fluide */
}

/* Disabilita l'aspetto del pulsante se l'attributo `disabled` è presente.
*  - background-color: grigio.
*  - cursor: not-allowed (indica che non è cliccabile).
*/
.primary-button:disabled {
  background-color: #64748b; /* Colore grigio */
  cursor: not-allowed; /* Cursore non permesso */
}

/* Stili per i pulsanti secondari (es: "Scopri di più").
*  - background-color: vetro (semitrasparente).
*  - border: bordo sottile.
*  - color: colore del testo principale.
*  - backdrop-filter: sfocatura dello sfondo.
*  - font-size: 0.9rem;
*  - font-weight: grassetto.
*  - border-radius: molto arrotondato (pillola).
*  - padding: spazio interno.
*  - transition: transizione per `transform`.
*/
.secondary-button {
  background-color: var(--glass-bg-light); /* Sfondo "vetro" tema chiaro*/
  border: 1px solid var(--border-light); /* Bordo tema chiaro*/
  color: var(--text-primary-light); /* Testo tema chiaro*/
  backdrop-filter: blur(10px); /* Effetto sfocatura dello sfondo */
  -webkit-backdrop-filter: blur(10px); /* Compatibilità Safari */
  font-size: 0.9rem; /* Dimensione testo */
  font-weight: 700; /* Grassetto */
  border-radius: 99px; /* Arrotondato */
  padding: 0.8rem 1.75rem; /* Spazio interno */
  transition: transform 0.3s; /* Transizione fluida */
}

/* Aggiorna lo stile dei pulsanti secondari per il tema scuro. */
html[data-theme="dark"] .secondary-button {
  background-color: var(--glass-bg-dark); /* Sfondo "vetro" tema scuro*/
  border: 1px solid var(--border-dark); /* Bordo tema scuro*/
  color: var(--text-primary-dark); /* Testo tema scuro*/
}

/* Effetti hover per i pulsanti (solo su dispositivi che supportano l'hover). */
@media (hover: hover) {
  /* Effetto di ingrandimento per entrambi i tipi di pulsanti.
    * `:not(:disabled)` impedisce che l'effetto si applichi ai pulsanti disabilitati. */
  .primary-button:hover:not(:disabled),
  .secondary-button:hover {
    transform: scale(1.05); /* Ingrandisce il pulsante del 5% */
  }

  /* Aggiunge un'ombra colorata al pulsante primario in hover per un effetto "glow". */
  .primary-button:hover:not(:disabled) {
    box-shadow: 0 10px 30px -10px var(--primary-color); /* Ombra colorata */
  }
}

/* --- 4. FORMS & INPUTS --- */
/* Stili per gli elementi dei moduli (input, select, textarea). */

/* Stili di base per gli input del form.
*  - width: 100% (occupa tutta la larghezza del contenitore).
*  - background-color: colore di sfondo del sito.
*  - border: bordo sottile.
*  - border-radius: angoli arrotondati.
*  - padding: spazio interno.
*  - transition: transizioni per `border-color` e `box-shadow` (per l'effetto focus).
*  - color: colore del testo principale.
*/
.form-input {
  width: 100%; /* Larghezza massima */
  background-color: var(--bg-light); /* Sfondo tema chiaro*/
  border: 1px solid var(--border-light); /* Bordo tema chiaro*/
  border-radius: 0.75rem; /* Angoli arrotondati */
  padding: 0.75rem 1rem; /* Spazio interno */
  transition: border-color 0.3s, box-shadow 0.3s; /* Transizioni fluide */
  color: var(--text-primary-light); /* Colore del testo tema chiaro*/
}

/* Stili specifici per i `select` per personalizzare la freccia del menu a discesa. */
select.form-input {
  -webkit-appearance: none; /* Rimuove l'aspetto nativo su WebKit */
  appearance: none; /* Rimuove l'aspetto nativo standard */
  /* Freccia personalizzata tramite SVG in background-image (URL-encoded).
    *  Il colore (`fill='%23111827'`) è il colore del testo primario chiaro codificato. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23111827'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
  background-repeat: no-repeat; /* Evita la ripetizione dell'immagine */
  background-position: right 0.75rem center; /* Posiziona la freccia a destra */
  background-size: 1.5em 1.5em; /* Dimensione della freccia */
  padding-right: 3rem; /* Aggiunge spazio a destra per non sovrapporre il testo alla freccia */
}

/* Stili per lo stato `:focus` degli input: migliora l'accessibilità evidenziando l'elemento attivo. */
.form-input:focus {
  outline: none; /* Rimuove il contorno di default del browser */
  border-color: var(--primary-color); /* Cambia il colore del bordo */
  box-shadow: 0 0 0 2px rgba(0, 98, 224, 0.2); /* Aggiunge un'ombra esterna (effetto "glow") */
}

/* Aggiorna lo stile degli input per il tema scuro. */
html[data-theme="dark"] .form-input {
  background-color: var(--bg-dark); /* Sfondo tema scuro */
  border-color: var(--border-dark); /* Bordo tema scuro */
  color: var(--text-primary-dark); /* Colore del testo tema scuro */
}

/* Aggiorna la freccia del `select` per il tema scuro.
*  Il colore (`fill='%23FFFFFF'`) è il bianco, codificato per l'URL. */
html[data-theme="dark"] select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23FFFFFF'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Campo "honeypot": una tecnica anti-spam che nasconde un campo input ai veri utenti,
* ma lo lascia visibile ai bot. Se un bot compila questo campo, l'invio del form può essere bloccato. */
.honeypot-field {
  position: absolute; /* Rimuove dal flusso del layout */
  left: -5000px; /* Sposta l'elemento molto lontano dallo schermo */
}

/* --- 5. NAVIGATION --- */
/* Stili per i menu di navigazione. */

/* Stili per il menu di navigazione mobile a schermo intero.
*  - position: fixed (rimane fisso durante lo scroll).
*  - inset: 0 (copre l'intera viewport).
*  - z-index: alto, per stare sopra a tutto il resto.
*  - background: effetto "vetro".
*  - transform/opacity: inizialmente è nascosto sopra lo schermo e trasparente.
*  - transition: animazioni fluide per `transform` e `opacity`.
*  - pointer-events: inizialmente non interattivo (per evitare click accidentali).
*/
#mobile-nav-menu {
  position: fixed; /* Posizione fissa */
  inset: 0; /* Copre l'intera viewport */
  z-index: var(--z-layer-navigation); /* Alto ordine di sovrapposizione */
  background: rgba(244, 248, 250, 0.75); /* Sfondo "vetro" tema chiaro */
  backdrop-filter: blur(20px); /* Effetto sfocatura */
  -webkit-backdrop-filter: blur(20px); /* Compatibilità Safari */
  transform: translateY(-100%); /* Inizialmente nascosto sopra lo schermo */
  opacity: 0; /* Inizialmente trasparente */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s; /* Transizioni fluide */
  pointer-events: none; /* Inizialmente non interattivo */
}

/* Classe `.is-open` applicata via JS per mostrare il menu. */
#mobile-nav-menu.is-open {
  transform: translateY(0); /* Riporta il menu in posizione */
  opacity: 1; /* Rende il menu visibile */
  pointer-events: auto; /* Rende il menu interattivo */
}

/* Aggiorna lo sfondo del menu mobile per il tema scuro. */
html[data-theme="dark"] #mobile-nav-menu {
  background: rgba(5, 5, 5, 0.75); /* Sfondo "vetro" tema scuro */
}

/* Stili per il link di navigazione attivo: colore primario e grassetto. */
.nav-link.active {
  color: var(--primary-color); /* Colore primario */
  font-weight: 700; /* Grassetto */
}

/* Tutti i link di navigazione hanno `position: relative` per posizionare il `::after`. */
.nav-link[data-section] {
  position: relative;
}

/* Aggiunge una piccola linea sotto il link attivo nella navigazione desktop. */
.nav-link.active::after {
  content: ""; /* Necessario per il pseudo-elemento */
  position: absolute; /* Posizionato rispetto al link */
  bottom: -2px; /* Sotto il testo */
  left: 50%; /* Centrato orizzontalmente */
  transform: translateX(-50%); /* Correzione per centratura precisa */
  width: 20px; /* Larghezza della linea */
  height: 3px; /* Altezza della linea */
  background-color: var(--primary-color); /* Colore primario */
  border-radius: 2px; /* Angoli arrotondati */
}

/* --- 6. SECTION-SPECIFIC STYLES --- */
/* Stili specifici per sezioni particolari, come la griglia dei partner. */

/* Griglia dei partner: responsive e flessibile.
*  - grid-template-columns: crea colonne che si adattano automaticamente. Ogni colonna
*    ha una larghezza minima di 140px e massima di 1fr (frazione dello spazio rimanente). */
.partner-grid {
  display: grid; /* Usa il layout a griglia */
  gap: 1.5rem; /* Spazio tra gli elementi */
  grid-template-columns: repeat(
    auto-fit,
    minmax(140px, 1fr)
  ); /* Colonne responsive */
}

/* Card di ogni partner (logo). */
.partner-card {
  display: flex; /* Usa flexbox... */
  align-items: center; /* ...per centrare verticalmente */
  justify-content: center; /* ...e orizzontalmente il logo. */
  height: 110px; /* Altezza fissa */
  padding: 1.25rem; /* Spazio interno */
  background-color: white; /* Sfondo bianco tema chiaro */
  border: 1px solid var(--border-light); /* Bordo tema chiaro */
  border-radius: 1rem; /* Angoli arrotondati */
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Transizioni */
}

/* Aggiorna lo stile delle card dei partner per il tema scuro. */
html[data-theme="dark"] .partner-card {
  background-color: #1c1c1e; /* Sfondo grigio scuro */
  border-color: var(--border-dark); /* Bordo tema scuro */
}

/* Stili per le immagini dei loghi dei partner. */
.partner-card img {
  max-width: 85%; /* Larghezza massima */
  max-height: 85%; /* Altezza massima */
  object-fit: contain; /* Mantiene le proporzioni dell'immagine */
  transition: transform 0.3s; /* Transizione fluida */
}

/* Effetto hover sulle card dei partner (solo su dispositivi con mouse). */
@media (hover: hover) {
  .partner-card:hover {
    transform: translateY(-8px); /* Solleva la card */
  }

  /* Ombra specifica per il tema chiaro. */
  html:not([data-theme="dark"]) .partner-card:hover {
    box-shadow: 0 15px 30px -15px rgba(0, 0, 0, 0.1);
  }

  /* Ombra "glow" per il tema scuro. */
  html[data-theme="dark"] .partner-card:hover {
    box-shadow: 0 0 25px -5px rgba(0, 98, 224, 0.2);
  }
}

/* Classi di utilità per colorare le icone dei "principi" aziendali. */
.principle-icon-1 {
  color: var(--primary-color);
} /* Blu primario */
.principle-icon-2 {
  color: var(--accent-amber);
} /* Ambra */
.principle-icon-3 {
  color: var(--accent-teal);
} /* Teal */

/* Sfondo con effetto vetro per i contenitori dei loghi nella sezione Hero. */
.logo-container-bg {
  background: rgba(244, 248, 250, 0.7); /* Sfondo "vetro" tema chiaro */
  backdrop-filter: blur(20px); /* Effetto sfocatura */
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-light); /* Bordo inferiore */
  z-index: var(--z-layer-header); /* Ordine di sovrapposizione */
}

/* Per qualche motivo, lo stile per il tema scuro era identico al chiaro.
*  Potrebbe essere un errore, o una scelta di design. Lasciato per coerenza. */
html[data-theme="dark"] .logo-container-bg {
  background: rgba(
    244,
    248,
    250,
    0.7
  ); /* Uguale al tema chiaro, possibile revisione necessaria */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-light);
  z-index: var(--z-layer-header);
}

/* --- 7. ANIMATIONS & EFFECTS --- */
/* Stili per animazioni e effetti speciali. */

/* Sfondo animato "aurora" che segue il mouse.
*  Lo sfondo è un gradiente radiale la cui posizione è controllata dalle variabili
*  `--mouse-x` e `--mouse-y`, aggiornate via JavaScript. */
.aurora-background {
  position: fixed; /* Posizione fissa per coprire la viewport */
  top: 0;
  left: 0; /* In alto a sinistra */
  width: 100%; /* Larghezza intera */
  height: 100vh; /* Altezza intera */
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y),
    rgba(0, 98, 224, 0.1),
    transparent 40%
  ); /* Gradiente */
  z-index: var(--z-layer-background); /* Sotto a tutto il resto */
  pointer-events: none; /* Non interattivo */
  transition: background 0.2s; /* Transizione per cambi di tema */
}

/* Fallback per dispositivi touch o che non supportano hover.
*  Mostra un gradiente radiale statico invece di quello che segue il mouse. */
@media (hover: none) or (pointer: coarse) {
  .aurora-background {
    background: radial-gradient(
      circle at 50% 20%,
      rgba(0, 98, 224, 0.08),
      transparent 50%
    ); /* Gradiente statico chiaro */
  }

  html[data-theme="dark"] .aurora-background {
    background: radial-gradient(
      circle at 50% 20%,
      rgba(0, 98, 224, 0.2),
      transparent 60%
    ); /* Gradiente statico scuro */
  }
}

/* Animazione "stagger" (scaglionata) per l'ingresso degli elementi.
*  Gli elementi figli di un contenitore con la classe `.stagger-in` entrano in scena
*  con un'animazione di opacità e traslazione.
*  `animation-fill-mode: both;` assicura che lo stile finale dell'animazione venga mantenuto. */
@media (prefers-reduced-motion: no-preference) {
  .stagger-in > * {
    animation: itemEnter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    opacity: 0; /* Inizialmente trasparente */
    transform: translateY(15px); /* E leggermente spostato in basso */
  }

  /* Keyframes per l'animazione di ingresso. */
  @keyframes itemEnter {
    to {
      opacity: 1; /* Diventa visibile */
      transform: translateY(0); /* E torna in posizione */
    }
  }
}

/* Spinner di caricamento puramente CSS.
*  Usa i bordi per creare l'effetto: 3 bordi trasparenti e uno colorato (top).
*  `border-radius: 50%` lo rende un cerchio. */
.spinner {
  border-color: transparent; /* Bordi trasparenti... */
  border-top-color: white; /* ...tranne quello superiore */
  border-radius: 50%; /* Rende un cerchio */
  display: inline-block;
  width: 1.25em; /* Dimensione */
  height: 1.25em; /* Dimensione */
  animation: spin 0.8s linear infinite; /* Applica l'animazione di rotazione */
}

/* Keyframes per l'animazione di rotazione infinita. */
@keyframes spin {
  to {
    transform: rotate(360deg);
  } /* Rotazione completa */
}

/* Classe di utilità per applicare il colore del testo principale con una transizione. */
.text-main {
  color: var(--text-primary-light);
  transition: color 0.3s;
}

html[data-theme="dark"] .text-main {
  color: var(--text-primary-dark);
}

/* --- 8. COOKIE BANNER & MODALS --- */
/* Stili per il banner cookie e le finestre modali. */

/* Banner dei cookie, posizionato in fondo alla pagina. */
#cookie-banner {
  position: fixed; /* Posizione fissa */
  bottom: 0;
  left: 0;
  right: 0; /* Ancorato in basso */
  z-index: var(--z-layer-banner); /* Alto z-index */
  background: var(--glass-bg-light); /* Sfondo "vetro" tema chiaro */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-light); /* Bordo superiore tema chiaro */
  padding: 1.5rem;
  transform: translateY(100%); /* Inizialmente nascosto sotto lo schermo */
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); /* Animazione di ingresso */
}

/* Classe `.show` applicata via JS per mostrare il banner. */
#cookie-banner.show {
  transform: translateY(0); /* Riporta in posizione */
}

/* Stili per il banner cookie in tema scuro. */
html[data-theme="dark"] #cookie-banner {
  background: var(--glass-bg-dark);
  border-top-color: var(--border-dark);
}

/* Overlay per le modali (lo sfondo scuro e sfocato). */
.modal-overlay {
  position: fixed;
  inset: 0; /* Copre tutta la viewport */
  background: rgba(0, 0, 0, 0.6); /* Sfondo nero semitrasparente */
  backdrop-filter: blur(5px); /* Sfocatura dello sfondo */
  z-index: var(--z-layer-modal-overlay); /* Z-index specifico */
  display: none; /* Inizialmente nascosto */
  align-items: center; /* Centra il contenuto verticalmente... */
  justify-content: center; /* ...e orizzontalmente */
  padding: 1rem;
}

/* Classe `.show` applicata via JS per mostrare l'overlay e la modale. */
.modal-overlay.show {
  display: flex; /* Usa flexbox per il centraggio */
}

/* Contenuto della modale. */
.modal-content {
  background: var(--bg-light); /* Sfondo tema chiaro */
  border-radius: 1.5rem;
  padding: 2rem;
  width: 90%; /* Larghezza reattiva */
  max-width: 600px; /* Larghezza massima */
  max-height: 90vh; /* Altezza massima reattiva */
  overflow-y: auto; /* Aggiunge scroll se il contenuto è troppo alto */
  border: 1px solid var(--border-light); /* Bordo tema chiaro */
  z-index: var(--z-layer-modal-content); /* Z-index per stare sopra l'overlay */
}

/* Stili della modale in tema scuro. */
html[data-theme="dark"] .modal-content {
  background: var(--bg-dark);
  border-color: var(--border-dark);
}

/* Modale per contenuti legali, con una larghezza massima maggiore. */
.legal-modal-content {
  max-width: 800px;
}

/* Toggle (interruttore) personalizzato per le categorie dei cookie. */
.cookie-category-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

/* Nasconde l'input checkbox di default. */
.cookie-category-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider (lo sfondo del toggle). */
.cookie-category-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* Copre l'intero contenitore */
  background-color: #ccc; /* Colore di default (spento) */
  transition: 0.4s;
  border-radius: 28px; /* Forma a pillola */
}

/* "Pomello" del toggle, creato con il pseudo-elemento `::before`. */
.cookie-category-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%; /* Circolare */
}

/* Quando la checkbox è selezionata (`:checked`), cambia il colore dello slider. */
input:checked + .cookie-category-slider {
  background-color: var(--primary-color);
}

/* Quando la checkbox è selezionata, sposta il "pomello" a destra. */
input:checked + .cookie-category-slider:before {
  transform: translateX(22px);
}

/* Stili per il toggle disabilitato. */
input:disabled + .cookie-category-slider {
  cursor: not-allowed;
  background-color: #e0e0e0;
}

/* Stile semplice per i link all'interno di testi legali. */
.legal-link {
  text-decoration: underline;
  cursor: pointer;
}

/* --- 9. AI CHATBOT --- */
/* Stili per il widget del chatbot. */

/* Contenitore principale del chatbot, posizionato in basso a destra.
* `env(safe-area-inset-bottom)` aggiunge spazio per la "notch" su alcuni iPhone. */
#ai-chat-container {
  position: fixed;
  right: 2.5rem;
  bottom: calc(
    2.5rem + env(safe-area-inset-bottom)
  ); /* Posizione in basso a destra */
  z-index: var(--z-layer-chatbot);
  display: flex;
  flex-direction: column; /* Elementi impilati verticalmente */
  align-items: flex-end; /* Allineati a destra */
  transition: bottom 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); /* Animazione per quando il banner cookie è attivo */
}

/* Pulsante per aprire/chiudere il chatbot. */
#ai-chat-button {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px; /* Circolare */
  background: var(--primary-gradient); /* Sfondo a gradiente */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  box-shadow: 0 10px 20px rgba(0, 98, 224, 0.2); /* Ombra colorata */
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Effetto hover per il pulsante del chatbot. */
@media (hover: hover) {
  #ai-chat-button:hover {
    transform: scale(1.1); /* Ingrandisce */
    box-shadow: 0 15px 30px rgba(0, 98, 224, 0.3); /* Ombra più pronunciata */
  }
}

/* Icona dentro al pulsante. */
#ai-chat-button .material-symbols-outlined {
  font-size: 2rem;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Finestra del chatbot.
*  Inizialmente nascosta (traslata, ridimensionata e trasparente). */
#ai-chat-window {
  width: 330px;
  height: 470px;
  background: var(--bg-light); /* Sfondo tema chiaro */
  border: 1px solid var(--border-light);
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(20px) scale(0.95); /* Inizialmente spostata e rimpicciolita */
  opacity: 0; /* e trasparente */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
  pointer-events: none; /* Non interattiva quando nascosta */
  margin-bottom: 1rem;
}

/* Quando il contenitore ha la classe `.open`, mostra la finestra con un'animazione. */
#ai-chat-container.open #ai-chat-window {
  transform: translateY(0) scale(1); /* Riporta a dimensione e posizione normale */
  opacity: 1; /* Rende visibile */
  pointer-events: auto; /* Rende interattiva */
}

/* Animazioni per l'icona del pulsante (cambio tra "apri" e "chiudi"). */
#ai-chat-container.open #ai-chat-button .icon-open {
  transform: scale(0) rotate(90deg); /* Nasconde l'icona "apri" */
}

#ai-chat-container.open #ai-chat-button .icon-close {
  transform: scale(1) rotate(0deg); /* Mostra l'icona "chiudi" */
}

/* L'icona "chiudi" è inizialmente nascosta. */
#ai-chat-button .icon-close {
  position: absolute;
  transform: scale(0) rotate(-90deg);
}

/* Finestra del chatbot in tema scuro. */
html[data-theme="dark"] #ai-chat-window {
  background: #101012;
  border-color: var(--border-dark);
}

/* Header della finestra del chatbot. */
#ai-chat-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  font-weight: 700;
}
html[data-theme="dark"] #ai-chat-header {
  border-color: var(--border-dark);
}

/* Corpo della finestra del chatbot (contenuto). */
#ai-chat-body {
  flex-grow: 1; /* Occupa lo spazio rimanente */
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#ai-chat-body .material-symbols-outlined {
  font-size: 3rem;
  color: var(--text-secondary-light);
}
html[data-theme="dark"] #ai-chat-body .material-symbols-outlined {
  color: var(--text-secondary-dark);
}
#ai-chat-body p {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary-light);
}
html[data-theme="dark"] #ai-chat-body p {
  color: var(--text-secondary-dark);
}

/* Adattamenti responsive per il chatbot su schermi piccoli (mobile). */
@media (max-width: 480px) {
  /* Sposta leggermente il contenitore. */
  #ai-chat-container {
    right: 2rem;
    bottom: calc(2rem + env(safe-area-inset-bottom));
  }

  /* La finestra diventa "quasi" a schermo intero. */
  #ai-chat-window {
    position: fixed;
    width: calc(100vw - 2rem);
    height: 70vh;
    max-height: 550px;
    bottom: calc(6rem + env(safe-area-inset-bottom));
    left: 1rem;
    right: 1rem;
    margin-bottom: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s,
      bottom 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* Rimpicciolisce il pulsante e l'icona. */
  #ai-chat-button {
    width: 3.5rem;
    height: 3.5rem;
  }
  #ai-chat-button .material-symbols-outlined {
    font-size: 1.75rem;
  }

  /* Quando il banner dei cookie è visibile, alza anche la finestra del chatbot. */
  #ai-chat-container.open.raised-by-banner #ai-chat-window {
    bottom: calc(9.5rem + env(safe-area-inset-bottom));
  }
}

/* Classe applicata via JS quando il banner cookie è attivo per alzare il pulsante del chatbot. */
#ai-chat-container.raised-by-banner {
  bottom: calc(8rem + env(safe-area-inset-bottom));
}

@media (max-width: 768px) {
  #ai-chat-container.raised-by-banner {
    bottom: calc(10rem + env(safe-area-inset-bottom));
  }
}

/* Ritardi di animazione per l'effetto "stagger".
*  Ogni figlio diretto avrà un ritardo progressivamente maggiore. */
@media (prefers-reduced-motion: no-preference) {
  .stagger-in > *:nth-child(1) {
    animation-delay: 0.1s;
  }
  .stagger-in > *:nth-child(2) {
    animation-delay: 0.2s;
  }
  .stagger-in > *:nth-child(3) {
    animation-delay: 0.3s;
  }
  .stagger-in > *:nth-child(4) {
    animation-delay: 0.4s;
  }
  .stagger-in > *:nth-child(5) {
    animation-delay: 0.5s;
  }
  .stagger-in > *:nth-child(6) {
    animation-delay: 0.6s;
  }
}

/* --- 10. LANGUAGE SWITCHER --- */
/* Stili per il selettore della lingua. */

.language-switcher {
  position: relative;
  display: flex;
  align-items: center;
}

/* Pulsante per aprire il dropdown delle lingue. */
.language-switcher-button {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 9999px;
  transition: background-color 0.2s ease-in-out;
}
.language-switcher-button .material-symbols-outlined {
  font-size: 1.5rem;
  color: #111827;
}
html[data-theme="dark"] .language-switcher-button .material-symbols-outlined {
  color: #f5f5f7;
}

/* Effetto hover per il pulsante del selettore lingua. */
.language-switcher-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
html[data-theme="dark"] .language-switcher-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown delle lingue.
*  Posizionato in modo assoluto rispetto al contenitore.
*  Inizialmente nascosto e animato all'apertura. */
.language-dropdown {
  position: absolute;
  top: calc(100% + 10px); /* Posizionato sotto il pulsante */
  right: 0;
  min-width: 180px;
  background: #f5f5f7; /* Sfondo leggermente diverso per staccare */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-light);
  border-radius: 1.25rem;
  padding: 0.5rem;
  z-index: var(--z-layer-navigation); /* Alto z-index */
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
  opacity: 0; /* Inizialmente nascosto */
  transform: translateY(-10px) scale(0.98); /* e spostato/rimpicciolito */
  pointer-events: none; /* e non interattivo */
  transition: opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Classe `.open` applicata via JS per mostrare il dropdown. */
.language-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Dropdown in tema scuro. */
html[data-theme="dark"] .language-dropdown {
  background: #050505;
  border-color: var(--border-dark);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2);
}

/* Stili per ogni opzione (pulsante) nel dropdown. */
.language-dropdown button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary-light);
  transition: background-color 0.2s, color 0.2s;
}
html[data-theme="dark"] .language-dropdown button {
  color: var(--text-primary-dark);
}

/* Effetto hover per le opzioni. */
.language-dropdown button:hover {
  background-color: var(--primary-color);
  color: white;
}

/* Stile per l'opzione di lingua attualmente attiva. */
.language-dropdown button.active {
  background-color: rgba(0, 98, 224, 0.1); /* Sfondo primario semitrasparente */
  color: var(--primary-color);
  font-weight: 700;
}

/* --- 11. HEADER CONTROLS --- */
/* Stili aggiuntivi per uniformare l'aspetto dei controlli nell'header. */

/* Stile comune per i link di navigazione.
* `nav-link-style` serve a creare un aspetto simile a un pulsante "pillola". */
.nav-link-style {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 1rem;
  border-radius: 99px;
  transition: background-color 0.2s, color 0.2s;
}

/* Effetto hover per i link. */
.nav-link-style:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
html[data-theme="dark"] .nav-link-style:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Stile per il link attivo. */
.nav-link-style.active {
  color: var(--primary-color);
  font-weight: 700;
  background-color: rgba(0, 98, 224, 0.1);
}

/* La linea sotto al testo `::after` (definita in sez. 5) è ridondante con questo stile, quindi viene nascosta. */
.nav-link.active::after {
  /* Mantengo la definizione qui per chiarezza anche se era già definita sopra */
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background-color: var(--primary-color);
  border-radius: 2px;
}
.nav-link-style.active::after {
  display: none;
}

/* Stili per garantire che tutti i controlli nell'header abbiano la stessa altezza (44px).
* `box-sizing: border-box` è cruciale per includere padding e bordi nel calcolo dell'altezza. */
.glass-header .nav-link-style,
.glass-header .language-switcher-button,
.glass-header .theme-toggle-button,
.glass-header .primary-button {
  height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

/* I pulsanti solo-icona vengono resi quadrati (44x44px). */
.glass-header .language-switcher-button,
.glass-header .theme-toggle-button,
.glass-header #mobile-menu-open-button {
  width: 44px;
  height: 44px;
  justify-content: center;
  padding: 0;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

/* Rimuove il padding verticale dal pulsante primario nell'header per rispettare l'altezza di 44px. */
.glass-header .primary-button {
  padding-top: 0;
  padding-bottom: 0;
}

/* --- 12. CONTENT TABLE & LEGALS --- */
/* Stili per tabelle di contenuto, come quella nella Cookie Policy. */

/* Wrapper per rendere la tabella scrollabile orizzontalmente su schermi piccoli. */
.table-wrapper-scrollable {
  overflow-x: auto; /* Aggiunge scroll orizzontale se necessario */
  scrollbar-width: thin; /* Stile della scrollbar su Firefox */
  scrollbar-color: var(--primary-color) transparent; /* Colori della scrollbar */
}
.table-wrapper-scrollable::-webkit-scrollbar {
  height: 8px;
} /* Stili scrollbar per Webkit */
.table-wrapper-scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.table-wrapper-scrollable::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Stili del contenitore della tabella. */
.table-wrapper-scrollable {
  border-radius: 1.5rem;
  overflow-x: auto;
  background-color: var(--bg-light); /* Sfondo tema chiaro */
  border: 1px solid var(--border-light); /* Bordo tema chiaro */
}
html[data-theme="dark"] .table-wrapper-scrollable {
  background: var(--glass-bg-dark); /* Sfondo "vetro" tema scuro */
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-color: var(--border-dark);
}

/* Stili di base della tabella. */
.content-table {
  width: 100%;
  min-width: 500px; /* Forza lo scroll su schermi più piccoli di 500px */
  border-collapse: collapse;
  border-spacing: 0;
}

/* Stili per le celle (th, td). */
.content-table th,
.content-table td {
  padding: 1.25rem 0.25rem;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--border-light); /* Linea di separazione tra le righe */
  color: var(--text-primary-light);
}
html[data-theme="dark"] .content-table th,
html[data-theme="dark"] .content-table td {
  border-bottom-color: var(--border-dark);
  color: var(--text-primary-dark);
}

/* Stili specifici per le intestazioni (thead th). */
.content-table thead th {
  color: var(--text-secondary-light);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
html[data-theme="dark"] .content-table thead th {
  color: var(--text-secondary-dark);
}

/* Rimuove il bordo inferiore dell'ultima riga della tabella. */
.content-table tbody tr:last-child td {
  border-bottom: none;
}

/* Stili per il tag `<code>` all'interno delle celle (usato per nomi di cookie, etc.). */
.content-table td code {
  background-color: rgba(
    0,
    98,
    224,
    0.08
  ); /* Sfondo primario semitrasparente */
  color: var(--primary-color);
  padding: 0.25rem 0.6rem;
  border-radius: 0.5rem;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
}
html[data-theme="dark"] .content-table td code {
  background-color: rgba(
    0,
    98,
    224,
    0.15
  ); /* Leggermente più opaco in tema scuro */
}

/* --- 13. PERFORMANCE ANALYSIS SECTION (NUOVO) --- */

/* Griglia per le statistiche principali. Responsive come la griglia dei partner. */
.performance-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* Card per ogni statistica individuale. */
.performance-stat-card {
  background: var(--glass-bg-light);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-light);
  border-radius: 1.5rem;
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden; /* Nasconde l'overflow del pseudo-elemento */
}
html[data-theme="dark"] .performance-stat-card {
  background: var(--glass-bg-dark);
  border-color: var(--border-dark);
}

/* Linea colorata animata in cima alla card, visibile solo in hover. */
.performance-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary-color),
    transparent
  ); /* Gradiente per l'effetto "sweep" */
  opacity: 0; /* Inizialmente nascosta */
  transition: opacity 0.3s ease;
}

/* Effetti hover per le card delle statistiche. */
@media (hover: hover) {
  .performance-stat-card:hover {
    transform: translateY(-8px); /* Solleva la card */
  }
  .performance-stat-card:hover::before {
    opacity: 1; /* Mostra la linea animata */
  }
}

/* Stili per il titolo (label) della statistica. */
.performance-stat-card h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary-light);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
html[data-theme="dark"] .performance-stat-card h3 {
  color: var(--text-secondary-dark);
}

/* Stili per il numero grande della statistica. */
.performance-stat-card .stat-number {
  font-size: clamp(2.5rem, 6vw, 3.5rem); /* Dimensione responsive */
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.25rem;
}

/* Stili per l'unità di misura (label sotto al numero). */
.performance-stat-card .stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary-light);
}
html[data-theme="dark"] .performance-stat-card .stat-label {
  color: var(--text-secondary-dark);
}

/* Modificatori di colore per le card "manual" (rosso) e "automated" (teal). */
.performance-stat-card.manual::before {
  background: linear-gradient(90deg, transparent, #ef4444, transparent);
}
.performance-stat-card.automated::before {
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-teal),
    transparent
  );
}
.performance-stat-card.manual .stat-number {
  color: #ef4444;
}
.performance-stat-card.automated .stat-number {
  color: var(--accent-teal);
}

/* Blocco di testo evidenziato ("callout" o "info box"). */
.performance-highlight {
  background: rgba(0, 98, 224, 0.05); /* Sfondo primario molto leggero */
  border-left: 4px solid var(--primary-color); /* Bordo laterale colorato */
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 3rem auto;
  max-width: 800px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary-light);
}
html[data-theme="dark"] .performance-highlight {
  background: rgba(0, 98, 224, 0.1);
  color: var(--text-secondary-dark);
}
/* Testo in grassetto all'interno del blocco evidenziato. */
.performance-highlight strong {
  color: var(--text-primary-light);
  font-weight: 700;
}
html[data-theme="dark"] .performance-highlight strong {
  color: var(--text-primary-dark);
}

/* Griglia per contenere i grafici. */
.performance-charts-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 4rem;
}

/* Contenitore di un singolo grafico. */
.performance-chart-container {
  background: var(--glass-bg-light);
  border: 1px solid var(--border-light);
  border-radius: 1.5rem;
  padding: 1.5rem;
  transition: border-color 0.3s;
}
@media (min-width: 768px) {
  .performance-chart-container {
    padding: 2rem;
  }
}
html[data-theme="dark"] .performance-chart-container {
  background: var(--glass-bg-dark);
  border-color: var(--border-dark);
}
/* Effetto hover sul contenitore del grafico. */
@media (hover: hover) {
  .performance-chart-container:hover {
    border-color: var(--primary-color); /* Evidenzia il bordo */
  }
}

/* Titolo sopra il grafico. */
.performance-chart-container h3 {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--text-primary-light);
}
html[data-theme="dark"] .performance-chart-container h3 {
  color: var(--text-primary-dark);
}

/* Wrapper per il tag `<canvas>` del grafico, per renderlo responsivo. */
.chart-wrapper {
  position: relative;
   aspect-ratio: 4 / 3; /* Un rapporto comune per i grafici, puoi cambiarlo se preferisci (es. 16/9) */
  max-height: 350px; /* Imposta un'altezza massima per evitare che diventi troppo grande */
}

/* Griglia per la lista dei vantaggi. */
.performance-advantages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Le card dei vantaggi riutilizzano la classe `.card--simple`,
* ma questa classe `.performance-advantage` aggiunge lo spazio interno. */
.performance-advantage {
  padding: 2rem;
}

.performance-advantage h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-primary-light);
}
html[data-theme="dark"] .performance-advantage h4 {
  color: var(--text-primary-dark);
}

.performance-advantage p {
  font-size: 0.9rem;
  color: var(--text-secondary-light);
  line-height: 1.6;
}
html[data-theme="dark"] .performance-advantage p {
  color: var(--text-secondary-dark);
}


/* Stile per il link/pulsante interattivo all'interno della timeline */
.timeline-link {
    display: inline-flex; /* Allinea testo e icona */
    align-items: center;
    gap: 0.5rem; /* Spazio tra testo e icona */
    padding: 0.35rem 0.85rem; /* Padding ridotto per un aspetto compatto */
    border-radius: 99px; /* Forma a pillola */
    font-size: 0.8rem; /* Testo leggermente più piccolo */
    font-weight: 600; /* Semi-grassetto */
    text-decoration: none; /* Rimuove la sottolineatura */
    background-color: var(--glass-bg-light);
    border: 1px solid var(--border-light);
    color: var(--text-primary-light);
    transition: transform 0.2s, box-shadow 0.2s;
}

html[data-theme="dark"] .timeline-link {
    background-color: var(--glass-bg-dark);
    border-color: var(--border-dark);
    color: var(--text-primary-dark);
}

@media (hover: hover) {
    .timeline-link:hover {
        transform: translateY(-2px); /* Leggero sollevamento al passaggio del mouse */
        box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.1);
    }

    html[data-theme="dark"] .timeline-link:hover {
        box-shadow: 0 0 15px -5px rgba(0, 98, 224, 0.15);
    }
}

/* Assicura che l'icona si allinei bene con il testo */
.timeline-link .material-symbols-outlined {
   font-size: 1.1em; /* Dimensione icona relativa al testo */
}