function Hero() {
  return (
    <section style={{ position: 'relative', background: 'var(--navy-900)', color: '#fff', padding: '100px 40px', textAlign: 'center', overflow: 'hidden' }}>
      <div className="data-rain">
        {Array.from({ length: 24 }).map((_, i) => (
          <span key={i} className="rain-col" style={{ left: (i / 24 * 100) + '%', animationDuration: (4 + (i % 6)) + 's', animationDelay: (-(i % 8) * 0.7) + 's' }}></span>
        ))}
      </div>
      <div style={{ position: 'relative', maxWidth: 740, margin: '0 auto' }}>
        <h1 style={{ color: '#fff', fontSize: 'var(--text-4xl)', lineHeight: 'var(--leading-tight)', marginBottom: 18 }}>Technology That Works As Hard As You Do</h1>
        <p style={{ fontSize: 'var(--text-md)', color: 'rgba(255,255,255,0.82)', lineHeight: 'var(--leading-relaxed)', marginBottom: 32 }}>Opus Technology Group helps small businesses stay ahead of security threats, streamline how they work, and put the latest technology — including automation and AI — to work for them.</p>
        <a href="contact.html" style={{ textDecoration: 'none', display: 'inline-block', background: 'var(--cyan-500)', color: 'var(--navy-900)', borderRadius: 'var(--radius-md)', padding: '13px 26px', fontWeight: 'var(--weight-bold)', fontSize: 'var(--text-base)' }}>Book Your Free 60-Minute Assessment</a>
      </div>
    </section>
  );
}
window.Hero = Hero;