/* ==========================================================================
   TOPPERWORK — HOME PAGE
   ==========================================================================
   Phase: 2D.1 / 2D.2 / 2D.3

   SYSTEM:
   - Global container: --container-max-width (1440px)
   - Hero image: full available viewport width
   - Hero content: 1440px container
   - Feature stats: 6-column desktop / stacked mobile
   - Dual user journey: 2-column desktop / stacked mobile
   - Journey images: responsive, minimal crop
   - WebView safe
   - Zoom friendly
   - No viewport-height dependency
   ========================================================================== */


/* ==========================================================================
   1. HERO FOUNDATION
   ========================================================================== */

.topperwork-home {

    position: relative;

    width: 100%;
    min-width: 0;

    min-height: 0;

    overflow: hidden;

    isolation: isolate;

    background:
        var(--color-background);

}


/* ==========================================================================
   2. HERO VISUAL
   ========================================================================== */

.topperwork-home__visual {

    position: absolute;

    inset: 0;

    width: 100%;

    height:
        clamp(
            560px,
            50vw,
            760px
        );

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
    border-radius: 0 0 24px 24px;

    background:
        var(--color-background);

}


/* ==========================================================================
   3. HERO IMAGE
   ========================================================================== */

.topperwork-home__visual-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    background-image:
        url(
            "/assets/images/homepage_images/hero-work-together.webp"
        );

    background-repeat:
        no-repeat;

    background-position:
        center center;

    background-size:
        cover;

    background-color:
        var(--color-background);

}

/* ============================================================
   TOPPERWORK HERO
   BALANCED LEFT / CLEAN CENTER / BALANCED RIGHT OVERLAY
   ============================================================ */

.topperwork-home__visual-overlay {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 10 !important;
    pointer-events: none !important;

    background:
    linear-gradient(
        90deg,

        /* ================= LEFT ================= */
        rgba(7, 17, 31, 1.00) 0%,
        rgba(7, 17, 31, 0.98) 10%,
        rgba(7, 17, 31, 0.90) 22%,
        rgba(7, 17, 31, 0.72) 34%,
        rgba(7, 17, 31, 0.48) 44%,
        rgba(7, 17, 31, 0.20) 52%,
        rgba(7, 17, 31, 0.00) 58%,

        /* ================= CLEAN CENTER ================= */
rgba(7, 17, 31, 0.00) 68%,
rgba(7, 17, 31, 0.00) 72%,

/* ================= RIGHT ================= */
rgba(7, 17, 31, 0.10) 88%,
rgba(7, 17, 31, 0.30) 92%,
rgba(7, 17, 31, 0.60) 95%,
rgba(7, 17, 31, 0.85) 98%,
rgba(7, 17, 31, 1.00) 100%
    ) !important;
}




.topperwork-home__visual-image {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 1 !important;

    background-image:
        linear-gradient(
            270deg,
            rgba(7, 17, 31, 0.30) 0%,
            rgba(7, 17, 31, 0.20) 12%,
            rgba(7, 17, 31, 0.10) 24%,
            rgba(7, 17, 31, 0.00) 42%
        ),
        url("/assets/images/homepage_images/hero-work-together.webp") !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-position:
        center center,
        center center !important;

    background-size:
        cover,
        cover !important;

}


/* ==========================================================================
   5. HERO CONTAINER
   ========================================================================== */

.topperwork-home__container {

    position: relative;
    

    z-index: 5;

    display: flex;

    flex-direction: column;

    width: 100%;

    max-width:
        var(--container-max-width);

    min-width: 0;

    min-height:
        clamp(
            560px,
            50vw,
            760px
        );

    margin:
        0 auto;

    padding-top:
        var(--space-6);

    padding-right:
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        );

    padding-bottom:
        var(--space-8);

    padding-left:
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        );

}


/* ==========================================================================
   6. HERO CONTENT
   ========================================================================== */

.topperwork-home__content {

    position: relative;

    z-index: 6;

    width: 100%;

    max-width:
        1000px;

    min-width: 0;

    margin: 0;

    padding: 0;

    text-align: left;

}


/* ==========================================================================
   7. HERO EYEBROW
   ========================================================================== */

.topperwork-home__eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 1 auto;

    min-width: 0;

    min-height: 42px;

    max-width: 100%;

    padding:
        var(--space-2)
        var(--space-4);

    border:
        1px solid
        rgba(148, 163, 184, 0.20);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            90deg,
            #050a6e 0%,
            #100c82 15%,
            #111f88 30%,
            #320798 45%,
            #460f98 70%,
            #5722a5 100%
        );

    color:
        #E0FFFF;

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);

    line-height:
        1;

    overflow:
        hidden;

    box-shadow:
        none;

    isolation:
        isolate;

}


/* ==========================================================================
   8. HERO TITLE
   ========================================================================== */

.topperwork-home__title {

    width: 100%;

    max-width:
        1000px;

    margin:
        var(--space-5)
        0
        0;

    color:
        var(--color-text-primary);

    font-family:
        var(--font-family-heading);

    font-size:
        clamp(
            3.5rem,
            4.6vw,
            5rem
        );

    font-weight:
        var(--font-weight-extrabold);

    line-height:
        0.98;

    letter-spacing:
        -0.045em;

}


/* ==========================================================================
   9. TITLE LINE
   ========================================================================== */

.topperwork-home__title-line {

    display: block;

    width: 100%;

    max-width: 100%;

    color:
        #E0FFFF;

}


/* ==========================================================================
   10. ACCENT TITLE
   ========================================================================== */

.topperwork-home__title-line--accent {

    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #00B8FF 0%,
            #258BFF 2%,
            #5B6FFF 5%,
            #8B5CF6 25%,
            #A855F7 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent;

    line-height:
        1.15;

    padding-bottom:
        0.08em;

}


/* ==========================================================================
   11. HERO SUBTITLE
   ========================================================================== */

.topperwork-home__subtitle {

    width: 100%;

    max-width:
        720px;

    margin:
        var(--space-5)
        0
        0;

    color:
        #e0ffff;

    font-size:
        20px;

    line-height:
        var(--line-height-relaxed);

}


/* ==========================================================================
   12. HERO FEE MESSAGE
   ========================================================================== */

#fee_client_freelancer {

    display: block;

    max-width: 100%;

    margin:
        var(--space-4)
        0
        0;

    padding: 0;

    color:
        #E0FFFF !important;

    font-weight:
        600;

    line-height:
        1.5;

    letter-spacing:
        0.01em;

}





/* ==========================================================================
   13. HERO ACTIONS
   ========================================================================== */

.topperwork-home__actions {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-wrap: wrap;

    gap:
        var(--space-3);

    width: 100%;

    min-width: 0;

    margin-top:
        var(--space-6);

}

.topperwork-home__actions .btn {

    min-height:
        52px;

    min-width: 0;
    border: none;

    background:
        linear-gradient(
            90deg,
            #050a6e 0%,
            #100c82 15%,
            #111f88 30%,
            #320798 45%,
            #460f98 70%,
            #5722a5 100%
        );

}


.topperwork-home__actions .btn:hover {

    background:
        linear-gradient(
            90deg,
            #050a6e 0%,
            #100c82 15%,
            #111f88 30%,
            #320798 45%,
            #460f98 70%,
            #5722a5 100%
        );

}


.topperwork-home__actions .btn i {

    margin-left:
        var(--space-2);

    transition:
        transform var(--transition-fast);

}


.topperwork-home__actions .btn:hover i {

    transform:
        translateX(3px);

}


/* ==========================================================================
   HERO — HIRE TALENT BUTTON
   ========================================================================== */

.topperwork-home__actions .btn-outline {

    background:
        green;

    color:
        #FFFFFF;

    box-shadow:
        0 8px 24px
        rgba(59, 130, 246, 0.22);

}


/* Hover */

.topperwork-home__actions .btn.btn-outline:hover {
    background:
        linear-gradient(
            135deg,
            #258FFF 0%,
            #5B6FFF 48%,
            #A855F7 100%
        ) !important;

    color:
        #FFFFFF !important;

    border-color:
        rgba(167, 139, 250, 0.75) !important;

    box-shadow:
        0 12px 30px
        rgba(91, 111, 255, 0.30);
}


/* Active / pressed */

.topperwork-home__actions .btn-outline:active {

    background:
        linear-gradient(
            135deg,
            #1D7FE5 0%,
            #465BE8 48%,
            #7C3AED 100%
        );

    color:
        #FFFFFF;

}


/* Focus */

.topperwork-home__actions .btn-outline:focus-visible {

    outline:
        2px solid
        #60A5FA;

    outline-offset:
        3px;

}


/* ==========================================================================
   14. HERO BOTTOM RAIL
   ========================================================================== */

.topperwork-home__bottom-rail {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    width: 100%;

    min-width: 0;

    margin-top:
        auto;

    padding-top:
        var(--space-6);

    gap:
        var(--space-3);

}


/* ==========================================================================
   15. RAIL ITEM
   ========================================================================== */

.topperwork-home__rail-item {

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    flex:
        0 1 auto;

    min-width: 0;

    color:
        rgba(224, 255, 255, 0.92);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-medium);

    line-height:
        1.3;

    white-space:
        nowrap;

}


/* ==========================================================================
   16. RAIL ICON
   ========================================================================== */

.topperwork-home__rail-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 27px;
    height: 27px;

    margin-right:
        var(--space-2);

    border-radius:
        50%;

    background:green;

    color:
        var(--color-primary-contrast);

    font-size:
        0.7rem;

}

#post-job-now {
    background: green !important;
    border-color: green !important;
    color: #FFFFFF !important;
}
#post-job-now:hover {
    background: #006400 !important;
    border-color: #006400 !important;
    color: #FFFFFF !important;
}


/* ==========================================================================
   17. RAIL DIVIDER
   ========================================================================== */

.topperwork-home__rail-divider {

    display: block;

    flex:
        0 0 1px;

    width: 1px;
    height: 28px;

    background:
        rgba(224, 255, 255, 0.32);

}


/* ==========================================================================
   18. REAL PEOPLE CARD
   ========================================================================== */

.topperwork-home__story-card {

    display: inline-flex;

    align-items: center;

    flex:
        0 1 auto;

    min-width: 0;

    gap:
        var(--space-3);

    padding:
        var(--space-2)
        var(--space-3);

    border:
        1px solid
        rgba(148, 163, 184, 0.20);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            90deg,
            #050a6e 0%,
            #100c82 15%,
            #111f88 30%,
            #320798 45%,
            #460f98 70%,
            #5722a5 100%
        );

    overflow:
        hidden;

    isolation:
        isolate;

}


.topperwork-home__story-card:hover {

    color:
        #FFFFFF;

    border-color:
        rgba(50, 21, 124, 0.979);

    background:
        rgba(30, 6, 90, 0.979);

}


/* ==========================================================================
   19. STORY AVATARS
   ========================================================================== */

.topperwork-home__story-avatars {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}


.topperwork-home__story-avatars span {

    display: block;

    width: 31px;
    height: 31px;
    
    overflow: hidden;

    margin-left:
        -7px;

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

    border-radius:
        50%;

    background:
        var(--gradient-primary);

}

.topperwork-home__story-avatars img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.topperwork-home__story-avatars span:first-child {

    margin-left:
        0;

}


/* ==========================================================================
   20. STORY COPY
   ========================================================================== */

.topperwork-home__story-copy {

    display: flex;

    flex-direction: column;

    min-width: 0;

    text-align: left;

    line-height:
        1.25;

}


