/* Basis: variabelen, reset, typografie en knoppen */

:root{
  --ink:#0D0D0D;--offwhite:#FBFBF9;--line:#E8E6E0;
  --plum:#2D1B4E;--teal:#0D6B6B;--cobalt:#1A2F6B;
  --sand:#B8A882;--violet:#4A2B7A;--blush:#7A2B4A;
  --lime-soft:#F9FF8A22;--lime:#F9FF8A;
  --magenta:#EC008C;
  --ff-display:'Inter',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,sans-serif;
  --maxw:1260px;--header-h:84px;
  --radius:14px;--radius-sm:8px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--ff-body);color:var(--ink);background:var(--offwhite);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
.label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta)}
h1{font-size:clamp(2.6rem,5.5vw,4.8rem);line-height:1.06;letter-spacing:-.03em;font-weight:700}
h2{font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.12;letter-spacing:-.025em;font-weight:700}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.2;letter-spacing:-.02em;font-weight:600}
p{line-height:1.7;color:#444;font-size:1.05rem}
strong{color:var(--ink)}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn{
  font-family:var(--ff-display);font-size:.97rem;font-weight:600;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 26px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s,color .25s,box-shadow .25s;
  white-space:nowrap;
}
.btn svg{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:var(--magenta);transform:translateY(-2px);box-shadow:0 10px 28px rgba(236,0,140,.32)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--magenta);color:#fff;transform:translateY(-2px);box-shadow:0 10px 28px rgba(236,0,140,.4)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}

/* Alleen voor schermlezers: wel voorgelezen, niet zichtbaar. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}