/* =========================================================
   ATLAS PUBLIC NAVIGATION
   ========================================================= */

.atlas-nav-shield {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 4px;
}

.atlas-nav-brand {
    font-size: 1.15rem;
    letter-spacing: .01em;
}

.atlas-nav-subtitle {
    font-size: .68rem;
    letter-spacing: .14em;
}

@media (max-width: 575.98px) {
    .atlas-nav-shield {
        width: 36px;
        height: 36px;
    }

    .atlas-nav-brand {
        font-size: 1rem;
    }

    .atlas-nav-subtitle {
        font-size: .58rem;
        letter-spacing: .1em;
    }
}

/* =========================================================
   ATLAS GATEWAY IMAGE LAYOUT
   ========================================================= */

.atlas-gateway-hero {
    width: 100%;
    background: #05080b;
    overflow: hidden;
}

    .atlas-gateway-hero .container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

.atlas-gateway-hero__inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.atlas-gateway-hero__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

/* Footer shield must stay logo-sized */
.atlas-footer-shield {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}

@media (max-width: 767.98px) {
    .atlas-footer-shield {
        width: 44px;
        height: 44px;
    }
}

/* =========================================================
   ATLAS GATEWAY
   ========================================================= */

.atlas-gateway-hero {
    background: #02070b;
    width: 100%;
    overflow: hidden;
}

.atlas-gateway-hero__inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.atlas-gateway-hero__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.atlas-gateway-intro {
    background: #0b1218;
    color: #ffffff;
    border-top: 1px solid rgba(255, 193, 7, .55);
}

.atlas-gateway-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
}

.atlas-gateway-lead {
    color: rgba(255, 255, 255, .72);
    font-size: 1.1rem;
    line-height: 1.7;
}

.atlas-gateway-feature {
    height: 100%;
}

.atlas-gateway-feature__icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 1rem;
    border: 2px solid #ffc107;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.atlas-gateway-feature__title {
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.atlas-gateway-feature__text {
    color: rgba(255, 255, 255, .65);
    font-size: .9rem;
    margin-bottom: 0;
}

.atlas-gateway-actions .btn {
    min-width: 230px;
}

@media (max-width: 767.98px) {

    .atlas-gateway-intro .container {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .atlas-gateway-feature__icon {
        width: 62px;
        height: 62px;
        font-size: 1.6rem;
    }

    .atlas-gateway-actions .btn {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================================
   PUBLIC VENDOR NETWORK
   LOCKED VISUAL SYSTEM
   ========================================================= */

.atlas-vendor-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #050b10;
    color: #fff;
}


    /* =========================================================
   FIXED VENDOR NETWORK BACKGROUND
   Image remains visually anchored while page content scrolls
   ========================================================= */

    .atlas-vendor-page::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -2;
        background-image: url('/Images/atlas-vendor-network-hero.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        pointer-events: none;
    }


    /* Global dark veil keeps text readable while allowing
   the artwork to remain visible throughout the page. */

    .atlas-vendor-page::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        background: linear-gradient( 90deg, rgba(2, 7, 11, .94) 0%, rgba(2, 7, 11, .84) 42%, rgba(2, 7, 11, .42) 72%, rgba(2, 7, 11, .30) 100% );
        pointer-events: none;
    }


/* =========================================================
   PREMIUM HERO
   ========================================================= */

.atlas-vendor-hero {
    position: relative;
    background: linear-gradient( 90deg, rgba(3, 8, 13, .96) 0%, rgba(3, 8, 13, .88) 43%, rgba(3, 8, 13, .22) 76%, rgba(3, 8, 13, .12) 100% );
    border-bottom: 1px solid rgba(255, 193, 7, .75);
}

.atlas-vendor-hero-premium {
    position: relative;
    overflow: hidden;
}


/* The old atlas-hero watermark element stays harmless.
   The new dedicated Vendor Network image is now the
   fixed page background instead. */

.atlas-vendor-hero-watermark {
    display: none;
}


/* =========================================================
   HERO COPY
   ========================================================= */

.atlas-vendor-kicker {
    position: relative;
    display: inline-block;
    color: #ffc107;
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .18em;
    padding-bottom: .8rem;
}

    .atlas-vendor-kicker::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 52px;
        height: 3px;
        background: #ffc107;
    }


