/* =========================================================
   GDS — DIGITAL MARKETING
   PREMIUM SERVICE PAGE
   CSS — PART 1
========================================================= */


/* =========================================================
   BASE
========================================================= */

.digital-marketing-page {

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(112,106,255,.08),
            transparent 28%
        );

}


.digital-marketing-page *,
.digital-marketing-page *::before,
.digital-marketing-page *::after {

    box-sizing: border-box;

}


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

.marketing-hero {

    position: relative;

    min-height: 820px;

    display: flex;

    align-items: center;

    padding:
        150px 0
        110px;

    overflow: hidden;

}


.marketing-hero::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    top: -260px;

    right: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(112,106,255,.13),
            transparent 68%
        );

    pointer-events: none;

}


.marketing-hero::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    left: -220px;

    bottom: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(129,122,255,.08),
            transparent 70%
        );

    pointer-events: none;

}


.marketing-hero .service-hero-container {

    position: relative;

    z-index: 2;

}


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

.marketing-hero .service-hero-content {

    position: relative;

    z-index: 3;

}


.marketing-hero .service-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .24em;

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

}


.marketing-hero .service-eyebrow-line {

    width: 42px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #817aff
        );

}


.marketing-hero .service-hero-title {

    max-width: 760px;

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(52px, 6.5vw, 92px);

    line-height: .96;

    letter-spacing: -.06em;

    font-weight: 700;

    color: #fff;

}


.marketing-hero .service-hero-title span {

    display: block;

    background:
        linear-gradient(
            110deg,
            #ffffff 5%,
            #aaa5ff 48%,
            #706aff 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.marketing-hero .service-hero-description {

    max-width: 610px;

    margin:
        30px 0 0;

    font-size: 16px;

    line-height: 1.85;

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

}


.marketing-hero .service-hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 34px;

}


.marketing-hero .service-primary-btn,
.marketing-hero .service-secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-height: 50px;

    padding:
        0 22px;

    border-radius: 999px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .04em;

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

}


.marketing-hero .service-primary-btn {

    border:
        1px solid
        rgba(129,122,255,.55);

    background:
        linear-gradient(
            135deg,
            #817aff,
            #625cff
        );

    color: #fff;

    box-shadow:
        0 15px 40px
        rgba(112,106,255,.2);

}


.marketing-hero .service-primary-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 50px
        rgba(112,106,255,.3);

}


.marketing-hero .service-secondary-btn {

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

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

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

}


.marketing-hero .service-secondary-btn:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(129,122,255,.3);

    background:
        rgba(129,122,255,.08);

}


.marketing-hero .service-hero-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .17em;

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

}


.marketing-hero .service-meta-dot {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #817aff;

    box-shadow:
        0 0 12px
        rgba(129,122,255,.7);

}


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

.marketing-hero-visual {

    position: relative;

    min-height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.marketing-hero-visual .service-visual-glow {

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(112,106,255,.18),
            transparent 67%
        );

    filter: blur(8px);

    animation:
        marketingGlow 5s
        ease-in-out
        infinite alternate;

}


@keyframes marketingGlow {

    from {
        transform: scale(.92);
        opacity: .65;
    }

    to {
        transform: scale(1.08);
        opacity: 1;
    }

}


.marketing-dashboard {

    position: relative;

    z-index: 2;

    width:
        min(100%, 500px);

    min-height: 390px;

    overflow: hidden;

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

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(129,122,255,.16),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.35),
        0 0 80px
        rgba(112,106,255,.08);

    backdrop-filter:
        blur(18px);

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

    transition:
        transform .6s ease;

}


.marketing-dashboard:hover {

    transform:
        perspective(1200px)
        rotateY(0)
        rotateX(0)
        translateY(-6px);

}


.marketing-dashboard-top {

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 20px;

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

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .15em;

}


.dashboard-dots {

    display: flex;

    gap: 6px;

}


.dashboard-dots span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

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

}


.marketing-dashboard-content {

    padding:
        34px 30px;

}


.dashboard-label {

    display: block;

    margin-bottom: 14px;

    font-size: 8px;

    letter-spacing: .16em;

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

}


.dashboard-growth {

    display: flex;

    align-items: baseline;

    gap: 12px;

}


.dashboard-growth strong {

    font-size: 54px;

    line-height: 1;

    letter-spacing: -.06em;

    color: #fff;

}


.dashboard-growth span {

    font-size: 10px;

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

}


.dashboard-chart {

    position: relative;

    height: 120px;

    display: flex;

    align-items: flex-end;

    gap: 9px;

    margin-top: 35px;

    padding:
        0 4px;

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

}


.dashboard-chart span {

    flex: 1;

    min-width: 10px;

    border-radius:
        5px 5px 0 0;

    background:
        linear-gradient(
            180deg,
            #817aff,
            rgba(129,122,255,.15)
        );

    box-shadow:
        0 0 18px
        rgba(129,122,255,.12);

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    opacity: .75;

    transition:
        transform 1.1s
        cubic-bezier(.22,1,.36,1),
        opacity .5s ease,
        background .6s ease,
        box-shadow .6s ease;
}


/* =========================================
   ORIGINAL BAR HEIGHTS
========================================= */

