:root {
  /* Primary Colors */
  --primary-green: #01df4a;
  --primary-green-dark: #00b341;
  
  /* Text Colors */
  --text-dark: #2c2c2c;
  --text-light: #ffffff;
  
  /* Gradients */
  --gradient-green: linear-gradient(45deg, var(--primary-green), var(--primary-green-dark));
  --gradient-green-light: linear-gradient(45deg, rgba(1, 223, 74, 0.05), rgba(1, 223, 74, 0.02));
  --gradient-text: linear-gradient(270deg, #65fe50 1.21%, #00ffb2 100%);
}

/* Text styles */
.text-gradient {
  background: var(--gradient-green);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gradient text style specifico */
.clr-grad-4 {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Background styles */
.bg-gradient {
  background: var(--gradient-green);
}

.bg-gradient-light {
  background: var(--gradient-green-light);
}

/* Light background sections */
.section-light {
  background: var(--text-light);
  color: var(--text-dark);
}

.section-light .highlight {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Dark background sections */
.section-dark {
  background: var(--text-dark);
  color: var(--text-light);
}

.section-dark .highlight {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Button styles */
.btn-primary {
  background: var(--gradient-green);
  color: var(--text-light);
  border: none;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(1, 223, 74, 0.2);
}

/* Demo button style */
.btn-demo {
  background: var(--primary-green);
  color: var(--text-dark);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-demo:hover {
  background: var(--gradient-green);
  color: var(--text-light);
  transform: translateY(-2px);
}

/* Badge styles */
.bg-secondary-key {
  background: rgba(1, 223, 74, 0.1);
}

.clr-primary-10 {
  color: var(--primary-green);
}

/* Background light */
.bgc-light {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.98)), var(--gradient-green-light);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  /* Global adjustments */
  body {
    overflow-x: hidden;
  }
  
  /* Typography for mobile */
  h1, .h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  h2, .h2 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  h3, .h3 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  p {
    font-size: 0.95rem !important;
  }
  
  /* Buttons on mobile */
  .btn {
    padding: 0.6rem 1.2rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Containers and sections */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Images and media */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Header mobile improvements */
  .header--fixed {
    transition: transform 0.3s ease-in-out;
  }
  
  .header-hidden {
    transform: translateY(-100%);
  }
  
  /* Input focus improvements for touch */
  .input-focused {
    box-shadow: 0 0 0 3px rgba(1, 223, 74, 0.3) !important;
  }
  
  /* Mobile menu improvements */
  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(1, 223, 74, 0.1) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    margin-left: auto;
  }
  
  .menu-toggle i {
    font-size: 1.5rem;
    color: var(--primary-green);
  }
  
  body.menu-open {
    position: fixed;
    width: 100%;
    height: 100%;
  }
  
  .menu-open .menu ul.list-row {
    display: flex !important;
    flex-direction: column !important;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    padding: 2rem 1rem !important;
    z-index: 1000;
    gap: 1.5rem !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease;
    overflow-y: auto;
  }
  
  .menu-list {
    width: 100%;
    text-align: center;
  }
  
  .menu-link {
    font-size: 1.1rem !important;
    padding: 0.75rem 0 !important;
    display: block;
    width: 100%;
    border-bottom: 1px solid rgba(1, 223, 74, 0.1);
  }
  
  /* Hero section */
  #hero-3 {
    text-align: center;
    padding-top: 1.5rem !important;
  }
  
  /* Modificato per mantenere l'ordine naturale (sinistra->destra) */
  /* #hero-3 .row {
    flex-direction: column-reverse;
  } */
  
  #hero-3 img {
    margin-bottom: 2rem;
  }
  
  /* Use cases section - cos'è vocalia */
  #use-cases .card {
    margin-bottom: 1.5rem !important;
  }
  
  /* Assicura che le righe con ordine invertito su desktop mantengano l'ordine corretto su mobile */
  #use-cases .row.flex-row-reverse {
    flex-direction: column !important;
  }
  
  /* Demo section */
  #demo .row, .demo-section .row {
    flex-direction: column !important; /* Forza l'ordine naturale */
  }
  
  /* Per qualsiasi riga che deve mantenere l'ordine naturale su mobile */
  .row.mobile-natural-order {
    flex-direction: column !important;
  }
  
  /* Per qualsiasi riga che deve invertire l'ordine su mobile */
  .row.mobile-reverse-order {
    flex-direction: column-reverse !important;
  }
  
  /* KPI section */
  #kpi-section .row > div {
    margin-bottom: 2rem !important;
  }
  
  /* Comparison section */
  #comparison {
    overflow-x: hidden;
  }
  
  #comparison .table-responsive {
    margin: 0 -1rem;
    padding: 0 1rem;
    width: calc(100% + 2rem);
  }
  
  /* Calendar section */
  #calendar iframe {
    height: 450px !important;
  }
  
  /* FAQ section */
  #faq .accordion-button {
    font-size: 1rem !important;
    padding: 1rem !important;
  }
  
  #faq .accordion-body {
    padding: 1rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Footer adjustments */
  footer {
    text-align: center;
  }
  
  footer .social-links {
    justify-content: center !important;
    margin-top: 1rem;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Touch-friendly form elements */
  input, 
  textarea, 
  select, 
  .form-control,
  .form-select,
  button:not(.menu-toggle) {
    min-height: 44px !important; /* Apple recommended touch target size */
    font-size: 16px !important; /* iOS prevents auto zoom on focus when font size is 16px+ */
  }
  
  .form-check {
    padding-left: 2rem !important;
  }
  
  .form-check-input {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-left: -2rem !important;
  }
  
  /* Improve touch targets */
  a, button, 
  .btn, 
  [role="button"], 
  [type="button"], 
  [type="submit"] {
    padding: 0.8rem 1.2rem !important;
    touch-action: manipulation;
  }
  
  /* Fix sticky hover state on touch devices */
  a:hover, button:hover, 
  .btn:hover, 
  [role="button"]:hover, 
  [type="button"]:hover, 
  [type="submit"]:hover {
    transition: none !important;
  }
  
  /* Fix for mobile 100vh issue - avoid using 100vh directly in CSS */
  .full-height {
    height: 100% !important;
    height: -webkit-fill-available !important;
  }
  
  /* Improve scrollable areas */
  .table-responsive,
  .overflow-auto {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  
  /* Add visible scrollbars on mobile for horizontal scrolling */
  .table-responsive::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 6px;
  }
  
  .table-responsive::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.2);
  }
}

/* Additional mobile adjustments for xs screens */
@media (max-width: 576px) {
  h1, .h1 {
    font-size: 1.75rem !important;
  }
  
  /* Spacing adjustments */
  .section {
    padding: 2rem 0 !important;
  }
  
  /* Container adjustments */
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Fix per eliminare lo spazio bianco sotto il footer */
html, body {
  min-height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
}