body {
    background-color: #050505;
    background-image:
        radial-gradient(circle at 8% -12%, rgba(57, 255, 20, 0.12), transparent 34%),
        radial-gradient(circle at 84% -14%, rgba(57, 255, 20, 0.09), transparent 38%);
}

.optivex-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: optivexSurge 3.2s ease-in-out infinite;
}

.site-logo {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 0;
    object-fit: cover;
    object-position: 50% 58%;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    flex-shrink: 0;
    display: block;
    position: relative;
    z-index: 2;
}

.site-logo-inline {
    width: 2rem;
    height: 2rem;
    border-radius: 0;
    box-shadow: none;
}

.optivex-brand::after {
    content: none;
    display: none;
}

/* Brand-lock effect: logo slightly overlaps the title so it feels connected */
.site-logo:not(.site-logo-inline)+.optivex-brand {
    margin-left: -0.38rem;
    padding-left: 0.55rem;
    letter-spacing: 0.055em;
    transform: translateY(1px);
}

/* Dark mask creates a subtle "bite" into the first letter edge */
.site-logo:not(.site-logo-inline)+.optivex-brand::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1.1em;
    height: 1.1em;
    transform: translate(-58%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle at 86% 50%, rgba(5, 5, 5, 0) 40%, rgba(5, 5, 5, 0.76) 74%, rgba(5, 5, 5, 0.96) 100%);
    pointer-events: none;
    z-index: 3;
}

@keyframes optivexSurge {
    0%,
    100% {
        text-shadow: 0 0 0 rgba(57, 255, 20, 0);
        transform: translateY(0);
    }

    45% {
        text-shadow: 0 0 12px rgba(57, 255, 20, 0.4), 0 0 24px rgba(57, 255, 20, 0.18);
        transform: translateY(-1px);
    }

    65% {
        text-shadow: 0 0 16px rgba(57, 255, 20, 0.5), 0 0 30px rgba(57, 255, 20, 0.22);
        transform: translateY(0);
    }
}

@keyframes optivexScan {
    0%,
    100% {
        opacity: 0.2;
        transform: scaleX(0.25);
    }

    50% {
        opacity: 0.9;
        transform: scaleX(1);
    }
}

.glass-nav {
    background: rgba(5, 5, 5, 0.84) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(57, 255, 20, 0.14) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5);
}

.pitch-line::after {
    background: linear-gradient(90deg, rgba(57, 255, 20, 0.35), rgba(57, 255, 20, 1), rgba(57, 255, 20, 0.35)) !important;
    background-size: 220% 100%;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.45) !important;
}

.pitch-line:hover::after,
.pitch-line.active::after {
    animation: navLineFlow 1.8s linear infinite;
}

@keyframes navLineFlow {
    0% {
        background-position: 0% 50%;
    }

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

/* Mobile-first interaction optimizations */
a,
button,
input,
select,
textarea {
    touch-action: manipulation;
}

@media (max-width: 768px) {
    .site-logo {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0;
    }

    .site-logo-inline {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 0;
    }

    .optivex-brand {
        animation-duration: 4.2s;
    }

    .site-logo:not(.site-logo-inline)+.optivex-brand {
        margin-left: -0.3rem;
        padding-left: 0.45rem;
        transform: translateY(0.5px);
    }

    .site-logo:not(.site-logo-inline)+.optivex-brand::before {
        width: 0.95em;
        height: 0.95em;
        transform: translate(-54%, -50%);
    }

    .optivex-brand::after {
        animation-duration: 4.2s;
    }

    .glass-nav {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
    }
}

@media (hover: none) {
    .pitch-line::after {
        display: none !important;
    }
}

/* Desktop dropdown stability (prevents auto-close while moving mouse into mega menu) */
@media (min-width: 768px) {
    .nav-item {
        position: relative;
    }

    .nav-item::after {
        content: "";
        position: absolute;
        left: -12px;
        right: -12px;
        top: 100%;
        height: 14px;
        z-index: 1;
    }

    .nav-item .mega-menu {
        margin-top: 0 !important;
        top: calc(100% + 8px) !important;
        z-index: 2;
    }

    .nav-item:hover .mega-menu,
    .nav-item:focus-within .mega-menu {
        display: flex !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}