.atlas-vendor-main-title {
    color: #fff;
    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.025em;
    max-width: 820px;
    text-shadow: 0 3px 20px rgba(0, 0, 0, .75);
}


    .atlas-vendor-main-title span {
        display: block;
        color: #ffc107;
        margin-top: .2em;
        text-shadow: 0 3px 18px rgba(0, 0, 0, .8);
    }


.atlas-vendor-main-lead {
    color: rgba(255, 255, 255, .78);
    font-size: 1.12rem;
    line-height: 1.75;
    max-width: 700px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.atlas-vendor-hero .btn-warning {
    border-color: #ffc107;
    box-shadow: 0 8px 30px rgba(255, 193, 7, .12);
}


.atlas-vendor-hero .btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, .72);
    background: rgba(0, 0, 0, .24);
    backdrop-filter: blur(4px);
}


    .atlas-vendor-hero .btn-outline-light:hover {
        color: #05080b;
        background: #fff;
    }


/* =========================================================
   RELATIONSHIP MESSAGE
   ========================================================= */

.atlas-vendor-relationship {
    max-width: 675px;
    padding: 1rem 0 1rem 1.25rem;
    border-left: 2px solid #ffc107;
    color: rgba(255, 255, 255, .72);
    background: linear-gradient( 90deg, rgba(0, 0, 0, .23), transparent );
}


.atlas-vendor-relationship-title {
    color: #ffc107;
    text-transform: uppercase;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .11em;
}


/* =========================================================
   RIGHT-SIDE BRAND PANEL
   ========================================================= */

.atlas-vendor-brand-panel {
    max-width: 360px;
    margin-left: auto;
    padding: 2rem 0 2rem 2rem;
    border-left: 1px solid rgba(255, 193, 7, .65);
    background: linear-gradient( 90deg, rgba(0, 0, 0, .25), transparent );
    text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
}


.atlas-vendor-brand-label {
    color: rgba(255, 255, 255, .58);
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
}


.atlas-vendor-brand-statements {
    color: rgba(255, 255, 255, .88);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.85;
}


.atlas-vendor-brand-divider {
    width: 42px;
    height: 2px;
    margin: 1.25rem 0;
    background: #ffc107;
}


.atlas-vendor-brand-close {
    color: #ffc107;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .12em;
    font-size: 1.1rem;
}


/* =========================================================
   HERO FEATURE STRIP
   ========================================================= */

.atlas-vendor-hero-features {
    position: relative;
    background: rgba(1, 5, 9, .90);
    border-top: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
}


.atlas-vendor-hero-feature {
    display: flex;
    height: 100%;
    gap: 1rem;
    align-items: center;
    padding: 1.5rem 1.6rem;
    border-right: 1px solid rgba(255, 255, 255, .12);
}


.atlas-vendor-feature-symbol {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffc107;
    border-radius: 50%;
    color: #ffc107;
    font-size: 1.5rem;
}


.atlas-vendor-hero-feature h2 {
    color: #ffc107;
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: .35rem;
}


.atlas-vendor-hero-feature p {
    color: rgba(255, 255, 255, .68);
    font-size: .86rem;
    line-height: 1.5;
    margin-bottom: 0;
}


/* =========================================================
   GENERAL VENDOR CONTENT SECTIONS
   Transparent enough to retain fixed-image atmosphere
   ========================================================= */

.atlas-vendor-section {
    position: relative;
    background: rgba(7, 15, 21, .86);
    color: #fff;
    backdrop-filter: blur(7px);
}

.atlas-vendor-section-alt {
    background: rgba(14, 24, 31, .89);
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}


