// CTA — paper section, big serif claim, asymmetric.

function CTASection() {
  return (
    <section data-screen-label="07 CTA" className="bg-paper" style={{padding:'160px 0 140px', position:'relative', overflow:'hidden'}}>
      {/* subtle vinho corner mark */}
      <div style={{position:'absolute', top:0, right:0, width:380, height:380, background:'radial-gradient(circle at 70% 30%, rgba(107,30,46,.10), transparent 60%)', pointerEvents:'none'}}/>

      <div className="wrap" style={{position:'relative'}}>
        <div className="cta-grid" style={{display:'grid', gridTemplateColumns:'minmax(0,1.4fr) minmax(0,1fr)', gap:64, alignItems:'end'}}>
          <div>
            <div className="chip" style={{marginBottom:24}}>FILE № 06 · DEPLOY</div>
            <h2 className="display" style={{fontSize:'clamp(56px, 8.4vw, 148px)', margin:0, color:'#131017', letterSpacing:'-.035em', fontWeight:700, lineHeight:.92}}>
              Set the bait.<br/>
              <span className="display-italic" style={{color:'#6b1e2e'}}>Sleep.</span>
            </h2>
          </div>

          <div>
            <p style={{fontSize:17, lineHeight:1.55, color:'#3a3329', maxWidth:380, marginTop:0, marginBottom:24}}>
              Five-minute setup. No agent on your network. NIS2 Article 23 dossier on day one.
            </p>

            <div style={{display:'flex', gap:10, marginBottom:16, flexWrap:'wrap'}}>
              <a href="https://app.vantuz.co/login" className="btn btn-lg btn-primary">Start free <span aria-hidden>→</span></a>
              <a href="/blog" className="btn btn-lg btn-ghost">Read the brief</a>
            </div>

            <div className="mono" style={{fontSize:11, letterSpacing:'.15em', textTransform:'uppercase', color:'#736a5a'}}>
              EU data residency · No agent on your network
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.CTASection = CTASection;