/* =========================================================
   GDS — SHOPIFY & E-COMMERCE
   PREMIUM SERVICE PAGE
   CSS — PART 1/4
   GLOBAL + HERO
========================================================= */


/* =========================================================
   ROOT
========================================================= */

.shopify-page {

    --shopify-black: #080808;
    --shopify-black-soft: #0d0d0d;
    --shopify-panel: #121212;

    --shopify-white: #ffffff;
    --shopify-muted: #a5a5a5;
    --shopify-muted-2: #707070;

    --shopify-gold: #c9a45c;
    --shopify-gold-light: #e3c47c;

    --shopify-border:
        rgba(255, 255, 255, .08);

    --shopify-border-gold:
        rgba(201, 164, 92, .28);

    background:
        var(--shopify-black);

    color:
        var(--shopify-white);

    overflow:
        hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.shopify-page .container {

    width:
        min(1180px, calc(100% - 48px));

    margin-inline:
        auto;

}


/* =========================================================
   COMMON EYEBROW
========================================================= */

.shopify-page .service-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        22px;

    color:
        var(--shopify-gold);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .18em;

}


.shopify-page .service-eyebrow-line {

    width:
        30px;

    height:
        1px;

    display:
        block;

    background:
        var(--shopify-gold);

}


/* =========================================================
   COMMON SECTION HEADING
========================================================= */

.shopify-section-heading {

    max-width:
        760px;

    margin-bottom:
        70px;

}


.shopify-section-heading h2 {

    margin:
        0 0 22px;

    font-size:
        clamp(38px, 5vw, 68px);

    line-height:
        .98;

    letter-spacing:
        -.045em;

    font-weight:
        700;

}


.shopify-section-heading h2 span {

    color:
        var(--shopify-gold);

}


.shopify-section-heading p {

    max-width:
        680px;

    margin:
        0;

    color:
        var(--shopify-muted);

    font-size:
        16px;

    line-height:
        1.8;

}


/* =========================================================
   COMMON BUTTONS
========================================================= */

.shopify-page .service-primary-btn,
.shopify-page .service-secondary-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    min-height:
        52px;

    padding:
        0 22px;

    border-radius:
        3px;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .08em;

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

}


.shopify-page .service-primary-btn {

    color:
        #080808;

    background:
        linear-gradient(
            135deg,
            var(--shopify-gold-light),
            var(--shopify-gold)
        );

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

}


.shopify-page .service-secondary-btn {

    color:
        var(--shopify-white);

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

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

}


.shopify-page .service-primary-btn:hover,
.shopify-page .service-secondary-btn:hover {

    transform:
        translateY(-2px);

}


.shopify-page .service-secondary-btn:hover {

    border-color:
        var(--shopify-gold);

    color:
        var(--shopify-gold-light);

}


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

.shopify-hero {

    position:
        relative;

    min-height:
        760px;

    display:
        flex;

    align-items:
        center;

    padding:
        120px 0 100px;

    background:
        radial-gradient(
            circle at 82% 45%,
            rgba(201,164,92,.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #080808 0%,
            #0b0b0b 55%,
            #11100d 100%
        );

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

}


.shopify-hero-bg {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(255,255,255,.035),
            transparent 28%
        );

}


/* =========================================================
   HERO GRID
========================================================= */

.shopify-hero-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(420px, .9fr);

    align-items:
        center;

    gap:
        70px;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.shopify-hero-content {

    position:
        relative;

    z-index:
        2;

}


.shopify-hero-content h1 {

    max-width:
        720px;

    margin:
        0 0 28px;

    font-size:
        clamp(48px, 6vw, 82px);

    line-height:
        .94;

    letter-spacing:
        -.055em;

    font-weight:
        700;

}


.shopify-hero-content h1 span {

    display:
        block;

    color:
        var(--shopify-gold);

}


.shopify-hero-content p {

    max-width:
        650px;

    margin:
        0 0 34px;

    color:
        var(--shopify-muted);

    font-size:
        17px;

    line-height:
        1.8;

}


/* =========================================================
   HERO ACTIONS
========================================================= */

.shopify-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

}


/* =========================================================
   HERO TRUST
========================================================= */

.shopify-hero-trust {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        38px;

    color:
        var(--shopify-muted-2);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .15em;

}


.shopify-hero-trust i {

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        var(--shopify-gold);

    opacity:
        .7;

}


/* =========================================================
   HERO VISUAL
========================================================= */

