@media (max-width: 768px) {
    .glass-nav { padding: 0 0.5rem; }
    .hero-section h1 { font-size: 2.5rem !important; }
    .hero-section p { font-size: 1rem !important; }
    #features h2 { font-size: 2.5rem; }
    #ip .flex-col { flex-direction: column; gap: 1rem; }
    #ip-text, #ip-text-secondary { font-size: 1.5rem; }
    footer .grid-cols-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .hero-section h1 { font-size: 2rem !important; }
    .hero-btn { padding: 0.75rem 1.5rem; font-size: 0.9rem; }
    .modal-content { max-width: 90%; padding: 1rem; }
    #help-modal .modal-content, #utility-modal .modal-content { max-height: 70vh; }
    #auth-modal .max-w-md { max-width: 92%; }
    #auth-modal .p-6 { padding: 1.2rem; }
    #terms-modal .max-w-3xl { max-width: 95%; max-height: 90vh; }
    #terms-content h1 { font-size: 1.4rem; }
    #terms-content h2 { font-size: 1.1rem; }
    .preloader-title { font-size: 1.3rem; }
    .preloader-logo-img { height: 56px; }
    .preloader-bar-wrapper { width: 220px; }
    .preloader-inner { gap: 0.5rem; padding: 1.5rem 0.5rem; }
    #preloader::before { width: 300px; height: 300px; }
    #preloader::after { width: 250px; height: 250px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    footer .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (hover: none) {
    button, a, .cmd-item, .char-btn, .copy-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .cmd-item:active, .char-btn:active, .copy-btn:active { background-color: #e0e0e0; }
    .feature-card:hover, .team-card:hover { transform: none; }
}