a di/* ! Base Style */
/* ----------------------------------------------------------------------------------- */

:root {
  /* Colori principali */
  --primary: #9747FF;
  --primary-light: #DABEFF;
  --primary-dark: #6E57FF;
  --primary-alpha-10: rgba(151, 71, 255, 0.1);
  --primary-alpha-15: rgba(151, 71, 255, 0.15);
  --primary-alpha-20: rgba(151, 71, 255, 0.2);
  --primary-alpha-30: rgba(151, 71, 255, 0.3);
  
  /* Colori di testo */
  --text-dark: #333333;
  --text-medium: #555555;
  --text-light: #777777;
  
  /* Colori di sfondo */
  --bg-light: #F7F7F7;
  --bg-white: #FFFFFF;
  --bg-white-alpha-10: rgba(255, 255, 255, 0.1);
  --bg-white-alpha-15: rgba(255, 255, 255, 0.15);
  
  /* Colori di bordo */
  --border-light: rgba(0, 0, 0, 0.1);
  --border-primary: rgba(151, 71, 255, 0.2);
  --border-white: rgba(255, 255, 255, 0.2);
  
  /* Ombre */
  --shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 20px rgba(151, 71, 255, 0.15);
  --shadow-lg: 0 15px 30px rgba(151, 71, 255, 0.2);
  
  /* Transizioni */
  --transition-default: all 0.3s ease-in-out;
  --transition-fast: all 0.2s ease-in-out;
  
  /* Bordi */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-round: 50%;
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .t-portfolio-track.animate,
  .animate-float,
  .floating-elements {
    animation: none !important;
  }
}

/* ! Title System */
/* ----------------------------------------------------------------------------------- */
/* .text-0{font-size: 5rem;}
h1, .text-1{font-size: 3.4rem;}
h2, .text-2{font-size: 2.2rem;}
h3, .text-3{font-size: 1.5rem;}
h4, p, .text-4{font-size: 1rem;}

h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}

@media (max-width: 768px) {
  .text-0{font-size: 4rem}
}
 */
/* ! Button system */
/* ----------------------------------------------------------------------------------- */
/* .button,
.wp-block-button__link{font-size: 1.2rem;background: #333; color:#fff; padding: 14px 25px;border-radius: 4px}
.button:hover,
.wp-block-button__link{background: #000;}
 */

/* Stile globale per i bottoni */
.btn, 
button:not(.hamburger):not(.t-plans-toggle-btn):not([class*="wp-"]), 
input[type="submit"],
input[type="button"],
.hero-btn,
.t-plan-cta-btn,
.t-contacts-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: auto;
  padding: 15px 30px;
  font-weight: 600;
  font-size: 1.05rem;
  color: #ffffff;
  border-radius: 8px;
  border: 1px solid transparent;
  background: linear-gradient(92deg, #9747FF 0%, #B57DFF 100%);
  transition: all 0.3s ease;
  margin-top: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(151, 71, 255, 0.15);
}

/* Nuova classe per bottoni compatti che non si allargano troppo */
.hero-btn-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff;
  border-radius: 8px;
  border: 1px solid transparent;
  background: linear-gradient(92deg, #9747FF 0%, #B57DFF 100%);
  transition: all 0.3s ease;
  margin: 0; /* Rimuove margin auto */
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  width: auto; /* Forza la larghezza in base al contenuto */
  box-shadow: 0 4px 10px rgba(151, 71, 255, 0.15);
}

.hero-btn-compact:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(151, 71, 255, 0.3);
  color: #ffffff;
  background: linear-gradient(92deg, #8230FF 0%, #A360FF 100%);
}

.hero-btn-compact:focus {
  color: var(--bg-white);
  background: linear-gradient(92deg, var(--primary) 0%, var(--primary-light) 100%);
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}

.btn:hover, 
button:not(.hamburger):not(.t-plans-toggle-btn):not([class*="wp-"]):hover, 
input[type="submit"]:hover,
input[type="button"]:hover,
.hero-btn:hover,
.t-plan-cta-btn:hover,
.t-contacts-submit:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(151, 71, 255, 0.3);
  color: #ffffff;
  background: linear-gradient(92deg, #8230FF 0%, #A360FF 100%);
}

.btn:focus, 
button:not(.hamburger):not(.t-plans-toggle-btn):not([class*="wp-"]):focus, 
input[type="submit"]:focus,
input[type="button"]:focus,
.hero-btn:focus,
.t-plan-cta-btn:focus,
.t-contacts-submit:focus {
  color: var(--bg-white);
  background: linear-gradient(92deg, var(--primary) 0%, var(--primary-light) 100%);
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}

/* ! Blocks */
/* ----------------------------------------------------------------------------------- */
/* Assicura che il body copra tutta la viewport */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Evita scroll orizzontale */
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
}

/* Background animato direttamente sul body */
body {
  /* background-color: #F7F7F7; */ /* Commentato per mostrare particles.js */
  background-color: transparent; /* Impostato trasparente */
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Evita lo scroll orizzontale sul body */
  display: flex;
  flex-direction: column;
}

/* Animazione per il gradiente di sfondo */
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ! Navbar */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  padding: 1px 3%; /* Ridotto dal 5% originale */
  border-radius: 48px;
  max-width: 1350px;
  margin: 20px auto;
  position: relative;
  z-index: 10;
}

/* Menu principale ottimizzato */
.nav-links {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
  gap: 22px; /* Ridotto da 50px */
  border: 1px solid rgba(160, 160, 160, 0.40);
  background: rgba(255, 255, 255, 0.06);
  padding: 12px 2%; /* Ridotto da 15px 3% */
  border-radius: 48px;
  margin: 10px auto;
}

.nav-links a {
  color: var(--color10);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem; /* Ridotto a 0.85rem */
  transition: var(--transition-default);
  padding: 6px 6px; /* Ridotto ulteriormente */
  position: relative;
  white-space: nowrap; /* Impedisce l'interruzione del testo */
}

/* Logo */
.logo-container {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* Impedisce al logo di rimpicciolirsi */
}

.logo {
  min-width: 30px;
  height: 50px; /* Leggermente ridotto da 40px */
  width: auto;
}

/* Spazio ottimizzato tra logo e menu */
@media (min-width: 769px) {
  .nav-links {
    margin-left: -2rem; /* Sposta il menu più vicino al logo */
  }
}

.brand {
  color: #ddd;
  font-size: 18px;
  font-weight: bold;
}

/* Link navbar */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Ridotto lo spazio tra le voci */
  margin: 0;
  padding: 0px 20px;
  list-style: none;
}

.nav-links a {
  color: var(--color10);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem; /* Ridotto ulteriormente il font size */
  transition: var(--transition-default);
  padding: 6px 8px; /* Ridotto il padding orizzontale */
  position: relative;
  white-space: nowrap; /* Impedisce l'interruzione del testo */
}

.nav-links a:hover {
  color: #9747FF; /* Colore viola per l'hover */
}

/* Pulsante */


.btn:hover {
  transform: scale(1.05);
}

/* Menu Hamburger - L'hamburger deve essere sempre visibile sopra il menu */
.hamburger {
  display: none;
  font-size: 24px;
  color: #000;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 8px;
  transition: all 0.3s ease;
  z-index: 1001; /* Deve essere superiore a tutto, incluso il menu */
}

/* Menu Mobile */
.mobile-menu {
  display: none; /* Inizialmente nascosto */
  opacity: 1 !important; /* Assicura opacità completa */
  visibility: visible !important; /* Assicura visibilità */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 100px 20px 50px;
  text-align: center;
  z-index: 1000; /* Sotto l'hamburger ma sopra tutto il resto */
  overflow-y: auto; /* In caso ci siano molte voci di menu */
  transition: none !important; /* Rimuove tutte le transizioni che possono causare problemi */
}

/* Stile per la classe active che forza il display flex */
.mobile-menu.active {
  display: flex !important; /* Forza il display flex con !important */
}

/* Stili per i link del menu mobile */
.mobile-menu a {
  color: #000;
  text-decoration: none;
  font-size: 24px;
  font-weight: 600;
  padding: 20px 0;
  margin: 5px 0;
  display: block;
  transition: all 0.3s ease;
  position: relative;
}

/* Usiamo sia :hover che :active per supportare sia mouse che touch */
.mobile-menu a:hover,
.mobile-menu a:active,
.mobile-menu a:focus {
  transform: translateY(-3px);
  color: #9747FF !important; /* Uso valore esplicito e forzo con !important */
  text-shadow: 0 0 12px rgba(151, 71, 255, 0.3); /* Aumentato l'effetto glow */
}

/* Aggiungo anche uno stato di touch/tap attivo specifico per mobile */
@media (max-width: 768px) {
  .mobile-menu a:active {
    color: #9747FF !important;
    text-shadow: 0 0 12px rgba(151, 71, 255, 0.3);
  }
}

/* Assicuriamo che il menu mobile sia sempre sopra tutti gli altri elementi quando attivo */
body.menu-open .mobile-menu {
  display: flex !important;
}

/* Reset di body per evitare conflitti */
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Blocco efficace dello scroll per body */
body.menu-open {
  overflow: hidden !important;
  height: 100vh !important;
  position: fixed !important;
  width: 100% !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Modifica l'hamburger quando il menu è aperto */
.hamburger.active {
  position: fixed; /* Fissato quando il menu è aperto */
  top: 20px;
  right: 20px;
  color: #000; /* Nero quando il menu è aperto */
  z-index: 1001; /* Sopra il menu */
}

/* Aggiungiamo una transizione al menu per apertura e chiusura fluide */
.mobile-menu {
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.mobile-menu.active {
  opacity: 1;
  visibility: visible;
}

/* Responsività */
@media (max-width: 768px) {
  .nav-links {
      display: none;
  }

  .btn {
      display: none;
  }

  .hamburger {
      display: block;
      color: #000; /* Assicuriamo che il colore sia nero anche nelle media query */
      background-color: transparent; /* Assicuriamo che lo sfondo sia trasparente */
      z-index: 1001; /* Sopra il menu anche chiuso */
  }
}




/* ! F-Hero */

/* Container per l'animazione Lottie - Torniamo alla versione globale */
.lottie-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
}


/* Styling dei contenuti SVG di Lottie */
.lottie-bg svg {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.6;
  transform: translateZ(0);
  pointer-events: none;
}

/* Elementi decorativi fluttuanti */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible; /* Cambiato da hidden a visible per assicurarsi che le immagini non vengano tagliate */
}

.small-shape {
  position: absolute;
  top: 15%;
  left: 5%;
  width: 180px; /* Aumentato ulteriormente da 150px a 180px */
  height: auto;
  opacity: 1;
  will-change: transform; /* ottimizzazione per le animazioni */
  filter: drop-shadow(0 0 15px rgba(151, 71, 255, 0.4)); /* Aggiungo un'ombra per migliorare la visibilità */
}