/* =========================================================
   WHY JOIN CARDS
   ========================================================= */

.atlas-vendor-card {
    position: relative;
    height: 100%;
    padding: 1.7rem;
    overflow: hidden;
    border: 1px solid rgba(255, 193, 7, .18);
    border-radius: .9rem;
    background: linear-gradient( 145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018) );
    box-shadow: 0 16px 35px rgba(0, 0, 0, .12);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}


    .atlas-vendor-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient( 90deg, #ffc107, rgba(0, 136, 220, .75) );
    }


    .atlas-vendor-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 193, 7, .46);
        background: rgba(255, 255, 255, .065);
    }


    .atlas-vendor-card h3 {
        color: #ffc107;
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: .75rem;
    }


    .atlas-vendor-card p {
        color: rgba(255, 255, 255, .70);
        line-height: 1.65;
        margin-bottom: 0;
    }


/* =========================================================
   WHAT STERLING EXPECTS
   ========================================================= */

.atlas-vendor-checklist {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}


    .atlas-vendor-checklist li {
        position: relative;
        padding: .75rem 0 .75rem 2rem;
        color: rgba(255, 255, 255, .80);
    }


        .atlas-vendor-checklist li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #ffc107;
            font-weight: 700;
        }


/* =========================================================
   ONBOARDING
   ========================================================= */

.atlas-vendor-step {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.6rem;
}


    .atlas-vendor-step > span {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ffc107;
        border-radius: 50%;
        color: #ffc107;
        font-weight: 700;
        background: rgba(255, 193, 7, .04);
    }


    .atlas-vendor-step h3 {
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: .35rem;
    }


    .atlas-vendor-step p {
        color: rgba(255, 255, 255, .66);
        margin-bottom: 0;
    }


/* =========================================================
   COMPARISON TABLE
   ========================================================= */

.atlas-vendor-comparison {
    --bs-table-bg: rgba(0, 0, 0, .12);
    --bs-table-color: rgba(255, 255, 255, .76);
    --bs-table-border-color: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .08);
}


    .atlas-vendor-comparison thead th {
        color: #ffc107;
        background: rgba(0, 0, 0, .38);
        font-weight: 700;
    }


    .atlas-vendor-comparison td,
    .atlas-vendor-comparison th {
        padding: 1rem;
    }


    .atlas-vendor-comparison tbody td:first-child {
        color: #fff;
        font-weight: 700;
    }


    /* Sterling Atlas column */

    .atlas-vendor-comparison th:last-child,
    .atlas-vendor-comparison td:last-child {
        background: rgba(255, 193, 7, .055);
    }


/* =========================================================
   FINAL CTA
   ========================================================= */

.atlas-vendor-cta {
    position: relative;
    background: rgba(2, 7, 11, .94);
    border-top: 1px solid rgba(255, 193, 7, .65);
    backdrop-filter: blur(10px);
}


    .atlas-vendor-cta .btn-outline-light {
        color: #fff;
        background: rgba(0, 0, 0, .18);
        border-color: rgba(255, 255, 255, .65);
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .atlas-vendor-brand-panel {
        max-width: none;
        margin-left: 0;
    }
}


@media (max-width: 767.98px) {

    /*
       Fixed backgrounds are inconsistent on some
       mobile browsers. Let it scroll normally there.
    */

    .atlas-vendor-page::before,
    .atlas-vendor-page::after {
        position: absolute;
        height: 100%;
    }


    .atlas-vendor-page::before {
        background-position: 67% top;
        background-size: auto 750px;
        background-color: #050b10;
    }


    .atlas-vendor-main-title {
        font-size: clamp( 2.35rem, 11vw, 3.5rem );
    }


    .atlas-vendor-main-lead {
        font-size: 1rem;
    }


    .atlas-vendor-brand-panel {
        padding: 1.5rem 0 1.5rem 1.25rem;
    }


    .atlas-vendor-hero-feature {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }


    .atlas-vendor-comparison {
        min-width: 760px;
    }
}