.hero{min-height:720px;position:relative;overflow:hidden;background:#030712}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(90,130,220,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(90,130,220,.07) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 90%)}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4}.orb-1{width:280px;height:280px;background:#095dff;right:18%;top:12%}.orb-2{width:220px;height:220px;background:#9d24ff;right:0;bottom:4%}
.hero-inner{min-height:720px;display:grid;grid-template-columns:48% 52%;align-items:center;padding-top:65px}
.hero-copy{position:relative;z-index:2;background: #010716;}
.eyebrow{font-size:11px;letter-spacing:3px;color:#b8c9e6;font-weight:700;margin-bottom:15px}
.eyebrow.purple{color:#9b6cff}
.hero h1{font:700 clamp(50px,6vw,78px)/.99 "Space Grotesk",sans-serif;letter-spacing:0px;max-width:650px;font-size: 62px;}
.hero h1 span,h2 span{background:linear-gradient(90deg,#1ebdff,#5d8bff 48%,#a84cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-text{color:#aebbd0;font-size:17px;max-width:570px;margin:25px 0 28px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap}
.hero-points{display:flex;margin-top:43px}
.hero-points>div{display:flex;align-items:center;gap:11px;padding-right:27px;margin-right:27px;border-right:1px solid var(--line);font-size:11px;color:#b8c3d7;line-height:1.35}
.hero-points>div:last-child{border:0}
.hero-points b{font-size:21px;color:#27bfff}
.hero-visual{height:580px;position:relative;display:flex;align-items:center;justify-content:center}
.glow-ring{position:absolute;border:1px solid rgba(37,181,255,.65);border-radius:50%;transform:rotate(-22deg);box-shadow:0 0 30px rgba(20,155,255,.25)}
.ring-a{width:510px;height:235px}.ring-b{width:430px;height:430px;border-color:rgba(132,75,255,.25)}
.globe{width:360px;height:360px;border-radius:50%;position:relative;background:radial-gradient(circle at 50% 45%,rgba(30,151,255,.25),rgba(4,20,48,.5) 57%,transparent 70%);border:1px solid rgba(53,187,255,.55);box-shadow:0 0 80px rgba(18,126,255,.28),inset 0 0 45px rgba(46,106,255,.3)}
.globe-lines{position:absolute;inset:22px;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 24px,rgba(59,188,255,.18) 25px 26px),repeating-linear-gradient(90deg,transparent 0 33px,rgba(93,115,255,.16) 34px 35px);clip-path:circle(50%)}
.globe-core{position:absolute;inset:0;display:grid;place-items:center;font-size:100px;color:#5ccfff;text-shadow:0 0 35px #168dff}
.platform{position:absolute;bottom:34px;background:rgba(9,19,39,.85);border:1px solid rgba(85,156,255,.35);padding:12px 22px;border-radius:30px;box-shadow:0 0 40px rgba(28,132,255,.2);font-size:13px}
.platform i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#22c7ff;margin:0 13px}
.float-card{position:absolute;display:flex;align-items:center;gap:10px;padding:11px 15px;background:rgba(5,15,32,.78);border:1px solid rgba(83,154,255,.4);backdrop-filter:blur(14px);border-radius:12px;font-size:11px;font-weight:700;box-shadow:0 12px 35px rgba(0,0,0,.25)}
.float-card b{font-size:18px;color:#30caff}.card-web{top:105px;left:18px}.card-mobile{top:105px;right:18px}.card-software{bottom:115px;left:25px}.card-api{bottom:112px;right:10px}


.section{padding:110px 0}.services,.process,.testimonials{background:#f5f8fe;color:#101827}.section-heading{margin-bottom:50px}.section-heading.split{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end}.section-heading>p,.section-heading.split>p{color:#65738b;font-size:15px;max-width:430px;}.section-heading h2,.why h2{font:700 clamp(34px,4vw,52px)/1.08 "Space Grotesk",sans-serif;letter-spacing:-2px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.service-card{position:relative;overflow:hidden;min-height:425px;border-radius:20px;padding:25px;background:#08162e;color:#fff;border:1px solid rgba(115,154,225,.18);box-shadow:0 20px 50px rgba(18,36,70,.1)}
.service-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;filter:blur(50px);right:-90px;bottom:-70px;opacity:.35}.blue:after{background:#087cff}.violet:after{background:#8c31ff}.cyan:after{background:#00d9cf}.magenta:after{background:#d12bff}
.service-card.blue{background:linear-gradient(150deg,#071c43,#08152d)}.service-card.violet{background:linear-gradient(150deg,#25124d,#10152e)}.service-card.cyan{background:linear-gradient(150deg,#063f48,#08192d)}.service-card.magenta{background:linear-gradient(150deg,#35134e,#11152e)}
.service-icon img{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;background:rgba(50,150,255,.14);border:1px solid rgba(80,170,255,.28);font-size:21px;color:#36c8ff;margin-bottom:24px}
.violet .service-icon{color:#bf73ff}.cyan .service-icon{color:#43ffe4}.magenta .service-icon{color:#ef6bff}
.service-card h3{font:600 21px "Space Grotesk",sans-serif;margin-bottom:11px}.service-card>p{font-size:14px;color:#aab9d1;min-height:65px}.service-card ul{list-style:none;margin:16px 0 21px}.service-card li{font-size:14px;color:#c3cee0;margin:7px 0}.service-card li:before{content:"•";color:#39c5ff;margin-right:8px}.service-card a{font-size:14px;color:#42c6ff;font-weight:700}

.why{background:linear-gradient(115deg,#071123,#091a35);color:#fff}.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}.why-copy>p:not(.eyebrow){color:#aebbd0;max-width:500px;margin:24px 0 28px}.benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px}.benefit{display:flex;gap:15px;padding:25px;border-radius:17px;border:1px solid rgba(125,165,240,.15);background:rgba(255,255,255,.035)}.benefit i{font-style:normal;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:#38c8ff;background:rgba(39,169,255,.1);flex:0 0 auto}.benefit h3{font:600 16px "Space Grotesk",sans-serif}.benefit p{font-size:14px;color:#91a2bd;margin-top:5px}

.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}.step{text-align:center;position:relative;padding:0 16px}.step:not(:last-child):after{content:"→";position:absolute;right:-8px;top:60px;color:#a9b7cf;font-size:18px}.step>span{display:block;color:#8492a9;font-size:11px;font-weight:700;margin-bottom:15px}.step i{width:54px;height:54px;border:1px solid #a9dfff;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;color:#238fff;background:#edf8ff;font-style:normal;font-size:20px}.step h3{font:600 16px "Space Grotesk";margin-bottom:6px}.step p{font-size:14px;color:#738197}

/* .work{background:#040a15}.work .section-heading h2{color:#fff}.work .section-heading>p{color:#8d9bb2}.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.project{border:1px solid rgba(133,170,240,.15);border-radius:18px;overflow:hidden;background:#081224;transition:.25s}.project:hover{transform:translateY(-5px);border-color:rgba(72,175,255,.4)}.project-art{height:245px;position:relative;overflow:hidden}.art-dashboard{background:linear-gradient(135deg,#101f39,#07152d)}.mini-window{position:absolute;left:25px;right:25px;top:28px;height:150px;border-radius:10px;background:linear-gradient(140deg,#163b6b,#0c172c);border:1px solid #2a6da7;box-shadow:0 20px 40px #0008}.mini-window:after{content:"";position:absolute;left:18px;right:18px;bottom:20px;height:70px;background:linear-gradient(90deg,#137cff 15%,transparent 15% 23%,#6852ff 23% 43%,transparent 43% 51%,#1dd8ff 51% 80%,transparent 80%);opacity:.65}.art-cycles{background:radial-gradient(circle at 55% 40%,#70c8ff,#11243b 34%,#07111f 70%)}.circle-art{width:170px;height:170px;border:10px solid #c8eaff;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 22px #ffffff10,0 0 60px #26aaff66}.art-app{background:linear-gradient(145deg,#1a1c57,#091f3b)}.phone-mock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-7deg);width:120px;height:200px;border-radius:22px;border:4px solid #d8edff;background:linear-gradient(#0c3c67,#101b3b);padding:35px 13px;color:#fff;box-shadow:20px 25px 60px #0008}.phone-mock b{display:block;font:700 15px "Space Grotesk"}.phone-mock span{display:block;font-size:9px;margin-top:10px;color:#9fe6ff}.phone-mock em{display:block;font-style:normal;font-size:45px;color:#50cfff;text-align:center;margin-top:22px}.art-store{background:linear-gradient(135deg,#11263c,#050b15)}.store-lines{position:absolute;inset:25px;background:linear-gradient(#0d7dc5 0 10px,transparent 10px 25px),repeating-linear-gradient(0deg,#14304b 0 18px,transparent 18px 31px);border-radius:10px;opacity:.9}.project-info{padding:18px 18px 21px}.project-info small{font-size:9px;color:#6dbdff;letter-spacing:1px}.project-info h3{font:600 17px "Space Grotesk";margin:5px 0 12px}.project-info span{font-size:11px;color:#a9b8cf} */

.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.testimonial-grid article{background:#fff;border:1px solid #e0e7f1;border-radius:17px;padding:26px;box-shadow:0 10px 30px rgba(26,50,90,.05)}.quote{font:700 35px Georgia;color:#3aaaff}.testimonial-grid article>p{font-size:14px;color:#526079;min-height:90px}.person{display:flex;align-items:center;gap:10px;border-top:1px solid #e8edf4;padding-top:17px}.person>span{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#e9f5ff;color:#1688e9;font-size:10px;font-weight:700}.person div{flex:1}.person b,.person small{display:block}.person b{font-size:12px}.person small{font-size:9px;color:#8490a3}.person strong{font-size:11px;color:#ffad00;letter-spacing:1px}

.cta{position:relative;overflow:hidden;padding:90px 0;background:#030914;color:#fff;border-top:1px solid rgba(100,150,255,.1)}.cta:before{content:"";position:absolute;width:600px;height:300px;border-radius:50%;background:#096dff33;filter:blur(100px);right:-100px;top:-80px}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:50px;position:relative}.cta h2{font:700 clamp(35px,4vw,54px)/1.05 "Space Grotesk";letter-spacing:-2px}.cta h2 span{background:linear-gradient(90deg,#31c8ff,#9d5aff);-webkit-background-clip:text;color:transparent}.cta p:not(.eyebrow){color:#9eacc1;max-width:600px;margin-top:13px}.cta-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:480px){
  .hero h1{font-size:42px}.hero-actions .btn{width:100%}.hero-points{justify-content:space-between}.hero-points>div{font-size:9px;padding-right:7px;margin-right:7px}.hero-points b{font-size:17px}.hero-visual{height:350px}.globe{width:225px;height:225px}.ring-a{width:310px;height:150px}.ring-b{width:275px;height:275px}.float-card{transform:scale(.88)}.section-heading h2,.why h2{font-size:33px}}

@media(max-width:1050px){
  .main-nav{gap:20px}.hero-inner{grid-template-columns:50% 50%}.hero h1{font-size:57px}.hero-visual{transform:scale(.86);margin-right:-50px}.service-grid{grid-template-columns:repeat(2,1fr)}.work-grid{grid-template-columns:repeat(2,1fr)}
}

  .hero-visual {
    position: relative;
    height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.hero-globe-image {
    width: 125%;
    max-width: 760px;
    height: auto;
    display: block;
    object-fit: contain;
    transform: translateX(2%);
    /* filter: drop-shadow(0 0 35px rgba(20, 130, 255, 0.16)); */
}




/* =========================================================
   DAGNIX — TECHNOLOGY STACK
========================================================= */

.dagnix-tech-stack {
    --dagnix-blue: #00c8ff;
    --dagnix-purple: #a855f7;
    --dagnix-bg: #020a18;

    position: relative;
    overflow: hidden;

    width: 100%;

    padding: 85px 0 0;

    background:
        radial-gradient(
            ellipse at 50% 20%,
            rgba(0, 80, 150, 0.16),
            transparent 42%
        ),
        radial-gradient(
            circle at 5% 60%,
            rgba(0, 150, 255, 0.055),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 55%,
            rgba(135, 50, 255, 0.06),
            transparent 27%
        ),
        #020a18;

    color: #fff;
}


/* Background grid */

.dagnix-tech-stack::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(90, 150, 200, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(90, 150, 200, 0.025) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    pointer-events: none;
}


/* Small stars */

.dagnix-tech-stack::after {
    content: "";

    position: absolute;

    top: 8%;
    left: 7%;

    width: 2px;
    height: 2px;

    background: #00cfff;

    box-shadow:
        80px 130px #087fff,
        420px 50px #7c3aed,
        730px 120px #00cfff,
        1100px 35px #7c3aed,
        1400px 160px #00cfff,
        1550px 70px #8b5cf6;

    opacity: .65;

    border-radius: 50%;
}


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

.dagnix-tech-container {
    position: relative;
    z-index: 2;

    width: min(1660px, calc(100% - 70px));

    margin: 0 auto;
}


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

.dagnix-tech-heading {
    text-align: center;

    max-width: 1100px;

    margin: 0 auto 54px;
}


/* Label */

.dagnix-tech-label {
    display: inline-flex;

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

    gap: 11px;

    padding: 9px 20px;

    border: 1px solid rgba(120, 170, 220, .28);

    border-radius: 50px;

    background:
        rgba(6, 20, 39, .72);

    box-shadow:
        inset 0 0 20px rgba(0, 160, 255, .025),
        0 0 25px rgba(0, 120, 255, .035);

    color: #e6edf7;

    font-family: Arial, sans-serif;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1.8px;
}


.dagnix-tech-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;
}


.dagnix-tech-dot.blue {
    background: #00d4ff;

    box-shadow:
        0 0 7px #00d4ff,
        0 0 14px rgba(0, 212, 255, .8);
}


.dagnix-tech-dot.purple {
    background: #b45cff;

    box-shadow:
        0 0 7px #b45cff,
        0 0 14px rgba(180, 92, 255, .8);
}


/* Main heading */

.dagnix-tech-heading h2 {
    margin: 20px 0 14px;

    color: #fff;

    font-family: Arial, sans-serif;

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

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -3px;
}


.dagnix-tech-heading h2 span {
    display: inline;

    background:
        linear-gradient(
            90deg,
            #00d0ff 0%,
            #287cff 45%,
            #8552ff 75%,
            #c64cff 100%
        );

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

    -webkit-text-fill-color: transparent;
}


.dagnix-tech-heading p {
    max-width: 900px;

    margin: 0 auto;

    color: #b5c4d7;

    font-family: Arial, sans-serif;

    font-size: 18px;

    line-height: 1.6;
}


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

.dagnix-tech-grid {
    display: grid;

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

    gap: 22px;

    align-items: stretch;
}


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

.dagnix-tech-card {
    --accent: #00cfff;

    position: relative;

    min-width: 0;

    min-height: 390px;

    padding: 20px 14px 14px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 28, 53, .96),
            rgba(3, 13, 28, .97)
        );

    overflow: hidden;

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


/* Card border */

.dagnix-tech-card::before {
    content: "";

    position: absolute;

    inset: 0;

    padding: 1px;

    border-radius: inherit;

    background:
        linear-gradient(
            145deg,
            var(--accent),
            rgba(255,255,255,.04) 48%,
            var(--accent)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    opacity: .95;

    pointer-events: none;
}


/* Card glow */

.dagnix-tech-card::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -80px;
    bottom: -80px;

    border-radius: 50%;

    background: var(--accent);

    filter: blur(70px);

    opacity: .10;
}


.dagnix-tech-card.blue {
    --accent: #00cfff;
}


.dagnix-tech-card.purple {
    --accent: #a855f7;
}


.dagnix-tech-card.cyan {
    --accent: #00d9d9;
}


.dagnix-tech-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.35),
        0 0 30px rgba(0,190,255,.07);
}


/* =========================================================
   CARD ICON
========================================================= */

.dagnix-tech-card-icon {
    position: relative;
    z-index: 2;

    width: 64px;
    height: 64px;

    display: flex;

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

    margin-bottom: 17px;

    border-radius: 15px;

    border: 1px solid var(--accent);

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--accent) 20%,
                transparent
            ),
            rgba(5,20,38,.5)
        );

    box-shadow:
        inset 0 0 22px
        color-mix(
            in srgb,
            var(--accent) 10%,
            transparent
        ),
        0 0 20px
        color-mix(
            in srgb,
            var(--accent) 10%,
            transparent
        );

    color: var(--accent);

    font-size: 29px;
    font-weight: 700;
}


/* =========================================================
   CARD TEXT
========================================================= */

.dagnix-tech-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 10px;

    min-height: 49px;

    color: #fff;

    font-family: Arial, sans-serif;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.15;
}


.dagnix-tech-card p {
    position: relative;
    z-index: 2;

    min-height: 52px;

    margin: 0;

    color: #aebed0;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   TECHNOLOGY ITEMS
========================================================= */

.dagnix-tech-items {
    position: relative;
    z-index: 4;

    display: grid;

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

    gap: 7px;

    margin-top: 19px;
}


.dagnix-tech-item {
    min-width: 0;

    min-height: 72px;

    display: flex;

    flex-direction: column;

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

    gap: 5px;

    padding: 7px 3px;

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            rgba(18,43,68,.95),
            rgba(6,20,36,.95)
        );

    border: 1px solid rgba(115,155,195,.23);

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

    transition:
        border-color .25s ease,
        background .25s ease;
}


.dagnix-tech-item:hover {
    border-color:
        color-mix(
            in srgb,
            var(--accent) 60%,
            transparent
        );

    background:
        rgba(20,45,72,.95);
}


.dagnix-tech-item img {
    width: 27px;
    height: 27px;

    object-fit: contain;

    display: block;
}


.dagnix-tech-item span {
    max-width: 100%;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #c9d5e2;

    font-family: Arial, sans-serif;

    font-size: 9px;

    line-height: 1.1;

    text-align: center;
}


.dagnix-tech-item .text-logo {
    display: flex;

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

    width: 29px;
    height: 29px;

    border-radius: 5px;

    color: #8edfff;

    font-size: 8px;

    font-weight: 800;

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

    background: rgba(0,150,255,.08);
}


/* =========================================================
   FUTURISTIC HORIZON
========================================================= */

.dagnix-tech-horizon {
    position: relative;

    height: 285px;

    margin-top: 5px;

    overflow: hidden;
}


/* Blue/purple atmospheric glow */

.dagnix-horizon-light {
    position: absolute;

    left: 50%;

    top: 55px;

    width: 85%;
    height: 90px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,190,255,.20),
            rgba(120,60,255,.11) 45%,
            transparent 72%
        );

    filter: blur(25px);
}


/* Earth */

.dagnix-earth {
    position: absolute;

    left: 50%;

    bottom: -455px;

    width: 112%;
    height: 540px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(9,46,75,.98) 0%,
            rgba(3,20,39,.98) 38%,
            rgba(1,9,20,1) 70%
        );

    border-top:
        2px solid rgba(0,201,255,.95);

    box-shadow:
        0 -3px 18px rgba(0,203,255,.85),
        0 -10px 55px rgba(0,150,255,.35),
        0 -8px 65px rgba(150,55,255,.20);

    overflow: hidden;
}


/* Earth blue/purple rim */

.dagnix-earth::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 7%;

    width: 86%;
    height: 15px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00cfff 18%,
            #1e82ff 42%,
            #7b4cff 68%,
            #c44dff 84%,
            transparent
        );

    filter: blur(3px);

    opacity: .95;
}


/* Earth subtle surface */

.dagnix-earth-grid {
    position: absolute;

    inset: 0;

    opacity: .17;

    background-image:
        linear-gradient(
            rgba(0,180,255,.25) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,180,255,.25) 1px,
            transparent 1px
        );

    background-size: 65px 30px;

    border-radius: 50%;
}


/* =========================================================
   BENEFITS
========================================================= */

.dagnix-tech-benefits {
    position: absolute;

    z-index: 5;

    left: 50%;
    top: 95px;

    width: min(820px, 90%);

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.dagnix-benefit {
    display: flex;

    align-items: center;

    gap: 13px;

    white-space: nowrap;
}


.dagnix-benefit-icon {
    width: 38px;
    height: 38px;

    display: flex;

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

    color: #00cfff;

    font-size: 28px;

    text-shadow:
        0 0 10px rgba(0,200,255,.85),
        0 0 22px rgba(0,130,255,.4);
}


.dagnix-benefit strong,
.dagnix-benefit span {
    display: block;

    font-family: Arial, sans-serif;

    font-size: 15px;

    line-height: 1.35;
}


.dagnix-benefit strong {
    color: #fff;

    font-weight: 600;
}


.dagnix-benefit span {
    color: #d9e2ec;
}


.dagnix-benefit-divider {
    width: 1px;

    height: 52px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(135,170,205,.45),
            transparent
        );
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1450px) {

    .dagnix-tech-container {
        width: min(1320px, calc(100% - 45px));
    }

    .dagnix-tech-grid {
        gap: 15px;
    }

    .dagnix-tech-card {
        min-height: 365px;

        padding-left: 12px;
        padding-right: 12px;
    }

    .dagnix-tech-card h3 {
        font-size: 17px;
    }

    .dagnix-tech-card p {
        font-size: 12px;
    }

    .dagnix-tech-item {
        min-height: 64px;
    }

    .dagnix-tech-item img {
        width: 24px;
        height: 24px;
    }

    .dagnix-tech-item span {
        font-size: 8px;
    }
}


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

@media (max-width: 1050px) {

    .dagnix-tech-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .dagnix-tech-card {
        min-height: 350px;
    }

    .dagnix-tech-benefits {
        width: 90%;
    }

    .dagnix-earth {
        width: 135%;
    }
}


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

@media (max-width: 650px) {

    .dagnix-tech-stack {
        padding-top: 65px;
    }

    .dagnix-tech-container {
        width: calc(100% - 28px);
    }

    .dagnix-tech-heading {
        margin-bottom: 38px;
    }

    .dagnix-tech-label {
        padding: 8px 14px;

        font-size: 10px;

        letter-spacing: 1.2px;
    }

    .dagnix-tech-heading h2 {
        font-size: 39px;

        letter-spacing: -2px;

        line-height: 1.08;
    }

    .dagnix-tech-heading p {
        font-size: 15px;

        line-height: 1.55;
    }


    .dagnix-tech-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .dagnix-tech-card {
        min-height: auto;

        padding: 20px;
    }


    .dagnix-tech-card h3 {
        font-size: 20px;
    }


    .dagnix-tech-card p {
        min-height: auto;

        font-size: 13px;
    }


    .dagnix-tech-items {
        gap: 8px;
    }


    .dagnix-tech-item {
        min-height: 70px;
    }


    /* Horizon */

    .dagnix-tech-horizon {
        height: 350px;
    }


    .dagnix-earth {
        width: 175%;

        height: 350px;

        bottom: -270px;
    }


    .dagnix-tech-benefits {
        top: 60px;

        width: 95%;

        display: grid;

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

        gap: 25px 10px;
    }


    .dagnix-benefit {
        justify-content: center;

        gap: 7px;
    }


    .dagnix-benefit-divider {
        display: none;
    }


    .dagnix-benefit-icon {
        width: 30px;
        height: 30px;

        font-size: 22px;
    }


    .dagnix-benefit strong,
    .dagnix-benefit span {
        font-size: 12px;
    }
}




/* =========================================================
   DAGNIX — FEATURED WORK
========================================================= */

.dagnix-work-section {
    position: relative;

    width: 100%;

    padding: 75px 0 78px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(0, 103, 190, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 45%,
            rgba(105, 45, 210, 0.08),
            transparent 32%
        ),
        #030d1d;

    color: #ffffff;
}


/* Subtle grid */

.dagnix-work-section::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(90, 145, 190, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(90, 145, 190, 0.025) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    pointer-events: none;
}


/* Top glow */

.dagnix-work-section::after {
    content: "";

    position: absolute;

    top: -100px;
    left: 50%;

    width: 650px;
    height: 180px;

    transform: translateX(-50%);

    background: rgba(0, 100, 255, 0.07);

    filter: blur(100px);

    pointer-events: none;
}


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

.dagnix-work-container {
    position: relative;

    z-index: 2;

    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;
}


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

.dagnix-work-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 38px;
}


/* Left */

.dagnix-work-eyebrow {
    margin-bottom: 11px;

    color: #a66cff;

    font-family: Arial, sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;
}


.dagnix-work-title-wrap h2 {
    margin: 0;

    color: #f7f9fc;

    font-family: Arial, sans-serif;

    font-size: clamp(42px, 4vw, 58px);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -2.5px;
}


.dagnix-work-title-wrap h2 span {
    background:
        linear-gradient(
            90deg,
            #8d53ff,
            #bf45ff
        );

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

    -webkit-text-fill-color: transparent;
}


/* Right */

.dagnix-work-header-right {
    display: flex;

    align-items: center;

    gap: 55px;

    padding-bottom: 4px;
}


.dagnix-work-header-right p {
    width: 310px;

    margin: 0;

    color: #9cafc5;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.55;
}


/* All projects */

.dagnix-all-projects {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    height: 44px;

    padding: 0 21px;

    border: 1px solid rgba(170, 185, 210, 0.65);

    border-radius: 24px;

    color: #f4f7fb;

    background: rgba(5, 16, 31, 0.4);

    font-family: Arial, sans-serif;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

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


.dagnix-all-projects span {
    font-size: 17px;

    transition:
        transform .3s ease;
}


.dagnix-all-projects:hover {
    border-color: #00bfff;

    background: rgba(0, 160, 255, 0.08);

    transform: translateY(-2px);
}


.dagnix-all-projects:hover span {
    transform: translateX(3px);
}


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

.dagnix-project-grid {
    display: grid;

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

    gap: 20px;
}


/* =========================================================
   PROJECT CARD
========================================================= */

.dagnix-project-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    border-radius: 16px;

    border: 1px solid rgba(93, 137, 181, 0.30);

    background:
        linear-gradient(
            145deg,
            rgba(9, 29, 52, 0.95),
            rgba(3, 15, 29, 0.98)
        );

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

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


.dagnix-project-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(0, 190, 255, 0.55);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.32),
        0 0 30px rgba(0, 140, 255, 0.08);
}


/* =========================================================
   PROJECT IMAGE
========================================================= */

.dagnix-project-image {
    position: relative;

    display: block;

    width: 100%;

    height: 235px;

    overflow: hidden;

    text-decoration: none;

    background: #071426;
}


.dagnix-project-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .6s ease;
}


.dagnix-project-card:hover
.dagnix-project-image img {
    transform: scale(1.06);
}


/* Dark gradient over image */

.dagnix-project-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(1, 10, 22, 0.02) 35%,
            rgba(2, 12, 25, 0.40) 70%,
            rgba(2, 11, 23, 0.88) 100%
        );

    pointer-events: none;
}


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