.big-shape {
  position: absolute;
  bottom: 20%;
  right: 5%;
  width: 250px; /* Aumentato ulteriormente da 200px a 250px */
  height: auto;
  opacity: 1; /* Aumentato da 0.9 a 1 per massima visibilità */
  will-change: transform;
  filter: drop-shadow(0 0 15px rgba(151, 71, 255, 0.4)); /* Aggiungo un'ombra per migliorare la visibilità */
}

@keyframes floating-glow {
  0% {
    filter: drop-shadow(0 10px 30px rgba(151, 71, 255, 0.3)) blur(0.5px);
    opacity: 0.8;
  }
  50% {
    filter: drop-shadow(0 15px 40px rgba(218, 190, 255, 0.4)) blur(1px);
    opacity: 0.85;
  }
  100% {
    filter: drop-shadow(0 20px 50px rgba(151, 71, 255, 0.35)) blur(0.5px);
    opacity: 0.9;
  }
}

.hero-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
  }


.hero-content {
  max-width: 900px;
  width: 90%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Modificato da flex-start a center */
  align-items: center;
  position: relative;
  z-index: 2;
  background: transparent;
  box-sizing: border-box;
  margin: 0; /* Rimosso margine negativo */
}

/* Badge di identificazione */
.badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-xl);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  transition: var(--transition-default);
  background-color: var(--primary-alpha-10);
  color: var(--primary-dark);
  border: none; /* Rimosso il bordo */
}

.badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--primary-alpha-20);
  background-color: var(--primary-alpha-15);
}

/* Permette di variare la posizione del contenuto */
.align-top {
  align-items: flex-start;
  padding-top: var(--spacing5);
}

.align-bottom {
  align-items: flex-end;
  padding-bottom: var(--spacing5);
}

.hero-logo {
  width: 120px; 
  height: auto;
  margin-bottom: var(--spacing4);
}

.hero-static, .highlight, .hero-footer {
  padding: 0;
  margin: 0;
  line-height: 1.2;
  font-size: inherit; /* Ereditato dalla dimensione di hero-heading */
}

/* Ottimizzazione responsive per le dimensioni del testo */
.hero-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4.5rem); /* Utilizzo di clamp per dimensionamento fluido */
  color: var(--color10);
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.2;
  display: block;
  min-height: 3rem;
}

.highlight {
  color: var(--primary);
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  text-align: center;
}

.hero-typing {
  display: inline-block; /* Cambiato da 'none' a 'inline-block' per renderlo visibile */
  color: #7736cb; /* Colore viola specifico dell'animazione originale */
  position: relative;
  min-width: min(300px, 90vw); /* Imposta una larghezza minima relativa allo schermo */
  text-align: center;
  line-height: 1.2;
  font-size: inherit; /* Stessa dimensione del testo circostante */
  font-weight: inherit; /* Stesso peso del testo circostante */
}

/* Stile per iOS - nasconde il cursore e gestisce la transizione */
.hero-typing.no-cursor .cursor {
  display: none;
}

.hero-typing.no-cursor {
  transition: opacity 0.5s ease-in-out;
  color: #7736cb; /* Assicuro lo stesso colore viola anche per l'animazione iOS */
}

.cursor {
  display: inline-block;
  color: #7736cb; /* Lo stesso colore viola per il cursore */
  animation: typing-blink 0.8s step-end infinite;
  font-size: inherit; /* Stessa dimensione del testo */
  font-weight: 500;
  margin-left: 2px;
  vertical-align: baseline; /* Mantiene il cursore sulla stessa riga */
}

@keyframes typing-blink {
  50% {
    opacity: 0;
  }
}

/* Quando il testo è completamente scritto, il cursore lampeggia più lentamente */
.blinking {
  animation: typing-blink-slow 1.2s infinite;
}

@keyframes typing-blink-slow {
  50% {
    opacity: 0;
  }
}

