@import url("case-study.css");
@import url("web-development.css");
@import url("design-branding.css");
@import url("speed-optimization.css");
@import url("video-production.css");
@import url("graphic-design.css");
@import url("legal.css");
@import url("blog.css");
@import url("website-security.css");

/* =====================================================
   MARIO PORTFOLIO - HEADER
   ===================================================== */

:root {
    --md-bg: #050b17;
    --md-bg-soft: #091224;
    --md-navy: #0b1830;
    --md-blue: #1687ff;
    --md-cyan: #00d7e8;
    --md-purple: #7d5cff;
    --md-white: #ffffff;
    --md-text: #d9e2ef;
    --md-muted: #8ea0b8;
    --md-border: rgba(255,255,255,.12);
}


/* HEADER */

.md-header {
    position: relative;
    z-index: 1000;
    width: 100%;
    background: rgba(5, 11, 23, 0.96);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.md-header-inner {
    width: min(1280px, calc(100% - 48px));
    min-height: 82px;
    margin: 0 auto;

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

    gap: 35px;
}


/* =====================================================
   LOGO
   ===================================================== */

.md-brand {
    flex: 0 0 auto;
}

.md-brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.md-brand-link img {
    display: block;
    width: auto;
    max-width: 190px;
    max-height: 52px;
    object-fit: contain;
}


/* =====================================================
   NAVIGATION WRAPPER
   ===================================================== */

.md-nav-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    margin-left: auto;
}

.md-main-nav {
    display: flex;
    align-items: center;
}


/* =====================================================
   JOOMLA MENU
   ===================================================== */

.md-main-nav ul.mod-menu {
    display: flex;
    align-items: center;
    gap: 30px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.md-main-nav ul.mod-menu > li {
    position: relative;
    margin: 0;
    padding: 0;
}

.md-main-nav ul.mod-menu > li > a {
    position: relative;
    display: inline-flex;

    padding: 30px 0;

    color: rgba(255,255,255,.78);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}

.md-main-nav ul.mod-menu > li > a:hover {
    color: #ffffff;
}


/* ACTIVE MENU */

.md-main-nav ul.mod-menu > li.active > a,
.md-main-nav ul.mod-menu > li.current > a {
    color: var(--md-cyan);
}


/* UNDERLINE EFFECT */

.md-main-nav ul.mod-menu > li > a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 20px;

    width: 0;
    height: 2px;

    background: linear-gradient(
        90deg,
        var(--md-cyan),
        var(--md-purple)
    );

    border-radius: 20px;

    transition: width .25s ease;
}

.md-main-nav ul.mod-menu > li > a:hover::after,
.md-main-nav ul.mod-menu > li.active > a::after,
.md-main-nav ul.mod-menu > li.current > a::after {
    width: 100%;
}


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

.md-header-cta {
    flex: 0 0 auto;
}

.md-header-cta .custom,
.md-header-cta p {
    margin: 0;
}

.md-header-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 22px;

    border: 1px solid rgba(255,255,255,.48);
    border-radius: 10px;

    color: #ffffff;
    background: transparent;

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

    text-decoration: none;

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

.md-header-cta a:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #07101f;
    transform: translateY(-2px);
}


/* =====================================================
   MOBILE MENU BUTTON
   ===================================================== */

.md-menu-toggle {
    display: none;

    width: 46px;
    height: 46px;

    padding: 10px;

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

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

    cursor: pointer;
}

.md-menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    border-radius: 10px;

    background: #ffffff;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


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

@media (max-width: 980px) {

    .md-header-inner {
        width: min(100% - 36px, 1280px);
        min-height: 74px;
    }

    .md-brand-link img {
        max-width: 165px;
        max-height: 46px;
    }

    .md-menu-toggle {
        display: block;
        margin-left: auto;
    }

    .md-nav-wrap {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

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

        gap: 0;

        padding: 20px 24px 26px;

        background: #07101f;

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

        box-shadow:
            0 20px 45px rgba(0,0,0,.24);
    }

    .md-header.menu-open .md-nav-wrap {
        display: flex;
    }

    .md-main-nav {
        width: 100%;
    }

    .md-main-nav ul.mod-menu {
        width: 100%;

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

        gap: 0;
    }

    .md-main-nav ul.mod-menu > li {
        width: 100%;
    }

    .md-main-nav ul.mod-menu > li > a {
        width: 100%;

        padding: 15px 4px;

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

        font-size: 15px;
    }

    .md-main-nav ul.mod-menu > li > a::after {
        display: none;
    }

    .md-header-cta {
        margin-top: 20px;
    }

    .md-header-cta a {
        width: 100%;
        min-height: 48px;
    }

}


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

@media (max-width: 560px) {

    .md-header-inner {
        width: calc(100% - 28px);
        min-height: 68px;
    }

    .md-brand-link img {
        max-width: 145px;
        max-height: 42px;
    }

    .md-menu-toggle {
        width: 43px;
        height: 43px;
    }

    .md-nav-wrap {
        padding-left: 18px;
        padding-right: 18px;
    }

}

/* =====================================================
   MARIO HEADER - DESKTOP FINAL
   Sticky + Shrinking
   ===================================================== */

@media (min-width: 981px) {

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

    .md-header {
        position: sticky !important;
        top: 0;
        left: 0;

        width: 100%;
        z-index: 9999;

        background: rgba(5, 11, 23, .97);

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

        transition:
            background .3s ease,
            box-shadow .3s ease;
    }


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

    .md-header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: min(1480px, calc(100% - 64px));

        min-height: 96px;

        margin: 0 auto !important;
        padding: 0 !important;

        gap: 50px;

        transition:
            min-height .3s ease,
            height .3s ease;
    }


    /* =========================================
       LOGO
       ========================================= */

    .md-brand {
        display: flex;
        align-items: center;

        flex: 0 0 auto;

        margin: 0 !important;
        padding: 0 !important;
    }


    .md-brand-link {
        display: flex;
        align-items: center;

        margin: 0 !important;
        padding: 0 !important;
    }


    .md-brand-link img {
        display: block;

        width: auto;
        max-width: 205px;
        max-height: 58px;

        transition:
            max-width .3s ease,
            max-height .3s ease;
    }


    /* =========================================
       RIGHT SIDE
       ========================================= */

    .md-nav-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;

        flex: 1 1 auto;

        width: auto !important;

        gap: 38px;

        margin: 0 0 0 auto !important;
        padding: 0 !important;
    }


    .md-main-nav {
        display: flex !important;
        align-items: center !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =========================================
       JOOMLA MENU
       IMPORTANT: FORCE ROW
       ========================================= */

    .md-main-nav ul.mod-menu {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;

        gap: 38px;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    .md-main-nav ul.mod-menu > li {
        position: relative;

        display: flex !important;
        align-items: center !important;

        flex: 0 0 auto !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .md-main-nav ul.mod-menu > li > a {
        position: relative;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center;

        width: auto !important;

        padding: 38px 0 !important;

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

        font-size: 15px;
        font-weight: 600;
        line-height: 1 !important;

        white-space: nowrap;

        text-decoration: none;

        transition:
            color .25s ease,
            padding .3s ease;
    }


    .md-main-nav ul.mod-menu > li > a:hover {
        color: #ffffff;
    }


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

    .md-main-nav ul.mod-menu > li.active > a,
    .md-main-nav ul.mod-menu > li.current > a {
        color: var(--md-cyan);
    }


    .md-main-nav ul.mod-menu > li > a::after {
        content: "";

        position: absolute;

        left: 0;
        bottom: 25px;

        width: 0;
        height: 2px;

        background: linear-gradient(
            90deg,
            var(--md-cyan),
            var(--md-purple)
        );

        border-radius: 20px;

        transition:
            width .25s ease,
            bottom .3s ease;
    }


    .md-main-nav ul.mod-menu > li > a:hover::after,
    .md-main-nav ul.mod-menu > li.active > a::after,
    .md-main-nav ul.mod-menu > li.current > a::after {
        width: 100%;
    }


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

    .md-header-cta {
        display: flex;
        align-items: center;

        flex: 0 0 auto;

        margin: 0 !important;
        padding: 0 !important;
    }


    .md-header-cta .custom,
    .md-header-cta p {
        margin: 0 !important;
        padding: 0 !important;
    }


    .md-header-cta a {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-height: 50px;

        padding: 0 26px;

        white-space: nowrap;

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

        color: #ffffff;
        background: transparent;

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

        text-decoration: none;

        transition:
            min-height .3s ease,
            padding .3s ease,
            background .25s ease,
            color .25s ease,
            border-color .25s ease,
            transform .25s ease;
    }


    .md-header-cta a:hover {
        color: #07101f;

        background: #ffffff;

        border-color: #ffffff;

        transform: translateY(-2px);
    }


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

    .md-header.md-header-scrolled {
        background: rgba(5, 11, 23, .94);

        box-shadow:
            0 12px 35px rgba(0,0,0,.22);

        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }


    .md-header.md-header-scrolled .md-header-inner {
        min-height: 68px;
    }


    .md-header.md-header-scrolled .md-brand-link img {
        max-width: 165px;
        max-height: 44px;
    }


    .md-header.md-header-scrolled
    .md-main-nav ul.mod-menu > li > a {
        padding-top: 26px !important;
        padding-bottom: 26px !important;
    }


    .md-header.md-header-scrolled
    .md-main-nav ul.mod-menu > li > a::after {
        bottom: 17px;
    }


    .md-header.md-header-scrolled
    .md-header-cta a {
        min-height: 44px;
        padding: 0 22px;
    }

}


.container-header {
    background: none !important;
}

.site-grid {
    margin-top: 0;
}

.container-header {
    background: none !important;
}

.site-grid {
    margin-top: 0;
}



/* =====================================================
   MARIO PORTFOLIO - HERO
   ===================================================== */

.md-hero {
    position: relative;
    overflow: hidden;

    min-height: 680px;

    display: flex;
    align-items: center;

    padding: 75px 30px 50px;

    background:
        radial-gradient(
            circle at 78% 38%,
            rgba(22, 135, 255, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 28%,
            rgba(125, 92, 255, 0.13),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #050b17 0%,
            #071225 48%,
            #060b16 100%
        );

    color: #ffffff;
}


/* subtle grid */

.md-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .045;

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

    background-size: 55px 55px;

    pointer-events: none;
}


/* bottom glow */

.md-hero::after {
    content: "";

    position: absolute;

    width: 620px;
    height: 240px;

    left: 50%;
    bottom: -190px;

    transform: translateX(-50%);

    background: rgba(22,135,255,.22);

    filter: blur(120px);

    border-radius: 50%;

    pointer-events: none;
}


.md-hero-inner {
    position: relative;
    z-index: 2;

    width: min(1280px, 100%);

    margin: 0 auto;

    display: grid;

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

    align-items: center;

    gap: 70px;
}


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

.md-hero-content {
    max-width: 670px;
}


.md-hero-kicker {
    margin-bottom: 18px;

    color: #00d7e8;

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

    letter-spacing: .3px;
}


.md-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(52px, 5.5vw, 82px);
    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -2.5px;
}


.md-hero h1 span {
    display: block;

    margin-top: 8px;

    background:
        linear-gradient(
            90deg,
            #00d7e8 0%,
            #1687ff 48%,
            #8a5cff 100%
        );

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

    color: transparent;
}


.md-hero-description {
    max-width: 590px;

    margin: 26px 0 0;

    color: #aebdce;

    font-size: 18px;
    line-height: 1.75;
}


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

.md-hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 34px;
}