.topperwork-home__story-copy strong {

    color:
        #FFFFFF;

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-semibold);

    white-space:
        nowrap;

}


.topperwork-home__story-copy span {

    color:
        rgba(224, 255, 255, 0.82);

    font-size:
        var(--font-size-xs);

    white-space:
        nowrap;

}


/* ==========================================================================
   21. WATCH STORY
   ========================================================================== */

.topperwork-home__story-action {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex:
        0 0 auto;

    gap:
        var(--space-3);

    min-height:
        48px;

    min-width: 0;

    padding:
        var(--space-2)
        var(--space-3);

    border:
        1px solid
        rgba(148, 163, 184, 0.20);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            90deg,
            #050a6e 0%,
            #100c82 15%,
            #111f88 30%,
            #320798 45%,
            #460f98 70%,
            #5722a5 100%
        );

    color:
        #FFFFFF;

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-semibold);

    white-space:
        nowrap;

    overflow:
        hidden;

}


.topperwork-home__story-action:hover {

    color:
        #FFFFFF;

    border-color:
        rgba(50, 21, 124, 0.979);

    background:
        rgba(30, 6, 90, 0.979);

}


/* ==========================================================================
   22. PLAY BUTTON
   ========================================================================== */

.topperwork-home__story-play {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 34px;
    height: 34px;

    border-radius:
        50%;

    background:
        var(--gradient-primary);

    color:
        var(--color-primary-contrast);

    font-size:
        0.7rem;

}


/* ==========================================================================
   23. HERO DESKTOP
   ========================================================================== */

@media (min-width: 900px) {

    .topperwork-home__visual {

        height:
            clamp(
                600px,
                50vw,
                760px
            );

    }


    .topperwork-home__container {

        min-height:
            clamp(
                600px,
                50vw,
                760px
            );

        padding-top:
            var(--space-8);

        padding-right:
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-right)
            );

        padding-bottom:
            var(--space-8);

        padding-left:
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-left)
            );

    }


    .topperwork-home__eyebrow {

        min-height:
            44px;

    }


    .topperwork-home__bottom-rail {

        position:
            absolute;

        left:
            var(--page-padding-desktop);

        right:
            var(--page-padding-desktop);

        bottom:
            var(--space-6);

        width:
            auto;

        margin-top:
            0;

        padding-top:
            0;

        justify-content:
            space-between;

        gap:
            var(--space-4);

    }

}


/* ==========================================================================
   24. LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1200px) {

    .topperwork-home__title-line:first-child {

        white-space:
            nowrap;

    }


    .topperwork-home__title {

        font-size:
            clamp(
                4rem,
                4.6vw,
                5rem
            );

    }


    .topperwork-home__rail-item {

        font-size:
            var(--font-size-sm);

    }

}


/* ==========================================================================
   25. VERY LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1440px) {

    .topperwork-home__visual,
    .topperwork-home__container {

        height:
            760px;

        min-height:
            760px;

    }


    .topperwork-home__title {

        font-size:
            5rem;

    }


    .topperwork-home__bottom-rail {

        bottom:
            var(--space-6);

        gap:
            var(--space-5);

    }

}


/* ==========================================================================
   26. TABLET / HIGH ZOOM
   ========================================================================== */

@media (min-width: 641px) and (max-width: 1199px) {

    .topperwork-home__visual {

        height:
            clamp(
                560px,
                50vw,
                720px
            );

    }


    .topperwork-home__container {

        min-height:
            clamp(
                560px,
                50vw,
                720px
            );

        padding-top:
            var(--space-7);

        padding-right:
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-right)
            );

        padding-bottom:
            var(--space-8);

        padding-left:
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-left)
            );

    }


    .topperwork-home__content {

        max-width:
            100%;

    }


    .topperwork-home__title {

        max-width:
            100%;

        font-size:
            clamp(
                3rem,
                7vw,
                4.25rem
            );

        line-height:
            1;

    }


    .topperwork-home__title-line:first-child {

        white-space:
            normal;

    }


    .topperwork-home__bottom-rail {

        position:
            relative;

        left: auto;
        right: auto;
        bottom: auto;

        width:
            100%;

        margin-top:
            var(--space-8);

        padding-top:
            0;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        justify-content:
            flex-start;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;

        overscroll-behavior-x:
            contain;

    }


    .topperwork-home__bottom-rail::-webkit-scrollbar {

        display:
            none;

    }


    .topperwork-home__rail-item,
    .topperwork-home__story-card,
    .topperwork-home__story-action {

        flex:
            0 0 auto;

    }

}


/* ==========================================================================
   27. TABLET
   ========================================================================== */

@media (min-width: 641px) and (max-width: 899px) {

    .topperwork-home__visual-image {

        background-position:
            64% center;

    }


    .topperwork-home__visual-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(7, 17, 31, 0.98) 0%,
                rgba(7, 17, 31, 0.90) 35%,
                rgba(7, 17, 31, 0.48) 62%,
                rgba(7, 17, 31, 0.05) 100%
            );

    }

}


/* ==========================================================================
   28. MOBILE HERO
   ========================================================================== */

@media (max-width: 640px) {

    .topperwork-home {

        min-height:
            0;

    }


    #fee_client_freelancer {

        text-align:
            center;

        line-height:
            1.45;

    }


    .topperwork-home__visual {

        height:
            clamp(
                620px,
                155vw,
                820px
            );

    }


    .topperwork-home__visual-image {

        background-position:
            64% center;
            /* Mobile hero image dim */
        background-blend-mode: multiply;
        background-color: rgba(7, 17, 31, 0.85);

    }


    .topperwork-home__visual-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(7, 17, 31, 0.98) 0%,
                rgba(7, 17, 31, 0.92) 32%,
                rgba(7, 17, 31, 0.68) 62%,
                rgba(7, 17, 31, 0.30) 100%
            );

    }


    .topperwork-home__container {

        min-height:
            0;

        padding-top:
            var(--space-6);

        padding-bottom:
            var(--space-8);

    }


    .topperwork-home__content {

        max-width:
            100%;

    }


    .topperwork-home__title {

        width:
            100%;

        max-width:
            100%;

        margin-top:
            var(--space-4);

        font-size:
            clamp(
                2.4rem,
                10vw,
                3.4rem
            );

        line-height:
            1;

        letter-spacing:
            -0.04em;

    }


    .topperwork-home__title-line {

        white-space:
            normal;

    }


    .topperwork-home__subtitle {

        max-width:
            100%;

        margin-top:
            var(--space-4);

        font-size:
            var(--font-size-sm);

        line-height:
            var(--line-height-relaxed);

    }


    .topperwork-home__actions {

        flex-direction:
            column;

        align-items:
            stretch;

        flex-wrap:
            nowrap;

        gap:
            var(--space-3);

        margin-top:
            var(--space-5);

    }


    .topperwork-home__actions .btn {

        width:
            100%;
        

    }


    .topperwork-home__bottom-rail {

        position:
            relative;

        left: auto;
        right: auto;
        bottom: auto;

        width:
            calc(
                100%
                + var(--page-padding-mobile)
            );

        margin-top:
            var(--space-8);

        padding-top:
            0;

        padding-right:
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-right)
            );

        justify-content:
            flex-start;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        padding-bottom:
            2px;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;

        overscroll-behavior-x:
            contain;

    }


    .topperwork-home__bottom-rail::-webkit-scrollbar {

        display:
            none;

    }


    .topperwork-home__rail-item {

        flex:
            0 0 auto;

        width:
            auto;

        min-width:
            max-content;

        white-space:
            nowrap;

    }


    .topperwork-home__story-card {

        flex:
            0 0 auto;

        width:
            max-content;

        min-width:
            max-content;

    }


    .topperwork-home__story-action {

        flex:
            0 0 auto;

        min-width:
            max-content;

    }

}


/* ==========================================================================
   29. VERY SMALL MOBILE HERO
   ========================================================================== */

@media (max-width: 380px) {

    .topperwork-home__visual {

        height:
            680px;

    }


    .topperwork-home__title {

        font-size:
            2.2rem;

    }


    .topperwork-home__eyebrow {

        min-height:
            38px;

        padding:
            var(--space-2)
            var(--space-3);

        font-size:
            var(--font-size-xs);

    }


    .topperwork-home__story-copy span {

        max-width:
            180px;

        white-space:
            normal;

    }

}


/* ==========================================================================
   ==========================================================================
   2D.2 — HERO FEATURE STATS
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   30. STATS SECTION
   ========================================================================== */

.topperwork-home-stats {

    position:
        relative;

    z-index:
        20;

    width:
        100%;

    min-width:
        0;

    /*
     * Positive offset = cards sit slightly lower than the Hero edge.
     * No negative margin / transform conflict.
     */
    top:
        24px;

    margin-top:
        0;

    padding:
        0
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        )
        var(--space-8)
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        );

}


/* ==========================================================================
   31. STATS CONTAINER
   ========================================================================== */

.topperwork-home-stats__container {

    width:
        100%;

    max-width:
        var(--container-max-width);

    min-width:
        0;

    margin:
        0 auto;

}


/* ==========================================================================
   32. STATS GRID
   ========================================================================== */

.topperwork-home-stats__grid {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        var(--space-3);

    width:
        100%;

    min-width:
        0;

}


/* ==========================================================================
   33. STATS CARD
   ========================================================================== */

.topperwork-home-stats__card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-width:
        0;

    min-height:
        178px;

    padding:
        var(--space-5);

    border:
        1px solid
        rgba(148, 163, 184, 0.18);

    border-top:
        2px solid
        rgba(59, 130, 246, 0.85);

    border-radius:
        var(--radius-lg);

    background:
        rgba(13, 25, 41, 0.96);

    color:
        #E0FFFF;

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, 0.22);

    overflow:
        hidden;

    isolation:
        isolate;

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        background-color var(--transition-normal),
        box-shadow var(--transition-normal);

}


/* ==========================================================================
   34. STATS CARD HOVER
   ========================================================================== */

.topperwork-home-stats__card:hover {

    transform:
        translateY(-3px);

    background:
        rgba(16, 30, 48, 0.98);

    border-color:
        rgba(96, 165, 250, 0.42);

    box-shadow:
        0 18px 42px
        rgba(0, 0, 0, 0.28);

}


/* ==========================================================================
   35. STATS ICON
   ========================================================================== */

.topperwork-home-stats__icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        52px;
    height:
        52px;

    margin-right:
        var(--space-4);

    border:
        1px solid
        rgba(59, 130, 246, 0.30);

    border-radius:
        var(--radius-md);

    background:
        rgba(59, 130, 246, 0.10);

    color:
        #39D8FF;

    font-size:
        1.15rem;

}


/* ==========================================================================
   36. STATS CONTENT
   ========================================================================== */

.topperwork-home-stats__content {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

}


/* ==========================================================================
   37. STATS MAIN VALUE
   ========================================================================== */

.topperwork-home-stats__content strong {

    display:
        block;

    margin:
        0;

    color:
        #E0FFFF;

    font-family:
        var(--font-family-heading);

    font-size:
        clamp(
            2rem,
            2.4vw,
            2.7rem
        );

    font-weight:
        var(--font-weight-extrabold);

    line-height:
        1;

    letter-spacing:
        -0.035em;

}


/* ==========================================================================
   38. TEXT VALUE
   ========================================================================== */

.topperwork-home-stats__value--text {

    font-size:
        clamp(
            1.65rem,
            2vw,
            2.2rem
        ) !important;

    line-height:
        0.98 !important;

}