.hero-subheading {
  font-size: 1.3rem;
  color: var(--color30);
  margin-top: 10px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: auto;
  padding: 15px 30px;
  font-weight: 600;
  font-size: 1.05rem;
  color: #ffffff;
  border-radius: 8px;
  border: 1px solid transparent;
  background: linear-gradient(92deg, #9747FF 0%, #B57DFF 100%);
  transition: all 0.3s ease;
  margin: 0 auto;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(151, 71, 255, 0.15);
}

.hero-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(151, 71, 255, 0.3);
  /* Manteniamo il colore di sfondo originale */
  background: linear-gradient(92deg, #9747FF 0%, #B57DFF 100%);
  color: #ffffff; /* Assicuriamoci che il testo resti bianco */
}

.hero-btn:focus {
  /* Manteniamo il colore di sfondo originale */
  background: linear-gradient(92deg, #9747FF 0%, #B57DFF 100%);
  outline: 2px solid var(--primary-dark); /* Manteniamo l'outline per accessibilità */
  outline-offset: 2px;
  color: var(--bg-white); /* Assicuriamoci che il testo resti bianco */
  box-shadow: 0 4px 10px rgba(151, 71, 255, 0.15); /* Ripristiniamo lo shadow base */
}

/* Opzionale: Stesso stile per lo stato :active */
.hero-btn:active {
  background: linear-gradient(92deg, #9747FF 0%, #B57DFF 100%);
  transform: scale(1); /* Rimuove eventuale scale down */
  box-shadow: 0 4px 10px rgba(151, 71, 255, 0.1); /* Ombra leggera */
  color: #ffffff;
}

/* Stile inverso per il bottone WhatsApp */
.whatsapp-btn {
  background: #ffffff !important; /* Sfondo bianco */
  color: #fff !important; /* Testo bianco */
  border: 1px solid #9747FF !important; /* Bordo viola */
  box-shadow: 0 4px 10px rgba(151, 71, 255, 0.1) !important; /* Ombra leggera */
}

.whatsapp-btn:hover {
  background: #ffffff !important; /* Manteniamo lo sfondo bianco anche al passaggio del mouse */
  color: #9747FF !important; /* Manteniamo il testo viola */
  border: 1px solid #9747FF !important; /* Bordo viola */
  box-shadow: 0 8px 20px rgba(151, 71, 255, 0.2) !important; /* Aumentiamo leggermente l'ombra */
}

.whatsapp-btn:focus,
.whatsapp-btn:active {
  background: #ffffff !important; /* Manteniamo lo sfondo bianco */
  color: #9747FF !important; /* Manteniamo il testo viola */
  border: 1px solid #9747FF !important; /* Bordo viola */
  outline: 2px solid rgba(151, 71, 255, 0.5) !important; /* Outline viola per accessibilità */
  outline-offset: 2px !important;
}

@media (max-width: 768px) {
  .hero-section {
    padding: 0 20px; /* Rimosso padding top e bottom */
    min-height: 100vh; /* Ripristinato a 100vh per mantenere la centratura */
  }
  
  .hero-heading {
    gap: 5px;
    margin-bottom: 15px;
  }
  
  .small-shape {
    width: 150px;
    bottom: 15%;
    left: 5%;
    filter: drop-shadow(0 0 10px rgba(151, 71, 255, 0.4));
  }
  
  .big-shape {
    width: 200px;
    top: 10%;
    right: 5%;
    filter: drop-shadow(0 0 10px rgba(151, 71, 255, 0.4));
  }
  
  .hero-subheading {
    font-size: 1.1rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero-btn {
    margin-top: 15px; /* Ridotto da 20px */
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 0 15px; /* Rimosso padding top e bottom */
    min-height: 100vh; /* Ripristinato a 100vh per mantenere la centratura */
  }
  
  .hero-content {
    width: 95%;
    padding: 12px; /* Ridotto da 15px */
  }
  
  .hero-subheading {
    font-size: 1rem;
    max-width: 95%;
  }
  
  /* Assicuriamo che il bottone sia visibile */
  .hero-btn {
    padding: 8px 18px; /* Ridotto da 10px 20px */
    font-size: 0.9rem;
    margin-top: 12px; /* Ridotto da 15px */
  }
}

/* Garantiamo che in landscape su mobile tutto sia visibile */
@media (max-height: 600px) and (orientation: landscape) {
  .hero-section {
    min-height: 100vh; /* Ripristinato a 100vh */
    padding: 0 20px; /* Rimosso padding top e bottom */
  }
  
  .hero-heading {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 10px;
  }
  
  .small-shape, .big-shape {
    display: block; /* Cambiato da none a block per mostrare le immagini anche in landscape */
    opacity: 0.8;
  }
  
  .hero-subheading {
    margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  .hero-heading {
    font-size: 2.5rem;
    gap: 3px;
    margin-bottom: 20px;
  }

  .small-shape {
    width: 120px; /* Aumentato da 100px a 120px */
    bottom: 10%;
    left: 2%;
    filter: drop-shadow(0 0 8px rgba(151, 71, 255, 0.4));
  }

  .big-shape {
    width: 170px; /* Aumentato da 150px a 170px */
    top: 5%;
    right: 2%;
    opacity: 1; /* Garantisce piena visibilità su mobile */
    filter: drop-shadow(0 0 8px rgba(151, 71, 255, 0.4));
  }
  
  .hero-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  .hero-logo {
    width: 80px;
  }

  .badge {
    font-size: 0.8rem;
    padding: 6px 12px;
    margin-bottom: 20px;
  }
}

.hero-static {
  color: var(--color10);
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}




/* ! Animation */
/* --------------------------------------------------------- */

.fade-in{opacity: 0; transform: translateY(1rem);}
.text-reveal{transform: translateY(1rem);clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
.fade-up{opacity: 0; transform: translateY(5rem);}

/* Stili specifici per la hero principale */
.main-hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  background-color: transparent;
}

/* Aggiungiamo uno sfondo all'header */
f-header {
  background: transparent !important;
  position: relative;
  z-index: 10;
  overflow: visible; /* Cambiato da hidden a visible per non clippare l'animazione */
  min-height: 80px; /* Altezza minima per l'header */
  padding: 20px;
}

/* Rimuoviamo il contenitore per l'header e l'hero */
.header-hero-container {
  position: relative;
  width: 100%;
  background-color: transparent; /* Cambiato da #f5f5f5 a transparent */
  overflow: visible; /* Cambiato da hidden a visible */
  padding-bottom: 20px;
  margin-bottom: 0;
  box-shadow: none; /* Rimosso box-shadow */
}

/* Rimuoviamo questi stili che limitavano l'animazione */
.header-hero-container .lottie-bg {
  position: fixed; /* Cambiato a fixed per coprire tutto il sito */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Rimuoviamo l'ombra e il bordo delle sezioni */
.t-section, .t-card-section {
  margin-top: 0;
  box-shadow: none; /* Rimosso box-shadow */
  border-top: none; /* Rimosso bordo */
}

/* Contenitore Lottie specifico per hero */
.hero-section .lottie-bg,
.main-hero .lottie-bg {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  will-change: transform; /* ottimizzazione per rendering */
}

/* Assicura che l'animazione SVG riempia tutto lo spazio */
.hero-section .lottie-bg svg,
.main-hero .lottie-bg svg {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  left: 0;
  top: 0;
  opacity: 0.6;
}

/* ! T-Section - Layout a due colonne semplice */
/* Sezione con sfondo che si estende su tutto lo schermo */
.t-section {
  background-color: transparent;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 0 80px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.section-wrapper {
  width: 100%;
  background-color: transparent;
}

.section-wrapper.bg-light {
  background-color: #F7F7F7; /* rosso vivo, personalizza come vuoi */
}

.t-card-section-wrapper {
  width: 100%;
  background: linear-gradient(135deg, #2A2C37 0%, #1D1E29 100%);
  padding: 80px 20px;
  box-sizing: border-box;
}

.t-card-section {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}


/* Contenitore interno centrato */
.t-section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  box-sizing: border-box;
}

.lottie-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;      /* ← fondamentale */
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
}




.t-section-content {
  flex: 1;
  text-align: left;
  max-width: 520px;
}

.t-section-badge {
  display: inline-block;
  padding: 8px 16px;
  background-color: rgba(110, 87, 255, 0.1);
  color: #6E57FF;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 20px;
  border: 1px solid rgba(110, 87, 255, 0.2);
  transition: all 0.3s ease;
}

.t-section-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(110, 87, 255, 0.2);
  background-color: rgba(110, 87, 255, 0.15);
}

.t-section-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1.2;
  color: #2A2522;
  margin-bottom: 1.2rem;
}

.t-section-heading .highlight {
  color: #6E57FF;
  position: relative;
}

.t-section-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #444444; /* Cambio da bianco a grigio scuro/nero */
  margin-bottom: 1.8rem;
  max-width: 520px;
}

.t-section-text strong {
  font-weight: 700;
}

.t-section-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Versione mobile dell'immagine (nascosta di default su desktop) */
.t-section-image-mobile {
  display: none;
  margin: 15px 0;
  flex: unset;
  width: 100%;
}

/* Versione desktop dell'immagine (visibile di default) */
.t-section-image-desktop {
  display: flex;
}

.t-section-image img {
  max-width: 100%;
  height: auto;
}

/* Responsive per mobile: mostra l'immagine mobile tra badge e titolo */
@media (max-width: 768px) {
  .t-section {
    padding: 50px 0 30px;
  }
  
  .t-section-container {
    flex-direction: column;
    gap: 30px;
  }
  
  .t-section-content {
    max-width: 100%;
    text-align: left; /* Cambiato da center a left per allineare a sinistra */
    order: 1;
  }
  
  .t-section-image-mobile {
    display: flex;
    margin-bottom: 25px;
  }
  
  .t-section-image-desktop {
    display: none;
  }
  
  .t-section-image-mobile img {
    max-width: 85%;
    margin: 0 auto;
  }
  
  .t-section-badge {
    display: block; /* Cambio da inline-block a block */
    margin-bottom: 10px;
    text-align: center; /* Centro il testo nel badge */
    width: fit-content; /* Mantengo la larghezza basata sul contenuto */
    margin-left: auto; /* Centro il badge orizzontalmente */
    margin-right: auto;
  }
  
  .t-section-heading {
    font-size: 2.2rem;
    text-align: left; /* Assicuriamo che anche l'heading sia allineato a sinistra */
  }
  
  .t-section-text {
    font-size: 1rem;
    margin-left: 0; /* Rimosso margin-left: auto per allineare a sinistra */
    margin-right: auto;
    text-align: left; /* Esplicitamente allineato a sinistra */
  }
  
  /* Allineiamo il pulsante a sinistra */
  .t-section .hero-btn {
    margin-left: 0;
    margin-right: auto;
    display: inline-block;
    text-align: left;
  }
  
  .t-section-features {
    flex-direction: column;
    gap: 15px;
    text-align: left; /* Anche le feature allineate a sinistra */
  }
  
  .t-feature-card {
    padding: 15px;
  }
  
  .t-feature-title {
    font-size: 1rem;
  }
  
  .t-feature-text {
    font-size: 0.9rem;
  }
}

/* Feature cards */
.t-section-features {
  max-width: 1200px;
  margin: 60px auto 0;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  box-sizing: border-box;
}

.t-feature-card {
  flex: 1;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  text-align: left;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.t-feature-icon {
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.t-feature-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #2A2522;
  margin-bottom: 10px;
}

.t-feature-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444444; /* Cambio da bianco a grigio scuro/nero */
  flex-grow: 1;
}

/* Responsive per t-section */
@media (max-width: 1024px) {
  .t-section {
    padding: 60px 0 30px;
  }
  
  .t-section-container {
    gap: 40px;
  }
  
  .t-section-heading {
    font-size: 2.4rem;
  }
  
  .t-section-text {
    font-size: 1.1rem;
  }
  
  .t-section-features {
    margin-top: 40px;
    gap: 20px;
  }
}

@media (max-width: 680px) {
  .t-section {
    padding: 30px 20px;
  }
  
  .t-section-container, .t-card-container, .t-card-container-wide {
    max-width: 100%;
  }
  
  .t-card, .t-card-wide {
    padding: 20px 15px;
  }
  
  .t-card-item-title {
    font-size: 1.2rem;
  }
  
  .t-card-description {
    font-size: 0.9rem;
  }
  
  .t-card .t-card-image img,
  .t-card-wide .t-card-image img {
    max-width: 120px;
    max-height: 100px;
  }
  
  .t-card .t-card-image,
  .t-card-wide .t-card-image {
    height: 120px;
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .t-section {
    padding: 30px 15px;
  }
  
  .t-card-badge {
    font-size: 0.7rem;
    padding: 6px 12px;
    margin-bottom: 10px;
  }
  
  .t-card-title {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }
  
  .t-card-subtitle {
    font-size: 0.9rem;
  }
  
  .t-card-header {
    margin-bottom: 30px;
  }
  
  .t-card, .t-card-wide {
    border-radius: 12px;
    padding: 15px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .t-card .t-card-image img, .t-card-wide .t-card-image img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ! T-Card Section - Sezione Servizi */
.t-card-section {
  width: 100%;
  padding: 50px 0;
  background: linear-gradient(135deg, #2A2C37 0%, #1D1E29 100%); /* Sfondo con gradiente scuro */
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  color: #fff; /* Testo bianco per contrasto con sfondo scuro */
  overflow: visible; /* Cambiato da 'hidden' a 'visible' per permettere agli elementi decorativi di estendersi */
  margin: 0; /* Rimuove qualsiasi margine */
}

/* Estensione visiva del background */
.section-wrapper {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  background-color: #F7F7F7;
}

/* Style per il wrapper della t-card-section per estendere visivamente il background */
.t-card-section-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: linear-gradient(135deg, #2A2C37 0%, #1D1E29 100%);
  overflow: visible;
  display: flex;
  justify-content: center;
}

.t-card-section {
  width: 100%;
  max-width: 1200px;
  padding: 50px 20px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  color: #fff;
  overflow: visible;
  margin: 0 auto;
}

/* Pallini decorativi animati */
@keyframes glow-pulse {
  0% {
    opacity: 0.5;
    filter: blur(20px);
  }
  50% {
    opacity: 0.8;
    filter: blur(25px);
  }
  100% {
    opacity: 0.5;
    filter: blur(20px);
  }
}

/* Aggiunta dei pallini decorativi con pseudo-elementi */
.t-card-section::before,
.t-card-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(151, 71, 255, 0.18);
  filter: blur(20px);
  z-index: -1;
  animation: glow-pulse 8s infinite alternate ease-in-out;
}

.t-card-section::before {
  width: 150px;
  height: 150px;
  top: 20%;
  left: 5%;
  background: rgba(151, 71, 255, 0.3);
  animation-delay: 0s;
}

.t-card-section::after {
  width: 200px;
  height: 200px;
  bottom: 15%;
  right: 10%;
  background: rgba(130, 87, 229, 0.25);
  animation-delay: 2s;
}

/* Aggiunta di più pallini decorativi con pseudo-elementi aggiuntivi */
.t-card-header::before,
.t-card-header::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(151, 71, 255, 0.15);
  filter: blur(15px);
  z-index: -1;
  animation: glow-pulse 6s infinite alternate-reverse ease-in-out;
}

.t-card-header::before {
  width: 80px;
  height: 80px;
  top: 15%;
  right: 25%;
  animation-delay: 1s;
}

.t-card-header::after {
  width: 120px;
  height: 120px;
  bottom: 20%;
  left: 30%;
  background: rgba(130, 87, 229, 0.2);
  animation-delay: 3s;
}

/* Aggiungiamo un pallino decorativo aggiuntivo nell'angolo in alto a destra */
.t-card-container::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  top: 10%;
  right: 5%;
  border-radius: 50%;
  background: rgba(123, 97, 255, 0.2);
  filter: blur(15px);
  z-index: -1;
  animation: glow-pulse 7s infinite alternate ease-in-out;
  animation-delay: 4s;
}

/* Aggiungiamo un pallino decorativo aggiuntivo nell'angolo in basso a sinistra */
.t-card-container-wide::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  bottom: 5%;
  left: 15%;
  border-radius: 50%;
  background: rgba(170, 110, 255, 0.15);
  filter: blur(20px);
  z-index: -1;
  animation: glow-pulse 9s infinite alternate-reverse ease-in-out;
  animation-delay: 2.5s;
}

.t-card-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

.t-card-badge {
  display: inline-block;
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 0.1); /* Sfondo più scuro per badge */
  color: #fff; /* Testo bianco */
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2); /* Bordo più chiaro */
  transition: all 0.3s ease;
}

.t-card-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.15);
}

.t-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.2;
  color: #fff; /* Cambiato in bianco per lo sfondo scuro */
  margin-bottom: 15px;
}

.t-card-subtitle {
  font-size: 1.2rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8); /* Cambiato in bianco con opacità per lo sfondo scuro */
  margin-bottom: 0;
}

.t-card-subtitle .highlight {
  color: #B57DFF; /* Colore viola più chiaro per miglior contrasto */
  font-weight: 700;
}

/* Layout del container principale (3 card per riga) */
.t-card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 card per riga */
  gap: 25px;
  width: 100%;
  padding: 5px;
  position: relative;
}

/* Layout del container per le card larghe (2 per riga) */
.t-card-container-wide {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 card per riga */
  gap: 35px;
  justify-items: center;
  max-width: 1200px;
  margin: 35px auto 0;
  box-sizing: border-box;
  position: relative;
}

/* Card nella prima riga (3 card) */
.t-card {
  background: #191828;
  border-radius: 15px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centrato orizzontalmente */
  box-shadow: 0 8px 20px 0px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  min-height: 280px;
  width: 100%;
}

.t-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px 0px rgba(151, 71, 255, 0.2);
  border: 1px solid rgba(151, 71, 255, 0.2);
}

/* Contenuto delle card */
.t-card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Distribuisce uniformemente lo spazio */
  flex-grow: 1;
  width: 100%;
  height: 100%;
  text-align: center; /* Testo centrato */
}

