<!-- ============================================
     BLOCO 01 — HEADER / NAVEGAÇÃO
     ============================================ -->

<style>
  .s2e-header { width: 100%; box-sizing: border-box; }
  .s2e-header *, .s2e-header *::before, .s2e-header *::after { box-sizing: border-box; }
  .s2e-header-inner {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10, 22, 40, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  }
  .s2e-header-nav {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    height: 72px; padding: 0 24px;
    font-family: 'Inter', sans-serif;
  }
  .s2e-header-logo {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Fraunces', serif;
    font-weight: 700; font-size: 1.4rem;
    color: #f1f5f9; text-decoration: none;
    letter-spacing: -0.02em;
  }
  .s2e-header-mark {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #00d4aa, #00b894);
    border-radius: 10px;
    display: grid; place-items: center;
    color: #052e25; font-weight: 800;
    font-family: 'Inter', sans-serif; font-size: 1rem;
  }
  .s2e-header-links {
    display: flex; gap: 32px; list-style: none;
    margin: 0; padding: 0;
  }
  .s2e-header-links a {
    font-size: 0.93rem; font-weight: 500;
    color: #cbd5e1; text-decoration: none;
    transition: color 0.2s;
  }
  .s2e-header-links a:hover { color: #00d4aa; }
  .s2e-header-cta {
    display: none;
    padding: 12px 24px; border-radius: 999px;
    background: linear-gradient(135deg, #00d4aa, #00b894);
    color: #052e25; font-weight: 600; font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 212, 170, 0.3);
    transition: transform 0.2s;
  }
  .s2e-header-cta:hover { transform: translateY(-2px); }
  .s2e-header-toggle {
    display: none;
    background: none; border: none;
    color: #f1f5f9; font-size: 1.5rem; cursor: pointer;
  }
  @media (min-width: 880px) { .s2e-header-cta { display: inline-flex; align-items: center; } }
  @media (max-width: 879px) {
    .s2e-header-links { display: none; }
    .s2e-header-toggle { display: block; }
    .s2e-header-links.s2e-open {
      display: flex; position: absolute;
      top: 72px; left: 0; right: 0;
      flex-direction: column;
      background: #0f1e35;
      padding: 24px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    }
  }
</style>

<div class="s2e-header">
  <div class="s2e-header-inner">
    <nav class="s2e-header-nav">
      <a href="#" class="s2e-header-logo">
        <span class="s2e-header-mark">2E</span>
        2Easy <span style="color: #00d4aa;">Insurance</span>
      </a>
      <ul class="s2e-header-links" id="s2eHeaderLinks">
        <li><a href="#como-funciona">Como Funciona</a></li>
        <li><a href="#calculadora">Calculadora</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a href="#cta">Revisão Gratuita</a></li>
      </ul>
      <a href="https://wa.me/13213441199?text=Ol%C3%A1%21%20Quero%20uma%20revis%C3%A3o%20gratuita%20do%20meu%20plano%20para%20o%20Prop%2022%20Healthcare%20Stipend." target="_blank" rel="noopener" class="s2e-header-cta">Revisão Gratuita</a>
      <button class="s2e-header-toggle" id="s2eHeaderToggle" aria-label="Menu">☰</button>
    </nav>
  </div>
</div>

<script>
(function() {
  var toggle = document.getElementById('s2eHeaderToggle');
  var links = document.getElementById('s2eHeaderLinks');
  if (!toggle || !links) return;
  toggle.addEventListener('click', function() { links.classList.toggle('s2e-open'); });
  var anchors = links.querySelectorAll('a');
  for (var i = 0; i < anchors.length; i++) {
    anchors[i].addEventListener('click', function() { links.classList.remove('s2e-open'); });
  }
})();
</script>