.shopify-hero-visual {

    position:
        relative;

    min-height:
        500px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
   STORE CARD
========================================================= */

.shopify-store-card {

    position:
        relative;

    width:
        min(100%, 510px);

    overflow:
        hidden;

    border:
        1px solid
        rgba(201,164,92,.25);

    border-radius:
        12px;

    background:
        #111;

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.5);

    transform:
        perspective(1200px)
        rotateY(-4deg)
        rotateX(2deg);

    transition:
        transform .3s ease;

}


/* =========================================================
   STORE HEADER
========================================================= */

.shopify-store-header {

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding:
        0 16px;

    background:
        #181818;

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

}


.shopify-store-dots {

    display:
        flex;

    gap:
        5px;

}


.shopify-store-dots span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #555;

}


.shopify-store-url {

    flex:
        1;

    height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        4px;

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

    color:
        #777;

    font-size:
        8px;

    letter-spacing:
        .08em;

}


.shopify-secure {

    color:
        var(--shopify-gold);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .1em;

}


/* =========================================================
   STORE CONTENT
========================================================= */

.shopify-store-content {

    padding:
        22px;

    background:
        linear-gradient(
            145deg,
            #141414,
            #0c0c0c
        );

}


/* =========================================================
   STORE NAV
========================================================= */

.shopify-store-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

}


.shopify-store-nav strong {

    color:
        var(--shopify-white);

    font-size:
        12px;

    letter-spacing:
        .08em;

}


.shopify-store-nav div {

    display:
        flex;

    gap:
        7px;

}


.shopify-store-nav div span {

    width:
        28px;

    height:
        4px;

    border-radius:
        10px;

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

}


.shopify-store-nav div span:last-child {

    width:
        18px;

}


/* =========================================================
   STORE MAIN
========================================================= */

.shopify-store-main {

    display:
        grid;

    grid-template-columns:
        1fr .8fr;

    gap:
        28px;

    padding:
        38px 4px;

}


.shopify-store-copy {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.shopify-store-copy small {

    margin-bottom:
        13px;

    color:
        var(--shopify-gold);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .16em;

}


.shopify-store-copy h2 {

    max-width:
        260px;

    margin:
        0 0 14px;

    font-size:
        32px;

    line-height:
        .98;

    letter-spacing:
        -.045em;

}


.shopify-store-copy h2 em {

    color:
        var(--shopify-gold-light);

    font-style:
        normal;

}


.shopify-store-copy p {

    max-width:
        260px;

    margin:
        0 0 18px;

    color:
        #777;

    font-size:
        10px;

    line-height:
        1.6;

}


/* =========================================================
   STORE BUTTON
========================================================= */

.shopify-store-button {

    width:
        fit-content;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        9px 12px;

    color:
        #080808;

    background:
        var(--shopify-gold);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .1em;

}


.shopify-store-button span {

    font-size:
        12px;

}


/* =========================================================
   PRODUCT VISUAL
========================================================= */

.shopify-product-visual {

    position:
        relative;

    min-height:
        220px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(201,164,92,.16);

    border-radius:
        8px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(201,164,92,.2),
            transparent 52%
        ),
        #171717;

}


.shopify-product-glow {

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    top:
        25px;

    left:
        50%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(201,164,92,.08);

    filter:
        blur(20px);

}


.shopify-product-shape {

    position:
        absolute;

    width:
        100px;

    height:
        130px;

    top:
        43px;

    left:
        50%;

    transform:
        translateX(-50%)
        rotate(-5deg);

    border:
        1px solid
        rgba(201,164,92,.55);

    border-radius:
        10px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            rgba(201,164,92,.04)
        );

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.35);

}


/* =========================================================
   STORE STATS
========================================================= */

.shopify-store-stats {

    display:
        grid;

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

    gap:
        9px;

}


.shopify-store-stats > div {

    padding:
        14px;

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

    border-radius:
        6px;

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

}


.shopify-store-stats strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--shopify-gold-light);

    font-size:
        13px;

}


.shopify-store-stats span {

    color:
        #666;

    font-size:
        6px;

    font-weight:
        700;

    letter-spacing:
        .11em;

}


/* =========================================================
   FLOATING CARDS
========================================================= */

.shopify-floating-card {

    position:
        absolute;

    z-index:
        3;

    padding:
        11px 15px;

    border:
        1px solid
        rgba(201,164,92,.25);

    border-radius:
        5px;

    background:
        rgba(15,15,15,.9);

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.35);

    backdrop-filter:
        blur(12px);

    color:
        var(--shopify-white);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .1em;

}


.shopify-float-one {

    top:
        70px;

    right:
        -18px;

    color:
        var(--shopify-gold-light);

}


.shopify-float-one span {

    display:
        inline-grid;

    place-items:
        center;

    width:
        19px;

    height:
        19px;

    margin-right:
        7px;

    border-radius:
        4px;

    color:
        #080808;

    background:
        var(--shopify-gold);

}