/* Titoli delle card - Rimuovo altezza fissa e utilizzo flexbox per consistenza */
.t-card-item-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff; /* Testo bianco per card scure */
  margin-bottom: 15px; /* Ridotto per avvicinare al paragrafo */
  margin-top: 15px; /* Mantengo margin-top per abbassare il titolo */
  height: auto; /* Rimuovo altezza fissa per maggiore flessibilità */
  display: block; /* Utilizzo block invece di flex */
  text-align: center; /* Centro il testo */
}

/* Descrizione delle card - Assicuriamo che tutti inizino dallo stesso punto */
.t-card-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #ffffff; /* Testo bianco invece di rgba(255, 255, 255, 0.8) */
  margin-top: 5px; /* Aggiunto margin-top uniforme */
  padding-top: 0; /* Assicura che non ci sia padding extra sopra */
  display: block; /* Assicura comportamento coerente */
}

@media (max-width: 768px) {
  .t-card, .t-card-wide {
    width: 100%;
    min-height: auto;
    padding: 25px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .t-card .t-card-image, .t-card-wide .t-card-image {
    height: 220px; /* Ancora più grande per schermi piccoli */
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
  }
  
  .t-card .t-card-image img, .t-card-wide .t-card-image img {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: 220px;
    object-fit: contain;
    transform: scale(1.15); /* Leggermente più grande per mobile piccolo */
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
  }
  
  .t-card-item-title, .t-card-wide .t-card-item-title {
    font-size: 1.4rem; /* Titolo più grande su mobile */
    margin-bottom: 5px;
    margin-top: 10px;
    height: auto;
    display: block;
    text-align: center;
  }
  
  .t-card-description, .t-card-wide .t-card-description {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 5px;
    text-align: center;
  }
  
  .t-card-content, .t-card-wide .t-card-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
  }
}

/* Responsive */
@media (max-width: 1280px) {
  .t-card-section {
    padding: 50px 30px;
    max-width: 1000px;
  }
  
  .t-card-container, .t-card-container-wide {
    padding: 0;
  }
}

@media (max-width: 960px) {
  .t-card-section {
    padding: 40px 30px;
    max-width: 800px;
  }
  
  .t-card-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .t-card-container {
    grid-template-columns: 1fr;
    max-width: 450px;
    margin: 0 auto;
    gap: 25px;
  }
  
  .t-card-container-wide {
    grid-template-columns: 1fr;
    max-width: 450px;
    margin: 0 auto;
    gap: 25px;
  }
  
  .t-card, .t-card-wide {
    width: 100%;
    min-height: auto;
    padding: 25px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .t-card .t-card-image, .t-card-wide .t-card-image {
    height: 140px; /* Altezza ridotta su mobile */
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .t-card .t-card-image img, .t-card-wide .t-card-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
  }
  
  .t-card-item-title, .t-card-wide .t-card-item-title {
    font-size: 1.3rem; /* Dimensione titolo uniformato */
    margin-bottom: 8px;
    margin-top: 5px;
    height: auto;
    display: block;
    text-align: center;
  }
  
  .t-card-description, .t-card-wide .t-card-description {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 5px;
    text-align: center;
  }
  
  .t-card-content, .t-card-wide .t-card-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    gap: 8px; /* Aggiunto gap per distanza uniforme */
  }
  
  .t-card-title {
    font-size: 2rem;
  }
  
  .t-card-subtitle {
    font-size: 1rem;
  }
  
  .t-card-header {
    margin-bottom: 40px;
  }
}

@media (max-width: 680px) {
  .t-card-container, .t-card-container-wide {
    max-width: 100%;
  }
  
  .t-card, .t-card-wide {
    padding: 20px 15px;
  }
  
  .t-card .t-card-image img, .t-card-wide .t-card-image img {
    max-width: 120px;
    max-height: 100px;
  }
  
  .t-card .t-card-image, .t-card-wide .t-card-image {
    height: 120px;
    margin-bottom: 8px;
  }
  
  .t-card .t-card-image, .t-card-wide .t-card-image {
    height: 200px; /* Aumentato da 140px a 200px per immagini più grandi */
    margin-bottom: 20px; /* Aumentato da 15px a 20px per dare più respiro */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible; /* Permette all'immagine di estendersi oltre i confini se necessario */
  }
  
  .t-card .t-card-image img, .t-card-wide .t-card-image img {
    width: 100%;
    height: auto;
    max-width: none; /* Rimuovo la limitazione max-width per permettere immagini più grandi */
    max-height: 200px; /* Imposto un'altezza massima coerente con il contenitore */
    object-fit: contain; /* Mantiene le proporzioni senza tagliare l'immagine */
    transform: scale(1.1); /* Leggero zoom per renderle più visibili */
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2)); /* Aggiungo ombra per migliorare la visibilità */
  }
}

@media (max-width: 480px) {
  .t-card, .t-card-wide {
    border-radius: 12px;
    padding: 15px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .t-card .t-card-image img, .t-card-wide .t-card-image img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ! T-Plans - Sezione Piani Tariffari */
.t-plans-section {
  width: 100%;
  padding: 80px 0;
  background-color: #FFFFFF;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  overflow: visible;
  margin: 0;
}

/* Wrapper per estendere lo sfondo a tutta la larghezza */
.t-plans-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #FFFFFF;
  overflow: visible;
  display: flex;
  justify-content: center;
}

.t-plans-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
}

.t-plans-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 50px;
}

.t-plans-badge {
  display: inline-block;
  padding: 8px 16px;
  background-color: rgba(110, 87, 255, 0.1);
  color: #6E57FF;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  border: 1px solid rgba(110, 87, 255, 0.2);
  transition: all 0.3s ease;
}

.t-plans-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(110, 87, 255, 0.2);
  background-color: rgba(110, 87, 255, 0.15);
}

.t-plans-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 1.2;
  color: #2A2522;
  margin-bottom: 15px;
}

.t-plans-subtitle {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 30px;
}

/* Toggle per annuale/mensile */
.t-plans-toggle {
  display: inline-flex;
  background-color: #F5F5F7;
  border-radius: 30px;
  padding: 5px;
  margin: 0 auto;
}

.t-plans-toggle-btn {
  background: none;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.t-plans-toggle-btn:hover {
  /* Rimuovo effetto sfumatura bianca */
  background: none;
  color: #6E57FF;
}

.t-plans-toggle-btn.active {
  background-color: #6E57FF;
  color: white;
}

/* Grid di piani */
.t-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 60px;
}

/* Card del piano */
.t-plan-card {
  background-color: #FAFAFA;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%; /* Garantisce che tutte le card abbiano la stessa altezza */
  justify-content: space-between; /* Distribuisce gli elementi verticalmente */
}

.t-plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(110, 87, 255, 0.1);
  border-color: rgba(110, 87, 255, 0.2);
}

/* Intestazione del piano */
.t-plan-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.t-plan-radio {
  margin-right: 12px;
}

.t-plan-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: #2A2522;
  margin: 0;
}

/* Prezzo del piano */
.t-plan-price {
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin-bottom: 15px;
  display: flex;
  /* Rimosso align-items: baseline per permettere layout a colonna */
  min-height: 60px;
  align-items: flex-start; /* Allinea gli elementi in alto per layout a colonna */
  /* flex-direction: column; è impostato da JS quando necessario */
}

.t-plan-currency {
  font-size: 1.5rem;
  margin-right: 8px;
  font-weight: 500;
  color: #333;
}

.t-plan-amount {
  font-size: 3rem;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

.t-plan-period {
  font-size: 0.9rem;
  color: #666;
  align-self: flex-end; /* Mantiene questo allineato alla baseline */
  margin-bottom: 5px; /* Aggiustamento verticale */
}

/* Aggiungo stile per il prefisso "a partire da" */
.t-plan-prefix {
  font-size: 0.9rem; /* Stessa dimensione di .t-plan-period */
  color: #666; /* Stesso colore di .t-plan-period */
  /* Rimuovo stili non necessari per layout verticale */
  margin-bottom: 4px; /* Spazio tra prefisso e prezzo */
  display: block; /* Assicura che stia su una riga propria */
}

.t-plan-custom-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: #2A2522;
  line-height: 1; /* Per allinearlo meglio con gli altri prezzi */
  display: inline-block; /* Per garantire che si comporti come gli altri elementi di testo */
  margin-bottom: 0; /* Rimuove eventuali margini che potrebbero influenzare l'allineamento */
}

/* Descrizione del piano */
.t-plan-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 25px;
  min-height: 75px;
  /* flex-grow: 1; Rimuovo questa riga */
}

/* Pulsante CTA */
.t-plan-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  margin-bottom: 25px;
  margin-top: auto;
  position: relative;
}

/* Override dell'hover per assicurarsi che venga utilizzato lo stile globale */
.t-plan-cta-btn:hover {
  background-color: transparent !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 15px rgba(151, 71, 255, 0.3) !important;
  color: var(--color100) !important;
  background: linear-gradient(92deg, #9747FF 0%, #DABEFF 100%) !important;
}

/* Lista feature */
.t-plan-features {
  list-style-type: none;
  padding: 0;
  margin: 0;
  min-height: 230px;
}

.t-plan-feature-item {
  display: flex;
  align-items: center; /* Allinea verticalmente l'icona e il testo */
  gap: 10px;
  font-size: 0.9rem;
  color: #444;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Assicuriamo dimensioni consistenti per l'icona SVG */
.t-plan-feature-item svg {
  width: 20px;      /* Dimensione esplicita */
  height: 20px;     /* Dimensione esplicita */
  flex-shrink: 0; /* Impedisce all'icona di restringersi */
  display: inline-block; /* Assicura che sia trattato come blocco per dimensioni */
}

.t-plan-feature-item:last-child {
  border-bottom: none;
  padding-bottom: 20px;
}

/* Responsive per tablet */
@media (max-width: 1024px) {
  .t-plans-section {
    padding: 60px 0;
  }
  
  .t-plans-title {
    font-size: 2.4rem;
  }
  
  .t-plans-grid {
    gap: 20px;
  }
  
  .t-plan-card {
    padding: 25px;
  }
  
  .t-plan-amount {
    font-size: 2.2rem;
  }
  
  .t-plan-description {
    min-height: 90px;
  }
}

/* Responsive per dispositivi mobili */
@media (max-width: 768px) {
  .t-plans-section {
    padding: 50px 0;
  }
  
  .t-plans-title {
    font-size: 2rem;
  }
  
  .t-plans-subtitle {
    font-size: 1rem;
  }
  
  .t-plans-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .t-plan-description {
    min-height: 100px;
  }
}

/* Responsive per dispositivi mobili piccoli */
@media (max-width: 580px) {
  .t-plans-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .t-plan-card {
    max-width: 400px;
    margin: 0 auto;
  }
  
  .t-plan-description {
    min-height: auto;
  }
}

/* Responsive aggiuntivo per dispositivi molto piccoli */
@media (max-width: 400px) {
  .t-plans-section {
    padding: 40px 0;
  }
  
  .t-plans-title {
    font-size: 1.8rem;
  }
  
  .t-plans-toggle-btn {
    padding: 8px 15px;
    font-size: 0.8rem;
  }
  
  .t-plan-name {
    font-size: 1.3rem;
  }
  
  .t-plan-amount {
    font-size: 2rem;
  }
  
  .t-plan-custom-price {
    font-size: 2rem;
  }
  
  .t-plan-cta-btn {
    padding: 12px 15px;
    font-size: 0.9rem;
  }
}

/* Garantisce che i contenuti (descrizione, ecc.) si espandano occupando lo spazio disponibile, 
   ma non il pulsante, che rimarrà allineato in basso */
.t-plan-content {
  /* flex-grow: 1; Rimuovo da qui se presente per errore */
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Aggiungo qui: il contenitore cresce, non solo la descrizione */
}

/* Mantiene i pulsanti allineati nella parte inferiore delle card */
.t-plan-button-wrapper {
  margin-top: auto;
  position: relative;
}

/* ! T-Portfolio - Sezione Portfolio con Slider Infinito */
.t-portfolio-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #F7F7F7;
  overflow: visible;
  display: flex;
  justify-content: center;
  padding: 60px 0;
}

.t-portfolio-section {
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  color: #333;
  overflow: visible;
  margin: 0 auto;
  padding: 0;
}

/* Pallini decorativi animati (riutilizzati dalla t-card-section) */
.t-portfolio-section::before,
.t-portfolio-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(151, 71, 255, 0.08);
  filter: blur(20px);
  z-index: -1;
  animation: glow-pulse 8s infinite alternate ease-in-out;
}

