/* =========================================================
   DEVSID HEADER
   Premium Glass / Editorial Navigation
   ========================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 78px;

    z-index: 1000;

    /* Initial state */
    background: rgba(9, 9, 9, 0.94);

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

    /* The important part */
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);

    transition:
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        height 0.45s ease;
}


/* =========================================================
   SCROLLED STATE
   ========================================================= */

.site-header.scrolled {

    /*
     * More transparent so the page can subtly
     * show through the navigation.
     */
    background: rgba(9, 9, 9, 0.68);

    /*
     * Stronger blur makes the transparency feel
     * intentional rather than simply faded.
     */
    backdrop-filter: blur(26px) saturate(125%);
    -webkit-backdrop-filter: blur(26px) saturate(125%);

    border-bottom-color: rgba(255, 255, 255, 0.12);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.025);
}


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

.header-inner {

    width: 100%;
    height: 78px;

    position: relative;
    z-index: 2;

    padding: 0 40px;

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

    /*
     * IMPORTANT:
     * No background here.
     * The parent .site-header owns the glass effect.
     */
    background: transparent;

    border: 0;

    transition:
        height 0.45s ease,
        padding 0.45s ease;
}


/* Slightly more compact when scrolling */

.site-header.scrolled .header-inner {
    height: 70px;
    padding-left: 42px;
    padding-right: 42px;
}


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

.site-logo {

position: relative;

display: inline-flex;

align-items: center;

color: #ffffff !important;

text-decoration: none;

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

font-size: 25px;

font-weight: 800;

letter-spacing: -1.5px;

line-height: 1;

transition:
        transform 0.3s ease,
        opacity 0.3s ease;

        height: 40px;
}
.header-logo{
    height: 60px;
}
.site-logo span {
    color: #ff914d;
}

.site-logo:hover {
    opacity: .9;
    transform: translateY(-1px);
}


/* =========================================================
   DESKTOP NAV
   ========================================================= */

.desktop-nav {

    display: flex;
    align-items: center;

    gap: 30px;
}


.desktop-nav > a {

    position: relative;

    color: #a8a8a8 !important;
    text-decoration: none;

    font-family: "DM Mono", monospace;

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

    text-transform: uppercase;
    letter-spacing: 0.05em;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}


/* Underline */

.desktop-nav > a:not(.header-cta)::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: #ff914d;

    transition:
        width 0.3s cubic-bezier(.22, 1, .36, 1);
}


.desktop-nav > a:not(.header-cta):hover {
    color: #ffffff;
}


.desktop-nav > a:not(.header-cta):hover::after {
    width: 100%;
}


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

.header-cta {

    position: relative;

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

    gap: 22px;

    min-width: 112px;

    padding: 11px 13px;

    color: #ffffff !important;

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

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

    overflow: hidden;

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


/*
 * Orange hover layer
 */

.header-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    background: #ff914d;

    transform: translateY(101%);

    transition:
        transform 0.35s cubic-bezier(.22, 1, .36, 1);

    z-index: -1;
}


.header-cta:hover {

    color: #090909 !important;

    border-color: #ff914d;

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


.header-cta:hover::before {
    transform: translateY(0);
}


.header-cta-arrow {

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

    transition:
        transform 0.3s ease;
}


.header-cta:hover .header-cta-arrow {
    transform: translate(2px, -2px);
}


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

.mobile-menu-toggle {

    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

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

    flex-direction: column;

    gap: 6px;
}


.mobile-menu-toggle span {

    display: block;

    width: 25px;
    height: 1px;

    background: #ffffff;

    transition:
        transform 0.3s ease,
        width 0.3s ease,
        background 0.3s ease;
}


.mobile-menu-toggle:hover span:first-child {
    width: 21px;
}


.mobile-menu-toggle:hover span:last-child {
    width: 25px;
}


.mobile-menu-toggle.active span:first-child {
    transform: translateY(3.5px) rotate(45deg);
}


.mobile-menu-toggle.active span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
}


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

