@media (max-width: 900px) {

    .nav-links,
    .nav-btn {

        display: none;

    }


    .menu-btn {

        display: grid;

        place-content: center;

        gap: 4px;

    }


    .menu-btn span {

        width: 16px;
        height: 1px;

        background: currentColor;

    }


    .mobile-menu {

        position: absolute;

        top: 76px;

        left: 20px;
        right: 20px;

        padding: 12px;

        border: 1px solid var(--border);

        border-radius: 16px;

        background: rgba(10,10,14,.95);

        backdrop-filter: blur(20px);

    }


    .mobile-menu.active {

        display: flex;

        flex-direction: column;

    }


    .mobile-menu a {

        padding: 14px;

        color: var(--text);

        text-decoration: none;

        border-radius: 10px;

        font-size: 14px;

    }


    .mobile-menu a:hover {

        background: var(--surface-hover);

    }


    .categories-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .benefits-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 650px) {

    .nav-container {

        width: min(100% - 28px, 1180px);

    }


    .hero {

        min-height: 760px;

        padding-top: 130px;

    }


    .hero h1 {

        font-size: 49px;

        letter-spacing: -3px;

    }


    .hero-description {

        font-size: 15px;

    }


    .search-box {

        height: 60px;

    }


    .search-box kbd {

        display: none;

    }


    .quick-tools span {

        width: 100%;

    }


    .section {

        width: min(100% - 28px, 1180px);

        padding: 75px 0;

    }


    .section-heading {

        display: block;

    }


    .section-heading h2 {

        font-size: 35px;

    }


    .view-all {

        display: inline-block;

        margin-top: 18px;

    }


    .tools-grid {

        grid-template-columns: 1fr;

    }


    .categories-grid {

        grid-template-columns: 1fr;

    }


    .benefits-grid {

        grid-template-columns: 1fr;

    }


    .cta-section {

        width: calc(100% - 28px);

        padding-bottom: 80px;

    }


    .cta-card {

        padding: 65px 20px;

    }


    .footer-main {

        grid-template-columns: 1fr 1fr;

    }


    .footer-brand {

        grid-column: 1 / -1;

    }


    .footer-bottom {

        flex-direction: column;

        gap: 10px;

    }

}


@media (max-width: 420px) {

    .hero h1 {

        font-size: 42px;

    }


    .tool-card {

        min-height: 225px;

    }

}