TextManifesto text

---
interface Props {
  lines: string[];
}
const { lines = [
  "Wij geloven dat marketing meetbaar moet zijn.",
  "Wij geloven dat elke euro die je uitgeeft, harder voor je moet werken.",
  "Wij geloven dat strategie zonder executie niets waard is.",
  "Wij geloven dat groei niet voor iedereen is — alleen voor wie het echt wil.",
  "Dat is waarom wij BLURR bouwen.",
] } = Astro.props;
---

<div class="tx-mfst">
  {lines.map((line, i) => (
    <p class={`tx-mfst__line ${i === lines.length - 1 ? 'tx-mfst__line--final' : ''}`}>{line}</p>
  ))}
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-mfst {
    padding: 2rem 0;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .tx-mfst__line {
    margin: 0;
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: 500;
    color: #444;
    line-height: 1.55;
    padding-left: 1.5rem;
    border-left: 2px solid transparent;
    transition: border-color 0.2s, color 0.2s;
  }
  .tx-mfst__line:hover {
    color: var(--color-primary);
    border-left-color: var(--color-accent);
  }
  .tx-mfst__line--final {
    font-weight: 800;
    color: var(--color-primary);
    border-left-color: var(--color-accent);
    font-size: clamp(1.2rem, 3vw, 1.55rem);
    letter-spacing: -0.01em;
  }
</style>