.mobile-navigation {

    position: fixed;

    inset: 78px 0 0;

    z-index: 999;

    background:
        linear-gradient(
            180deg,
            rgba(9, 9, 9, .98),
            rgba(9, 9, 9, 1)
        );

    visibility: hidden;
    opacity: 0;

    transform: translateY(-20px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0.35s ease;
}


.mobile-navigation.open {

    visibility: visible;

    opacity: 1;

    transform: translateY(0);
}


.mobile-navigation-inner {

    width: min(calc(100% - 40px), 700px);

    height: 100%;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
}


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

.mobile-nav-label {

    display: flex;

    justify-content: space-between;

    padding: 25px 0 15px;

    border-bottom: 1px solid #292929;

    color: #555555;

    font-family: "DM Mono", monospace;

    font-size: 10px;

    letter-spacing: 0.08em;
}


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

.mobile-nav {

    display: flex;

    flex-direction: column;
}


.mobile-nav a {

    display: flex;

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

    padding: 20px 0;

    border-bottom: 1px solid #292929;

    color: #ffffff;

    text-decoration: none;

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

    font-size: clamp(35px, 8vw, 55px);

    font-weight: 700;

    letter-spacing: -0.06em;

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


.mobile-nav a:hover {

    color: #ff914d;

    padding-left: 8px;
}


.mobile-nav small {

    color: #555555;

    font-family: "DM Mono", monospace;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0;

    transition: color 0.25s ease;
}


.mobile-nav a:hover small {
    color: #ff914d;
}


.mobile-nav-contact {
    color: #ff914d !important;
}


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

.mobile-navigation-footer {

    display: flex;

    justify-content: space-between;

    margin-top: auto;

    padding: 20px 0;

    color: #555555;

    font-family: "DM Mono", monospace;

    font-size: 9px;

    text-transform: uppercase;
}


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

@media (max-width: 850px) {

    .site-header {
        height: 70px;
    }

    .header-inner {

        height: 70px;

        width: 100%;

        padding: 0 20px;
    }

    .site-header.scrolled .header-inner {

        height: 64px;

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

    .desktop-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .mobile-navigation {
        inset: 70px 0 0;
    }

    .site-header.scrolled + .mobile-navigation {
        inset: 64px 0 0;
    }

    .site-logo {
        font-size: 23px;
    }
}


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

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

    .site-header,
    .header-inner,
    .site-logo,
    .desktop-nav > a,
    .header-cta,
    .header-cta::before,
    .mobile-menu-toggle span,
    .mobile-navigation,
    .mobile-nav a {
        transition: none !important;
    }
}


/* =========================================================
   DEVSID — ✦ ANIMATED BRAND CURSOR
   White / Orange / Red
   ========================================================= */

@media (pointer: fine) {

    /* -----------------------------------------
       HIDE DEFAULT CURSOR
       ----------------------------------------- */

    body {
        cursor: none;
    }

    a,
    button,
    input,
    textarea,
    select {
        cursor: none;
    }


    /* -----------------------------------------
       CURSOR CONTAINER
       ----------------------------------------- */

    .devsid-cursor {
        position: fixed;

        top: 0;
        left: 0;

        width: 1px;
        height: 1px;

        pointer-events: none;

        z-index: 999999;

        opacity: 1;

        will-change: transform;

        transition:
            opacity .3s ease;
    }


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

    .devsid-cursor-glow {

        position: absolute;

        width: 150px;
        height: 150px;

        left: -75px;
        top: -75px;

        border-radius: 50%;

        background:

            radial-gradient(
                circle at 30% 30%,
                rgba(255, 255, 255, .16),
                transparent 22%
            ),

            radial-gradient(
                circle at 70% 70%,
                rgba(255, 77, 25, .18),
                transparent 34%
            ),

            radial-gradient(
                circle,
                rgba(255, 145, 77, .13) 0%,
                rgba(160, 45, 55, .07) 35%,
                rgba(160, 45, 55, 0) 72%
            );

        filter: blur(6px);

        opacity: .85;

        animation:
            devsidGlow 6s ease-in-out infinite alternate;

        will-change:
            transform,
            filter,
            opacity;

        transition:
            transform .5s cubic-bezier(.22, 1, .36, 1),
            opacity .35s ease;
    }


    @keyframes devsidGlow {

        0% {
            transform:
                scale(.9)
                rotate(0deg);

            filter: blur(5px);
        }

        25% {
            transform:
                scale(1.08)
                rotate(60deg);

            filter: blur(7px);
        }

        50% {
            transform:
                scale(1.18)
                rotate(120deg);

            filter: blur(9px);
        }

        75% {
            transform:
                scale(1.02)
                rotate(210deg);

            filter: blur(6px);
        }

        100% {
            transform:
                scale(.94)
                rotate(360deg);

            filter: blur(5px);
        }
    }


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

    .devsid-cursor-orbit {

        position: absolute;

        left: 50%;
        top: 50%;

        border: 1px solid transparent;

        border-radius: 50%;

        background:

            linear-gradient(
                135deg,
                rgba(255,255,255,.8),
                rgba(255,145,77,.8),
                rgba(160,45,55,.8),
                rgba(255,77,25,.8)
            ) border-box;

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

        -webkit-mask-composite: xor;

        mask-composite: exclude;

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

        transition:
            width .5s cubic-bezier(.22, 1, .36, 1),
            height .5s cubic-bezier(.22, 1, .36, 1),
            opacity .3s ease;
    }


    /* First orbit */

    .orbit-one {

        width: 38px;
        height: 38px;

        animation:
            devsidOrbitOne 5s linear infinite;
    }


    @keyframes devsidOrbitOne {

        from {
            transform:
                translate(-50%, -50%)
                rotate(0deg);
        }

        to {
            transform:
                translate(-50%, -50%)
                rotate(360deg);
        }
    }


    /* Second orbit */

    .orbit-two {

        width: 55px;
        height: 25px;

        opacity: .65;

        animation:
            devsidOrbitTwo 7s linear infinite reverse;
    }


    @keyframes devsidOrbitTwo {

        from {
            transform:
                translate(-50%, -50%)
                rotate(0deg);
        }

        to {
            transform:
                translate(-50%, -50%)
                rotate(360deg);
        }
    }


    /* =========================================================
       PARTICLES
       ========================================================= */

    .devsid-cursor-particle {

        position: absolute;

        width: 3px;
        height: 3px;

        border-radius: 50%;

        background: linear-gradient(
            135deg,
            #ffffff,
            #ff914d,
            #a02d37
        );

        box-shadow:
            0 0 7px rgba(255,145,77,.7);

        animation:
            devsidParticle 3s ease-in-out infinite;
    }


    .particle-one {

        left: 19px;
        top: -16px;

        animation-delay: -.8s;
    }


    .particle-two {

        left: -18px;
        top: 14px;

        width: 2px;
        height: 2px;

        animation-delay: -1.8s;
    }


    @keyframes devsidParticle {

        0%,
        100% {

            transform:
                translate(0, 0)
                scale(.7);

            opacity: .3;
        }

        50% {

            transform:
                translate(5px, -6px)
                scale(1.3);

            opacity: 1;
        }
    }


    /* =========================================================
       STAR
       ========================================================= */

    .devsid-cursor-star {

        position: absolute;

        left: 0;
        top: 0;

        font-family:
            Arial,
            sans-serif;

        font-size: 20px;

        font-weight: 400;

        line-height: 1;

        /* BRAND GRADIENT */

        background:

            linear-gradient(
                120deg,

                #ffffff 0%,

                #ff914d 20%,

                #ff4d19 38%,

                #a02d37 52%,

                #ff4d19 68%,

                #ff914d 82%,

                #ffffff 100%
            );

        background-size: 300% 300%;

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

        -webkit-text-fill-color: transparent;

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

        animation:

            devsidGradient 4s ease-in-out infinite,

            devsidStarFloat 3s ease-in-out infinite;

        filter:

            drop-shadow(
                0 0 5px rgba(255,145,77,.65)
            )

            drop-shadow(
                0 0 15px rgba(160,45,55,.35)
            );

        will-change:
            background-position,
            transform,
            filter;

        transition:
            transform .45s cubic-bezier(.22, 1, .36, 1),
            filter .3s ease;
    }


    /* Gradient continuously moves */

    @keyframes devsidGradient {

        0% {
            background-position:
                0% 50%;
        }

        25% {
            background-position:
                50% 100%;
        }

        50% {
            background-position:
                100% 50%;
        }

        75% {
            background-position:
                50% 0%;
        }

        100% {
            background-position:
                0% 50%;
        }
    }


    /* Star slowly rotates / breathes */

    @keyframes devsidStarFloat {

        0%,
        100% {

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

        50% {

            transform:
                translate(-50%, -50%)
                rotate(45deg)
                scale(1.18);
        }
    }


    /* =========================================================
       NORMAL HOVER
       ========================================================= */

    .devsid-cursor.is-hovering
    .devsid-cursor-glow {

        transform:
            scale(1.3);

        opacity: 1;
    }


    .devsid-cursor.is-hovering
    .orbit-one {

        width: 48px;
        height: 48px;
    }


    .devsid-cursor.is-hovering
    .orbit-two {

        width: 64px;
        height: 30px;

        opacity: .8;
    }


    .devsid-cursor.is-hovering
    .devsid-cursor-star {

        transform:
            translate(-50%, -50%)
            rotate(90deg)
            scale(1.45);

        filter:

            drop-shadow(
                0 0 7px rgba(255,145,77,.8)
            )

            drop-shadow(
                0 0 20px rgba(160,45,55,.4)
            );
    }


    /* =========================================================
       PROJECT HOVER
       ========================================================= */

    .devsid-cursor.is-project
    .devsid-cursor-glow {

        transform:
            scale(1.6);

        opacity: 1;
    }


    .devsid-cursor.is-project
    .orbit-one {

        width: 68px;
        height: 68px;
    }


    .devsid-cursor.is-project
    .orbit-two {

        width: 90px;
        height: 42px;

        opacity: .9;
    }


    .devsid-cursor.is-project
    .devsid-cursor-star {

        transform:
            translate(-50%, -50%)
            rotate(135deg)
            scale(1.8);

        filter:

            drop-shadow(
                0 0 10px rgba(255,145,77,.9)
            )

            drop-shadow(
                0 0 28px rgba(160,45,55,.5)
            );
    }


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

    .devsid-cursor.is-cta
    .devsid-cursor-glow {

        transform:
            scale(1.8);

        opacity: 1;
    }


    .devsid-cursor.is-cta
    .orbit-one {

        width: 76px;
        height: 76px;
    }


    .devsid-cursor.is-cta
    .orbit-two {

        width: 100px;
        height: 47px;

        opacity: 1;
    }


    .devsid-cursor.is-cta
    .devsid-cursor-star {

        transform:
            translate(-50%, -50%)
            rotate(180deg)
            scale(2);

        filter:

            drop-shadow(
                0 0 12px rgba(255,145,77,1)
            )

            drop-shadow(
                0 0 30px rgba(160,45,55,.6)
            );
    }


    /* =========================================================
       CLICK
       ========================================================= */

    .devsid-cursor.is-clicking
    .devsid-cursor-star {

        animation: none;

        transform:
            translate(-50%, -50%)
            rotate(180deg)
            scale(.7);
    }


    .devsid-cursor.is-clicking
    .orbit-one,
    .devsid-cursor.is-clicking
    .orbit-two {

        opacity: .4;

        transform:
            translate(-50%, -50%)
            scale(.75);
    }


    /* =========================================================
       CURSOR OUTSIDE WINDOW
       ========================================================= */

    .devsid-cursor.is-hidden {
        opacity: 0;
    }
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (pointer: coarse) {

    .devsid-cursor {
        display: none;
    }
}

header .hero-button-primary {
   color:#fff !important;
}