TextHighlight text

---
interface Props {
  text: string;
  label?: string;
}
const { text = "De meeste bedrijven geven elke maand geld uit aan advertenties zonder te weten of het werkt. Wij veranderen dat. Met realtime data en continue optimalisatie zorgen wij dat elk euro die jij investeert zo hard mogelijk voor jou werkt.", label = "Kern van onze aanpak" } = Astro.props;
---

<div class="tx-hl">
  {label && <p class="tx-hl__label">{label}</p>}
  <p class="tx-hl__text">{text}</p>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-hl {
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(168,85,247,0.04) 100%);
    border-radius: 0.75rem;
    border: 1px solid rgba(99,102,241,0.15);
  }
  .tx-hl__label {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
  }
  .tx-hl__text {
    margin: 0;
    font-size: 1.05rem;
    color: var(--color-primary);
    line-height: 1.7;
    font-weight: 500;
  }
</style>