:root{
      --bg:#0b0f14;
      --bg-soft:#111827;
      --accent:#e10600;
      --text:#e5e7eb;
      --muted:#9ca3af;
    }
    *{box-sizing:border-box}
    body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif; /* O il tuo font */
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), 
              url('Limoli.png') center/cover no-repeat fixed;
  color: #f5f5f5;
  min-height: 100vh;
}

.hero-section { /* Per la sezione hero specifica */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  position: relative;
}

    header{
      position:fixed;
      top:0; width:100%; z-index:1000;
      background:rgba(11,15,20,.9);
      backdrop-filter:blur(6px);
      border-bottom:1px solid #1f2937;
    }
    nav{
      max-width:1200px; margin:auto;
      display:flex; justify-content:space-between; align-items:center;
      padding:15px 20px;
    }
    nav a{
      color:var(--text);
      text-decoration:none;
      margin-left:20px;
      font-weight:600;
      font-size:.9rem;
      letter-spacing:.05em;
    }
    nav a:hover{color:var(--accent)}

    section{padding:100px 20px; max-width:1200px; margin:auto}
.hero-logo {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 10;
  opacity: 0.9;
}

.hero-logo img {
  /* --- AGGIUNGI O MODIFICA QUESTE RIGHE --- */
  width: 250px;        /* Regola questa larghezza per ingrandirlo (es. 150px, 200px, 250px) */
  height: auto;        /* Mantiene le proporzioni corrette */
  
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
  transition: all 0.3s;
}

.hero-logo img:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* Padding per non coprire testo */
.hero {
  position: relative;
  padding-top: 120px; /* Spazio per logo + navbar */
}

    .hero{
      min-height:100vh;
      display:flex; flex-direction:column; justify-content:center;
      background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.85)),url('hero-ironman.jpg') center/cover no-repeat;
    }
    .hero h1{font-size:3.5rem; font-weight:800; margin:0}
    .hero p{max-width:600px; color:var(--muted)}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 4rem;
}

.pricing-card {
  background: linear-gradient(135deg, rgba(18,16,14,0.95), rgba(8,7,6,0.9));
  border: 1px solid rgba(203,98,64,0.2);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  text-align: center;
  position: relative;
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
}

.pricing-card:hover {
  transform: translateY(-10px);
  border-color: rgba(203,98,64,0.4);
  box-shadow: 0 30px 80px rgba(203,98,64,0.2);
}

.pricing-card.popular {
  border-color: #CB6240;
  background: linear-gradient(135deg, rgba(203,98,64,0.1), rgba(8,7,6,0.9));
}

.badge {
  position: absolute;
  top: -15px; left: 50%; transform: translateX(-50%);
  background: #CB6240; color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
}

.card-header h3 {
  font-size: 1.8rem; color: #f5f5f5; margin-bottom: 1rem;
}

.price {
  font-size: 3.5rem; font-weight: 800; color: #CB6240;
  margin-bottom: 0.5rem; line-height: 1;
}

.duration {
  color: rgba(245,245,245,0.7); font-size: 1.1rem;
}

.features {
  list-style: none; margin: 2.5rem 0 3rem; text-align: left;
}

.features li {
  padding: 0.8rem 0; color: #f5f5f5;
  position: relative; padding-left: 2rem;
}

.features li::before {
  content: '✓'; color: #CB6240; font-weight: bold;
  position: absolute; left: 0; font-size: 1.2rem;
}

    .btn{
      display:inline-block;
      margin-top:25px;
      padding:14px 32px;
      border-radius:40px;
      background:var(--accent);
      color:white;
      text-decoration:none;
      font-weight:700;
      letter-spacing:.05em;
    }
    .btn.outline{
      background:transparent;
      border:2px solid var(--accent);
      margin-left:15px;
    }

    h2{font-size:2.2rem; margin-bottom:20px}
    h3{font-size:1.2rem; text-transform:uppercase; letter-spacing:.08em}
    p,li{color:var(--muted)}

    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:30px;
    }

    .card{
      background:var(--bg-soft);
      padding:30px;
      border-radius:16px;
      border:1px solid #1f2937;
    }
.plan-logo {
  width: 100px; height: 100px; margin: 0 auto 2rem;
  display: flex; align-items: center; justify-content: center;
}

.logo-ciclope, .logo-eolo, .logo-vulcano {
  width: 80px; height: 80px; filter: drop-shadow(0 8px 20px rgba(203,98,64,0.4));
  transition: all 0.3s ease;
}

.pricing-card:hover .logo-ciclope,
.pricing-card:hover .logo-eolo,
.pricing-card:hover .logo-vulcano {
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 12px 30px rgba(203,98,64,0.6));
}

#contatti {
  display: flex;
  flex-direction: column;
  align-items: center;      /* Centra orizzontalmente tutti i figli diretti */
  justify-content: center;   /* Centra verticalmente (se la sezione ha un'altezza definita) */
  padding: 80px 20px;       /* Spazio sopra e sotto la sezione */
  text-align: center;       /* Centra i testi come l'h2 */
}