.md-btn {
    min-height: 52px;

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

    gap: 12px;

    padding: 0 24px;

    border-radius: 10px;

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

    text-decoration: none;

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


.md-btn span {
    transition: transform .25s ease;
}


.md-btn:hover span {
    transform: translateX(4px);
}


.md-btn-primary {
    color: #ffffff;

    border: 1px solid #1687ff;

    background:
        linear-gradient(
            135deg,
            #1687ff,
            #1765ed
        );

    box-shadow:
        0 10px 30px rgba(22,135,255,.24);
}


.md-btn-primary:hover {
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 14px 38px rgba(22,135,255,.34);
}


.md-btn-outline {
    color: #ffffff;

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

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


.md-btn-outline:hover {
    color: #ffffff;

    border-color: #00d7e8;

    background: rgba(0,215,232,.06);

    transform: translateY(-3px);
}


/* =====================================================
   SOCIAL LINKS
   ===================================================== */

.md-hero-socials {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-top: 32px;
}


.md-hero-socials a {
    width: 39px;
    height: 39px;

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

    color: #9fb0c5;

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

    border-radius: 9px;

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

    text-decoration: none;

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


.md-hero-socials a:hover {
    color: #00d7e8;

    border-color: rgba(0,215,232,.45);

    background: rgba(0,215,232,.07);

    transform: translateY(-3px);
}


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

.md-hero-visual {
    position: relative;

    min-height: 520px;

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


.md-hero-glow {
    position: absolute;

    width: 390px;
    height: 390px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(22,135,255,.28) 0%,
            rgba(125,92,255,.13) 42%,
            transparent 72%
        );

    filter: blur(18px);
}


.md-hero-photo-wrap {
    position: relative;
    z-index: 5;

    width: min(470px, 100%);

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


.md-hero-photo {
    display: block;

    width: 100%;
    max-height: 560px;

    object-fit: contain;

    filter:
        drop-shadow(0 25px 40px rgba(0,0,0,.42));

    position: relative;
    z-index: 2;
}


/* =====================================================
   CYAN / PURPLE RING
   ===================================================== */

.md-hero-photo-wrap::before {
    content: "";

    position: absolute;

    width: 405px;
    height: 405px;

    left: 50%;
    top: 48%;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #00d7e8 0%,
            #1687ff 45%,
            #8a5cff 100%
        );

    padding: 5px;

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

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: .9;
}


/* =====================================================
   DECORATIVE ORBITS
   ===================================================== */

.md-hero-orbit {
    position: absolute;

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

    border-radius: 50%;

    pointer-events: none;
}


.md-hero-orbit-one {
    width: 570px;
    height: 350px;

    right: -115px;
    top: 68px;

    transform: rotate(-14deg);
}


.md-hero-orbit-two {
    width: 500px;
    height: 270px;

    right: -90px;
    bottom: 30px;

    transform: rotate(10deg);

    border-color: rgba(0,215,232,.09);
}


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

@media (max-width: 1050px) {

    .md-hero {
        min-height: auto;

        padding-top: 70px;
        padding-bottom: 60px;
    }

    .md-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(340px, .8fr);

        gap: 35px;
    }

    .md-hero h1 {
        font-size: clamp(48px, 6vw, 68px);
    }

    .md-hero-visual {
        min-height: 440px;
    }

    .md-hero-photo {
        max-height: 480px;
    }

    .md-hero-photo-wrap::before {
        width: 340px;
        height: 340px;
    }

}


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

@media (max-width: 800px) {

    .md-hero {
        padding:
            65px
            22px
            0;
    }

    .md-hero-inner {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .md-hero-content {
        max-width: 650px;

        text-align: center;

        margin: 0 auto;
    }

    .md-hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .md-hero-actions,
    .md-hero-socials {
        justify-content: center;
    }

    .md-hero-visual {
        min-height: 430px;

        margin-top: 5px;
    }

    .md-hero-photo-wrap {
        width: min(420px, 90vw);
    }

    .md-hero-photo {
        max-height: 450px;
    }

    .md-hero-photo-wrap::before {
        width: 340px;
        height: 340px;
    }

}


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

@media (max-width: 520px) {

    .md-hero {
        padding:
            55px
            18px
            0;
    }

    .md-hero-kicker {
        font-size: 14px;
    }

    .md-hero h1 {
        font-size: 44px;

        letter-spacing: -1.5px;
    }

    .md-hero-description {
        font-size: 16px;

        line-height: 1.7;
    }

    .md-hero-actions {
        flex-direction: column;
    }

    .md-btn {
        width: 100%;
    }

    .md-hero-visual {
        min-height: 370px;
    }

    .md-hero-photo-wrap::before {
        width: 280px;
        height: 280px;
    }

    .md-hero-photo {
        max-height: 390px;
    }

}

/* =====================================================
   HERO - DESKTOP MOCKUP MATCH
   Desktop only so mobile remains unchanged
   ===================================================== */

@media (min-width: 1051px) {

    .md-hero {
        min-height: 590px;

        padding:
            50px
            32px
            0;

        align-items: center;
    }


    .md-hero-inner {
        width: min(1500px, 100%);

        grid-template-columns:
            minmax(0, 1.12fr)
            minmax(470px, .88fr);

        gap: 45px;

        align-items: center;
    }


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

    .md-hero-content {
        max-width: 760px;
    }


    .md-hero-kicker {
        margin-bottom: 16px;

        font-size: 15px;
    }


    .md-hero h1 {
        font-size: clamp(58px, 4.7vw, 76px);

        line-height: 1.02;

        letter-spacing: -2.8px;
    }


    .md-hero h1 span {
        margin-top: 6px;
    }


    .md-hero-description {
        max-width: 640px;

        margin-top: 24px;

        font-size: 17px;
        line-height: 1.7;
    }


    .md-hero-actions {
        margin-top: 30px;
    }


    .md-hero-socials {
        margin-top: 26px;
    }


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

    .md-hero-visual {
        min-height: 500px;

        align-items: flex-end;
        justify-content: center;
    }


    .md-hero-photo-wrap {
        width: min(420px, 100%);
    }


    .md-hero-photo {
        width: 100%;

        max-height: 505px;

        object-fit: contain;
    }


    /* Main neon ring */

    .md-hero-photo-wrap::before {
        width: 455px;
        height: 455px;

        top: 50%;

        padding: 6px;

        opacity: 1;

        filter:
            drop-shadow(0 0 10px rgba(0,215,232,.32))
            drop-shadow(0 0 18px rgba(22,135,255,.24))
            drop-shadow(0 0 26px rgba(138,92,255,.16));
    }


    /* Glow behind ring */

    .md-hero-glow {
        width: 470px;
        height: 470px;

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

        background:
            radial-gradient(
                circle,
                rgba(0,215,232,.12) 0%,
                rgba(22,135,255,.20) 35%,
                rgba(125,92,255,.12) 52%,
                transparent 72%
            );

        filter: blur(22px);
    }


    /* Decorative orbits */

    .md-hero-orbit-one {
        width: 620px;
        height: 360px;

        right: -160px;
        top: 66px;

        border-color: rgba(100,96,255,.22);

        transform: rotate(-12deg);
    }


    .md-hero-orbit-two {
        width: 570px;
        height: 290px;

        right: -140px;
        bottom: 24px;

        border-color: rgba(0,215,232,.11);

        transform: rotate(9deg);
    }

}

/* =====================================================
   TRUSTED BRANDS STRIP
   ===================================================== */

.md-trust {
    position: relative;
    z-index: 5;
    padding: 30px 30px 34px;
    background: #081426;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.md-trust-inner {
    width: min(1280px, 100%);
    margin: 0 auto;
}

.md-trust-label {
    margin-bottom: 24px;
    text-align: center;

    color: #1687ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.md-trust-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 30px;
}

.md-trust-item {
    position: relative;
    min-height: 54px;

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

    text-align: center;
}

.md-trust-item:not(:last-child)::after {
    content: "";

    position: absolute;
    right: -15px;
    top: 50%;

    width: 1px;
    height: 35px;

    transform: translateY(-50%);

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

.md-trust-brand {
    display: block;

    color: rgba(255,255,255,.9);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .3px;
}

.md-trust-item small {
    display: block;
    margin-top: 4px;

    color: #71839a;
    font-size: 10px;
    line-height: 1.3;
}

.md-script-brand {
    font-style: italic;
    font-weight: 500;
}


/* TABLET */

@media (max-width: 950px) {

    .md-trust-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 28px;
    }

    .md-trust-item::after {
        display: none;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .md-trust {
        padding: 28px 20px;
    }

    .md-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 18px;
    }

    .md-trust-brand {
        font-size: 16px;
    }

}

/* =====================================================
   HERO + TRUSTED BRANDS
   FULL WIDTH / NO WHITE GAP
   ===================================================== */

/* Hero must end cleanly */
.md-hero {
    margin-bottom: 0 !important;
}


/* Trusted strip full viewport width */
.md-trust {
    position: relative !important;

    width: 100vw !important;
    max-width: none !important;

    left: 50% !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: -50vw !important;

    padding: 28px 30px 32px !important;

    background:
        linear-gradient(
            90deg,
            #071426 0%,
            #0a1b33 50%,
            #071426 100%
        ) !important;

    border-top: 1px solid rgba(255,255,255,.06) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/* Match hero content width */
.md-trust-inner {
    width: min(1500px, calc(100% - 64px)) !important;
    max-width: none !important;

    margin: 0 auto !important;
}


/* =====================================================
   REMOVE JOOMLA WRAPPER SPACING
   ===================================================== */

/* Custom module wrapper containing trust section */
.mod-custom:has(.md-trust),
.moduletable:has(.md-trust) {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


/* Joomla grid wrapper around trust module */
.container-component:has(.md-trust),
.site-grid:has(.md-trust),
main:has(.md-trust) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Remove margins from module position */
main > .mod-custom:has(.md-trust),
main > .moduletable:has(.md-trust) {
    margin-block: 0 !important;
}


/* =====================================================
   TRUST CONTENT TUNING
   ===================================================== */

.md-trust-label {
    margin-bottom: 20px !important;

    color: #1687ff;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}


.md-trust-grid {
    grid-template-columns: repeat(5, 1fr);

    gap: 0 !important;
}


.md-trust-item {
    min-height: 58px;

    padding: 0 28px;
}


.md-trust-item:not(:last-child)::after {
    right: 0;

    height: 38px;

    background: rgba(88, 145, 200, .22);
}


.md-trust-brand {
    font-size: 17px;
}


.md-trust-item small {
    margin-top: 4px;

    color: #6c8aa8;

    font-size: 9px;
}


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

@media (max-width: 950px) {

    .md-trust-inner {
        width: min(100% - 44px, 1500px) !important;
    }

    .md-trust-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px !important;
    }

    .md-trust-item {
        padding: 0 15px;
    }

    .md-trust-item::after {
        display: none !important;
    }

}


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

@media (max-width: 600px) {

    .md-trust {
        padding: 28px 18px !important;
    }

    .md-trust-inner {
        width: 100% !important;
    }

    .md-trust-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 26px 15px !important;
    }

    .md-trust-item {
        padding: 0;
    }

    .md-trust-brand {
        font-size: 15px;
    }

}



/* =====================================================
   ABOUT ME
   ===================================================== */

.md-about {
    position: relative;
    overflow: hidden;

    padding: 105px 30px;

    background:
        radial-gradient(
            circle at 8% 85%,
            rgba(22,135,255,.07),
            transparent 28%
        ),
        #ffffff;
}

.md-about-inner {
    width: min(1180px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;

    gap: 90px;
}


/* =====================================================
   ABOUT IMAGE
   ===================================================== */

.md-about-visual {
    position: relative;
}

.md-about-image-wrap {
    position: relative;

    overflow: hidden;

    max-width: 470px;

    margin: 0 auto;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #0b1830,
            #11294c
        );

    box-shadow:
        0 25px 60px rgba(7,26,51,.16);
}

.md-about-image-wrap::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 65% 30%,
            rgba(0,215,232,.16),
            transparent 38%
        );

    pointer-events: none;
}

.md-about-image {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    height: 500px;

    object-fit: contain;
    object-position: center bottom;
}


/* EXPERIENCE BADGE */

.md-about-badge {
    position: absolute;

    left: -25px;
    bottom: 30px;

    min-width: 155px;

    padding: 20px 22px;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(7,26,51,.18);

    border: 1px solid #e8eef5;
}

.md-about-badge strong {
    display: block;

    color: #1687ff;

    font-size: 34px;
    line-height: 1;

    font-weight: 800;
}

.md-about-badge span {
    display: block;

    margin-top: 7px;

    color: #64748b;

    font-size: 12px;
    line-height: 1.4;

    font-weight: 600;
}


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

.md-section-kicker {
    display: inline-block;

    margin-bottom: 14px;

    color: #1687ff;

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

    letter-spacing: 1.8px;
}

.md-about-content h2 {
    margin: 0 0 24px;

    color: #071426;

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

    line-height: 1.1;

    letter-spacing: -1.7px;

    font-weight: 800;
}

.md-about-content h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #1687ff,
            #7d5cff
        );

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

    color: transparent;
}

.md-about-content > p {
    max-width: 650px;

    margin: 0 0 18px;

    color: #64748b;

    font-size: 16px;
    line-height: 1.8;
}


/* =====================================================
   HIGHLIGHTS
   ===================================================== */

.md-about-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 16px;

    margin-top: 30px;
}

.md-about-highlight {
    padding: 18px 20px;

    border: 1px solid #e6edf5;

    border-radius: 12px;

    background: #f8fbff;
}

.md-about-highlight strong {
    display: block;

    margin-bottom: 5px;

    color: #0b1830;

    font-size: 14px;
}

.md-about-highlight span {
    color: #718096;

    font-size: 12px;

    line-height: 1.45;
}


/* =====================================================
   CV BUTTON
   ===================================================== */

.md-about-actions {
    margin-top: 30px;
}

.md-about-cv {
    min-height: 50px;

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

    gap: 12px;

    padding: 0 24px;

    border: 1px solid #1687ff;

    border-radius: 10px;

    color: #1687ff;

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

    text-decoration: none;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.md-about-cv:hover {
    color: #ffffff;

    background: #1687ff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(22,135,255,.22);
}

.md-about-cv span {
    font-size: 18px;
}


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

@media (max-width: 950px) {

    .md-about {
        padding: 85px 25px;
    }

    .md-about-inner {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .md-about-content {
        max-width: 720px;

        margin: 0 auto;
    }

    .md-about-visual {
        max-width: 520px;

        margin: 0 auto;
    }

}


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

@media (max-width: 600px) {

    .md-about {
        padding: 70px 18px;
    }

    .md-about-inner {
        gap: 45px;
    }

    .md-about-image {
        height: 420px;
    }

    .md-about-badge {
        left: 15px;
        bottom: 15px;

        min-width: 135px;

        padding: 16px 18px;
    }

    .md-about-badge strong {
        font-size: 28px;
    }

    .md-about-content h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }

    .md-about-highlights {
        grid-template-columns: 1fr;
    }

}

.container-top-b {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

.container-top-b .card,
.container-top-b .mod-custom {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* =====================================================
   SERVICES
   ===================================================== */

.md-services {
    position: relative;
    padding: 100px 30px 110px;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(22,135,255,.06),
            transparent 25%
        ),
        #f6f9fd;
}

.md-services-inner {
    width: min(1280px, 100%);
    margin: 0 auto;
}


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

.md-section-heading {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.md-section-heading .md-section-kicker {
    margin-bottom: 12px;
}

.md-section-heading h2 {
    margin: 0 0 16px;

    color: #071426;

    font-size: clamp(38px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.1;

    letter-spacing: -1.5px;
}

.md-section-heading p {
    margin: 0 auto;

    max-width: 630px;

    color: #6b7b90;

    font-size: 16px;
    line-height: 1.75;
}


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

.md-services-grid {
    display: grid;

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

    gap: 22px;
}


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

.md-service-card {
    position: relative;
    overflow: hidden;

    min-height: 310px;

    padding: 34px 30px;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e4ebf4;
    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(7,26,51,.055);

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


/* top gradient line */

.md-service-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #00d7e8,
            #1687ff,
            #7d5cff
        );

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .3s ease;
}


.md-service-card:hover {
    transform: translateY(-8px);

    border-color: rgba(22,135,255,.28);

    box-shadow:
        0 22px 50px rgba(7,26,51,.11);
}


.md-service-card:hover::before {
    transform: scaleX(1);
}


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

.md-service-icon {
    width: 54px;
    height: 54px;

    margin-bottom: 24px;

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

    border-radius: 13px;

    color: #1687ff;

    font-size: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(0,215,232,.1),
            rgba(22,135,255,.09),
            rgba(125,92,255,.09)
        );

    transition:
        color .3s ease,
        transform .3s ease;
}


.md-service-card:hover .md-service-icon {
    color: #7d5cff;

    transform: rotate(-4deg) scale(1.07);
}


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

.md-service-card h3 {
    margin: 0 0 13px;

    color: #0b1830;

    font-size: 20px;
    font-weight: 750;
    line-height: 1.3;
}


.md-service-card p {
    margin: 0 0 24px;

    color: #718096;

    font-size: 14px;
    line-height: 1.7;
}


.md-service-card a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: auto;

    color: #1687ff;

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

    text-decoration: none;
}


.md-service-card a span {
    transition: transform .2s ease;
}


.md-service-card a:hover {
    color: #6d55e7;
}


.md-service-card a:hover span {
    transform: translateX(5px);
}


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

@media (max-width: 1000px) {

    .md-services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 650px) {

    .md-services {
        padding: 75px 18px 80px;
    }

    .md-section-heading {
        margin-bottom: 38px;
    }

    .md-section-heading h2 {
        font-size: 38px;
    }

    .md-services-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }

    .md-service-card {
        min-height: auto;

        padding: 28px 25px;
    }

}

/* Services full-width reset */

body.view-featured .container-component,
body.view-article .container-component {
    max-width: none;
}

.container-main-top {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

.container-main-top .card,
.container-main-top .mod-custom {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* =====================================================
   FEATURED PROJECTS
   ===================================================== */

.md-projects {
    position: relative;
    overflow: hidden;

    padding: 105px 30px 115px;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(125,92,255,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(0,215,232,.08),
            transparent 30%
        ),
        #06101f;

    color: #ffffff;
}


.md-projects-inner {
    width: min(1280px, 100%);
    margin: 0 auto;
}


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

.md-projects-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 50px;
}


.md-projects-heading > div {
    max-width: 720px;
}


.md-projects-heading h2 {
    margin: 8px 0 15px;

    color: #ffffff;

    font-size: clamp(40px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.08;

    letter-spacing: -1.5px;
}


.md-projects-heading p {
    margin: 0;

    max-width: 650px;

    color: #8fa1b8;

    font-size: 16px;
    line-height: 1.75;
}


.md-projects-viewall {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    flex: 0 0 auto;

    color: #b9c7d8;

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

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.md-projects-viewall:hover {
    color: #00d7e8;
}


.md-projects-viewall span {
    transition: transform .2s ease;
}


.md-projects-viewall:hover span {
    transform: translateX(5px);
}


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

.md-projects-grid {
    display: grid;

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

    gap: 24px;
}


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

.md-project-card {
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            #0b1729 0%,
            #081321 100%
        );

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

    border-radius: 18px;

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

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


.md-project-card:hover {
    transform: translateY(-8px);

    border-color: rgba(22,135,255,.42);

    box-shadow:
        0 28px 60px rgba(0,0,0,.32);
}


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

.md-project-image {
    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 10;

    background: #0d1c31;
}


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

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .45s ease,
        filter .45s ease;
}


.md-project-card:hover .md-project-image img {
    transform: scale(1.045);
}


.md-project-type {
    position: absolute;

    left: 17px;
    bottom: 16px;

    padding: 7px 11px;

    border-radius: 50px;

    color: #dffcff;

    background: rgba(5,18,35,.82);

    border: 1px solid rgba(0,215,232,.25);

    backdrop-filter: blur(8px);

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

    letter-spacing: .5px;
}


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

.md-project-content {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 28px 25px 26px;
}


.md-project-content h3 {
    margin: 0 0 13px;

    color: #ffffff;

    font-size: 21px;
    line-height: 1.3;

    font-weight: 750;
}


.md-project-content p {
    margin: 0 0 20px;

    color: #93a4b9;

    font-size: 14px;
    line-height: 1.7;
}


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

.md-project-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 23px;
}


.md-project-tags span {
    padding: 6px 9px;

    border-radius: 7px;

    color: #82bfff;

    background: rgba(22,135,255,.08);

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

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


/* =====================================================
   CASE STUDY LINK
   ===================================================== */

.md-project-content > a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: auto;

    color: #21b6ff;

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

    text-decoration: none;
}


.md-project-content > a span {
    transition: transform .2s ease;
}


.md-project-content > a:hover {
    color: #00d7e8;
}


.md-project-content > a:hover span {
    transform: translateX(5px);
}


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

@media (max-width: 980px) {

    .md-projects-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .md-project-card:last-child {
        grid-column: 1 / -1;

        width: calc(50% - 12px);

        justify-self: center;
    }

}


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

@media (max-width: 680px) {

    .md-projects {
        padding: 80px 18px 85px;
    }

    .md-projects-heading {
        align-items: flex-start;
        flex-direction: column;

        margin-bottom: 38px;
    }

    .md-projects-heading h2 {
        font-size: 38px;
    }

    .md-projects-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .md-project-card:last-child {
        grid-column: auto;

        width: 100%;
    }

}

/* =====================================================
   CLIENT TESTIMONIALS
   ===================================================== */

.md-testimonials {
    position: relative;
    overflow: hidden;

    padding: 100px 30px 110px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(22,135,255,.08),
            transparent 28%
        ),
        #eef5fc;
}


.md-testimonials-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
}


.md-testimonial-grid {
    display: grid;

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

    gap: 24px;
}