/* ==========================================================================
   39. STATS TITLE
   ========================================================================== */

.topperwork-home-stats__title {

    display:
        block;

    margin-top:
        var(--space-2);

    color:
        #FFFFFF;

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);

    line-height:
        1.25;

}


/* ==========================================================================
   40. STATS DESCRIPTION
   ========================================================================== */

.topperwork-home-stats__description {

    display:
        block;

    margin-top:
        var(--space-2);

    color:
        rgba(224, 255, 255, 0.72);

    font-size:
        var(--font-size-xs);

    line-height:
        1.45;

}


/* ==========================================================================
   41. STATS COLORS
   ========================================================================== */

.topperwork-home-stats__card--success {

    border-top-color:
        #22C55E;

}


.topperwork-home-stats__card--success
.topperwork-home-stats__icon {

    color:
        #e0ffff;

    border-color:
        rgba(34, 197, 94, 0.30);

    background:#5D39D4;

}


.topperwork-home-stats__card--primary {

    border-top-color:
        #3B82F6;

}


.topperwork-home-stats__card--primary
.topperwork-home-stats__icon {

    color:
        #e0ffff;

    border-color:
        rgba(59, 130, 246, 0.32);

    background:#1E800D;

}


.topperwork-home-stats__card--purple {

    border-top-color:
        #8B5CF6;

}


.topperwork-home-stats__card--purple
.topperwork-home-stats__icon {

    color:
        #e0ffff;

    border-color:
        rgba(139, 92, 246, 0.32);

    background:
        #079133;

}


.topperwork-home-stats__card--warning {

    border-top-color:
        #228B22;

}


.topperwork-home-stats__card--warning
.topperwork-home-stats__icon {

    color:
        #e0ffff;

    border-color:
        rgba(245, 158, 11, 0.32);

    background:
        #150AF2;

}


.topperwork-home-stats__card--danger {

    border-top-color:
        #40E0D0;

}


.topperwork-home-stats__card--danger
.topperwork-home-stats__icon {

    color:
        #e0ffff;

    border-color:
        rgba(239, 68, 68, 0.32);

    background:
        green;

}


/* ==========================================================================
   42. STATS DESKTOP
   ========================================================================== */

@media (min-width: 900px) {

    .topperwork-home-stats {

        top:
            24px;

        padding:
            0
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-left)
            )
            var(--space-10)
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-stats__grid {

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

        gap:
            12px;

    }


    .topperwork-home-stats__card {

        min-height:
            178px;

        padding:
            var(--space-4);

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

    }


    .topperwork-home-stats__icon {

        width:
            46px;

        height:
            46px;

        margin-right:
            0;

        margin-bottom:
            var(--space-3);

    }


    .topperwork-home-stats__content strong {

        font-size:
            clamp(
                1.8rem,
                2vw,
                2.5rem
            );

    }


    .topperwork-home-stats__value--text {

        font-size:
            clamp(
                1.45rem,
                1.7vw,
                2rem
            ) !important;

    }


    .topperwork-home-stats__title {

        font-size:
            var(--font-size-xs);

    }


    .topperwork-home-stats__description {

        font-size:
            0.72rem;

    }

}


/* ==========================================================================
   43. LARGE DESKTOP STATS
   ========================================================================== */

@media (min-width: 1200px) {

    .topperwork-home-stats {

        top:
            24px;

    }


    .topperwork-home-stats__grid {

        gap:
            14px;

    }


    .topperwork-home-stats__card {

        min-height:
            182px;

        padding:
            var(--space-5);

    }


    .topperwork-home-stats__icon {

        width:
            50px;

        height:
            50px;

    }

}


/* ==========================================================================
   44. TABLET STATS
   ========================================================================== */

@media (min-width: 641px) and (max-width: 899px) {

    .topperwork-home-stats {

        top:
            16px;

        padding:
            0
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-left)
            )
            var(--space-8)
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-stats__grid {

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

        gap:
            var(--space-3);

    }


    .topperwork-home-stats__card {

        min-height:
            170px;

    }

}


/* ==========================================================================
   45. MOBILE STATS
   ========================================================================== */

@media (max-width: 640px) {

    .topperwork-home-stats {

        top:
            10px;

        padding:
            0
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-left)
            )
            var(--space-8)
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-stats__grid {

        grid-template-columns:
            1fr;

        gap:
            var(--space-3);

    }


    .topperwork-home-stats__card {

        width:
            100%;

        min-height:
            145px;

        padding:
            var(--space-5);

        flex-direction:
            row;

        align-items:
            center;

    }


    .topperwork-home-stats__icon {

        width:
            50px;

        height:
            50px;

        margin-right:
            var(--space-4);

        margin-bottom:
            0;

    }


    .topperwork-home-stats__content strong {

        font-size:
            2rem;

    }


    .topperwork-home-stats__value--text {

        font-size:
            1.7rem !important;

    }


    .topperwork-home-stats__title {

        font-size:
            var(--font-size-sm);

    }


    .topperwork-home-stats__description {

        font-size:
            var(--font-size-xs);

    }

}


/* ==========================================================================
   46. VERY SMALL MOBILE STATS
   ========================================================================== */

@media (max-width: 380px) {

    .topperwork-home-stats {

        top:
            8px;

    }


    .topperwork-home-stats__card {

        min-height:
            132px;

        padding:
            var(--space-4);

    }


    .topperwork-home-stats__icon {

        width:
            44px;

        height:
            44px;

        margin-right:
            var(--space-3);

    }


    .topperwork-home-stats__content strong {

        font-size:
            1.75rem;

    }


    .topperwork-home-stats__value--text {

        font-size:
            1.45rem !important;

    }

}


/* ==========================================================================
   ==========================================================================
   2D.3 — DUAL USER EXPERIENCE
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   47. JOURNEY SECTION
   ========================================================================== */

.topperwork-home-journeys {

    width:
        100%;

    min-width:
        0;

    /*
     * Small top spacing after Stats.
     * Bottom spacing is intentionally moderate.
     */
    padding:
        var(--space-2)
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        )
        var(--space-4)
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        );

    background:
        var(--color-background);

}


/* ==========================================================================
   48. JOURNEY CONTAINER
   ========================================================================== */

.topperwork-home-journeys__container {

    width:
        100%;

    max-width:
        var(--container-max-width);

    min-width:
        0;

    margin:
        0 auto;

}


/* ==========================================================================
   49. JOURNEY GRID
   ========================================================================== */

.topperwork-home-journeys__grid {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        var(--space-4);

    width:
        100%;

    min-width:
        0;

}


/* ==========================================================================
   50. JOURNEY CARD
   ========================================================================== */

.topperwork-home-journey-card {

    position:
        relative;

    width:
        100%;

    min-width:
        0;

    /*
     * Source image ratio.
     *
     * Keeping the card close to the source ratio prevents
     * aggressive background-image enlargement.
     */
    aspect-ratio:
        1600 / 970;

    overflow:
        hidden;

    border:
        2px solid
        rgb(20, 61, 132);

    border-radius:
        var(--radius-lg);

    background:
        #07111F;

    isolation:
        isolate;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.24);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);

}


/* ==========================================================================
   51. JOURNEY IMAGE
   ========================================================================== */

.topperwork-home-journey-card__image {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    z-index:
        0;

    background-repeat:
        no-repeat;

    /*
     * Cover is used because the image must fill the card.
     * Card ratio stays close to the image ratio to minimize crop.
     */
    background-size:
        cover;

    background-position:
        center center;

    pointer-events:
        none;

}


/* ==========================================================================
   52. FREELANCER IMAGE
   ========================================================================== */

.topperwork-home-journey-card--freelancer
.topperwork-home-journey-card__image {

    background-image:
        url(
            "/assets/images/homepage_images/freelancer-journey.webp"
        );

}


/* ==========================================================================
   53. CLIENT IMAGE
   ========================================================================== */

.topperwork-home-journey-card--client
.topperwork-home-journey-card__image {

    background-image:
        url(
            "/assets/images/homepage_images/client-journey.webp"
        );

}


/* ==========================================================================
   54. JOURNEY OVERLAY
   ========================================================================== */

.topperwork-home-journey-card__overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(4, 12, 28, 0.98) 0%,
            rgba(4, 12, 28, 0.94) 24%,
            rgba(4, 12, 28, 0.78) 42%,
            rgba(4, 12, 28, 0.40) 62%,
            rgba(4, 12, 28, 0.08) 82%,
            rgba(4, 12, 28, 0.00) 100%
        );

}


/* ==========================================================================
   55. JOURNEY CONTENT
   ========================================================================== */

.topperwork-home-journey-card__content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    width: 100%;

    max-width: 58%;

    min-width: 0;

    height: 100%;

    padding: 24px;

}


/* ==========================================================================
   56. JOURNEY EYEBROW
   ========================================================================== */

.topperwork-home-journey-card__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        30px;

    padding:
        var(--space-1)
        var(--space-3);

    border:
        1px solid
        rgba(59, 130, 246, 0.45);

    border-radius:
        var(--radius-full);

    background:
        rgba(14, 116, 230, 0.16);

    color:
        #60A5FA;

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-bold);

    line-height:
        1;

    letter-spacing:
        0.04em;

}


/* ==========================================================================
   57. JOURNEY HEADING
   ========================================================================== */

.topperwork-home-journey-card__content h2 {

    margin:
        8px 0 0;

    color:
        #e0ffff;

    font-family:
        var(--font-family-heading);

    font-size:
        clamp(
            1.75rem,
            2.15vw,
            2.15rem
        );

    font-weight:
        var(--font-weight-extrabold);

    line-height:
        1.05;

    letter-spacing:
        -0.035em;

}


/* ==========================================================================
   58. JOURNEY INTRO
   ========================================================================== */

.topperwork-home-journey-card__intro {

    max-width:
        540px;

    margin:
        8px 0 0;

    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        var(--font-size-sm);

    line-height:
        1.35;

}


/* ==========================================================================
   59. JOURNEY FEATURES
   ========================================================================== */

.topperwork-home-journey-card__features {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    width:
        100%;

    margin:
        10px 0 0;

    padding:
        0;

    list-style:
        none;

}



/* ==========================================================================
   TOPPERWORK — 2D.3 JOURNEY CARDS
   FINAL CLEAN LAYOUT
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESKTOP
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {

    .topperwork-home-journey-card {

        /*
         * KEEP THE ORIGINAL IMAGE/CARD RATIO.
         * DO NOT CHANGE IMAGE CROPPING.
         */
        aspect-ratio:
            1600 / 970;

    }


    .topperwork-home-journey-card__content {

        max-width:
            58%;

        height:
            100%;

        padding:
            24px;

    }


    .topperwork-home-journey-card__content h2 {

        margin:
            8px 0 0;

        font-size:
            clamp(
                1.75rem,
                2.15vw,
                2.15rem
            );

        line-height:
            1.02;

    }


    .topperwork-home-journey-card__intro {

        margin-top:
            8px;

        font-size:
            0.78rem;

        line-height:
            1.3;

    }


    .topperwork-home-journey-card__features {

        gap:
            3px;

        margin-top:
            9px;

    }


    .topperwork-home-journey-card__features li {

        font-size:
            0.68rem;

        line-height:
            1.15;

    }


    .topperwork-home-journey-card__features li i {

        width:
            16px;

        height:
            16px;

        margin-right:
            6px;

        font-size:
            0.52rem;

    }


    .topperwork-home-journey-card__content .btn {

        min-height:
            40px;

        margin-top:
            9px;

        padding:
            7px 14px;

        font-size:
            0.72rem;

    }

}