.dagnix-project-content {
    position: relative;

    margin-top: -48px;

    z-index: 3;

    padding: 0 17px 17px;
}


/* =========================================================
   TAGS
========================================================= */

.dagnix-project-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 11px;
}


.dagnix-project-tags span {
    display: inline-flex;

    align-items: center;

    min-height: 25px;

    padding: 0 10px;

    border: 1px solid rgba(170, 185, 200, 0.42);

    border-radius: 15px;

    background:
        rgba(15, 28, 44, 0.88);

    backdrop-filter: blur(10px);

    color: #e4ebf4;

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   PROJECT BOTTOM
========================================================= */

.dagnix-project-bottom {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 10px;
}


.dagnix-project-bottom h3 {
    margin: 0 0 7px;

    color: #ffffff;

    font-family: Arial, sans-serif;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.2;
}


.dagnix-project-bottom p {
    max-width: 205px;

    margin: 0;

    color: #aebed0;

    font-family: Arial, sans-serif;

    font-size: 11px;

    line-height: 1.45;
}


/* =========================================================
   ARROW
========================================================= */

.dagnix-project-arrow {
    flex: 0 0 auto;

    width: 35px;
    height: 35px;

    display: flex;

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

    margin-bottom: 1px;

    border: 1px solid rgba(190, 205, 220, 0.55);

    border-radius: 50%;

    color: #ffffff;

    background:
        rgba(6, 20, 36, 0.75);

    font-family: Arial, sans-serif;

    font-size: 18px;

    text-decoration: none;

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


.dagnix-project-arrow:hover {
    border-color: #00c8ff;

    background:
        rgba(0, 155, 255, 0.15);

    transform: translate(2px, -2px);
}


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

@media (max-width: 1200px) {

    .dagnix-work-container {
        width: min(1100px, calc(100% - 50px));
    }

    .dagnix-work-header-right {
        gap: 25px;
    }

    .dagnix-work-header-right p {
        width: 250px;
    }

    .dagnix-project-grid {
        gap: 14px;
    }

    .dagnix-project-image {
        height: 210px;
    }

    .dagnix-project-content {
        padding-left: 14px;
        padding-right: 14px;
    }

    .dagnix-project-bottom h3 {
        font-size: 15px;
    }

    .dagnix-project-bottom p {
        font-size: 10px;
    }
}


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

@media (max-width: 900px) {

    .dagnix-work-section {
        padding: 65px 0;
    }

    .dagnix-work-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 22px;
    }

    .dagnix-work-header-right {
        width: 100%;

        justify-content: space-between;
    }

    .dagnix-project-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    .dagnix-project-image {
        height: 240px;
    }
}


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

@media (max-width: 600px) {

    .dagnix-work-section {
        padding: 55px 0;
    }

    .dagnix-work-container {
        width: calc(100% - 28px);
    }

    .dagnix-work-eyebrow {
        font-size: 10px;

        letter-spacing: 2.4px;
    }

    .dagnix-work-title-wrap h2 {
        font-size: 39px;

        line-height: 1.05;

        letter-spacing: -1.8px;
    }

    .dagnix-work-header-right {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }

    .dagnix-work-header-right p {
        width: 100%;

        font-size: 13px;
    }

    .dagnix-project-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .dagnix-project-image {
        height: 245px;
    }

    .dagnix-project-content {
        margin-top: -52px;

        padding: 0 17px 18px;
    }

    .dagnix-project-bottom h3 {
        font-size: 18px;
    }

    .dagnix-project-bottom p {
        max-width: 240px;

        font-size: 11px;
    }
}






section#contact {
    background: url(https://dagnix.com/wp-content/themes/dagnix-theme/assets/images/footer_banner.png);
    background-color: #020d25;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right center;
}
@media (max-width: 600px) {
    section#contact {
        background-position: bottom !important;
    }
}

.benefit img {
    width: 80px;
    height: 80px;
}








/* =========================================
   DAGNIX — WHO WE HELP
========================================= */

.dagnix-who-help {
    position: relative;
    padding: 110px 24px 120px;
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(58, 170, 255, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(126, 82, 255, 0.07),
            transparent 30%
        ),
        #f7f9fd;

    overflow: hidden;
}


/* Decorative background */

.dagnix-who-help::before {
    content: "";
    position: absolute;

    width: 520px;
    height: 520px;

    top: -260px;
    left: -180px;

    border: 1px solid rgba(58, 170, 255, 0.10);

    border-radius: 50%;

    pointer-events: none;
}


.dagnix-who-help::after {
    content: "";
    position: absolute;

    width: 460px;
    height: 460px;

    right: -220px;
    bottom: -250px;

    border: 1px solid rgba(130, 80, 255, 0.10);

    border-radius: 50%;

    pointer-events: none;
}


/* Container */

.dagnix-who-help-container {
    position: relative;
    z-index: 2;

    width: min(1380px, 100%);
    margin: 0 auto;
}


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

.dagnix-who-help-header {
    max-width: 900px;
    margin: 0 auto 65px;

    text-align: center;
}


.dagnix-who-help-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-bottom: 22px;

    color: #7657ff;

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

    letter-spacing: 4px;
    text-transform: uppercase;
}


