/* Destroys any rogue browser-injected vertical margin below the footer bar */
#social-bar {
    margin-bottom: -32px !important;
   
}

.navbar {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
/* Custom Dropdown Styling */
.hs-dropdown-parent {
    position: relative;
}
.hs-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 10px 0;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    z-index: 1000;
}
.hs-dropdown-menu.brands-menu {
    min-width: 320px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 12px;
    gap: 4px;
}
.hs-dropdown-parent:hover .hs-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.hs-dropdown-item {
    display: block;
    padding: 8px 16px;
    color: #4b5563;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s;
}
.hs-dropdown-item:hover, .hs-dropdown-item:active {
    background: rgba(0, 92, 41, 0.05) !important;
    color: #005c29 !important;
    transform: translateX(4px);
}

/* Floating Navbar Pill Style */
#main-header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 5000;
    transition: transform 0.1s ease, top 0.1s ease, max-width 0.1s ease, border-radius 0.1s ease, background 0.1s ease;
    max-width: 100%;
}

#main-header.is-floating {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 850px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

#main-header.is-floating .container-xl {
    width: auto;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    min-height: 60px !important;
    transition: min-height 0.1s;
}



#main-header.nav-hidden {
    transform: translateY(-150%) translateX(-50%);
    /* If not floating, we don't want translateX(-50%) but we handle it via combined classes */
}
#main-header.nav-hidden:not(.is-floating) {
    transform: translateY(-100%);
}

/* Animated Underline for Nav Links */
.hs-nav-link {
    position: relative;
    display: inline-block;
}
.hs-nav-link:hover {
    background: transparent !important;
}
.hs-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hs-nav-link:hover::after,
.hs-nav-link.active::after {
    width: 100%;
}

/* Scroll To Top Button */
#scroll-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 4000;
}
#scroll-to-top-btn:hover {
    background: #005c29;
    transform: translateY(15px);
    box-shadow: 0 8px 25px rgba(0, 92, 41, 0.4);
}
#scroll-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#scroll-to-top-btn:hover.visible {
    transform: translateY(-5px);
}

/* Mobile Navigation Fixes */
@media (max-width: 991px) {
    /* 1. Normal navbar for mobile/tablet (disable floating pill shape) */
    #main-header.is-floating {
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        left: 0 !important;
        transform: none !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
    }
    
    #main-header.is-floating .container-xl {
        width: 100% !important;
    }

    /* 2. Absolute positioned dropdown to prevent pushing links down */
    .hs-dropdown-menu {
        display: block !important; /* Ensure it's not hidden by display:none from previous injection */
        z-index: 6000 !important;
        left: 0 !important;
        transform: translateY(10px) !important;
        width: calc(100vw - 40px) !important; /* Full width of screen minus padding */
        min-width: unset !important;
    }
    
    .hs-dropdown-parent:hover .hs-dropdown-menu,
    .hs-dropdown-parent.mobile-open .hs-dropdown-menu {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* 3. Fix colors for mobile dropdown items */
    .hs-dropdown-item {
        color: #4b5563 !important;
        font-size: 1rem !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    .hs-dropdown-item:active, .hs-dropdown-item:focus {
        color: #005c29 !important;
        background: rgba(0, 92, 41, 0.05) !important;
    }
}


/* Centers application items perfectly side-by-side without vertical stacking */
.applications-grid.apps-centered {
    display: flex !important;
    flex-direction: row !important;
    /* Forces side-by-side alignment */
    justify-content: center !important;
    /* Centers elements horizontally */
    align-items: center !important;
    /* Centers elements vertically */
    gap: 24px;
    /* Keeps uniform spacing between cards */
    overflow-x: visible !important;
    /* Disables unwanted scrollbar regions */
    width: 100% !important;
    flex-wrap: nowrap !important;
    /* Prevents rows from wrapping downwards */
}

/* Ensures individual cards retain their correct dimensions when centered */
.applications-grid.apps-centered .app-card {
    flex: 0 0 auto !important;
    /* Prevents the items from squishing or shrinking */
    width: 190px;
    /* Adjust this value to match your standard app-card width */
}

/* ==========================================================================
   CRITICAL: Prevent GSAP Animation Jumping (FOUC)
   ========================================================================== */
.anim-fade-up,
.reveal,
.anim-fade-left,
.reveal-left,
.anim-fade-right,
.reveal-right,
.anim-scale-up,
.anim-stagger-group>* {
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
}

/* ==========================================================================
   PREMIUM ANIMATION HOVER LOCK
   Disables native CSS hover transformations while GSAP reveal is running
   ========================================================================== */
.card-reveal-wrapper > .product-card,
.card-reveal-wrapper > .download-card,
.card-reveal-wrapper > .app-card,
.card-reveal-wrapper > .brand-product-card,
.anim-fade-up > .node-card {
    pointer-events: none;
}

.card-reveal-wrapper.reveal-complete > .product-card,
.card-reveal-wrapper.reveal-complete > .download-card,
.card-reveal-wrapper.reveal-complete > .app-card,
.card-reveal-wrapper.reveal-complete > .brand-product-card,
.anim-fade-up.reveal-complete > .node-card {
    pointer-events: auto;
}









#main-header.is-floating .header-logo { display: none; transition: height 0.1s; }


/* GLOBALLY FORCE BUTTON TEXT TO BLACK */
.btn-hs-primary, 
.btn-hs-primary:hover, 
.btn-hs-primary-lg, 
.btn-hs-primary-lg:hover, 
.btn-primary, 
.btn-primary:hover, 
.btn-primary-large, 
.btn-primary-large:hover {
    color: #000 !important;
}