.t-portfolio-section::before {
  width: 150px;
  height: 150px;
  top: 20%;
  left: 5%;
  background: rgba(151, 71, 255, 0.15);
  animation-delay: 0s;
}

.t-portfolio-section::after {
  width: 200px;
  height: 200px;
  bottom: 15%;
  right: 10%;
  background: rgba(130, 87, 229, 0.1);
  animation-delay: 2s;
}

.t-portfolio-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
}

.t-portfolio-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

.t-portfolio-badge {
  display: inline-block;
  padding: 8px 16px;
  background-color: rgba(110, 87, 255, 0.1);
  color: #6E57FF;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  border: 1px solid rgba(110, 87, 255, 0.2);
}

.t-portfolio-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.2;
  color: #333;
  margin-bottom: 15px;
}

.t-portfolio-subtitle {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #555;
  margin-bottom: 0;
}

.t-portfolio-subtitle .highlight {
  color: #6E57FF;
  font-weight: 700;
}

/* Contenitori e traccia per slider a tutto schermo */
.t-portfolio-outer-container {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden; /* Cambiato a hidden per evitare overflow orizzontale */
  padding: 40px 0;
}

.t-portfolio-inner-container {
  overflow: hidden; /* Cambiato a hidden per controllare il flusso */
  width: 100%;
  position: relative;
}

.t-portfolio-track {
  display: flex;
  gap: 25px;
  position: relative;
  will-change: transform;
  width: 100%; /* Assicura che occupi tutta la larghezza */
  margin-left: -10px; /* Spostamento leggermente a sinistra per dare l'impressione di continuità */
}

.t-portfolio-track.animate {
  animation: scroll 60s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--track-width)));
  }
}

/* Item del progetto */
.t-portfolio-item {
  flex: 0 0 450px;
  min-width: 450px;
  height: 500px; /* Aumentata ulteriormente l'altezza */
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  margin: 10px 5px;
  background: #ffffff;
  border: 1px solid transparent;
}

.t-portfolio-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(80, 37, 190, 0.45);
  border: 1px solid rgba(110, 87, 255, 0.2);
}

.t-portfolio-image {
  width: 100%;
  height: 70%; /* Ridotto per dare più spazio all'area info */
  position: relative;
  overflow: hidden;
}

.t-portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.t-portfolio-item:hover .t-portfolio-image img {
  transform: scale(1.05);
}

/* Info box in fondo alla card */
.t-portfolio-info {
  padding: 20px 25px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  height: 30%; /* Aumentata per evitare il taglio */
  box-sizing: border-box;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.t-portfolio-tags {
  display: flex;
  gap: 10px;
}

.t-portfolio-tag {
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6E57FF;
  background-color: rgba(110, 87, 255, 0.1);
  border: 1px solid rgba(110, 87, 255, 0.2);
}

.t-portfolio-tag.tag-secondary {
  background-color: rgba(110, 87, 255, 0.05);
  color: #555;
  border: 1px solid rgba(155, 155, 155, 0.2);
}

.t-portfolio-item-title {
  margin-top: 12px;
  font-weight: 700;
  font-size: 1.25rem;
  color: #333;
  line-height: 1.3;
}

/* Responsive */
@media (max-width: 1280px) {
  .t-portfolio-item {
    flex: 0 0 400px;
    min-width: 400px;
    height: 460px;
  }
  
  .t-portfolio-track.animate {
    animation: scroll 50s linear infinite;
  }
  
  .t-portfolio-track {
    margin-left: 0;
  }
}

@media (max-width: 1024px) {
  .t-portfolio-section {
    padding: 0;
  }
  
  .t-portfolio-item {
    flex: 0 0 350px;
    min-width: 350px;
    height: 430px; 
  }
  
  .t-portfolio-track.animate {
    animation: scroll 45s linear infinite;
  }
}

@media (max-width: 768px) {
  .t-portfolio-wrapper {
    padding: 50px 0;
  }
  
  .t-portfolio-section {
    padding: 0;
  }
  
  .t-portfolio-title {
    font-size: 2.2rem;
  }
  
  .t-portfolio-subtitle {
    font-size: 1rem;
  }
  
  .t-portfolio-item {
    flex: 0 0 300px;
    min-width: 300px;
    height: 400px;
  }
  
  .t-portfolio-track.animate {
    animation: scroll 40s linear infinite;
  }
  
  .t-portfolio-item-title {
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  .t-portfolio-wrapper {
    padding: 40px 0;
  }
  
  .t-portfolio-section {
    padding: 0;
  }
  
  .t-portfolio-title {
    font-size: 1.8rem;
  }
  
  .t-portfolio-badge {
    font-size: 0.7rem;
    padding: 6px 12px;
  }
  
  .t-portfolio-item {
    flex: 0 0 260px;
    min-width: 260px;
    height: 380px;
  }
  
  .t-portfolio-item-title {
    font-size: 1rem;
  }
  
  .t-portfolio-info {
    padding: 15px 18px;
  }
  
  .t-portfolio-track.animate {
    animation: scroll 35s linear infinite;
  }
  
  .t-portfolio-tag {
    padding: 4px 12px;
    font-size: 11px;
  }
}

/* ! T-Testimonials - Sezione Testimonianze */
.t-testimonials-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #211C38;
  overflow: visible;
  display: flex;
  justify-content: center;
  padding: 80px 0;
  color: #fff;
}

.t-testimonials-section {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  color: #fff;
  overflow: visible;
  margin: 0 auto;
  padding: 0 20px;
}

/* Pallini decorativi animati */
.t-testimonials-section::before,
.t-testimonials-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(151, 71, 255, 0.15);
  filter: blur(30px);
  z-index: -1;
  animation: glow-pulse 8s infinite alternate ease-in-out;
}

.t-testimonials-section::before {
  width: 300px;
  height: 300px;
  top: -10%;
  left: -5%;
  background: rgba(151, 71, 255, 0.2);
  animation-delay: 0s;
}

.t-testimonials-section::after {
  width: 250px;
  height: 250px;
  bottom: -5%;
  right: -5%;
  background: rgba(130, 87, 229, 0.15);
  animation-delay: 2s;
}

.t-testimonials-container {
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
}

.t-testimonials-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

.t-testimonials-badge {
  display: inline-block;
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.t-testimonials-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.15);
}

.t-testimonials-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 15px;
}

.t-testimonials-subtitle {
  font-size: 1.2rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}

.t-testimonials-subtitle .highlight {
  color: #6E57FF;
  font-weight: 700;
}

/* Grid di testimonianze */
.t-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 0 auto;
}

/* Singola testimonianza */
.t-testimonial-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.t-testimonial-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.t-testimonial-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(110, 87, 255, 0.2);
  border-color: rgba(110, 87, 255, 0.2);
}

.t-testimonial-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.t-testimonial-rating {
  color: #FFAB00;
  font-size: 1.2rem;
  margin-bottom: 15px;
  letter-spacing: 2px;
}

.t-testimonial-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #ffffff; /* Testo bianco puro invece di rgba(255, 255, 255, 0.9) */
  margin-bottom: 25px;
  flex-grow: 1;
  font-style: italic;
}

.t-testimonial-author-info {
  display: flex;
  align-items: center;
  margin-top: auto;
}

.t-testimonial-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
  border: 2px solid rgba(110, 87, 255, 0.4);
}

.t-testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.t-testimonial-details {
  display: flex;
  flex-direction: column;
}

.t-testimonial-author {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff;
  margin: 0 0 3px 0;
}

.t-testimonial-company {
  font-size: 0.85rem;
  color: #6E57FF;
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .t-testimonials-wrapper {
    padding: 60px 0;
  }
  
  .t-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  
  .t-testimonials-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 768px) {
  .t-testimonials-wrapper {
    padding: 50px 0;
  }
  
  .t-testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .t-testimonial-item {
    padding: 25px;
  }
  
  .t-testimonials-title {
    font-size: 2rem;
  }
  
  .t-testimonials-subtitle {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .t-testimonials-wrapper {
    padding: 40px 0;
  }
  
  .t-testimonial-item {
    padding: 20px;
  }
  
  .t-testimonials-title {
    font-size: 1.8rem;
  }
  
  .t-testimonials-badge {
    font-size: 0.7rem;
    padding: 6px 12px;
  }
  
  .t-testimonial-text {
    font-size: 0.9rem;
  }
}

/* ! T-Contacts - Sezione Contatti */
.t-contacts-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #F7F7F7;
  overflow: visible;
  display: flex;
  justify-content: center;
  padding: 80px 0 60px; /* Aggiunto padding-bottom armonioso */
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .t-contacts-wrapper {
    padding: 60px 0 40px; /* Padding-bottom proporzionato per tablet */
  }
}

@media (max-width: 480px) {
  .t-contacts-wrapper {
    padding: 50px 0 30px; /* Padding-bottom proporzionato per mobile */
  }
}

/* Rimuovo gli pseudo-elementi aggiunti in precedenza */
.t-contacts-wrapper::after, .t-footer-wrapper::before {
  /* Questi pseudo-elementi vengono completamente rimossi */
  content: none;
  display: none;
}

.t-contacts-section {
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  color: #333;
  overflow: visible;
  margin: 0 auto;
  padding: 0 20px;
}

/* Elementi decorativi */
.t-contacts-section::before,
.t-contacts-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(151, 71, 255, 0.08);
  filter: blur(20px);
  z-index: -1;
  animation: glow-pulse 8s infinite alternate ease-in-out;
}

.t-contacts-section::before {
  width: 150px;
  height: 150px;
  top: 10%;
  left: -5%;
  background: rgba(151, 71, 255, 0.15);
  animation-delay: 0s;
}