.dashboard-chart span:nth-child(1) {
    height: 24%;
}

.dashboard-chart span:nth-child(2) {
    height: 38%;
}

.dashboard-chart span:nth-child(3) {
    height: 31%;
}

.dashboard-chart span:nth-child(4) {
    height: 52%;
}

.dashboard-chart span:nth-child(5) {
    height: 64%;
}

.dashboard-chart span:nth-child(6) {
    height: 76%;
}

.dashboard-chart span:nth-child(7) {
    height: 96%;
}


/* =========================================
   SCROLL / ACTIVE ANIMATION
========================================= */

.dashboard-chart.is-animated span {

    transform:
        scaleY(1);

    opacity: 1;
}


/* =========================================
   STAGGER
========================================= */

.dashboard-chart.is-animated span:nth-child(1) {
    transition-delay: .05s;
}

.dashboard-chart.is-animated span:nth-child(2) {
    transition-delay: .15s;
}

.dashboard-chart.is-animated span:nth-child(3) {
    transition-delay: .25s;
}

.dashboard-chart.is-animated span:nth-child(4) {
    transition-delay: .35s;
}

.dashboard-chart.is-animated span:nth-child(5) {
    transition-delay: .45s;
}

.dashboard-chart.is-animated span:nth-child(6) {
    transition-delay: .55s;
}

.dashboard-chart.is-animated span:nth-child(7) {
    transition-delay: .65s;
}


/* =========================================
   FINAL BAR = GROWTH
========================================= */

.dashboard-chart.is-animated span:last-child {

    background:
        linear-gradient(
            180deg,
            #58e6a5,
            rgba(88,230,165,.18)
        );

    box-shadow:
        0 0 24px
        rgba(88,230,165,.28);
}


.dashboard-stats {

    display: grid;

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

    gap: 10px;

    margin-top: 24px;

}


.dashboard-stats div {

    padding:
        13px;

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

    border-radius: 12px;

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

}


.dashboard-stats small {

    display: block;

    margin-bottom: 7px;

    font-size: 7px;

    letter-spacing: .13em;

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

}


.dashboard-stats strong {

    font-size: 15px;

    color: #fff;

}



/* =========================================================
   PREMIUM PROBLEM → GROWTH TRANSFORMATION
========================================================= */

.marketing-transformation {

    position: relative;

    padding:
        150px 0;

    overflow: hidden;
}


/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

.marketing-transformation::before {

    content: "";

    position: absolute;

    top: 12%;
    left: 50%;

    width: 850px;
    height: 650px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(112,106,255,.10),
            transparent 68%
        );

    filter:
        blur(12px);

    pointer-events: none;
}


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

.transformation-heading {

    position: relative;

    z-index: 2;

    max-width:
        900px;

    margin:
        0 auto 65px;

    text-align:
        center;
}


.transformation-heading .service-eyebrow {

    justify-content:
        center;
}


.transformation-heading h2 {

    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(44px, 5.5vw, 76px);

    line-height:
        .98;

    letter-spacing:
        -.055em;

    color:
        #fff;
}


.transformation-heading h2 span {

    display:
        block;

    background:
        linear-gradient(
            110deg,
            #fff,
            #aaa5ff,
            #706aff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.transformation-heading p {

    max-width:
        650px;

    margin:
        25px auto 0;

    font-size:
        15px;

    line-height:
        1.8;

    color:
        rgba(255,255,255,.45);
}


/* =========================================================
   MAIN STAGE
========================================================= */

.marketing-transformation-stage {

    position:
        relative;

    width:
        100%;

    min-height:
        620px;

    overflow:
        hidden;

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

    border-radius:
        32px;

    background:

        radial-gradient(
            circle at 50% 40%,
            rgba(112,106,255,.10),
            transparent 58%
        ),

        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        );

    box-shadow:

        0 40px 120px
        rgba(0,0,0,.30),

        inset 0 1px 0
        rgba(255,255,255,.035);

}


/* =========================================================
   CINEMATIC LIGHT SWEEP
========================================================= */

.marketing-transformation-stage::before {

    content:
        "";

    position:
        absolute;

    top:
        -20%;

    left:
        -35%;

    width:
        35%;

    height:
        140%;

    z-index:
        8;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(170,165,255,.08),
            rgba(255,255,255,.18),
            rgba(170,165,255,.08),
            transparent
        );

    filter:
        blur(18px);

    transform:
        skewX(-18deg);

    opacity:
        0;

}


/*
 * JS can add .is-transforming during
 * the actual transformation moment.
 */

.marketing-transformation-stage.is-transforming::before {

    animation:
        transformationLightSweep
        1.35s
        cubic-bezier(.16,1,.3,1)
        forwards;

}


@keyframes transformationLightSweep {

    0% {

        left:
            -40%;

        opacity:
            0;

    }

    18% {

        opacity:
            .9;

    }

    55% {

        opacity:
            1;

    }

    100% {

        left:
            115%;

        opacity:
            0;

    }

}


/* =========================================================
   STATES
========================================================= */

