/* =========================================================

   TECH HYBR

   HEADER + RESPONSIVE NAVIGATION

   ========================================================= */





/* =========================================================

   THEME

   ========================================================= */



:root {

    --ink: #0B0E13;

    --ink-soft: #151a22;



    --paper: #F3EFE6;

    --paper-dim: #e8e2d3;



    --amber: #E8A33D;

    --amber-soft: #f0c07a;



    --teal: #37B7A8;



    --graphite: #9096a1;

    --graphite-dark: #565c68;



    --line: rgba(243, 239, 230, 0.14);



    --radius: 2px;



    --display: "Space Grotesk", sans-serif;

    --body: "Inter", sans-serif;

    --mono: "JetBrains Mono", monospace;

}





/* =========================================================

   RESET

   ========================================================= */



html {

    margin: 0;

    padding: 0;

    width: 100%;

    scroll-behavior: smooth;

}



body {

    margin: 0;

    padding: 0;

    width: 100%;

    min-height: 100vh;



    font-family: var(--body);



    background: var(--paper);

}



*,

*::before,

*::after {

    box-sizing: border-box;

}





/* =========================================================

   HEADER

   ========================================================= */



.site-header {

    position: sticky;

    top: 0;

    left: 0;



    z-index: 9999;



    width: 100%;

    margin: 0;

    padding: 0;



    color: var(--paper);



    font-family: var(--body);



    background: var(--ink);



    /*

     * Prevent the sticky header from being affected

     * by accidental width/overflow issues.

     */

    isolation: isolate;



    box-shadow:

        0 4px 18px rgba(0, 0, 0, 0.12);

}



.site-header a {

    color: inherit;

    text-decoration: none;

}





/* =========================================================

   COMMON CONTAINER

   ========================================================= */



.header-container {

    width: min(1200px, calc(100% - 48px));



    margin: 0 auto;

}





/* =========================================================

   TOP RIBBON

   ========================================================= */



.header-ribbon {

    width: 100%;



    margin: 0;

    padding: 0;



    background: var(--ink);



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

}



.ribbon-inner {

    min-height: 34px;



    display: flex;

    align-items: center;

    justify-content: flex-end;

}



.ribbon-links {

    display: flex;

    align-items: center;

    justify-content: flex-end;



    gap: 24px;

}



.ribbon-link {

    display: inline-flex;

    align-items: center;



    gap: 8px;



    white-space: nowrap;



    color: var(--graphite);



    font-family: var(--mono);



    font-size: 10px;

    font-weight: 500;



    line-height: 1;

    letter-spacing: 0.08em;



    text-transform: uppercase;



    transition:

        color 0.2s ease,

        transform 0.2s ease;

}



.ribbon-link:hover {

    color: var(--paper);



    transform: translateY(-1px);

}



.ribbon-dot {

    width: 5px;

    height: 5px;



    flex: 0 0 5px;



    border-radius: 50%;



    background: var(--amber);



    box-shadow:

        0 0 0 3px rgba(232, 163, 61, 0.08);

}



/* =========================================================

   MULTI-COLOR LED BLINKING RIBBON

   ========================================================= */



.ribbon-link {

    position: relative;

    color: var(--ribbon-color, var(--graphite));

    animation: ribbonLedBlink 2.4s ease-in-out infinite;

    will-change: opacity, filter, text-shadow;

}



.ribbon-link:nth-child(1) {

    --ribbon-color: #E8A33D;

    --ribbon-glow: rgba(232, 163, 61, 0.95);

    animation-delay: 0s;

}



.ribbon-link:nth-child(2) {

    --ribbon-color: #37B7A8;

    --ribbon-glow: rgba(55, 183, 168, 0.95);

    animation-delay: 0.30s;

}



.ribbon-link:nth-child(3) {

    --ribbon-color: #7AA7FF;

    --ribbon-glow: rgba(122, 167, 255, 0.95);

    animation-delay: 0.60s;

}