.shopify-float-two {

    left:
        -22px;

    bottom:
        135px;

    color:
        #aaa;

}


.shopify-float-two strong {

    margin-left:
        7px;

    color:
        var(--shopify-gold);

}


.shopify-float-three {

    right:
        22px;

    bottom:
        48px;

    color:
        var(--shopify-gold-light);

}


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

@media (max-width: 1000px) {

    .shopify-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .shopify-hero-content {

        max-width:
            760px;

    }


    .shopify-hero-visual {

        min-height:
            440px;

    }

}


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

@media (max-width: 700px) {

    .shopify-page .container {

        width:
            calc(100% - 30px);

    }


    .shopify-hero {

        min-height:
            auto;

        padding:
            90px 0 75px;

    }


    .shopify-hero-content h1 {

        font-size:
            clamp(43px, 13vw, 62px);

    }


    .shopify-hero-content p {

        font-size:
            14px;

        line-height:
            1.75;

    }


    .shopify-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .shopify-page .service-primary-btn,
    .shopify-page .service-secondary-btn {

        width:
            100%;

    }


    .shopify-hero-trust {

        gap:
            8px;

        line-height:
            1.7;

    }


    .shopify-hero-visual {

        min-height:
            350px;

    }


    .shopify-store-card {

        width:
            100%;

        transform:
            none;

    }


    .shopify-floating-card {

        display:
            none;

    }


    .shopify-store-content {

        padding:
            15px;

    }


    .shopify-store-main {

        grid-template-columns:
            1fr;

        padding:
            25px 2px;

    }


    .shopify-product-visual {

        min-height:
            170px;

    }


    .shopify-store-stats > div {

        padding:
            10px;

    }


    .shopify-store-stats strong {

        font-size:
            10px;

    }


    .shopify-store-stats span {

        font-size:
            5px;

    }


    .shopify-section-heading {

        margin-bottom:
            45px;

    }


    .shopify-section-heading h2 {

        font-size:
            clamp(36px, 11vw, 50px);

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 420px) {

    .shopify-store-copy h2 {

        font-size:
            28px;

    }


    .shopify-store-stats {

        gap:
            6px;

    }

}



/* =========================================================
   GDS — SHOPIFY & E-COMMERCE
   CSS — PART 2/4
   ARCHITECTURE + SERVICES
========================================================= */


/* =========================================================
   E-COMMERCE ARCHITECTURE
========================================================= */

.shopify-architecture {

    position:
        relative;

    padding:
        120px 0;

    background:
        #090909;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

}


.shopify-system-grid {

    display:
        grid;

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

    gap:
        14px;

}


/* =========================================================
   SYSTEM CARD
========================================================= */

.shopify-system-card {

    position:
        relative;

    min-height:
        330px;

    padding:
        30px 25px;

    overflow:
        hidden;

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

    border-radius:
        8px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );

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

}


.shopify-system-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--shopify-gold),
            transparent
        );

    opacity:
        .45;

}


.shopify-system-card:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--shopify-border-gold);

    background:
        linear-gradient(
            145deg,
            rgba(201,164,92,.08),
            rgba(255,255,255,.015)
        );

}


/* =========================================================
   SYSTEM NUMBER
========================================================= */

.shopify-system-number {

    position:
        absolute;

    top:
        22px;

    right:
        22px;

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

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


/* =========================================================
   SYSTEM ICON
========================================================= */

.shopify-system-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        35px;

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

    border-radius:
        50%;

    color:
        var(--shopify-gold-light);

    background:
        rgba(201,164,92,.055);

    font-size:
        20px;

    transition:
        transform .35s ease,
        background .35s ease;

}


.shopify-system-card:hover
.shopify-system-icon {

    transform:
        rotate(8deg)
        scale(1.05);

    background:
        rgba(201,164,92,.12);

}


/* =========================================================
   SYSTEM LABEL
========================================================= */

.shopify-system-label {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--shopify-gold);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .16em;

}


/* =========================================================
   SYSTEM HEADING
========================================================= */

.shopify-system-card h3 {

    margin:
        0 0 15px;

    font-size:
        23px;

    line-height:
        1.15;

    letter-spacing:
        -.025em;

}


