/* --- Impostazioni Globali e Tipografia --- */
body {
  font-family: 'Open Sans', sans-serif; /* NUOVO: Font specifico */
  margin: 0;
  line-height: 1.7;
  background: #fdfdff; /* NUOVO: Sfondo quasi bianco, più pulito */
  color: #333;
}

h1, h2, h3 {
  font-family: 'Poppins', sans-serif; /* NUOVO: Font per i titoli */
  margin-top: 0;
  color: #1d2c4e; /* NUOVO: Blu scuro per i titoli */
}

main {
  padding: 2em 1em;
  max-width: 1000px;
  margin: auto;
}

/* --- Hero Section (Header) --- */
.hero-section {
  background: linear-gradient(45deg, #005c97, #363795); /* NUOVO: Gradiente */
  color: white;
  padding: 4em 2em;
  text-align: center;
}

.hero-content {
  max-width: 1000px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2em;
}

.hero-text h1 {
  font-size: 3rem;
  color: white;
  margin-bottom: 0.2em;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* NUOVO: Ombra per leggibilità */
}

.hero-text p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.hero-image img {
  width: 200px;
  height: auto;
  border-radius: 50%; /* NUOVO: Immagine tonda, più moderna */
  border: 4px solid white;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}

/* --- Sezione Funzionalità --- */
.features-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* NUOVO: Centra le card */
  gap: 2em; /* NUOVO: Più spazio tra le card */
  margin-bottom: 4em;
}

.features-col {
  flex: 1 1 320px; /* NUOVO: Base flessibile per responsività */
  background: #fff;
  padding: 2em;
  border-radius: 12px; /* NUOVO: Bordi più arrotondati */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); /* NUOVO: Ombra più morbida e diffusa */
  border: 1px solid #eef;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* NUOVO: Transizione per hover */
}