.md-testimonial-card {
    position: relative;

    padding: 34px 30px 30px;

    background: #ffffff;

    border: 1px solid #dfe8f2;

    border-radius: 18px;

    box-shadow:
        0 14px 38px rgba(7,26,51,.07);

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


.md-testimonial-card:hover {
    transform: translateY(-6px);

    border-color: rgba(22,135,255,.28);

    box-shadow:
        0 22px 48px rgba(7,26,51,.11);
}


.md-testimonial-quote {
    margin-bottom: 10px;

    color: #1687ff;

    font-size: 50px;
    line-height: .8;

    font-family: Georgia, serif;

    font-weight: 700;
}


.md-testimonial-card p {
    margin: 0 0 28px;

    color: #64748b;

    font-size: 15px;
    line-height: 1.8;
}


.md-testimonial-author {
    padding-top: 18px;

    border-top: 1px solid #e8eef5;
}


.md-testimonial-author strong {
    display: block;

    color: #0b1830;

    font-size: 14px;
    font-weight: 750;
}


.md-testimonial-author span {
    display: block;

    margin-top: 4px;

    color: #8a99aa;

    font-size: 12px;
}


/* TABLET */

@media (max-width: 900px) {

    .md-testimonial-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .md-testimonial-card:last-child {
        grid-column: 1 / -1;

        width: calc(50% - 12px);

        justify-self: center;
    }

}


/* MOBILE */

@media (max-width: 620px) {

    .md-testimonials {
        padding: 75px 18px 80px;
    }

    .md-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .md-testimonial-card:last-child {
        grid-column: auto;

        width: 100%;
    }

}

/* =====================================================
   LATEST INSIGHTS / BLOG
   ===================================================== */

.md-blog {
    position: relative;
    overflow: hidden;

    padding: 105px 30px 115px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(125,92,255,.11),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(0,215,232,.07),
            transparent 28%
        ),
        #06101f;
}


.md-blog-inner {
    width: min(1280px, 100%);
    margin: 0 auto;
}


.md-blog-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 48px;
}


.md-blog-heading > div {
    max-width: 700px;
}


.md-blog-heading h2 {
    margin: 8px 0 15px;

    color: #ffffff;

    font-size: clamp(40px, 4vw, 54px);
    font-weight: 800;

    line-height: 1.08;
    letter-spacing: -1.5px;
}


.md-blog-heading p {
    margin: 0;

    max-width: 630px;

    color: #8fa1b8;

    font-size: 16px;
    line-height: 1.75;
}


.md-blog-viewall {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: #b8c5d5;

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

    text-decoration: none;

    transition: color .2s ease;
}


.md-blog-viewall:hover {
    color: #00d7e8;
}


.md-blog-viewall span {
    transition: transform .2s ease;
}


.md-blog-viewall:hover span {
    transform: translateX(5px);
}


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

.md-blog-grid {
    display: grid;

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

    gap: 24px;
}


.md-blog-card {
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #0b1729 0%,
            #081321 100%
        );

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

    border-radius: 17px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.22);

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


.md-blog-card:hover {
    transform: translateY(-7px);

    border-color: rgba(22,135,255,.38);
}


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

.md-blog-image {
    display: block;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: #0d1a2d;
}


.md-blog-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}


.md-blog-card:hover .md-blog-image img {
    transform: scale(1.05);
}


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

.md-blog-content {
    padding: 24px 24px 25px;
}


.md-blog-category {
    display: block;

    margin-bottom: 10px;

    color: #1687ff;

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

    letter-spacing: 1px;
}


.md-blog-content h3 {
    margin: 0 0 18px;

    font-size: 19px;
    line-height: 1.4;

    font-weight: 750;
}


.md-blog-content h3 a {
    color: #ffffff;

    text-decoration: none;

    transition: color .2s ease;
}


.md-blog-content h3 a:hover {
    color: #00d7e8;
}


.md-blog-meta {
    padding-top: 15px;

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

    color: #708299;

    font-size: 11px;
}


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

@media (max-width: 950px) {

    .md-blog-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .md-blog-card:last-child {
        grid-column: 1 / -1;

        width: calc(50% - 12px);

        justify-self: center;
    }

}


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

@media (max-width: 650px) {

    .md-blog {
        padding: 78px 18px 85px;
    }

    .md-blog-heading {
        flex-direction: column;
        align-items: flex-start;

        margin-bottom: 38px;
    }

    .md-blog-heading h2 {
        font-size: 38px;
    }

    .md-blog-grid {
        grid-template-columns: 1fr;
    }

    .md-blog-card:last-child {
        grid-column: auto;
        width: 100%;
    }

}

/* =====================================================
   PORTFOLIO FOOTER
   ===================================================== */

.md-footer {
    padding: 70px 30px 25px;

    background: #040b16;

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


.md-footer-inner {
    width: min(1280px, 100%);
    margin: 0 auto;
}


.md-footer-main {
    display: grid;

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

    gap: 65px;

    padding-bottom: 55px;
}


/* =====================================================
   BRAND
   ===================================================== */

.md-footer-logo {
    display: inline-block;

    margin-bottom: 18px;

    color: #ffffff;

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

    letter-spacing: .4px;

    text-decoration: none;
}


.md-footer-logo span {
    color: #1687ff;
}


.md-footer-brand > p {
    max-width: 340px;

    margin: 0;

    color: #7f91a8;

    font-size: 13px;
    line-height: 1.75;
}


.md-footer-socials {
    display: flex;

    gap: 10px;

    margin-top: 22px;
}


.md-footer-socials a {
    width: 37px;
    height: 37px;

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

    color: #8ea0b7;

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

    border-radius: 8px;

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

    text-decoration: none;

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


.md-footer-socials a:hover {
    color: #00d7e8;

    border-color: rgba(0,215,232,.35);

    transform: translateY(-3px);
}


/* =====================================================
   COLUMNS
   ===================================================== */

.md-footer-column h3 {
    margin: 2px 0 20px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 750;
}


.md-footer-column ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.md-footer-column li {
    margin-bottom: 11px;
}


.md-footer-column a {
    color: #8294aa;

    font-size: 12px;

    text-decoration: none;

    transition: color .2s ease;
}


.md-footer-column a:hover {
    color: #00d7e8;
}


/* CONTACT */

.md-footer-contact p {
    margin: 0 0 14px;

    color: #8294aa;

    font-size: 12px;
    line-height: 1.65;
}


.md-footer-email {
    display: block;

    word-break: break-word;

    color: #a9bdd4 !important;
}


.md-footer-contact-link {
    display: inline-block;

    margin-top: 16px;

    color: #1687ff !important;

    font-weight: 700;
}


/* =====================================================
   FOOTER BOTTOM
   ===================================================== */

.md-footer-bottom {
    min-height: 70px;

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

    gap: 30px;

    padding-top: 22px;

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


.md-footer-bottom p {
    margin: 0;

    color: #607288;

    font-size: 11px;
}


.md-footer-legal {
    display: flex;

    gap: 24px;
}


.md-footer-legal a {
    color: #607288;

    font-size: 11px;

    text-decoration: none;
}


.md-footer-legal a:hover {
    color: #00d7e8;
}


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

@media (max-width: 950px) {

    .md-footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 50px;
    }

}


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

@media (max-width: 600px) {

    .md-footer {
        padding:
            55px
            22px
            20px;
    }

    .md-footer-main {
        grid-template-columns: 1fr;

        gap: 38px;

        padding-bottom: 40px;
    }

    .md-footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }

    .md-footer-legal {
        flex-wrap: wrap;

        gap: 15px 22px;
    }

}

/* =====================================================
   SKILLS + EXPERIENCE
   ===================================================== */

.md-skills-exp {
    position: relative;
    overflow: hidden;

    padding: 105px 30px 110px;

    background:
        radial-gradient(
            circle at 5% 85%,
            rgba(0,215,232,.06),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(125,92,255,.06),
            transparent 25%
        ),
        #ffffff;
}


.md-skills-exp-inner {
    width: min(1280px, 100%);
    margin: 0 auto;

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

    gap: 100px;
}


/* =====================================================
   SHARED HEADINGS
   ===================================================== */

.md-skills-column h2,
.md-experience-column h2 {
    margin: 8px 0 20px;

    color: #071426;

    font-size: clamp(34px, 3.5vw, 48px);
    font-weight: 800;

    line-height: 1.1;
    letter-spacing: -1.4px;
}


.md-skills-column h2 span,
.md-experience-column h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #1687ff,
            #7d5cff
        );

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

    color: transparent;
}


.md-skills-intro {
    margin: 0 0 35px;

    color: #6d7d91;

    font-size: 15px;
    line-height: 1.75;
}


/* =====================================================
   SKILLS
   ===================================================== */

.md-skill-list {
    display: flex;
    flex-direction: column;

    gap: 24px;
}


.md-skill-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 10px;
}


.md-skill-top span {
    color: #0b1830;

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


.md-skill-top strong {
    color: #1687ff;

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


.md-skill-track {
    overflow: hidden;

    width: 100%;
    height: 7px;

    background: #e9eff6;

    border-radius: 50px;
}


.md-skill-track span {
    display: block;

    width: var(--skill-level);
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #00d7e8,
            #1687ff,
            #7d5cff
        );

    box-shadow:
        0 0 12px rgba(22,135,255,.18);
}


/* =====================================================
   EXPERIENCE TIMELINE
   ===================================================== */

.md-experience-timeline {
    position: relative;

    margin-top: 35px;
}


.md-experience-timeline::before {
    content: "";

    position: absolute;

    left: 7px;
    top: 9px;
    bottom: 10px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            #00d7e8,
            #1687ff,
            rgba(125,92,255,.18)
        );
}


.md-exp-item {
    position: relative;

    padding-left: 42px;

    margin-bottom: 38px;
}


.md-exp-item:last-child {
    margin-bottom: 0;
}


.md-exp-dot {
    position: absolute;

    left: 0;
    top: 7px;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    background: #ffffff;

    border: 4px solid #1687ff;

    box-shadow:
        0 0 0 5px rgba(22,135,255,.08);
}


.md-exp-date {
    display: inline-block;

    margin-bottom: 7px;

    color: #1687ff;

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

    letter-spacing: .7px;

    text-transform: uppercase;
}


.md-exp-content h3 {
    margin: 0 0 10px;

    color: #0b1830;

    font-size: 20px;
    font-weight: 750;

    line-height: 1.35;
}


.md-exp-content p {
    margin: 0;

    color: #718096;

    font-size: 14px;
    line-height: 1.7;
}


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

.md-exp-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 15px;
}


.md-exp-tags span {
    padding: 5px 9px;

    color: #47647f;

    background: #f2f7fc;

    border: 1px solid #e2ebf4;

    border-radius: 7px;

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


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

.md-skills-actions,
.md-experience-actions {
    margin-top: 34px;
}


.md-outline-btn {
    min-height: 48px;

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

    gap: 10px;

    padding: 0 21px;

    color: #1687ff;

    border: 1px solid #1687ff;

    border-radius: 9px;

    background: #ffffff;

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

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.md-outline-btn span {
    transition: transform .2s ease;
}


.md-outline-btn:hover {
    color: #ffffff;

    background: #1687ff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(22,135,255,.20);
}


.md-outline-btn:hover span {
    transform: translateX(4px);
}


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

@media (max-width: 950px) {

    .md-skills-exp-inner {
        grid-template-columns: 1fr;

        gap: 75px;
    }

    .md-skills-column,
    .md-experience-column {
        max-width: 760px;

        width: 100%;

        margin: 0 auto;
    }

}


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

@media (max-width: 600px) {

    .md-skills-exp {
        padding: 75px 20px 80px;
    }

    .md-skills-exp-inner {
        gap: 65px;
    }

    .md-skills-column h2,
    .md-experience-column h2 {
        font-size: 36px;
    }

    .md-exp-item {
        padding-left: 35px;
    }

}

/* =====================================================
   FORCE FOOTER FULL WIDTH
   REMOVE CASSIOPEIA FOOTER BACKGROUND
   ===================================================== */

footer.container-footer {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #040b16 !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Cassiopeia inner wrapper */
footer.container-footer .grid-child {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
}


/* Joomla footer modules */
footer.container-footer .mod-custom,
footer.container-footer .moduletable,
footer.container-footer .card {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


/* Our custom footer */
.md-footer {
    width: 100% !important;

    margin: 0 !important;

    background: #040b16 !important;
}


/* =====================================================
   ABOUT PAGE HERO
   ===================================================== */

.md-about-page-hero {
    position: relative;
    overflow: hidden;

    padding: 95px 30px 80px;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(22,135,255,.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(125,92,255,.10),
            transparent 28%
        ),
        #06101f;

    color: #ffffff;
}


.md-about-page-inner {
    width: min(1280px, 100%);
    margin: 0 auto;

    display: grid;

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

    align-items: center;

    gap: 80px;
}


.md-about-page-content {
    max-width: 720px;
}


.md-about-page-content h1 {
    margin: 10px 0 22px;

    color: #ffffff;

    font-size: clamp(48px, 6vw, 78px);
    font-weight: 800;

    line-height: 1.04;
    letter-spacing: -2.2px;
}


.md-about-page-content h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #00d7e8,
            #1687ff,
            #7d5cff
        );

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

    color: transparent;
}


.md-about-page-content p {
    max-width: 650px;

    margin: 0;

    color: #9badc3;

    font-size: 17px;
    line-height: 1.8;
}


/* ACTIONS */

.md-about-page-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 32px;
}


/* PHOTO */

.md-about-page-photo {
    position: relative;

    min-height: 520px;

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


.md-about-page-photo-bg {
    position: absolute;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    border: 1px solid rgba(0,215,232,.38);

    box-shadow:
        0 0 0 25px rgba(22,135,255,.04),
        0 0 80px rgba(22,135,255,.17);
}


.md-about-page-photo-bg::before {
    content: "";

    position: absolute;

    inset: 35px;

    border-radius: 50%;

    border: 1px solid rgba(125,92,255,.38);
}


.md-about-page-photo img {
    position: relative;
    z-index: 2;

    display: block;

    max-width: 420px;
    width: 100%;
    height: 520px;

    object-fit: contain;
    object-position: bottom center;
}


/* TABLET */

@media (max-width: 950px) {

    .md-about-page-inner {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .md-about-page-content {
        text-align: center;

        margin: 0 auto;
    }

    .md-about-page-content p {
        margin-inline: auto;
    }

    .md-about-page-actions {
        justify-content: center;
    }

    .md-about-page-photo {
        min-height: 430px;
    }

    .md-about-page-photo img {
        height: 430px;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .md-about-page-hero {
        padding: 75px 20px 55px;
    }

    .md-about-page-content h1 {
        font-size: 44px;
    }

    .md-about-page-content p {
        font-size: 15px;
    }

    .md-about-page-photo {
        min-height: 360px;
    }

    .md-about-page-photo-bg {
        width: 300px;
        height: 300px;
    }

    .md-about-page-photo img {
        height: 360px;
    }

}

/* =====================================================
   ABOUT PAGE - MY STORY
   ===================================================== */

.md-story {
    position: relative;
    overflow: hidden;

    padding: 110px 30px;

    background:
        radial-gradient(
            circle at 10% 90%,
            rgba(0,215,232,.06),
            transparent 28%
        ),
        #ffffff;
}


.md-story-inner {
    width: min(1180px, 100%);
    margin: 0 auto;

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

    align-items: center;

    gap: 90px;
}


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

.md-story-visual {
    position: relative;

    max-width: 500px;
}


.md-story-image-card {
    overflow: hidden;

    min-height: 560px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #09182d,
            #0d2a4d
        );

    box-shadow:
        0 28px 65px rgba(7,26,51,.16);
}


.md-story-image-card img {
    display: block;

    width: 100%;
    height: 560px;

    object-fit: cover;
    object-position: center;
}


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

.md-story-stat {
    position: absolute;

    padding: 15px 18px;

    border: 1px solid #e1eaf4;

    border-radius: 12px;

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

    box-shadow:
        0 14px 35px rgba(7,26,51,.12);

    backdrop-filter: blur(8px);
}


.md-story-stat strong {
    display: block;

    color: #1687ff;

    font-size: 17px;
    font-weight: 800;
}


.md-story-stat span {
    display: block;

    margin-top: 3px;

    color: #66788d;

    font-size: 10px;
    line-height: 1.4;
}


.md-story-stat-one {
    left: -28px;
    bottom: 55px;
}


.md-story-stat-two {
    right: -45px;
    top: 48px;
}


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

.md-story-content h2 {
    margin: 8px 0 24px;

    color: #071426;

    font-size: clamp(38px, 4vw, 54px);
    font-weight: 800;

    line-height: 1.08;
    letter-spacing: -1.5px;
}


.md-story-content h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #1687ff,
            #7d5cff
        );

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

    color: transparent;
}


.md-story-content > p {
    margin: 0 0 18px;

    color: #68798e;

    font-size: 15px;
    line-height: 1.85;
}


/* =====================================================
   QUOTE
   ===================================================== */

.md-story-quote {
    position: relative;

    margin: 30px 0 0;
    padding: 20px 22px 20px 25px;

    color: #25384f;

    background: #f5f9fd;

    border: 0;
    border-left: 3px solid #1687ff;

    border-radius: 0 12px 12px 0;

    font-size: 15px;
    font-weight: 650;
    font-style: italic;

    line-height: 1.65;
}


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

@media (max-width: 950px) {

    .md-story-inner {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .md-story-visual {
        width: min(500px, 100%);

        margin: 0 auto;
    }

    .md-story-content {
        max-width: 760px;

        margin: 0 auto;
    }

}


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

@media (max-width: 600px) {

    .md-story {
        padding: 75px 20px;
    }

    .md-story-image-card {
        min-height: 440px;
    }

    .md-story-image-card img {
        height: 440px;
    }

    .md-story-stat-one {
        left: 12px;
        bottom: 18px;
    }

    .md-story-stat-two {
        right: 12px;
        top: 18px;
    }

    .md-story-content h2 {
        font-size: 38px;
    }

}

/* =====================================================
   ABOUT PAGE - CORE STRENGTHS
   ===================================================== */

.md-strengths {
    position: relative;
    overflow: hidden;

    padding: 100px 30px 110px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(22,135,255,.08),
            transparent 28%
        ),
        #f4f8fc;
}


.md-strengths-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
}


/* GRID */

.md-strengths-grid {
    display: grid;

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

    gap: 22px;
}


/* CARD */

.md-strength-card {
    position: relative;

    min-height: 285px;

    padding: 30px 26px;

    background: #ffffff;

    border: 1px solid #e0e8f1;

    border-radius: 18px;

    box-shadow:
        0 14px 35px rgba(7,26,51,.06);

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


.md-strength-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 25px;
    right: 25px;

    height: 3px;

    border-radius: 0 0 8px 8px;

    background:
        linear-gradient(
            90deg,
            #00d7e8,
            #1687ff,
            #7d5cff
        );

    opacity: 0;

    transition: opacity .3s ease;
}


.md-strength-card:hover {
    transform: translateY(-7px);

    border-color: rgba(22,135,255,.28);

    box-shadow:
        0 22px 48px rgba(7,26,51,.10);
}


.md-strength-card:hover::before {
    opacity: 1;
}


/* ICON */

.md-strength-icon {
    width: 52px;
    height: 52px;

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

    margin-bottom: 24px;

    color: #1687ff;

    background:
        linear-gradient(
            135deg,
            rgba(22,135,255,.10),
            rgba(0,215,232,.08)
        );

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

    border-radius: 13px;

    font-size: 19px;
}


/* TEXT */

.md-strength-card h3 {
    margin: 0 0 13px;

    color: #0b1830;

    font-size: 18px;
    font-weight: 750;
}


.md-strength-card p {
    margin: 0;

    color: #718096;

    font-size: 14px;
    line-height: 1.75;
}


/* TABLET */

@media (max-width: 980px) {

    .md-strengths-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .md-strengths {
        padding: 75px 20px 80px;
    }

    .md-strengths-grid {
        grid-template-columns: 1fr;
    }

    .md-strength-card {
        min-height: auto;
    }

}

/* =====================================================
   ABOUT PAGE - SKILLS & TOOLS
   ===================================================== */

.md-tools {
    position: relative;
    overflow: hidden;

    padding: 105px 30px 110px;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(125,92,255,.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(0,215,232,.08),
            transparent 28%
        ),
        #06101f;

    color: #ffffff;
}


.md-tools-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
}


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

.md-tools-heading {
    max-width: 720px;

    margin: 0 auto 48px;

    text-align: center;
}


.md-tools-heading h2 {
    margin: 8px 0 15px;

    color: #ffffff;

    font-size: clamp(40px, 4vw, 54px);
    font-weight: 800;

    line-height: 1.08;
    letter-spacing: -1.5px;
}


.md-tools-heading p {
    margin: 0 auto;

    max-width: 650px;

    color: #8fa1b8;

    font-size: 16px;
    line-height: 1.75;
}


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

.md-tools-grid {
    display: grid;

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

    gap: 15px;
}


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

.md-tool-card {
    min-height: 92px;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 17px 18px;

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

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

    border-radius: 13px;

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


.md-tool-card:hover {
    transform: translateY(-4px);

    border-color: rgba(22,135,255,.35);

    background:
        linear-gradient(
            145deg,
            rgba(22,135,255,.10),
            rgba(125,92,255,.05)
        );

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


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

.md-tool-icon {
    flex: 0 0 auto;

    width: 45px;
    height: 45px;

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

    color: #27b6ff;

    background: rgba(22,135,255,.09);

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

    border-radius: 10px;

    font-size: 21px;
}


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

.md-tool-card strong {
    display: block;

    color: #ffffff;

    font-size: 13px;
    font-weight: 750;
}


.md-tool-card span {
    display: block;

    margin-top: 4px;

    color: #73869e;

    font-size: 10px;
    line-height: 1.4;
}


/* =====================================================
   NOTE
   ===================================================== */

.md-tools-note {
    max-width: 720px;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    margin: 38px auto 0;

    padding: 16px 19px;

    color: #8ea1b8;

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

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

    border-radius: 11px;
}


.md-tools-note i {
    margin-top: 4px;

    color: #1687ff;
}


.md-tools-note p {
    margin: 0;

    font-size: 12px;
    line-height: 1.65;
}


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

@media (max-width: 980px) {

    .md-tools-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 760px) {

    .md-tools-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 520px) {

    .md-tools {
        padding: 78px 18px 85px;
    }

    .md-tools-heading h2 {
        font-size: 38px;
    }

    .md-tools-grid {
        grid-template-columns: 1fr;
    }

    .md-tool-card {
        min-height: 80px;
    }

}

/* =====================================================
   ABOUT PAGE - HOW I WORK
   ===================================================== */

.md-process {
    position: relative;
    overflow: hidden;

    padding: 105px 30px 115px;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(0,215,232,.06),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(125,92,255,.06),
            transparent 28%
        ),
        #ffffff;
}


.md-process-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
}


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

.md-process-heading {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}


.md-process-heading h2 {
    margin: 8px 0 16px;

    color: #071426;

    font-size: clamp(40px, 4vw, 54px);
    font-weight: 800;

    line-height: 1.08;
    letter-spacing: -1.5px;
}


.md-process-heading h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #1687ff,
            #7d5cff
        );

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

    color: transparent;
}


.md-process-heading p {
    margin: 0 auto;

    max-width: 680px;

    color: #718096;

    font-size: 15px;
    line-height: 1.8;
}


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

.md-process-grid {
    position: relative;

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

    gap: 22px;
}


/* CONNECTING LINE */

.md-process-grid::before {
    content: "";

    position: absolute;

    top: 49px;
    left: 11%;
    right: 11%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(0,215,232,.25),
            rgba(22,135,255,.55),
            rgba(125,92,255,.25)
        );

    z-index: 0;
}


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

.md-process-card {
    position: relative;
    z-index: 1;

    min-height: 285px;

    padding: 28px 24px 26px;

    background: #ffffff;

    border: 1px solid #e1e9f2;

    border-radius: 18px;

    box-shadow:
        0 14px 35px rgba(7,26,51,.06);

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


.md-process-card:hover {
    transform: translateY(-7px);

    border-color: rgba(22,135,255,.30);

    box-shadow:
        0 22px 48px rgba(7,26,51,.11);
}


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

.md-process-number {
    position: absolute;

    top: 20px;
    right: 20px;

    color: #dbe5ef;

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

    line-height: 1;
}


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

.md-process-icon {
    position: relative;
    z-index: 2;

    width: 54px;
    height: 54px;

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

    margin-bottom: 25px;

    color: #1687ff;

    background:
        linear-gradient(
            135deg,
            #edf7ff,
            #f2efff
        );

    border: 1px solid #dfeaf5;

    border-radius: 50%;

    font-size: 19px;

    box-shadow:
        0 0 0 8px #ffffff;
}


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

.md-process-card h3 {
    margin: 0 0 13px;

    color: #0b1830;

    font-size: 19px;
    font-weight: 750;
}


.md-process-card p {
    margin: 0;

    color: #718096;

    font-size: 13px;
    line-height: 1.75;
}


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

@media (max-width: 980px) {

    .md-process-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .md-process-grid::before {
        display: none;
    }

}


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

@media (max-width: 600px) {

    .md-process {
        padding: 78px 20px 85px;
    }

    .md-process-heading h2 {
        font-size: 38px;
    }

    .md-process-grid {
        grid-template-columns: 1fr;
    }

    .md-process-card {
        min-height: auto;
    }

}

/* =====================================================
   ABOUT PAGE - BEYOND THE CODE
   ===================================================== */

.md-beyond {
    position: relative;
    overflow: hidden;

    padding: 105px 30px 110px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(22,135,255,.07),
            transparent 28%
        ),
        #f5f9fd;
}


.md-beyond-inner {
    width: min(1180px, 100%);
    margin: 0 auto;

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

    align-items: center;

    gap: 90px;
}


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

.md-beyond-content h2 {
    margin: 8px 0 23px;

    color: #071426;

    font-size: clamp(38px, 4vw, 54px);
    font-weight: 800;

    line-height: 1.08;
    letter-spacing: -1.5px;
}


.md-beyond-content h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #1687ff,
            #7d5cff
        );

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

    color: transparent;
}


.md-beyond-content > p {
    margin: 0 0 18px;

    max-width: 670px;

    color: #68798e;

    font-size: 15px;
    line-height: 1.85;
}


/* =====================================================
   VALUES
   ===================================================== */

.md-beyond-values {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px;

    margin-top: 32px;
}


.md-beyond-value {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 15px;

    background: #ffffff;

    border: 1px solid #e0e8f1;

    border-radius: 12px;

    box-shadow:
        0 8px 22px rgba(7,26,51,.04);
}


.md-beyond-value > i {
    flex: 0 0 auto;

    width: 39px;
    height: 39px;

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

    color: #1687ff;

    background: rgba(22,135,255,.08);

    border-radius: 9px;

    font-size: 14px;
}


.md-beyond-value strong {
    display: block;

    color: #0b1830;

    font-size: 12px;
    font-weight: 750;
}


.md-beyond-value span {
    display: block;

    margin-top: 3px;

    color: #8493a6;

    font-size: 9px;
}


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

.md-beyond-visual {
    position: relative;

    width: min(430px, 100%);

    margin-left: auto;
}


.md-beyond-photo {
    overflow: hidden;

    min-height: 500px;

    background:
        linear-gradient(
            145deg,
            #09182d,
            #0d2a4d
        );

    border-radius: 22px;

    box-shadow:
        0 25px 60px rgba(7,26,51,.15);
}


.md-beyond-photo img {
    display: block;

    width: 100%;
    height: 500px;

    object-fit: cover;
    object-position: center;
}


/* =====================================================
   FLOATING NOTE
   ===================================================== */

.md-beyond-note {
    position: absolute;

    left: -45px;
    bottom: 38px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 14px 18px;

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

    border: 1px solid #dfe8f1;

    border-radius: 12px;

    box-shadow:
        0 15px 38px rgba(7,26,51,.14);

    backdrop-filter: blur(8px);
}


.md-beyond-note > span {
    width: 40px;
    height: 40px;

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

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #1687ff,
            #7d5cff
        );

    border-radius: 9px;
}


.md-beyond-note strong {
    display: block;

    color: #0b1830;

    font-size: 12px;
}


.md-beyond-note small {
    display: block;

    margin-top: 3px;

    color: #7b8da2;

    font-size: 9px;
}


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

@media (max-width: 950px) {

    .md-beyond-inner {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .md-beyond-content {
        max-width: 760px;

        margin: 0 auto;
    }

    .md-beyond-visual {
        margin: 0 auto;
    }

}


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

@media (max-width: 600px) {

    .md-beyond {
        padding: 78px 20px 85px;
    }

    .md-beyond-content h2 {
        font-size: 38px;
    }

    .md-beyond-values {
        grid-template-columns: 1fr;
    }

    .md-beyond-photo {
        min-height: 420px;
    }

    .md-beyond-photo img {
        height: 420px;
    }

    .md-beyond-note {
        left: 15px;
        right: 15px;
        bottom: 18px;
    }

}

/* =====================================================
   ABOUT PAGE - FINAL CTA
   ===================================================== */

.md-about-cta {
    position: relative;
    overflow: hidden;

    padding: 95px 30px;

    background: #06101f;
}


.md-about-cta-inner {
    position: relative;
    overflow: hidden;

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

    padding: 75px 55px 35px;

    background:
        linear-gradient(
            135deg,
            rgba(22,135,255,.14),
            rgba(125,92,255,.09)
        ),
        #0a1930;

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

    border-radius: 26px;

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


/* SUBTLE GRID */

.md-about-cta-inner::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .045;

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

    background-size: 45px 45px;

    pointer-events: none;
}


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

.md-about-cta-content {
    position: relative;
    z-index: 3;

    max-width: 800px;

    margin: 0 auto;

    text-align: center;
}


.md-about-cta-kicker {
    display: inline-block;

    margin-bottom: 15px;

    color: #00d7e8;

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

    letter-spacing: 1.8px;
}


.md-about-cta h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 5vw, 62px);
    font-weight: 800;

    line-height: 1.06;
    letter-spacing: -2px;
}


.md-about-cta h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #00d7e8,
            #1687ff,
            #8a5cff
        );

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

    color: transparent;
}


.md-about-cta-content > p {
    max-width: 670px;

    margin: 22px auto 0;

    color: #9eafc3;

    font-size: 15px;
    line-height: 1.8;
}


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

.md-about-cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 32px;
}


.md-about-cta-primary,
.md-about-cta-secondary {
    min-height: 52px;

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

    gap: 10px;

    padding: 0 25px;

    border-radius: 10px;

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

    text-decoration: none;

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


.md-about-cta-primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #1687ff,
            #6657ef
        );

    border: 1px solid #1687ff;

    box-shadow:
        0 12px 35px rgba(22,135,255,.24);
}


.md-about-cta-primary:hover {
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 17px 42px rgba(22,135,255,.34);
}


.md-about-cta-secondary {
    color: #ffffff;

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

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


.md-about-cta-secondary:hover {
    color: #ffffff;

    transform: translateY(-3px);

    border-color: #00d7e8;

    background: rgba(0,215,232,.06);
}


/* =====================================================
   BOTTOM TRUST POINTS
   ===================================================== */

.md-about-cta-bottom {
    position: relative;
    z-index: 3;

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

    gap: 25px;

    max-width: 760px;

    margin: 52px auto 0;
    padding-top: 25px;

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


.md-about-cta-point {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #8194aa;

    font-size: 11px;
    font-weight: 600;
}


.md-about-cta-point i {
    color: #1687ff;

    font-size: 12px;
}


.md-about-cta-divider {
    width: 3px;
    height: 3px;

    flex: 0 0 auto;

    background: #42546a;

    border-radius: 50%;
}


/* =====================================================
   GLOW EFFECTS
   ===================================================== */

.md-about-cta-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(85px);

    pointer-events: none;
}


.md-about-cta-glow-one {
    width: 300px;
    height: 300px;

    top: -140px;
    right: -80px;

    background: rgba(125,92,255,.28);
}


.md-about-cta-glow-two {
    width: 270px;
    height: 270px;

    bottom: -150px;
    left: -80px;

    background: rgba(0,215,232,.18);
}


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

@media (max-width: 650px) {

    .md-about-cta {
        padding: 70px 18px;
    }

    .md-about-cta-inner {
        padding: 55px 23px 30px;

        border-radius: 20px;
    }

    .md-about-cta h2 {
        font-size: 40px;

        letter-spacing: -1.2px;
    }

    .md-about-cta-actions {
        flex-direction: column;
    }

    .md-about-cta-primary,
    .md-about-cta-secondary {
        width: 100%;
    }

    .md-about-cta-bottom {
        flex-direction: column;

        gap: 12px;

        margin-top: 40px;
    }

    .md-about-cta-divider {
        display: none;
    }

}

/* =====================================================
   PORTFOLIO PAGE - HERO
   ===================================================== */

.md-work-hero {
    position: relative;
    overflow: hidden;

    padding: 105px 30px 0;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(22,135,255,.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 12% 80%,
            rgba(125,92,255,.10),
            transparent 28%
        ),
        #06101f;
}


/* GRID BACKGROUND */

.md-work-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .035;

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

    background-size: 50px 50px;

    pointer-events: none;
}


.md-work-hero-inner {
    position: relative;
    z-index: 2;

    width: min(1280px, 100%);
    min-height: 550px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, .95fr);

    align-items: center;

    gap: 75px;
}


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

.md-work-hero-content {
    max-width: 720px;
}


.md-work-hero-content h1 {
    margin: 10px 0 23px;

    color: #ffffff;

    font-size: clamp(52px, 6vw, 78px);
    font-weight: 800;

    line-height: 1.03;
    letter-spacing: -2.5px;
}


.md-work-hero-content h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #00d7e8,
            #1687ff,
            #8a5cff
        );

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

    color: transparent;
}


.md-work-hero-content p {
    max-width: 650px;

    margin: 0;

    color: #9aacc1;

    font-size: 17px;
    line-height: 1.8;
}


.md-work-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 32px;
}


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

.md-work-hero-visual {
    position: relative;

    min-height: 470px;

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

    perspective: 1000px;
}


/* GLOW */

.md-work-hero-visual::before {
    content: "";

    position: absolute;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(22,135,255,.20),
            transparent 68%
        );

    filter: blur(10px);
}


/* =====================================================
   BROWSER MOCKUP
   ===================================================== */

.md-work-browser {
    position: relative;
    z-index: 3;

    width: min(500px, 92%);

    overflow: hidden;

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

    border-radius: 16px;

    background: #0b1729;

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

    transform:
        rotateY(-7deg)
        rotateX(2deg)
        rotateZ(1deg);
}


.md-work-browser-bar {
    height: 42px;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 0 13px;

    background: #101d30;

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


.md-browser-dots {
    display: flex;

    gap: 5px;
}


.md-browser-dots span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #53647a;
}


.md-browser-address {
    flex: 1;

    padding: 6px 12px;

    color: #63758b;

    background: #091525;

    border-radius: 6px;

    font-size: 8px;
}


/* SCREEN */

.md-work-browser-screen {
    min-height: 300px;

    display: grid;

    grid-template-columns: 22% 1fr;

    background:
        linear-gradient(
            135deg,
            #081426,
            #0b1e36
        );
}


.md-screen-sidebar {
    border-right: 1px solid rgba(255,255,255,.05);

    background: rgba(255,255,255,.015);
}


.md-screen-content {
    padding: 45px 32px;
}


.md-screen-content > span {
    display: block;

    height: 8px;

    margin-bottom: 9px;

    border-radius: 10px;

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


.md-screen-content > span:nth-child(1) {
    width: 52%;

    height: 14px;

    background:
        linear-gradient(
            90deg,
            rgba(0,215,232,.6),
            rgba(22,135,255,.55)
        );
}


.md-screen-content > span:nth-child(2) {
    width: 80%;
}


.md-screen-content > span:nth-child(3) {
    width: 65%;
}


.md-screen-cards {
    display: grid;

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

    gap: 10px;

    margin-top: 35px;
}


.md-screen-cards i {
    height: 75px;

    display: block;

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

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(22,135,255,.13),
            rgba(125,92,255,.06)
        );
}


/* =====================================================
   ORBITS
   ===================================================== */

.md-work-orbit {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(0,215,232,.12);
}


.md-work-orbit-one {
    width: 430px;
    height: 430px;
}


.md-work-orbit-two {
    width: 520px;
    height: 520px;

    border-color: rgba(125,92,255,.08);
}


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

.md-work-floating-card {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 12px 15px;

    background: rgba(9,24,45,.92);

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

    border-radius: 11px;

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

    backdrop-filter: blur(10px);
}


.md-work-floating-card > i {
    width: 34px;
    height: 34px;

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

    color: #00d7e8;

    background: rgba(0,215,232,.08);

    border-radius: 8px;

    font-size: 12px;
}


.md-work-floating-card strong {
    display: block;

    color: #ffffff;

    font-size: 10px;
}


.md-work-floating-card span {
    display: block;

    margin-top: 2px;

    color: #72869d;

    font-size: 8px;
}


.md-work-floating-code {
    left: -10px;
    bottom: 75px;
}


.md-work-floating-design {
    right: -5px;
    top: 75px;
}


/* =====================================================
   BOTTOM CAPABILITIES
   ===================================================== */