/* --------------------------------------------------------------------------
   LARGE DESKTOP
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {

    .topperwork-home-journey-card__content {

        padding:
            24px;

    }


    .topperwork-home-journey-card__content h2 {

        font-size:
            clamp(
                1.8rem,
                2.1vw,
                2.2rem
            );

    }

}


/* --------------------------------------------------------------------------
   TABLET / HIGH ZOOM
   -------------------------------------------------------------------------- */

@media (min-width: 641px) and (max-width: 899px) {

    .topperwork-home-journey-card {

        aspect-ratio:
            1600 / 970;

    }


    .topperwork-home-journey-card__content {

        max-width:
            62%;

        height:
            100%;

        padding:
            20px;

    }


    .topperwork-home-journey-card__content h2 {

        margin-top:
            6px;

        font-size:
            clamp(
                1.55rem,
                3vw,
                2rem
            );

        line-height:
            1.04;

    }


    .topperwork-home-journey-card__intro {

        margin-top:
            7px;

        font-size:
            0.72rem;

        line-height:
            1.3;

    }


    .topperwork-home-journey-card__features {

        gap:
            3px;

        margin-top:
            8px;

    }


    .topperwork-home-journey-card__features li {

        font-size:
            0.64rem;

    }


    .topperwork-home-journey-card__content .btn {

        min-height:
            38px;

        margin-top:
            8px;

        padding:
            6px 12px;

        font-size:
            0.68rem;

    }

}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

    .topperwork-home-journey-card {

        /*
         * Mobile cards stack vertically.
         * Keep the original visual ratio.
         */
        aspect-ratio:
            16 / 10;

    }


    .topperwork-home-journey-card__content {

        max-width:
            68%;

        height:
            100%;

        padding:
            16px;

    }


    .topperwork-home-journey-card__content h2 {

        margin-top:
            6px;

        font-size:
            clamp(
                1.25rem,
                5.2vw,
                1.7rem
            );

        line-height:
            1.03;

    }


    .topperwork-home-journey-card__intro {

        margin-top:
            6px;

        font-size:
            0.64rem;

        line-height:
            1.25;

    }


    .topperwork-home-journey-card__features {

        gap:
            2px;

        margin-top:
            7px;

    }


    .topperwork-home-journey-card__features li {

        font-size:
            0.61rem;

        line-height:
            1.15;

    }


    .topperwork-home-journey-card__features li i {

        width:
            14px;

        height:
            14px;

        margin-right:
            5px;

        font-size:
            0.46rem;

    }


    .topperwork-home-journey-card__content .btn {

        min-height:
            36px;

        margin-top:
            7px;

        padding:
            5px 10px;

        font-size:
            0.64rem;

    }

}


/* --------------------------------------------------------------------------
   VERY SMALL MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {

    .topperwork-home-journey-card__content {

        max-width:
            70%;

        padding:
            13px;

    }


    .topperwork-home-journey-card__content h2 {

        font-size:
            1.15rem;

    }


    .topperwork-home-journey-card__intro {

        font-size:
            0.59rem;

    }


    .topperwork-home-journey-card__features li {

        font-size:
            0.56rem;

    }


    .topperwork-home-journey-card__content .btn {

        min-height:
            34px;

        padding:
            4px 9px;

        font-size:
            0.60rem;

    }

}









/* ==========================================================================
   60. FEATURE ITEM
   ========================================================================== */

.topperwork-home-journey-card__features li {

    display:
        flex;

    align-items:
        center;

    min-width:
        0;

    color:
        rgba(255, 255, 255, 0.92);

    font-size:
        0.72rem;

    line-height:
        1.15;

}







/* ==========================================================================
   61. FEATURE CHECK
   ========================================================================== */

.topperwork-home-journey-card__features li i {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        18px;

    height:
        18px;

    margin-right:
        var(--space-2);

    border-radius:
        50%;

    background:
        #2196FF;

    color:
        #FFFFFF;

    font-size:
        0.58rem;

}


/* ==========================================================================
   62. JOURNEY BUTTON
   ========================================================================== */

.topperwork-home-journey-card__content .btn {

    margin-top:
        10px;

    min-height:
        42px;

}


/* ==========================================================================
   63. JOURNEY HOVER
   ========================================================================== */

.topperwork-home-journey-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(96, 165, 250, 0.48);

    box-shadow:
        0 24px 55px
        rgba(0, 0, 0, 0.30);

}


/* ==========================================================================
   64. JOURNEY DESKTOP
   ========================================================================== */

@media (min-width: 900px) {

    .topperwork-home-journeys {

        padding:
            var(--space-2)
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-left)
            )
            var(--space-4)
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-journeys__grid {

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

        gap:
            14px;

    }


    .topperwork-home-journey-card__content {

        max-width:
            58%;

        padding:
            30px;

    }


    .topperwork-home-journey-card__content h2 {

        font-size:
            clamp(
                2rem,
                2.5vw,
                2.6rem
            );

    }

}


/* ==========================================================================
   65. TABLET / HIGH ZOOM
   ========================================================================== */

@media (min-width: 641px) and (max-width: 899px) {

    .topperwork-home-journeys {

        padding:
            var(--space-2)
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-left)
            )
            var(--space-4)
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-journeys__grid {

        grid-template-columns:
            1fr;

        gap:
            var(--space-4);

    }


    .topperwork-home-journey-card__content {

        max-width:
            62%;

        padding:
            var(--space-6);

    }


    .topperwork-home-journey-card__content h2 {

        font-size:
            clamp(
                1.7rem,
                3vw,
                2.3rem
            );

    }

}


/* ==========================================================================
   66. MOBILE JOURNEY
   ========================================================================== */

@media (max-width: 640px) {

    .topperwork-home-journeys {

        padding:
            var(--space-2)
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-left)
            )
            var(--space-4)
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-journeys__grid {

        grid-template-columns:
            1fr;

        gap:
            var(--space-4);

    }


    .topperwork-home-journey-card {

        /*
         * Mobile stays landscape.
         *
         * This is intentionally NOT a tall 430px / 460px card.
         * A tall card causes excessive background-image cropping.
         */
        aspect-ratio:
        auto;

    min-height:
        300px;

    }


    .topperwork-home-journey-card__image {

        /*
         * Keep the people visible while filling the card.
         */
        background-position:
            72% center;

    }


    .topperwork-home-journey-card__overlay {

        background:
            linear-gradient(
                90deg,
                rgba(4, 12, 28, 0.98) 0%,
                rgba(4, 12, 28, 0.92) 34%,
                rgba(4, 12, 28, 0.68) 58%,
                rgba(4, 12, 28, 0.22) 82%,
                rgba(4, 12, 28, 0.00) 100%
            );

    }


    .topperwork-home-journey-card__content {

        max-width:
            68%;

        height:
            100%;

        padding:
            18px;

    }


    .topperwork-home-journey-card__eyebrow {

        min-height:
            26px;

        padding:
            4px 8px;

        font-size:
            0.65rem;

    }


    .topperwork-home-journey-card__content h2 {

        font-size:
            clamp(
                1.35rem,
                5.5vw,
                1.85rem
            );

        line-height:
            1.04;

    }


    .topperwork-home-journey-card__intro {

        margin-top:
            var(--space-2);

        font-size:
            0.68rem;

        line-height:
            1.3;

    }


    .topperwork-home-journey-card__features {

        gap:
            3px;

        margin-top:
            var(--space-3);

    }


    .topperwork-home-journey-card__features li {

        font-size:
            0.66rem;

        line-height:
            1.2;

    }


    .topperwork-home-journey-card__features li i {

        width:
            15px;

        height:
            15px;

        margin-right:
            5px;

        font-size:
            0.48rem;

    }


    .topperwork-home-journey-card__content .btn {

        min-height:
            38px;

        margin-top:
            var(--space-3);

        padding:
            6px 12px;

        font-size:
            0.68rem;

    }

}


/* ==========================================================================
   67. VERY SMALL MOBILE JOURNEY
   ========================================================================== */

@media (max-width: 380px) {

    .topperwork-home-journey-card {

        aspect-ratio:
            16 / 10;

    }


    .topperwork-home-journey-card__image {

        background-position:
            74% center;

    }


    .topperwork-home-journey-card__content {

        max-width:
            70%;

        padding:
            14px;

    }


    .topperwork-home-journey-card__eyebrow {

        min-height:
            24px;

        padding:
            3px 7px;

        font-size:
            0.60rem;

    }


    .topperwork-home-journey-card__content h2 {

        font-size:
            1.22rem;

    }


    .topperwork-home-journey-card__intro {

        font-size:
            0.63rem;

    }


    .topperwork-home-journey-card__features {

        gap:
            2px;

    }


    .topperwork-home-journey-card__features li {

        font-size:
            0.59rem;

    }


    .topperwork-home-journey-card__features li i {

        width:
            13px;

        height:
            13px;

        margin-right:
            4px;

    }


    .topperwork-home-journey-card__content .btn {

        min-height:
            35px;

        padding:
            5px 9px;

        font-size:
            0.62rem;

    }

}


/* ==========================================================================
   68. JOURNEY WIDTH / OVERFLOW SAFETY
   ========================================================================== */

.topperwork-home-journeys,
.topperwork-home-journeys__container,
.topperwork-home-journeys__grid,
.topperwork-home-journey-card,
.topperwork-home-journey-card__content,
.topperwork-home-journey-card__intro,
.topperwork-home-journey-card__features {

    min-width:
        0;

    box-sizing:
        border-box;

}

/* ==========================================================================
   ==========================================================================
   2D.2 — MARKETPLACE VALUE
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   69. VALUE SECTION
   ========================================================================== */

.topperwork-home-value {

    width: 100%;
    min-width: 0;

    margin: 0;

    padding:
        32px
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        )
        32px
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        );

    /*
     * Keep the same dark background language as the surrounding
     * homepage sections.
     */

   

}


/* ==========================================================================
   TOPPERWORK HOME VALUE — FULL WIDTH HEADING CARD
   ========================================================================== */

.topperwork-home-value__heading {
    width: 100% !important;
    max-width: none !important;

    margin: 4px 0 !important;

    padding: 15px !important;

    box-sizing: border-box !important;

    background: linear-gradient(
        145deg,
        #0b192d,
        #0b1a2e,
        #18092d
    ) !important;

    border: 1px solid #0b2948 !important;
    border-radius: 14px !important;

    color: #e0ffff !important;
}

.topperwork-home-value__eyebrow {
    display: inline-block !important;

    margin-top: 15px !important;

    color: #e0ffff !important;
}

.topperwork-home-value__heading h2 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;

    color: #e0ffff !important;
}

.topperwork-home-value__heading p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    color: #e0ffff !important;
}


/* ==========================================================================
   70. VALUE CONTAINER
   ========================================================================== */

.topperwork-home-value__container {

    width: 100%;
    max-width: var(--container-max-width);
    min-width: 0;

    margin: 0 auto;

}


/* ==========================================================================
   71. VALUE HEADING
   ========================================================================== */

.topperwork-home-value__heading {

    width: 100%;
    max-width: 820px;

    margin:
        0 auto
        28px;

    text-align: center;

}