.marketing-state {

    position:
        absolute;

    inset:
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        30px;

    padding:
        55px;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        scale(1.015);

    filter:
        blur(4px);

    transition:

        opacity
        .85s
        cubic-bezier(.16,1,.3,1),

        transform
        1.1s
        cubic-bezier(.16,1,.3,1),

        filter
        .85s
        ease,

        visibility
        .85s
        ease;

}


.marketing-state.active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        scale(1);

    filter:
        blur(0);

}


/* =========================================================
   STATE VISUAL
========================================================= */

.marketing-state-visual {

    position:
        relative;

    height:
        500px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
   AMBIENT GLOW
========================================================= */

.marketing-state-visual::before {

    content:
        "";

    position:
        absolute;

    width:
        430px;

    height:
        430px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(112,106,255,.16),
            rgba(112,106,255,.05) 35%,
            transparent 70%
        );

    filter:
        blur(8px);

    transform:
        scale(.88);

    opacity:
        .65;

    transition:

        transform
        1.4s
        cubic-bezier(.16,1,.3,1),

        opacity
        1s
        ease;

}


.marketing-state.active
.marketing-state-visual::before {

    transform:
        scale(1.08);

    opacity:
        1;

}


/* =========================================================
   STATE IMAGE
========================================================= */

.marketing-state-visual img {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    width:
        100%;

    max-width:
        570px;

    height:
        auto;

    object-fit:
        contain;

    filter:

        drop-shadow(
            0 35px 60px
            rgba(0,0,0,.38)
        )

        brightness(.88)
        saturate(.88);

    transform:

        translateY(28px)
        scale(.94);

    opacity:
        0;

    filter:

        blur(5px)
        brightness(.88)
        saturate(.88);

    transition:

        transform
        1.25s
        cubic-bezier(.16,1,.3,1),

        opacity
        .85s
        ease,

        filter
        1.1s
        cubic-bezier(.16,1,.3,1);

}


.marketing-state.active
.marketing-state-visual img {

    transform:

        translateY(0)
        scale(1);

    opacity:
        1;

    filter:

        blur(0)
        brightness(1)
        saturate(1)

        drop-shadow(
            0 35px 60px
            rgba(0,0,0,.38)
        );

}


/* =========================================================
   STATE CONTENT
========================================================= */

.marketing-state-content {

    position:
        relative;

    z-index:
        4;

    max-width:
        430px;

    opacity:
        0;

    transform:
        translateY(22px);

    transition:

        opacity
        .75s
        ease
        .12s,

        transform
        .9s
        cubic-bezier(.16,1,.3,1)
        .12s;

}


.marketing-state.active
.marketing-state-content {

    opacity:
        1;

    transform:
        translateY(0);

}


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

.marketing-state-label {

    display:
        inline-flex;

    padding:
        8px 12px;

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

    border-radius:
        999px;

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

    box-shadow:

        0 0 25px
        rgba(112,106,255,.05);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .18em;

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

}


/* =========================================================
   TITLE
========================================================= */

.marketing-state-content h3 {

    margin:
        22px 0 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(38px, 4vw, 62px);

    line-height:
        .98;

    letter-spacing:
        -.05em;

    color:
        #fff;

}


.marketing-state-content h3 span {

    display:
        block;

    background:

        linear-gradient(
            110deg,
            #fff,
            #aaa5ff,
            #817aff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.marketing-state-content p {

    margin:
        24px 0 0;

    font-size:
        14px;

    line-height:
        1.8;

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

}


/* =========================================================
   TRANSFORMATION INDICATOR
========================================================= */

.marketing-transformation-indicator {

    position:
        absolute;

    left:
        50%;

    bottom:
        48px;

    z-index:
        10;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    transform:
        translateX(-50%);

}


.marketing-transformation-indicator span {

    width:
        65px;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(129,122,255,.55)
        );

    opacity:
        .7;

}


.marketing-transformation-indicator span:last-child {

    background:

        linear-gradient(
            90deg,
            rgba(129,122,255,.55),
            transparent
        );

}


.marketing-indicator-dot {

    position:
        relative;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #aaa5ff;

    box-shadow:

        0 0 0 5px
        rgba(129,122,255,.07),

        0 0 20px
        rgba(129,122,255,.7),

        0 0 45px
        rgba(129,122,255,.25);

    animation:

        transformationPulse
        2.4s
        cubic-bezier(.16,1,.3,1)
        infinite;

}


.marketing-indicator-dot::after {

    content:
        "";

    position:
        absolute;

    inset:
        -7px;

    border:
        1px solid
        rgba(170,165,255,.22);

    border-radius:
        50%;

    animation:

        indicatorRing
        2.4s
        ease-out
        infinite;

}


@keyframes transformationPulse {

    0%,
    100% {

        transform:
            scale(1);

        box-shadow:

            0 0 0 5px
            rgba(129,122,255,.07),

            0 0 20px
            rgba(129,122,255,.7);

    }

    50% {

        transform:
            scale(1.35);

        box-shadow:

            0 0 0 8px
            rgba(129,122,255,.04),

            0 0 35px
            rgba(129,122,255,.9);

    }

}


@keyframes indicatorRing {

    0% {

        transform:
            scale(.7);

        opacity:
            .7;

    }

    100% {

        transform:
            scale(1.9);

        opacity:
            0;

    }

}