.shopify-system-card p {

    margin:
        0;

    color:
        var(--shopify-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


/* =========================================================
   SYSTEM SIGNAL
========================================================= */

.shopify-system-signal {

    position:
        absolute;

    left:
        25px;

    bottom:
        23px;

    color:
        #686868;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .16em;

}


.shopify-system-signal::before {

    content:
        "";

    display:
        inline-block;

    width:
        5px;

    height:
        5px;

    margin-right:
        7px;

    border-radius:
        50%;

    background:
        var(--shopify-gold);

}


/* =========================================================
   WHAT WE BUILD
========================================================= */

.shopify-services {

    padding:
        125px 0;

    background:
        #0b0b0b;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

}


/* =========================================================
   SERVICE GRID
========================================================= */

.shopify-service-grid {

    display:
        grid;

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

    gap:
        15px;

}


/* =========================================================
   SERVICE CARD
========================================================= */

.shopify-service-card {

    position:
        relative;

    min-height:
        360px;

    padding:
        32px 28px;

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

    border-radius:
        8px;

    background:
        #101010;

    overflow:
        hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


.shopify-service-card::after {

    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    right:
        -90px;

    bottom:
        -100px;

    border-radius:
        50%;

    background:
        rgba(201,164,92,.07);

    filter:
        blur(25px);

    transition:
        transform .5s ease;

}


.shopify-service-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(201,164,92,.3);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.3);

}


.shopify-service-card:hover::after {

    transform:
        scale(1.35);

}


/* =========================================================
   SERVICE INDEX
========================================================= */

.shopify-service-index {

    position:
        absolute;

    top:
        25px;

    right:
        25px;

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

    font-size:
        10px;

    font-weight:
        700;

}


/* =========================================================
   SERVICE ICON
========================================================= */

.shopify-service-icon {

    width:
        45px;

    height:
        45px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        28px;

    border:
        1px solid
        rgba(201,164,92,.25);

    border-radius:
        6px;

    color:
        var(--shopify-gold-light);

    background:
        rgba(201,164,92,.05);

    font-size:
        19px;

    transition:
        transform .35s ease,
        border-color .35s ease;

}


.shopify-service-card:hover
.shopify-service-icon {

    transform:
        translateY(-3px)
        rotate(4deg);

    border-color:
        rgba(201,164,92,.55);

}


/* =========================================================
   SERVICE LABEL
========================================================= */

.shopify-service-label {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--shopify-gold);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .16em;

}


/* =========================================================
   SERVICE HEADING
========================================================= */

.shopify-service-card h3 {

    margin:
        0 0 22px;

    font-size:
        22px;

    line-height:
        1.15;

    letter-spacing:
        -.025em;

}


/* =========================================================
   SERVICE LIST
========================================================= */

.shopify-service-card ul {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.shopify-service-card li {

    position:
        relative;

    padding-left:
        17px;

    color:
        #8d8d8d;

    font-size:
        12px;

    line-height:
        1.5;

}


.shopify-service-card li::before {

    content:
        "";

    position:
        absolute;

    top:
        .62em;

    left:
        0;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--shopify-gold);

}


/* =========================================================
   ARCHITECTURE + SERVICES TABLET
========================================================= */

@media (max-width: 1050px) {

    .shopify-system-grid {

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

    }


    .shopify-service-grid {

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

    }

}


/* =========================================================
   ARCHITECTURE + SERVICES MOBILE
========================================================= */

@media (max-width: 700px) {

    .shopify-architecture,
    .shopify-services {

        padding:
            85px 0;

    }


    .shopify-system-grid,
    .shopify-service-grid {

        grid-template-columns:
            1fr;

    }


    .shopify-system-card {

        min-height:
            300px;

    }


    .shopify-service-card {

        min-height:
            auto;

        padding:
            28px 23px;

    }


    .shopify-system-card h3,
    .shopify-service-card h3 {

        font-size:
            21px;

    }

}




/* =========================================================
   GDS — SHOPIFY & E-COMMERCE
   CSS — PART 3/4
   TRACKING + CONVERSION + PERFORMANCE
========================================================= */


/* =========================================================
   TRACKING INFRASTRUCTURE
========================================================= */

.shopify-tracking {

    position:
        relative;

    padding:
        125px 0;

    background:
        #080808;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

}


/* =========================================================
   TRACKING GRID
========================================================= */

.shopify-tracking-flow {

    display:
        grid;

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

    gap:
        14px;

}


/* =========================================================
   TRACKING CARD
========================================================= */

.shopify-tracking-card {

    position:
        relative;

    min-height:
        390px;

    padding:
        27px 24px;

    overflow:
        hidden;

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

    border-radius:
        8px;

    background:
        linear-gradient(
            145deg,
            #121212,
            #0d0d0d
        );

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


.shopify-tracking-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,164,92,.65),
            transparent
        );

    opacity:
        .6;

}


.shopify-tracking-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(201,164,92,.3);

    box-shadow:
        0 25px 65px
        rgba(0,0,0,.35);

}


/* =========================================================
   TRACKING TOP
========================================================= */

.shopify-tracking-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        27px;

}