.ribbon-link:nth-child(4) {

    --ribbon-color: #FF6B6B;

    --ribbon-glow: rgba(255, 107, 107, 0.95);

    animation-delay: 0.90s;

}



.ribbon-link:nth-child(5) {

    --ribbon-color: #C084FC;

    --ribbon-glow: rgba(192, 132, 252, 0.95);

    animation-delay: 1.20s;

}



.ribbon-link:nth-child(6) {

    --ribbon-color: #4ADE80;

    --ribbon-glow: rgba(74, 222, 128, 0.95);

    animation-delay: 1.50s;

}



.ribbon-link:nth-child(7) {

    --ribbon-color: #F472B6;

    --ribbon-glow: rgba(244, 114, 182, 0.95);

    animation-delay: 1.80s;

}



.ribbon-link:nth-child(8) {

    --ribbon-color: #FACC15;

    --ribbon-glow: rgba(250, 204, 21, 0.95);

    animation-delay: 2.10s;

}



.ribbon-link .ribbon-dot {

    background: var(--ribbon-color);

    box-shadow:

        0 0 4px var(--ribbon-glow),

        0 0 9px var(--ribbon-glow),

        0 0 16px var(--ribbon-glow);

    animation: ribbonDotBlink 1.15s ease-in-out infinite;

    animation-delay: inherit;

}



.ribbon-link:hover {

    color: var(--ribbon-color);

    animation-play-state: paused;

    opacity: 1;

    filter: brightness(1.35);

    text-shadow:

        0 0 5px var(--ribbon-glow),

        0 0 12px var(--ribbon-glow);

    transform: translateY(-1px);

}



.ribbon-link:hover .ribbon-dot {

    animation-play-state: paused;

    transform: scale(1.35);

}



@keyframes ribbonLedBlink {

    0%, 100% {

        opacity: 0.60;

        filter: brightness(0.70);

        text-shadow: 0 0 0 transparent;

    }



    18% {

        opacity: 1;

        filter: brightness(1.18);

        text-shadow:

            0 0 4px var(--ribbon-glow),

            0 0 10px var(--ribbon-glow);

    }



    28% {

        opacity: 0.76;

        filter: brightness(0.88);

        text-shadow: 0 0 2px var(--ribbon-glow);

    }



    36% {

        opacity: 1;

        filter: brightness(1.40);

        text-shadow:

            0 0 5px var(--ribbon-glow),

            0 0 14px var(--ribbon-glow);

    }



    50% {

        opacity: 0.65;

        filter: brightness(0.72);

        text-shadow: 0 0 0 transparent;

    }

}



@keyframes ribbonDotBlink {

    0%, 100% {

        opacity: 0.45;

        transform: scale(0.82);

        box-shadow: 0 0 2px var(--ribbon-glow);

    }



    35% {

        opacity: 1;

        transform: scale(1.18);

        box-shadow:

            0 0 4px var(--ribbon-glow),

            0 0 10px var(--ribbon-glow),

            0 0 18px var(--ribbon-glow);

    }



    55% {

        opacity: 0.40;

        transform: scale(0.78);

        box-shadow: 0 0 2px var(--ribbon-glow);

    }



    70% {

        opacity: 1;

        transform: scale(1.10);

        box-shadow:

            0 0 5px var(--ribbon-glow),

            0 0 12px var(--ribbon-glow);

    }

}





/* =========================================================

   MAIN HEADER

   ========================================================= */



.header-main {

    width: 100%;



    margin: 0;

    padding: 0;



    background: var(--ink);



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

}



.header-inner {

    min-height: 102px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 30px;

}





/* =========================================================

   LOGO

   IMAGE VERSION

   ========================================================= */



.techhybr-logo {

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;



    flex: 0 0 auto;



    width: auto;

    height: 94px;



    margin: 0;

    padding: 0;



    line-height: 0;



    text-decoration: none;



    transition:

        opacity 0.2s ease,

        transform 0.2s ease;

}