.md-work-hero-bottom {
    position: relative;
    z-index: 3;

    width: min(1280px, 100%);

    min-height: 72px;

    margin: 35px auto 0;

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

    gap: 25px;

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


.md-work-hero-bottom span {
    color: #64778f;

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

    letter-spacing: 1px;
}


.md-work-hero-bottom i {
    width: 3px;
    height: 3px;

    background: #34485f;

    border-radius: 50%;
}


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

@media (max-width: 1000px) {

    .md-work-hero-inner {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .md-work-hero-content {
        margin: 0 auto;

        text-align: center;
    }

    .md-work-hero-content p {
        margin-inline: auto;
    }

    .md-work-hero-actions {
        justify-content: center;
    }

    .md-work-hero-visual {
        width: min(650px, 100%);

        margin: 0 auto;
    }

}


@media (max-width: 650px) {

    .md-work-hero {
        padding:
            75px
            18px
            0;
    }

    .md-work-hero-inner {
        min-height: auto;
    }

    .md-work-hero-content h1 {
        font-size: 44px;

        letter-spacing: -1.5px;
    }

    .md-work-hero-content p {
        font-size: 15px;
    }

    .md-work-hero-visual {
        min-height: 370px;
    }

    .md-work-browser {
        width: 95%;

        transform: none;
    }

    .md-work-orbit-one {
        width: 310px;
        height: 310px;
    }

    .md-work-orbit-two {
        width: 370px;
        height: 370px;
    }

    .md-work-floating-code {
        left: 0;
        bottom: 25px;
    }

    .md-work-floating-design {
        right: 0;
        top: 25px;
    }

    .md-work-hero-bottom {
        flex-wrap: wrap;

        gap: 10px 16px;

        padding: 22px 5px;
    }

}

/* =====================================================
   MARIO PORTFOLIO
   FEATURED WORK
   ===================================================== */

.md-featured-work {
    position: relative;
    padding: 120px 0 140px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(22, 105, 255, 0.08),
            transparent 32%
        ),
        #071322;
    overflow: hidden;
}


/* Subtle grid background */

.md-featured-work::before {
    content: "";
    position: absolute;
    inset: 0;

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

    background-size: 70px 70px;

    pointer-events: none;
}


.md-work-container {
    position: relative;
    z-index: 2;

    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


/* =====================================================
   SECTION INTRO
   ===================================================== */

.md-work-intro {
    max-width: 850px;
    margin-bottom: 90px;
}


.md-section-label {
    display: block;

    margin-bottom: 22px;

    color: #169cff;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4px;

    text-transform: uppercase;
}


.md-work-intro h2 {
    margin: 0 0 28px;

    color: #ffffff;

    font-size: clamp(48px, 5vw, 76px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -2.5px;
}


.md-work-intro h2 span {
    background: linear-gradient(
        90deg,
        #05d9e8,
        #2385ff
    );

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

    color: transparent;
}


.md-work-intro p {
    max-width: 720px;

    margin: 0;

    color: #9eafc3;

    font-size: 18px;
    line-height: 1.8;
}


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

.md-project {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(400px, .85fr);

    gap: 90px;
    align-items: center;

    padding: 70px;

    background: rgba(10, 28, 49, .72);

    border: 1px solid rgba(114, 160, 210, .15);

    border-radius: 30px;

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

    backdrop-filter: blur(12px);
}


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

.md-project-visual {
    position: relative;
}


.md-project-number {
    position: absolute;

    top: -55px;
    left: -35px;

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

    font-size: 160px;
    font-weight: 900;
    line-height: 1;

    pointer-events: none;
}


/* Browser Mockup */

.md-browser {
    position: relative;

    overflow: hidden;

    background: #0b192b;

    border: 1px solid rgba(130,170,215,.2);

    border-radius: 18px;

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

    transform: perspective(1200px) rotateY(2deg);

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


.md-project:hover .md-browser {
    transform:
        perspective(1200px)
        rotateY(0deg)
        translateY(-8px);

    box-shadow:
        0 40px 80px rgba(0,0,0,.42);
}


.md-browser-bar {
    position: relative;

    display: flex;
    align-items: center;

    height: 54px;

    padding: 0 18px;

    background: #0c1b2e;

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


.md-browser-dots {
    display: flex;
    gap: 7px;
}


.md-browser-dots span {
    width: 8px;
    height: 8px;

    background: #60748d;

    border-radius: 50%;
}


.md-browser-url {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    color: #5f7289;

    font-size: 11px;
}


.md-browser-image {
    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #091625;
}


.md-browser-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: top;

    transition: transform 1s ease;
}


.md-project:hover .md-browser-image img {
    transform: scale(1.025);
}


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

.md-project-content {
    position: relative;
}


.md-project-category {
    margin-bottom: 20px;

    color: #13a9ff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}


.md-project-content h3 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: 46px;
    font-weight: 800;
    line-height: 1.1;

    letter-spacing: -1.5px;
}


.md-project-content h4 {
    margin: 0 0 25px;

    color: #dbe7f4;

    font-size: 21px;
    font-weight: 600;
    line-height: 1.5;
}


.md-project-content > p {
    margin: 0 0 32px;

    color: #96a9bf;

    font-size: 16px;
    line-height: 1.85;
}


/* My Role */

.md-project-role {
    padding: 22px 0;

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


.md-project-role span {
    display: block;

    margin-bottom: 8px;

    color: #657e99;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}


.md-project-role p {
    margin: 0;

    color: #c5d2df;

    font-size: 14px;
    line-height: 1.7;
}


/* Tags */

.md-project-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin: 25px 0 30px;
}


.md-project-tags span {
    padding: 8px 13px;

    color: #90a8c1;

    background: rgba(22, 80, 140, .16);

    border: 1px solid rgba(63, 132, 205, .18);

    border-radius: 100px;

    font-size: 11px;
    font-weight: 600;
}


/* Project CTA */

.md-project-link {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    color: #ffffff;

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

    text-decoration: none;

    transition: color .25s ease;
}


.md-project-link span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: #061421;

    background: linear-gradient(
        135deg,
        #05d9e8,
        #2385ff
    );

    border-radius: 50%;

    font-size: 18px;

    transition: transform .25s ease;
}


.md-project-link:hover {
    color: #13cfe8;
}


.md-project-link:hover span {
    transform: translateX(5px);
}


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

@media (max-width: 1100px) {

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

        gap: 55px;

        padding: 50px;
    }

    .md-project-content {
        max-width: 750px;
    }

}


@media (max-width: 700px) {

    .md-featured-work {
        padding: 80px 0 90px;
    }

    .md-work-container {
        width: min(100% - 36px, 1420px);
    }

    .md-work-intro {
        margin-bottom: 55px;
    }

    .md-work-intro h2 {
        font-size: 43px;
        letter-spacing: -1.5px;
    }

    .md-work-intro p {
        font-size: 16px;
    }

    .md-project {
        gap: 40px;

        padding: 22px;

        border-radius: 20px;
    }

    .md-project-number {
        top: -30px;
        left: -5px;

        font-size: 100px;
    }

    .md-browser {
        border-radius: 12px;

        transform: none;
    }

    .md-project-content h3 {
        font-size: 35px;
    }

    .md-project-content h4 {
        font-size: 18px;
    }

}

/* =====================================================
   PROJECT IMPACT STRIP
   ===================================================== */

.md-impact-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin: 30px 0 32px;
}


.md-impact-item {
    padding: 18px;

    background: rgba(13, 55, 94, .34);

    border: 1px solid rgba(77, 144, 208, .14);

    border-radius: 14px;
}


.md-impact-item strong {
    display: block;

    margin-bottom: 6px;

    color: #13cbe8;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}


.md-impact-item span {
    display: block;

    color: #91a7bd;

    font-size: 11px;
    line-height: 1.5;
}


@media (max-width: 600px) {

    .md-impact-strip {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   CUSTOMER EXPERIENCE / OPERATIONS VISUAL
   ===================================================== */

.md-ops-visual {
    width: 100%;

    padding: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(16, 47, 78, .95),
            rgba(7, 24, 42, .98)
        );

    border: 1px solid rgba(89, 151, 214, .2);

    border-radius: 20px;

    box-shadow:
        0 30px 65px rgba(0,0,0,.32);
}


/* Header */

.md-ops-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding-bottom: 20px;

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


.md-ops-header span {
    color: #ffffff;

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


.md-ops-header small {
    color: #13cbe8;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* Dashboard */

.md-ops-dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

    padding: 28px 0;
}


.md-ops-card {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    min-height: 125px;

    padding: 20px;

    background: rgba(8, 28, 49, .7);

    border: 1px solid rgba(68, 129, 190, .15);

    border-radius: 15px;

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


.md-ops-card:hover {
    transform: translateY(-4px);

    background: rgba(10, 38, 66, .9);

    border-color: rgba(24, 196, 232, .3);
}


.md-ops-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 37px;

    width: 37px;
    height: 37px;

    color: #071623;

    background: linear-gradient(
        135deg,
        #09d6e5,
        #2487ff
    );

    border-radius: 10px;

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


.md-ops-card strong {
    display: block;

    margin-bottom: 7px;

    color: #e5edf6;

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


.md-ops-card p {
    margin: 0;

    color: #849bb2;

    font-size: 11px;
    line-height: 1.55;
}


/* Footer */

.md-ops-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 20px;

    padding-top: 20px;

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


.md-ops-footer > div {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.md-ops-footer span {
    color: #5e7892;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
}


.md-ops-footer strong {
    color: #b7c6d5;

    font-size: 11px;
    font-weight: 600;
}


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

@media (max-width: 600px) {

    .md-ops-visual {
        padding: 18px;
    }

    .md-ops-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .md-ops-dashboard {
        grid-template-columns: 1fr;
    }

    .md-ops-card {
        min-height: auto;
    }

    .md-ops-footer {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   PORTFOLIO CAPABILITIES
   ===================================================== */

.md-capabilities {
    position: relative;
    padding: 135px 0 145px;

    background:
        radial-gradient(
            circle at 10% 25%,
            rgba(0, 213, 232, .06),
            transparent 27%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(37, 121, 255, .07),
            transparent 30%
        ),
        #09101c;

    overflow: hidden;
}


.md-capabilities::before {
    content: "";
    position: absolute;
    inset: 0;

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

    background-size: 75px 75px;

    pointer-events: none;
}


.md-capabilities-container {
    position: relative;
    z-index: 2;

    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


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

.md-capabilities-intro {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 90px;

    align-items: end;

    margin-bottom: 75px;
}


.md-capabilities-intro h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(46px, 5vw, 72px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -2.5px;
}


.md-capabilities-intro h2 span {
    background: linear-gradient(
        90deg,
        #06d6e5,
        #2387ff
    );

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

    color: transparent;
}


.md-capabilities-intro p {
    max-width: 580px;

    margin: 0;

    color: #91a5ba;

    font-size: 17px;
    line-height: 1.8;
}


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

.md-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


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

.md-capability-card {
    position: relative;

    min-height: 360px;

    padding: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 31, 52, .92),
            rgba(8, 24, 42, .92)
        );

    border: 1px solid rgba(91, 143, 199, .14);

    border-radius: 20px;

    overflow: hidden;

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


.md-capability-card::after {
    content: "";

    position: absolute;

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

    height: 3px;

    background: linear-gradient(
        90deg,
        #06d7e6,
        #2586ff
    );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .35s ease;
}


.md-capability-card:hover {
    transform: translateY(-8px);

    border-color: rgba(46, 174, 233, .3);

    box-shadow:
        0 25px 50px rgba(0,0,0,.24);
}


.md-capability-card:hover::after {
    transform: scaleX(1);
}


/* Top */

.md-capability-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 65px;
}


.md-capability-number {
    color: #506b87;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}


.md-capability-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    color: #14cfe8;

    background: rgba(16, 123, 177, .12);

    border: 1px solid rgba(38, 175, 223, .18);

    border-radius: 12px;

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


/* Content */

.md-capability-card h3 {
    margin: 0 0 17px;

    color: #f5f8fc;

    font-size: 22px;
    font-weight: 750;
    line-height: 1.3;
}


.md-capability-card p {
    margin: 0 0 28px;

    color: #859bb1;

    font-size: 14px;
    line-height: 1.75;
}


/* Tags */

.md-capability-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.md-capability-tags span {
    padding: 7px 10px;

    color: #7590aa;

    background: rgba(22, 72, 119, .16);

    border: 1px solid rgba(66, 124, 180, .13);

    border-radius: 50px;

    font-size: 9px;
    font-weight: 650;
}


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

@media (max-width: 1100px) {

    .md-capabilities-intro {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .md-capabilities-intro p {
        max-width: 720px;
    }

    .md-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .md-capabilities {
        padding: 85px 0 95px;
    }

    .md-capabilities-container {
        width: min(100% - 36px, 1420px);
    }

    .md-capabilities-intro {
        margin-bottom: 48px;
    }

    .md-capabilities-intro h2 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .md-capabilities-intro p {
        font-size: 15px;
    }

    .md-capabilities-grid {
        grid-template-columns: 1fr;
    }

    .md-capability-card {
        min-height: auto;
        padding: 28px;
    }

    .md-capability-top {
        margin-bottom: 40px;
    }

}

/* =====================================================
   EXPERIENCE & IMPACT
   ===================================================== */

.md-impact {
    position: relative;

    padding: 135px 0;

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(17, 116, 255, .08),
            transparent 30%
        ),
        #071322;

    overflow: hidden;
}


/* Decorative background glow */

.md-impact::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -300px;
    top: -250px;

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

    border-radius: 50%;

    box-shadow:
        0 0 0 100px rgba(23, 153, 255, .025),
        0 0 0 200px rgba(23, 153, 255, .015);

    pointer-events: none;
}


.md-impact-container {
    position: relative;
    z-index: 2;

    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


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

.md-impact-heading {
    display: grid;
    grid-template-columns: 1.1fr .7fr;

    gap: 100px;
    align-items: end;

    margin-bottom: 85px;
}


.md-impact-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(48px, 5vw, 74px);
    font-weight: 800;
    line-height: 1.03;

    letter-spacing: -2.7px;
}


.md-impact-heading h2 span {
    background: linear-gradient(
        90deg,
        #05d8e8,
        #2584ff
    );

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

    color: transparent;
}


.md-impact-heading > p {
    max-width: 540px;

    margin: 0;

    color: #8fa4ba;

    font-size: 17px;
    line-height: 1.85;
}


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

.md-impact-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    border-top: 1px solid rgba(255,255,255,.09);
    border-left: 1px solid rgba(255,255,255,.09);
}


/* Individual stat */

.md-stat {
    display: grid;
    grid-template-columns: 180px 1fr;

    gap: 35px;
    align-items: center;

    min-height: 250px;

    padding: 45px;

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

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


.md-stat:hover {
    background: rgba(15, 48, 80, .28);
}


/* Number */

.md-stat-number {
    display: block;

    color: #ffffff;

    font-size: clamp(62px, 6vw, 92px);
    font-weight: 800;
    line-height: 1;

    letter-spacing: -5px;
}


.md-stat-number > span {
    color: #10cce8;

    font-size: .55em;
    letter-spacing: 0;
}


/* Stat copy */

.md-stat-content {
    padding-left: 30px;

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


.md-stat-content h3 {
    margin: 0 0 12px;

    color: #f0f5fb;

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


.md-stat-content p {
    max-width: 360px;

    margin: 0;

    color: #7f96ad;

    font-size: 13px;
    line-height: 1.7;
}


/* =====================================================
   PHILOSOPHY
   ===================================================== */

.md-impact-philosophy {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 35px;

    max-width: 1050px;

    margin: 95px auto 0;

    padding: 50px 60px;

    background:
        linear-gradient(
            135deg,
            rgba(12, 42, 70, .62),
            rgba(9, 27, 47, .75)
        );

    border: 1px solid rgba(79, 142, 202, .14);

    border-radius: 22px;
}


.md-philosophy-mark {
    flex: 0 0 auto;

    margin-top: -15px;

    color: #11cee8;

    font-family: Georgia, serif;
    font-size: 80px;
    line-height: 1;
}


.md-impact-philosophy p {
    margin: 0;

    color: #c8d5e2;

    font-size: clamp(21px, 2vw, 29px);
    font-weight: 400;
    line-height: 1.55;

    letter-spacing: -.5px;
}


.md-impact-philosophy strong {
    color: #ffffff;

    font-weight: 700;
}


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

@media (max-width: 1100px) {

    .md-impact-heading {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .md-impact-heading > p {
        max-width: 700px;
    }

    .md-stat {
        grid-template-columns: 140px 1fr;

        padding: 35px;
    }

}


@media (max-width: 850px) {

    .md-impact-stats {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .md-impact {
        padding: 85px 0 95px;
    }

    .md-impact-container {
        width: min(100% - 36px, 1420px);
    }

    .md-impact-heading {
        margin-bottom: 55px;
    }

    .md-impact-heading h2 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }

    .md-impact-heading > p {
        font-size: 15px;
    }

    .md-stat {
        grid-template-columns: 1fr;

        gap: 20px;

        min-height: auto;

        padding: 32px 25px;
    }

    .md-stat-number {
        font-size: 65px;
    }

    .md-stat-content {
        padding: 20px 0 0;

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

    .md-impact-philosophy {
        gap: 15px;

        margin-top: 60px;

        padding: 35px 25px;
    }

    .md-philosophy-mark {
        font-size: 55px;
    }

    .md-impact-philosophy p {
        font-size: 19px;
    }

}

/* =====================================================
   HOW I APPROACH PROJECTS
   ===================================================== */

.md-process {
    position: relative;

    padding: 125px 0 135px;

    background:
        linear-gradient(
            180deg,
            #09101c 0%,
            #081522 100%
        );

    overflow: hidden;
}


.md-process::before {
    content: "";

    position: absolute;

    width: 800px;
    height: 800px;

    left: -450px;
    top: -300px;

    background: radial-gradient(
        circle,
        rgba(0, 213, 232, .07),
        transparent 65%
    );

    pointer-events: none;
}


.md-process-container {
    position: relative;
    z-index: 2;

    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


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

.md-process-heading {
    display: grid;
    grid-template-columns: 1fr .75fr;

    gap: 100px;
    align-items: end;

    margin-bottom: 80px;
}


.md-process-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(46px, 5vw, 70px);
    font-weight: 800;
    line-height: 1.04;

    letter-spacing: -2.5px;
}


.md-process-heading h2 span {
    background: linear-gradient(
        90deg,
        #06d6e5,
        #2584ff
    );

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

    color: transparent;
}


.md-process-heading > p {
    max-width: 540px;

    margin: 0;

    color: #8da2b7;

    font-size: 16px;
    line-height: 1.8;
}


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

.md-process-track {
    position: relative;

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

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


/* Horizontal connection line */

.md-process-track::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 0;

    width: 20%;
    height: 2px;

    background: linear-gradient(
        90deg,
        #08d8e5,
        #2586ff
    );
}


/* =====================================================
   STEP
   ===================================================== */

.md-process-step {
    position: relative;

    min-height: 330px;

    padding: 42px 28px 35px;

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

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


.md-process-step:first-child {
    border-left: 1px solid rgba(255,255,255,.07);
}


.md-process-step:hover {
    background: rgba(16, 47, 78, .26);

    transform: translateY(-5px);
}


/* Node */

.md-process-step::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 28px;

    width: 12px;
    height: 12px;

    background: #0a1724;

    border: 2px solid #1bcce7;

    border-radius: 50%;

    box-shadow:
        0 0 0 5px rgba(27, 204, 231, .08);
}


/* Number */

.md-process-number {
    margin-bottom: 55px;

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

    font-size: 66px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -3px;
}


/* Copy */

.md-process-copy > span {
    display: block;

    margin-bottom: 10px;

    color: #13cde8;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}


.md-process-copy h3 {
    margin: 0 0 15px;

    color: #f1f5fa;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}


.md-process-copy p {
    margin: 0;

    color: #8096ac;

    font-size: 13px;
    line-height: 1.75;
}


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

@media (max-width: 1100px) {

    .md-process-heading {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .md-process-heading > p {
        max-width: 720px;
    }

    .md-process-track {
        grid-template-columns: repeat(2, 1fr);

        border-top: 0;
    }

    .md-process-track::before {
        display: none;
    }

    .md-process-step {
        border-top: 1px solid rgba(255,255,255,.08);
        border-left: 1px solid rgba(255,255,255,.07);
    }

    .md-process-step::before {
        display: none;
    }

}


@media (max-width: 700px) {

    .md-process {
        padding: 85px 0 95px;
    }

    .md-process-container {
        width: min(100% - 36px, 1420px);
    }

    .md-process-heading {
        margin-bottom: 55px;
    }

    .md-process-heading h2 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .md-process-heading > p {
        font-size: 15px;
    }

    .md-process-track {
        grid-template-columns: 1fr;
    }

    .md-process-step {
        min-height: auto;
        padding: 32px 25px;
    }

    .md-process-number {
        margin-bottom: 30px;

        font-size: 54px;
    }

}

/* =====================================================
   MORE SELECTED WORK
   ===================================================== */

.md-more-work {
    position: relative;

    padding: 130px 0 145px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(31, 124, 255, .07),
            transparent 30%
        ),
        #071322;

    overflow: hidden;
}


.md-more-work-container {
    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


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

.md-more-work-heading {
    display: grid;
    grid-template-columns: 1fr .75fr;

    gap: 100px;
    align-items: end;

    margin-bottom: 70px;
}


.md-more-work-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(46px, 5vw, 70px);
    font-weight: 800;
    line-height: 1.04;

    letter-spacing: -2.5px;
}


.md-more-work-heading h2 span {
    background: linear-gradient(
        90deg,
        #06d8e5,
        #2585ff
    );

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

    color: transparent;
}


.md-more-work-heading > p {
    max-width: 540px;

    margin: 0;

    color: #8ba1b7;

    font-size: 16px;
    line-height: 1.8;
}


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

.md-more-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}


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

.md-work-card {
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(13, 32, 53, .95),
            rgba(8, 24, 42, .96)
        );

    border: 1px solid rgba(83, 140, 195, .14);

    border-radius: 20px;

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


.md-work-card:hover {
    transform: translateY(-8px);

    border-color: rgba(29, 184, 229, .28);

    box-shadow:
        0 28px 55px rgba(0,0,0,.25);
}


/* Image */

.md-work-card-image {
    position: relative;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #0c1b2d;
}


.md-work-card-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        transparent 55%,
        rgba(7,19,34,.55)
    );

    pointer-events: none;
}


.md-work-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .55s ease;
}


.md-work-card:hover .md-work-card-image img {
    transform: scale(1.045);
}


/* Content */

.md-work-card-content {
    padding: 28px 28px 30px;
}


.md-work-type {
    display: block;

    margin-bottom: 13px;

    color: #10cde7;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}


.md-work-card-content h3 {
    margin: 0 0 14px;

    color: #f2f6fb;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}


.md-work-card-content p {
    margin: 0 0 24px;

    color: #8197ad;

    font-size: 13px;
    line-height: 1.72;
}


/* Tags */

.md-work-card-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.md-work-card-tags span {
    padding: 7px 10px;

    color: #7590aa;

    background: rgba(20, 72, 117, .17);

    border: 1px solid rgba(60, 120, 176, .14);

    border-radius: 50px;

    font-size: 9px;
    font-weight: 650;
}


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

@media (max-width: 1100px) {

    .md-more-work-heading {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .md-more-work-heading > p {
        max-width: 720px;
    }

    .md-more-work-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .md-more-work {
        padding: 85px 0 95px;
    }

    .md-more-work-container {
        width: min(100% - 36px, 1420px);
    }

    .md-more-work-heading {
        margin-bottom: 50px;
    }

    .md-more-work-heading h2 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .md-more-work-heading > p {
        font-size: 15px;
    }

    .md-more-work-grid {
        grid-template-columns: 1fr;
    }

}

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

.md-portfolio-cta {
    position: relative;

    padding: 150px 0 135px;

    background:
        linear-gradient(
            180deg,
            #081522 0%,
            #06111e 100%
        );

    overflow: hidden;
}


/* =====================================================
   BACKGROUND DECORATION
   ===================================================== */

.md-portfolio-cta::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 75px 75px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            black 75%,
            transparent
        );

    pointer-events: none;
}


/* Glow */

.md-cta-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(20px);

    pointer-events: none;
}


.md-cta-glow-one {
    width: 650px;
    height: 650px;

    top: -380px;
    left: 50%;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(7, 210, 230, .13),
            rgba(31, 113, 255, .05) 45%,
            transparent 70%
        );
}


.md-cta-glow-two {
    width: 500px;
    height: 500px;

    right: -300px;
    bottom: -300px;

    background:
        radial-gradient(
            circle,
            rgba(35, 119, 255, .08),
            transparent 68%
        );
}


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

.md-cta-container {
    position: relative;
    z-index: 2;

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

    margin: 0 auto;

    text-align: center;
}


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

.md-cta-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 30px;

    color: #8ca3b9;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.4px;
}


.md-cta-dot {
    position: relative;

    width: 8px;
    height: 8px;

    background: #17d4c8;

    border-radius: 50%;

    box-shadow:
        0 0 0 5px rgba(23,212,200,.08),
        0 0 18px rgba(23,212,200,.45);
}


/* =====================================================
   HEADLINE
   ===================================================== */

.md-cta-container h2 {
    margin: 0 auto 30px;

    color: #ffffff;

    font-size: clamp(55px, 6vw, 88px);
    font-weight: 800;
    line-height: 1.02;

    letter-spacing: -3.5px;
}


.md-cta-container h2 span {
    background:
        linear-gradient(
            90deg,
            #08d8e4 10%,
            #2784ff 90%
        );

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

    color: transparent;
}


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

.md-cta-description {
    max-width: 760px;

    margin: 0 auto 42px;

    color: #91a5ba;

    font-size: 17px;
    line-height: 1.85;
}


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

.md-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;
}


/* Primary */

.md-cta-primary {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    min-height: 58px;

    padding: 8px 9px 8px 26px;

    color: #061421;

    background:
        linear-gradient(
            135deg,
            #09d7df,
            #2490ff
        );

    border-radius: 8px;

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

    text-decoration: none;

    box-shadow:
        0 12px 35px rgba(20, 155, 232, .16);

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


.md-cta-primary:hover {
    color: #061421;

    transform: translateY(-3px);

    box-shadow:
        0 18px 45px rgba(20, 155, 232, .25);
}


.md-cta-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffffff;

    background: rgba(5, 30, 51, .55);

    border-radius: 6px;

    font-size: 18px;

    transition: transform .25s ease;
}


.md-cta-primary:hover .md-cta-arrow {
    transform: translateX(3px);
}


/* Secondary */

.md-cta-secondary {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    min-height: 58px;

    padding: 0 25px;

    color: #d1dce7;

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

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

    border-radius: 8px;

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

    text-decoration: none;

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


.md-cta-secondary:hover {
    color: #ffffff;

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

    border-color: rgba(26, 198, 231, .3);

    transform: translateY(-3px);
}


/* =====================================================
   TRUST LINE
   ===================================================== */

.md-cta-trust {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 35px;

    margin-top: 65px;
    padding-top: 32px;

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


.md-cta-trust-item {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #71899f;

    font-size: 11px;
    font-weight: 600;
}


.md-trust-check {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 19px;
    height: 19px;

    color: #11d0c7;

    background: rgba(17,208,199,.08);

    border: 1px solid rgba(17,208,199,.15);

    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}


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

@media (max-width: 700px) {

    .md-portfolio-cta {
        padding: 100px 0 90px;
    }

    .md-cta-container {
        width: min(100% - 36px, 1100px);
    }

    .md-cta-container h2 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .md-cta-description {
        font-size: 15px;
    }

    .md-cta-actions {
        flex-direction: column;

        width: 100%;
    }

    .md-cta-primary,
    .md-cta-secondary {
        justify-content: center;

        width: 100%;
    }

    .md-cta-primary {
        padding-left: 20px;
    }

    .md-cta-primary .md-cta-arrow {
        margin-left: auto;
    }

    .md-cta-trust {
        align-items: flex-start;
        flex-direction: column;

        gap: 16px;

        margin-top: 50px;
    }

}

/* =====================================================
   PREMIUM SCROLL TO TOP BUTTON
   ===================================================== */

.back-to-top,
#back-to-top,
.scroll-to-top {
    position: fixed;

    right: 28px;
    bottom: 28px;

    width: 58px;
    height: 58px;

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

    padding: 0;

    border: 2px solid transparent;
    border-radius: 50%;

    background:
        linear-gradient(#0b1830, #0b1830) padding-box,
        linear-gradient(
            135deg,
            #00d7e8,
            #1687ff,
            #7d5cff
        ) border-box;

    color: #52eaff;

    box-shadow:
        0 0 0 5px rgba(0, 215, 232, .06),
        0 10px 28px rgba(0, 0, 0, .35),
        0 0 24px rgba(0, 215, 232, .22);

    cursor: pointer;

    z-index: 9998;

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


/* Arrow */

.back-to-top::before,
#back-to-top::before,
.scroll-to-top::before {
    content: "";

    width: 14px;
    height: 14px;

    border-top: 4px solid #5eeaff;
    border-left: 4px solid #5eeaff;

    transform:
        rotate(45deg)
        translate(3px, 3px);

    border-radius: 2px;

    filter:
        drop-shadow(0 0 5px rgba(62, 229, 255, .55));
}


/* Hide existing icon if present */

.back-to-top i,
.back-to-top svg,
#back-to-top i,
#back-to-top svg,
.scroll-to-top i,
.scroll-to-top svg {
    display: none !important;
}


/* Hover */

.back-to-top:hover,
#back-to-top:hover,
.scroll-to-top:hover {
    transform: translateY(-5px);

    background:
        linear-gradient(#0d2038, #0d2038) padding-box,
        linear-gradient(
            135deg,
            #00f0ff,
            #1687ff,
            #a05cff
        ) border-box;

    box-shadow:
        0 0 0 7px rgba(0, 215, 232, .07),
        0 14px 35px rgba(0, 0, 0, .4),
        0 0 32px rgba(0, 215, 232, .32);
}


/* Click */

.back-to-top:active,
#back-to-top:active,
.scroll-to-top:active {
    transform: translateY(-1px) scale(.96);
}


/* Mobile */

@media (max-width: 700px) {

    .back-to-top,
    #back-to-top,
    .scroll-to-top {
        right: 18px;
        bottom: 18px;

        width: 50px;
        height: 50px;
    }

}

/* =====================================================
   PREMIUM BACK TO TOP - FINAL
   ===================================================== */

#back-top.back-to-top-link {
    position: fixed !important;

    right: 28px !important;
    bottom: 28px !important;

    width: 58px !important;
    height: 58px !important;

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

    padding: 0 !important;
    margin: 0 !important;

    border: 2px solid transparent !important;
    border-radius: 50% !important;

    background:
        linear-gradient(#0b1830, #0b1830) padding-box,
        linear-gradient(
            135deg,
            #00d7e8,
            #1687ff,
            #7d5cff
        ) border-box !important;

    color: #5deaff !important;

    box-shadow:
        0 0 0 5px rgba(0, 215, 232, .06),
        0 10px 28px rgba(0, 0, 0, .35),
        0 0 24px rgba(0, 215, 232, .22) !important;

    text-decoration: none !important;

    overflow: visible !important;

    z-index: 99999 !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}


/* Hide Joomla's original arrow */

#back-top .icon-arrow-up {
    display: none !important;
}


/* Custom premium arrow */

#back-top::before {
    content: "" !important;

    display: block !important;

    width: 15px;
    height: 15px;

    margin-top: 7px;

    border-top: 4px solid #60ecff;
    border-left: 4px solid #60ecff;

    border-radius: 2px 0 0 0;

    transform: rotate(45deg);

    filter:
        drop-shadow(0 0 5px rgba(65, 230, 255, .7));
}


/* Hover */

#back-top.back-to-top-link:hover {
    transform: translateY(-5px);

    background:
        linear-gradient(#0e223a, #0e223a) padding-box,
        linear-gradient(
            135deg,
            #00f0ff,
            #1687ff,
            #a05cff
        ) border-box !important;

    box-shadow:
        0 0 0 7px rgba(0, 215, 232, .07),
        0 15px 35px rgba(0, 0, 0, .42),
        0 0 34px rgba(0, 215, 232, .32) !important;
}


/* Press */

#back-top.back-to-top-link:active {
    transform: translateY(-1px) scale(.95);
}


/* Mobile */

@media (max-width: 700px) {

    #back-top.back-to-top-link {
        right: 18px !important;
        bottom: 18px !important;

        width: 50px !important;
        height: 50px !important;
    }

    #back-top::before {
        width: 13px;
        height: 13px;

        border-width: 3px 0 0 3px;
    }

}

/* =====================================================
   WORK HISTORY
   ===================================================== */

.md-work-history {
    position: relative;

    padding: 130px 0 150px;

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(25, 116, 255, .09),
            transparent 28%
        ),
        #071322;

    overflow: hidden;
}


.md-work-history::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 75px 75px;

    pointer-events: none;
}


.md-work-history-container {
    position: relative;
    z-index: 2;

    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


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

.md-work-history-intro {
    max-width: 1000px;

    margin-bottom: 100px;
}


.md-work-history-intro h1 {
    margin: 0 0 30px;

    color: #ffffff;

    font-size: clamp(52px, 6vw, 82px);
    font-weight: 800;
    line-height: 1.02;

    letter-spacing: -3px;
}


.md-work-history-intro h1 span {
    background: linear-gradient(
        90deg,
        #06d8e5,
        #2386ff
    );

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

    color: transparent;
}


.md-work-history-intro p {
    max-width: 770px;

    margin: 0;

    color: #8fa4ba;

    font-size: 17px;
    line-height: 1.85;
}


/* =====================================================
   TIMELINE
   ===================================================== */

.md-career-timeline {
    position: relative;
}


/* vertical line */

.md-career-timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 177px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            rgba(0,215,232,.8),
            rgba(35,134,255,.25),
            rgba(125,92,255,.1)
        );
}


/* =====================================================
   CAREER ITEM
   ===================================================== */

.md-career-item {
    display: grid;

    grid-template-columns:
        135px
        85px
        minmax(0, 1fr);

    align-items: start;

    margin-bottom: 45px;
}


/* =====================================================
   DATE
   ===================================================== */

.md-career-date {
    padding-top: 33px;

    text-align: right;
}


.md-career-date span,
.md-career-date strong {
    display: block;
}


.md-career-date span {
    color: #647d96;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


.md-career-date strong {
    margin-top: 4px;

    color: #dce6f0;

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


/* =====================================================
   TIMELINE MARKER
   ===================================================== */

.md-career-marker {
    position: relative;

    display: flex;
    justify-content: center;

    padding-top: 38px;
}


.md-career-marker span {
    position: relative;

    width: 13px;
    height: 13px;

    background: #081626;

    border: 2px solid #12d0e5;

    border-radius: 50%;

    box-shadow:
        0 0 0 7px rgba(18,208,229,.07),
        0 0 18px rgba(18,208,229,.2);
}


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

.md-career-content {
    padding: 38px 42px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 31, 52, .93),
            rgba(8, 24, 42, .96)
        );

    border: 1px solid rgba(83, 140, 195, .14);

    border-radius: 22px;

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


.md-career-content:hover {
    transform: translateY(-5px);

    border-color: rgba(20, 191, 229, .26);

    box-shadow:
        0 26px 55px rgba(0,0,0,.24);
}


/* =====================================================
   CAREER TOP
   ===================================================== */

.md-career-top {
    display: grid;

    grid-template-columns: 1fr auto;

    gap: 40px;

    align-items: start;
}


.md-career-label {
    display: block;

    margin-bottom: 12px;

    color: #12cde7;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}


.md-career-top h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(25px, 2.3vw, 34px);
    font-weight: 750;
    line-height: 1.25;

    letter-spacing: -1px;
}


/* =====================================================
   COMPANY
   ===================================================== */

.md-company {
    min-width: 190px;

    padding-left: 25px;

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


.md-company strong {
    display: block;

    margin-bottom: 5px;

    color: #d8e2ed;

    font-size: 13px;
}


.md-company span {
    color: #718aa3;

    font-size: 11px;
}


/* =====================================================
   SUMMARY
   ===================================================== */

.md-career-summary {
    max-width: 850px;

    margin: 28px 0 32px;

    color: #8ba1b7;

    font-size: 14px;
    line-height: 1.8;
}


/* =====================================================
   ACHIEVEMENTS
   ===================================================== */

.md-career-achievements {
    display: grid;

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

    gap: 10px;

    margin-bottom: 30px;
}


.md-career-achievements > div {
    display: grid;

    grid-template-columns: 75px 1fr;

    gap: 15px;

    padding: 18px;

    background: rgba(12, 45, 75, .35);

    border: 1px solid rgba(72, 133, 190, .12);

    border-radius: 13px;
}


.md-career-achievements strong {
    color: #15d1e8;

    font-size: 21px;
    font-weight: 800;
}


.md-career-achievements span {
    color: #879db3;

    font-size: 11px;
    line-height: 1.55;
}


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

.md-career-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    padding-top: 25px;

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


.md-career-tags span {
    padding: 7px 11px;

    color: #7690aa;

    background: rgba(19, 69, 113, .17);

    border: 1px solid rgba(61, 119, 175, .14);

    border-radius: 50px;

    font-size: 9px;
    font-weight: 650;
}


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

@media (max-width: 1000px) {

    .md-career-timeline::before {
        left: 17px;
    }

    .md-career-item {
        grid-template-columns: 35px 1fr;

        gap: 15px;
    }

    .md-career-date {
        grid-column: 2;

        padding: 0 0 12px;

        text-align: left;
    }

    .md-career-date span,
    .md-career-date strong {
        display: inline;
    }

    .md-career-date span::after {
        content: " – ";
    }

    .md-career-marker {
        grid-column: 1;
        grid-row: 1 / span 2;

        padding-top: 8px;
    }

    .md-career-content {
        grid-column: 2;
    }

}


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

@media (max-width: 700px) {

    .md-work-history {
        padding: 85px 0 95px;
    }

    .md-work-history-container {
        width: min(100% - 36px, 1420px);
    }

    .md-work-history-intro {
        margin-bottom: 65px;
    }

    .md-work-history-intro h1 {
        font-size: 44px;

        letter-spacing: -1.7px;
    }

    .md-work-history-intro p {
        font-size: 15px;
    }

    .md-career-top {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .md-company {
        min-width: 0;

        padding: 0;

        border-left: 0;
    }

    .md-career-content {
        padding: 28px 22px;

        border-radius: 17px;
    }

    .md-career-achievements {
        grid-template-columns: 1fr;
    }

    .md-career-achievements > div {
        grid-template-columns: 65px 1fr;
    }

    .md-career-top h2 {
        font-size: 25px;
    }

}

/* =====================================================
   WORK HISTORY HERO
   ===================================================== */

.md-history-hero {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    padding: 110px 0;

    background:
        radial-gradient(
            circle at 82% 45%,
            rgba(25, 119, 255, .12),
            transparent 30%
        ),
        radial-gradient(
            circle at 70% 75%,
            rgba(0, 215, 232, .07),
            transparent 28%
        ),
        #06111f;

    overflow: hidden;
}


/* grid */

.md-history-hero::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 72px 72px;

    pointer-events: none;
}


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

.md-history-hero-container {
    position: relative;
    z-index: 2;

    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;

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

    gap: 100px;

    align-items: center;
}


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

.md-history-eyebrow {
    display: inline-block;

    margin-bottom: 24px;

    color: #11cfe6;

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

    letter-spacing: 3px;
}


.md-history-hero-copy h1 {
    margin: 0 0 30px;

    color: #ffffff;

    font-size: clamp(58px, 6.2vw, 92px);
    font-weight: 800;
    line-height: .98;

    letter-spacing: -4px;
}


.md-history-hero-copy h1 span {
    background: linear-gradient(
        90deg,
        #06d8e5,
        #2386ff
    );

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

    color: transparent;
}


.md-history-hero-copy > p {
    max-width: 720px;

    margin: 0;

    color: #8ea3b8;

    font-size: 17px;
    line-height: 1.85;
}


/* =====================================================
   META
   ===================================================== */

.md-history-hero-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 35px;

    margin-top: 42px;
    padding-top: 30px;

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


.md-history-hero-meta > div {
    min-width: 130px;
}


.md-history-hero-meta strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 26px;
    font-weight: 800;
}


.md-history-hero-meta span {
    color: #6f879f;

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

    letter-spacing: .6px;
}


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

.md-history-hero-visual {
    position: relative;

    min-height: 520px;

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


/* orbit */

.md-history-orbit {
    position: absolute;

    border-radius: 50%;

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


.md-history-orbit-one {
    width: 470px;
    height: 470px;
}


.md-history-orbit-two {
    width: 350px;
    height: 350px;

    border-color: rgba(0, 215, 232, .14);
}


/* =====================================================
   PATH
   ===================================================== */

.md-history-path {
    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;
}


.md-history-node {
    position: absolute;

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

    width: 58px;
    height: 58px;

    background: #0a1a2d;

    border: 1px solid rgba(47, 144, 220, .25);

    border-radius: 50%;

    box-shadow:
        0 8px 25px rgba(0,0,0,.28);

    color: #7f98b2;

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

    letter-spacing: .6px;
}


.node-1 {
    left: 0;
    top: 180px;
}


.node-2 {
    left: 75px;
    top: 45px;
}


.node-3 {
    right: 75px;
    top: 45px;
}


.node-4 {
    right: 0;
    top: 180px;
}


.node-5 {
    left: 50%;
    bottom: 0;

    transform: translateX(-50%);
}


.md-history-node.active {
    color: #07131f;

    background:
        linear-gradient(
            135deg,
            #08d8e5,
            #2787ff
        );

    border-color: transparent;

    box-shadow:
        0 0 0 7px rgba(0, 215, 232, .06),
        0 0 28px rgba(0, 215, 232, .22);
}


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

.md-history-center-card {
    position: relative;
    z-index: 2;

    width: 310px;

    padding: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(11, 34, 58, .96),
            rgba(7, 23, 40, .97)
        );

    border: 1px solid rgba(65, 139, 206, .18);

    border-radius: 22px;

    box-shadow:
        0 28px 65px rgba(0,0,0,.3);

    text-align: center;
}


.md-history-center-card > span {
    display: block;

    margin-bottom: 14px;

    color: #12cee7;

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

    letter-spacing: 2px;
}


.md-history-center-card h3 {
    margin: 0 0 15px;

    color: #ffffff;

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

    line-height: 1.35;
}


.md-history-center-card p {
    margin: 0;

    color: #7f95ab;

    font-size: 12px;
    line-height: 1.7;
}


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

@media (max-width: 1050px) {

    .md-history-hero {
        min-height: auto;
    }

    .md-history-hero-container {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .md-history-hero-copy {
        max-width: 850px;
    }

    .md-history-hero-visual {
        min-height: 500px;
    }

}


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

@media (max-width: 700px) {

    .md-history-hero {
        padding: 90px 0 80px;
    }

    .md-history-hero-container {
        width: min(100% - 36px, 1420px);

        gap: 45px;
    }

    .md-history-hero-copy h1 {
        font-size: 48px;

        letter-spacing: -2px;
    }

    .md-history-hero-copy > p {
        font-size: 15px;
    }

    .md-history-hero-meta {
        gap: 22px;
    }

    .md-history-hero-visual {
        min-height: 380px;

        transform: scale(.85);
    }

    .md-history-orbit-one {
        width: 370px;
        height: 370px;
    }

    .md-history-orbit-two {
        width: 280px;
        height: 280px;
    }

    .md-history-path {
        width: 340px;
        height: 340px;
    }

    .node-1 {
        left: 0;
        top: 140px;
    }

    .node-2 {
        left: 55px;
        top: 35px;
    }

    .node-3 {
        right: 55px;
        top: 35px;
    }

    .node-4 {
        right: 0;
        top: 140px;
    }

    .md-history-center-card {
        width: 260px;

        padding: 28px 22px;
    }

}

/* =====================================================
   CAREER TOOLKIT
   ===================================================== */

.md-career-toolkit {
    position: relative;

    padding: 130px 0 145px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 215, 232, .06),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 75%,
            rgba(38, 129, 255, .07),
            transparent 30%
        ),
        #09101c;

    overflow: hidden;
}


.md-career-toolkit::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 75px 75px;

    pointer-events: none;
}


.md-career-toolkit-container {
    position: relative;
    z-index: 2;

    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


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

.md-toolkit-heading {
    display: grid;
    grid-template-columns: 1fr .75fr;

    gap: 100px;
    align-items: end;

    margin-bottom: 75px;
}


.md-toolkit-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(46px, 5vw, 70px);
    font-weight: 800;
    line-height: 1.04;

    letter-spacing: -2.5px;
}


.md-toolkit-heading h2 span {
    background: linear-gradient(
        90deg,
        #06d8e5,
        #2585ff
    );

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

    color: transparent;
}


.md-toolkit-heading > p {
    max-width: 560px;

    margin: 0;

    color: #8ca1b7;

    font-size: 16px;
    line-height: 1.8;
}


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

.md-toolkit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


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

.md-toolkit-card {
    position: relative;

    min-height: 310px;

    padding: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 31, 52, .94),
            rgba(8, 24, 42, .96)
        );

    border: 1px solid rgba(80, 138, 195, .14);

    border-radius: 20px;

    overflow: hidden;

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


.md-toolkit-card::after {
    content: "";

    position: absolute;

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

    height: 3px;

    background: linear-gradient(
        90deg,
        #07d6e4,
        #2586ff,
        #765bff
    );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .35s ease;
}


.md-toolkit-card:hover {
    transform: translateY(-7px);

    border-color: rgba(31, 183, 228, .28);

    box-shadow:
        0 25px 55px rgba(0,0,0,.24);
}


.md-toolkit-card:hover::after {
    transform: scaleX(1);
}


/* Number */

.md-toolkit-number {
    display: block;

    margin-bottom: 55px;

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

    font-size: 48px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -2px;
}


/* Content */

.md-toolkit-card h3 {
    margin: 0 0 14px;

    color: #f4f7fb;

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


.md-toolkit-card p {
    margin: 0 0 24px;

    color: #849ab0;

    font-size: 13px;
    line-height: 1.72;
}


/* Tags */

.md-toolkit-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.md-toolkit-tags span {
    padding: 7px 10px;

    color: #7892ab;

    background: rgba(19, 68, 111, .18);

    border: 1px solid rgba(62, 120, 175, .14);

    border-radius: 50px;

    font-size: 9px;
    font-weight: 650;
}


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

@media (max-width: 1100px) {

    .md-toolkit-heading {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .md-toolkit-heading > p {
        max-width: 720px;
    }

    .md-toolkit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .md-career-toolkit {
        padding: 85px 0 95px;
    }

    .md-career-toolkit-container {
        width: min(100% - 36px, 1420px);
    }

    .md-toolkit-heading {
        margin-bottom: 50px;
    }

    .md-toolkit-heading h2 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }

    .md-toolkit-heading > p {
        font-size: 15px;
    }

    .md-toolkit-grid {
        grid-template-columns: 1fr;
    }

    .md-toolkit-card {
        min-height: auto;

        padding: 28px;
    }

    .md-toolkit-number {
        margin-bottom: 38px;

        font-size: 42px;
    }

}

/* =====================================================
   CAREER PRINCIPLES
   ===================================================== */

.md-career-principles {
    position: relative;

    padding: 130px 0 145px;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(34, 123, 255, .08),
            transparent 30%
        ),
        #071322;

    overflow: hidden;
}


.md-career-principles-container {
    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


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

.md-principles-heading {
    display: grid;
    grid-template-columns: 1fr .75fr;

    gap: 100px;
    align-items: end;

    margin-bottom: 75px;
}


.md-principles-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(46px, 5vw, 70px);
    font-weight: 800;
    line-height: 1.04;

    letter-spacing: -2.5px;
}


.md-principles-heading h2 span {
    background: linear-gradient(
        90deg,
        #06d8e5,
        #2585ff
    );

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

    color: transparent;
}


.md-principles-heading > p {
    max-width: 560px;

    margin: 0;

    color: #8ca1b7;

    font-size: 16px;
    line-height: 1.8;
}


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

.md-principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


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

.md-principle-card {
    position: relative;

    min-height: 290px;

    padding: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 31, 52, .94),
            rgba(8, 24, 42, .96)
        );

    border: 1px solid rgba(80, 138, 195, .14);

    border-radius: 20px;

    overflow: hidden;

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


.md-principle-card:hover {
    transform: translateY(-7px);

    border-color: rgba(28, 186, 229, .28);

    box-shadow:
        0 25px 55px rgba(0,0,0,.24);
}


.md-principle-number {
    display: block;

    margin-bottom: 55px;

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

    font-size: 46px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -2px;
}


.md-principle-card h3 {
    margin: 0 0 15px;

    color: #f3f7fb;

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


.md-principle-card p {
    margin: 0;

    color: #8499af;

    font-size: 13px;
    line-height: 1.75;
}


/* =====================================================
   FEATURED PHILOSOPHY CARD
   ===================================================== */

.md-principle-featured {
    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(0, 215, 232, .11),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(12, 42, 70, .97),
            rgba(8, 25, 43, .98)
        );

    border-color: rgba(31, 187, 225, .2);
}


.md-principle-label {
    display: block;

    margin-bottom: 25px;

    color: #10cfe7;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}


.md-principle-featured blockquote {
    margin: 0;

    color: #d9e5f0;

    font-size: 21px;
    font-weight: 500;
    line-height: 1.55;

    letter-spacing: -.4px;
}


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

@media (max-width: 1100px) {

    .md-principles-heading {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .md-principles-heading > p {
        max-width: 720px;
    }

    .md-principles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .md-career-principles {
        padding: 85px 0 95px;
    }

    .md-career-principles-container {
        width: min(100% - 36px, 1420px);
    }

    .md-principles-heading {
        margin-bottom: 50px;
    }

    .md-principles-heading h2 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .md-principles-heading > p {
        font-size: 15px;
    }

    .md-principles-grid {
        grid-template-columns: 1fr;
    }

    .md-principle-card {
        min-height: auto;

        padding: 28px;
    }

    .md-principle-number {
        margin-bottom: 38px;

        font-size: 40px;
    }

    .md-principle-featured blockquote {
        font-size: 19px;
    }

}

/* =====================================================
   WORK HISTORY - FINAL CTA
   ===================================================== */

.md-history-cta {
    position: relative;

    padding: 135px 0;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(26, 128, 255, .13),
            transparent 32%
        ),
        radial-gradient(
            circle at 25% 80%,
            rgba(0, 215, 232, .07),
            transparent 25%
        ),
        radial-gradient(
            circle at 82% 75%,
            rgba(125, 92, 255, .07),
            transparent 28%
        ),
        #050d19;

    overflow: hidden;
}


/* Subtle grid */

.md-history-cta::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 72px 72px;

    pointer-events: none;
}


/* Glow */

.md-history-cta::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 45%;

    width: 700px;
    height: 350px;

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

    background:
        radial-gradient(
            ellipse,
            rgba(20, 132, 255, .08),
            transparent 68%
        );

    pointer-events: none;
}


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

.md-history-cta-container {
    position: relative;
    z-index: 2;

    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


.md-history-cta-inner {
    max-width: 1050px;

    margin: 0 auto;

    text-align: center;
}


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

.md-history-cta-label {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

    color: #12d1e7;

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

    letter-spacing: 3px;
}


.md-history-cta-label::before,
.md-history-cta-label::after {
    content: "";

    width: 28px;
    height: 1px;

    background: rgba(18, 209, 231, .45);
}


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

.md-history-cta h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(52px, 6vw, 82px);
    font-weight: 800;
    line-height: 1.02;

    letter-spacing: -3px;
}


.md-history-cta h2 span {
    background:
        linear-gradient(
            90deg,
            #05d8e5,
            #2686ff,
            #8264ff
        );

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

    color: transparent;
}


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

.md-history-cta p {
    max-width: 790px;

    margin: 30px auto 0;

    color: #8da2b8;

    font-size: 16px;
    line-height: 1.85;
}


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

.md-history-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 13px;

    margin-top: 42px;
}


.md-history-btn-primary,
.md-history-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    min-height: 52px;

    padding: 0 25px;

    border-radius: 10px;

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

    text-decoration: none;

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


/* Primary */

.md-history-btn-primary {
    color: #04111c;

    background:
        linear-gradient(
            135deg,
            #09d9e5,
            #2587ff
        );

    border: 1px solid transparent;

    box-shadow:
        0 12px 28px rgba(12, 153, 232, .17);
}


.md-history-btn-primary:hover {
    color: #04111c;

    transform: translateY(-3px);

    box-shadow:
        0 17px 36px rgba(12, 153, 232, .27);
}


.md-history-btn-primary span {
    font-size: 17px;

    transition: transform .25s ease;
}


.md-history-btn-primary:hover span {
    transform: translateX(4px);
}


/* Secondary */

.md-history-btn-secondary {
    color: #dce7f2;

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

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


.md-history-btn-secondary:hover {
    color: #ffffff;

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

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

    transform: translateY(-3px);
}


/* =====================================================
   BOTTOM TRUST LINE
   ===================================================== */

.md-history-cta-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px 32px;

    margin-top: 48px;
    padding-top: 28px;

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


.md-history-cta-footer span {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #71879e;

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

    letter-spacing: .3px;
}


.md-history-cta-footer i {
    width: 5px;
    height: 5px;

    background: #13d0e5;

    border-radius: 50%;

    box-shadow:
        0 0 9px rgba(19, 208, 229, .65);
}


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

@media (max-width: 700px) {

    .md-history-cta {
        padding: 90px 0;
    }

    .md-history-cta-container {
        width: min(100% - 36px, 1420px);
    }

    .md-history-cta h2 {
        font-size: 44px;

        letter-spacing: -1.7px;
    }

    .md-history-cta p {
        font-size: 15px;
    }

    .md-history-cta-actions {
        flex-direction: column;

        width: 100%;
    }

    .md-history-btn-primary,
    .md-history-btn-secondary {
        width: 100%;
    }

    .md-history-cta-footer {
        flex-direction: column;

        align-items: center;

        gap: 12px;
    }

}

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

.md-contact-hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    padding: 110px 0;

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(24, 125, 255, .13),
            transparent 31%
        ),
        radial-gradient(
            circle at 72% 78%,
            rgba(0, 215, 232, .07),
            transparent 27%
        ),
        #06111f;

    overflow: hidden;
}


