/* Responsive Styles */

@media (max-width: 1024px) {
    :root {
        --container-width: 100%;
    }

    .nav-menu {
        gap: 1.5rem;
    }

    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {

    .nav-menu,
    .nav-actions .btn {
        display: none;
    }

    .mobile-toggle {
        display: block;
    }

    .hero-title {
        font-size: 3rem;
    }

    .container {
        padding: 0 1.5rem;
    }

    section {
        padding: 3rem 0;
    }

    /* Stack columns on mobile */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
    }

    .flex-row {
        flex-direction: column;
    }

    .order-swap-mobile {
        order: -1;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .btn {
        width: 100%;
        padding: 1rem;
    }
}