/* Tablet & Small Desktop */
@media (max-width: 1024px) {
  :root {
    --spacing-desktop: var(--spacing-tablet);
  }
  
  h1 { font-size: 3.2rem; }
  
  .hero-grid { gap: 2rem; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --spacing-desktop: var(--spacing-mobile);
  }

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

  .nav-links { display: none; /* In a full JS environment, this would be a hamburger menu */ }
  
  .hero { padding-top: 120px; min-height: auto; text-align: center; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-content p { max-width: 100%; margin: 0 auto 2rem; }
  .hero-actions { justify-content: center; flex-direction: column; }
  
  .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 2rem; }
  
  .footer-grid { grid-template-columns: 1fr; }
  
  .page-header { padding: 140px 0 60px; }
}