function Hero() {
  return (
    <section style={{ padding: 'var(--space-9) var(--space-7)', display: 'flex', gap: 'var(--space-8)', alignItems: 'center', background: 'var(--surface-page)' }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--accent-strong)', marginBottom: 16 }}>Arquitetura de software · Engenharia enterprise</div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-4xl)', lineHeight: 'var(--leading-tight)', color: 'var(--text-primary)', margin: 0 }}>Sistemas de grande porte, explicados com clareza.</h1>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-lg)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-relaxed)', maxWidth: 560, marginTop: 20 }}>Marcelo Castelo Branco escreve, ensina e orienta líderes técnicos sobre arquitetura, escalabilidade e decisões de engenharia em ambientes corporativos.</p>
        <div style={{ display: 'flex', gap: 14, marginTop: 28 }}>
          <button style={{ background: 'var(--accent)', color: 'var(--ink-900)', border: 'none', borderRadius: 'var(--radius-md)', padding: '13px 26px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16, cursor: 'pointer' }}>Explorar o blog</button>
          <button style={{ background: 'transparent', color: 'var(--text-primary)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', padding: '13px 26px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16, cursor: 'pointer' }}>Agendar mentoria</button>
        </div>
      </div>
      <div style={{ width: 280, height: 280, borderRadius: '50%', background: 'var(--surface-card)', flexShrink: 0, position: 'relative', overflow: 'hidden', border: '1px solid var(--border-subtle)' }}>
        <img alt="" src="assets/logo-mark.svg" style={{ position: 'absolute', width: 460, height: 460, top: -90, left: -90, opacity: 0.08 }} />
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <img alt="" src="assets/logo-mark.svg" style={{ width: 96, height: 96 }} />
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });