CaseStudyCard UI Elements

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

<section class="csc"> <div class="csc-inner"> <div class="csc-header"> <span class="csc-eyebrow">Klantresultaten</span> <h2 class="csc-headline">Bewezen resultaten voor Nederlandse bedrijven</h2> </div> <div class="csc-grid"> <div class="csc-card">  <div class="csc-body"> <div class="csc-top"> <span class="csc-client">VDB Installatie</span> <span class="csc-industry">B2B Services</span> </div> <p class="csc-desc">Via gerichte Google Ads campagnes op installatiezoekopdrachten verdubbelden we het aantal leads binnen 3 maanden.</p> <div class="csc-result"> <span class="csc-result-val">+340%</span> <span class="csc-result-lbl">meer aanvragen via Google</span> </div> <div class="csc-tags"> <span class="csc-tag">Google Ads</span><span class="csc-tag">SEO</span> </div> </div> </div><div class="csc-card">  <div class="csc-body"> <div class="csc-top"> <span class="csc-client">Stijlvol Wonen</span> <span class="csc-industry">E-commerce</span> </div> <p class="csc-desc">Dankzij dynamische productadvertenties en gerichte retargeting verdrievoudigde de Meta ROAS in een kwartaal.</p> <div class="csc-result"> <span class="csc-result-val">€2.3M</span> <span class="csc-result-lbl">extra omzet via Meta Ads</span> </div> <div class="csc-tags"> <span class="csc-tag">Meta Ads</span><span class="csc-tag">Retargeting</span> </div> </div> </div><div class="csc-card">  <div class="csc-body"> <div class="csc-top"> <span class="csc-client">FlexHR Platform</span> <span class="csc-industry">SaaS</span> </div> <p class="csc-desc">Door optimalisatie van de campagnestructuur en biedstrategie halveerden we de kosten per lead.</p> <div class="csc-result"> <span class="csc-result-val">62%</span> <span class="csc-result-lbl">lagere cost per lead</span> </div> <div class="csc-tags"> <span class="csc-tag">Google Ads</span><span class="csc-tag">Analytics</span> </div> </div> </div> </div> </div> </section>

<style>
.csc{background:#fff;padding:5rem 2rem;border-top:1px solid #e5e7eb}
.csc-inner{max-width:1100px;margin:0 auto}
.csc-header{text-align:center;margin-bottom:3rem}
.csc-eyebrow{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:.75rem}
.csc-headline{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:900;color:#0a0a0a;letter-spacing:-.04em;line-height:1.15;margin:0}
.csc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.csc-card{border:1px solid #e5e7eb;border-radius:1rem;overflow:hidden;display:flex;flex-direction:column}
.csc-img{width:100%;height:200px;object-fit:cover}
.csc-body{padding:1.75rem;display:flex;flex-direction:column;gap:1rem;flex:1}
.csc-top{display:flex;align-items:center;justify-content:space-between}
.csc-client{font-size:.9375rem;font-weight:700;color:#0a0a0a}
.csc-industry{font-size:.75rem;color:#9ca3af;background:#f3f4f6;padding:.2rem .625rem;border-radius:1rem}
.csc-desc{font-size:.9375rem;color:#6b7280;line-height:1.6;margin:0}
.csc-result{display:flex;flex-direction:column;padding:1rem;background:#f8fafc;border-radius:.625rem;border-left:3px solid var(--color-accent,#6366f1)}
.csc-result-val{font-size:1.75rem;font-weight:900;color:var(--color-accent,#6366f1);letter-spacing:-.04em;line-height:1}
.csc-result-lbl{font-size:.8125rem;color:#6b7280;margin-top:.25rem}
.csc-tags{display:flex;gap:.5rem;flex-wrap:wrap}
.csc-tag{font-size:.75rem;padding:.2rem .625rem;background:#ede9fe;color:#6d28d9;border-radius:1rem;font-weight:500}
</style>