/* ===================== GLOBAL RESPONSIVE ===================== */
@media (max-width: 1200px) {
    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-visual {
        margin-top: 40px;
    }
}

/* ===================== NAVBAR ===================== */
@media (max-width: 992px) {
    .navbar nav ul {
        display: none;
        position: absolute;
        top: 70px;
        right: 0;
        background: rgba(10,10,10,0.95);
        flex-direction: column;
        width: 200px;
        padding: 20px;
        border-radius: 12px;
    }

    .navbar nav ul.show {
        display: flex;
    }

    .navbar .theme-toggle {
        margin-left: 20px;
    }
}

/* ===================== HERO TEXT ===================== */
@media (max-width: 768px) {
    .page-hero h1 {
        font-size: 32px;
    }

    .page-hero p {
        font-size: 14px;
    }

    section {
        padding: 60px 5%;
    }
}

/* ===================== GRID ADJUSTMENTS ===================== */
@media (max-width: 768px) {
    .services-grid,
    .features-grid,
    .selector-grid,
    .process-steps,
    .tech-grid,
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ===================== CONVERTER PANEL ===================== */
@media (max-width: 576px) {
    .converter-panel {
        padding: 20px;
    }

    .upload-label {
        padding: 20px;
        font-size: 14px;
    }

    .action-buttons {
        flex-direction: column;
        gap: 12px;
    }
}

/* ===================== AUTH / LOGIN ===================== */
@media (max-width: 576px) {
    .auth-container {
        padding: 30px 20px;
    }
}

/* ===================== FOOTER ===================== */
@media (max-width: 576px) {
    .footer {
        font-size: 12px;
        padding: 20px 10px;
    }
}