/* Mobile overrides extracted from inline styles to keep HTML tidy */
@media (max-width: 480px) {
  /* prevent fixed/absolute elements from overlapping */
  .carousel-container { position: static !important; width: 100% !important; margin-top: 20px !important; padding: 10px !important; }
  .carousel { margin: 0 !important; }
  .exp-badge { position: static !important; width: 90px !important; height: 90px !important; margin: 20px auto 0 auto !important; right: auto !important; bottom: auto !important; }
  .about-content { gap: 20px !important; }
  .about-image img { width: 100% !important; height: auto !important; }
  .profile-card { max-width: 100% !important; }
  header { padding: 14px 0 !important; }
  .hero { padding-top: 140px !important; }
  .container { width: 95% !important; padding: 0 12px !important; }
  /* ensure no horizontal overflow */
  html, body { overflow-x: hidden !important; }
}