/* Desktop / Small Laptops */
@media (max-width: 1200px) {
  :root {
    --space-section: 100px;
  }
  
  h1 { font-size: 3.5rem; }
  .hero-visual img { height: 500px; }
}

/* Tablet */
@media (max-width: 992px) {
  :root {
    --space-section: 80px;
  }

  h1 { font-size: 3rem; }
  h2 { font-size: 2.5rem; }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .hero-content {
    padding-right: 0;
  }

  .hero-actions {
    justify-content: center;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 40px;
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --space-section: 60px;
  }

  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }

  nav ul {
    display: none; /* Mobile menu requires JS for slide-in, falling back to hidden/bottom for CSS only approach */
  }

  /* Simple CSS mobile menu fallback */
  .mobile-menu-btn {
    display: block;
    width: 30px;
    height: 20px;
    position: relative;
    z-index: 1001;
    cursor: pointer;
  }
  
  .mobile-menu-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--accent-primary);
    position: absolute;
    transition: all 0.3s;
  }
  
  .mobile-menu-btn span:nth-child(1) { top: 0; }
  .mobile-menu-btn span:nth-child(2) { top: 9px; }
  .mobile-menu-btn span:nth-child(3) { top: 18px; }

  .nav-container {
    padding: 0 16px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .trust {
    margin: 40px 16px;
    padding: 40px 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    padding: 140px 20px 60px;
  }
  
  .contact-form {
    padding: 24px;
  }
}