.t-contacts-section::after {
  width: 200px;
  height: 200px;
  bottom: 15%;
  right: -10%;
  background: rgba(130, 87, 229, 0.1);
  animation-delay: 2s;
}

.t-contacts-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.t-contacts-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

.t-contacts-badge {
  display: inline-block;
  padding: 8px 16px;
  background-color: rgba(110, 87, 255, 0.1);
  color: #6E57FF;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  border: 1px solid rgba(110, 87, 255, 0.2);
  transition: all 0.3s ease;
}

.t-contacts-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(110, 87, 255, 0.2);
  background-color: rgba(110, 87, 255, 0.15);
}

.t-contacts-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.2;
  color: #333;
  margin-bottom: 15px;
}

.t-contacts-subtitle {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #555;
  margin-bottom: 0;
}

.t-contacts-subtitle .highlight {
  color: #6E57FF;
  font-weight: 700;
}

.t-contacts-content {
  display: flex;
  gap: 50px;
  margin-top: 50px;
  align-items: stretch;
}

.t-contacts-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
}

.t-contacts-info-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 25px;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.t-contacts-info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(110, 87, 255, 0.15);
}

.t-contacts-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: rgba(110, 87, 255, 0.1);
  border-radius: 12px;
  flex-shrink: 0;
}

.t-contacts-info-content {
  flex: 1;
}

.t-contacts-info-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: #333;
  margin: 0 0 8px 0;
}

.t-contacts-info-value {
  font-size: 1rem;
  color: #000000; /* Cambiato da #ffffff a nero per migliore visibilità */
  margin: 0;
  text-decoration: none;
  transition: color 0.3s ease;
}

a.t-contacts-info-value:hover {
  color: #6E57FF;
}

.t-contacts-social {
  padding: 25px;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  margin-top: 10px;
}

.t-contacts-social-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: #333;
  margin: 0 0 15px 0;
}

.t-contacts-social-links {
  display: flex;
  gap: 15px;
}

.t-contacts-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: rgba(110, 87, 255, 0.1);
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.t-contacts-social-link:hover {
  background-color: rgba(110, 87, 255, 0.2);
  transform: translateY(-3px);
}

.t-contacts-form-container {
  flex: 1.2;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.t-contacts-form-container::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(110, 87, 255, 0.05);
  top: -75px;
  right: -75px;
  z-index: 0;
}

.t-contacts-form-container::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(110, 87, 255, 0.03);
  bottom: -50px;
  left: -50px;
  z-index: 0;
}

.t-contacts-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.t-contacts-form-group {
  width: calc(50% - 10px);
  display: flex;
  flex-direction: column;
}

.t-contacts-form-group.full-width {
  width: 100%;
}

.t-contacts-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #444;
  margin-bottom: 8px;
}

.t-contacts-input,
.t-contacts-textarea {
  padding: 12px 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-size: 1rem;
  background-color: #f9f9f9;
  color: #333;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.t-contacts-input:focus,
.t-contacts-textarea:focus {
  outline: none;
  border-color: #6E57FF;
  box-shadow: 0 0 0 3px rgba(110, 87, 255, 0.1);
}

.t-contacts-textarea {
  min-height: 150px;
  resize: vertical;
}

.t-contacts-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 15px 0;
}

.t-contacts-privacy input[type="checkbox"] {
  margin-top: 3px;
  accent-color: #6E57FF;
}

.t-contacts-privacy-label {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.4;
}