.topperwork-home-value__eyebrow {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 32px;

    margin: 0;

    padding:
        6px
        14px;

    border:
        1px solid
        rgba(59, 130, 246, 0.30);

    border-radius:
        var(--radius-full);

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.16),
            rgba(139, 92, 246, 0.16)
        );

    color:
        #60A5FA;

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-semibold);

}


.topperwork-home-value__heading h2 {

    margin:
        14px 0 0;

    color:
        #E0FFFF;

    text-align:
        center;

}


.topperwork-home-value__heading p {

    max-width:
        720px;

    margin:
        10px auto 0;

    color:
        #E0FFFF;

    line-height:
        1.6;

    text-align:
        center;

}


/* ==========================================================================
   72. VALUE GRID
   ========================================================================== */

.topperwork-home-value__grid {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        10px;

    width:
        100%;

}


/* ==========================================================================
   73. VALUE CARD
   ========================================================================== */

.topperwork-home-value__card {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    /*
     * Keep approximately 4px visual breathing space at the
     * top and bottom of the content area.
     */

    padding:
        15px;

    border:
        1px solid
        #0B2948;

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #0B192D,
            #0B1A2E,
            #18092D
        );

    overflow:
        hidden;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;

}


.topperwork-home-value__card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(59, 130, 246, 0.55);

    background:
        linear-gradient(
            145deg,
            #0B1F3A,
            #102D50,
            #241044
        );

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.22);

}


/* ==========================================================================
   74. VALUE LABEL
   ========================================================================== */

.topperwork-home-value__label {

    display:
        inline-flex;

    align-items:
        center;

    align-self:
        flex-start;

    min-height:
        24px;

    margin:
        0 0 8px;

    padding:
        4px 9px;

    border:
        1px solid
        rgba(59, 130, 246, 0.30);

    border-radius:
        var(--radius-full);

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.13),
            rgba(139, 92, 246, 0.13)
        );

    color:
        #60A5FA;

    font-size:
        11px;

    font-weight:
        var(--font-weight-semibold);

    line-height:
        1.2;

}


/* ==========================================================================
   75. VALUE ICON
   ========================================================================== */

.topperwork-home-value__icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        42px;

    height:
        42px;

    margin:
        0 0 10px;

    border:
        1px solid
        rgba(59, 130, 246, 0.35);

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.18),
            rgba(139, 92, 246, 0.18)
        );

    color:
        #3B82F6;

    font-size:
        1rem;

    box-shadow:
        inset 0 0 18px
        rgba(59, 130, 246, 0.05);

}


/* ==========================================================================
   76. VALUE CARD HEADING
   ========================================================================== */

.topperwork-home-value__card h3 {

    margin:
        0;

    color:
        #E0FFFF;

    font-size:
        1.05rem;

    line-height:
        1.25;

}


/* ==========================================================================
   77. VALUE CARD DESCRIPTION
   ========================================================================== */

.topperwork-home-value__card p {

    margin:
        8px 0 0;

    color:
        #E0FFFF;

    font-size:
        0.875rem;

    line-height:
        1.5;

}


/* ==========================================================================
   78. VALUE TABLET
   ========================================================================== */

@media (min-width: 641px) {

    .topperwork-home-value {

        padding:
            36px
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-right)
            )
            36px
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-left)
            );

    }


    .topperwork-home-value__heading {

        margin-bottom:
            28px;

    }


    .topperwork-home-value__grid {

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

        gap:
            10px;

    }

}


/* ==========================================================================
   79. VALUE DESKTOP
   ========================================================================== */

@media (min-width: 900px) {

    .topperwork-home-value {

        padding:
            6px
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-right)
            )
            40px
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-left)
            );

    }


    .topperwork-home-value__heading {

        margin-bottom:
            28px;

    }


    .topperwork-home-value__grid {

        gap:
            10px;

    }


    .topperwork-home-value__card {

        padding:
            15px;

    }

}


/* ==========================================================================
   80. VALUE LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1200px) {

    .topperwork-home-value__grid {

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

    }

}


/* ==========================================================================
   81. VALUE MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .topperwork-home-value {

        padding:
            28px
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-right)
            )
            28px
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-left)
            );

    }


    .topperwork-home-value__heading {

        margin-bottom:
            22px;

    }


    .topperwork-home-value__heading h2 {

        margin-top:
            12px;

    }


    .topperwork-home-value__heading p {

        margin-top:
            8px;

    }


    .topperwork-home-value__grid {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    .topperwork-home-value__card {

        padding:
            15px;

    }


    .topperwork-home-value__icon {

        width:
            40px;

        height:
            40px;

        margin-bottom:
            9px;

    }


    .topperwork-home-value__card h3 {

        font-size:
            1rem;

    }


    .topperwork-home-value__card p {

        font-size:
            0.84rem;

        line-height:
            1.45;

    }

}


/* ==========================================================================
   82. VALUE REDUCED MOTION
   ========================================================================== */

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

    .topperwork-home-value__card {

        transition:
            none;

    }

}


/* ==========================================================================
   81. GLOBAL WIDTH / OVERFLOW SAFETY
   ========================================================================== */

.topperwork-home,
.topperwork-home__visual,
.topperwork-home__visual-image,
.topperwork-home__visual-overlay,
.topperwork-home__container,
.topperwork-home__content,
.topperwork-home__title,
.topperwork-home__subtitle,
.topperwork-home__actions,
.topperwork-home__bottom-rail,
.topperwork-home-stats,
.topperwork-home-stats__container,
.topperwork-home-stats__grid,
.topperwork-home-stats__card,
.topperwork-home-stats__content,
.topperwork-home-value,
.topperwork-home-value__container,
.topperwork-home-value__grid,
.topperwork-home-value__card {

    min-width:
        0;

    box-sizing:
        border-box;

}


/* ==========================================================================
   82. REDUCED MOTION
   ========================================================================== */

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

    .topperwork-home__actions .btn i,
    .topperwork-home-stats__card,
    .topperwork-home-value__card,
    .topperwork-home-journey-card {

        transition:
            none;

    }


    .topperwork-home__actions .btn:hover i,
    .topperwork-home-stats__card:hover,
    .topperwork-home-value__card:hover,
    .topperwork-home-journey-card:hover {

        transform:
            none;

    }

}
/* ==========================================================================
   ==========================================================================
   TOPPERWORK — PHASE 2D.4
   HOW TOPPERWORK WORKS + POPULAR JOB CATEGORIES
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   1. SHARED SECTION FOUNDATION
   ========================================================================== */

.topperwork-home-how-it-works,
.topperwork-home-categories {

    width:
        100%;

    min-width:
        0;

    background:
        var(--color-background);

}

.topperwork-home-how-it-works__container {
    background:
        linear-gradient(
            145deg,
            #0b192d,
            #0b1a2e,
            #18092d
        );
    padding: 15px;

    border: 1px solid #0b2948;
    border-radius: 14px;
}


.topperwork-home-how-it-works__container,
.topperwork-home-categories__container {

    width:
        100%;

    max-width:
        var(--container-max-width);

    min-width:
        0;

    margin:
        0 auto;

}


/* ==========================================================================
   2. HOW IT WORKS SECTION
   ========================================================================== */

.topperwork-home-how-it-works {

    padding:
        20px
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        )
        10px
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        );

}


/* ==========================================================================
   3. HOW IT WORKS HEADER
   ========================================================================== */

.topperwork-home-how-it-works__header {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-bottom:
        10px;

    text-align:
        center;

}


.topperwork-home-how-it-works__heading {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    min-width:
        0;

}


.topperwork-home-how-it-works__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        26px;

    padding:
        4px 12px;

    border:
        1px solid
        rgba(59, 130, 246, 0.30);

    border-radius:
        var(--radius-full);

    background:
        linear-gradient(
            135deg,
            rgba(33, 150, 243, 0.12),
            rgba(139, 92, 246, 0.12)
        );

    color:
        #60A5FA;

    font-size:
        0.72rem;

    font-weight:
        var(--font-weight-semibold);

}


.topperwork-home-how-it-works__heading h2 {

    margin:
        8px 0 0;

    color:#e0ffff;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.5rem
        );

    line-height:
        1.05;

    text-align:
        center;

}


.topperwork-home-how-it-works__heading p {

    max-width:
        680px;

    margin:
        7px auto 0;

    color:#e0ffff;

    font-size:
        var(--font-size-sm);

    line-height:
        1.45;

    text-align:
        center;

}


.topperwork-home-how-it-works__link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        36px;

    color:
        var(--color-primary);

    font-size:
        0.78rem;

    font-weight:
        var(--font-weight-semibold);

    text-decoration:
        none;

}


.topperwork-home-how-it-works__link i {

    transition:
        transform var(--transition-fast);

}


.topperwork-home-how-it-works__link:hover i {

    transform:
        translateX(4px);

}


/* ==========================================================================
   4. HOW IT WORKS — DESKTOP STEP LAYOUT
   ========================================================================== */

.topperwork-home-how-it-works__steps {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        10px;

    width:
        100%;

}


/* ==========================================================================
   5. HOW IT WORKS — STEP CARD
   ========================================================================== */

.topperwork-home-how-it-works__step {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    min-width:
        0;

    min-height:
        190px;

    padding:
        20px
        14px;

    border:
        1px solid
        rgba(59, 130, 246, 0.25);

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 54, 104, 0.92) 0%,
            rgba(11, 37, 73, 0.94) 48%,
            rgba(42, 25, 83, 0.94) 100%
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.035),
        0 10px 28px
        rgba(0, 0, 0, 0.14);

    text-align:
        center;

    transition:
        transform var(--transition-normal),
        background var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);

}


/* ==========================================================================
   6. STEP CARD HOVER
   ========================================================================== */

.topperwork-home-how-it-works__step:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(96, 165, 250, 0.58);

    background:
        linear-gradient(
            145deg,
            #0B3D78 0%,
            #075DB0 52%,
            #38A7FF 100%
        );

    box-shadow:
        0 14px 36px
        rgba(14, 116, 216, 0.24),
        inset 0 1px 0
        rgba(255, 255, 255, 0.08);

}


/* ==========================================================================
   7. STEP ICON
   ========================================================================== */

.topperwork-home-how-it-works__icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        58px;

    height:
        58px;

    border:
        2px solid
        #2196FF;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            rgba(33, 150, 243, 0.16),
            rgba(139, 92, 246, 0.18)
        );

    color:
        #60A5FA;

    font-size:
        1.15rem;

    box-shadow:
        0 0 22px
        rgba(33, 150, 243, 0.14);

}


.topperwork-home-how-it-works__step:nth-of-type(5)
.topperwork-home-how-it-works__icon {

    border-color:
        #8B5CF6;

    color:
        #A78BFA;

}


/* ==========================================================================
   8. STEP NUMBER
   ========================================================================== */

.topperwork-home-how-it-works__number {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        23px;

    height:
        23px;

    margin-top:
        -7px;

    border:
        2px solid
        #07111F;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #2196FF,
            #4F7CFF
        );

    color:
        #FFFFFF;

    font-size:
        0.65rem;

    font-weight:
        700;

}


/* ==========================================================================
   9. STEP TITLE
   ========================================================================== */

.topperwork-home-how-it-works__step h3 {

    margin:
        9px 0 0;

    color:
        #FFFFFF;

    font-size:
        0.95rem;

    font-weight:
        var(--font-weight-bold);

    line-height:
        1.2;

}


/* ==========================================================================
   10. STEP DESCRIPTION
   ========================================================================== */