.md-contact-hero::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 72px 72px;

    pointer-events: none;
}


.md-contact-hero-container {
    position: relative;
    z-index: 2;

    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;

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

    gap: 100px;

    align-items: center;
}


.md-contact-eyebrow {
    display: inline-block;

    margin-bottom: 24px;

    color: #11cfe6;

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

    letter-spacing: 3px;
}


.md-contact-hero-copy h1 {
    margin: 0 0 30px;

    color: #ffffff;

    font-size: clamp(58px, 6vw, 90px);
    font-weight: 800;
    line-height: .99;

    letter-spacing: -4px;
}


.md-contact-hero-copy h1 span {
    background: linear-gradient(
        90deg,
        #06d8e5,
        #2487ff,
        #805eff
    );

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

    color: transparent;
}


.md-contact-hero-copy > p {
    max-width: 700px;

    margin: 0;

    color: #8ea3b8;

    font-size: 17px;
    line-height: 1.85;
}


.md-contact-hero-note {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 34px;

    color: #70869c;

    font-size: 11px;
    font-weight: 650;
}


.md-contact-hero-note span {
    width: 7px;
    height: 7px;

    background: #17d3e6;

    border-radius: 50%;

    box-shadow:
        0 0 12px rgba(23,211,230,.7);
}


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

