HeroNeon Hero

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

<section class="hn" style="--hn-glow:#6366f1"> <div class="hn-blob" aria-hidden="true"></div> <div class="hn-inner"> <p class="hn-eyebrow">Next-gen Marketing</p> <h1 class="hn-headline">Campagnes die schalen</h1> <p class="hn-sub">AI-driven bidding, real-time optimalisatie, meetbare groei.</p> <div class="hn-actions"> <a href="#" class="hn-btn hn-btn--glow">Start nu</a> <a href="#" class="hn-btn hn-btn--ghost">Meer weten</a> </div> <div class="hn-badges"> <span class="hn-badge">Google Premier Partner</span><span class="hn-badge">Meta Business Partner</span><span class="hn-badge">GA4 Certified</span> </div> </div> </section>

<style>
.hn{position:relative;padding:7rem 2rem 6rem;background:#080b14;color:#fff;text-align:center;overflow:hidden}
.hn-blob{position:absolute;top:-20%;left:50%;transform:translate(-50%);width:600px;height:600px;background:radial-gradient(circle,color-mix(in srgb,var(--hn-glow) 30%,transparent) 0%,transparent 70%);pointer-events:none;animation:hnPulse 4s ease-in-out infinite}
.hn-inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.hn-eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hn-glow);margin-bottom:1.25rem;text-shadow:0 0 20px var(--hn-glow)}
.hn-headline{font-size:clamp(2.5rem,6vw,5rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 1.25rem;background:linear-gradient(135deg,#fff 60%,var(--hn-glow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hn-sub{font-size:1.0625rem;color:#ffffff80;line-height:1.65;max-width:540px;margin:0 auto 2.5rem}
.hn-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.hn-btn{display:inline-flex;align-items:center;padding:.8125rem 2rem;border-radius:.5rem;font-size:.9375rem;font-weight:600;text-decoration:none;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .2s}
.hn-btn--glow{background:var(--hn-glow);color:#fff;box-shadow:0 0 30px color-mix(in srgb,var(--hn-glow) 50%,transparent)}
.hn-btn--glow:hover{box-shadow:0 0 50px color-mix(in srgb,var(--hn-glow) 70%,transparent);transform:translateY(-1px)}
.hn-btn--ghost{border:1px solid rgba(255,255,255,.15);color:#ffffffb3;backdrop-filter:blur(8px);background:#ffffff0d}
.hn-btn--ghost:hover{border-color:#ffffff4d;color:#fff}
.hn-badges{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.hn-badge{font-size:.6875rem;padding:.3rem .75rem;border:1px solid rgba(255,255,255,.1);border-radius:100px;color:#fff6;backdrop-filter:blur(4px)}
</style>