/* =========================================================
   PROGRESS BAR
========================================================= */

.marketing-transformation-progress {

    position:
        absolute;

    left:
        55px;

    right:
        55px;

    bottom:
        22px;

    height:
        2px;

    overflow:
        hidden;

    border-radius:
        999px;

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

}


.marketing-transformation-progress::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(170,165,255,.12),
            transparent
        );

    animation:
        progressShimmer
        2.4s
        linear
        infinite;

}


.marketing-transformation-progress span {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    width:
        0;

    height:
        100%;

    border-radius:
        inherit;

    background:

        linear-gradient(
            90deg,
            #706aff,
            #aaa5ff,
            #d4d1ff
        );

    box-shadow:

        0 0 15px
        rgba(129,122,255,.55);

}


@keyframes progressShimmer {

    0% {

        transform:
            translateX(-100%);

    }

    100% {

        transform:
            translateX(100%);

    }

}


/* =========================================================
   TRANSFORMATION POINTS
========================================================= */

.marketing-transformation-points {

    display:
        grid;

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

    gap:
        18px;

    margin-top:
        22px;

}


.marketing-transformation-point {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        18px;

    padding:
        24px;

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

    border-radius:
        20px;

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

    transition:

        transform
        .45s
        cubic-bezier(.16,1,.3,1),

        border-color
        .45s
        ease,

        background
        .45s
        ease;

}


.marketing-transformation-point:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(129,122,255,.22);

    background:
        rgba(129,122,255,.035);

}


.marketing-transformation-point > span {

    font-size:
        9px;

    letter-spacing:
        .14em;

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

}


.marketing-transformation-point strong {

    display:
        block;

    font-size:
        13px;

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

}


.marketing-transformation-point p {

    margin:
        8px 0 0;

    font-size:
        12px;

    line-height:
        1.7;

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

}


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

@media (max-width: 1000px) {

    .marketing-state {

        grid-template-columns:
            1fr;

        text-align:
            center;

        padding:
            45px;

    }


    .marketing-state-visual {

        height:
            360px;

    }


    .marketing-state-content {

        max-width:
            600px;

        margin:
            0 auto;

    }


    .marketing-state-content h3 span {

        display:
            inline;

    }


    .marketing-transformation-stage {

        min-height:
            800px;

    }

}



/* =========================================================
   GDS — DIGITAL MARKETING
   CSS — PART 2
========================================================= */


/* =========================================================
   MARKETING SOLUTIONS
========================================================= */

.marketing-solutions {

    position: relative;

    padding:
        150px 0;

}


.marketing-solutions .service-section-heading {

    max-width: 850px;

    margin-bottom: 65px;

}


.marketing-solutions
.service-section-heading h2 {

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(44px, 5.5vw, 76px);

    line-height: 1;

    letter-spacing: -.055em;

    color: #fff;

}


.marketing-solutions
.service-section-heading h2 span {

    display: block;

    background:
        linear-gradient(
            110deg,
            #fff,
            #aaa5ff,
            #706aff
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.marketing-solutions
.service-section-heading p {

    max-width: 650px;

    margin:
        25px 0 0;

    font-size: 15px;

    line-height: 1.8;

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

}


/* =========================================================
   SOLUTIONS GRID
========================================================= */

.marketing-solutions-grid {

    display: grid;

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

    gap: 16px;

}


.marketing-solution-card {

    position: relative;

    min-height: 330px;

    padding: 30px;

    overflow: hidden;

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

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(112,106,255,.11),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.18);

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

}


.marketing-solution-card::before {

    content: "";

    position: absolute;

    width: 150px;

    height: 150px;

    right: -70px;

    top: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(129,122,255,.16),
            transparent 70%
        );

    opacity: .6;

    transition:
        transform .5s ease;

}


.marketing-solution-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(129,122,255,.25);

    box-shadow:
        0 35px 90px
        rgba(0,0,0,.3),
        0 0 45px
        rgba(112,106,255,.06);

}


.marketing-solution-card:hover::before {

    transform:
        scale(1.5);

}


.marketing-solution-number {

    position: absolute;

    top: 25px;

    right: 27px;

    font-size: 9px;

    letter-spacing: .15em;

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

}


.marketing-solution-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    margin-bottom: 55px;

    border:
        1px solid
        rgba(129,122,255,.2);

    border-radius: 14px;

    background:
        rgba(129,122,255,.08);

    color:
        #aaa5ff;

    font-size: 18px;

    box-shadow:
        0 0 30px
        rgba(129,122,255,.06);

}


.marketing-solution-card h3 {

    position: relative;

    z-index: 2;

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 22px;

    line-height: 1.15;

    letter-spacing: -.035em;

    color: #fff;

}


.marketing-solution-card p {

    position: relative;

    z-index: 2;

    margin:
        14px 0 0;

    font-size: 12px;

    line-height: 1.75;

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

}


.marketing-solution-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 24px;

}


.marketing-solution-tags span {

    padding:
        6px 9px;

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

    border-radius: 999px;

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

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;

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

}


/* =========================================================
   AI CREATIVE
========================================================= */

.marketing-creative {

    position: relative;

    padding:
        150px 0;

    overflow: hidden;

}