.dagnix-who-help-eyebrow span {
    display: block;

    width: 38px;
    height: 1px;

    background: linear-gradient(
        90deg,
        #29b6ff,
        #8057ff
    );
}


.dagnix-who-help-header h2 {
    margin: 0;

    color: #111b32;

    font-size: clamp(42px, 4.2vw, 64px);

    line-height: 1.08;

    letter-spacing: -2.5px;

    font-weight: 750;
}


.dagnix-who-help-header h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #1db5f5 0%,
        #4f7cff 48%,
        #8a3ffc 100%
    );

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

    -webkit-text-fill-color: transparent;
    color: transparent;
}


.dagnix-who-help-header p {
    max-width: 820px;

    margin: 24px auto 0;

    color: #60708c;

    font-size: 17px;

    line-height: 1.7;
}


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

.dagnix-who-help-grid {
    display: grid;

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

    gap: 18px;
}


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

.dagnix-help-card {
    position: relative;

    min-height: 285px;

    padding: 30px;

    background: rgba(255, 255, 255, 0.86);

    border: 1px solid rgba(130, 150, 190, 0.20);

    border-radius: 22px;

    box-shadow:
        0 18px 45px rgba(31, 57, 95, 0.07);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.dagnix-help-card::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -75px;
    right: -65px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        rgba(42, 182, 255, 0.10),
        rgba(125, 77, 255, 0.06)
    );
}


