<style>

/* ========== HEADER TRANSITION STYLES ========== */
header {
    transition: background-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* Smooth color transitions for header elements */
header a[href="index.html"],
header nav ul>li>div>div[style*="color"],
header nav ul>li>div>div[style*="color"] div,
header nav ul>li>div>div[style*="color"] svg,
header a[href*="login"]:not(:has(button)) {
    transition: color 0.4s ease !important;
}

/* ========== SCROLLED STATE (all screen sizes) ========== */
/* Only affects Header 1 (transparent hero pages) */
header.header-scrolled:not(.header-light) {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Logo image switching based on scroll state */
header .header-logo-light {
    display: block;
}

header .header-logo-dark {
    display: none;
}

header.header-scrolled .header-logo-light {
    display: none;
}

header.header-scrolled .header-logo-dark {
    display: block;
}

/* When mobile menu is open, ALWAYS show dark logo (white sidebar bg) */
header.mobile-menu-open .header-logo-light {
    display: none !important;
}

header.mobile-menu-open .header-logo-dark {
    display: block !important;
}

/* ============================================================
   HEADER TYPE 2 - LIGHT BACKGROUND (header-light)
   For pages like contact, faq, governance etc.
   Always dark text, dark logo, white bg, blue underlines.
   ============================================================ */

/* Always white background, subtle shadow */
header.header-light {
    background-color: #ffffff !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* Always show dark logo, hide light logo */
header.header-light .header-logo-light {
    display: none !important;
}

header.header-light .header-logo-dark {
    display: block !important;
}

/* Desktop nav text always dark */
@media (min-width: 768px) {
    header.header-light nav ul>li>div>div[style*="color"] {
        color: #302F2D !important;
    }

    header.header-light nav ul>li>div>div[style*="color"] div {
        color: #302F2D !important;
    }

    header.header-light nav ul>li>div>div[style*="color"] svg {
        color: #302F2D !important;
    }

    /* Desktop Login text always dark */
    header.header-light div[class*="md:inline-flex"]>a[href*="login"]:not(:has(button)) {
        color: #302F2D !important;
    }
}

/* Underline always blue on header-light */
header.header-light nav div.absolute.bottom-0[class*="h-0"] {
    background-color: #2563EB !important;
}

/* Mobile hamburger always dark */
header.header-light button[data-collapse-toggle],
header.header-light button[data-collapse-toggle] svg {
    color: #302F2D !important;
}

/* Mobile login always dark */
header.header-light .flex.flex-row.items-center a[href*="login"] {
    color: #302F2D !important;
}

/* ============================================================
   END HEADER TYPE 2
   ============================================================ */

/* ========== MOBILE SCROLLED STATE ========== */
@media (max-width: 767px) {

    /* Mobile hamburger turns dark when scrolled */
    header.header-scrolled button[data-collapse-toggle] {
        color: #302F2D !important;
    }

    /* Mobile login text turns dark when scrolled */
    header.header-scrolled .flex.flex-row.items-center a[href*="login"] {
        color: #302F2D !important;
    }
}

/* ========== DESKTOP SCROLLED STATE ========== */
@media (min-width: 768px) {

    /* Nav items (Invest, Resources, Company) turn dark */
    header.header-scrolled nav ul>li>div>div[style*="color"] {
        color: #302F2D !important;
    }

    header.header-scrolled nav ul>li>div>div[style*="color"] div {
        color: #302F2D !important;
    }

    header.header-scrolled nav ul>li>div>div[style*="color"] svg {
        color: #302F2D !important;
    }

    /* Desktop Login text turns dark (but NOT the button inside) */
    header.header-scrolled div[class*="md:inline-flex"]>a[href*="login"]:not(:has(button)) {
        color: #302F2D !important;
    }
}

/* ========== MOBILE MENU OPEN STATE ========== */
/* When mobile sidebar is open, these elements need dark text */
header.mobile-menu-open a[href="index.html"] {
    color: #302F2D !important;
}

header.mobile-menu-open .flex.flex-row.items-center a[href*="login"] {
    color: #302F2D !important;
}

/* Hamburger/close button turns dark when menu is open */
header.mobile-menu-open button[data-collapse-toggle],
header.mobile-menu-open button[data-collapse-toggle] svg {
    color: #302F2D !important;
}

/* Mobile sidebar nav text and icons are always dark (white bg) */
@media (max-width: 767px) {

    header .z-40.fixed nav .cursor-pointer>div:first-child,
    header .z-40.fixed nav .text-2xl {
        color: #302F2D !important;
    }

    /* Dropdown arrow icons */
    header .z-40.fixed nav .cursor-pointer svg {
        color: #302F2D !important;
    }
}

/* ========== HEADER TOP BAR PADDING (mobile/tablet only) ========== */
/* The inline style padding:6px 16px must NOT apply on desktop (md+) */
@media (min-width: 768px) {
    header>div>div.flex.justify-between.items-center.z-50 {
        padding: 0 !important;
    }
}

/* ========== DROPDOWN CONTENT (always white bg) ========== */
header nav .flex.overflow-hidden a,
header nav .flex.overflow-hidden .font-semibold,
header nav .flex.overflow-hidden .text-sm {
    color: #302F2D !important;
}

header nav .flex.overflow-hidden .text-gray-500,
header nav .flex.overflow-hidden .text-xs {
    color: #6B7280 !important;
}

header nav .flex.overflow-hidden .text-neon-blue {
    color: #2563EB !important;
}

/* ========== BUTTONS ALWAYS WHITE TEXT ========== */
/* Create account buttons should NEVER change - always white on blue */
header button.bg-neon-blue {
    color: white !important;
}

/* ========== DROPDOWN ANIMATIONS ========== */
/* Smooth height transition for dropdowns */
header nav .flex.overflow-hidden {
    transition: height 0.4s ease-in-out !important;
}

/* Blue underline indicator animation */
header nav div.absolute.bottom-0[class*="h-0"] {
    transition: width 0.4s ease-in-out !important;
    background-color: #2563EB !important;
}

/* When header is scrolled, underline should be blue (visible on white bg) */
header.header-scrolled nav div.absolute.bottom-0[class*="h-0"] {
    background-color: #2563EB !important;
}

/* When Header 1 is NOT scrolled (transparent), underline should be white */
/* Exclude header-light (Header 2) which always uses blue underlines */
header:not(.header-scrolled):not(.header-light) nav div.absolute.bottom-0[class*="h-0"] {
    background-color: white !important;
}

/* Mobile dropdown content animation */
@media (max-width: 767px) {
    header nav .flex.overflow-hidden {
        transition: height 0.4s ease-in-out !important;
    }

    /* Ensure mobile dropdown content is properly styled */
    header .z-40.fixed nav .flex.overflow-hidden {
        background-color: white;
    }
}

/* Desktop dropdown shadow and styling */
@media (min-width: 768px) {

    header nav .flex.overflow-hidden[style*="height: auto"],
    header nav .flex.overflow-hidden:not([style*="height: 0"]):not([style*="height:0"]) {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
}