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


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

.site-header {

    position: fixed;

    top: 12px;
    left: 0;

    z-index: 1000;

    width: 100%;

    padding-inline: 12px;

    pointer-events: none;
}


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

.header-inner {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 78px;

    padding:
        0
        18px
        0
        26px;

    border:
        1px solid
        rgba(226, 232, 240, 0.95);

    border-radius:
        var(--radius-pill);

    background:
        var(--header-bg);

    box-shadow:
        var(--shadow-header);

    backdrop-filter:
        blur(20px);

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

    pointer-events: auto;

    transition:
        min-height 0.4s var(--ease),
        box-shadow 0.4s ease,
        background-color 0.35s ease;
}


/* =========================================================
   SCROLL STATE
   ========================================================= */

.site-header.is-scrolled
.header-inner {

    min-height:
        68px;

    box-shadow:
        var(--shadow-header-scroll);
}


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

.logo-area {

    display: flex;

    align-items: center;

    flex-shrink: 0;
}


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

.site-logo {

    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    color:
        var(--text);

    line-height: 1;

    transition:
        opacity 0.3s ease,
        transform 0.3s var(--ease);
}


.site-logo:hover {

    opacity:
        0.82;

    transform:
        translateY(-1px);
}


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

.logo-wordmark {

    display: block;

    color:
        var(--text);

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

    font-size:
        1.55rem;

    font-weight:
        800;

    line-height:
        0.95;

    letter-spacing:
        -0.075em;

    white-space:
        nowrap;
}


/* IT COLOR */

.logo-wordmark .logo-it {

    background:
        linear-gradient(
            100deg,
            var(--primary),
            var(--secondary)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

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


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

.logo-tagline {

    display: block;

    margin-top:
        7px;

    color:
        var(--text-secondary);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        0.47rem;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


/* =========================================================
   IT KEYWORD
   ========================================================= */

.header-keyword {

    /* display: inline-flex; */
    display: none;

    align-items: center;

    gap: 7px;

    margin-left:
        15px;

    padding:
        7px
        11px;

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

    border-radius:
        var(--radius-pill);

    background:
        var(--surface);

    color:
        var(--text-secondary);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        0.57rem;

    font-weight:
        600;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


.header-keyword::before {

    content: "";

    width: 5px;
    height: 5px;

    flex-shrink: 0;

    border-radius:
        50%;

    background:
        var(--accent);

    box-shadow:
        0 0 0 3px
        rgba(34, 197, 94, 0.10);
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.main-nav {

    position: absolute;

    left: 50%;

    display: flex;

    align-items: center;

    gap: 31px;

    transform:
        translateX(-50%);
}


.nav-link {

    position: relative;

    color:
        var(--text);

    font-size:
        0.9rem;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:
        color 0.25s ease;
}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 100%;
    height: 1.5px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary)
        );

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform 0.35s var(--ease);
}


.nav-link:hover {

    color:
        var(--primary);
}


.nav-link:hover::after,
.nav-link.active::after {

    transform:
        scaleX(1);

    transform-origin:
        left;
}


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

.header-actions {

    display: flex;

    align-items: center;

    gap: 9px;
}


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

.header-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height:
        48px;

    padding:
        0
        22px;

    border-radius:
        var(--radius-pill);

    background:
        linear-gradient(
            100deg,
            var(--primary),
            var(--secondary)
        );

    color:
        #FFFFFF;

    font-size:
        0.84rem;

    font-weight:
        800;

    box-shadow:
        var(--shadow-button);

    transition:
        transform 0.35s var(--ease),
        box-shadow 0.35s ease;
}


.header-cta span:last-child {

    font-size:
        1rem;

    transition:
        transform 0.35s var(--ease);
}


.header-cta:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 34px
        rgba(37, 99, 235, 0.28);
}


