/* ===== IMPROVED RESPONSIVE ===== */
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-section h1 { font-size: 2.8rem; }
}

@media (max-width: 768px) {
  .main-nav { 
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sg-bg);
    border-bottom: 1px solid var(--sg-border);
    padding: 16px 20px;
  }
  
  .main-nav.active { display: block; }
  
  .main-nav ul {
    flex-direction: column;
    gap: 0;
  }
  
  .main-nav li {
    border-bottom: 1px solid var(--sg-border);
  }
  
  .main-nav li:last-child { border-bottom: none; }
  
  .main-nav a {
    display: block;
    padding: 12px 0;
    font-size: 1rem;
  }
  
  .menu-toggle { display: block; }
  
  .card-grid { grid-template-columns: 1fr; }
  
  .hero-section {
    padding: 60px 20px 50px;
  }
  
  .hero-section h1 { font-size: 2.2rem; }
  .hero-section p { font-size: 1rem; }
  
  .section { padding: 50px 20px; }
  .section-header h2 { font-size: 1.8rem; }
  
  .footer-inner { grid-template-columns: 1fr; }
  
  .newsletter-form { flex-direction: column; }
  
  .cta-section { padding: 40px 20px; }
  .cta-section h2 { font-size: 1.6rem; }
  
  .page-content h1 { font-size: 1.8rem; }
  .post-header h1 { font-size: 1.8rem; }
  
  .post-nav { flex-direction: column; }
  
  .similar-grid { grid-template-columns: 1fr; }
}

@media (max-width: 375px) {
  .header-inner { padding: 12px 16px; }
  .site-logo a { font-size: 1.3rem; }
  .hero-section h1 { font-size: 1.8rem; }
  .btn { padding: 12px 24px; font-size: 0.9rem; }
}