/* ============================================================
   MARKETING DIGITAL HERO
============================================================ */

.dmxMarketingHero{

    position:relative;
    overflow:hidden;

    min-height:
        clamp(760px,92vh,980px);

    padding:
        clamp(145px,13vw,205px)
        0
        clamp(90px,9vw,145px);

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(0,217,220,.1),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 22%,
            rgba(6,103,241,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 75% 84%,
            rgba(198,255,47,.08),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #ffffff 55%,
            #f4f8fb 100%
        );

    color:var(--dmx-ink);

}


.dmxMarketingHero::before{

    content:"";

    position:absolute;
    z-index:0;

    top:-360px;
    left:50%;

    width:1050px;
    height:1050px;

    border:
        1px solid rgba(6,103,241,.055);

    border-radius:50%;

    box-shadow:
        0 0 0 110px rgba(6,103,241,.018),
        0 0 0 220px rgba(0,217,220,.012);

    transform:translateX(-15%);

    pointer-events:none;

}


.dmxMarketingHero::after{

    content:"";

    position:absolute;
    z-index:0;

    left:0;
    right:0;
    bottom:0;

    height:170px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(244,248,251,.8)
        );

    pointer-events:none;

}


.dmxMarketingHero .container{

    position:relative;
    z-index:2;

}


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

.dmxMarketingHeroGrid{

    display:grid;

    grid-template-columns:
        minmax(0,.92fr)
        minmax(460px,1.08fr);

    gap:
        clamp(50px,7vw,110px);

    align-items:center;

}


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

.dmxMarketingHeroContent{

    position:relative;
    z-index:5;

    max-width:720px;

}


/* Eyebrow */

.dmxMarketingHeroEyebrow{

    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:
        clamp(25px,3vw,38px);

}


.dmxMarketingHeroEyebrow > span{

    position:relative;

    width:44px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--dmx-blue),
            var(--dmx-cyan)
        );

}


.dmxMarketingHeroEyebrow > span::after{

    content:"";

    position:absolute;

    top:50%;
    right:0;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--dmx-lime);

    box-shadow:
        0 0 0 6px rgba(198,255,47,.12),
        0 0 18px rgba(198,255,47,.42);

    transform:translateY(-50%);

}


.dmxMarketingHeroEyebrow small{

    color:var(--dmx-navy);

    font-size:11px;
    font-weight:900;

    letter-spacing:.17em;
    line-height:1.3;

    text-transform:uppercase;

}


/* Heading */

.dmxMarketingHeroContent h1{

    max-width:760px;

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(54px,6vw,88px);

    font-weight:780;
    line-height:.98;

    letter-spacing:
        clamp(-5px,-.065em,-2.3px);

}


.dmxMarketingHeroContent h1 span{

    display:block;

    margin:
        8px
        0;

    color:transparent;

    background:
        linear-gradient(
            100deg,
            var(--dmx-blue) 0%,
            #078ad6 40%,
            var(--dmx-cyan) 72%,
            #83c92a 100%
        );

    -webkit-background-clip:text;
    background-clip:text;

}


/* Description */

.dmxMarketingHeroContent > p{

    max-width:675px;

    margin:
        clamp(27px,3vw,38px)
        0
        0;

    color:var(--dmx-muted);

    font-size:
        clamp(16px,1.4vw,19px);

    font-weight:500;
    line-height:1.8;

}


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

.dmxMarketingHeroActions{

    display:flex;
    flex-wrap:wrap;
    gap:14px;

    margin-top:
        clamp(32px,4vw,48px);

}


.dmxMarketingHeroPrimary,
.dmxMarketingHeroSecondary{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:13px;

    min-height:59px;

    padding:
        0
        25px;

    border-radius:16px;

    font-size:13px;
    font-weight:850;
    line-height:1;

    text-decoration:none;

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

}


.dmxMarketingHeroPrimary{

    background:
        linear-gradient(
            105deg,
            var(--dmx-navy),
            var(--dmx-blue)
        );

    color:white;

    box-shadow:
        0 18px 42px rgba(6,103,241,.22);

}


.dmxMarketingHeroPrimary > span{

    display:grid;
    place-items:center;

    width:29px;
    height:29px;

    border-radius:10px;

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

    font-size:16px;

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

}


