/* ==========================================================
   HACKER WEB — SEO V3 INTERNAL LINKING
   Static, visible, crawlable project/service clusters
   ========================================================== */

.hw-seo-v3-project-index,
.hw-seo-v3-related,
.hw-seo-v3-case-links {
    width:
        min(1180px, calc(100% - 40px));

    margin:
        72px auto 0;

    padding:
        34px;

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

    border-radius:
        8px;

    background:
        rgba(255,255,255,.012);
}


.hw-seo-v3-head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        28px;

    margin-bottom:
        26px;
}


.hw-seo-v3-kicker {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #a8ff00;

    font-size:
        10px;

    font-weight:
        900;

    line-height:
        1.2;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}


.hw-seo-v3-head h2 {
    margin:
        0;

    color:
        #fff;

    font-size:
        clamp(27px, 3vw, 42px);

    font-weight:
        750;

    line-height:
        1.05;

    letter-spacing:
        -.035em;
}


.hw-seo-v3-head p {
    max-width:
        470px;

    margin:
        0;

    color:
        rgba(255,255,255,.52);

    font-size:
        14px;

    line-height:
        1.6;
}


.hw-seo-v3-grid {
    display:
        grid;

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

    gap:
        12px;
}


.hw-seo-v3-card {
    min-width:
        0;

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

    border-radius:
        6px;

    background:
        rgba(255,255,255,.012);

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}


.hw-seo-v3-card:hover {
    border-color:
        rgba(168,255,0,.24);

    background:
        rgba(168,255,0,.018);

    transform:
        translateY(-2px);
}


.hw-seo-v3-card-main {
    display:
        block;

    padding:
        20px 20px 16px;

    color:
        inherit;

    text-decoration:
        none;
}


.hw-seo-v3-category {
    display:
        block;

    margin-bottom:
        8px;

    color:
        rgba(168,255,0,.72);

    font-size:
        9px;

    font-weight:
        900;

    line-height:
        1.2;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.hw-seo-v3-card h3 {
    margin:
        0 0 9px;

    color:
        rgba(255,255,255,.96);

    font-size:
        19px;

    font-weight:
        720;

    line-height:
        1.25;

    letter-spacing:
        -.02em;
}


.hw-seo-v3-card p {
    margin:
        0;

    color:
        rgba(255,255,255,.50);

    font-size:
        13px;

    line-height:
        1.55;
}


.hw-seo-v3-services {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    padding:
        0 20px 19px;
}


.hw-seo-v3-services a,
.hw-seo-v3-service-link {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        29px;

    padding:
        0 10px;

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

    border-radius:
        999px;

    background:
        rgba(40,120,220,.025);

    color:
        rgba(190,220,255,.76);

    font-size:
        10px;

    font-weight:
        750;

    line-height:
        1;

    text-decoration:
        none;
}


.hw-seo-v3-services a:hover,
.hw-seo-v3-service-link:hover {
    border-color:
        rgba(86,164,255,.36);

    color:
        #fff;
}


.hw-seo-v3-case-services {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-bottom:
        28px;
}


.hw-seo-v3-related-title {
    margin:
        0 0 15px;

    color:
        rgba(255,255,255,.76);

    font-size:
        13px;

    font-weight:
        750;

    letter-spacing:
        .02em;
}


.hw-seo-v3-related-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap:
        10px;
}


.hw-seo-v3-related-item {
    display:
        block;

    min-width:
        0;

    padding:
        15px;

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

    border-radius:
        5px;

    color:
        inherit;

    text-decoration:
        none;
}


.hw-seo-v3-related-item:hover {
    border-color:
        rgba(168,255,0,.20);
}


.hw-seo-v3-related-item span {
    display:
        block;

    margin-bottom:
        6px;

    color:
        rgba(255,255,255,.36);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.hw-seo-v3-related-item strong {
    display:
        block;

    color:
        rgba(255,255,255,.88);

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.35;
}


@media (max-width: 900px) {

    .hw-seo-v3-project-index,
    .hw-seo-v3-related,
    .hw-seo-v3-case-links {
        width:
            calc(100% - 28px);

        margin-top:
            48px;

        padding:
            24px;
    }


    .hw-seo-v3-head {
        display:
            block;
    }


    .hw-seo-v3-head p {
        margin-top:
            12px;
    }


    .hw-seo-v3-related-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 620px) {

    .hw-seo-v3-project-index,
    .hw-seo-v3-related,
    .hw-seo-v3-case-links {
        width:
            calc(100% - 20px);

        padding:
            18px;
    }


    .hw-seo-v3-grid {
        grid-template-columns:
            1fr;
    }


    .hw-seo-v3-head h2 {
        font-size:
            29px;
    }


    .hw-seo-v3-card-main {
        padding:
            17px 16px 14px;
    }


    .hw-seo-v3-services {
        padding:
            0 16px 16px;
    }

}