: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{
      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;
}
    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;
    }