.marketing-creative::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 450px;

    left: 50%;

    top: 35%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(112,106,255,.08),
            transparent 70%
        );

    pointer-events: none;

}


.marketing-creative
.service-section-heading {

    position: relative;

    z-index: 2;

    max-width: 800px;

    margin-bottom: 60px;

}


.marketing-creative
.service-section-heading h2 {

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(44px, 5.5vw, 76px);

    line-height: 1;

    letter-spacing: -.055em;

    color: #fff;

}


.marketing-creative
.service-section-heading h2 span {

    display: block;

    background:
        linear-gradient(
            110deg,
            #fff,
            #aaa5ff,
            #706aff
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.marketing-creative
.service-section-heading p {

    max-width: 600px;

    margin:
        25px 0 0;

    font-size: 15px;

    line-height: 1.8;

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

}


/* =========================================================
   VIDEO SHOWCASE
========================================================= */

.marketing-video-showcase {

    position: relative;

    min-height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

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

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(129,122,255,.12),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.012)
        );

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

}


.marketing-video-showcase::before {

    content: "";

    position: absolute;

    inset: 20px;

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

    border-radius: 24px;

    pointer-events: none;

}


.marketing-video-placeholder {

    position: relative;

    z-index: 2;

    max-width: 500px;

    padding: 40px;

    text-align: center;

}


.marketing-video-placeholder > span {

    display: inline-flex;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(129,122,255,.2);

    border-radius: 999px;

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .17em;

    color:
        rgba(170,165,255,.75);

}


.marketing-video-placeholder h3 {

    margin:
        22px 0 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(30px, 4vw, 48px);

    line-height: 1;

    letter-spacing: -.045em;

    color: #fff;

}


.marketing-video-placeholder p {

    margin:
        18px 0 0;

    font-size: 13px;

    line-height: 1.75;

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

}


.marketing-video-placeholder a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 28px;

    padding:
        13px 20px;

    border:
        1px solid
        rgba(129,122,255,.25);

    border-radius: 999px;

    background:
        rgba(129,122,255,.08);

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

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

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

}


.marketing-video-placeholder a:hover {

    transform:
        translateY(-3px);

    background:
        rgba(129,122,255,.14);

}


/* =========================================================
   GROWTH SYSTEM
========================================================= */

.marketing-growth-system {

    position: relative;

    padding:
        150px 0;

}


.marketing-growth-grid {

    display: grid;

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

    gap: 90px;

    align-items: start;

}


.marketing-growth-grid h2 {

    margin: 25px 0 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(44px, 5vw, 72px);

    line-height: 1;

    letter-spacing: -.055em;

    color: #fff;

}


