/* Responsive Styles for Flo Faction */

/* Mobile First Breakpoints */
@media (max-width: 480px) {
  .container { padding: 0 15px; }
  .hero { padding: 100px 15px 60px; }
  .hero h1 { font-size: 1.75rem; }
  .hero p { font-size: 1rem; }
  .cta-button { padding: 14px 30px; font-size: 0.9rem; }
  .features, .contact { padding: 60px 0; }
  .features h2, .contact h2 { font-size: 1.75rem; }
  .feature-card { padding: 25px; }
  .feature-card h3 { font-size: 1.25rem; }
  .footer-links { flex-direction: column; gap: 15px; }
}

@media (min-width: 481px) and (max-width: 768px) {
  .hero h1 { font-size: 2.25rem; }
  .features-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 3rem; }
}

@media (min-width: 1025px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Print Styles */
@media print {
  .navbar, .cta-button, footer { display: none; }
  body { background: white; color: black; }
  .hero { min-height: auto; padding: 20px; }
}