.techhybr-logo:hover {

    opacity: 0.92;

}



.techhybr-logo-image {

    display: block;

    width: auto;

    height: 90px;

    max-width: 300px;

    margin: 0;

    padding: 0;

    object-fit: contain;

    object-position: left center;

    border: 0;

    outline: none;

    vertical-align: middle;



    /*

     * Prevent browser image baseline spacing.

     */

    line-height: 0;

}





/* =========================================================

   DESKTOP NAV

   ========================================================= */



.desktop-nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;



    gap: 2px;



    margin-left: auto;

}



.nav-link {

    position: relative;



    min-height: 42px;



    display: inline-flex;

    align-items: center;

    justify-content: center;



    padding: 0 13px;



    color: var(--graphite);



    font-family: var(--display);



    font-size: 13px;

    font-weight: 500;



    line-height: 1;

    letter-spacing: 0.01em;



    white-space: nowrap;



    transition:

        color 0.2s ease,

        background 0.2s ease;

}



.nav-link::after {

    content: "";



    position: absolute;



    left: 13px;

    right: 13px;



    bottom: 3px;



    height: 1px;



    background: var(--amber);



    transform: scaleX(0);



    transform-origin: right;



    transition:

        transform 0.2s ease;

}



.nav-link:hover {

    color: var(--paper);

}



.nav-link:hover::after,

.nav-link.active::after {

    transform: scaleX(1);



    transform-origin: left;

}



.nav-link.active {

    color: var(--paper);

}





/* =========================================================

   CONTACT BUTTON

   ========================================================= */



.nav-contact {

    margin-left: 8px;



    padding: 0 18px;



    color: var(--ink);



    background: var(--amber);



    border-radius: var(--radius);

}



.nav-contact::after {

    display: none;

}



.nav-contact:hover,

.nav-contact.active {

    color: var(--ink);



    background: var(--amber-soft);

}





/* =========================================================

   MOBILE MENU BUTTON

   ========================================================= */



.menu-toggle {

    display: none;



    position: relative;



    width: 44px;

    height: 44px;



    flex: 0 0 44px;



    margin: 0;

    padding: 0;



    align-items: center;

    justify-content: center;



    flex-direction: column;



    gap: 5px;



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



    border-radius: var(--radius);



    background: transparent;



    color: var(--paper);



    cursor: pointer;



    -webkit-tap-highlight-color: transparent;



    appearance: none;

}



.menu-toggle:hover {

    background: rgba(243, 239, 230, 0.05);

}



.menu-toggle:focus-visible {

    outline: 1px solid var(--amber);

    outline-offset: 3px;

}



.menu-toggle span {

    display: block;



    width: 20px;

    height: 1px;



    flex: 0 0 1px;



    background: var(--paper);



    transform-origin: center;



    transition:

        transform 0.25s ease,

        opacity 0.2s ease;

}





/* =========================================================

   MOBILE X ICON

   ========================================================= */



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

    transform: translateY(6px) rotate(45deg);

}



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

    opacity: 0;

}



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

    transform: translateY(-6px) rotate(-45deg);

}





/* =========================================================

   MOBILE MENU

   ========================================================= */



/* =========================================================

   MOBILE MENU

   ========================================================= */



.mobile-menu {

    position: relative;

    z-index: 10000;



    width: 100%;

    max-height: 0;



    overflow: hidden;

    visibility: hidden;

    opacity: 0;



    background: var(--ink-soft);

    border-bottom: 1px solid transparent;



    transition:

        max-height 0.35s ease,

        opacity 0.25s ease,

        visibility 0.35s ease,

        border-color 0.35s ease;

}



.mobile-menu.active {

    max-height: 500px;

    visibility: visible;

    opacity: 1;



    border-bottom-color: var(--line);

}