.marketing-growth-grid h2 span {

    display: block;

    background:
        linear-gradient(
            110deg,
            #fff,
            #aaa5ff,
            #706aff
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.marketing-growth-lead {

    max-width: 600px;

    margin:
        0 0 45px;

    font-size: 17px;

    line-height: 1.75;

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

}


.marketing-growth-steps {

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

}


.marketing-growth-steps > div {

    display: grid;

    grid-template-columns:
        45px 150px 1fr;

    gap: 20px;

    align-items: center;

    min-height: 82px;

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

}


.marketing-growth-steps > div > span {

    font-size: 9px;

    letter-spacing: .13em;

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

}


.marketing-growth-steps strong {

    font-size: 14px;

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

}


.marketing-growth-steps p {

    margin: 0;

    font-size: 11px;

    line-height: 1.6;

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

}


/* =========================================================
   RESULTS
========================================================= */

.marketing-results {

    position: relative;

    padding:
        150px 0;

}


.marketing-results
.service-section-heading {

    max-width: 750px;

    margin-bottom: 60px;

}


.marketing-results
.service-section-heading h2 {

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(44px, 5.5vw, 76px);

    line-height: 1;

    letter-spacing: -.055em;

    color: #fff;

}


.marketing-results
.service-section-heading h2 span {

    display: block;

    background:
        linear-gradient(
            110deg,
            #fff,
            #aaa5ff,
            #706aff
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.marketing-results
.service-section-heading p {

    margin-top: 22px;

    font-size: 14px;

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

}


.marketing-results-grid {

    display: grid;

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

    gap: 1px;

    overflow: hidden;

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

    border-radius: 24px;

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

}


.marketing-results-grid > div {

    min-height: 220px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 28px;

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

    transition:
        background .4s ease;

}


.marketing-results-grid > div:hover {

    background:
        linear-gradient(
            145deg,
            rgba(129,122,255,.11),
            rgba(255,255,255,.02)
        );

}


.marketing-results-grid strong {

    font-family:
        "Manrope",
        sans-serif;

    font-size: 25px;

    letter-spacing: -.035em;

    color: #fff;

}


.marketing-results-grid span {

    margin-top: 10px;

    font-size: 11px;

    line-height: 1.65;

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

}


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

@media (max-width: 1000px) {

    .marketing-solutions-grid {

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

    }


    .marketing-growth-grid {

        grid-template-columns:
            1fr;

        gap: 55px;

    }


    .marketing-results-grid {

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

    }

}


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

@media (max-width: 700px) {

    .marketing-solutions,
    .marketing-creative,
    .marketing-growth-system,
    .marketing-results {

        padding:
            100px 0;

    }


    .marketing-solutions-grid {

        grid-template-columns:
            1fr;

    }


    .marketing-solution-card {

        min-height: 290px;

    }


    .marketing-video-showcase {

        min-height: 400px;

    }


    .marketing-growth-steps > div {

        grid-template-columns:
            35px 120px 1fr;

        gap: 12px;

    }

}



/* =========================================================
   GDS — DIGITAL MARKETING
   CSS — PART 3
========================================================= */


/* =========================================================
   PROCESS
========================================================= */

.marketing-process {

    position: relative;

    padding:
        150px 0;

}


.marketing-process
.service-section-heading {

    max-width: 750px;

    margin-bottom: 60px;

}


.marketing-process
.service-section-heading h2 {

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(44px, 5.5vw, 76px);

    line-height: 1;

    letter-spacing: -.055em;

    color: #fff;

}


.marketing-process
.service-section-heading h2 span {

    display: block;

    background:
        linear-gradient(
            110deg,
            #fff,
            #aaa5ff,
            #706aff
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.marketing-process .service-process-list {

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

}


.marketing-process .service-process-list article {

    display: grid;

    grid-template-columns:
        80px 1fr;

    gap: 35px;

    padding:
        35px 0;

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

    transition:
        padding-left .35s ease,
        background .35s ease;

}


.marketing-process .service-process-list article:hover {

    padding-left:
        15px;

}


.marketing-process .service-process-list article > span {

    font-size: 10px;

    letter-spacing: .15em;

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

}


.marketing-process .service-process-list h3 {

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 24px;

    letter-spacing: -.035em;

    color: #fff;

}


.marketing-process .service-process-list p {

    max-width: 650px;

    margin:
        10px 0 0;

    font-size: 13px;

    line-height: 1.75;

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

}


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

.marketing-faq {

    position: relative;

    padding:
        150px 0;

}


.marketing-faq
.service-section-heading {

    max-width: 700px;

    margin-bottom: 55px;

}


.marketing-faq
.service-section-heading h2 {

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(44px, 5.5vw, 76px);

    line-height: 1;

    letter-spacing: -.055em;

    color: #fff;

}


.marketing-faq
.service-section-heading h2 span {

    display: block;

    background:
        linear-gradient(
            110deg,
            #fff,
            #aaa5ff,
            #706aff
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.marketing-faq .service-faq-list {

    max-width: 900px;

    margin: 0 auto;

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

}


.marketing-faq details {

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

}


.marketing-faq summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding:
        25px 5px;

    cursor: pointer;

    list-style: none;

    font-size: 15px;

    font-weight: 600;

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

}


.marketing-faq summary::-webkit-details-marker {

    display: none;

}


.marketing-faq summary span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    flex-shrink: 0;

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

    border-radius: 50%;

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

    font-size: 17px;

    font-weight: 400;

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

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

}


.marketing-faq details[open]
summary span {

    transform:
        rotate(45deg);

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

}


.marketing-faq details p {

    max-width: 760px;

    margin:
        0;

    padding:
        0 55px 25px 5px;

    font-size: 13px;

    line-height: 1.8;

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

}


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

.marketing-final-cta {

    position: relative;

    padding:
        80px 0 150px;

    overflow: hidden;

}


.marketing-final-cta::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 500px;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(112,106,255,.14),
            transparent 68%
        );

    pointer-events: none;

}


.marketing-final-cta-inner {

    position: relative;

    z-index: 2;

    padding:
        90px 40px;

    text-align: center;

    overflow: hidden;

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

    border-radius: 32px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(129,122,255,.12),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );

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

}


.marketing-final-cta-inner
.service-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 25px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .2em;

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

}


.marketing-final-cta-inner
.service-eyebrow-line {

    width: 38px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #817aff
        );

}


.marketing-final-cta-inner h2 {

    max-width: 900px;

    margin:
        0 auto;

    font-family:
        "Manrope",
        sans-serif;

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

    line-height: .98;

    letter-spacing: -.06em;

    color: #fff;

}


.marketing-final-cta-inner h2 span {

    display: block;

    background:
        linear-gradient(
            110deg,
            #fff,
            #aaa5ff,
            #706aff
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.marketing-final-cta-inner > p {

    max-width: 600px;

    margin:
        25px auto 0;

    font-size: 15px;

    line-height: 1.8;

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

}


.marketing-final-cta-inner
.service-hero-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 35px;

}


.marketing-final-cta-inner
.service-primary-btn,
.marketing-final-cta-inner
.service-secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-height: 50px;

    padding:
        0 23px;

    border-radius: 999px;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

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

}


.marketing-final-cta-inner
.service-primary-btn {

    border:
        1px solid
        rgba(129,122,255,.5);

    background:
        linear-gradient(
            135deg,
            #817aff,
            #625cff
        );

    color: #fff;

    box-shadow:
        0 15px 40px
        rgba(112,106,255,.2);

}


.marketing-final-cta-inner
.service-primary-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 55px
        rgba(112,106,255,.3);

}


.marketing-final-cta-inner
.service-secondary-btn {

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

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

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

}