.shopify-tracking-number {

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

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


.shopify-tracking-status {

    padding:
        5px 8px;

    border:
        1px solid
        rgba(201,164,92,.22);

    border-radius:
        3px;

    color:
        var(--shopify-gold);

    background:
        rgba(201,164,92,.04);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


/* =========================================================
   TRACKING ICON
========================================================= */

.shopify-tracking-icon {

    width:
        52px;

    height:
        52px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        25px;

    border:
        1px solid
        rgba(201,164,92,.3);

    border-radius:
        50%;

    color:
        var(--shopify-gold-light);

    background:
        radial-gradient(
            circle,
            rgba(201,164,92,.11),
            rgba(201,164,92,.025)
        );

    font-size:
        19px;

    font-weight:
        700;

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


.shopify-tracking-card:hover
.shopify-tracking-icon {

    transform:
        scale(1.07);

    box-shadow:
        0 0 30px
        rgba(201,164,92,.12);

}


/* =========================================================
   TRACKING LABEL
========================================================= */

.shopify-tracking-label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--shopify-gold);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .16em;

}


/* =========================================================
   TRACKING HEADING
========================================================= */

.shopify-tracking-card h3 {

    margin:
        0 0 15px;

    font-size:
        22px;

    line-height:
        1.15;

    letter-spacing:
        -.025em;

}


.shopify-tracking-card p {

    margin:
        0;

    color:
        var(--shopify-muted);

    font-size:
        12px;

    line-height:
        1.75;

}


/* =========================================================
   TRACKING LINE
========================================================= */

.shopify-tracking-line {

    position:
        absolute;

    left:
        24px;

    right:
        24px;

    bottom:
        48px;

    height:
        1px;

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

    overflow:
        hidden;

}


.shopify-tracking-line span {

    display:
        block;

    width:
        38%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--shopify-gold)
        );

}


/* =========================================================
   TRACKING SMALL TEXT
========================================================= */

.shopify-tracking-card small {

    position:
        absolute;

    left:
        24px;

    bottom:
        25px;

    color:
        #626262;

    font-size:
        6px;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


/* =========================================================
   DATA FLOW
========================================================= */

.shopify-data-flow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        55px;

    color:
        #777;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .15em;

}


.shopify-data-flow i {

    width:
        28px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--shopify-gold),
            transparent
        );

    opacity:
        .65;

}


/* =========================================================
   CONVERSION SYSTEM
========================================================= */

.shopify-conversion {

    padding:
        130px 0;

    background:
        #0b0b0b;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

}


.shopify-conversion-grid {

    display:
        grid;

    grid-template-columns:
        1fr .85fr;

    gap:
        85px;

    align-items:
        center;

}


/* =========================================================
   CONVERSION CONTENT
========================================================= */

.shopify-conversion-content h2 {

    max-width:
        600px;

    margin:
        0 0 22px;

    font-size:
        clamp(40px, 5vw, 66px);

    line-height:
        .98;

    letter-spacing:
        -.045em;

}


.shopify-conversion-content h2 span {

    display:
        block;

    color:
        var(--shopify-gold);

}


.shopify-conversion-content > p {

    max-width:
        620px;

    margin:
        0 0 40px;

    color:
        var(--shopify-muted);

    font-size:
        15px;

    line-height:
        1.8;

}


/* =========================================================
   CONVERSION POINTS
========================================================= */

.shopify-conversion-points {

    display:
        grid;

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

    gap:
        14px;

}


.shopify-conversion-points > div {

    padding:
        20px;

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

    border-radius:
        7px;

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

    transition:
        transform .3s ease,
        border-color .3s ease;

}


.shopify-conversion-points > div:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(201,164,92,.28);

}


.shopify-conversion-points > div > span {

    display:
        block;

    margin-bottom:
        14px;

    color:
        var(--shopify-gold);

    font-size:
        8px;

    font-weight:
        700;

}


.shopify-conversion-points strong {

    display:
        block;

    margin-bottom:
        8px;

    font-size:
        14px;

}


.shopify-conversion-points p {

    margin:
        0;

    color:
        #777;

    font-size:
        11px;

    line-height:
        1.65;

}


/* =========================================================
   FUNNEL VISUAL
========================================================= */

.shopify-conversion-visual {

    position:
        relative;

}


.shopify-funnel-card {

    padding:
        28px;

    border:
        1px solid
        rgba(201,164,92,.2);

    border-radius:
        10px;

    background:
        linear-gradient(
            145deg,
            #151515,
            #0d0d0d
        );

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.35);

}


/* =========================================================
   FUNNEL HEADER
========================================================= */

.shopify-funnel-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        20px;

    margin-bottom:
        25px;

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

}