.dmxMarketingHeroPrimary:hover{

    transform:translateY(-4px);

    box-shadow:
        0 25px 52px rgba(6,103,241,.29);

}


.dmxMarketingHeroPrimary:hover > span{

    transform:translateX(4px);

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

}


.dmxMarketingHeroSecondary{

    border:
        1px solid rgba(8,38,77,.12);

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

    color:var(--dmx-navy);

    box-shadow:
        0 12px 30px rgba(15,51,88,.06);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

}


.dmxMarketingHeroSecondary:hover{

    transform:translateY(-4px);

    border-color:
        rgba(6,103,241,.23);

    background:white;

    box-shadow:
        0 18px 38px rgba(15,51,88,.1);

}


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

.dmxMarketingHeroStats{

    display:grid;

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

    max-width:650px;

    margin-top:
        clamp(45px,5vw,70px);

    padding-top:
        clamp(25px,3vw,34px);

    border-top:
        1px solid rgba(8,38,77,.1);

}


.dmxMarketingHeroStats div{

    position:relative;

    padding:
        0
        22px;

}


.dmxMarketingHeroStats div:first-child{

    padding-left:0;

}


.dmxMarketingHeroStats div:not(:last-child)::after{

    content:"";

    position:absolute;

    top:4px;
    right:0;

    width:1px;
    height:42px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(8,38,77,.14),
            transparent
        );

}


.dmxMarketingHeroStats strong{

    display:block;

    margin-bottom:6px;

    color:var(--dmx-navy);

    font-size:
        clamp(18px,1.8vw,24px);

    font-weight:900;

    letter-spacing:-.035em;

}


.dmxMarketingHeroStats small{

    display:block;

    max-width:130px;

    color:var(--dmx-muted);

    font-size:10px;
    font-weight:700;
    line-height:1.45;

}


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

.dmxMarketingHeroVisual{

    position:relative;

    min-height:
        clamp(540px,47vw,690px);

    isolation:isolate;

}


/* Background grid */

.dmxMarketingBackgroundGrid{

    position:absolute;
    z-index:-4;

    inset:
        3%
        -5%
        -5%
        0;

    opacity:.35;

    background-image:
        linear-gradient(
            rgba(8,38,77,.075) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,38,77,.075) 1px,
            transparent 1px
        );

    background-size:36px 36px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 15%,
            transparent 73%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 15%,
            transparent 73%
        );

    transform:
        perspective(800px)
        rotateX(60deg)
        rotateZ(-8deg)
        scale(1.25);

    transform-origin:center;

}


/* Glows */

.dmxMarketingGlowOne,
.dmxMarketingGlowTwo{

    position:absolute;
    z-index:-3;

    border-radius:50%;

    filter:blur(8px);

    pointer-events:none;

}


.dmxMarketingGlowOne{

    top:13%;
    left:14%;

    width:330px;
    height:330px;

    background:
        radial-gradient(
            circle,
            rgba(6,103,241,.2),
            rgba(0,217,220,.08) 44%,
            transparent 72%
        );

}


.dmxMarketingGlowTwo{

    right:0;
    bottom:4%;

    width:300px;
    height:300px;

    background:
        radial-gradient(
            circle,
            rgba(198,255,47,.13),
            rgba(0,217,220,.06) 45%,
            transparent 72%
        );

}


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

.dmxMarketingDashboard{

    position:absolute;
    z-index:2;

    top:50%;
    left:50%;

    width:
        min(92%,540px);

    min-height:385px;

    overflow:hidden;

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

    border-radius:29px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(240,247,251,.86)
        );

    box-shadow:
        0 45px 100px rgba(8,38,77,.18),
        0 15px 38px rgba(6,103,241,.09),
        inset 0 1px 0 white;

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

    transform:
        translate(-50%,-50%)
        rotate(-2.5deg);

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        box-shadow .5s ease;

}


.dmxMarketingDashboard::before{

    content:"";

    position:absolute;

    top:-140px;
    right:-100px;

    width:280px;
    height:280px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,217,220,.18),
            transparent 69%
        );

    pointer-events:none;

}


.dmxMarketingDashboard::after{

    content:"Analytics";

    position:absolute;

    right:25px;
    bottom:18px;

    color:rgba(8,38,77,.13);

    font-size:10px;
    font-weight:900;

    letter-spacing:.18em;

    text-transform:uppercase;

}


