/* Responsive Styles */

/* Small devices (phones, 576px and down) */
@media (max-width: 576px) {
  :root {
    --space-10: 60px;
    --space-12: 80px;
    --space-16: 100px;
  }
  
  .container {
    padding: 0 var(--space-2);
  }
  
  .section-title {
    font-size: 1.75rem;
  }
  
  .hero-content {
    padding: var(--space-2);
  }
  
  .tagline {
    font-size: 1.75rem;
  }
  
  .subtagline {
    font-size: 1rem;
  }
  
  .feature {
    padding: var(--space-3);
  }
  
  .feature-icon {
    width: 80px;
    height: 80px;
  }
  
  .feature h3 {
    font-size: 1.125rem;
  }
  
  .footer {
    padding: var(--space-6) 0 var(--space-3);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 992px) {
  .features-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .screenshots-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .hero-content {
    max-width: 700px;
  }
  
  .tagline {
    font-size: 2.25rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .container {
    padding: 0 var(--space-4);
  }
  
  .tagline {
    font-size: 2.75rem;
  }
  
  .subtagline {
    font-size: 1.25rem;
  }
  
  .screenshots-container {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .feature:hover {
    transform: translateY(-12px);
  }
}