.marketing-final-cta-inner
.service-secondary-btn:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(129,122,255,.3);

    background:
        rgba(129,122,255,.08);

}


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

@media (max-width: 640px) {


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .marketing-hero {

        padding:
            105px 0 70px;

    }


    .marketing-hero .service-hero-title {

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

    }


    .marketing-hero .service-hero-description {

        font-size: 14px;

        line-height: 1.7;

        margin-top: 22px;

    }


    .marketing-hero .service-hero-actions {

        margin-top: 28px;

    }


    .marketing-hero .service-primary-btn,
    .marketing-hero .service-secondary-btn {

        min-height: 46px;

        padding:
            0 18px;

    }


    .marketing-hero .service-hero-meta {

        margin-top: 25px;

        font-size: 7px;

    }


    /* -----------------------------------------------------
       DASHBOARD
    ----------------------------------------------------- */

    .marketing-hero-visual {

        min-height: 370px;

        margin-top: 45px;

    }


    .marketing-dashboard {

        width:
            calc(100% - 20px);

        min-height: 320px;

        border-radius: 22px;

        transform: none;

    }


    .marketing-dashboard:hover {

        transform:
            translateY(-3px);

    }


    .marketing-dashboard-content {

        padding:
            25px 20px;

    }


    .dashboard-growth strong {

        font-size: 42px;

    }


    .dashboard-chart {

        height: 90px;

        gap: 6px;

        margin-top: 25px;

    }


    .dashboard-stats {

        gap: 6px;

        margin-top: 18px;

    }


    .dashboard-stats div {

        padding: 9px;

    }


    .dashboard-stats small {

        font-size: 6px;

    }


    .dashboard-stats strong {

        font-size: 12px;

    }


    /* -----------------------------------------------------
       TRANSFORMATION
    ----------------------------------------------------- */

    .marketing-transformation {

        padding:
            95px 0;

    }


    .transformation-heading {

        margin-bottom:
            35px;

    }


    .transformation-heading h2 {

        font-size:
            clamp(39px, 11vw, 52px);

    }


    .transformation-heading p {

        font-size: 13px;

        line-height: 1.7;

    }


    .marketing-transformation-stage {

        min-height:
            650px;

        border-radius:
            24px;

    }


    .marketing-state {

        display: flex;

        flex-direction: column;

        justify-content: center;

        gap: 5px;

        padding:
            25px 20px 55px;

    }


    .marketing-state-visual {

        width: 100%;

        height: 320px;

    }


    .marketing-state-visual::before {

        width: 260px;

        height: 260px;

    }


    .marketing-state-visual img {

        max-width:
            100%;

    }


    .marketing-state-content {

        width: 100%;

    }


    .marketing-state-content h3 {

        margin-top:
            15px;

        font-size:
            clamp(34px, 9vw, 45px);

    }


    .marketing-state-content h3 span {

        display: inline;

    }


    .marketing-state-content p {

        margin-top:
            15px;

        font-size: 12px;

        line-height: 1.65;

    }


    .marketing-transformation-indicator {

        bottom:
            40px;

    }


    .marketing-transformation-indicator span {

        width: 30px;

    }


    .marketing-transformation-progress {

        left: 20px;

        right: 20px;

        bottom: 18px;

    }


    .marketing-transformation-points {

        grid-template-columns:
            1fr;

        gap: 10px;

    }


    .marketing-transformation-point {

        padding:
            19px;

        gap: 13px;

    }


    .marketing-transformation-point p {

        font-size: 11px;

    }


    /* -----------------------------------------------------
       GENERAL SECTIONS
    ----------------------------------------------------- */

    .marketing-solutions,
    .marketing-creative,
    .marketing-growth-system,
    .marketing-results,
    .marketing-process,
    .marketing-faq {

        padding:
            95px 0;

    }


    .marketing-solutions
    .service-section-heading h2,
    .marketing-creative
    .service-section-heading h2,
    .marketing-results
    .service-section-heading h2,
    .marketing-process
    .service-section-heading h2,
    .marketing-faq
    .service-section-heading h2 {

        font-size:
            clamp(39px, 11vw, 53px);

    }


    /* -----------------------------------------------------
       SOLUTIONS
    ----------------------------------------------------- */

    .marketing-solution-card {

        min-height:
            275px;

        padding:
            25px;

        border-radius:
            20px;

    }


    .marketing-solution-icon {

        margin-bottom:
            40px;

    }


    /* -----------------------------------------------------
       AI CREATIVE
    ----------------------------------------------------- */

    .marketing-video-showcase {

        min-height:
            350px;

        border-radius:
            22px;

    }


    .marketing-video-showcase::before {

        inset:
            12px;

        border-radius:
            17px;

    }


    .marketing-video-placeholder {

        padding:
            25px;

    }


    .marketing-video-placeholder h3 {

        font-size:
            30px;

    }


    .marketing-video-placeholder p {

        font-size:
            12px;

    }


    /* -----------------------------------------------------
       GROWTH SYSTEM
    ----------------------------------------------------- */

    .marketing-growth-grid {

        gap:
            40px;

    }


    .marketing-growth-grid h2 {

        font-size:
            clamp(39px, 11vw, 53px);

    }


    .marketing-growth-lead {

        font-size:
            14px;

    }


    .marketing-growth-steps > div {

        grid-template-columns:
            30px 100px 1fr;

        min-height:
            75px;

        gap:
            8px;

    }


    .marketing-growth-steps strong {

        font-size:
            12px;

    }


    .marketing-growth-steps p {

        font-size:
            9px;

    }


    /* -----------------------------------------------------
       RESULTS
    ----------------------------------------------------- */

    .marketing-results-grid {

        grid-template-columns:
            1fr;

        border-radius:
            20px;

    }


    .marketing-results-grid > div {

        min-height:
            170px;

        padding:
            24px;

    }


    /* -----------------------------------------------------
       PROCESS
    ----------------------------------------------------- */

    .marketing-process .service-process-list article {

        grid-template-columns:
            40px 1fr;

        gap:
            15px;

        padding:
            25px 0;

    }


    .marketing-process .service-process-list article:hover {

        padding-left:
            0;

    }


    .marketing-process .service-process-list h3 {

        font-size:
            20px;

    }


    .marketing-process .service-process-list p {

        font-size:
            12px;

    }


    /* -----------------------------------------------------
       FAQ
    ----------------------------------------------------- */

    .marketing-faq summary {

        padding:
            20px 0;

        font-size:
            13px;

    }


    .marketing-faq details p {

        padding:
            0 35px 20px 0;

        font-size:
            12px;

    }


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

    .marketing-final-cta {

        padding:
            25px 0 90px;

    }


    .marketing-final-cta-inner {

        padding:
            65px 20px;

        border-radius:
            24px;

    }


    .marketing-final-cta-inner h2 {

        font-size:
            clamp(39px, 11vw, 54px);

    }


    .marketing-final-cta-inner > p {

        font-size:
            13px;

    }


    .marketing-final-cta-inner
    .service-primary-btn,
    .marketing-final-cta-inner
    .service-secondary-btn {

        min-height:
            46px;

        padding:
            0 18px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .marketing-hero-visual
    .service-visual-glow,
    .marketing-dashboard,
    .dashboard-chart span,
    .marketing-indicator-dot {

        animation: none !important;

    }


    .marketing-dashboard,
    .marketing-solution-card,
    .marketing-process .service-process-list article,
    .marketing-final-cta-inner
    .service-primary-btn,
    .marketing-final-cta-inner
    .service-secondary-btn {

        transition: none !important;

    }

}




/* =====================================================
   PREMIUM SCROLL REVEAL
===================================================== */

.reveal {
    opacity: 0;
    transform: translate3d(0, 45px, 0) scale(0.985);
    filter: blur(8px);

    transition:
        opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: opacity, transform, filter;
}

.reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}





