@media (max-width: 1024px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /*.hero-visual {*/
    /*    display: none;*/
    /*}*/

    .for-workers-inner, .for-venues-inner, .about-inner, .faq-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

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

    .venue-features {
        grid-template-columns: 1fr;
    }

    .workers-img-frame img {
        height: 360px;
    }

    .about-visual img {
        height: 400px;
    }

    .venue-hero-img img {
        height: 240px;
    }
}

@media (max-width: 768px) {
    :root {
        --section-pad: 72px;
    }

    nav ul {
        display: none;
    }

    .hamburger {
        display: flex;
    }

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

        .steps-grid::before {
            display: none;
        }

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

    .stat-bar {
        flex-wrap: wrap;
    }

    .stat-bar-item {
        flex: 1 1 50%;
        border-right: none;
        border-bottom: 1px solid rgba(7,98,85,0.08);
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: 24px;
    }

    .workers-img-frame img {
        height: 300px;
    }

    .about-visual img {
        height: 340px;
    }

    .worker-face {
        width: 92px;
        height: 70px;
    }

    .worker-faces {
        display: flex;
        justify-content: space-around;
        flex-wrap: nowrap;
        padding: 10px;
        gap: 10px;
    }

    .faq-intro {
        position: static;
    }

    .benefit-list-horizontal {
        margin-top: 32px;
        grid-template-columns: 1fr;
    }

    .qr-demo-card {
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }

    .for-you-grid-2-column {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .download-badges {
        flex-direction: column;
    }

    .width-60 {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .footer-inner {
        grid-template-columns: 1fr;
    }

    .app-badges {
        flex-direction: column;
    }

    .hero-actions {
        flex-direction: column;
    }

    .btn-primary, .btn-glass, .btn-teal {
        width: 100%;
        justify-content: center;
    }

    .workers-img-frame img {
        height: 260px;
    }

    .about-visual img {
        height: 280px;
    }

    .worker-face {
        width: 84px;
        height: 64px;
    }
}