.t-contacts-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: auto;
  padding: 15px 30px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color100);
  border-radius: 14px;
  border: 1px solid #DABEFF;
  background: linear-gradient(92deg, #9747FF 0%, #DABEFF 100%);
  background-color: #9747FF; /* Fallback */
  transition: all 0.3s ease-in-out;
  margin-top: 10px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.t-contacts-submit:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(151, 71, 255, 0.3);
  color: var(--color100);
  background: linear-gradient(92deg, #9747FF 0%, #DABEFF 100%);
}

.t-contacts-submit:focus {
  color: var(--color100);
  background: linear-gradient(92deg, #9747FF 0%, #DABEFF 100%);
  outline: none;
}

.t-contacts-submit svg {
  transition: transform 0.3s ease;
}

.t-contacts-submit:hover svg {
  transform: translateX(3px);
}

/* Responsive */
@media (max-width: 1024px) {
  .t-contacts-section {
    padding: 0 30px;
  }
  
  .t-contacts-title {
    font-size: 2.2rem;
  }
  
  .t-contacts-content {
    gap: 30px;
  }
  
  .t-contacts-submit {
    padding: 12px 24px;
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .t-contacts-wrapper {
    padding: 60px 0 40px; /* Padding-bottom proporzionato per tablet */
  }
  
  .t-contacts-content {
    display: flex; /* Assicuriamoci che sia flex anche qui */
    flex-direction: column-reverse; /* Inverte l'ordine degli elementi figlio */
  }
  
  .t-contacts-info {
    gap: 20px;
  }
  
  .t-contacts-info-card,
  .t-contacts-social {
    flex: auto;
  }
  
  .t-contacts-title {
    font-size: 2rem;
  }
  
  .t-contacts-subtitle {
    font-size: 1.1rem;
  }
  
  .t-contacts-form-container {
    padding: 30px;
  }
  
  .t-contacts-submit {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}

@media (max-width: 580px) {
  .t-contacts-form-group {
    width: 100%;
  }
  
  .t-contacts-header {
    margin-bottom: 30px;
  }
  
  .t-contacts-info-card {
    padding: 20px;
  }
  
  .t-contacts-icon {
    width: 40px;
    height: 40px;
  }
  
  .t-contacts-social-links {
    flex-wrap: wrap;
  }
  
  .t-contacts-submit {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .t-contacts-wrapper {
    padding: 50px 0 30px; /* Padding-bottom proporzionato per mobile */
  }
  
  .t-contacts-title {
    font-size: 1.8rem;
  }
  
  .t-contacts-badge {
    font-size: 0.7rem;
    padding: 6px 12px;
  }
  
  .t-contacts-form-container {
    padding: 25px 20px;
  }
  
  .t-contacts-submit {
    padding: 6px 12px;
    font-size: 0.85rem;
    width: 100%;
  }
}

/* ! T-Footer - Sezione Footer */
.t-footer-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: transparent;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 40px 0 0 0; /* Ridotto da 50px a 40px */
  color: #fff;
  margin-top: 0;
  /* Rimuovo le sezioni blu sopra e sotto il footer */
  border-top: none;
  border-bottom: none;
  flex-shrink: 0;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  position: relative;
  border-bottom: 0 none !important;
}

.t-footer-wrapper::before,
.t-footer-wrapper::after,
.t-contacts-wrapper::after {
  display: none !important;
}

.t-footer-container {
  max-width: 1200px;
  width: 100%;
  padding: 0 20px 5px; /* Aggiunto padding inferiore di 5px */
  box-sizing: border-box;
  margin: 0 auto;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Sezione superiore del footer - layout migliorato */
.t-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 25px; /* Ridotto da 30px a 25px */
  justify-content: space-between;
  margin-bottom: 30px; /* Ridotto da 40px a 30px */
}

/* Branding e contatti con larghezza ottimizzata */
.t-footer-brand {
  flex: 0 1 300px; /* flex-grow: 0, flex-shrink: 1, flex-basis: 300px */
  min-width: 250px;
  display: flex;
  flex-direction: column;
  margin-right: auto; /* Spinge il brand a sinistra */
}

/* Area centrale con i link - migliore distribuzione */
.t-footer-center {
  display: flex;
  gap: 20px; /* Ridotto da 30px a 20px per avvicinare le colonne */
  margin: 0 auto; /* Centro rispetto al container */
  padding: 0 20px; /* Spazio ai lati per evitare sovrapposizioni */
  flex: 0 1 auto; /* Non si espande oltre il necessario */
  justify-content: center; /* Centra le colonne */
}

/* Link columns con spaziatura intelligente */
.t-footer-links {
  display: flex;
  flex-wrap: wrap;
  flex: 1; /* Occupa tutto lo spazio rimanente */
  justify-content: space-between; /* Distribuisce lo spazio uniformemente */
  min-width: 0; /* Permette la corretta compressione */
}

.t-footer-links-column {
  flex: 1 1 120px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 120px */
  min-width: 120px;
  max-width: 180px; /* Limite massimo per evitare colonne troppo larghe */
}

/* Brand a sinistra e newsletter a destra */
.t-footer-brand {
  flex: 0 1 300px; /* flex-grow: 0, flex-shrink: 1, flex-basis: 300px */
  min-width: 250px;
  display: flex;
  flex-direction: column;
  margin-right: auto; /* Spinge il brand a sinistra */
}

.t-footer-links-column.newsletter {
  flex: 0 1 240px; /* flex-grow: 0, flex-shrink: 1, flex-basis: 240px */
  max-width: 260px; /* Limite massimo più ampio per la newsletter */
  margin-left: auto; /* Spinge la newsletter a destra */
}

/* Logo footer più piccolo e distanziato nel desktop */
.t-footer-logo {
  max-width: 100px;
  margin-bottom: 25px;
}

/* Responsivo migliorato */
@media (max-width: 1024px) {
  .t-footer-top {
    gap: 25px; /* Ridotto ulteriormente per schermi più piccoli */
  }
  
  .t-footer-links {
    gap: 25px;
  }
}

@media (max-width: 900px) {
  .t-footer-center {
    flex-direction: column; /* Impila le colonne dei link quando lo spazio si riduce */
    gap: 20px;
  }
  
  .t-footer-links-column {
    max-width: 100%; /* Rimuove il limite di larghezza massima */
  }
}

@media (max-width: 768px) {
  /* Footer top ottimizzato per mobile */
  .t-footer-wrapper {
    padding-top: 20px;
    padding-bottom: 2px;
  }
  
  .t-footer-top {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 5px; /* Riduce lo spazio tra il contenuto e il copyright */
  }
  
  .t-footer-brand {
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
  }
  
  .t-footer-logo {
    margin: 0 auto 20px;
    max-width: 100px;
    display: block;
  }
  
  .t-footer-company {
    font-size: 1.1rem;
    margin-bottom: 1px;
    color: #ffffff;
  }
  
  .t-footer-slogan {
    max-width: 280px;
    margin: 0 auto 5px;
    font-size: 0.8rem;
    color: #ffffff;
  }
  
  .t-footer-contact {
    max-width: 280px;
    margin: 0 auto;
  }
  
  .t-footer-contact-item {
    margin-bottom: 2px;
  }
  
  .t-footer-contact-item a {
    font-size: 0.8rem;
    color: #ffffff;
  }
  
  .t-footer-social {
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  
  .t-footer-social-link {
    width: 28px !important; /* Riduzione ulteriore */
    height: 28px !important;
    margin: 0 2px; /* Avvicina le icone social */
  }
  
  /* Nascondiamo link rapidi, blog e newsletter su mobile */
  .t-footer-center,
  .t-footer-links,
  .t-footer-links-column:not(.t-footer-brand),
  .t-footer-links-column.newsletter {
    display: none;
  }
  
  /* Footer bottom ottimizzato */
  .t-footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 5px;
    margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .t-footer-legal {
    gap: 8px;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
  }
  
  .t-footer-copyright {
    font-size: 0.7rem;
    color: #ffffff;
    margin: 0;
    padding: 0;
  }
  
  .t-footer-legal a {
    font-size: 0.7rem;
    padding: 2px 4px;
    color: #ffffff;
  }
  
  /* Assicura che tutti i testi del footer siano bianchi */
  .t-footer-wrapper *:not(svg) {
    color: #ffffff !important;
  }
}

@media (max-width: 576px) {
  .t-footer-links {
    flex-direction: column;
    gap: 25px;
  }
  
  .t-footer-links-column {
    width: 100%;
    flex: 1 1 auto;
  }
}

.t-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0 5px; /* Ridotto il padding inferiore da 15px a 5px */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  gap: 15px;
  margin-bottom: 0; /* Ridotto da 10px a 0 */
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 0 none !important;
}

.t-footer-copyright {
  font-size: 0.8rem; /* Ridotto da 0.9rem a 0.8rem */
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  padding-bottom: 0 !important;
}

.t-footer-legal {
  display: flex;
  gap: 25px; /* Ridotto da 30px a 25px */
  padding-bottom: 0 !important;
}

.t-footer-legal a {
  font-size: 0.8rem; /* Ridotto da 0.9rem a 0.8rem */
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.t-footer-legal a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Newsletter con classi completamente custom */
.newsletter-custom-form {
  display: flex;
  position: relative;
  width: 70%;
  max-width: 220px;
}

.newsletter-custom-input {
  flex: 1;
  padding: 10px 42px 10px 16px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.85rem;
  width: 100%;
  transition: all 0.3s ease;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.7;
}

/* Video header esteso */
.header-video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}

.header-video-wrapper::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(81, 29, 187, 0.65);
  z-index: 0;
  pointer-events: none;
}

.header-video-wrapper .video-bg {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

/* Miglioramento dello stile dell'header con video */
.navbar-with-video {
  background: rgba(81, 29, 187, 0.15) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 10;
  position: relative;
}

.navbar-with-video .nav-links {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.navbar-with-video .nav-links a {
  color: white;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.navbar-with-video .nav-links a:hover {
  color: #C084FC;
}

.navbar-with-video .header-social-icon {
  color: white;
}

/* Aggiornamento ai colori della hero */
.ai-hero::before {
  display: none; /* Rimuoviamo questo overlay poiché ora è gestito a livello globale */
}

.ai-hero .hero-heading,
.ai-hero .hero-subheading,
.ai-hero .badge,
.ai-hero .hero-static,
.ai-hero .hero-footer {
  color: white;
  position: relative;
  z-index: 2;
}

.ai-hero .highlight {
  color: #C084FC;
  text-shadow: 0 0 15px rgba(192, 132, 252, 0.8);
  font-weight: 800;
  position: relative;
  z-index: 2;
}


/* Ottimizzazione spazio hero section per mobile */
@media (max-width: 768px) {
  .hero-section {
    padding: 80px 20px 30px;
    min-height: 80vh;
  }
  
  .hero-content {
    margin-top: -30px;
  }
  
  .hero-btn {
    margin-top: 15px;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 20px 15px;
    min-height: 75vh;
  }
  
  .hero-content {
    width: 95%;
    padding: 12px;
    margin-top: -25px;
  }
  
  .hero-btn {
    padding: 8px 18px;
    font-size: 0.9rem;
    margin-top: 12px;
  }
  
  .badge {
    margin-bottom: 15px;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  .hero-section {
    min-height: 100vh; /* Ripristinato a 100vh */
    padding: 0 20px; /* Rimosso padding top e bottom */
  }
  
  .hero-heading {
    margin-bottom: 10px;
  }
  
  .hero-subheading {
    margin-bottom: 10px;
  }
}

/* Aggiunto stile per model-viewer */
model-viewer {
  width: 100%;
  height: 400px;
  margin: 0 auto;
  background-color: transparent;
  --poster-color: transparent;
  --progress-bar-height: 0px;
  --progress-mask: transparent;
  --progress-bar-color: var(--primary);
}

.t-section model-viewer {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  --poster-color: transparent;
  --progress-bar-height: 0px;
  --progress-mask: transparent;
  --progress-bar-color: var(--primary);
  --camera-orbit: "45deg 55deg 2.5m";
  --camera-target: 0 0 0;
  --exposure: 1;
  --min-camera-orbit: auto auto 2.5m;
  --max-camera-orbit: auto auto 2.5m;
  animation: model-rotate 12s infinite linear;
  --interaction-prompt: none;
  --zoom-sensitivity: 0;
  --orbit-sensitivity: 0.8;
}

@keyframes model-rotate {
  0% {
    --camera-orbit: "0deg 55deg 2.5m";
  }
  50% {
    --camera-orbit: "180deg 55deg 2.5m";
  }
  100% {
    --camera-orbit: "360deg 55deg 2.5m";
  }
}

.t-section model-viewer::part(default-progress-bar) {
  display: none;
}

.t-section model-viewer::part(default-ar-button) {
  display: none;
}

/* Miglioro la leggibilità del testo nella sezione t-section */
.t-section .t-section-heading {
  font-size: 2.8rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}

.t-section .t-section-text {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: var(--text-medium);
  max-width: 100%;
}

.t-section .hero-btn {
  margin-top: 1rem;
  display: inline-block;
}

/* Modifico lo stile dei feature box per renderli più coerenti */
.t-section .t-section-features {
  margin-top: 3rem;
  gap: 2rem;
  justify-content: space-between;
}

.t-section .t-feature-card {
  padding: 1.8rem;
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.t-section .t-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
  .t-section model-viewer {
    height: 350px;
    border-radius: var(--radius-sm);
  }
  
  .t-section .t-section-heading {
    font-size: 2.2rem;
  }
  
  .t-section .t-section-text {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .t-section model-viewer {
    height: 300px;
  }
}

/* Miglioro la compatibilità tra model-viewer e la struttura della sezione */
.t-section .t-section-image model-viewer {
  width: 100%;
  height: 400px;
  display: block;
  margin: 0 auto;
}

.t-section-content .t-section-image-mobile model-viewer {
  display: none;
}

@media (max-width: 768px) {
  .t-section-content .t-section-image-mobile model-viewer {
    display: block;
    height: 300px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 2rem;
  }
  
  .t-section-image-desktop model-viewer {
    display: none;
  }
  
  .t-section-content {
    padding: 1rem;
    text-align: left !important; /* Assicuro allineamento a sinistra */
  }

  .t-section-heading {
    text-align: left;
  }
  
  .t-section-badge {
    margin-bottom: 1.5rem;
  }
  
  /* Aggiungo regole per il testo e il pulsante */
  .t-section-text {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  
  /* Solo il pulsante nella t-section deve essere allineato a sinistra */
  .t-section .hero-btn {
    display: inline-block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }
}

/* Aggiungo stili per distanziare le icone social nell'header su mobile */
@media (max-width: 768px) {
  /* Distanziamento icone social nell'header mobile */
  .header-social-icons {
    display: flex !important;
    gap: 10px !important;
    position: absolute !important;
    right: 45px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-right: 0 !important;
  }
  
  .header-social-icon {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
  }
  
  /* Social icons nell'header per mobile */
  .social-icons,
  .header-social-icons {
    display: flex !important;
    gap: 10px !important;
    margin-right: 0 !important;
  }
  
  /* Allineamento dell'hamburger con le icone social */
  .hamburger {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 8px !important;
  }
  
  /* Posizionamento del navbar per contenere correttamente gli elementi */
  .navbar {
    position: relative !important;
    padding: 15px 20px !important;
  }
  
  /* Assicuro che il testo nei feature box rimanga nero anche su mobile */
  .t-feature-text {
    color: #444444 !important;
  }
  
  .t-section .t-feature-card {
    background-color: #fff;
  }
}

/* Aggiungo stile per rimuovere il quadrato bianco attorno all'hamburger menu solo su mobile */
@media (max-width: 768px) {
  /* Rimuovo lo sfondo e i bordi dall'hamburger menu */
  .hamburger {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 8px !important;
  }
  
  /* Mi assicuro che non ci siano altri stili che possono creare un box visibile */
  .hamburger:focus,
  .hamburger:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

@media (max-width: 768px) {
  /* Aggiusto l'allineamento verticale delle icone social */
  .header-social-icons {
    top: 54% !important; /* Sposto leggermente più in basso per allineare con l'hamburger */
  }
}

/* Stilizzazione del footer per desktop - testo bianco e riorganizzazione */
.t-footer-links-title {
  color: #ffffff !important;
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 1.05rem;
}

.t-footer-links-list a {
  color: #ffffff !important;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  padding: 2px 0;
  opacity: 0.85;
  display: block;
}

.t-footer-links-list a:hover {
  opacity: 1;
  transform: translateX(3px);
  text-decoration: none;
}

.t-footer-links-column {
  padding-right: 15px;
}

/* Migliore organizzazione del footer per desktop */
@media (min-width: 769px) {
  /* Riorganizzazione del footer desktop */
  .t-footer-top {
    justify-content: space-between;
    gap: 30px;
  }
  
  .t-footer-brand {
    flex: 0 1 280px;
    margin-right: 20px;
  }
  
  .t-footer-center {
    flex: 1;
    justify-content: flex-start;
    padding: 0;
    margin-left: 0;
    gap: 40px;
  }
  
  .t-footer-links {
    justify-content: flex-start;
    gap: 40px;
  }
  
  .t-footer-links-column {
    margin-bottom: 20px;
    flex: 0 1 auto;
    min-width: 150px;
  }
  
  .t-footer-company,
  .t-footer-slogan,
  .t-footer-contact-item a {
    color: #ffffff !important;
  }
  
  .t-footer-slogan {
    opacity: 0.9;
    line-height: 1.5;
  }
  
  .t-footer-contact-item {
    margin-bottom: 10px;
  }
  
  .t-footer-contact-item a {
    opacity: 0.9;
    transition: all 0.3s ease;
  }
  
  .t-footer-contact-item a:hover {
    opacity: 1;
    text-decoration: none;
  }
  
  /* Organizziamo meglio gli elementi legali */
  .t-footer-bottom {
    padding-top: 20px;
  }
  
  .t-footer-copyright,
  .t-footer-legal a {
    color: #ffffff !important;
    opacity: 0.85;
  }
  
  .t-footer-legal a:hover {
    opacity: 1;
    text-decoration: none;
  }
}

/* Stili per grandi link social nel footer */
.t-footer-social-large {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  justify-content: flex-start;
}

.t-footer-social-link-large {
  font-size: 1.8rem;
  color: #ffffff;
  opacity: 0.85;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.t-footer-social-link-large:hover {
  color: var(--primary);
  opacity: 1;
  transform: translateY(-3px);
}

/* Nascondiamo il form newsletter nel footer */
.t-footer-newsletter {
  display: none;
}



/* === Stili Eleganti per Articoli Singoli (single.php) === */

/* Contenitore principale dell'articolo */
body.single main.grid .col-70 {
  max-width: 800px; /* Limita la larghezza per leggibilità */
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 1rem; /* Aggiunge spazio ai lati su mobile */
}

/* Spaziatura interna dell'articolo */
body.single article.post {
  padding: 2.5rem 0; /* Spazio sopra e sotto l'articolo */
  border-bottom: 1px solid var(--border-light); /* Separatore leggero prima del footer */
  margin-bottom: 2rem;
}

/* Titolo dell'articolo */
body.single article.post h1 {
  font-size: 2.8rem; /* Dimensione importante ma non eccessiva */
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 0.75rem;
  text-align: left; /* Allineamento standard */
}

/* Paragrafo Metadati (data, categorie) */
body.single article.post > p:first-of-type {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 1.5rem;
  line-height: 1.5;
  text-align: left;
}

body.single article.post > p:first-of-type a {
  color: var(--text-medium); /* Link metadati meno vistosi */
  text-decoration: none;
  border-bottom: 1px dotted var(--text-light);
}

body.single article.post > p:first-of-type a:hover {
  color: var(--primary-dark);
  border-bottom-style: solid;
}

/* Immagine in evidenza */
body.single article.post .wp-post-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: 2.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* Contenuto principale dell'articolo generato da the_content() */
body.single article.post > *:not(h1):not(.wp-post-image):not(p:first-of-type) {
  font-size: 1.1rem; /* Dimensione base leggibile */
  line-height: 1.7;  /* Interlinea comoda */
  color: var(--text-dark);
  margin-bottom: 1.6em; /* Spazio tra paragrafi/elementi */
  max-width: 100%; /* Assicura che non esca dal contenitore */
}

/* Paragrafi specifici */
body.single article.post p {
  /* Stili base già applicati sopra */
}

/* Liste */
body.single article.post ul,
body.single article.post ol {
  padding-left: 1.5em;
  margin-bottom: 1.6em;
}

body.single article.post li {
  margin-bottom: 0.6em;
}

/* Titoli interni al contenuto */
body.single article.post h2,
body.single article.post h3,
body.single article.post h4,
body.single article.post h5,
body.single article.post h6 {
  color: var(--text-dark);
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2.5em;
  margin-bottom: 1em;
}

body.single article.post h2 { font-size: 1.8rem; }
body.single article.post h3 { font-size: 1.5rem; }
body.single article.post h4 { font-size: 1.3rem; }
body.single article.post h5 { font-size: 1.1rem; }
body.single article.post h6 { font-size: 1rem; }

/* Link all'interno del contenuto */
body.single article.post a:not(.wp-block-button__link) {
  color: var(--primary-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--primary-light);
  transition: var(--transition-fast);
}

body.single article.post a:not(.wp-block-button__link):hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background-color: rgba(151, 71, 255, 0.05); /* Leggero sfondo al passaggio */
}

/* Blockquotes */
body.single article.post blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 1em 1.5em;
  border-left: 4px solid var(--primary-light);
  background-color: var(--bg-light);
  font-style: italic;
  color: var(--text-medium);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

body.single article.post blockquote p {
  margin-bottom: 0;
  font-size: 1.05rem; /* Leggermente più grande */
}

/* Immagini interne al contenuto */
body.single article.post img:not(.wp-post-image) {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Stili per commenti (se necessario in futuro) */
/* .comment-list { ... } */
/* .comment-form { ... } */

/* --- Fine Stili Articoli Singoli --- */

/* Header Desktop Social Icons */
@media (min-width: 769px) {
  .header-social-icons {
    display: flex;
    gap: 18px; /* Aumento della distanza tra le icone */
    align-items: center;
  }
  
  .header-social-icon {
    width: 24px; /* Aumento dimensione icone */
    height: 24px; /* Aumento dimensione icone */
    transition: all 0.3s ease;
  }
  
  .header-social-icon:hover {
    color: #9747FF; /* Cambio colore hover in viola */
  }
}

/* Stili per le opzioni annuali toggle di Hajime */
.t-plan-annual-options {
  margin-top: 20px; /* Spazio sopra i toggle */
  padding-top: 15px;
  border-top: 1px solid #eee; /* Separatore leggero */
}

.t-plan-annual-option {
  margin-bottom: 12px;
}

.t-plan-annual-option label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
  color: #555;
}

.t-plan-annual-option input[type="checkbox"] {
  margin-right: 10px;
  width: 18px;
  height: 18px;
  accent-color: #6E57FF; /* Colora il check */
  cursor: pointer;
  flex-shrink: 0; /* Impedisce al checkbox di restringersi */
}

.t-plan-annual-option-name {
  flex-grow: 1; /* Occupa lo spazio rimanente */
}

.t-plan-annual-option-price {
  font-weight: 600;
  color: #333;
  margin-left: 8px;
  white-space: nowrap; /* Evita che il prezzo vada a capo */
}

.t-blog-slider-image img {
  width: 18%;
  height: 100%;
  object-fit: cover; /* Comportamento di default per le immagini normali */
  transition: transform 0.5s ease;
}
/* Stili specifici per l'SVG di fallback */
.t-blog-slider-image img.is-fallback-logo {
  object-fit: contain; /* Adatta l'SVG mantenendo le proporzioni */
  padding: 20px; /* Aggiunge spazio intorno al logo */
  max-height: 100%; /* Assicura che non superi l'altezza del contenitore */
  width: auto; /* Permette all'SVG di ridimensionarsi in larghezza */
  margin: 0 auto; /* Centra l'SVG orizzontalmente se più stretto */
  background-color: #f8f9fa; /* Sfondo leggero per contrasto */
}
.t-blog-slider-item:hover .t-blog-slider-image img {
  transform: scale(1.05);
}

/* Stili specifici per i bottoni CTA dentro t-plans */
.t-plans-section .t-plan-cta-btn {
  padding: 15px 0px !important; /* Aggiunto !important per diagnostica */
  width: 100%; 
  justify-content: center; 
  display: flex;
  align-items: center;
}

/* Stile per le icone Lottie di WhatsApp nei bottoni */
.t-plans-section .whatsapp-lottie-icon {
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  vertical-align: middle !important;
  margin-left: 8px !important;
}

@media (max-width: 768px) {
  .t-plans-section {
    padding: 60px 0;
  }
  
  .t-plans-title {
    font-size: 2.4rem;
  }
  
  .t-plans-grid {
    gap: 20px;
  }
  
  .t-plan-card {
    padding: 25px;
  }
  
  .t-plan-amount {
    font-size: 2.2rem;
  }
  
  .t-plan-description {
    min-height: 90px;
  }
}


.main-hero .hero-content {
  transform: translateY(-100px);
}

/* === FINE FIX SPECIFICI PER iOS === */

/* Stili responsivi per il titolo hero - Spostati da home-template.php */
.main-hero .hero-content {
  transform: translateY(-100px);
}

/* Tablet - riduce lo spostamento verso l'alto */
@media (max-width: 1024px) {
  .main-hero .hero-content {
    transform: translateY(-70px);
  }
}

/* Tablet piccoli e dispositivi verticali */
@media (max-width: 768px) {
  .main-hero .hero-content {
    transform: translateY(-50px);
  }
}

/* Mobile - riduce ulteriormente lo spostamento */
@media (max-width: 480px) {
  .main-hero .hero-content {
    transform: translateY(-30px);
  }
}

.t-plan-annual-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

.t-plan-annual-option label {
  display: contents; /* per usare il layout della griglia */
  font-size: 15px;
  color: #333;
  line-height: 1.4;
}

.t-plan-annual-option input[type="checkbox"] {
  accent-color: #6E57FF;
  margin-top: 2px;
}

.t-plan-annual-option-name {
  word-break: break-word;
  margin-right: 6px;
}

.t-plan-annual-option-price {
  white-space: nowrap;
  font-weight: bold;
  color: #222;
  text-align: right;
}


/* BLOG SLIDER - BASE */
.t-blog-slider-wrapper {
  padding: 80px 0;
  background: #ffffff;
  overflow-x: hidden;
}

.t-blog-slider-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  overflow: hidden;
  box-sizing: border-box;
}

.t-blog-slider-header {
  text-align: center;
  margin-bottom: 50px;
}

.t-blog-slider-badge {
  display: inline-block;
  padding: 8px 16px;
  background-color: rgba(110, 87, 255, 0.1);
  color: #6E57FF;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  border: 1px solid rgba(110, 87, 255, 0.2);
}

.t-blog-slider-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.2;
  color: #333;
  margin-bottom: 15px;
}

.t-blog-slider-subtitle {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #555;
  margin-bottom: 0;
}

.t-blog-slider-subtitle .highlight {
  color: #6E57FF;
  font-weight: 700;
}

/* TRACK & ITEM */
.t-blog-slider-track {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.t-blog-slider-track::-webkit-scrollbar {
  display: none;
}

.t-blog-slider-item {
  flex: 0 0 calc((100% - 50px) / 3);
  scroll-snap-align: start;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
  max-width: 360px;
}

.t-blog-slider-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(110, 87, 255, 0.15);
}

.t-blog-slider-item a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.t-blog-slider-image {
  height: 200px;
  overflow: hidden;
}

.t-blog-slider-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.t-blog-slider-item:hover .t-blog-slider-image img {
  transform: scale(1.05);
}

.t-blog-slider-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.t-blog-slider-item-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

.t-blog-slider-excerpt {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
  margin-bottom: 15px;
  flex-grow: 1;
}

.t-blog-slider-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #888;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.t-blog-slider-date {
  font-style: italic;
}

.t-blog-slider-category {
  background-color: #f0f0f0;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 0.7rem;
}

/* BUTTON */
.t-blog-slider-button-container {
  text-align: center;
  margin-top: 40px;
}

.t-blog-slider-button-container .hero-btn {
  display: inline-block;
  padding: 15px 30px;
  font-weight: 600;
  font-size: 1.05rem;
  color: #ffffff;
  background: linear-gradient(92deg, #9747FF 0%, #B57DFF 100%);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(151, 71, 255, 0.15);
}

.t-blog-slider-button-container .hero-btn:hover {
  transform: scale(1.05);
  background: linear-gradient(92deg, #8230FF 0%, #A360FF 100%);
  box-shadow: 0 8px 20px rgba(151, 71, 255, 0.3);
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .t-blog-slider-item {
    flex: 0 0 calc((100% - 25px) / 2);
  }
}

@media (max-width: 576px) {
  .t-blog-slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 10px;
  }

  .t-blog-slider-item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    margin: 0 auto;
    max-width: 100%;
  }

  .t-blog-slider-image {
    height: 180px;
  }

  .t-blog-slider-title {
    font-size: 2rem;
  }

  .t-blog-slider-subtitle {
    font-size: 1rem;
  }

  .t-blog-slider-wrapper {
    padding: 50px 10px;
  }
}

.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
}

/* Contenitore del background video */
.hero-bg-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* Va dietro header + hero ma sopra il resto */
  pointer-events: none;
  overflow: hidden;
}

/* Video */
.hero-background-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}