.shopify-funnel-header span {

    color:
        #777;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .14em;

}


.shopify-funnel-header strong {

    color:
        var(--shopify-gold);

    font-size:
        7px;

    letter-spacing:
        .1em;

}


/* =========================================================
   FUNNEL
========================================================= */

.shopify-funnel {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.shopify-funnel-step {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding:
        15px;

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

    border-radius:
        6px;

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

    transition:
        transform .3s ease,
        border-color .3s ease;

}


.shopify-funnel-step:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(201,164,92,.25);

}


.shopify-funnel-step > span {

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border:
        1px solid
        rgba(201,164,92,.25);

    border-radius:
        50%;

    color:
        var(--shopify-gold);

    font-size:
        8px;

    font-weight:
        700;

}


.shopify-funnel-step strong {

    display:
        block;

    margin-bottom:
        4px;

    font-size:
        11px;

    letter-spacing:
        .08em;

}


.shopify-funnel-step small {

    color:
        #626262;

    font-size:
        7px;

    letter-spacing:
        .08em;

}


.shopify-funnel-connector {

    padding:
        0 0 0 22px;

    color:
        var(--shopify-gold);

    font-size:
        13px;

    opacity:
        .6;

}


.shopify-funnel-final {

    border-color:
        rgba(201,164,92,.25);

    background:
        rgba(201,164,92,.045);

}


/* =========================================================
   PERFORMANCE & SEO
========================================================= */

.shopify-performance {

    padding:
        125px 0;

    background:
        #080808;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

}


.shopify-performance-grid {

    display:
        grid;

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

    gap:
        14px;

}


/* =========================================================
   PERFORMANCE CARD
========================================================= */

.shopify-performance-card {

    position:
        relative;

    min-height:
        350px;

    padding:
        28px 24px;

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

    border-radius:
        8px;

    background:
        #101010;

    overflow:
        hidden;

    transition:
        transform .35s ease,
        border-color .35s ease;

}


.shopify-performance-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(201,164,92,.28);

}


/* =========================================================
   PERFORMANCE ICON
========================================================= */

.shopify-performance-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        25px;

    border:
        1px solid
        rgba(201,164,92,.28);

    border-radius:
        50%;

    color:
        var(--shopify-gold-light);

    background:
        rgba(201,164,92,.045);

    font-size:
        17px;

}


/* =========================================================
   PERFORMANCE LABEL
========================================================= */

.shopify-performance-card > span {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--shopify-gold);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .14em;

}


.shopify-performance-card h3 {

    margin:
        0 0 15px;

    font-size:
        21px;

    line-height:
        1.15;

}


.shopify-performance-card > p {

    margin:
        0;

    color:
        #858585;

    font-size:
        11px;

    line-height:
        1.75;

}


/* =========================================================
   PERFORMANCE METER
========================================================= */

.shopify-performance-meter {

    position:
        absolute;

    left:
        24px;

    right:
        24px;

    bottom:
        24px;

}


.shopify-performance-meter > div {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        8px;

}


.shopify-performance-meter span {

    color:
        #555;

    font-size:
        6px;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


.shopify-performance-meter strong {

    color:
        var(--shopify-gold);

    font-size:
        6px;

    letter-spacing:
        .1em;

}


.shopify-performance-meter i {

    display:
        block;

    width:
        100%;

    height:
        3px;

    overflow:
        hidden;

    border-radius:
        10px;

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

}


.shopify-performance-meter b {

    display:
        block;

    width:
        82%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            rgba(201,164,92,.35),
            var(--shopify-gold)
        );

}


/* =========================================================
   PERFORMANCE FOOTER
========================================================= */

.shopify-performance-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        13px;

    margin-top:
        48px;

    color:
        #666;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .15em;

}


.shopify-performance-footer i {

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--shopify-gold);

}


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

@media (max-width: 1050px) {

    .shopify-tracking-flow,
    .shopify-performance-grid {

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

    }


    .shopify-conversion-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }

}


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

@media (max-width: 700px) {

    .shopify-tracking,
    .shopify-conversion,
    .shopify-performance {

        padding:
            85px 0;

    }


    .shopify-tracking-flow,
    .shopify-performance-grid {

        grid-template-columns:
            1fr;

    }


    .shopify-tracking-card,
    .shopify-performance-card {

        min-height:
            330px;

    }


    .shopify-conversion-points {

        grid-template-columns:
            1fr;

    }


    .shopify-funnel-card {

        padding:
            20px;

    }

}



/* =========================================================
   GDS — SHOPIFY & E-COMMERCE
   CSS — PART 4/4
   AUTOMATION + FAQ + FINAL CTA + MOBILE
========================================================= */


