/* ===== Responsive Design ===== */

/* Tablet */
@media (max-width: 768px) {
    :root {
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.75rem;
        --spacing-2xl: 3rem;
    }

    .header-inner {
        flex-wrap: wrap;
        height: auto;
        padding: var(--spacing-sm) 0;
    }

    .nav {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: var(--spacing-sm);
    }

    .apps-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: var(--spacing-xl) 0;
    }
}

/* Mobile */
@media (max-width: 480px) {
    :root {
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.5rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
    }

    .container {
        padding: 0 var(--spacing-sm);
    }

    .nav {
        gap: var(--spacing-xs);
    }

    .nav-link {
        padding: 4px 8px;
        font-size: var(--font-size-sm);
    }

    .app-card {
        padding: var(--spacing-md);
    }
}