/* ============================================
   NEO SOLUTION — PREMIUM NAVBAR
   Dark glass / frosted, gold-blue accent theme
   ============================================ */

.navbar {
    --gold-1: #f5dca0;
    --gold-2: #c99a4a;
    --blue-1: #6fd3ff;
    --blue-2: #3169e6;
    --nav-bg: rgba(9, 11, 22, 0.45);
    --nav-bg-scrolled: rgba(8, 9, 18, 0.82);
    --nav-border: rgba(255, 255, 255, 0.08);
    --text-main: #f1f3f9;
    --text-dim: rgba(230, 233, 245, 0.62);

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--nav-border);
    transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.45s ease;
    font-family: 'Inter', 'Poppins', sans-serif;
}

.navbar.scrolled {
    background: var(--nav-bg-scrolled);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* Shimmering gold-blue hairline along the very top edge */
.nav-shimmer-line {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--gold-1) 20%,
        var(--blue-1) 50%,
        var(--gold-2) 80%,
        transparent 100%
    );
    background-size: 200% 100%;
    opacity: 0.55;
    animation: shimmerMove 6s linear infinite;
}

@keyframes shimmerMove {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    transition: padding 0.35s ease;
}

.navbar.scrolled .nav-container {
    padding: 11px 32px;
}

/* Logo */
.logo-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.brand-logo {
    height: 50px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 0 rgba(245, 220, 160, 0));
    transition: filter 0.4s ease, transform 0.4s ease;
}

.logo-wrapper:hover .brand-logo {
    filter: drop-shadow(0 0 14px rgba(245, 220, 160, 0.45));
    transform: translateY(-1px);
}

/* Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 16px;
    transition: color 0.3s ease;
}

.nav-links a > span {
    position: relative;
}

.nav-links a > span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0%;
    height: 1.5px;
    background: linear-gradient(90deg, var(--gold-1), var(--blue-1));
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.nav-links a:hover {
    color: var(--text-main);
}

.nav-links a:hover > span::after {
    width: 100%;
}

.nav-links a.active {
    color: var(--text-main);
}

.nav-links a.active > span::after {
    width: 100%;
}

/* Login — ghost pill */
.nav-login-link {
    margin-left: 4px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 9px 20px !important;
    white-space: nowrap;
    transition: border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.nav-login-link > span::after {
    display: none;
}

/* Letter-spacing adds its gap AFTER every character, including the last
   one — so a centered flex box ends up with extra invisible space on the
   right only, making the visible letters sit left of true center. This
   pulls that trailing gap back in so the text looks properly centered. */
.nav-login-link > span {
    margin-right: -0.06em;
}

.nav-login-link:hover {
    border-color: var(--gold-2);
    box-shadow: 0 0 16px rgba(201, 154, 74, 0.25);
    color: var(--gold-1) !important;
}

/* CTA — gold-to-blue gradient border with fill sweep on hover */
.btn-cta.nav-btn {
    position: relative;
    margin-left: 10px;
    padding: 9px 24px !important;
    border-radius: 999px;
    color: var(--text-main) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    white-space: nowrap; /* Stops "CREATE ACCOUNT" from wrapping and turning the pill into a lopsided blob */
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(var(--nav-bg-scrolled), var(--nav-bg-scrolled)) padding-box,
                linear-gradient(120deg, var(--gold-1), var(--blue-2)) border-box;
    border: 1px solid transparent;
    /* index.php also loads home.css, which has its own generic .btn-cta
       class with an orange box-shadow. That rule isn't specific enough to
       override the background/padding/radius below, but box-shadow was
       never redeclared here, so it was leaking through. Reset it. */
    box-shadow: none;
    transition: box-shadow 0.4s ease, transform 0.25s ease;
}

.btn-cta.nav-btn > span::after {
    display: none;
}

/* Same trailing letter-spacing compensation as the login pill, so
   "CREATE ACCOUNT" reads as genuinely centered, not just box-centered. */
.btn-cta.nav-btn > span {
    margin-right: -0.06em;
}

.btn-cta.nav-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, var(--gold-2), var(--blue-2), var(--gold-1));
    background-size: 220% 220%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.btn-cta.nav-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.65s ease;
}

.btn-cta.nav-btn:hover {
    box-shadow: 0 6px 24px rgba(111, 211, 255, 0.25), 0 6px 24px rgba(245, 220, 160, 0.18);
    transform: translateY(-1px);
}

.btn-cta.nav-btn:hover::before {
    opacity: 1;
}

