CtaAccent CTA

---
// CtaAccent, recovered from blurr-components.pages.dev
---

<section class="ctaa" style="background:#6366f1"> <div class="ctaa-inner"> <h2 class="ctaa-headline">Start vandaag met meetbare marketing</h2> <p class="ctaa-sub">Geen langetermijncontract. Direct resultaat. Altijd inzichtelijk.</p> <div class="ctaa-btns"> <a href="#" class="ctaa-btn-primary">Begin nu</a> <a href="#" class="ctaa-btn-secondary">Meer info</a> </div> </div> </section>

<style>
.ctaa{padding:5rem 2rem}
.ctaa-inner{max-width:700px;margin:0 auto;text-align:center}
.ctaa-headline{font-size:clamp(1.75rem,4vw,3rem);font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1.15;margin:0 0 1rem}
.ctaa-sub{font-size:1.0625rem;color:#ffffffbf;line-height:1.65;margin:0 0 2.5rem}
.ctaa-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.ctaa-btn-primary{padding:.875rem 2.25rem;background:#fff;color:#0a0a0a;font-weight:700;font-size:.9375rem;border-radius:.5rem;text-decoration:none;transition:opacity .2s}
.ctaa-btn-primary:hover{opacity:.9}
.ctaa-btn-secondary{padding:.875rem 2.25rem;border:2px solid rgba(255,255,255,.4);color:#fff;font-weight:600;font-size:.9375rem;border-radius:.5rem;text-decoration:none;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .2s}
.ctaa-btn-secondary:hover{background:#ffffff1a}
</style>