.header-cta:hover
span:last-child {

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


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

.menu-toggle {

    display: none;

    align-items: center;

    justify-content: center;

    width:
        44px;

    height:
        44px;

    padding:
        0;

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

    border-radius:
        50%;

    background:
        var(--surface);

    color:
        var(--text);

    cursor:
        pointer;

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease;
}


/* =========================================================
   HAMBURGER
   ========================================================= */

.menu-icon {

    position:
        relative;

    display:
        block;

    width:
        18px;

    height:
        14px;
}


.menu-icon span {

    position:
        absolute;

    left:
        0;

    width:
        100%;

    height:
        1.5px;

    background:
        currentColor;

    transition:
        top 0.35s var(--ease),
        transform 0.35s var(--ease),
        opacity 0.2s ease;
}


.menu-icon span:nth-child(1) {
    top: 1px;
}


.menu-icon span:nth-child(2) {
    top: 6.5px;
}


.menu-icon span:nth-child(3) {
    top: 12px;
}


/* =========================================================
   HAMBURGER → X
   ========================================================= */

.menu-toggle.is-active
.menu-icon span:nth-child(1) {

    top:
        6.5px;

    transform:
        rotate(45deg);
}


.menu-toggle.is-active
.menu-icon span:nth-child(2) {

    opacity:
        0;
}


.menu-toggle.is-active
.menu-icon span:nth-child(3) {

    top:
        6.5px;

    transform:
        rotate(-45deg);
}


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

.mobile-nav {

    position:
        fixed;

    top:
        0;

    left:
        0;

    z-index:
        -1;

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    height:
        100vh;

    height:
        100dvh;

    padding:
        105px
        23px
        18px;

    background:
        var(--bg);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-8px);

    pointer-events:
        none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.4s var(--ease);
}


.mobile-nav.is-open {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

    pointer-events:
        auto;
}


/* =========================================================
   MOBILE NAV LINKS
   ========================================================= */

.mobile-nav-links {

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;
}


.mobile-nav-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        64px;

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

    color:
        var(--text);

    font-size:
        1.05rem;

    font-weight:
        700;

    letter-spacing:
        -0.02em;

    transition:
        color 0.25s ease,
        padding-left 0.3s var(--ease);
}


.mobile-nav-link:hover {

    color:
        var(--primary);

    padding-left:
        5px;
}


.mobile-nav-arrow {

    color:
        var(--text-muted);

    font-size:
        0.9rem;

    transition:
        color 0.25s ease,
        transform 0.3s var(--ease);
}


.mobile-nav-link:hover
.mobile-nav-arrow {

    color:
        var(--primary);

    transform:
        translateX(4px);
}


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

.mobile-nav-bottom {

    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;

    width:
        100%;

    margin-top:
        auto;
}


/* =========================================================
   MOBILE SERVICE TAGS
   ========================================================= */

.mobile-service-label {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.mobile-service-tag {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        29px;

    padding:
        0
        10px;

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

    border-radius:
        var(--radius-pill);

    background:
        var(--surface);

    color:
        var(--text-secondary);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        0.56rem;

    font-weight:
        500;

    letter-spacing:
        0.02em;

    text-transform:
        uppercase;
}


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

.mobile-cta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    min-height:
        60px;

    padding:
        0
        21px;

    border-radius:
        14px;

    background:
        linear-gradient(
            100deg,
            var(--primary),
            var(--secondary)
        );

    color:
        #FFFFFF;

    font-size:
        0.92rem;

    font-weight:
        800;

    box-shadow:
        var(--shadow-button);

    transition:
        transform 0.3s var(--ease),
        box-shadow 0.3s ease;
}


.mobile-cta:hover {

    transform:
        translateY(-2px);
}


.mobile-cta span:last-child {

    transition:
        transform 0.3s var(--ease);
}


.mobile-cta:hover
span:last-child {

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


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

@media (max-width: 1100px) {

    .main-nav {

        gap:
            21px;
    }

    .header-keyword {

        display:
            none;
    }
}


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

@media (max-width: 900px) {

    .site-header {

        top:
            8px;

        padding-inline:
            8px;
    }


    .header-inner {

        min-height:
            64px;

        padding:
            0
            8px
            0
            14px;
    }


    .site-header.is-scrolled
    .header-inner {

        min-height:
            62px;
    }


    .main-nav {

        display:
            none;
    }


    .header-keyword {

        display:
            none;
    }


    .header-cta {

        display:
            none;
    }


    .menu-toggle {

        display:
            flex;
    }


    .logo-wordmark {

        font-size:
            1.2rem;
    }


    .logo-tagline {

        margin-top:
            5px;

        font-size:
            0.39rem;

        letter-spacing:
            0.145em;
    }


    .header-actions {

        gap:
            7px;
    }


    .menu-toggle {

        width:
            42px;

        height:
            42px;
    }
}


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

@media (max-width: 600px) {

    .mobile-nav {

        padding:
            94px
            23px
            18px;
    }


    .mobile-nav-link {

        min-height:
            61px;

        font-size:
            1rem;
    }


    .mobile-service-label {

        gap:
            6px;
    }


    .mobile-service-tag {

        font-size:
            0.54rem;
    }


    .mobile-cta {

        min-height:
            59px;
    }
}