#contatti .container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;      /* Centra il contenuto interno al container */
}

.typeform-container {
  background: rgba(18,16,14,0.95);
  border-radius: 24px;
  padding: 2rem;
  border: 1px solid rgba(203,98,64,0.3);
  backdrop-filter: blur(15px);
  
  /* --- MODIFICHE PER STRINGERE --- */
  max-width: 600px;    /* Imposta la larghezza massima (es. 600px o 500px) */
  margin: 2rem auto;   /* 'auto' lo centra orizzontalmente nella pagina */
}

.typeform-container iframe {
  border-radius: 20px;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.6));
  width: 100%;         /* Assicura che l'iframe occupi tutta la larghezza del contenitore stretto */
  height: 500px;       /* Regola l'altezza in base alle tue necessità */
}

#contatti h2 {
  font-size: 3rem;           /* Dimensione grande e impattante */
  font-weight: 800;          /* Molto grassetto */
  letter-spacing: -1px;      /* Lettere leggermente più vicine, stile moderno */
  margin-bottom: 1rem;
  color: #ffffff;
}

/* Evidenziamo una parte del testo con il tuo colore arancio */
#contatti h2 span {
  background: linear-gradient(135deg, #cb6240, #f2a65a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-hero {
  min-height: 70vh;
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)), 
              url('img/etna-action.jpg') center/cover;
  display: flex; align-items: center;
}

.hero-subtitle { font-size: 1.5rem; opacity: 0.9; margin-bottom: 3rem; }

.stats {
  display: flex; gap: 3rem; justify-content: center; flex-wrap: wrap;
}

.stat {
  text-align: center;
}

.stat-number { 
  display: block; font-size: 3rem; color: #CB6240; font-weight: 800; 
}

.bio-section { background: rgba(18,16,14,0.95); padding: 120px 0; }

.bio-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 5rem; align-items: center;
}

.bio-image .photo-placeholder {
  width: 100%; height: 500px; background: linear-gradient(135deg, #CB6240, #A64732);
  border-radius: 24px; display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.5rem; text-align: center;
}
.philosophy {
  background-color: #080706;
  padding: 5rem 0;
}

.philosophy .container {
  max-width: 1200px; /* o 1400px se vuoi più aria */
}


.philosophy { padding: 120px 0; background: rgba(8,7,6,0.9); }

.philo-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem; margin-top: 4rem;
}

.philo-card {
  background: rgba(203,98,64,0.1); padding: 2.5rem; border-radius: 20px;
  border: 1px solid rgba(203,98,64,0.2); text-align: center;
}

.cta-section {
  background: linear-gradient(135deg, #CB6240, #A64732);
  padding: 80px 0; text-align: center;
}
.cta-section {
  width: 90%;
}

.cta-section .container {
  max-width: 1800px; /* aumenta questo valore */
}

.certs-grid { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.cert {
  background: rgba(203,98,64,0.2); color: #f5f5f5; padding: 0.8rem 1.5rem;
  border-radius: 50px; font-size: 0.9rem;
}

@media (max-width: 768px) {
  .bio-grid { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
}




.philosophy .container {
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra tutto il blocco nel sito */
}

.philo-cards {
  display: grid;
  /* Crea 3 colonne della stessa dimensione */
  grid-template-columns: repeat(3, 1fr); 
  gap: 20px;          /* Ridotto lo spazio tra le card */
  
  width: 100%;
  max-width: 900px;   /* STRINGE la griglia: portalo a 800px se le vuoi ancora più piccole */
  margin: 0 auto;
}

.philo-card {
  background: rgba(255, 255, 255, 0.03); /* Quasi trasparente */
  backdrop-filter: blur(10px);           /* Effetto vetro sfocato */
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 25px 20px;
  border-radius: 16px;
}

.philo-card h3 {
  font-size: 1.1rem;  /* Titolo più piccolo */
  margin-bottom: 10px;
  color: #fff;
}

.philo-card p {
  font-size: 0.9rem;  /* Testo più piccolo */
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

/* --- RESPONSIVE: Sul cellulare le mettiamo una sotto l'altra --- */
@media (max-width: 768px) {
  .philo-cards {
    grid-template-columns: 1fr; /* Una sola colonna sui telefoni */
    max-width: 350px;           /* Evita che diventino troppo larghe sul mobile */
  }
}






    footer{
      background:#020617;
      border-top:1px solid #1f2937;
      padding:60px 20px;
    }
    .footer-grid{
      max-width:1200px; margin:auto;
      display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:30px;
    }
    footer a{color:var(--muted); text-decoration:none}
    footer a:hover{color:white}
    input,textarea{
      width:100%; padding:12px; margin-top:8px;
      background:#020617; color:white;
      border:1px solid #1f2937; border-radius:8px;
    }