/* Dashboard top */

.dmxMarketingDashboardTop{

    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:space-between;

    height:64px;

    padding:
        0
        24px;

    border-bottom:
        1px solid rgba(8,38,77,.08);

}


.dmxMarketingDashboardTop > span{

    position:relative;

    display:block;

    width:93px;
    height:10px;

    border-radius:100px;

    background:
        linear-gradient(
            90deg,
            var(--dmx-navy) 0 35%,
            rgba(8,38,77,.1) 35% 100%
        );

}


.dmxMarketingDashboardTop > span::after{

    content:"";

    position:absolute;

    top:-11px;
    left:0;

    width:35px;
    height:5px;

    border-radius:100px;

    background:var(--dmx-cyan);

}


.dmxMarketingDashboardTop > div{

    display:flex;
    align-items:center;
    gap:6px;

}


.dmxMarketingDashboardTop i{

    display:block;

    width:8px;
    height:8px;

    border-radius:50%;

    background:rgba(8,38,77,.12);

}


.dmxMarketingDashboardTop i:first-child{

    background:var(--dmx-lime);

}


.dmxMarketingDashboardTop i:nth-child(2){

    background:var(--dmx-cyan);

}


/* ============================================================
   CHART
============================================================ */

.dmxMarketingChart{

    position:relative;

    height:215px;

    margin:
        24px
        25px
        0;

    overflow:hidden;

    border:
        1px solid rgba(8,38,77,.07);

    border-radius:20px;

    background:
        linear-gradient(
            180deg,
            rgba(6,103,241,.035),
            rgba(255,255,255,.7)
        );

}


.dmxMarketingChart::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            rgba(8,38,77,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,38,77,.055) 1px,
            transparent 1px
        );

    background-size:
        100% 42px,
        64px 100%;

}


.dmxMarketingChart::after{

    content:"Crecimiento";

    position:absolute;

    top:16px;
    left:17px;

    color:var(--dmx-muted);

    font-size:9px;
    font-weight:850;

    letter-spacing:.13em;

    text-transform:uppercase;

}


.dmxMarketingChart > span{

    position:absolute;
    z-index:4;

    width:10px;
    height:10px;

    border:
        2px solid white;

    border-radius:50%;

    background:var(--dmx-blue);

    box-shadow:
        0 4px 12px rgba(6,103,241,.35);

}


.dmxMarketingChart > span:nth-of-type(1){

    left:7%;
    bottom:17%;

}


.dmxMarketingChart > span:nth-of-type(2){

    left:29%;
    bottom:35%;

}


.dmxMarketingChart > span:nth-of-type(3){

    left:48%;
    bottom:39%;

}


.dmxMarketingChart > span:nth-of-type(4){

    left:69%;
    bottom:67%;

}


.dmxMarketingChart > span:nth-of-type(5){

    right:3%;
    top:9%;

    background:var(--dmx-lime);

    box-shadow:
        0 4px 13px rgba(135,194,34,.35);

}


.dmxMarketingChart svg{

    position:absolute;
    z-index:3;

    inset:
        32px
        12px
        12px;

    width:
        calc(100% - 24px);

    height:
        calc(100% - 44px);

    overflow:visible;

}


.dmxMarketingChart svg path{

    fill:none;

    stroke:url("#dmxMarketingGradient");
    stroke:var(--dmx-blue);

    stroke-width:5;

    stroke-linecap:round;
    stroke-linejoin:round;

    filter:
        drop-shadow(
            0 6px 7px rgba(6,103,241,.18)
        );

    stroke-dasharray:650;
    stroke-dashoffset:650;

    animation:
        dmxMarketingLineDraw
        2.2s
        .35s
        cubic-bezier(.2,.8,.2,1)
        forwards;

}


@keyframes dmxMarketingLineDraw{

    to{

        stroke-dashoffset:0;

    }

}


/* ============================================================
   METRICS
============================================================ */

.dmxMarketingMetrics{

    display:grid;

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

    gap:12px;

    padding:
        18px
        25px
        26px;

}


.dmxMarketingMetrics > div{

    position:relative;
    overflow:hidden;

    padding:
        15px
        17px;

    border:
        1px solid rgba(8,38,77,.07);

    border-radius:15px;

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

}