.btn-cta.nav-btn:hover::after {
    left: 130%;
}

/* Mobile toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative; /* z-index does nothing without this — was
                            invisible, sitting behind the open panel */
    z-index: 3; /* above .nav-links (2), so the X stays clickable/visible
                   once the panel slides over it */
    padding: 0;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg, var(--gold-1), var(--blue-1));
    border-radius: 2px;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
    .menu-toggle {
        display: flex;
    }

    /* Desktop uses 32px side padding; on phones that pushes the logo
       noticeably inward from the edge, so tighten it up here. The
       scrolled-state rule below is more specific than the base one, so
       it needs its own mobile override too, or it'll win on scroll. */
    .nav-container {
        padding: 14px 16px;
    }

    .navbar.scrolled .nav-container {
        padding: 10px 16px;
    }

    /* Dimmed, blurred scrim behind the mobile menu — covers the full
       viewport so hero content can never bleed through the open panel */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(3, 4, 10, 0.55);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
        z-index: 1;
    }

    .nav-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        height: 100dvh;
        width: min(78vw, 340px);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 6px;
        padding: 100px 24px 40px;
        background: rgba(8, 9, 18, 0.98);
        backdrop-filter: blur(22px) saturate(160%);
        -webkit-backdrop-filter: blur(22px) saturate(160%);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: -20px 0 50px rgba(0, 0, 0, 0.45);
        transform: translateX(100%);
        transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2;
        overflow-y: auto;
    }

    .nav-links.open {
        transform: translateX(0);
    }

    /* Rows are glass pills instead of a plain divided list — no more
       flat hairlines between items */
    .nav-links a {
        width: 100%;
        padding: 14px 16px;
        font-size: 14px;
        border-bottom: none;
        border-radius: 12px;
        position: relative;
        opacity: 0;
        transform: translateX(16px);
        transition: opacity 0.4s ease, transform 0.4s ease,
                    background 0.3s ease, padding-left 0.3s ease;
    }

    /* The desktop underline-sweep under each word doesn't read well on a
       stacked touch list, so swap it for a left accent bar instead */
    .nav-links a > span::after {
        display: none;
    }

    .nav-links a::before {
        content: '';
        position: absolute;
        left: 4px;
        top: 50%;
        width: 3px;
        height: 0%;
        transform: translateY(-50%);
        background: linear-gradient(180deg, var(--gold-1), var(--blue-1));
        border-radius: 3px;
        transition: height 0.3s ease;
    }

    .nav-links a:hover,
    .nav-links a:active {
        background: rgba(255, 255, 255, 0.05);
        padding-left: 22px;
    }

    .nav-links a:hover::before,
    .nav-links a.active::before {
        height: 55%;
    }

    .nav-links a.active {
        background: rgba(255, 255, 255, 0.04);
        padding-left: 22px;
    }

    /* Staggered entrance as the panel slides open */
    .nav-links.open a:nth-child(1) { transition-delay: 0.08s; }
    .nav-links.open a:nth-child(2) { transition-delay: 0.14s; }
    .nav-links.open a:nth-child(3) { transition-delay: 0.20s; }
    .nav-links.open a:nth-child(4) { transition-delay: 0.26s; }
    .nav-links.open a:nth-child(5) { transition-delay: 0.32s; }

    .nav-links.open a {
        opacity: 1;
        transform: translateX(0);
    }

    /* One clean separator above the auth buttons, replacing the old
       per-item dividers */
    .nav-login-link,
    .btn-cta.nav-btn {
        margin-left: 0;
        margin-top: 12px;
        width: 100%;
        justify-content: center;
        border-bottom: none;
    }

    .nav-login-link {
        margin-top: 20px;
        padding-top: 20px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0;
    }

    .nav-login-link::before {
        display: none; /* the login pill doesn't need the row accent bar */
    }
}

/* Locks background scrolling while the mobile menu is open, so the page
   behind the panel can't shift or peek through as the user scrolls */
body.nav-open {
    overflow: hidden;
}
/* Narrow phones (≤380px, e.g. iPhone SE, folded foldables): the 78vw
   panel leaves less room, so tighten padding/letter-spacing enough to
   guarantee "CREATE ACCOUNT" always fits on a single line. */
@media (max-width: 380px) {
    .nav-links {
        padding-left: 24px;
        padding-right: 24px;
        width: min(84vw, 320px);
    }

    .nav-login-link,
    .btn-cta.nav-btn {
        padding: 9px 14px !important;
        font-size: 12.5px;
        letter-spacing: 0.03em;
    }
}