/* =========================================================
   NAVBAR
========================================================= */
/* =========================================================
   NAVBAR
========================================================= */

.navbar-wrapper {
    position: fixed;
    top: 24px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding-inline: 24px;
    mix-blend-mode: normal;

}

.navbar {

    width: 78%;
    max-width: 1080px;

    margin-inline: auto;

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

    padding: 0.42rem 1rem;

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

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

    background: var(--surface-primary);

    backdrop-filter: blur(18px);

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

    transition:
        width 900ms cubic-bezier(.22, 1, .36, 1),
        max-width 900ms cubic-bezier(.22, 1, .36, 1),
        padding 700ms cubic-bezier(.22, 1, .36, 1),
        background 500ms ease,
        transform 500ms ease,
        box-shadow 500ms ease;

}

[data-theme="dark"] .navbar {

    border:
        1px solid rgba(255, 255, 255, 0.06);
    background: rgba(12, 12, 12, 0.82);

}

.navbar.navbar-scrolled {

    width: 94%;
    max-width: 1320px;
    padding: 1rem 1.2rem;
    background: var(--surface-secondary);

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.06);

}

.navbar-left,
.navbar-center,
.navbar-right {
    display: flex;
    align-items: center;
}

.navbar-center {
    gap: 32px;
}

.navbar-right {
    gap: 16px;
}

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

.logo {
    display: flex;
    align-items: center;

    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.05em;
}

.logo-dot {
    color: var(--accent-primary);
    opacity: 0.9;
    filter: drop-shadow(0 0 10px rgba(198, 124, 78, 0.35));
}

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

.nav-link {
    position: relative;

    color: var(--text-secondary);

    font-size: 0.95rem;
    font-weight: 500;

    padding-bottom: 2px;

    transition:
        color var(--transition-medium),
        text-shadow var(--transition-medium);
}

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 2px;

    border-radius: 999px;

    background: var(--accent-primary);
    box-shadow: 0 0 8px rgba(198, 124, 78, 0.5);

    transform: scaleX(0);

    transform-origin: center;

    opacity: 0;

    transition:
        transform 600ms cubic-bezier(.16, 1, .3, 1),
        opacity 600ms ease;

}

.nav-link:hover {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .nav-link:hover {
    color: rgba(0, 0, 0, 0.9);
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

.nav-link:hover::after {

    transform: scaleX(1);

    opacity: 1;

}

/* =========================================================
   THEME TOGGLE
========================================================= */

.theme-toggle {
    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: var(--surface-secondary);

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

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.theme-toggle:hover {
    transform: translateY(-2px);
}

/* =========================================================
   BUTTONS
========================================================= */

.btn {
    position: relative;

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

    padding: 8px 18px;

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

    font-size: 0.96rem;
    font-weight: 500;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border var(--transition-fast),
        color var(--transition-fast),
        opacity var(--transition-fast);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {

    background: var(--text-primary);
    color: var(--bg-primary);

    padding: 12px 24px;
    font-weight: 600;

    overflow: hidden;
}

.btn-primary:hover {

    background: var(--accent-primary);

    color: #ffffff;

}

.btn-secondary {
    border: 1px solid var(--border-primary);

    background: var(--surface-primary);
    opacity: 0.7;
}

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

.mobile-menu-btn {
    display: none;

    width: 48px;
    height: 48px;

    position: relative;
}

.mobile-menu-btn span {
    position: absolute;

    width: 24px;
    height: 1.5px;

    background: var(--text-primary);

    left: 50%;

    transform: translateX(-50%);

    transition: all var(--transition-fast);
}

.mobile-menu-btn span:nth-child(1) {
    top: 18px;
}

.mobile-menu-btn span:nth-child(2) {
    top: 28px;
}

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

.mobile-menu {

    position: fixed;

    top: 76px;
    left: 50%;

    transform:
        translateX(-50%) translateY(-14px) scale(0.98);

    width: 94%;

    padding: 14px;

    border-radius: 22px;

    background: var(--surface-secondary);

    backdrop-filter: blur(28px);

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

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 400ms ease,
        transform 500ms cubic-bezier(.22, 1, .36, 1),
        visibility 400ms ease;

    z-index: 1001;

}

.mobile-menu.active {

    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%) translateY(0px) scale(1);

}

.mobile-menu-content {

    display: flex;
    flex-direction: column;

    gap: 6px;

}

.mobile-link {

    padding: 14px 8px;

    border-radius: 14px;

    color: var(--text-secondary);

    font-size: 1rem;
    font-weight: 500;

    transition:
        background 300ms ease,
        color 300ms ease,
        transform 300ms ease;

}

.mobile-link:hover {
    color: var(--text-primary);
    background:
        rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.mobile-cta {
    margin-top: 10px;
}

@media (max-width:768px) {
    .navbar {

        width: 94%;
        max-width: none;

        padding: 0.45rem 1rem;

    }

    .navbar-right .btn-primary {
        display: none;
    }

    .theme-toggle {
        display: none;
    }

    .logo {
        font-size: 0.95rem;
    }

    .mobile-menu-btn {
        width: 42px;
        height: 42px;
    }

    .navbar-center,
    .nav-link {
        display: none;
    }

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

    :root {
        --container-padding: 22px;
    }

    .navbar {
        padding: 16px 18px;
    }

    .btn-primary {
        display: none;
    }



    }

/* Responsive */
@media (max-width:1024px) { .navbar-right { display: none; } .navbar-center { display: none; } .mobile-menu-btn { display: block; } }