function Hero() {
  return (
    <section id="inicio" style={{ position: 'relative', padding: '160px 24px 96px', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 10 }}>
        <div style={{ marginBottom: 32 }}>
          <Eyebrow pill>Digital Solution</Eyebrow>
        </div>
        <h1 style={{
          fontFamily: 'var(--font-sans)',
          fontSize: 'clamp(2.75rem, 7vw, 6rem)',
          fontWeight: 900,
          lineHeight: 1.05,
          letterSpacing: '-0.03em',
          margin: '0 0 32px',
          color: 'var(--fg-1)',
        }}>
          Sua empresa é referência.<br />
          <span style={{
            background: 'linear-gradient(90deg, #6ee7a8, #22c55e 55%, #34d17e)',
            WebkitBackgroundClip: 'text',
            backgroundClip: 'text',
            color: 'transparent',
          }}>
            Mas ela é visível?
          </span>
        </h1>
        <p style={{
          maxWidth: 640, margin: '0 auto 48px',
          color: 'var(--fg-3)',
          fontSize: 19, fontWeight: 300, lineHeight: 1.6,
        }}>
          Transformamos a sua presença no Google em faturamento real. Sites profissionais,
          ultra-velozes e otimizados para conversão em até 48 horas.
        </p>
        <div style={{ display: 'flex', gap: 20, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button href="#precos" variant="primary">Ver Planos e Preços</Button>
          <Button href="https://wa.me/5511996149633" variant="secondary">Consultoria</Button>
        </div>
      </div>
      {/* green glow */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        transform: 'translate(-50%,-50%)',
        width: 800, height: 400,
        background: 'rgba(34,197,94,0.10)',
        filter: 'blur(120px)',
        borderRadius: '50%',
        zIndex: 0,
        pointerEvents: 'none',
      }} />
    </section>
  );
}
window.Hero = Hero;