.md-contact-hero-visual {
    position: relative;

    min-height: 470px;

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


.md-contact-orbit {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(54, 137, 225, .14);
}


.md-contact-orbit.orbit-one {
    width: 440px;
    height: 440px;
}


.md-contact-orbit.orbit-two {
    width: 330px;
    height: 330px;

    border-color: rgba(0,215,232,.13);
}


.md-contact-center-card {
    position: relative;
    z-index: 2;

    width: min(390px, 90%);

    padding: 38px;

    background:
        linear-gradient(
            145deg,
            rgba(11, 35, 59, .96),
            rgba(7, 23, 40, .98)
        );

    border: 1px solid rgba(68, 143, 210, .19);

    border-radius: 24px;

    box-shadow:
        0 30px 70px rgba(0,0,0,.32);
}


.md-contact-center-card > span {
    display: block;

    margin-bottom: 16px;

    color: #12cee7;

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

    letter-spacing: 2px;
}


.md-contact-center-card h3 {
    margin: 0 0 17px;

    color: #ffffff;

    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
}


.md-contact-center-card p {
    margin: 0;

    color: #8095aa;

    font-size: 13px;
    line-height: 1.75;
}


.md-contact-status {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 28px;
    padding-top: 20px;

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

    color: #90a5ba;

    font-size: 10px;
    font-weight: 650;
}


.md-contact-status i {
    width: 7px;
    height: 7px;

    background: #12d2e6;

    border-radius: 50%;

    box-shadow:
        0 0 12px rgba(18,210,230,.75);
}


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

@media (max-width: 1050px) {

    .md-contact-hero-container {
        grid-template-columns: 1fr;

        gap: 60px;
    }

}


@media (max-width: 700px) {

    .md-contact-hero {
        min-height: auto;

        padding: 90px 0 80px;
    }

    .md-contact-hero-container {
        width: min(100% - 36px, 1420px);
    }

    .md-contact-hero-copy h1 {
        font-size: 48px;

        letter-spacing: -2px;
    }

    .md-contact-hero-copy > p {
        font-size: 15px;
    }

    .md-contact-hero-visual {
        min-height: 390px;

        transform: scale(.9);
    }

}

/* =====================================================
   CONTACT SERVICES
   ===================================================== */

.md-contact-services {
    padding: 125px 0 135px;

    background: #081524;
}


.md-contact-services-container {
    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


.md-contact-services-heading {
    max-width: 850px;

    margin-bottom: 65px;
}


.md-contact-services-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(46px, 5vw, 70px);
    font-weight: 800;
    line-height: 1.05;

    letter-spacing: -2.5px;
}


.md-contact-services-heading h2 span {
    background:
        linear-gradient(
            90deg,
            #08d8e5,
            #2587ff
        );

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

    color: transparent;
}


.md-contact-service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 16px;
}


.md-contact-service-grid article {
    min-height: 260px;

    padding: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(12,31,52,.95),
            rgba(8,24,42,.96)
        );

    border: 1px solid rgba(77,138,195,.14);

    border-radius: 18px;
}


.md-contact-service-grid article > span {
    display: block;

    margin-bottom: 55px;

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

    font-size: 38px;
    font-weight: 800;
}


.md-contact-service-grid h3 {
    margin: 0 0 14px;

    color: #ffffff;

    font-size: 19px;
}


.md-contact-service-grid p {
    margin: 0;

    color: #8399af;

    font-size: 12px;
    line-height: 1.7;
}


@media (max-width: 1100px) {

    .md-contact-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .md-contact-services {
        padding: 85px 0 95px;
    }

    .md-contact-services-container {
        width: min(100% - 36px, 1420px);
    }

    .md-contact-services-heading h2 {
        font-size: 42px;
    }

    .md-contact-service-grid {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   CONTACT MAIN
   ===================================================== */

.md-contact-main {
    position: relative;

    padding: 130px 0 145px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(37, 126, 255, .07),
            transparent 30%
        ),
        #06111f;
}


.md-contact-main-container {
    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


.md-contact-main-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, .65fr);

    gap: 28px;

    align-items: start;
}


/* =====================================================
   FORM PANEL
   ===================================================== */

.md-contact-form-panel {
    padding: 48px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 31, 52, .96),
            rgba(7, 23, 40, .98)
        );

    border: 1px solid rgba(76, 139, 199, .15);

    border-radius: 24px;

    box-shadow:
        0 28px 65px rgba(0,0,0,.22);
}


.md-contact-form-panel h2 {
    margin: 8px 0 22px;

    color: #ffffff;

    font-size: clamp(46px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.03;

    letter-spacing: -2.5px;
}


.md-contact-form-panel h2 span {
    background:
        linear-gradient(
            90deg,
            #07d7e5,
            #2587ff
        );

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

    color: transparent;
}


.md-contact-form-intro {
    max-width: 720px;

    margin: 0 0 40px;

    color: #879db3;

    font-size: 14px;
    line-height: 1.8;
}


/* =====================================================
   FORM
   ===================================================== */

.md-contact-form {
    display: grid;

    gap: 20px;
}


.md-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 16px;
}


.md-form-group {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.md-form-group label {
    color: #c9d6e2;

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

    letter-spacing: .4px;
}


.md-form-group label span {
    margin-left: 5px;

    color: #687f96;

    font-size: 9px;
    font-weight: 600;
}


/* =====================================================
   LIGHT FORM FIELDS
   ===================================================== */

.md-form-group input,
.md-form-group select,
.md-form-group textarea {
    width: 100%;

    padding: 14px 15px;

    color: #0b1830;

    background: #eef3f7;

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

    border-radius: 10px;

    outline: none;

    font: inherit;
    font-size: 13px;

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

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

.md-form-group input,
.md-form-group select {
    min-height: 50px;
}

.md-form-group textarea {
    min-height: 170px;
    resize: vertical;
}


/* Placeholder */
.md-form-group input::placeholder,
.md-form-group textarea::placeholder {
    color: #72869a;
    opacity: 1;
}


/* Select text */
.md-form-group select {
    color: #26394d;
    cursor: pointer;
}


/* Focus */
.md-form-group input:focus,
.md-form-group select:focus,
.md-form-group textarea:focus {
    background: #ffffff;

    border-color: #11cfe6;

    box-shadow:
        0 0 0 3px rgba(17,207,230,.12),
        0 8px 22px rgba(0,0,0,.12);
}

/* =====================================================
   SUBMIT
   ===================================================== */

.md-contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    width: fit-content;

    min-height: 52px;

    margin-top: 8px;
    padding: 0 25px;

    color: #03111b;

    background:
        linear-gradient(
            135deg,
            #09d9e5,
            #2587ff
        );

    border: 0;
    border-radius: 10px;

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

    cursor: pointer;

    box-shadow:
        0 12px 28px rgba(12, 153, 232, .16);

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


.md-contact-submit:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 38px rgba(12, 153, 232, .26);
}


.md-contact-submit span {
    font-size: 17px;

    transition: transform .25s ease;
}


.md-contact-submit:hover span {
    transform: translateX(4px);
}


/* =====================================================
   RIGHT DETAILS
   ===================================================== */

.md-contact-details {
    display: grid;

    gap: 16px;
}


.md-contact-info-card {
    padding: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 31, 52, .94),
            rgba(8, 24, 42, .96)
        );

    border: 1px solid rgba(77, 138, 195, .13);

    border-radius: 18px;
}


.md-contact-info-featured {
    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(0, 215, 232, .09),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(12, 37, 62, .97),
            rgba(8, 24, 42, .97)
        );

    border-color:
        rgba(24, 187, 226, .2);
}


.md-contact-info-label {
    display: block;

    margin-bottom: 16px;

    color: #12cee7;

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

    letter-spacing: 2px;
}


.md-contact-info-card h3 {
    margin: 0 0 11px;

    color: #ffffff;

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


.md-contact-info-card p {
    margin: 0;

    color: #8298ae;

    font-size: 12px;
    line-height: 1.75;
}


/* Email */

.md-contact-email {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 22px;
    padding-top: 18px;

    color: #dbe8f2;

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

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

    text-decoration: none;

    transition: color .2s ease;
}


.md-contact-email:hover {
    color: #10d3e6;
}


/* Availability */

.md-contact-availability {
    display: flex;
    align-items: flex-start;

    gap: 12px;
}


.md-contact-availability i {
    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    margin-top: 5px;

    background: #12d1e6;

    border-radius: 50%;

    box-shadow:
        0 0 12px rgba(18,209,230,.7);
}


.md-contact-availability strong {
    display: block;

    margin-bottom: 5px;

    color: #dce7f1;

    font-size: 12px;
}


.md-contact-availability span {
    display: block;

    color: #748aa0;

    font-size: 10px;
    line-height: 1.5;
}


/* Checklist */

.md-contact-checklist {
    display: grid;

    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.md-contact-checklist li {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    color: #8197ad;

    font-size: 11px;
    line-height: 1.5;
}


.md-contact-checklist li span {
    flex: 0 0 auto;

    color: #12cee7;

    font-weight: 800;
}


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

@media (max-width: 1050px) {

    .md-contact-main-grid {
        grid-template-columns: 1fr;
    }

    .md-contact-details {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .md-contact-main {
        padding: 85px 0 95px;
    }

    .md-contact-main-container {
        width: min(100% - 36px, 1420px);
    }

    .md-contact-form-panel {
        padding: 28px 22px;
    }

    .md-contact-form-panel h2 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }

    .md-form-row {
        grid-template-columns: 1fr;
    }

    .md-contact-submit {
        width: 100%;
    }

    .md-contact-details {
        grid-template-columns: 1fr;
    }

}