/* ============================================================
   BASE — Reset, CSS-variabelen, typografie, helpers
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    background: #FAFAF8;
    color: #1A1A1A;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }

/* ── CSS-variabelen ───────────────────────────────────────── */
:root {
    --ink:       #1A1A1A;
    --ink-mid:   #3D3D3D;
    --ink-soft:  #6B6B6B;
    --ink-faint: #9B9B9B;

    --page:      #FAFAF8;
    --surface:   #F2F1EE;
    --surface-2: #E8E6E1;
    --border:    #E0DED9;

    --accent:    #2563EB;
    --accent-h:  #1D4ED8;
    --accent-bg: #EFF6FF;
    --accent-2:  #F97316;

    --green:     #16A34A;
    --green-bg:  #F0FDF4;
    --green-b:   #BBF7D0;

    --r6:   6px;
    --r10:  10px;
    --r14:  14px;
    --r20:  20px;
    --r28:  28px;
}

/* ── Typografie ───────────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--ink);
}

/* ── Layout helpers ───────────────────────────────────────── */
.wrap    { max-width: 1160px; margin: 0 auto; padding: 0 5%; }
.wrap-sm { max-width: 680px;  margin: 0 auto; padding: 0 5%; }

section { padding: 96px 0; }

/* ── Sectie-koppen ────────────────────────────────────────── */
.sec-head { margin-bottom: 56px; }

.sec-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}

.sec-head h2 {
    font-size: clamp(26px, 2.8vw, 40px);
    margin-bottom: 14px;
}

.sec-sub {
    font-size: 17px;
    color: var(--ink-soft);
    line-height: 1.75;
    max-width: 520px;
}

/* ── Knoppen ──────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 26px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--r10);
    transition: all .2s;
    white-space: nowrap;
}
.btn-primary:hover {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37,99,235,.25);
}
.btn-primary svg { transition: transform .2s; flex-shrink: 0; }
.btn-primary:hover svg { transform: translateX(3px); }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: 13px 26px;
    background: transparent;
    color: var(--ink-mid);
    border: 1.5px solid var(--border);
    border-radius: var(--r10);
    transition: all .2s;
    white-space: nowrap;
}
.btn-secondary:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: 13px 26px;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: var(--r10);
    transition: all .2s;
}
.btn-ghost:hover { background: rgba(255,255,255,.2); }

/* ── Scroll-reveal ────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Stagger: kinderen van [data-stagger] animeren na elkaar */
[data-stagger] .reveal:nth-child(1) { transition-delay: .05s; }
[data-stagger] .reveal:nth-child(2) { transition-delay: .15s; }
[data-stagger] .reveal:nth-child(3) { transition-delay: .25s; }
[data-stagger] .reveal:nth-child(4) { transition-delay: .35s; }

/* ── Animaties ────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.6); opacity: .4; }
}

/* ── Scroll-naar-boven ────────────────────────────────────── */
.scr-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 42px;
    height: 42px;
    background: var(--ink);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    opacity: 0;
    pointer-events: none;
    transition: all .3s;
    z-index: 100;
    font-size: 17px;
}
.scr-top.on          { opacity: 1; pointer-events: all; }
.scr-top:hover       { background: var(--accent); transform: translateY(-2px); }