.features-col:hover {
  transform: translateY(-8px); /* NUOVO: Effetto al passaggio del mouse */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.section-block ul,
.features-col ul,
.features-col ol {
  padding-left: 1.2em;
}

.section-block li,
.features-col li {
  margin-bottom: 0.8em; /* NUOVO: Più spazio tra gli item */
}

.section-block li::marker ,
.features-col li::marker {
  color: #007bff; /* NUOVO: Blu vibrante per i marker */
  font-weight: bold;
}

.features-col h3 {
  display: flex;
  align-items: center;
  gap: 0.5em; /* Spazio tra icona e titolo */
  font-size: 1.5rem;
}

.icon {
  color: #007bff;
  font-size: 1.2em; /* Rende l'icona leggermente più grande del testo */
}

/* --- Call to Action (CTA) Section --- */
.cta-section {
  text-align: center;
  background: #f4f7fc; /* NUOVO: Sfondo leggermente colorato per staccare */
  padding: 3em 2em;
  border-radius: 12px;
  max-width: 800px;
  margin: 2em auto;
}

.cta-button {
  display: inline-block;
  background: #007bff; /* NUOVO: Blu vibrante */
  color: white;
  padding: 12px 30px;
  border-radius: 50px; /* NUOVO: Bottone "a pillola" */
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin-top: 1em;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 20px rgba(0, 123, 255, 0.4);
}


/* --- Footer --- */
footer {
  text-align: center;
  font-size: 0.9em;
  padding: 2em;
  border-top: 1px solid #eee;
  margin-top: 2em;
}

footer a {
  color: #005c97;
  text-decoration: none;
  margin: 0 0.5em;
}

/* === AGGIUNTE PER PAGINE INTERNE === */

/* Header per le pagine secondarie (più piccolo) */
.subpage-header {
  background: linear-gradient(45deg, #005c97, #363795);
  color: white;
  padding: 2em 1em; /* Padding ridotto per un header più piccolo */
  text-align: center;
  border-bottom: 4px solid #007bff;
}

.subpage-header h1 {
  font-size: 2.2rem; /* Titolo più piccolo rispetto alla home */
  color: white;
  margin: 0 0 0.5em 0;
}

/* Menu di navigazione principale */
.main-nav ul {
  display: flex;
  justify-content: center;
  gap: 2.5em;
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav a {
  color: white;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  padding-bottom: 8px;
  border-bottom: 3px solid transparent; /* Bordo trasparente per allineamento */
  transition: border-color 0.3s ease;
}

.main-nav a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.7); /* Bordo al passaggio del mouse */
}

/* Stile per il link della pagina attiva */
.main-nav a.active {
  border-bottom-color: #ffffff;
  font-weight: 600;
}

/* Stile per il contenuto delle pagine di policy */
.policy-content {
  max-width: 800px;
  margin: 2em auto;
  padding: 0 1em;
  background-color: #fff;
  padding: 2em;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.policy-content h2 {
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.policy-content strong {
    color: #1d2c4e;
}

/* --- Media Query per schermi piccoli --- */
@media (max-width: 768px) {
  .hero-content {
    flex-direction: column-reverse; /* L'immagine va sopra su mobile */
  }
  .hero-text h1 {
    font-size: 2.5rem;
  }
}

/* Stili per il contenitore generale dei passi */
.container {
    max-width: 1200px; /* Larghezza massima del contenitore, puoi regolarla */
    margin: 0 auto; /* Centra il contenitore sulla pagina */
    padding: 0 15px; /* Padding sui lati per schermi piccoli */
}

/* Stili per il layout dei passi (sezione "steps") */
.steps {
    display: flex; /* Utilizza Flexbox per allineare i blocchi */
    flex-wrap: wrap; /* Permette ai blocchi di andare a capo su schermi più piccoli */
    justify-content: center; /* Centra i blocchi orizzontalmente */
    gap: 20px; /* Spazio tra i blocchi */
    margin-top: 30px; /* Spazio sopra i blocchi */
}

/* Stili per ogni singolo "step" */
.step {
    flex: 1 1 200px; /* Permette ai blocchi di crescere (1), restringersi (1) e avere una base di 200px */
    max-width: 280px; /* Larghezza massima per ogni blocco su schermi grandi */
    text-align: center; /* Centra il testo e le immagini all'interno del blocco */
    padding: 20px;
    border: 1px solid #eee; /* Bordo leggero per separare i blocchi */
    border-radius: 8px; /* Angoli arrotondati */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombra leggera */
    display: flex; /* Usa flexbox anche per il contenuto dello step */
    flex-direction: column; /* Impila gli elementi verticalmente */
    align-items: center; /* Centra gli elementi orizzontalmente */
}

/* Stili per le immagini all'interno di ogni "step" */
.step img {
    max-width: 100%; /* L'immagine non supererà mai la larghezza del suo contenitore */
    height: auto; /* Mantieni le proporzioni dell'immagine */
    display: block; /* Rimuovi eventuali spazi extra sotto l'immagine */
    margin-bottom: 15px; /* Spazio sotto l'immagine */
    width: 150px; /* Puoi impostare una larghezza fissa o massima per le immagini, se desideri un controllo maggiore */
    height: 150px; /* E un'altezza fissa se sono tutte quadrate, o auto */
    object-fit: contain; /* Assicura che l'intera immagine sia visibile e non tagliata, mantenendo le proporzioni */
}

/* Stili per il titolo dello step */
.step-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}
/* Stili per la descrizione dello step */
.step-desc {
    font-size: 0.95em;
    color: #666;
    line-height: 1.6;
}

/* Media Queries per la reattività */
@media (max-width: 768px) {
    .steps {
        flex-direction: column; /* Impila i blocchi verticalmente su schermi più piccoli */
        align-items: center; /* Centra i blocchi quando sono impilati */
    }

    .step {
        max-width: 90%; /* Occupa quasi tutta la larghezza disponibile su mobile */
        width: 100%; /* Assicura che ogni step occupi la larghezza completa disponibile nel flexbox */
    }
}

@media (max-width: 480px) {
    .step {
        padding: 15px;
    }
    .step-title {
        font-size: 1.1em;
    }
    .step-desc {
        font-size: 0.9em;
    }
}