.dagnix-help-card:hover {
    transform: translateY(-7px);

    border-color: rgba(83, 130, 255, 0.28);

    box-shadow:
        0 25px 60px rgba(38, 73, 125, 0.12);
}


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

.dagnix-help-icon {
    position: relative;

    width: 64px;
    height: 64px;

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

    margin-bottom: 30px;

    border-radius: 18px;

    background: #f4f8ff;

    border: 1px solid rgba(70, 150, 255, 0.18);

    box-shadow:
        0 10px 25px rgba(40, 110, 220, 0.08);
}


.dagnix-help-icon svg {
    width: 34px;
    height: 34px;

    display: block;
}


/* Blue */

.dagnix-icon-blue {
    color: #159cff;

    background:
        linear-gradient(
            135deg,
            rgba(39, 178, 255, 0.13),
            rgba(80, 102, 255, 0.08)
        );
}


/* Purple */

.dagnix-icon-purple {
    color: #8057ff;

    background:
        linear-gradient(
            135deg,
            rgba(126, 85, 255, 0.13),
            rgba(180, 71, 255, 0.08)
        );

    border-color: rgba(125, 82, 255, 0.18);
}


/* Cyan */

.dagnix-icon-cyan {
    color: #12b9d5;

    background:
        linear-gradient(
            135deg,
            rgba(21, 205, 232, 0.12),
            rgba(32, 151, 255, 0.07)
        );
}