.dmxMarketingMetrics > div::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:4px;
    height:100%;

    background:
        linear-gradient(
            180deg,
            var(--dmx-blue),
            var(--dmx-cyan)
        );

}


.dmxMarketingMetrics > div:nth-child(2)::before{

    background:
        linear-gradient(
            180deg,
            var(--dmx-cyan),
            var(--dmx-lime)
        );

}


.dmxMarketingMetrics small{

    display:block;

    margin-bottom:5px;

    color:var(--dmx-muted);

    font-size:9px;
    font-weight:800;

    letter-spacing:.1em;

    text-transform:uppercase;

}


.dmxMarketingMetrics strong{

    color:var(--dmx-navy);

    font-size:22px;
    font-weight:900;

    letter-spacing:-.04em;

}


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

.dmxMarketingFloating{

    position:absolute;
    z-index:5;

    display:flex;
    align-items:center;
    gap:12px;

    min-width:170px;

    padding:
        13px
        15px;

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

    border-radius:17px;

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

    box-shadow:
        0 20px 46px rgba(8,38,77,.13),
        inset 0 1px 0 white;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease;

}


.dmxMarketingFloating::after{

    content:"";

    position:absolute;

    width:55px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(6,103,241,.45),
            transparent
        );

}


.dmxMarketingFloatingIcon{

    display:grid;
    place-items:center;

    flex:0 0 42px;

    width:42px;
    height:42px;

    border-radius:13px;

    background:
        linear-gradient(
            145deg,
            var(--dmx-navy),
            var(--dmx-blue)
        );

    color:white;

    font-size:15px;
    font-weight:900;

    box-shadow:
        0 10px 22px rgba(6,103,241,.18);

}


.dmxMarketingFloating small{

    display:block;

    margin-bottom:3px;

    color:var(--dmx-muted);

    font-size:8px;
    font-weight:850;

    letter-spacing:.1em;

    text-transform:uppercase;

}


.dmxMarketingFloating strong{

    display:block;

    color:var(--dmx-navy);

    font-size:12px;
    font-weight:800;

    white-space:nowrap;

}


/* Positions */

.dmxMarketingGoogle{

    top:7%;
    left:-3%;

    transform:rotate(-4deg);

    animation:
        dmxMarketingFloatOne
        5.5s
        ease-in-out
        infinite;

}


.dmxMarketingGoogle::after{

    top:50%;
    right:-55px;

}


.dmxMarketingMeta{

    top:21%;
    right:-3%;

    transform:rotate(4deg);

    animation:
        dmxMarketingFloatTwo
        6s
        ease-in-out
        infinite;

}


.dmxMarketingMeta::after{

    top:50%;
    left:-55px;

    transform:rotate(180deg);

}


.dmxMarketingMeta .dmxMarketingFloatingIcon{

    background:
        linear-gradient(
            145deg,
            var(--dmx-blue),
            var(--dmx-cyan)
        );

}


.dmxMarketingSEO{

    left:-5%;
    bottom:11%;

    transform:rotate(3deg);

    animation:
        dmxMarketingFloatThree
        6.4s
        ease-in-out
        infinite;

}


.dmxMarketingSEO::after{

    top:50%;
    right:-55px;

}


.dmxMarketingSEO .dmxMarketingFloatingIcon{

    background:
        linear-gradient(
            145deg,
            #729b17,
            var(--dmx-lime)
        );

    color:#142200;

}


.dmxMarketingEmail{

    right:0;
    bottom:3%;

    transform:rotate(-3deg);

    animation:
        dmxMarketingFloatFour
        5.8s
        ease-in-out
        infinite;

}


.dmxMarketingEmail::after{

    top:50%;
    left:-55px;

    transform:rotate(180deg);

}


.dmxMarketingEmail .dmxMarketingFloatingIcon{

    background:
        linear-gradient(
            145deg,
            #0577bd,
            var(--dmx-cyan)
        );

}


/* Floating animations */

@keyframes dmxMarketingFloatOne{

    0%,
    100%{

        transform:
            translateY(0)
            rotate(-4deg);

    }

    50%{

        transform:
            translateY(-10px)
            rotate(-2deg);

    }

}


