:root {
    --navbar-width-normal: 72rem;
    /* max-w-6xl */
    --navbar-width-scrolled: 56rem;
    /* max-w-4xl */
    --navbar-transition: all 0.3s ease;
    --glass-border: 1px solid rgba(255, 255, 255, 0.2);
    --glass-bg: rgba(255, 255, 255, 0.5);
    --primary-color: #4F46E5;
}

/* Glass Filter SVG needs to be in HTML, but here are the styles referencing it */

/* Navbar Container */
.glass-nav-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    padding: 0.5rem;
    pointer-events: none;
    /* Let clicks pass through the full width wrapper */
}

.glass-nav-inner {
    pointer-events: auto;
    margin: 0.5rem auto 0;
    width: 100%;
    max-width: var(--navbar-width-normal);
    padding: 0.4rem 1.25rem;
    transition: var(--navbar-transition);
    display: flex;
    flex-direction: column;
    /* Visible Glass Background by default */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 231, 235, 0.5);
    border-radius: 9999px;
    /* Pill shape for navbar logic typically used in modern designs */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
}

/* Scrolled State */
.glass-nav-container.scrolled .glass-nav-inner {
    max-width: var(--navbar-width-scrolled);
    background-color: var(--glass-bg);
    border-radius: 1rem;
    /* rounded-2xl */
    border: 1px solid rgba(229, 231, 235, 0.5);
    /* border-zinc-200 equivalent */
    backdrop-filter: blur(16px);
    padding: 0.5rem 1.25rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Content Layout */
.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.05em;
    font-weight: normal;
    /* Requested change */
}

/* Desktop Menu Center */
.nav-center {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 1024px) {
    .nav-center {
        display: block;
    }
}

.nav-menu-list {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

.nav-menu-item a {
    text-decoration: none;
    color: #64748b;
    /* text-muted-foreground */
    transition: color 0.15s;
}

.nav-menu-item a:hover {
    color: #0f172a;
    /* text-accent-foreground */
}

/* Desktop Buttons Right */
.nav-right-desktop {
    display: none;
    gap: 0.75rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .nav-right-desktop {
        display: flex;
    }

    .hamburger-btn {
        display: none;
    }
}

/* Scroll logic for buttons: React code hides Login/Signup when scrolled on LG screens? 
   "isScrolled && 'lg:hidden'" -> If scrolled, hide Login/Signup, show "Get Started"
   Wait, let's checking the logic:
   Login: className={cn(isScrolled && 'lg:hidden')} -> Hidden on desktop if scrolled
   SignUp: className={cn(isScrolled && 'lg:hidden')} -> Hidden on desktop if scrolled
   Get Started: className={cn(isScrolled ? 'lg:inline-flex' : 'hidden')} -> Visible ONLY if scrolled
*/

.nav-right-desktop .btn-login,
.nav-right-desktop .btn-signup {
    display: inline-flex;
}

.nav-right-desktop .btn-get-started-scrolled {
    display: none;
}

.glass-nav-container.scrolled .nav-right-desktop .btn-login,
.glass-nav-container.scrolled .nav-right-desktop .btn-signup {
    display: none !important;
}

.glass-nav-container.scrolled .nav-right-desktop .btn-get-started-scrolled {
    display: inline-flex !important;
}


/* Mobile Menu Toggle */
.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    position: relative;
    z-index: 60;
}

/* Mobile Menu Overlay */
.mobile-menu-wrapper {
    display: none;
    /* hidden by default */
    width: 100%;
    flex-direction: column;
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: white;
    border-radius: 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.glass-nav-container.menu-active .mobile-menu-wrapper {
    display: flex;
}

@media (min-width: 1024px) {
    .mobile-menu-wrapper {
        display: none !important;
        /* Always hide on desktop structure as we use the center menu */
    }

    /* However the React code shows it: "bg-background in-data-[state=active]:block ... lg:m-0 lg:flex ..." 
       Actually the React code merges mobile and desktop container? 
       No, "lg:hidden" for the list. 
       Let's stick to standard Responsive breakdown for simplicity. */
}

/* Outline Button for Navbar */
.btn-navbar-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    background: transparent;
    transition: all 0.2s;
    color: #0f172a;
    text-decoration: none;
    height: 38px;
    /* Match liquid button height approx */
}

.btn-navbar-outline:hover {
    background-color: #f8fafc;
    color: #4F46E5;
    border-color: #4F46E5;
}

/* Liquid Glass Button Styles */
.liquid-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.375rem;
    /* rounded-md */
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: transform 0.3s;
    color: var(--primary-color);
    text-decoration: none;
    overflow: visible;
    /* Needed for absolute children */
    isolation: isolate;
}

.liquid-button:hover {
    transform: scale(1.05);
    background-color: rgba(79, 70, 229, 0.05);
    /* Slight tint on hover */
}

.liquid-button>span {
    position: relative;
    z-index: 10;
}

/* Layer 0: Shadow/Background Effects */
.liquid-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    /* rounded-full in React, but button is rounded-md? React code says "absolute... rounded-full" inside a "rounded-md" button. Interesting. */
    z-index: 0;

    /* The complex shadow from React */
    box-shadow:
        0 0 6px rgba(0, 0, 0, 0.03),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 3px 3px 0.5px -3px rgba(0, 0, 0, 0.9),
        inset -3px -3px 0.5px -3px rgba(0, 0, 0, 0.85),
        inset 1px 1px 1px -0.5px rgba(0, 0, 0, 0.6),
        inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.6),
        inset 0 0 6px 6px rgba(0, 0, 0, 0.12),
        inset 0 0 2px 2px rgba(0, 0, 0, 0.06),
        0 0 12px rgba(255, 255, 255, 0.15);
}

/* Layer -10: Glass Distortion */
.liquid-glass-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    border-radius: 0.375rem;
    /* This connects to the SVG filter */
    backdrop-filter: url("#container-glass");
}

/* Extra variants */
.btn-variant-outline {
    border: 1px solid #e2e8f0;
    background: white;
    color: #0f172a;
}

.btn-variant-outline:hover {
    background-color: #f1f5f9;
}

.btn-variant-ghost {
    background: transparent;
}

.btn-variant-ghost:hover {
    background-color: #f1f5f9;
}

/* Utility to hide/show SVG */
.hidden-svg {
    display: none;
}