.topperwork-home-how-it-works__step p {

    max-width:
        190px;

    margin:
        7px auto 0;

    color:
        rgba(255, 255, 255, 0.76);

    font-size:
        0.72rem;

    line-height:
        1.4;

}


/* ==========================================================================
   11. CONNECTOR ARROW
   ========================================================================== */

.topperwork-home-how-it-works__connector {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #2196FF;

    font-size:
        1.1rem;

}


.topperwork-home-how-it-works__connector i {

    filter:
        drop-shadow(
            0 0 7px
            rgba(33, 150, 243, 0.35)
        );

}


/* ==========================================================================
   12. HOW IT WORKS — DESKTOP
   ========================================================================== */

@media (min-width: 900px) {

    .topperwork-home-how-it-works {

        padding:
            6px
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-left)
            )
            6px
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-how-it-works__header {

        margin-bottom:
            14px;

    }


    .topperwork-home-how-it-works__steps {

        grid-template-columns:
            minmax(0, 1fr)
            32px
            minmax(0, 1fr)
            32px
            minmax(0, 1fr)
            32px
            minmax(0, 1fr)
            32px
            minmax(0, 1fr);

        gap:
            6px;

        align-items:
            stretch;

    }


    .topperwork-home-how-it-works__step {

        min-height:
            190px;

    }

}


/* ==========================================================================
   13. LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1200px) {

    .topperwork-home-how-it-works__steps {

        gap:
            8px;

    }


    .topperwork-home-how-it-works__step {

        min-height:
            200px;

        padding:
            22px
            16px;

    }

}


/* ==========================================================================
   14. MOBILE — VERTICAL STEPS
   ========================================================================== */

@media (max-width: 640px) {

    .topperwork-home-how-it-works {

        padding:
            18px
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-left)
            )
            6px
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-how-it-works__header {

        margin-bottom:
            12px;

    }


    .topperwork-home-how-it-works__heading h2 {

        font-size:
            clamp(
                1.7rem,
                7vw,
                2.1rem
            );

    }


    .topperwork-home-how-it-works__heading p {

        max-width:
            440px;

        font-size:
            0.76rem;

    }


    .topperwork-home-how-it-works__steps {

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    .topperwork-home-how-it-works__step {

        min-height:
            170px;

        padding:
            18px
            14px;

    }


    .topperwork-home-how-it-works__connector {

        min-height:
            30px;

    }


    .topperwork-home-how-it-works__connector i {

        transform:
            rotate(90deg);

    }

}


/* ==========================================================================
   ==========================================================================
   2D.4 — POPULAR JOB CATEGORIES
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   15. CATEGORY SECTION
   ========================================================================== */

.topperwork-home-categories {

    padding:
        6px
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        )
        24px
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        );

}


/* ==========================================================================
   16. CATEGORY CONTAINER
   ========================================================================== */

.topperwork-home-categories__container {

    padding:
        18px;

    border:
        1px solid
        rgba(59, 130, 246, 0.18);

    border-radius:
        16px;

       background:
        linear-gradient(
            145deg,
            #0b192d,
            #0b1a2e,
            #18092d
        );

}


/* ==========================================================================
   17. CATEGORY HEADER — CENTER
   ========================================================================== */

.topperwork-home-categories__header {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-bottom:
        14px;

    text-align:
        center;

}


.topperwork-home-categories__heading {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    min-width:
        0;

}


.topperwork-home-categories__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        26px;

    padding:
        4px 12px;

    border:
        1px solid
        rgba(139, 92, 246, 0.30);

    border-radius:
        var(--radius-full);

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.10),
            rgba(139, 92, 246, 0.16)
        );

    color:
        #A78BFA;

    font-size:
        0.72rem;

    font-weight:
        var(--font-weight-semibold);

}


.topperwork-home-categories__heading h2 {

    margin:
        8px 0 0;

    color:#e0ffff;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.5rem
        );

    line-height:
        1.05;

    text-align:
        center;

}


.topperwork-home-categories__heading p {

    max-width:
        680px;

    margin:
        7px auto 0;

    color:#e0ffff;

    font-size:
        var(--font-size-sm);

    line-height:
        1.45;

    text-align:
        center;

}


.topperwork-home-categories__link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        36px;

    color:
        var(--color-primary);

    font-size:
        0.78rem;

    font-weight:
        var(--font-weight-semibold);

    text-decoration:
        none;

}


.topperwork-home-categories__link i {

    transition:
        transform var(--transition-fast);

}


.topperwork-home-categories__link:hover i {

    transform:
        translateX(4px);

}


/* ==========================================================================
   18. CATEGORY GRID
   ========================================================================== */

.topperwork-home-categories__grid {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        8px;

}


/* ==========================================================================
   19. CATEGORY CARD
   ========================================================================== */

.topperwork-home-category-card {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        0;

    min-height:
        112px;

    padding:
        12px;

    border:
        1px solid
        rgba(59, 130, 246, 0.22);

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 52, 99, 0.88) 0%,
            rgba(11, 37, 73, 0.92) 48%,
            rgba(49, 28, 91, 0.90) 100%
        );

    text-align:
        center;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);

    transition:
        transform var(--transition-normal),
        background var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);

}


/* ==========================================================================
   20. CATEGORY CARD HOVER
   ========================================================================== */

.topperwork-home-category-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(96, 165, 250, 0.62);

    background:
        linear-gradient(
            145deg,
            #0A3970 0%,
            #0864B8 52%,
            #38A7FF 100%
        );

    box-shadow:
        0 14px 30px
        rgba(14, 116, 216, 0.22),
        inset 0 1px 0
        rgba(255, 255, 255, 0.08);

}


/* ==========================================================================
   21. CATEGORY ICON
   ========================================================================== */

.topperwork-home-category-card__icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        50px;

    height:
        50px;

    margin-bottom:
        8px;

    border:
        1px solid
        rgba(59, 130, 246, 0.30);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            rgba(33, 150, 243, 0.16),
            rgba(139, 92, 246, 0.18)
        );

    color:
        #60A5FA;

    font-size:
        1.15rem;

}


.topperwork-home-category-card:nth-child(3n)
.topperwork-home-category-card__icon {

    color:
        #A78BFA;

}


.topperwork-home-category-card h3 {

    max-width:
        145px;

    margin:
        0;

    color:
        #FFFFFF;

    font-size:
        0.72rem;

    font-weight:
        var(--font-weight-semibold);

    line-height:
        1.3;

}


/* ==========================================================================
   22. CATEGORY DESKTOP
   ========================================================================== */

@media (min-width: 900px) {

    .topperwork-home-categories {

        padding:
            6px
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-left)
            )
            6px
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-categories__container {

        padding:
            18px;

    }


    .topperwork-home-categories__header {

        margin-bottom:
            12px;

    }


    .topperwork-home-categories__grid {

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

        gap:
            8px;

    }

}


/* ==========================================================================
   23. LARGE DESKTOP — 10 CARDS ONE ROW
   ========================================================================== */

@media (min-width: 1200px) {

    .topperwork-home-categories__grid {

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

        gap:
            7px;

    }


    .topperwork-home-category-card {

        min-height:
            112px;

        padding:
            10px 7px;

    }


    .topperwork-home-category-card__icon {

        width:
            48px;

        height:
            48px;

        margin-bottom:
            7px;

    }


    .topperwork-home-category-card h3 {

        font-size:
            0.68rem;

    }

}


/* ==========================================================================
   24. CATEGORY MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .topperwork-home-categories {

        padding:
            6px
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-left)
            )
            20px
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-categories__container {

        padding:
            14px;

    }


    .topperwork-home-categories__header {

        margin-bottom:
            12px;

    }


    .topperwork-home-categories__heading h2 {

        font-size:
            clamp(
                1.7rem,
                7vw,
                2.1rem
            );

    }


    .topperwork-home-categories__heading p {

        font-size:
            0.76rem;

    }


    .topperwork-home-categories__grid {

        grid-template-columns:
            1fr;

        gap:
            7px;

    }


    .topperwork-home-category-card {

        min-height:
            92px;

        padding:
            12px;

    }

}


/* ==========================================================================
   25. VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 380px) {

    .topperwork-home-how-it-works__step {

        min-height:
            155px;

    }


    .topperwork-home-how-it-works__icon {

        width:
            52px;

        height:
            52px;

    }


    .topperwork-home-category-card {

        min-height:
            86px;

    }


    .topperwork-home-category-card__icon {

        width:
            44px;

        height:
            44px;

        font-size:
            1rem;

    }

}


/* ==========================================================================
   26. REDUCED MOTION
   ========================================================================== */

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

    .topperwork-home-how-it-works__step,
    .topperwork-home-category-card,
    .topperwork-home-how-it-works__link i,
    .topperwork-home-categories__link i {

        transition:
            none;

    }


    .topperwork-home-how-it-works__step:hover,
    .topperwork-home-category-card:hover {

        transform:
            none;

    }

}



/* ==========================================================================
   ==========================================================================
   TOPPERWORK — PHASE 2D.5
   FEATURED JOBS + FEATURED PROFESSIONALS
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   1. SECTION
   ========================================================================== */

.topperwork-home-featured {

    width:
        100%;

    min-width:
        0;

    padding:
        4px
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        )
        4px
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        );

    background:
        var(--color-background);

}


/* ==========================================================================
   2. CONTAINER
   ========================================================================== */

.topperwork-home-featured__container {

    width:
        100%;

    max-width:
        var(--container-max-width);

    min-width:
        0;

    margin:
        0 auto;

}


/* ==========================================================================
   3. TWO MAIN CARDS
   ========================================================================== */

.topperwork-home-featured__grid {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        10px;

    width:
        100%;

    min-width:
        0;

}


/* ==========================================================================
   4. MAIN FEATURED CARD
   ========================================================================== */

.topperwork-home-featured-card {

    width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;

    padding:
        15px;

    border:
        1px solid
        #0b2948;

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #0b192d,
            #0b1a2e,
            #18092d
        );

    overflow:
        hidden;

}


/* ==========================================================================
   5. MAIN CARD HEADER
   ========================================================================== */

.topperwork-home-featured-card__header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

    min-width:
        0;

    margin-bottom:
        8px;

}


.topperwork-home-featured-card__header > div {

    min-width:
        0;

}


.topperwork-home-featured-card__header h2 {

    margin:
        0;

    color:
        #E0FFFF;

    font-family:
        var(--font-family-heading);

    font-size:
        clamp(
            1.25rem,
            1.8vw,
            1.55rem
        );

    font-weight:
        var(--font-weight-extrabold);

    line-height:
        1.1;

}


.topperwork-home-featured-card__header p {

    margin:
        4px 0 0;

    color:
        #E0FFFF;

    font-size:
        0.72rem;

    line-height:
        1.35;

}


.topperwork-home-featured-card__link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    gap:
        6px;

    margin-top:
        2px;

    color:
        #39A8FF;

    font-size:
        0.72rem;

    font-weight:
        var(--font-weight-semibold);

    line-height:
        1.2;

    text-decoration:
        none;

    white-space:
        nowrap;

}


.topperwork-home-featured-card__link:hover {

    color:
        #60A5FA;

}


.topperwork-home-featured-card__link i {

    transition:
        transform var(--transition-fast);

}


.topperwork-home-featured-card__link:hover i {

    transform:
        translateX(4px);

}


/* ==========================================================================
   6. INNER CARDS STACK
   ========================================================================== */

.topperwork-home-featured-card__items {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        6px;

    width:
        100%;

    min-width:
        0;

}