/* =========================================================

   MOBILE NAV

   ========================================================= */



.mobile-nav {

    width: min(1200px, calc(100% - 48px));



    margin: 0 auto;



    padding: 6px 0 16px;

}



.mobile-nav-link {

    min-height: 54px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    padding: 0;



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



    color: var(--paper);



    font-family: var(--display);



    font-size: 16px;

    font-weight: 500;



    line-height: 1;



    transition:

        color 0.2s ease,

        padding-left 0.2s ease;

}



.mobile-nav-link:last-child {

    border-bottom: 0;

}



.mobile-nav-link span {

    color: var(--graphite);

    font-family: var(--mono);

    font-size: 17px;

    line-height: 1;

    letter-spacing: 0.1em;

}



.mobile-nav-link:hover,

.mobile-nav-link.active {

    color: var(--amber);

}



.mobile-nav-link:hover {

    padding-left: 6px;

}



.mobile-contact {

    color: var(--amber);

}





/* =========================================================

   RESPONSIVE RIBBON — TWO ROW LAYOUT

   ========================================================= */



@media (max-width: 820px) {

    .header-ribbon {

        overflow: hidden;

    }



    .ribbon-inner {

        min-height: 56px;

        padding: 5px 8px;

        justify-content: center;

        overflow: hidden;

    }



    .ribbon-links {

        width: 100%;

        display: grid;

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

        grid-template-rows: repeat(2, minmax(22px, auto));

        align-items: center;

        justify-items: center;

        column-gap: 8px;

        row-gap: 2px;

        overflow: visible;

        padding: 0;

    }



    .ribbon-link {

        width: 100%;

        min-width: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

        font-size: 10px;

        line-height: 1.15;

        letter-spacing: 0.035em;

        gap: 5px;

    }



    .ribbon-dot {

        flex: 0 0 5px;

        width: 5px;

        height: 5px;

    }

}



@media (max-width: 520px) {

    .ribbon-inner {

        min-height: 54px;

        padding: 4px 6px;

    }



    .ribbon-links {

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

        grid-template-rows: repeat(2, minmax(20px, auto));

        column-gap: 4px;

        row-gap: 1px;

    }



    .ribbon-link {

        font-size: 9px;

        line-height: 1.1;

        letter-spacing: 0.015em;

        gap: 4px;

    }



    .ribbon-dot {

        flex-basis: 4px;

        width: 4px;

        height: 4px;

    }

}



@media (max-width: 390px) {

    .ribbon-inner {

        min-height: 52px;

        padding: 3px 4px;

    }



    .ribbon-links {

        column-gap: 2px;

    }



    .ribbon-link {

        font-size: 8px;

        letter-spacing: 0;

        gap: 3px;

    }



    .ribbon-dot {

        flex-basis: 4px;

        width: 4px;

        height: 4px;

    }

}



@media (max-width: 340px) {

    .ribbon-link {

        font-size: 7.5px;

    }

}



/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 1080px) {



    .header-container {

        width: min(100% - 36px, 1000px);

    }



    .header-inner {

        min-height: 92px;

        gap: 20px;

    }



    .techhybr-logo {

        height: 82px;

    }



    .techhybr-logo-image {

        height: 80px;

        max-width: 245px;

    }



    .nav-link {

        padding-left: 9px;

        padding-right: 9px;



        font-size: 12px;

    }



    .nav-link::after {

        left: 9px;

        right: 9px;

    }



    .nav-contact {

        margin-left: 5px;



        padding-left: 13px;

        padding-right: 13px;

    }

}





