function CTABanner() {
  return (
    <section id="cta-banner" style={{
      position: 'relative',
      overflow: 'hidden',
      padding: 'clamp(80px, 12vw, 160px) 0',
      background: 'var(--nebula-deep)',
      borderTop: '1px solid rgba(0,200,224,0.08)',
      borderBottom: '1px solid rgba(0,200,224,0.08)',
    }}>
      <div className="cta-blob blob-1" />
      <div className="cta-blob blob-2" />
      <div className="cta-stars" />

      <div className="container" style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
        <div className="reveal"><span className="eyebrow">≫ READY TO LAUNCH?</span></div>
        <h2 className="reveal" data-delay="1" style={{
          fontFamily: 'Orbitron, sans-serif',
          fontSize: 'clamp(34px, 5.6vw, 64px)',
          marginTop: 22, marginBottom: 22,
          color: 'var(--stardust-white)',
          lineHeight: 1.1,
          letterSpacing: '-0.01em',
          textWrap: 'balance',
        }}>
          Ready to Build<br /> Something Powerful?
        </h2>
        <p className="reveal" data-delay="2" style={{
          fontFamily: 'Syne, sans-serif',
          fontSize: 'clamp(15px, 1.5vw, 20px)',
          color: 'var(--asteroid-grey)',
          marginBottom: 40,
          maxWidth: 580, margin: '0 auto 40px',
          lineHeight: 1.7,
        }}>
          Let's create something extraordinary together — kickoff calls available within 48 hours of inquiry.
        </p>
        <div className="reveal" data-delay="3" style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
          <a href="#contact" className="btn-primary" onClick={(e)=>{e.preventDefault(); document.getElementById('contact').scrollIntoView({behavior:'smooth'});}} style={{ padding: '20px 48px', fontSize: 18 }}>
            <IconArrowRight size={20} /> Start a Project
          </a>
          <div style={{
            display: 'flex', gap: 18, alignItems: 'center',
            fontFamily: 'Space Mono', fontSize: 11, letterSpacing: '0.18em',
            color: 'var(--asteroid-grey)',
          }}>
            <span>≫ 24H REPLY</span>
            <span style={{ opacity: 0.3 }}>·</span>
            <span>≫ NO COMMITMENT</span>
            <span style={{ opacity: 0.3 }}>·</span>
            <span>≫ FREE DISCOVERY</span>
          </div>
        </div>
      </div>

      <style>{`
        .cta-blob {
          position: absolute;
          border-radius: 50%;
          filter: blur(80px);
          pointer-events: none;
        }
        .blob-1 {
          width: 600px; height: 600px;
          background: radial-gradient(circle, rgba(0,200,224,0.18), transparent 70%);
          top: -100px; left: -100px;
          animation: blob-float 24s infinite ease-in-out;
        }
        .blob-2 {
          width: 500px; height: 500px;
          background: radial-gradient(circle, rgba(108,58,255,0.16), transparent 70%);
          bottom: -120px; right: -120px;
          animation: blob-float2 30s infinite ease-in-out;
        }
        @keyframes blob-float {
          0%, 100% { transform: translate(0, 0); }
          25% { transform: translate(40%, 20%); }
          50% { transform: translate(80%, 60%); }
          75% { transform: translate(20%, 80%); }
        }
        @keyframes blob-float2 {
          0%, 100% { transform: translate(0, 0); }
          33% { transform: translate(-30%, -40%); }
          66% { transform: translate(-60%, 20%); }
        }
        .cta-stars {
          position: absolute; inset: 0;
          background-image:
            radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.6), transparent),
            radial-gradient(1px 1px at 80% 50%, rgba(0,200,224,0.7), transparent),
            radial-gradient(1px 1px at 50% 70%, rgba(255,255,255,0.5), transparent),
            radial-gradient(1.5px 1.5px at 30% 80%, rgba(108,58,255,0.6), transparent),
            radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.4), transparent);
          background-size: 600px 600px;
          opacity: 0.7;
          pointer-events: none;
        }
      `}</style>
    </section>
  );
}

window.CTABanner = CTABanner;