/* =====================================================================
   RESPONSIVE RULES — Landing page + shared background layers
   (Dashboard has its own internal responsive rules in dashboard.css)
   ===================================================================== */

@media (max-width: 992px){
  .hero h1{ font-size:3rem; }
  .how-grid, .pricing-grid{ grid-template-columns:repeat(2,1fr); }
  .pricing-card.popular{ transform:none; }
}

@media (max-width: 768px){
  .nav-links{ display:none; }
  .hero{ padding:110px 0 70px; }
  .hero h1{ font-size:2.2rem; }
  .features-grid, .how-grid, .pricing-grid{ grid-template-columns:1fr; }
  .counter-grid{ flex-direction:column; gap:30px; }
  .countdown-box{ font-size:3rem; padding:22px 40px; }
  .security-badges{ flex-direction:column; align-items:center; gap:20px; }
  .hero-buttons{ flex-direction:column; }
  .comparison-table{ display:block; overflow-x:auto; }
  .footer-container{ grid-template-columns:1fr; text-align:center; }
  .modal-content{ width:90%; padding:30px 20px; }
}

@media (max-width: 480px){
  .hero h1{ font-size:1.8rem; }
  .hero p.tagline{ font-size:1.1rem; }
  .section-title{ font-size:1.8rem; }
  .countdown-box{ font-size:2.4rem; padding:18px 30px; }
}