function App() {
  // Scroll reveal observer
  React.useEffect(() => {
    const els = document.querySelectorAll('.section, .cta-band');
    els.forEach(el => el.classList.add('reveal'));
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { rootMargin: '0px 0px -80px 0px', threshold: 0.05 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <CustomerMarquee />
      <Signals />
      <Outreach />
      <Personalization />
      <Intelligence />
      <Scale />
      <StackSwap />
      <Proof />
      <Pricing />
      <FAQ />
      {/* "Plays nice with your stack" integrations marquee — moved to the bottom;
          the customer trust bar now owns the slot under the hero. */}
      <LogoMarquee />
      <CTABand />
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);