@media (max-width: 900px) {

    .nav-menu {
        position: absolute;

        top: 74px;
        left: 16px;
        right: 16px;

        display: none;

        flex-direction: column;
        align-items: stretch;

        padding: 20px;

        border:
            1px solid
            rgba(255,255,255,.1);

        border-radius: 18px;

        background:
            rgba(18,7,5,.97);

        box-shadow:
            0 20px 50px
            rgba(0,0,0,.4);
    }

    .nav-menu.open {
        display: flex;
    }

    .mobile-toggle {
        display: block;
    }


    .hero-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }


    .hero {
        padding-top: 48px;
    }

    .hero h1 {
        letter-spacing: -2px;
    }


    .hero-card {
        min-height: 500px;
    }


    .trust-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .product-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .feature-grid,
    .review-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .promo-inner {
        grid-template-columns: 1fr;

        padding: 40px 28px;
    }
}


@media (max-width: 620px) {

    .section {
        padding: 65px 0;
    }


    .product-grid,
    .feature-grid,
    .review-grid {
        grid-template-columns: 1fr;
    }


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


    .section-heading {
        display: block;
    }

    .section-heading p {
        margin-top: 14px;
    }


    .hero-actions {
        display: grid;
    }

    .hero-actions .btn {
        width: 100%;
    }


    .hero-card {
        min-height: 440px;

        padding: 22px;
    }


    .hero-product {
        inset:
            10px
            10px
            110px;
    }

    .hero-product img {
        max-height: 310px;
    }


    .float-badge {
        font-size: 10px;
    }


    .product-image {
        min-height: 300px;
    }


    .promo-inner {
        padding: 35px 24px;
    }
}


@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;
    }
}