/* =====================================================
   PROCESS — PREMIUM SCROLL LINKED REVEAL
===================================================== */

.marketing-process .service-process-list {
    position: relative;
}


/* =====================================================
   PROCESS CARD — INITIAL STATE
===================================================== */

.marketing-process .service-process-list article {

    opacity: 0;

    transform:
        translate3d(110px, 0, 0)
        scale(.97);

    filter:
        blur(7px);

    transition:

        opacity
        .85s
        cubic-bezier(.16, 1, .3, 1),

        transform
        1s
        cubic-bezier(.16, 1, .3, 1),

        filter
        .9s
        cubic-bezier(.16, 1, .3, 1);

    will-change:
        transform,
        opacity,
        filter;
}


/* =====================================================
   ACTIVE CARD
===================================================== */

.marketing-process
.service-process-list
article.process-active {

    opacity: 1;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    filter:
        blur(0);
}


/* =====================================================
   PREMIUM HOVER
===================================================== */

.marketing-process
.service-process-list
article.process-active:hover {

    transform:
        translate3d(-3px, 0, 0)
        scale(1.008);

}


/* =====================================================
   NUMBER / TIMELINE DOT
===================================================== */

.marketing-process
.service-process-list
article
> span {

    transition:

        color
        .6s
        ease,

        border-color
        .6s
        ease,

        box-shadow
        .6s
        ease,

        transform
        .6s
        cubic-bezier(.16, 1, .3, 1);
}


.marketing-process
.service-process-list
article.process-active
> span {

    transform:
        scale(1.08);

}


/* =====================================================
   CONTENT MICRO MOTION
===================================================== */

.marketing-process
.service-process-list
article
> div {

    transition:
        transform
        .75s
        cubic-bezier(.16, 1, .3, 1);
}


.marketing-process
.service-process-list
article.process-active
> div {

    transform:
        translateX(0);

}


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

@media (max-width: 768px) {

    .marketing-process
    .service-process-list
    article {

        transform:
            translate3d(70px, 0, 0)
            scale(.98);

        filter:
            blur(5px);

        transition:

            opacity
            .75s
            cubic-bezier(.16, 1, .3, 1),

            transform
            .85s
            cubic-bezier(.16, 1, .3, 1),

            filter
            .75s
            ease;

    }


    .marketing-process
    .service-process-list
    article.process-active {

        transform:
            translate3d(0, 0, 0)
            scale(1);

        filter:
            blur(0);

    }

}