/* ==========================================================================
   7. FEATURED JOB INNER CARD
   ========================================================================== */

.topperwork-home-featured-job {

    width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;

    padding:
        9px
        11px;

    border:
        1px solid
        #0b2948;

    border-radius:
        9px;

    background:
        linear-gradient(
            145deg,
            #081e39,
            #07192f
        );

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);

}


.topperwork-home-featured-job:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(59, 130, 246, 0.52);

    background:
        linear-gradient(
            145deg,
            #0b315e,
            #0a3970,
            #151c55
        );

    box-shadow:
        0 8px 20px
        rgba(14, 116, 216, 0.16);

}


/* ==========================================================================
   8. JOB TITLE / TIME
   ========================================================================== */

.topperwork-home-featured-job__top {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        8px;

    min-width:
        0;

}


.topperwork-home-featured-job__top h3 {

    min-width:
        0;

    margin:
        0;

    overflow:
        hidden;

    color:
        #E0FFFF;

    font-size:
        0.76rem;

    font-weight:
        var(--font-weight-semibold);

    line-height:
        1.3;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.topperwork-home-featured-job__top time {

    flex:
        0 0 auto;

    color:
        rgba(224, 255, 255, 0.65);

    font-size:
        0.61rem;

    line-height:
        1.3;

    white-space:
        nowrap;

}


/* ==========================================================================
   9. JOB BUDGET
   ========================================================================== */

.topperwork-home-featured-job__budget {

    display:
        block;

    margin-top:
        4px;

    color:
        #22D3A6;

    font-size:
        0.82rem;

    font-weight:
        var(--font-weight-bold);

    line-height:
        1.2;

}


/* ==========================================================================
   10. JOB META
   ========================================================================== */

.topperwork-home-featured-job__meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        6px;

}


.topperwork-home-featured-job__meta span {

    display:
        inline-flex;

    align-items:
        center;

    max-width:
        100%;

    min-height:
        19px;

    padding:
        2px
        6px;

    border:
        1px solid
        rgba(59, 130, 246, 0.18);

    border-radius:
        5px;

    background:
        rgba(59, 130, 246, 0.08);

    color:
        rgba(224, 255, 255, 0.78);

    font-size:
        0.57rem;

    line-height:
        1.15;

    white-space:
        nowrap;

}


/* ==========================================================================
   ==========================================================================
   FEATURED PROFESSIONALS
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   11. PROFESSIONAL INNER CARD
   ========================================================================== */

.topperwork-home-featured-professional {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;

    padding:
        7px
        10px;

    border:
        1px solid
        #0b2948;

    border-radius:
        9px;

    background:
        linear-gradient(
            145deg,
            #081e39,
            #07192f
        );

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);

}


.topperwork-home-featured-professional:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(59, 130, 246, 0.52);

    background:
        linear-gradient(
            145deg,
            #0b315e,
            #0a3970,
            #151c55
        );

    box-shadow:
        0 8px 20px
        rgba(14, 116, 216, 0.16);

}


/* ==========================================================================
   12. PROFESSIONAL IDENTITY
   ========================================================================== */

.topperwork-home-featured-professional__identity {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        0;

}


.topperwork-home-featured-professional__avatar {

    flex:
        0 0 auto;

    width:
        58px;

    height:
        58px;

    overflow:
        hidden;

    border:
        2px solid
        rgba(59, 130, 246, 0.36);

    border-radius:
        50%;

    background:
        #0D1929;

}


.topperwork-home-featured-professional__avatar img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


/* ==========================================================================
   13. PROFESSIONAL INFO
   ========================================================================== */

.topperwork-home-featured-professional__info {

    min-width:
        0;

}


.topperwork-home-featured-professional__info h3 {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    min-width:
        0;

    margin:
        0;

    overflow:
        hidden;

    color:
        #E0FFFF;

    font-size:
        0.76rem;

    font-weight:
        var(--font-weight-bold);

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.topperwork-home-featured-professional__verified {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        14px;

    height:
        14px;

    border-radius:
        50%;

    background:
        #2196FF;

    color:
        #FFFFFF;

    font-size:
        0.48rem;

}


.topperwork-home-featured-professional__role {

    display:
        block;

    margin-top:
        2px;

    overflow:
        hidden;

    color:
        rgba(224, 255, 255, 0.68);

    font-size:
        0.58rem;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* ==========================================================================
   14. RATING
   ========================================================================== */

.topperwork-home-featured-professional__rating {

    display:
        flex;

    align-items:
        center;

    gap:
        3px;

    margin-top:
        3px;

    color:
        rgba(224, 255, 255, 0.72);

    font-size:
        0.58rem;

    line-height:
        1.2;

}


.topperwork-home-featured-professional__rating i {

    color:
        #FBBF24;

    font-size:
        0.54rem;

}


/* ==========================================================================
   15. PROFESSIONAL SKILLS
   ========================================================================== */

.topperwork-home-featured-professional__skills {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        4px;

    margin-top:
        4px;

}


.topperwork-home-featured-professional__skills span {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        18px;

    padding:
        2px
        6px;

    border:
        1px solid
        rgba(59, 130, 246, 0.18);

    border-radius:
        5px;

    background:
        rgba(59, 130, 246, 0.08);

    color:
        rgba(224, 255, 255, 0.78);

    font-size:
        0.55rem;

    line-height:
        1.15;

    white-space:
        nowrap;

}


/* ==========================================================================
   16. PROFESSIONAL RATE
   ========================================================================== */

.topperwork-home-featured-professional__rate {

    flex:
        0 0 auto;

    color:
        #22D3A6;

    font-size:
        0.82rem;

    font-weight:
        var(--font-weight-bold);

    line-height:
        1.2;

    white-space:
        nowrap;

}


/* ==========================================================================
   17. DESKTOP — TWO COLUMNS
   ========================================================================== */

@media (min-width: 900px) {

    .topperwork-home-featured {

        padding:
            4px
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-left)
            )
            4px
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-featured__grid {

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

        gap:
            12px;

    }


    .topperwork-home-featured-card {

        padding:
            15px;

    }

}


/* ==========================================================================
   18. LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1200px) {

    .topperwork-home-featured__grid {

        gap:
            14px;

    }


    .topperwork-home-featured-job {

        min-height:
            76px;

    }


    .topperwork-home-featured-professional {

        min-height:
            76px;

    }

}


/* ==========================================================================
   19. TABLET / HIGH ZOOM
   ========================================================================== */

@media (min-width: 641px) and (max-width: 899px) {

    .topperwork-home-featured__grid {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }

}


/* ==========================================================================
   20. MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .topperwork-home-featured {

        padding:
            4px
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-left)
            )
            4px
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-featured__grid {

        grid-template-columns:
            1fr;

        gap:
            8px;

    }


    .topperwork-home-featured-card {

        padding:
            15px;

        border-radius:
            14px;

    }


    .topperwork-home-featured-card__header {

        gap:
            8px;

    }


    .topperwork-home-featured-card__header h2 {

        font-size:
            1.18rem;

    }


    .topperwork-home-featured-card__header p {

        font-size:
            0.65rem;

    }


    .topperwork-home-featured-card__link {

        font-size:
            0.61rem;

    }


    .topperwork-home-featured-job__top h3 {

        font-size:
            0.70rem;

    }


    .topperwork-home-featured-job__top time {

        font-size:
            0.56rem;

    }


    .topperwork-home-featured-job__budget {

        font-size:
            0.76rem;

    }


    .topperwork-home-featured-professional {

        padding:
            9px;

    }


    .topperwork-home-featured-professional__avatar {

        width:
            52px;

        height:
            52px;

    }


    .topperwork-home-featured-professional__rate {

        font-size:
            0.74rem;

    }

}


/* ==========================================================================
   21. VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 380px) {

    .topperwork-home-featured-card {

        padding:
            12px;

    }


    .topperwork-home-featured-card__header h2 {

        font-size:
            1.08rem;

    }


    .topperwork-home-featured-card__link {

        font-size:
            0.57rem;

    }


    .topperwork-home-featured-job__top h3 {

        font-size:
            0.65rem;

    }


    .topperwork-home-featured-professional__avatar {

        width:
            48px;

        height:
            48px;

    }


    .topperwork-home-featured-professional__info h3 {

        font-size:
            0.68rem;

    }

}


/* ==========================================================================
   22. WIDTH / OVERFLOW SAFETY
   ========================================================================== */

.topperwork-home-featured,
.topperwork-home-featured__container,
.topperwork-home-featured__grid,
.topperwork-home-featured-card,
.topperwork-home-featured-card__items,
.topperwork-home-featured-job,
.topperwork-home-featured-professional,
.topperwork-home-featured-professional__identity,
.topperwork-home-featured-professional__info {

    min-width:
        0;

    box-sizing:
        border-box;

}


/* ==========================================================================
   23. REDUCED MOTION
   ========================================================================== */

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

    .topperwork-home-featured-job,
    .topperwork-home-featured-professional,
    .topperwork-home-featured-card__link i {

        transition:
            none;

    }


    .topperwork-home-featured-job:hover,
    .topperwork-home-featured-professional:hover {

        transform:
            none;

    }

}
/* ==========================================================================
   ==========================================================================
   TOPPERWORK — 2D.7
   GLOBAL COMMUNITY + MARKETPLACE STATS
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL COMMUNITY SECTION
   ========================================================================== */

.topperwork-home-global {

    width:
        100%;

    min-width:
        0;

    padding:
        4px
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        );

    background:
        var(--color-background);

}


.topperwork-home-global__container {

    width:
        100%;

    max-width:
        var(--container-max-width);

    min-width:
        0;

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        10px;

}


/* ==========================================================================
   2. COMMON INNER CARD
   ========================================================================== */

.topperwork-home-global__community,
.topperwork-home-global__stats {

    min-width:
        0;

    box-sizing:
        border-box;

    padding:
        15px;

    border:
        1px solid
        #0b2948;

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #0b192d,
            #0b1a2e,
            #18092d
        );

}


/* ==========================================================================
   3. COMMUNITY INNER CARD
   ========================================================================== */

.topperwork-home-global__community {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    overflow:
        hidden;

}


.topperwork-home-global__map {

    flex:
        0 1 46%;

    min-width:
        0;

}


.topperwork-home-global__map img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    max-width:
        100%;

    object-fit:
        contain;

}


/* ==========================================================================
   4. COMMUNITY CONTENT
   ========================================================================== */

.topperwork-home-global__community-content {

    flex:
        1 1 auto;

    min-width:
        0;

}


.topperwork-home-global__community-content h2 {

    margin:
        0 0 10px;

    color:
        #E0FFFF;

    font-size:
        clamp(
            1.15rem,
            1.7vw,
            1.55rem
        );

    font-weight:
        var(--font-weight-bold);

    line-height:
        1.2;

}


