/* ============================================================
   Responsive Styles
   ============================================================ */

@media (max-width: 1100px) {
  .specs-grid { grid-template-columns: repeat(2, 1fr); }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(3, 1fr); }
  .languages-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  :root { --section-py: 80px; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 320px; margin: 0 auto; }
  .hero-photo-wrap { max-width: 100%; }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 380px; margin: 0 auto; }
  .projects-grid { grid-template-columns: 1fr; }
  .project-card.featured { grid-template-columns: 1fr; }
  .project-card.featured .project-thumb { aspect-ratio: 16/9; }
  .charts-wrap { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --section-py: 64px; }

  /* Nav mobile */
  .nav-links { display: none; }
  .nav-cta   { display: none; }
  #nav-toggle { display: flex; }

  /* Hero */
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-blob  { display: none; } /* hide blobs on mobile to save performance */

  /* Specs */
  .specs-grid { grid-template-columns: 1fr; }

  /* Skills */
  .skills-grid { grid-template-columns: 1fr; }

  /* Education */
  .edu-grid   { grid-template-columns: 1fr; }
  .cert-grid  { grid-template-columns: repeat(2, 1fr); }

  /* Languages */
  .languages-grid { grid-template-columns: repeat(3, 1fr); }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-inner   { flex-direction: column; text-align: center; }
  .footer-links   { justify-content: center; }
  .footer-socials { justify-content: center; }

  /* Form */
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; justify-content: center; }
  .languages-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: 1fr; }
  .projects-filter { gap: 6px; }
  .hero-photo-wrap { padding: 3px; }
  .nav-logo-img { height: 30px; }
}