/* Responsive styles */

/* Tablet (768px to 1023px) */
@media screen and (max-width: 1023px) {
  :root {
    --font-size-5xl: 2.5rem;
  }
  
  .hero {
    min-height: 600px;
  }
  
  .hero-content {
    max-width: 90%;
  }
  
  .hero-title {
    font-size: var(--font-size-4xl);
  }
  
  .hero-subtitle {
    font-size: var(--font-size-lg);
  }
}

/* Mobile (less than 768px) */
@media screen and (max-width: 767px) {
  :root {
    --font-size-5xl: 2rem;
  }
  
  .hero {
    min-height: 500px;
    height: 90vh;
  }
  
  .hero-content {
    padding: 0 var(--space-3);
  }
  
  .hero-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-3);
  }
  
  .hero-subtitle {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-4);
  }
  
  .hero-cta {
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .btn {
    display: block;
    width: 100%;
  }
}

/* Small mobile (less than 480px) */
@media screen and (max-width: 479px) {
  :root {
    --space-3: 0.75rem;
  }
  
  .hero-title {
    font-size: var(--font-size-2xl);
  }
  
  .hero-subtitle {
    font-size: var(--font-size-sm);
  }
  
  .container {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}