.topperwork-home-global__community-content ul {

    display:
        grid;

    gap:
        6px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.topperwork-home-global__community-content li {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #E0FFFF;

    font-size:
        0.72rem;

    line-height:
        1.3;

}


.topperwork-home-global__community-content li i {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        17px;

    height:
        17px;

    border-radius:
        50%;

    background:
        #22C55E;

    color:
        #FFFFFF;

    font-size:
        0.55rem;

}


/* ==========================================================================
   5. STATS INNER CARD
   ========================================================================== */

.topperwork-home-global__stats {

    display:
        grid;

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

    align-items:
        center;

}


.topperwork-home-global__stat {

    min-width:
        0;

    padding:
        4px 12px;

    text-align:
        center;

    border-right:
        1px solid
        rgba(148, 163, 184, 0.16);

}


.topperwork-home-global__stat:last-child {

    border-right:
        0;

}


.topperwork-home-global__stat strong {

    display:
        block;

    color:
        #39A8FF;

    font-size:
        clamp(
            1.5rem,
            2.8vw,
            2.15rem
        );

    font-weight:
        var(--font-weight-extrabold);

    line-height:
        1.05;

}


.topperwork-home-global__stat span {

    display:
        block;

    margin-top:
        6px;

    color:
        #E0FFFF;

    font-size:
        0.78rem;

    line-height:
        1.25;

}


/* ==========================================================================
   ==========================================================================
   TOPPERWORK — 2D.8
   FINAL CTA
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   6. CTA SECTION
   ========================================================================== */

.topperwork-home-final-cta {

    width:
        100%;

    min-width:
        0;

    padding:
        6px
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        )
        6px
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        );

    background:
        var(--color-background);

}


.topperwork-home-final-cta__container {

    width:
        100%;

    max-width:
        var(--container-max-width);

    min-width:
        0;

    margin:
        0 auto;

    box-sizing:
        border-box;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(0, 0.8fr);

    align-items:
        center;

    gap:
        10px;

    padding:
        15px;

    border:
        1px solid
        #0b2948;

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #0b192d,
            #0b1a2e,
            #18092d
        );

}

/* ==========================================================================
   TOPPERWORK FINAL CTA — MATCH ALL OTHER SECTION WIDTHS
   ========================================================================== */

.topperwork-home-final-cta__container {
    width: calc(100% - 20px) !important;
    max-width: var(--container-max-width) !important;
    min-width: 0 !important;

    margin: 0 auto !important;

    box-sizing: border-box !important;
}

/* ==========================================================================
   7. CTA MESSAGE INNER CARD
   ========================================================================== */

.topperwork-home-final-cta__message {

    min-width:
        0;

    padding:
        4px;

}


.topperwork-home-final-cta__message h2 {

    margin:
        0;

    color:
        #E0FFFF;

    font-size:
        clamp(
            1.25rem,
            2vw,
            1.7rem
        );

    font-weight:
        var(--font-weight-bold);

    line-height:
        1.15;

}


.topperwork-home-final-cta__message p {

    margin:
        6px 0 0;

    color:
        #E0FFFF;

    font-size:
        0.78rem;

    line-height:
        1.45;

}


/* ==========================================================================
   8. CTA BUTTON INNER CARD
   ========================================================================== */

.topperwork-home-final-cta__actions {

    display:
        grid;

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

    gap:
        10px;

    min-width:
        0;

}


/* ==========================================================================
   9. CTA BUTTONS
   ========================================================================== */

.topperwork-home-final-cta__button {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        0;

    min-height:
        64px;

    padding:
        10px 14px;

    border:
        1px solid
        #0b2948;

    border-radius:
        12px;

    color:
        #E0FFFF;

    text-align:
        center;

    text-decoration:
        none;

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);

}


.topperwork-home-final-cta__button strong {

    display:
        block;

    color:
        #E0FFFF;

    font-size:
        0.86rem;

    font-weight:
        var(--font-weight-bold);

    line-height:
        1.2;

}


.topperwork-home-final-cta__button span {

    display:
        block;

    margin-top:
        3px;

    color:
        rgba(224, 255, 255, 0.72);

    font-size:
        0.62rem;

    line-height:
        1.2;

}


/* ==========================================================================
   10. PRIMARY CTA
   ========================================================================== */

.topperwork-home-final-cta__button--primary {

    border-color:
        rgba(59, 130, 246, 0.6);

    background:
        linear-gradient(
            135deg,
            #1689E8,
            #3B82F6,
            #6D4AFF
        );

    box-shadow:
        0 8px 22px
        rgba(59, 130, 246, 0.18);

}


.topperwork-home-final-cta__button--primary strong,
.topperwork-home-final-cta__button--primary span {

    color:
        #FFFFFF;

}


.topperwork-home-final-cta__button--primary:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(224, 255, 255, 0.55);

    box-shadow:
        0 10px 26px
        rgba(59, 130, 246, 0.28);

}


/* ==========================================================================
   11. SECONDARY CTA
   ========================================================================== */

.topperwork-home-final-cta__button--secondary {

    border-color:
        rgba(59, 130, 246, 0.45);

    background: green;

}


.topperwork-home-final-cta__button--secondary:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(139, 92, 246, 0.65);

    box-shadow:
        0 10px 24px
        rgba(59, 130, 246, 0.16);

}


/* ==========================================================================
   12. DESKTOP
   ========================================================================== */

@media (min-width: 900px) {

    .topperwork-home-global {

        padding:
            4px
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-left)
            )
            4px
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-right)
            );

    }

}


/* ==========================================================================
   13. TABLET / HIGH ZOOM
   ========================================================================== */

@media (min-width: 641px) and (max-width: 899px) {

    .topperwork-home-global__container {

        grid-template-columns:
            1fr;

    }


    .topperwork-home-final-cta__container {

        grid-template-columns:
            1fr;

    }

}


/* ==========================================================================
   14. MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .topperwork-home-global {

        padding:
            4px
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-left)
            )
            4px
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-global__container {

        grid-template-columns:
            1fr;

        gap:
            8px;

    }


    /* --------------------------------------------------------------
       Community card
       -------------------------------------------------------------- */

    .topperwork-home-global__community {

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            8px;

    }


    .topperwork-home-global__map {

        flex:
            0 0 auto;

        width:
            100%;

        text-align:
            center;

    }


    .topperwork-home-global__map img {

        width:
            100%;

        max-width:
            460px;

        margin:
            0 auto;

    }


    .topperwork-home-global__community-content h2 {

        font-size:
            1.18rem;

        text-align:
            center;

    }


    .topperwork-home-global__community-content ul {

        justify-items:
            center;

    }


    /* --------------------------------------------------------------
       Stats card
       -------------------------------------------------------------- */

    .topperwork-home-global__stats {

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

        gap:
            0;

    }


    .topperwork-home-global__stat {

        padding:
            12px 8px;

        border-right:
            1px solid
            rgba(148, 163, 184, 0.16);

        border-bottom:
            1px solid
            rgba(148, 163, 184, 0.16);

    }


    .topperwork-home-global__stat:nth-child(2n) {

        border-right:
            0;

    }


    .topperwork-home-global__stat:nth-last-child(-n + 2) {

        border-bottom:
            0;

    }


    .topperwork-home-global__stat strong {

        font-size:
            1.5rem;

    }


    .topperwork-home-global__stat span {

        font-size:
            0.65rem;

    }


    /* --------------------------------------------------------------
       CTA
       -------------------------------------------------------------- */

    .topperwork-home-final-cta {

        padding:
            6px
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-left)
            )
            6px
            calc(
                var(--page-padding-mobile)
                + var(--safe-area-right)
            );

    }


    .topperwork-home-final-cta__container {

        grid-template-columns:
            1fr;

        gap:
            10px;

        padding:
            15px;

    }


    .topperwork-home-final-cta__message {

        text-align:
            center;

    }


    .topperwork-home-final-cta__message h2 {

        font-size:
            1.28rem;

    }


    .topperwork-home-final-cta__message p {

        font-size:
            0.68rem;

    }


    .topperwork-home-final-cta__actions {

        grid-template-columns:
            1fr;

        gap:
            8px;

    }


    .topperwork-home-final-cta__button {

        min-height:
            58px;

    }

}


/* ==========================================================================
   15. VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 380px) {

    .topperwork-home-global__community,
    .topperwork-home-global__stats,
    .topperwork-home-final-cta__container {

        padding:
            12px;

    }


    .topperwork-home-global__community-content h2 {

        font-size:
            1.05rem;

    }


    .topperwork-home-global__stat strong {

        font-size:
            1.3rem;

    }


    .topperwork-home-final-cta__message h2 {

        font-size:
            1.15rem;

    }

}


/* ==========================================================================
   16. OVERFLOW / BOX SAFETY
   ========================================================================== */

.topperwork-home-global,
.topperwork-home-global__container,
.topperwork-home-global__community,
.topperwork-home-global__stats,
.topperwork-home-global__community-content,
.topperwork-home-global__stat,
.topperwork-home-final-cta,
.topperwork-home-final-cta__container,
.topperwork-home-final-cta__message,
.topperwork-home-final-cta__actions,
.topperwork-home-final-cta__button {

    min-width:
        0;

    box-sizing:
        border-box;

}


/* ==========================================================================
   17. REDUCED MOTION
   ========================================================================== */

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

    .topperwork-home-final-cta__button {

        transition:
            none;

    }


    .topperwork-home-final-cta__button:hover {

        transform:
            none;

    }

}


/* ==========================================================================
   FINAL CATEGORY GRID RESPONSIVE FIX
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILE
   2 columns
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

    .topperwork-home-categories__grid {

        display: grid !important;

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

        gap:
            7px !important;

    }

}


/* --------------------------------------------------------------------------
   TABLET
   2 columns
   -------------------------------------------------------------------------- */

@media (min-width: 641px) and (max-width: 1199px) {

    .topperwork-home-categories__grid {

        display: grid !important;

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

        gap:
            8px !important;

    }

}


/* --------------------------------------------------------------------------
   DESKTOP
   10 columns — all cards in one row
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {

    .topperwork-home-categories__grid {

        display: grid !important;

        grid-template-columns:
            repeat(10, minmax(0, 1fr)) !important;

        gap:
            7px !important;

    }

}




























 /*==========================================================================*/
 /*  TOPPERWORK — HERO WIDTH LOCK*/
 /*  ========================================================================== */

@media (min-width: 641px) {

    .topperwork-home {

        width: 100%;

        max-width: var(--container-max-width);

        margin-left: auto;
        margin-right: auto;

    }


    .topperwork-home__visual {

        width: 100%;

    }


    .topperwork-home__visual-image {

        width: 100%;

    }


    .topperwork-home__visual-overlay {

        width: 100%;

    }

}



/* ==========================================================================
   TOPPERWORK — HERO TITLE TYPEWRITER
   ========================================================================== */

/*
 * Typewriter cursor
 * Does NOT change existing font, size, weight or gradient.
 */

.topperwork-home__title-line.is-typing::after {

    content: "|";

    display: inline-block;

    margin-left: 4px;

    color: #E0FFFF;

    -webkit-text-fill-color: #E0FFFF;

    animation:
        topperwork-title-cursor 0.7s step-end infinite;

}


/* --------------------------------------------------------------------------
   CURSOR BLINK
   -------------------------------------------------------------------------- */

@keyframes topperwork-title-cursor {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }

}


/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

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

    .topperwork-home__title-line.is-typing::after {

        animation: none;

        opacity: 1;

    }

}






/* ==========================================================================
   TOPPERWORK — HERO TITLE TYPEWRITER
   ========================================================================== */

.topperwork-home__title-line.is-fading {

    opacity: 0;

    transition:
        opacity 0.8s ease;

}


/* Cursor */

.topperwork-home__title-line.is-typing::after {

    content: "|";

    display: inline-block;

    margin-left: 4px;

    color: #E0FFFF;

    -webkit-text-fill-color: #E0FFFF;

    animation:
        topperwork-title-cursor 0.7s step-end infinite;

}


@keyframes topperwork-title-cursor {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }

}


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

    .topperwork-home__title-line.is-typing::after {

        animation: none;

        opacity: 1;

    }

}