/* ======================================
   Hero Section Homepage
   - Fullscreen senza header, gradient di sfondo
   - Contenuto centrale bianco e testo centrato
   ====================================== */
.home-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; 
  padding: 2rem 1rem;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
  color: #fff;
  text-align: center;
}

/* ======================================
   Titolo e descrizione eroe
   - Dimensioni font e spaziatura
   ====================================== */
.hero-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
}

/* ======================================
   Gruppo di pulsanti
   - Layout flex, gap, centratura
   ====================================== */
.btn-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* ======================================
   Stile pulsanti hero
   - Bottone bianco con bordo primario
   - Hover inverte colori e solleva bottone
   ====================================== */
.home-hero .btn-group .btn {
  background-color: #fff;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  padding: 0.6rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background-color var(--transition),
              color var(--transition),
              transform var(--transition);
}
.home-hero .btn-group .btn:hover {
  background-color: var(--primary-color);
  color: #fff;
  transform: translateY(-2px);
}