/* ==========================================================
   HACKER WEB
   AUTO CASE STUDY V1
   ========================================================== */

.hw-case-main {
    background:
        #050708;
    color:
        #fff;
}

.hw-case-shell {
    width:
        min(1180px, calc(100% - 48px));
    margin:
        0 auto;
}


/* HERO */

.hw-case-hero {
    position:
        relative;
    overflow:
        hidden;
    padding:
        150px 0 90px;
    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.hw-case-hero::before {
    content:
        "";
    position:
        absolute;
    width:
        650px;
    height:
        650px;
    top:
        -320px;
    right:
        -200px;
    border-radius:
        50%;
    background:
        radial-gradient(
            circle,
            rgba(48,141,255,.16),
            transparent 68%
        );
    pointer-events:
        none;
}

.hw-case-breadcrumb {
    display:
        flex;
    flex-wrap:
        wrap;
    gap:
        10px;
    align-items:
        center;
    margin-bottom:
        54px;
    color:
        rgba(255,255,255,.42);
    font-size:
        12px;
    font-weight:
        800;
    letter-spacing:
        .14em;
    text-transform:
        uppercase;
}

.hw-case-breadcrumb a {
    color:
        inherit;
    text-decoration:
        none;
}

.hw-case-breadcrumb strong {
    color:
        #69b7ff;
}

.hw-case-meta {
    display:
        flex;
    flex-wrap:
        wrap;
    gap:
        14px;
    margin-bottom:
        20px;
    color:
        #69b7ff;
    font-size:
        12px;
    font-weight:
        800;
    letter-spacing:
        .14em;
    text-transform:
        uppercase;
}

.hw-case-hero-grid {
    display:
        grid;
    grid-template-columns:
        minmax(0,1.25fr)
        minmax(300px,.75fr);
    gap:
        80px;
    align-items:
        end;
}

.hw-case-hero h1 {
    max-width:
        900px;
    margin:
        0;
    font-size:
        clamp(52px,7vw,96px);
    line-height:
        .92;
    letter-spacing:
        -.065em;
}

.hw-case-lead {
    max-width:
        760px;
    margin:
        28px 0 0;
    color:
        rgba(255,255,255,.7);
    font-size:
        19px;
    line-height:
        1.7;
}

.hw-case-hero-side {
    padding:
        28px;
    border:
        1px solid rgba(89,168,255,.19);
    border-radius:
        26px;
    background:
        linear-gradient(
            145deg,
            rgba(32,80,122,.18),
            rgba(255,255,255,.015)
        );
}

.hw-case-side-label {
    display:
        block;
    margin-bottom:
        22px;
    color:
        #a8ff00;
    font-size:
        10px;
    font-weight:
        900;
    letter-spacing:
        .15em;
}

.hw-case-domain {
    overflow-wrap:
        anywhere;
    color:
        rgba(255,255,255,.78);
    font-size:
        17px;
    line-height:
        1.5;
}

.hw-case-actions {
    display:
        flex;
    flex-wrap:
        wrap;
    gap:
        10px;
    margin-top:
        27px;
}

.hw-case-btn {
    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        center;
    gap:
        13px;
    min-height:
        50px;
    padding:
        0 22px;
    border:
        1px solid rgba(255,255,255,.14);
    border-radius:
        999px;
    background:
        rgba(255,255,255,.02);
    color:
        #fff;
    text-decoration:
        none;
    font-size:
        13px;
    font-weight:
        800;
    letter-spacing:
        .07em;
    transition:
        .22s ease;
}

.hw-case-btn:hover {
    transform:
        translateY(-2px);
    border-color:
        rgba(80,166,255,.75);
    box-shadow:
        0 0 30px rgba(60,145,255,.13);
}

.hw-case-btn-primary {
    color:
        #061000;
    border-color:
        #a8ff00;
    background:
        #a8ff00;
}


/* SCREENSHOT */

.hw-case-visual-section {
    padding:
        90px 0 110px;
    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.hw-case-browser {
    overflow:
        hidden;
    width:
        100%;
    border:
        1px solid rgba(255,255,255,.11);
    border-radius:
        24px;
    background:
        #0b0e10;
    box-shadow:
        0 40px 120px rgba(0,0,0,.34);
}

.hw-case-browser-top {
    display:
        grid;
    grid-template-columns:
        100px 1fr 100px;
    align-items:
        center;
    min-height:
        52px;
    padding:
        0 18px;
    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.hw-case-dots {
    display:
        flex;
    gap:
        7px;
}

.hw-case-dots i {
    width:
        8px;
    height:
        8px;
    border-radius:
        50%;
    background:
        rgba(255,255,255,.18);
}

.hw-case-url {
    overflow:
        hidden;
    text-align:
        center;
    text-overflow:
        ellipsis;
    white-space:
        nowrap;
    color:
        rgba(255,255,255,.42);
    font-size:
        12px;
}

.hw-case-desktop-shot {
    position:
        relative;
    overflow:
        hidden;
    aspect-ratio:
        16 / 9;
    background:
        #0b0d0e;
}

.hw-case-desktop-shot img {
    display:
        block;
    width:
        100%;
    height:
        100%;
    object-fit:
        cover;
    object-position:
        top center;
}


/* CONTENT */

.hw-case-section {
    padding:
        105px 0;
    border-bottom:
        1px solid rgba(255,255,255,.07);
    content-visibility:
        auto;
    contain-intrinsic-size:
        650px;
}

.hw-case-section-head {
    display:
        grid;
    grid-template-columns:
        180px minmax(0,1fr);
    gap:
        35px;
    margin-bottom:
        55px;
}

.hw-case-section-index {
    color:
        #69b7ff;
    font-size:
        11px;
    font-weight:
        900;
    letter-spacing:
        .15em;
}

.hw-case-section h2,
.hw-case-final h2,
.hw-case-related h2 {
    margin:
        0;
    font-size:
        clamp(38px,5vw,68px);
    line-height:
        .98;
    letter-spacing:
        -.05em;
}

.hw-case-about-grid {
    display:
        grid;
    grid-template-columns:
        .9fr 1.1fr;
    gap:
        80px;
}

.hw-case-about-grid > p {
    margin:
        0;
    color:
        rgba(255,255,255,.68);
    font-size:
        18px;
    line-height:
        1.75;
}

.hw-case-feature-list {
    display:
        grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    margin:
        0;
    padding:
        0;
    list-style:
        none;
}

.hw-case-feature-list li {
    display:
        flex;
    gap:
        14px;
    align-items:
        start;
    padding:
        18px 0;
    border-bottom:
        1px solid rgba(255,255,255,.08);
    color:
        rgba(255,255,255,.84);
    font-size:
        16px;
}

.hw-case-feature-list li:nth-child(odd) {
    margin-right:
        28px;
}

.hw-case-plus {
    color:
        #a8ff00;
    font-weight:
        900;
}

.hw-case-tech {
    display:
        flex;
    flex-wrap:
        wrap;
    gap:
        10px;
}

.hw-case-tech span {
    display:
        inline-flex;
    align-items:
        center;
    min-height:
        38px;
    padding:
        0 16px;
    border:
        1px solid rgba(255,255,255,.12);
    border-radius:
        999px;
    color:
        rgba(255,255,255,.7);
    font-size:
        13px;
    font-weight:
        700;
}


/* RELATED */

.hw-case-related {
    padding:
        105px 0;
    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.hw-case-related-grid {
    display:
        grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:
        1px;
    margin-top:
        50px;
    background:
        rgba(255,255,255,.08);
    border:
        1px solid rgba(255,255,255,.08);
}

.hw-case-related-card {
    min-height:
        230px;
    padding:
        28px;
    background:
        #06090a;
    color:
        #fff;
    text-decoration:
        none;
    transition:
        .22s ease;
}

.hw-case-related-card:hover {
    background:
        #091017;
}

.hw-case-related-card small {
    display:
        block;
    margin-bottom:
        55px;
    color:
        #69b7ff;
    font-size:
        10px;
    font-weight:
        900;
    letter-spacing:
        .14em;
}

.hw-case-related-card strong {
    display:
        block;
    font-size:
        24px;
    line-height:
        1.1;
}

.hw-case-related-card span {
    display:
        block;
    margin-top:
        18px;
    color:
        #a8ff00;
    font-size:
        12px;
    font-weight:
        800;
}


/* FINAL */

.hw-case-final {
    position:
        relative;
    overflow:
        hidden;
    padding:
        120px 0 135px;
}

.hw-case-final::after {
    content:
        "";
    position:
        absolute;
    width:
        500px;
    height:
        500px;
    right:
        -170px;
    bottom:
        -350px;
    border-radius:
        50%;
    box-shadow:
        0 0 180px rgba(40,139,255,.22);
}

.hw-case-final p {
    max-width:
        670px;
    margin:
        28px 0 35px;
    color:
        rgba(255,255,255,.62);
    font-size:
        18px;
    line-height:
        1.7;
}


/* ==========================================================
   PROJECTS INDEX CASE HUB
   ========================================================== */

.hw-case-index {
    padding:
        100px 24px;
    border-top:
        1px solid rgba(255,255,255,.07);
    background:
        #050708;
}

.hw-case-index-inner {
    width:
        min(1180px,100%);
    margin:
        0 auto;
}

.hw-case-index-head {
    display:
        grid;
    grid-template-columns:
        180px minmax(0,1fr);
    gap:
        30px;
    margin-bottom:
        50px;
}

.hw-case-index-head > span {
    color:
        #69b7ff;
    font-size:
        11px;
    font-weight:
        900;
    letter-spacing:
        .15em;
}

.hw-case-index-head h2 {
    margin:
        0;
    font-size:
        clamp(38px,5vw,68px);
    line-height:
        1;
    letter-spacing:
        -.05em;
}

.hw-case-index-grid {
    display:
        grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    border-top:
        1px solid rgba(255,255,255,.09);
    border-left:
        1px solid rgba(255,255,255,.09);
}

.hw-case-index-card {
    min-height:
        190px;
    padding:
        23px;
    border-right:
        1px solid rgba(255,255,255,.09);
    border-bottom:
        1px solid rgba(255,255,255,.09);
    color:
        #fff;
    text-decoration:
        none;
    transition:
        .2s ease;
}

.hw-case-index-card:hover {
    background:
        rgba(47,137,255,.055);
}

.hw-case-index-card small {
    display:
        block;
    margin-bottom:
        45px;
    color:
        #69b7ff;
    font-size:
        10px;
    font-weight:
        900;
    letter-spacing:
        .13em;
}

.hw-case-index-card strong {
    display:
        block;
    font-size:
        18px;
    line-height:
        1.25;
}

.hw-case-index-card span {
    display:
        block;
    margin-top:
        17px;
    color:
        #a8ff00;
    font-size:
        11px;
    font-weight:
        900;
}


/* MOBILE */

@media (max-width: 950px) {

    .hw-case-shell {
        width:
            min(100% - 32px,720px);
    }

    .hw-case-hero {
        padding:
            120px 0 70px;
    }

    .hw-case-hero-grid,
    .hw-case-about-grid {
        grid-template-columns:
            1fr;
        gap:
            40px;
    }

    .hw-case-section-head,
    .hw-case-index-head {
        grid-template-columns:
            1fr;
        gap:
            14px;
    }

    .hw-case-feature-list {
        grid-template-columns:
            1fr;
    }

    .hw-case-feature-list li:nth-child(odd) {
        margin-right:
            0;
    }

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

    .hw-case-index-grid {
        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 560px) {

    .hw-case-hero h1 {
        font-size:
            44px;
    }

    .hw-case-lead {
        font-size:
            17px;
    }

    .hw-case-section,
    .hw-case-related {
        padding:
            74px 0;
    }

    .hw-case-actions {
        display:
            grid;
    }

    .hw-case-btn {
        width:
            100%;
    }

    .hw-case-browser {
        border-radius:
            16px;
    }

    .hw-case-browser-top {
        grid-template-columns:
            70px 1fr 30px;
    }

    .hw-case-desktop-shot {
        aspect-ratio:
            4 / 3;
    }

    .hw-case-index {
        padding:
            75px 16px;
    }

    .hw-case-index-grid {
        grid-template-columns:
            1fr;
    }

}