// Header — full-width, brand left, CTA right
function Header() {
  return (
    <header style={{
      padding:'16px 0',
      background:'rgba(255,255,255,0.92)',
      backdropFilter:'blur(10px)',
      borderBottom:'1px solid rgba(0,0,0,0.06)',
      position:'sticky',
      top:0,
      zIndex:50,
    }}>
      <div style={{
        width:'100%',
        padding:'0 32px',
        display:'flex',
        alignItems:'center',
        justifyContent:'space-between',
        gap:16,
        boxSizing:'border-box',
      }}>
        <a href="#" className="brand">
          <span className="brand-mark">IQ</span>
          <span>OfferIQ</span>
          <span className="brand-by">by Extendly</span>
        </a>
        <a href="#submission" className="btn btn-primary" style={{padding:'10px 22px',fontSize:13.5,whiteSpace:'nowrap'}}>Submit a packet</a>
      </div>
    </header>
  );
}
window.Header = Header;