/* =========================================================
   LINKLOOP — RESPONSIVE STYLES
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {


    .hero-container {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .hero-content {

        max-width: 800px;

    }


    .hero-visual {

        max-width: 700px;

        margin: 0 auto;

        width: 100%;

    }


    .category-grid {

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

    }


    .tools-grid {

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

    }


    .why-container {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .footer-grid {

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

    }


}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 900px) {


    .main-nav {

        position: absolute;

        top: 82px;

        left: 20px;

        right: 20px;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 10px;

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

        border-radius: 16px;

        background: rgba(16, 8, 43, 0.98);

        box-shadow: var(--shadow);

    }


    .main-nav.active {

        display: flex;

    }


    .main-nav a {

        padding: 13px 15px;

        border-radius: 9px;

    }


    .main-nav a:hover {

        background:
            rgba(255, 255, 255, 0.04);

    }


    .menu-toggle {

        display: block;

    }


    .header-button {

        display: none;

    }


}


/* =========================================================
   TABLET / SMALL
   ========================================================= */

@media (max-width: 700px) {


    .container {

        width:
            min(
                var(--container),
                calc(100% - 28px)
            );

    }


    .section {

        padding: 80px 0;

    }


    .hero {

        min-height: auto;

    }


    .hero-container {

        padding: 75px 0;

    }


    .hero h1 {

        font-size:
            clamp(
                44px,
                13vw,
                65px
            );

    }


    .hero-description {

        font-size: 15px;

    }


    .hero-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .button {

        width: 100%;

    }


    .hero-trust {

        gap: 12px;

    }


    .section-heading {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

        margin-bottom: 32px;

    }


    .section-heading h2 {

        font-size: 36px;

    }


    .category-grid,

    .tools-grid {

        grid-template-columns: 1fr;

    }


    .benefits-grid {

        grid-template-columns: 1fr;

    }


    .cta-box {

        flex-direction: column;

        align-items: flex-start;

        padding: 40px 28px;

    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }


    /* SEARCH */

    .resource-search-box {

        flex-direction: column;

        align-items: stretch;

    }


    .search-info {

        padding-left: 4px;

    }


    .resource-filters {

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 12px;

        scrollbar-width: thin;

    }


    .filter-button {

        flex-shrink: 0;

    }


}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 450px) {


    .brand-logo img {

        width: 125px;

    }


    .hero-badge {

        font-size: 10px;

    }


    .hero h1 {

        font-size: 42px;

    }


    .hero-trust {

        flex-wrap: wrap;

    }


    .trust-divider {

        display: none;

    }


    .hero-banner-card {

        border-radius: 17px;

    }


    .category-card,

    .tool-card {

        padding: 21px;

    }


    .empty-state {

        padding: 30px 20px;

    }

}