/* Indigo */

.dagnix-icon-indigo {
    color: #7759ed;

    background:
        linear-gradient(
            135deg,
            rgba(120, 90, 240, 0.13),
            rgba(175, 78, 255, 0.07)
        );
}


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

.dagnix-help-content {
    position: relative;
    z-index: 2;
}


.dagnix-help-number {
    display: block;

    margin-bottom: 8px;

    color: #91a0b8;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.dagnix-help-content h3 {
    margin: 0 0 13px;

    color: #121c36;

    font-size: 20px;

    line-height: 1.3;

    letter-spacing: -0.4px;
}


.dagnix-help-content p {
    margin: 0;

    color: #64748d;

    font-size: 14px;

    line-height: 1.65;
}
.cta-actions {
    margin-top: 24px;
}


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

@media (max-width: 1100px) {

    .dagnix-who-help {
        padding: 90px 22px 100px;
    }

    .dagnix-who-help-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dagnix-help-card {
        min-height: 260px;
    }
}


@media (max-width: 700px) {

    .dagnix-who-help {
        padding: 75px 18px 80px;
    }

    .dagnix-who-help-header {
        margin-bottom: 45px;
    }

    .dagnix-who-help-header h2 {
        font-size: 38px;
        letter-spacing: -1.5px;
    }

    .dagnix-who-help-header p {
        font-size: 15px;
    }

    .dagnix-who-help-eyebrow {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .dagnix-who-help-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .dagnix-help-card {
        min-height: auto;
        padding: 25px;
    }

    .dagnix-help-icon {
        width: 58px;
        height: 58px;

        margin-bottom: 22px;
    }

    .dagnix-help-icon svg {
        width: 31px;
        height: 31px;
    }
}


@media (max-width: 450px) {

    .dagnix-who-help-header h2 {
        font-size: 33px;
    }

    .dagnix-who-help-header h2 span {
        display: inline;
    }

    .dagnix-help-content h3 {
        font-size: 18px;
    }
}


















/* =========================================================
   DAGNIX - MOBILE RESPONSIVE FINAL OVERRIDE
   Keep existing CSS. This only fixes mobile layouts.
   ========================================================= */

@media screen and (max-width: 780px) {

    /* ---------- GLOBAL ---------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .container {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }


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

    .hero {
        width: 100% !important;
        min-height: auto !important;
        overflow: hidden !important;
    }

    .hero-inner {
        display: block !important;
        width: calc(100% - 32px) !important;
        min-height: auto !important;
        padding-top: 100px !important;
        padding-bottom: 40px !important;
    }

    .hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        background: transparent !important;
    }

    .hero h1 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 42px !important;
        line-height: 1.04 !important;
        letter-spacing: -1.8px !important;
    }

    .hero-text {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .hero-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .hero-actions .btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-points {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .hero-points > div {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-visual {
        width: 100% !important;
        height: 370px !important;
        margin: 20px 0 0 !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-globe-image {
        width: 115% !important;
        max-width: 430px !important;
        height: auto !important;
        transform: none !important;
    }


    /* ---------- WHY DAGNIX ---------- */

    .why {
        width: 100% !important;
        overflow: hidden !important;
    }

    .why-grid {
        display: block !important;
        width: 100% !important;
    }

    .why-copy {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
    }

    .why-copy > p:not(.eyebrow) {
        width: 100% !important;
        max-width: 100% !important;
    }

    .benefits {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .benefit {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 18px !important;
    }

    .benefit h3 {
        font-size: 15px !important;
    }

    .benefit p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }


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

    .process-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    .step {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    .step:not(:last-child):after {
        content: "↓" !important;
        position: absolute !important;
        right: 50% !important;
        top: auto !important;
        bottom: -28px !important;
        transform: translateX(50%) !important;
    }

    .step i {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .step p {
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* ---------- SECTION HEADINGS ---------- */

    .section-heading,
    .section-heading.split {
        width: 100% !important;
        display: block !important;
    }

    .section-heading h2,
    .why h2 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 34px !important;
        line-height: 1.08 !important;
    }

    .section-heading > p,
    .section-heading.split > p {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 18px !important;
    }


    /* ---------- SERVICES ---------- */

    .service-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .service-card {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }


    /* ---------- BENEFITS / OTHER GRIDS ---------- */

    .work-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .testimonial-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .footer-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .footer-brand {
        grid-column: auto !important;
    }


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

    .cta-inner {
        width: 100% !important;
        display: block !important;
    }

    .cta-actions {
        width: 100% !important;
    }

    .cta-actions .btn {
        width: 100% !important;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media screen and (max-width: 480px) {

    .container {
        width: calc(100% - 30px) !important;
    }

    .hero-inner {
        width: calc(100% - 30px) !important;
        padding-top: 80px !important;
    }

    .hero h1 {
        font-size: 38px !important;
        letter-spacing: -1.5px !important;
    }

    .hero-text {
        font-size: 13px !important;
    }

    .hero-visual {
        height: 340px !important;
    }

    .hero-globe-image {
        width: 115% !important;
        max-width: 390px !important;
    }

    .hero-points > div {
        font-size: 8px !important;
    }

    .benefit {
        padding: 16px !important;
    }

    .process-grid {
        gap: 34px !important;
    }

    .step {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

}