<a class="skip-link" href="#main-content">Skip to content</a>
<div class="custom-cursor" data-cursor aria-hidden="true"></div>
<div class="reading-progress" data-reading-progress></div>

<header class="site-header <%= typeof heroDark !== 'undefined' && heroDark ? 'on-dark' : 'site-header--solid' %>" data-site-header>
  <div class="container site-header__inner">
    <a href="/" class="brand" data-cursor-hover>
      <img src="/images/logo.png" alt="Kubera Wealth Management" class="brand__logo" />
      <span class="brand__word">Kubera Wealth Management</span>
    </a>

    <nav class="main-nav" aria-label="Primary">
      <ul class="main-nav__list">
        <li><a class="main-nav__link <%= page === 'portfolio' ? 'is-active' : '' %>" href="/portfolio">Portfolio</a></li>
        <li><a class="main-nav__link <%= page === 'thesis' ? 'is-active' : '' %>" href="/thesis">Thesis</a></li>
        <li><a class="main-nav__link <%= page === 'insights' ? 'is-active' : '' %>" href="/insights">Insights</a></li>
        <li class="has-mega">
          <a class="main-nav__link" href="/team">Company</a>
          <div class="mega-menu">
            <a class="mega-menu__item" href="/team" data-cursor-hover>
              <span class="icon">👥</span>
              <span><strong>Team</strong><span class="desc">Meet the partners</span></span>
            </a>
            <a class="mega-menu__item" href="/careers" data-cursor-hover>
              <span class="icon">💼</span>
              <span><strong>Careers</strong><span class="desc">Open positions</span></span>
            </a>
            <a class="mega-menu__item" href="/events" data-cursor-hover>
              <span class="icon">📅</span>
              <span><strong>Events</strong><span class="desc">Upcoming & past</span></span>
            </a>
            <a class="mega-menu__item" href="/contact" data-cursor-hover>
              <span class="icon">✉️</span>
              <span><strong>Contact</strong><span class="desc">Get in touch</span></span>
            </a>
          </div>
        </li>
      </ul>
    </nav>

    <div class="header-actions">
      <button class="theme-toggle" data-theme-toggle aria-label="Toggle dark mode">
        <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
        <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
      </button>
      <a href="/apply" class="btn btn-outline" data-cursor-hover>Apply for Funding</a>
      <a href="/contact" class="btn btn-primary" data-cursor-hover>Invest With Us</a>
      <button class="nav-toggle" data-nav-toggle aria-label="Open menu" aria-expanded="false">
        <span></span><span></span><span></span>
      </button>
    </div>
  </div>
</header>

<div class="mobile-nav" data-mobile-nav>
  <ul class="mobile-nav__list">
    <li><a href="/portfolio">Portfolio</a></li>
    <li><a href="/thesis">Thesis</a></li>
    <li><a href="/insights">Insights</a></li>
    <li><a href="/team">Team</a></li>
    <li><a href="/careers">Careers</a></li>
    <li><a href="/events">Events</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
  <div class="mobile-nav__actions">
    <a href="/apply" class="btn btn-outline btn-block">Apply for Funding</a>
    <a href="/contact" class="btn btn-primary btn-block">Invest With Us</a>
  </div>
</div>