@keyframes dmxMarketingFloatTwo{

    0%,
    100%{

        transform:
            translateY(0)
            rotate(4deg);

    }

    50%{

        transform:
            translateY(9px)
            rotate(2deg);

    }

}


@keyframes dmxMarketingFloatThree{

    0%,
    100%{

        transform:
            translateY(0)
            rotate(3deg);

    }

    50%{

        transform:
            translateY(-8px)
            rotate(5deg);

    }

}


@keyframes dmxMarketingFloatFour{

    0%,
    100%{

        transform:
            translateY(0)
            rotate(-3deg);

    }

    50%{

        transform:
            translateY(11px)
            rotate(-1deg);

    }

}


/* ============================================================
   HOVER VISUAL
============================================================ */

@media (hover:hover){

    .dmxMarketingHeroVisual:hover
    .dmxMarketingDashboard{

        transform:
            translate(-50%,-50%)
            rotate(0deg)
            scale(1.015);

        box-shadow:
            0 55px 120px rgba(8,38,77,.22),
            0 20px 50px rgba(6,103,241,.12),
            inset 0 1px 0 white;

    }


    .dmxMarketingHeroVisual:hover
    .dmxMarketingGoogle{

        animation-play-state:paused;

        transform:
            translate(-7px,-7px)
            rotate(-6deg);

    }


    .dmxMarketingHeroVisual:hover
    .dmxMarketingMeta{

        animation-play-state:paused;

        transform:
            translate(8px,-5px)
            rotate(6deg);

    }


    .dmxMarketingHeroVisual:hover
    .dmxMarketingSEO{

        animation-play-state:paused;

        transform:
            translate(-8px,7px)
            rotate(5deg);

    }


    .dmxMarketingHeroVisual:hover
    .dmxMarketingEmail{

        animation-play-state:paused;

        transform:
            translate(7px,8px)
            rotate(-5deg);

    }

}


/* ============================================================
   RESPONSIVE — 1250PX
============================================================ */

@media (max-width:1250px){

    .dmxMarketingHeroGrid{

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

        gap:55px;

    }


    .dmxMarketingHeroContent h1{

        font-size:
            clamp(52px,5.7vw,76px);

    }


    .dmxMarketingFloating{

        min-width:155px;

    }


    .dmxMarketingGoogle,
    .dmxMarketingSEO{

        left:0;

    }


    .dmxMarketingMeta,
    .dmxMarketingEmail{

        right:0;

    }

}


/* ============================================================
   RESPONSIVE — 1040PX
============================================================ */

@media (max-width:1040px){

    .dmxMarketingHero{

        padding-top:155px;

    }


    .dmxMarketingHeroGrid{

        grid-template-columns:1fr;

        gap:75px;

    }


    .dmxMarketingHeroContent{

        max-width:820px;

    }


    .dmxMarketingHeroContent h1{

        max-width:850px;

        font-size:
            clamp(58px,8vw,88px);

    }


    .dmxMarketingHeroContent > p{

        max-width:760px;

    }


    .dmxMarketingHeroStats{

        max-width:720px;

    }


    .dmxMarketingHeroVisual{

        width:
            min(100%,760px);

        min-height:650px;

        margin:
            0
            auto;

    }


    .dmxMarketingDashboard{

        width:
            min(78%,560px);

    }


    .dmxMarketingGoogle{

        left:2%;

    }


    .dmxMarketingMeta{

        right:2%;

    }


    .dmxMarketingSEO{

        left:3%;

    }


    .dmxMarketingEmail{

        right:3%;

    }

}


/* ============================================================
   RESPONSIVE — 760PX
============================================================ */