/* =========================================================
   E-COMMERCE AUTOMATION
========================================================= */

.shopify-automation {

    padding:
        125px 0;

    background:
        #0b0b0b;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

}


.shopify-automation-grid {

    display:
        grid;

    grid-template-columns:
        1fr .9fr;

    gap:
        85px;

    align-items:
        center;

}


/* =========================================================
   AUTOMATION CONTENT
========================================================= */

.shopify-automation-content h2 {

    max-width:
        620px;

    margin:
        0 0 22px;

    font-size:
        clamp(40px, 5vw, 66px);

    line-height:
        .98;

    letter-spacing:
        -.045em;

}


.shopify-automation-content h2 span {

    display:
        block;

    color:
        var(--shopify-gold);

}


.shopify-automation-content > p {

    max-width:
        600px;

    margin:
        0 0 38px;

    color:
        var(--shopify-muted);

    font-size:
        15px;

    line-height:
        1.8;

}


/* =========================================================
   AUTOMATION LIST
========================================================= */

.shopify-automation-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

}


.shopify-automation-list > div {

    display:
        grid;

    grid-template-columns:
        38px 1fr;

    column-gap:
        15px;

    padding:
        18px 20px;

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

    border-radius:
        7px;

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

    transition:
        transform .3s ease,
        border-color .3s ease;

}


.shopify-automation-list > div:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(201,164,92,.28);

}


.shopify-automation-list > div > span {

    grid-row:
        span 2;

    color:
        var(--shopify-gold);

    font-size:
        8px;

    font-weight:
        700;

    padding-top:
        3px;

}


.shopify-automation-list strong {

    margin-bottom:
        5px;

    font-size:
        13px;

}


.shopify-automation-list p {

    margin:
        0;

    color:
        #707070;

    font-size:
        10px;

    line-height:
        1.6;

}


/* =========================================================
   AUTOMATION VISUAL
========================================================= */

.shopify-automation-visual {

    position:
        relative;

}


.shopify-automation-card {

    position:
        relative;

    padding:
        30px;

    border:
        1px solid
        rgba(201,164,92,.2);

    border-radius:
        10px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(201,164,92,.07),
            transparent 60%
        ),
        #101010;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.4);

}


/* =========================================================
   AUTOMATION HEADER
========================================================= */

.shopify-automation-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        22px;

    margin-bottom:
        38px;

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

}


.shopify-automation-header span {

    color:
        #777;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .15em;

}


.shopify-automation-header strong {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--shopify-gold);

    font-size:
        7px;

    letter-spacing:
        .12em;

}


.shopify-automation-header strong::before {

    content:
        "";

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--shopify-gold);

    box-shadow:
        0 0 10px
        rgba(201,164,92,.7);

}


/* =========================================================
   AUTOMATION FLOW
========================================================= */

.shopify-automation-flow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

}


.shopify-automation-node {

    width:
        100px;

    min-height:
        105px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border:
        1px solid
        rgba(201,164,92,.22);

    border-radius:
        8px;

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

    transition:
        transform .3s ease,
        border-color .3s ease;

}


.shopify-automation-node:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(201,164,92,.5);

}


.shopify-automation-node span {

    color:
        #666;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


.shopify-automation-node strong {

    color:
        var(--shopify-gold-light);

    font-size:
        23px;

}


.shopify-automation-arrow {

    color:
        var(--shopify-gold);

    font-size:
        17px;

    opacity:
        .7;

}


/* =========================================================
   AUTOMATION STATUS
========================================================= */

.shopify-automation-status {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        35px;

    color:
        #666;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .14em;

}


.shopify-automation-status span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--shopify-gold);

}


/* =========================================================
   FAQ
========================================================= */

.shopify-faq {

    padding:
        125px 0;

    background:
        #080808;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

}


.shopify-faq-grid {

    display:
        grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap:
        90px;

    align-items:
        start;

}


/* =========================================================
   FAQ INTRO
========================================================= */

.shopify-faq-intro {

    position:
        sticky;

    top:
        110px;

}


.shopify-faq-intro h2 {

    margin:
        0 0 20px;

    font-size:
        clamp(40px, 5vw, 60px);

    line-height:
        .98;

    letter-spacing:
        -.045em;

}


.shopify-faq-intro h2 span {

    display:
        block;

    color:
        var(--shopify-gold);

}


.shopify-faq-intro p {

    max-width:
        420px;

    margin:
        0;

    color:
        var(--shopify-muted);

    font-size:
        14px;

    line-height:
        1.8;

}


/* =========================================================
   FAQ LIST
========================================================= */

.shopify-faq-list {

    border-top:
        1px solid
        rgba(255,255,255,.08);

}


