@media (max-width: 500px) {
    header h1 { font-size: 1.7rem; }
    .subtitle { font-size: 0.8rem; letter-spacing: 2px; }
    .lang-btn { padding: 20px 12px; font-size: 1rem; }
    .lang-pill { padding: 5px 10px; font-size: 0.8rem; }
    .lang-globe-btn { height: 32px; padding: 0 8px; font-size: 1rem; }
    .nav-btn { padding: 7px 16px; font-size: 0.85rem; }
    .quiz-tools .tool-btn { padding: 8px 14px; font-size: 0.85rem; }
    .question-box h2 { font-size: 2.4rem; }
    .deco-img { display: none; }
    .about-card { margin: 1rem; padding: 2rem 1.2rem; }
    .about-name { font-size: 1.6rem; }
}

/* ===== Landscape Mobile ===== */
@media (max-width: 800px) and (orientation: landscape) {
    header h1 { font-size: 1.6rem; }
    .subtitle { font-size: 0.7rem; letter-spacing: 1px; margin-top: 4px; }
    header { padding: 0.4rem 1rem; }
    .main-nav { gap: 4px; }
    .nav-btn { padding: 4px 10px; font-size: 0.8rem; }
    .lang-pill { padding: 3px 8px; font-size: 0.7rem; }
    main { padding: 0.5rem; }
    .about-card { max-width: 100%; margin: 0.5rem auto; padding: 1rem; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem; }
    .about-avatar-wrap { flex-shrink: 0; margin: 0; }
    .about-card > *:not(.about-avatar-wrap) { width: 100%; }
    .about-name { font-size: 1.4rem; }
    .about-tagline { margin-bottom: 0.5rem; font-size: 0.85rem; }
    .about-section { margin-top: 0.8rem; padding-top: 0.8rem; }
    .about-tags { gap: 0.3rem; }
    .about-tag { padding: 0.3rem 0.7rem; font-size: 0.75rem; }
    .about-socials { gap: 0.4rem; }
    .about-social-link { padding: 0.4rem 0.7rem; font-size: 0.75rem; }
}