@media (max-width:760px){

    .dmxMarketingHero{

        min-height:auto;

        padding:
            135px
            0
            95px;

    }


    .dmxMarketingHero::before{

        width:760px;
        height:760px;

        top:-250px;

    }


    .dmxMarketingHeroGrid{

        gap:55px;

    }


    .dmxMarketingHeroContent h1{

        font-size:
            clamp(49px,12vw,70px);

    }


    .dmxMarketingHeroActions{

        align-items:stretch;
        flex-direction:column;

        max-width:430px;

    }


    .dmxMarketingHeroPrimary,
    .dmxMarketingHeroSecondary{

        width:100%;

    }


    .dmxMarketingHeroStats{

        gap:0;

    }


    .dmxMarketingHeroStats div{

        padding:
            0
            15px;

    }


    .dmxMarketingHeroVisual{

        min-height:590px;

    }


    .dmxMarketingDashboard{

        width:
            min(86%,500px);

        min-height:370px;

    }


    .dmxMarketingFloating{

        min-width:145px;

        padding:
            11px
            12px;

    }


    .dmxMarketingFloatingIcon{

        flex-basis:37px;

        width:37px;
        height:37px;

    }


    .dmxMarketingFloating::after{

        display:none;

    }


    .dmxMarketingGoogle{

        top:2%;
        left:0;

    }


    .dmxMarketingMeta{

        top:19%;
        right:0;

    }


    .dmxMarketingSEO{

        left:1%;
        bottom:7%;

    }


    .dmxMarketingEmail{

        right:1%;
        bottom:0;

    }

}


/* ============================================================
   RESPONSIVE — 560PX
============================================================ */

@media (max-width:560px){

    .dmxMarketingHero{

        padding:
            120px
            0
            80px;

    }


    .dmxMarketingHeroEyebrow{

        margin-bottom:25px;

    }


    .dmxMarketingHeroContent h1{

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

        letter-spacing:
            clamp(-3.5px,-.065em,-2px);

    }


    .dmxMarketingHeroContent > p{

        font-size:16px;
        line-height:1.7;

    }


    .dmxMarketingHeroStats{

        grid-template-columns:1fr;

        gap:16px;

    }


    .dmxMarketingHeroStats div{

        padding:
            0
            0
            16px;

        border-bottom:
            1px solid rgba(8,38,77,.08);

    }


    .dmxMarketingHeroStats div:not(:last-child)::after{

        display:none;

    }


    .dmxMarketingHeroStats small{

        max-width:none;

    }


    .dmxMarketingHeroVisual{

        min-height:500px;

        margin-top:5px;

    }


    .dmxMarketingDashboard{

        top:48%;

        width:
            min(94%,440px);

        min-height:340px;

        border-radius:23px;

    }


    .dmxMarketingDashboardTop{

        height:55px;

        padding:
            0
            18px;

    }


    .dmxMarketingChart{

        height:185px;

        margin:
            18px
            17px
            0;

    }


    .dmxMarketingMetrics{

        gap:8px;

        padding:
            14px
            17px
            20px;

    }


    .dmxMarketingMetrics > div{

        padding:
            12px
            13px;

    }


    .dmxMarketingMetrics strong{

        font-size:18px;

    }


    .dmxMarketingFloating{

        min-width:128px;

        gap:8px;

        padding:
            9px
            10px;

        border-radius:14px;

    }


    .dmxMarketingFloatingIcon{

        flex-basis:32px;

        width:32px;
        height:32px;

        border-radius:10px;

        font-size:12px;

    }


    .dmxMarketingFloating small{

        font-size:7px;

    }


    .dmxMarketingFloating strong{

        font-size:10px;

    }


    .dmxMarketingGoogle{

        top:0;
        left:-1%;

    }


    .dmxMarketingMeta{

        top:12%;
        right:-1%;

    }


    .dmxMarketingSEO{

        left:0;
        bottom:5%;

    }


    .dmxMarketingEmail{

        right:0;
        bottom:-2%;

    }

}


/* ============================================================
   RESPONSIVE — 410PX
============================================================ */

@media (max-width:410px){

    .dmxMarketingHeroVisual{

        min-height:470px;

    }


    .dmxMarketingDashboard{

        min-height:320px;

    }


    .dmxMarketingChart{

        height:170px;

    }


    .dmxMarketingFloating{

        min-width:118px;

    }


    .dmxMarketingMeta{

        top:9%;

    }


    .dmxMarketingSEO{

        bottom:4%;

    }

}


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

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

    .dmxMarketingChart svg path{

        animation:none;

        stroke-dasharray:none;
        stroke-dashoffset:0;

    }


    .dmxMarketingGoogle,
    .dmxMarketingMeta,
    .dmxMarketingSEO,
    .dmxMarketingEmail{

        animation:none;

    }


    .dmxMarketingDashboard,
    .dmxMarketingFloating,
    .dmxMarketingHeroPrimary,
    .dmxMarketingHeroPrimary > span,
    .dmxMarketingHeroSecondary{

        transition:none;

    }

}