.shopify-faq-item {

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

}


.shopify-faq-question {

    width:
        100%;

    min-height:
        75px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--shopify-white);

    cursor:
        pointer;

    text-align:
        left;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        600;

}


.shopify-faq-question strong {

    flex-shrink:
        0;

    width:
        28px;

    height:
        28px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(201,164,92,.25);

    border-radius:
        50%;

    color:
        var(--shopify-gold);

    font-size:
        16px;

    font-weight:
        400;

    transition:
        transform .3s ease,
        background .3s ease;

}


.shopify-faq-question:hover {

    color:
        var(--shopify-gold-light);

}


.shopify-faq-answer {

    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows .4s
        cubic-bezier(.16,1,.3,1);

}


.shopify-faq-answer p {

    min-height:
        0;

    overflow:
        hidden;

    margin:
        0;

    padding:
        0;

    color:
        #777;

    font-size:
        13px;

    line-height:
        1.8;

    transition:
        padding .4s ease;

}


.shopify-faq-item.shopify-faq-open
.shopify-faq-answer {

    grid-template-rows:
        1fr;

}


.shopify-faq-item.shopify-faq-open
.shopify-faq-answer p {

    padding:
        0 45px 24px 0;

}


.shopify-faq-item.shopify-faq-open
.shopify-faq-question strong {

    transform:
        rotate(45deg);

    background:
        rgba(201,164,92,.08);

}


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

.shopify-final-cta {

    padding:
        100px 0 120px;

    background:
        #080808;

}


.shopify-final-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        50px;

    padding:
        55px 60px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(201,164,92,.28);

    border-radius:
        10px;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(201,164,92,.12),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #151515,
            #0d0d0d
        );

}


.shopify-final-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        35%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            var(--shopify-gold),
            transparent
        );

}


/* =========================================================
   FINAL CONTENT
========================================================= */

.shopify-final-content {

    position:
        relative;

    z-index:
        2;

}


.shopify-final-content > span {

    display:
        block;

    margin-bottom:
        14px;

    color:
        var(--shopify-gold);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .18em;

}


.shopify-final-content h2 {

    max-width:
        700px;

    margin:
        0 0 17px;

    font-size:
        clamp(36px, 5vw, 62px);

    line-height:
        .98;

    letter-spacing:
        -.045em;

}


.shopify-final-content h2 em {

    color:
        var(--shopify-gold-light);

    font-style:
        normal;

}


.shopify-final-content p {

    max-width:
        650px;

    margin:
        0;

    color:
        #858585;

    font-size:
        14px;

    line-height:
        1.75;

}


/* =========================================================
   FINAL ACTION
========================================================= */

.shopify-final-action {

    position:
        relative;

    z-index:
        2;

    flex-shrink:
        0;

}


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

@media (max-width: 1000px) {

    .shopify-automation-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .shopify-faq-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .shopify-faq-intro {

        position:
            static;

    }


    .shopify-final-card {

        padding:
            45px;

    }

}


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

@media (max-width: 700px) {

    .shopify-automation,
    .shopify-faq {

        padding:
            85px 0;

    }


    .shopify-automation-flow {

        gap:
            6px;

    }


    .shopify-automation-node {

        width:
            82px;

        min-height:
            90px;

    }


    .shopify-automation-arrow {

        font-size:
            13px;

    }


    .shopify-faq-question {

        min-height:
            68px;

        font-size:
            13px;

    }


    .shopify-faq-item.shopify-faq-open
    .shopify-faq-answer p {

        padding:
            0 35px 20px 0;

    }


    .shopify-final-cta {

        padding:
            70px 0 85px;

    }


    .shopify-final-card {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            35px 25px;

    }


    .shopify-final-content h2 {

        font-size:
            clamp(34px, 10vw, 48px);

    }


    .shopify-final-action {

        width:
            100%;

    }


    .shopify-final-action
    .service-primary-btn {

        width:
            100%;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 420px) {

    .shopify-automation-flow {

        gap:
            3px;

    }


    .shopify-automation-node {

        width:
            76px;

        min-height:
            84px;

    }


    .shopify-automation-node strong {

        font-size:
            19px;

    }


    .shopify-automation-node span {

        font-size:
            6px;

    }


    .shopify-automation-arrow {

        font-size:
            11px;

    }

}


/* =========================================================
   SAFETY
   KEEP CONTENT VISIBLE IF JS IS NOT LOADED
========================================================= */

.shopify-page
.shopify-system-card,
.shopify-page
.shopify-service-card,
.shopify-page
.shopify-tracking-card,
.shopify-page
.shopify-performance-card {

    visibility:
        visible;

}