/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 820px) {



    .header-container {

        width: calc(100% - 28px);

    }





    /* -----------------------------------------------------

       Ribbon

       ----------------------------------------------------- */



    .ribbon-inner {

        min-height: 32px;



        justify-content: center;

    }



    .ribbon-links {

        width: 100%;



        justify-content: center;



        gap: 14px;

    }



    .ribbon-link {

        font-size: 10px;

        line-height: 1.2;

        letter-spacing: 0.055em;

    }



    .ribbon-dot {

        width: 4px;

        height: 4px;



        flex-basis: 4px;

    }





    /* -----------------------------------------------------

       Main Header

       ----------------------------------------------------- */



    .header-inner {

        min-height: 82px;

        gap: 16px;

    }





    /* -----------------------------------------------------

       Desktop Navigation

       ----------------------------------------------------- */



    .desktop-nav {

        display: none;

    }





    /* -----------------------------------------------------

       Hamburger

       ----------------------------------------------------- */



    .menu-toggle {

        display: flex;

    }





    /* -----------------------------------------------------

       Logo

       ----------------------------------------------------- */



    .techhybr-logo {

        height: 72px;

    }



    .techhybr-logo-image {

        height: 68px;

        max-width: 215px;

    }

}





/* =========================================================

   SMALL MOBILE

   ========================================================= */



@media (max-width: 520px) {



    .header-container {

        width: calc(100% - 20px);

    }





    /* -----------------------------------------------------

       Ribbon

       ----------------------------------------------------- */



    .ribbon-inner {

        min-height: 30px;

    }



    .ribbon-links {

        gap: 9px;

    }



    .ribbon-link {

        font-size: 9px;

        line-height: 1.2;

        letter-spacing: 0.04em;

    }



    .ribbon-dot {

        display: inline-block;

        width: 4px;

        height: 4px;

        flex-basis: 4px;

    }





    /* -----------------------------------------------------

       Main Header

       ----------------------------------------------------- */



    .header-inner {

        min-height: 74px;

        gap: 12px;

    }





    /* -----------------------------------------------------

       Logo

       ----------------------------------------------------- */



    .techhybr-logo {

        height: 66px;

        min-width: 0;

    }



    .techhybr-logo-image {

        height: 62px;

        max-width: 195px;

    }





    /* -----------------------------------------------------

       Hamburger

       ----------------------------------------------------- */



    .menu-toggle {

        width: 40px;

        height: 40px;



        flex-basis: 40px;

    }





    /* -----------------------------------------------------

       Mobile Navigation

       ----------------------------------------------------- */



    .mobile-nav {

        width: calc(100% - 20px);

    }



    .mobile-nav-link {

        min-height: 52px;



        font-size: 15px;

    }

}





/* =========================================================

   VERY SMALL MOBILE

   ========================================================= */



@media (max-width: 360px) {



    .ribbon-links {

        gap: 6px;

    }



    .ribbon-link {

        font-size: 8px;

    }





    /* -----------------------------------------------------

       Logo

       ----------------------------------------------------- */



    .techhybr-logo-image {

        height: 58px;

        max-width: 170px;

    }





    /* -----------------------------------------------------

       Hamburger

       ----------------------------------------------------- */



    .menu-toggle {

        width: 38px;

        height: 38px;



        flex-basis: 38px;

    }

}





/* =========================================================

   LANDSCAPE MOBILE

   ========================================================= */



@media (max-width: 820px) and (orientation: landscape) {



    .header-inner {

        min-height: 72px;

    }



    .techhybr-logo {

        height: 62px;

    }



    .techhybr-logo-image {

        height: 58px;

    }



    .mobile-nav-link {

        min-height: 48px;

    }

}





/* =========================================================

   ACCESSIBILITY

   ========================================================= */



.site-header a:focus-visible,

.site-header button:focus-visible {

    outline: 1px solid var(--amber);



    outline-offset: 3px;

}





/* =========================================================

   REDUCED MOTION

   ========================================================= */



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



    html {

        scroll-behavior: auto !important;

    }



    .site-header *,

    .site-header *::before,

    .site-header *::after {

        scroll-behavior: auto !important;



        transition: none !important;



        animation: none !important;

    }

}