/* ================================================================
   ViaVia – Design System
   Exact visual replica of the original Next.js / Tailwind design.
   Brand: #7B2D9E (brand-500) · #4A1564 (brand-600) · #F2C94C (accent-400 = YELLOW)
   Body background: #FAF6FF (brand-50)
   Primary button: YELLOW, not purple.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

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

/* ── CSS Variables (exact Tailwind config values) ──────────────── */
:root {
    --brand-50:  #FAF6FF;
    --brand-100: #F2E8FA;
    --brand-200: #e0c8f5;
    --brand-300: #c89de8;
    --brand-400: #a865d4;
    --brand-500: #7B2D9E;
    --brand-600: #4A1564;
    --brand-700: #3a0f50;
    --brand-800: #2a0a3c;
    --brand-900: #1a0628;

    --accent-400: #F2C94C;
    --accent-500: #e6b830;
    --accent-600: #c99e1a;

    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    --bg:          #ffffff;
    --text:        var(--gray-900);
    --text-muted:  var(--gray-500);
    --border:      var(--gray-100);
    --border-form: var(--gray-200);

    --radius:     0.5rem;
    --radius-xl:  0.75rem;   /* inputs, buttons */
    --radius-2xl: 1rem;      /* cards */
    --radius-3xl: 1.5rem;    /* step cards */

    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow:    0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);

    --transition: .15s ease;
}

/* ── Base ──────────────────────────────────────────────────────────── */
html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: var(--brand-50);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }
a { color: var(--brand-500); text-decoration: none; }
a:hover { color: var(--brand-600); }
img { max-width: 100%; height: auto; }

/* ── Typography ────────────────────────────────────────────────────── */
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 900; line-height: 1.15; }
h2 { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 900; line-height: 1.2; }
h3 { font-size: 1.125rem; font-weight: 700; }
p  { color: var(--gray-700); }

.text-accent  { color: var(--accent-400); }
.text-muted   { color: var(--text-muted); }
.text-sm      { font-size: .875rem; }
.text-xs      { font-size: .75rem; }
.prose        { line-height: 1.8; color: var(--gray-700); }
.prose p + p  { margin-top: 1rem; }

/* ── Layout helpers ─────────────────────────────────────────────────── */
.container   { max-width: 1152px; margin: 0 auto; padding: 0 1.5rem; }
.section-pad { padding: 3rem 0; }
.max-w-lg    { max-width: 32rem; }
.max-w-2xl   { max-width: 42rem; }
.max-w-3xl   { max-width: 48rem; }
.mx-auto     { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.w-full      { width: 100%; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }

/* ══════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════ */
.site-header {
    background: var(--bg);
    border-bottom: 1px solid var(--gray-100);
    position: sticky;
    top: 0;
    z-index: 50;
    overflow: visible; /* logo badge hangs below border */
}

.site-header > .header-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 64px;
    gap: 1.5rem;
}

/* ── Logo (base: inline, mobile flow) ───────────────────────────── */
.logo {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
}
.logo:hover { text-decoration: none; }
.logo-via  { font-size: 1.25rem; font-weight: 900; color: var(--brand-500); }
.logo-via2 { font-size: 1.25rem; font-weight: 900; color: var(--gray-900); }
.logo-dot  {
    display: inline-block;
    width: 11px; height: 11px;
    background: var(--accent-400);
    border-radius: 3px;
    margin-bottom: 3px;
    flex-shrink: 0;
}

/* XL logo variant for hanging badge */
.logo-xl .logo-via,
.logo-xl .logo-via2 { font-size: 1.875rem; }
.logo-xl .logo-dot  { width: 14px; height: 14px; margin-bottom: 4px; }

/* ── Hanging desktop logo badge ─────────────────────────────────── */
.logo-badge { display: none; }

@media (min-width: 768px) {
    .logo-badge {
        display: block;
        position: absolute;
        left: 1.5rem;
        top: 8px;
        background: var(--bg);
        border: 1px solid var(--gray-100);
        border-radius: var(--radius-2xl);
        padding: 20px;
        box-shadow: var(--shadow-md);
        z-index: 60;
        text-decoration: none;
        transition: box-shadow var(--transition);
    }
    .logo-badge:hover { box-shadow: var(--shadow-lg); text-decoration: none; }

    /* Space between badge and nav so they don't overlap (badge ~230px + left 24px) */
    .logo-spacer { display: block; width: 17rem; flex-shrink: 0; }

    /* Mobile logo hidden on desktop */
    .logo-mobile { display: none; }

    /* Header aligns right on desktop */
    .site-header > .header-bar { justify-content: flex-end; }
}

@media (max-width: 767px) {
    .logo-spacer  { display: none; }
    .site-header > .header-bar { justify-content: space-between; }
}

/* ── Nav ────────────────────────────────────────────────────────── */
.main-nav { display: flex; align-items: center; gap: 1.5rem; }
.main-nav a {
    font-size: .875rem;
    font-weight: 500;
    color: var(--gray-600);
    text-decoration: none;
    transition: color var(--transition);
    white-space: nowrap;
}
.main-nav a:hover { color: var(--gray-900); }

/* ── Hoe het werkt dropdown ─────────────────────────────────────── */
.nav-dropdown { position: relative; }
.nav-dropdown-btn {
    display: flex; align-items: center; gap: 3px;
    font-size: .875rem; font-weight: 500;
    color: var(--gray-600);
    background: none; border: none; cursor: pointer; padding: 0;
    transition: color var(--transition);
    white-space: nowrap;
}
.nav-dropdown-btn:hover { color: var(--gray-900); }
.nav-dropdown-btn .chevron { transition: transform var(--transition); }
.nav-dropdown-btn.open .chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
    display: none;
    position: absolute; top: calc(100% + .5rem); left: 0;
    min-width: 13rem;
    background: var(--bg);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 50;
}
.nav-dropdown-menu.open { display: block; }

.nav-dropdown-item {
    display: block;
    padding: .75rem 1rem;
    text-decoration: none;
    transition: background var(--transition);
}
.nav-dropdown-item:hover { background: var(--brand-50); text-decoration: none; }
.nav-dropdown-item + .nav-dropdown-item { border-top: 1px solid var(--gray-50); }
.nav-dropdown-item strong { display: block; font-size: .875rem; font-weight: 600; color: var(--gray-900); }
.nav-dropdown-item small  { font-size: .75rem; color: var(--gray-400); margin-top: 1px; display: block; }

/* ── Header auth actions ────────────────────────────────────────── */
.header-actions { display: flex; align-items: center; gap: .75rem; }
.text-link {
    font-size: .875rem; font-weight: 500;
    color: var(--gray-600);
    background: none; border: none; cursor: pointer;
    text-decoration: none; padding: 0;
    transition: color var(--transition);
}
.text-link:hover { color: var(--gray-900); }

/* ── Mobile hamburger ────────────────────────────────────────────── */
.mobile-menu-btn {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: .5rem;
}
.mobile-menu-btn span { display: block; width: 22px; height: 2px; background: var(--gray-600); border-radius: 2px; }

.mobile-menu {
    display: none; flex-direction: column; gap: .25rem;
    padding: .75rem 1.5rem 1.25rem;
    border-top: 1px solid var(--gray-100);
}
.mobile-menu a:not(.btn), .mobile-menu button:not(.btn) {
    display: block;
    padding: .625rem 0;
    font-size: .9375rem; font-weight: 500;
    color: var(--gray-700);
    text-decoration: none;
    background: none; border: none; cursor: pointer; text-align: left;
}
.mobile-menu a:not(.btn):hover, .mobile-menu button:not(.btn):hover { color: var(--gray-900); }
.mobile-menu .btn { margin-top: .375rem; }
.mobile-menu.open { display: flex; }

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
   Primary = YELLOW (#F2C94C) — exact match to original globals.css
   ══════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border-radius: var(--radius-xl);
    font-size: .9375rem; font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all var(--transition);
    white-space: nowrap; line-height: 1.4;
    font-family: inherit;
}

/* PRIMARY = yellow accent-400, dark text — matches original */
.btn-primary { background: var(--accent-400); color: var(--brand-600); border-color: var(--accent-400); }
.btn-primary:hover { background: var(--accent-500); border-color: var(--accent-500); color: var(--brand-600); text-decoration: none; }

/* BRAND = purple (for where purple CTAs are needed) */
.btn-brand { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
.btn-brand:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; text-decoration: none; }

/* SECONDARY = white with gray-200 border */
.btn-secondary { background: var(--bg); color: var(--gray-700); border-color: var(--gray-200); }
.btn-secondary:hover { background: var(--gray-50); border-color: var(--gray-300); color: var(--gray-900); text-decoration: none; }

/* GHOST = transparent */
.btn-ghost { background: transparent; color: var(--gray-600); border-color: transparent; }
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-900); text-decoration: none; }

/* ACCENT = alias for primary */
.btn-accent { background: var(--accent-400); color: var(--brand-600); border-color: var(--accent-400); }
.btn-accent:hover { background: var(--accent-500); border-color: var(--accent-500); color: var(--brand-600); text-decoration: none; }

/* DANGER */
.btn-danger { color: #dc2626; background: transparent; border-color: transparent; }
.btn-danger:hover { background: #fef2f2; color: #b91c1c; }

.btn-lg   { padding: .75rem 1.5rem; font-size: 1rem; }
.btn-sm   { padding: .25rem .625rem; font-size: .8125rem; border-radius: .5rem; }
.btn-full { width: 100%; }

/* button[type] fallbacks */
button.btn          { background: var(--accent-400); color: var(--brand-600); }
button.btn-secondary { background: var(--bg); color: var(--gray-700); }
button.btn-ghost     { background: transparent; color: var(--gray-600); }
button.btn-brand     { background: var(--brand-500); color: #fff; }
button.btn-danger    { background: transparent; color: #dc2626; }

/* ══════════════════════════════════════════════════════════════════
   CARD  — rounded-2xl border border-gray-100 (matches original)
   ══════════════════════════════════════════════════════════════════ */
.card {
    background: var(--bg);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════
   FORMS  — rounded-xl inputs, focus:ring brand-500
   ══════════════════════════════════════════════════════════════════ */
.form-group  { margin-bottom: 1.25rem; }
.form-label  { display: block; font-weight: 500; font-size: .9375rem; margin-bottom: .375rem; color: var(--gray-700); }
.form-hint   { display: block; font-size: .8125rem; color: var(--text-muted); margin-top: .25rem; }

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: .625rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-xl);
    font-size: .9375rem;
    color: var(--text);
    background: var(--bg);
    transition: border-color var(--transition), box-shadow var(--transition);
    font-family: inherit; line-height: 1.5;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(123,45,158,.1);
}
.form-input:disabled { background: var(--gray-100); color: var(--gray-500); cursor: not-allowed; }
.form-textarea { resize: vertical; min-height: 6rem; }
.form-input-code { font-size: 1.5rem; text-align: center; letter-spacing: .25em; }
.form-input-sm   { padding: .375rem .625rem; font-size: .875rem; }
.form-select-sm  { padding: .3rem .6rem;    font-size: .875rem; }
.form-input-file { padding: .5rem; border: 1.5px dashed var(--gray-200); border-radius: var(--radius-xl); width: 100%; cursor: pointer; font-size: .9375rem; font-family: inherit; }

.form-row   { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checkbox-label { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; cursor: pointer; }
.link-subtle    { font-size: .875rem; color: var(--text-muted); }
.link-subtle:hover { color: var(--brand-500); }
.form-section-title { font-size: 1rem; font-weight: 600; color: var(--gray-700); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--gray-100); }

/* ══════════════════════════════════════════════════════════════════
   ALERTS
   ══════════════════════════════════════════════════════════════════ */
.alert {
    display: flex; align-items: flex-start; gap: .625rem;
    padding: .875rem 1rem;
    border-radius: var(--radius-xl);
    font-size: .9375rem; margin-bottom: 1rem; line-height: 1.5;
}
.alert-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* ══════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════ */
.badge { display: inline-block; padding: .2em .6em; border-radius: 9999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-purple { background: #f3e8ff; color: #6b21a8; }
.badge-green  { background: #dcfce7; color: #166534; }
.badge-teal   { background: #ccfbf1; color: #134e4a; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-gray   { background: #f3f4f6; color: #374151; }

/* ── Reward badge (LARGE — used in hero) ────────────────────────── */
/* bg-accent-400 text-brand-600 font-black text-2xl px-4 py-2 rounded-2xl */
.reward-badge {
    display: inline-block;
    background: var(--accent-400);
    color: var(--brand-600);
    font-weight: 900;
    font-size: 1.5rem;
    padding: .5rem 1rem;
    border-radius: var(--radius-2xl);
    line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--gray-200); margin-bottom: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab  { padding: .75rem 1.25rem; color: var(--gray-600); font-weight: 500; font-size: .9375rem; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: all var(--transition); }
.tab:hover   { color: var(--brand-500); }
.tab-active  { color: var(--brand-500); border-bottom-color: var(--brand-500); }

/* ══════════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════════ */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th { background: var(--gray-50); color: var(--gray-700); font-weight: 600; text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.table td { padding: .75rem 1rem; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--gray-50); }

/* ══════════════════════════════════════════════════════════════════
   HERO  — dark bg-brand-900 + hero image + gradient overlay
   ══════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    background-color: var(--brand-900);
    min-height: 460px;
}
.hero-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 25%;
}
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        to right,
        rgba(26,6,40,.70) 0%,
        rgba(42,10,60,.45) 50%,
        rgba(58,15,80,.20) 100%
    );
}
.hero-body {
    position: relative; z-index: 10;
    padding: 3rem 0 4rem;
}
@media (min-width: 1024px) {
    .hero       { min-height: 540px; }
    .hero-body  { padding: 3rem 0 0; }
}

/* 2-column grid: text left, phone right (desktop only) */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        align-items: flex-end;
        gap: 2rem;
    }
    .hero-content { padding-bottom: 5rem; }
}

.hero-content { max-width: 38rem; }

/* Phone mockup column — hidden on mobile, visible + hanging on desktop */
.hero-phone {
    display: none;
}
@media (min-width: 1024px) {
    .hero-phone {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        transform: translateY(15%);
    }
}

/* Phone mockup widget */
.phone-mockup {
    position: relative;
    width: 258px;
    height: 516px;
    flex-shrink: 0;
    user-select: none;
}
.phone-glow {
    position: absolute;
    inset: 1rem;
    border-radius: 3rem;
    z-index: 0;
    opacity: .35;
    filter: blur(2.5rem);
    background: var(--brand-400);
}
.phone-frame {
    position: absolute;
    inset: 0;
    border-radius: 3.5rem;
    background: linear-gradient(160deg, #17171f 0%, #08080c 65%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.16),
        inset 0 0 0 2.5px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 30px 60px -12px rgba(0,0,0,.55),
        0 18px 30px -18px rgba(0,0,0,.6);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
}
.phone-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 74%, rgba(255,255,255,.05) 100%);
    pointer-events: none;
    z-index: 5;
}
.phone-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.75rem .25rem;
    flex-shrink: 0;
    position: relative;
}
.phone-time { color: rgba(255,255,255,.85); font-size: .625rem; font-weight: 700; letter-spacing: .01em; }
.phone-island {
    position: absolute; top: .75rem; left: 50%; transform: translateX(-50%);
    width: 72px; height: 22px; background: #000; border-radius: 9999px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone-status-icons { display: flex; align-items: center; gap: 5px; }
.phone-icon-signal, .phone-icon-wifi { display: block; opacity: .9; }
.phone-battery {
    position: relative;
    width: 22px; height: 11px;
    padding: 1.5px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 3px;
    display: flex;
    align-items: center;
}
.phone-battery::after {
    content: '';
    position: absolute;
    right: -3px; top: 50%;
    transform: translateY(-50%);
    width: 2px; height: 4px;
    background: rgba(255,255,255,.55);
    border-radius: 0 2px 2px 0;
}
.phone-battery-fill { width: 80%; height: 100%; background: #fff; border-radius: 1px; }
.phone-body { padding: .5rem 1rem 0; display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.phone-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-shrink: 0; }
.phone-title { color: #fff; font-size: 1rem; font-weight: 900; letter-spacing: -.02em; }
.phone-bell {
    width: 28px; height: 28px;
    border-radius: 32%;
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(74,21,100,.45);
}

/* Animating notification card */
.phone-card {
    background: #fff;
    border-radius: 1.375rem;
    padding: 1rem;
    box-shadow: 0 14px 30px -8px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.12);
    flex-shrink: 0;
    transition: opacity .35s ease, transform .35s ease;
}
.phone-card.hidden-card { opacity: 0; transform: translateY(8px); }
.phone-card-eyebrow { display: flex; align-items: center; gap: .5rem; margin-bottom: .625rem; }
.phone-card-icon { width: 24px; height: 24px; border-radius: .625rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.phone-card-label { font-size: .5625rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .08em; }
.phone-card-title { font-size: .9375rem; font-weight: 900; color: #111827; line-height: 1.2; }
.phone-card-sub   { font-size: .6875rem; color: #9ca3af; margin-top: 2px; margin-bottom: .625rem; }
.phone-card-badge { display: inline-block; font-size: .625rem; font-weight: 700; padding: 2px 8px; border-radius: 9999px; }

/* Progress dots */
.phone-dots { display: flex; gap: 6px; justify-content: center; margin: .75rem 0; flex-shrink: 0; }
.phone-dot { height: 4px; border-radius: 9999px; transition: width .3s ease, background .3s ease; }

/* Vacature list */
.phone-vacatures-label { font-size: .5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.3); margin-bottom: .5rem; flex-shrink: 0; }
.phone-vacature-row {
    background: rgba(255,255,255,.06);
    border-radius: 1rem;
    padding: .625rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .375rem;
    flex-shrink: 0;
}
.phone-vacature-title { color: #fff; font-size: .6875rem; font-weight: 600; }
.phone-vacature-loc   { color: rgba(255,255,255,.3); font-size: .5625rem; margin-top: 1px; }
.phone-vacature-reward { color: var(--accent-400); font-size: .625rem; font-weight: 900; }

/* Home indicator */
.phone-indicator { display: flex; justify-content: center; padding: .625rem 0 .5rem; flex-shrink: 0; }
.phone-indicator-bar { width: 6rem; height: 4px; border-radius: 9999px; background: rgba(255,255,255,.2); }
.hero h1 {
    font-size: clamp(1.875rem, 5vw, 3.75rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin-bottom: .75rem;
}
.hero h1 .text-accent { color: var(--accent-400); }
.hero-sub {
    font-size: 1.125rem;
    color: rgba(255,255,255,.70);
    margin-bottom: .75rem;
    line-height: 1.7;
}

/* Badge staat op mobiel voor verwarring te zorgen zonder context;
   de uitleg hierboven (.hero-sub) legt het al uit. Vanaf tablet is
   er ruimte genoeg om beide te tonen, zoals op desktop. */
.hero-reward { display: none; margin-bottom: 1rem; }
@media (min-width: 640px) { .hero-reward { display: inline-block; margin-bottom: 2rem; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-hint {
    display: flex; align-items: center; gap: .4rem;
    font-size: .875rem; color: rgba(255,255,255,.55);
    margin: .75rem 0 1.25rem;
}

/* ══════════════════════════════════════════════════════════════════
   STATS  — bg-white border-y border-gray-100 py-16 lg:pt-40
   Numbers: text-4xl sm:text-5xl font-black text-brand-500
   ══════════════════════════════════════════════════════════════════ */
.stats-section {
    background: var(--bg);
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    padding: 4rem 0;
}
@media (min-width: 1024px) {
    /* lg:pt-40 — make room for hanging logo badge */
    .stats-section { padding-top: 10rem; }
}

.stats-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }

.stat-number { font-size: 2.5rem; font-weight: 900; color: var(--brand-500); line-height: 1.15; margin-bottom: .25rem; }
.stat-number.accent { color: var(--accent-500); }
.stat-label  { font-size: .875rem; color: var(--gray-500); font-weight: 500; }
@media (min-width: 640px) { .stat-number { font-size: 3rem; } }

/* Dashboard stat cards (different context — bordered cards) */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.stat-card  { background: var(--bg); border: 1px solid var(--gray-100); border-radius: var(--radius-2xl); text-align: center; padding: 1.5rem; }
.stat-card .stat-number { font-size: 2rem; font-weight: 900; color: var(--brand-500); }
.stat-card .stat-label  { color: var(--gray-500); font-size: .875rem; }

/* ══════════════════════════════════════════════════════════════════
   VACATURE CARDS  — bg-white rounded-2xl border border-gray-100 p-6
   ══════════════════════════════════════════════════════════════════ */
.vacatures-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px)  { .vacatures-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .vacatures-grid { grid-template-columns: repeat(3, 1fr); } }

.vacature-card {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    display: block;
    transition: all .2s ease;
}
.vacature-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brand-200);
    transform: translateY(-4px);
}
/* Onzichtbare link die de hele kaart klikbaar maakt; de deelknop
   erboven (hogere z-index) blijft daardoor zelf ook los klikbaar. */
.vacature-card-overlay-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.vacature-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.vacature-card-left { flex: 1; min-width: 0; }
.vacature-card-right { flex-shrink: 0; text-align: right; }

.vacature-sector-tag {
    display: inline-block;
    font-size: .75rem; font-weight: 500;
    background: var(--gray-100); color: var(--gray-600);
    padding: .125rem .5rem; border-radius: 9999px;
    margin-bottom: .25rem;
}
.vacature-card h3 {
    font-size: 1.125rem; font-weight: 600;
    color: var(--gray-900); line-height: 1.35;
    margin-bottom: .25rem;
    transition: color var(--transition);
}
.vacature-card:hover h3 { color: var(--brand-500); }
.vacature-company { font-size: .875rem; color: var(--gray-500); }
.vacature-reward-label  { font-size: .75rem; color: var(--gray-500); margin-bottom: 1px; }
.vacature-reward-amount { font-size: 1.25rem; font-weight: 900; color: var(--brand-500); }

.vacature-card-tags { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.vacature-card-tag  { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--gray-500); }

.vacature-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-100); }
.vacature-card-date { font-size: .75rem; color: var(--gray-400); }
.vacature-card-share {
    display: inline-flex; align-items: center; gap: .375rem;
    font-size: .75rem; font-weight: 600;
    color: var(--brand-600); background: var(--accent-400);
    padding: .375rem .75rem; border-radius: .5rem;
    text-decoration: none; border: none; cursor: pointer;
    transition: background var(--transition);
}
.vacature-card-share:hover { background: var(--accent-500); color: var(--brand-600); text-decoration: none; }
.vacature-card-share { position: relative; z-index: 2; }
.vacature-card-share.copied { background: #dcfce7; color: #16a34a; }

.vacature-card-share-wrap { position: relative; z-index: 2; }

.card-share-dropdown {
    display: none;
    position: absolute; right: 0; bottom: calc(100% + .5rem);
    z-index: 30;
    background: var(--bg); border: 1px solid var(--gray-100);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
    padding: .375rem; min-width: 180px;
}
.card-share-dropdown.open { display: block; }
.card-share-option {
    display: flex; align-items: center; gap: .625rem;
    width: 100%; padding: .5rem .75rem;
    font-size: .8125rem; font-weight: 500;
    border-radius: .5rem; text-decoration: none;
    background: none; border: none; cursor: pointer; text-align: left;
    transition: background var(--transition);
}
.card-share-option:hover { text-decoration: none; }
.card-share-option-whatsapp { color: #25D366; }
.card-share-option-whatsapp:hover { background: #e9fbf0; }
.card-share-option-linkedin { color: #0A66C2; }
.card-share-option-linkedin:hover { background: #e7f0fb; }
.card-share-option-facebook { color: #1877F2; }
.card-share-option-facebook:hover { background: #e8f1fe; }
.card-share-option-email { color: var(--gray-600); }
.card-share-option-email:hover { background: var(--gray-100); }
.card-share-copy { color: var(--gray-700); border-top: 1px solid var(--gray-100); margin-top: .25rem; padding-top: .625rem; }
.card-share-copy:hover { background: var(--gray-50); }

/* Legacy meta classes used in list cards */
.vacature-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; font-size: .875rem; color: var(--text-muted); }
.meta-dot      { color: var(--gray-300); }
.meta-company  { font-weight: 500; color: var(--gray-700); }
.vacature-sector { font-size: .8125rem; color: var(--brand-500); font-weight: 500; }

/* List card (vacatures page sidebar view) */
.vacature-list-card {
    display: flex; gap: 1rem;
    background: var(--bg);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    padding: 1.5rem; margin-bottom: .75rem;
    text-decoration: none; color: inherit;
    transition: all var(--transition);
    align-items: flex-start;
}
.vacature-list-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow-md); text-decoration: none; color: inherit; }
.vacature-list-body       { flex: 1; }
.vacature-list-body h2    { font-size: 1.125rem; font-weight: 600; margin-bottom: .375rem; color: var(--gray-900); }
.vacature-list-aside      { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; flex-shrink: 0; }
.vacature-salary          { color: var(--brand-500); font-weight: 500; font-size: .9375rem; margin-top: .375rem; }
.vacature-date            { font-size: .8125rem; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════
   VACATURES LAYOUT (sidebar + grid)
   ══════════════════════════════════════════════════════════════════ */
.vacatures-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: start; }

.filters-sidebar {
    background: var(--bg);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    padding: 1.25rem;
    position: sticky; top: 80px;
}
.filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.filter-header h3 { font-size: 1rem; font-weight: 700; }
.filter-group  { margin-bottom: 1rem; }
.filter-label  { display: block; font-size: .75rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }

.results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.results-count  { font-size: .9375rem; color: var(--text-muted); }
.mobile-filter-btn { display: none; }

/* Inside sidebar layout the vacatures grid is 2-col */
.vacatures-results .vacatures-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) { .vacatures-results .vacatures-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════
   DETAIL VIEW — smalle max-w-4xl-achtige layout, matcht referentie
   ══════════════════════════════════════════════════════════════════ */
.detail-narrow { max-width: 896px; padding-top: 2rem; padding-bottom: 2rem; }
.detail-back-link {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .875rem; color: var(--gray-500); margin-bottom: 1.5rem;
    transition: color var(--transition);
}
.detail-back-link:hover { color: var(--gray-700); }

.detail-layout      { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; }
.detail-header-row  { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.detail-avatar {
    width: 56px; height: 56px; flex-shrink: 0;
    background: var(--brand-50); color: var(--brand-500);
    border-radius: var(--radius-2xl);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 900;
}
.detail-title       { font-size: 1.5rem; line-height: 1.25; margin-bottom: .125rem; }
.detail-company     { color: var(--gray-500); }

.detail-meta-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    padding-bottom: 1.5rem; margin-bottom: 0; border-bottom: 1px solid var(--gray-100);
}
.detail-meta-item { display: flex; align-items: center; gap: .375rem; font-size: .875rem; color: var(--gray-600); }
.detail-meta-item svg { color: var(--brand-500); flex-shrink: 0; }
.detail-meta-badge { background: var(--gray-100); color: var(--gray-600); font-size: .75rem; font-weight: 500; padding: .25rem .75rem; border-radius: 9999px; }

.detail-content     { margin-top: 1.5rem; }
.detail-section-label { font-size: .75rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }

.detail-sidebar { display: flex; flex-direction: column; gap: 1rem; }

/* Tipgever: donkere beloningskaart */
.detail-reward-card { background: var(--brand-600); color: #fff; border-radius: var(--radius-2xl); padding: 1.5rem; }
.detail-reward-label { color: rgba(255,255,255,.7); font-size: .875rem; font-weight: 500; margin-bottom: .25rem; }
.detail-reward-num  { font-size: 2.25rem; font-weight: 900; color: var(--accent-400); line-height: 1.1; margin-bottom: .5rem; }
.detail-reward-hint { color: rgba(255,255,255,.7); font-size: .75rem; line-height: 1.6; }

.detail-link-box { background: var(--gray-100); border-radius: var(--radius-xl); padding: .75rem; }
.detail-link-box-label { font-size: .75rem; color: var(--gray-500); margin-bottom: .375rem; }
.detail-link-box-row { display: flex; align-items: center; gap: .5rem; }
.detail-link-box-row code {
    flex: 1; min-width: 0;
    font-size: .75rem; color: var(--gray-700); background: #fff;
    padding: .25rem .5rem; border-radius: .5rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.detail-link-box-row button {
    background: none; border: none; padding: .375rem; color: var(--gray-500);
    cursor: pointer; border-radius: .375rem; display: flex; transition: color var(--transition);
}
.detail-link-box-row button:hover { color: var(--brand-500); }
.detail-link-box-hint { font-size: .75rem; color: var(--gray-400); margin-top: .5rem; }

/* Kandidaat: referral-banner + solliciteren */
.detail-ref-banner { background: var(--brand-50); color: var(--brand-700); border-radius: var(--radius-xl); padding: .75rem 1rem; font-size: .875rem; line-height: 1.5; }
.detail-posted-date { text-align: center; font-size: .75rem; color: var(--gray-400); }

/* ── Sidebar tip (uitleg onder de deel/solliciteer-knop) ─────────── */
.sidebar-tip {
    font-size: .8125rem;
    color: var(--gray-500);
    line-height: 1.6;
    margin-top: .75rem;
    text-align: center;
}
.sidebar-tip a { color: var(--brand-500); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════
   AUTH PAGES  — bg-gray-50 centered card
   ══════════════════════════════════════════════════════════════════ */
.auth-body    { background: var(--gray-50); }
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 2rem 1rem; gap: 1.5rem; }
.auth-card    { background: var(--bg); border: 1px solid var(--gray-100); border-radius: var(--radius-2xl); padding: 1.75rem; width: 100%; max-width: 440px; box-shadow: var(--shadow-sm); }
.auth-logo    { text-align: center; margin-bottom: 1.5rem; }
.auth-form    { margin-top: 1.5rem; }
.auth-intro   { color: var(--gray-600); margin-bottom: 1rem; font-size: .9375rem; }
.auth-switch  { text-align: center; font-size: .9375rem; color: var(--gray-600); margin-top: 1.25rem; }
.auth-switch-group { margin-top: 1rem; }

/* Rol-toggle op het registratieformulier (vinder/werkgever, inline) */
.rol-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; }
.rol-toggle-btn {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 1rem; border-radius: .75rem; border: 2px solid var(--gray-200);
    color: var(--gray-500); text-decoration: none;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.rol-toggle-btn:hover { border-color: var(--gray-300); text-decoration: none; color: var(--gray-500); }
.rol-toggle-btn.active { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-600); }
.rol-toggle-label { font-size: .875rem; font-weight: 700; color: inherit; }
.rol-toggle-sub   { font-size: .75rem; color: inherit; opacity: .7; }

/* Info-box met rol-afhankelijke uitleg */
.auth-info-box { background: var(--brand-50); color: var(--brand-700); border-radius: var(--radius-xl); padding: .75rem 1rem; font-size: .875rem; line-height: 1.6; }

.auth-fine-print { text-align: center; font-size: .75rem; color: var(--gray-400); margin-top: .75rem; }

/* Bevestig e-mail pagina */
.auth-confirm-icon { display: flex; justify-content: center; margin-bottom: 1rem; color: var(--brand-500); }

/* Form helpers */
.form-optional { font-size: .8125rem; font-weight: 400; color: var(--gray-400); }

/* Tipgever share block op vacature detail */
.tipgever-share-block { margin-top: .25rem; }
.tipgever-share-label { font-size: .875rem; font-weight: 600; color: var(--gray-700); margin-bottom: .25rem; }
.tipgever-share-hint  { font-size: .8125rem; color: var(--gray-500); margin-top: .5rem; }
.share-options-row    { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; }
.share-pill           { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .875rem .3rem .3rem; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 9999px; font-size: .8125rem; font-weight: 500; color: var(--gray-700); text-decoration: none; transition: background var(--transition); }
.share-pill:hover     { background: var(--gray-200); }

/* Gekleurde platform-logo's — echte merkkleuren i.p.v. generieke outline-iconen */
.share-logo {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.share-logo-whatsapp { background: #25D366; }
.share-logo-linkedin { background: #0A66C2; }
.share-logo-email    { background: var(--gray-500); }

/* ══════════════════════════════════════════════════════════════════
   PROFILE, 2FA, RECOVERY CODES
   ══════════════════════════════════════════════════════════════════ */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.5rem; }
.qr-wrapper   { display: flex; justify-content: center; margin: 1.5rem 0; }
.qr-wrapper img { border: 2px solid var(--gray-100); border-radius: var(--radius-xl); }
.manual-entry { margin: 1rem 0; font-size: .9375rem; }
.secret-code  { font-family: monospace; font-size: 1rem; letter-spacing: .15em; background: var(--gray-100); padding: .75rem; border-radius: var(--radius-xl); text-align: center; margin-top: .75rem; user-select: all; word-break: break-all; }
.recovery-codes-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1rem 0; }
.recovery-code       { display: block; font-family: monospace; font-size: 1rem; letter-spacing: .1em; background: var(--gray-100); padding: .5rem .875rem; border-radius: var(--radius); text-align: center; }
.recovery-actions    { margin-top: .75rem; }
.ref-link-box { display: flex; gap: .5rem; margin-top: .75rem; }
.ref-link-row { display: flex; gap: .5rem; margin-top: .75rem; }
.info-grid    { display: grid; grid-template-columns: auto 1fr; gap: .375rem 1rem; font-size: .9375rem; }
.info-grid dt { color: var(--gray-500); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════
   ADMIN
   ══════════════════════════════════════════════════════════════════ */
.funnel          { display: flex; flex-direction: column; gap: .625rem; }
.funnel-row      { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 1rem; }
.funnel-label    { font-size: .875rem; font-weight: 500; color: var(--gray-600); text-align: right; }
.funnel-bar-wrap { height: 28px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
.funnel-bar      { height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: .5rem; border-radius: 4px; font-size: .8125rem; font-weight: 700; color: #fff; min-width: 2rem; transition: width .4s ease; }
.funnel-bar.badge-blue   { background: #1d4ed8; }
.funnel-bar.badge-yellow { background: #d97706; }
.funnel-bar.badge-purple { background: #7c3aed; }
.funnel-bar.badge-green  { background: #15803d; }
.funnel-bar.badge-teal   { background: #0f766e; }
.funnel-bar.badge-red    { background: #dc2626; }

.vacature-admin-card    { margin-bottom: 1rem; }
.vacature-admin-header  { margin-bottom: .5rem; }
.vacature-admin-header h2 { font-size: 1.125rem; }
.vacature-admin-header a  { color: inherit; text-decoration: none; }
.vacature-admin-header a:hover { color: var(--brand-500); }
.vacature-admin-stats   { font-size: .875rem; color: var(--text-muted); margin-bottom: .75rem; }
.vacature-admin-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.vacature-admin-meta    { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; font-size: .875rem; color: var(--text-muted); margin-bottom: .375rem; }

/* ══════════════════════════════════════════════════════════════════
   MISC
   ══════════════════════════════════════════════════════════════════ */
.inline-form  { display: inline; }
.table-actions { white-space: nowrap; }
.table-actions > * { margin-right: .375rem; }
.table-actions > *:last-child { margin-right: 0; }
.back-link    { color: var(--gray-500); font-size: .875rem; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; margin-bottom: .75rem; }
.back-link:hover { color: var(--brand-500); }
.ref-notice   { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius-xl); padding: .625rem .875rem; margin-bottom: 1rem; }
.link-cell    { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.link-cell .form-input { min-width: 0; }
.empty-state  { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state p { margin-bottom: 1rem; color: var(--gray-500); }

/* ── Page header ────────────────────────────────────────────────── */
.page-header { background: var(--bg); border-bottom: 1px solid var(--gray-100); padding: 2.5rem 0; }
.page-header h1 { margin-bottom: .25rem; font-size: 1.875rem; color: var(--gray-900); }
.page-header p  { color: var(--gray-500); font-size: .9375rem; }

.section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; gap: 1rem; flex-wrap: wrap; }
.section-cta    { text-align: center; margin-top: 2rem; }

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE SECTIONS
   ══════════════════════════════════════════════════════════════════ */

/* Preview vacatures — bg-gray-50 py-24 */
.preview-section { background: var(--gray-50); padding: 6rem 0; }
.preview-section h2 { font-size: 2.5rem; font-weight: 900; color: var(--gray-900); }
.preview-section .sub { color: var(--gray-500); margin-top: .25rem; }

/* Job alert — bg-brand-600 py-14 */
.jobalert-section { background: var(--brand-600); padding: 3.5rem 0; }
.jobalert-inner   { max-width: 42rem; margin: 0 auto; text-align: center; }
.jobalert-pill {
    display: inline-flex; align-items: center; gap: .375rem;
    background: rgba(255,255,255,.2);
    color: #fff; font-size: .75rem; font-weight: 600;
    padding: .375rem .75rem; border-radius: 9999px; margin-bottom: 1rem;
}
.jobalert-section h2 { font-size: 1.5rem; color: #fff; margin-bottom: .75rem; }
@media (min-width: 640px) { .jobalert-section h2 { font-size: 1.875rem; } }
.jobalert-section p  { color: rgba(255,255,255,.75); margin-bottom: 2rem; line-height: 1.7; font-size: .9375rem; }

/* Zo werkt het — bg-white py-24 */
.hoe-section { background: var(--bg); padding: 6rem 0; }
.hoe-section .intro { text-align: center; margin-bottom: 4rem; }
.hoe-section .intro h2 { font-size: 2.25rem; color: var(--gray-900); margin-bottom: 1rem; }
.hoe-section .intro p  { font-size: 1.125rem; color: var(--gray-500); }

.steps-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }

.step-card {
    background: var(--bg);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-3xl);
    padding: 2rem;
    transition: all .2s ease;
}
.step-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-100); transform: translateY(-4px); }

.step-highlight {
    background: var(--brand-600);
    border-color: var(--brand-600);
}
.step-highlight:hover { box-shadow: 0 10px 15px -3px rgba(26,6,40,.2); }

.step-icon {
    width: 3rem; height: 3rem;
    border-radius: var(--radius-2xl);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem;
    background: var(--brand-50); color: var(--brand-500);
}
.step-highlight .step-icon { background: var(--accent-400); color: var(--brand-600); }

.step-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; color: var(--brand-500); }
.step-highlight .step-label { color: var(--accent-400); }

.step-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: .75rem; color: var(--gray-900); }
.step-highlight h3 { color: #fff; }

.step-card p  { font-size: .875rem; line-height: 1.65; color: var(--gray-500); }
.step-highlight p { color: rgba(255,255,255,.75); }

/* Goed voor iedereen — bg-gray-50 py-24 */
.voor-wie-section { background: var(--gray-50); padding: 6rem 0; }
.voor-wie-grid    { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 768px) { .voor-wie-grid { grid-template-columns: 1fr 1fr; align-items: center; } }

.voor-wie-section h2 { font-size: 2.25rem; color: var(--gray-900); margin-bottom: 1.5rem; }

.feature-list { display: flex; flex-direction: column; gap: 1.25rem; }
.feature-item { display: flex; gap: 1rem; }
.feature-bar  { width: 4px; border-radius: 9999px; background: var(--brand-500); flex-shrink: 0; margin: 3px 0; transition: background var(--transition); }
.feature-item:hover .feature-bar { background: var(--accent-500); }
.feature-title { font-weight: 600; color: var(--gray-900); font-size: .9375rem; }
.feature-desc  { font-size: .875rem; color: var(--gray-500); margin-top: 2px; line-height: 1.6; }

.voor-wie-card {
    background: var(--bg);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-3xl);
    padding: 2rem;
    box-shadow: var(--shadow);
}
.voor-wie-amount { text-align: center; margin-bottom: 2rem; }
.voor-wie-amount-num   { font-size: 3rem; font-weight: 900; color: var(--accent-400); line-height: 1.1; }
.voor-wie-amount-label { font-size: .9375rem; font-weight: 500; color: var(--gray-500); margin-top: .25rem; }

.checklist    { display: flex; flex-direction: column; gap: .75rem; list-style: none; margin-bottom: 2rem; }
.checklist li { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; color: var(--gray-700); }
.checklist li svg { color: var(--brand-500); flex-shrink: 0; }

/* Sectoren — bg-brand-700 py-16 */
.sectoren-section { background: var(--brand-700); padding: 4rem 0; text-align: center; }
.sectoren-section h2  { font-size: 1.875rem; color: #fff; margin-bottom: 1rem; }
.sectoren-section .sub { color: #c89de8; margin-bottom: 2.5rem; max-width: 32rem; margin-left: auto; margin-right: auto; font-size: .9375rem; line-height: 1.65; }
.sectoren-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.sector-pill {
    background: rgba(255,255,255,.15);
    color: #fff; font-size: .9375rem; font-weight: 500;
    padding: .5rem 1rem; border-radius: 9999px;
}

/* For backwards compat (other pages using old selector) */
.sectoren-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.sector-card   { display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.15); color: #fff; font-weight: 500; font-size: .9375rem; padding: .5rem 1rem; border-radius: 9999px; text-decoration: none; transition: background var(--transition); }
.sector-card:hover { background: rgba(255,255,255,.25); color: #fff; text-decoration: none; }
.sector-icon { font-size: 1rem; }

/* Bottom CTA — bg-gray-50 py-24 */
.cta-section  { background: var(--gray-50); padding: 6rem 0; }
.cta-content  { text-align: center; max-width: 32rem; margin: 0 auto; }
.cta-content h2 { font-size: 2.25rem; color: var(--gray-900); margin-bottom: 1rem; }
.cta-content p  { font-size: 1.125rem; color: var(--gray-500); margin-bottom: 2.5rem; }
.cta-actions    { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-fine-print { font-size: .875rem; color: var(--gray-400); margin-top: 1.25rem; }

/* Content pages */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.benefit-card  { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--radius-2xl); padding: 1.5rem; }
.benefit-icon  { font-size: 2rem; margin-bottom: .75rem; }
.faq-list      { display: flex; flex-direction: column; gap: 1rem; }
.faq-item      { border-left: 3px solid var(--brand-400); padding-left: 1rem; }
.faq-item h3   { margin-bottom: .375rem; }
.cta-box       { background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--radius-2xl); padding: 3rem 2rem; text-align: center; }
.cta-box h2    { margin-bottom: 1.5rem; }

/* ── Voor wie / voor-werkgevers compat ─────────────────────────── */
.voor-wie-card-compat { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--radius-2xl); padding: 2rem; }
.voor-wie-icon        { font-size: 2.5rem; margin-bottom: 1rem; }

/* ══════════════════════════════════════════════════════════════════
   SUBPAGES — voor-werkgevers / voor-tipgevers (dark hero replica)
   ══════════════════════════════════════════════════════════════════ */
.subhero { background: var(--brand-600); color: #fff; padding: 5rem 0; text-align: center; }
.subhero-inner { max-width: 56rem; margin: 0 auto; }
.subhero-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.1); color: #fff;
    font-size: .875rem; font-weight: 600;
    padding: .5rem 1rem; border-radius: 9999px; margin-bottom: 2rem;
}
.subhero h1 { font-size: 2.5rem; font-weight: 900; line-height: 1.15; margin-bottom: 1.5rem; color: #fff; }
@media (min-width: 640px) { .subhero h1 { font-size: 3.75rem; } }
.subhero-sub { font-size: 1.125rem; color: rgba(255,255,255,.75); max-width: 42rem; margin: 0 auto 1rem; line-height: 1.7; }
@media (min-width: 640px) { .subhero-sub { font-size: 1.25rem; } }
.subhero-price {
    display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; justify-content: center;
    background: rgba(255,255,255,.1); border-radius: 1rem; padding: .75rem 1.5rem; margin-bottom: 2.5rem;
}
.subhero-price-label { color: rgba(255,255,255,.7); font-size: .875rem; font-weight: 500; }
.subhero-price-num   { font-size: 2.25rem; font-weight: 900; color: var(--accent-400); }
@media (min-width: 640px) { .subhero-price-num { font-size: 2.5rem; } }
.subhero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

.btn-outline-white {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .625rem 1.5rem; color: #fff;
    border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-xl);
    font-weight: 600; font-size: .9375rem; text-decoration: none;
    transition: background var(--transition);
}
.btn-outline-white:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }

.sub-section     { padding: 5rem 0; }
.sub-section-alt { background: var(--brand-50); }
.sub-section-inner { max-width: 56rem; margin: 0 auto; }
.sub-section-header { text-align: center; margin-bottom: 3.5rem; }
.sub-section-header h2 { font-size: 2.25rem; font-weight: 900; color: var(--gray-900); margin-bottom: .75rem; }
.sub-section-header p  { font-size: 1.125rem; color: var(--gray-500); }

/* Werkgevers: verticale genummerde stappen */
.sub-steps-vertical { display: flex; flex-direction: column; gap: 1.5rem; }
.sub-step-row {
    display: flex; gap: 1.5rem; align-items: flex-start;
    padding: 1.5rem; background: var(--brand-50); border: 1px solid var(--brand-100);
    border-radius: var(--radius-2xl);
}
.sub-step-row-icon {
    width: 3rem; height: 3rem; border-radius: var(--radius-xl);
    background: var(--brand-600); color: var(--accent-400);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sub-step-row-body { flex: 1; }
.sub-step-num { font-size: .75rem; font-weight: 700; color: var(--brand-500); margin-bottom: .25rem; letter-spacing: .03em; }
.sub-step-row-body h3 { font-size: 1.125rem; font-weight: 700; color: var(--gray-900); margin-bottom: .25rem; }
.sub-step-row-body p  { font-size: .875rem; color: var(--gray-500); line-height: 1.65; }

/* Tipgevers: 3-koloms gecentreerde stappen */
.sub-steps-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .sub-steps-grid { grid-template-columns: repeat(3, 1fr); } }
.sub-step-card {
    background: var(--brand-50); border: 1px solid var(--brand-100);
    border-radius: var(--radius-2xl); padding: 1.5rem; text-align: center;
}
.sub-step-card-icon {
    width: 3.5rem; height: 3.5rem; border-radius: var(--radius-2xl);
    background: var(--brand-600); color: var(--accent-400);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
}
.sub-step-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--gray-900); margin-bottom: .5rem; }
.sub-step-card p  { font-size: .875rem; color: var(--gray-500); line-height: 1.65; }

/* 2-koloms grids (voordelen / FAQ) */
.sub-grid-2 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .sub-grid-2 { grid-template-columns: 1fr 1fr; } }
.sub-grid-2-center { align-items: center; }
.sub-grid-2 h2 { font-size: 1.75rem; font-weight: 900; color: var(--gray-900); margin-bottom: 1.5rem; }
.checklist.checklist-start li { align-items: flex-start; }
.checklist.checklist-start li svg { margin-top: .1rem; }

/* Donkere prijs-kaart (werkgevers voordelen) */
.sub-price-card { background: var(--brand-600); border-radius: var(--radius-3xl); padding: 2.5rem 2rem; color: #fff; text-align: center; }
.sub-price-card-label { font-size: .875rem; color: rgba(255,255,255,.7); font-weight: 500; margin-bottom: .5rem; }
.sub-price-card-num   { font-size: 3.5rem; font-weight: 900; color: var(--accent-400); line-height: 1.1; margin-bottom: .5rem; }
.sub-price-card-note  { font-size: .875rem; color: rgba(255,255,255,.7); margin-bottom: 1.5rem; }
.sub-price-card-fine  { font-size: .75rem; color: rgba(255,255,255,.5); line-height: 1.6; }

/* "Dat is alles" callout (tipgevers) */
.sub-callout       { background: #fff; border: 1px solid var(--brand-100); border-radius: var(--radius-2xl); padding: 1.25rem; margin-top: 1.5rem; }
.sub-callout-title { font-size: .875rem; font-weight: 700; color: var(--gray-700); margin-bottom: .25rem; }
.sub-callout-body  { font-size: .875rem; color: var(--gray-500); line-height: 1.6; }

/* FAQ-lijst */
.sub-faq   { display: flex; flex-direction: column; gap: 1.25rem; }
.sub-faq-q { font-size: .9375rem; font-weight: 600; color: var(--gray-900); margin-bottom: .25rem; }
.sub-faq-a { font-size: .875rem; color: var(--gray-500); line-height: 1.65; }

/* CTA donker (tipgevers onderaan) */
.sub-cta-dark { background: var(--brand-600); padding: 5rem 0; text-align: center; }
.sub-cta-dark-num { font-size: 3.5rem; font-weight: 900; color: var(--accent-400); margin-bottom: .5rem; line-height: 1.1; }
.sub-cta-dark h2  { font-size: 1.875rem; font-weight: 900; color: #fff; margin-bottom: 1rem; }
.sub-cta-dark p   { color: rgba(255,255,255,.8); margin-bottom: 2rem; font-size: 1rem; }

/* CTA licht (werkgevers onderaan) */
.sub-cta-light { text-align: center; padding: 5rem 0; }
.sub-cta-light h2 { font-size: 2.25rem; font-weight: 900; color: var(--gray-900); margin-bottom: 1rem; }
.sub-cta-light p  { font-size: 1.125rem; color: var(--gray-500); margin-bottom: 2rem; max-width: 36rem; margin-left: auto; margin-right: auto; }

/* ══════════════════════════════════════════════════════════════════
   ERROR PAGES
   ══════════════════════════════════════════════════════════════════ */
.error-page    { padding: 8rem 0; }
.error-content { text-align: center; }
.error-code    { font-size: 6rem; font-weight: 900; color: var(--brand-200); line-height: 1; margin-bottom: .5rem; }
.error-content h2 { margin-bottom: .75rem; }
.error-content p  { margin-bottom: 1.5rem; }

/* 429 — "Ho, rustig aan!" */
.rate-limit-page .error-content { max-width: 34rem; margin: 0 auto; }
.rate-limit-page .error-emoji   { font-size: 3.5rem; line-height: 1; margin-bottom: 1rem; }
.rate-limit-page h1             { font-size: 2rem; margin-bottom: 1rem; color: var(--brand-600); }
.error-lead                     { color: var(--text-muted, #6b7280); font-size: 1.05rem; line-height: 1.6; }
.rate-countdown-wrap            { font-weight: 600; margin-bottom: 1.5rem; }
.rate-countdown {
    display: inline-block;
    min-width: 6ch;
    padding: .1rem .55rem;
    border-radius: .4rem;
    background: var(--brand-50, #f5edfb);
    color: var(--brand-600);
    font-variant-numeric: tabular-nums;
}
/* Inline throttle-waarschuwing op het inlogformulier */
.rate-warning { margin-bottom: 1.25rem; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER  — simple bg-white border-t border-gray-100 py-8
   ══════════════════════════════════════════════════════════════════ */
.site-footer { background: var(--bg); border-top: 1px solid var(--gray-100); padding: 2rem 0; margin-top: auto; }
.footer-row  { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
@media (min-width: 640px) { .footer-row { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-copy  { font-size: .875rem; color: var(--gray-400); }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { font-size: .875rem; color: var(--gray-400); text-decoration: none; transition: color var(--transition); }
.footer-links a:hover { color: var(--gray-600); }

/* ══════════════════════════════════════════════════════════════════
   INSTALL WIZARD
   ══════════════════════════════════════════════════════════════════ */
.install-page  { max-width: 640px; margin: 3rem auto; padding: 0 1rem; }
.install-card  { background: var(--bg); border: 1px solid var(--gray-100); border-radius: var(--radius-2xl); padding: 2rem; box-shadow: var(--shadow); }
.install-step  { margin-bottom: 2rem; }
.install-step h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.check-list    { list-style: none; }
.check-list li { padding: .375rem 0; font-size: .9375rem; display: flex; align-items: center; gap: .5rem; }
.check-ok   { color: #166534; }
.check-fail { color: #991b1b; }
.check-warn { color: #92400e; }

/* ══════════════════════════════════════════════════════════════════
   ANIMATION
   ══════════════════════════════════════════════════════════════════ */
.fade-up         { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .vacatures-layout { grid-template-columns: 1fr; }
    .filters-sidebar  { position: static; display: none; }
    .filters-sidebar.open { display: block; }
    .mobile-filter-btn { display: inline-flex; }
    .detail-layout { grid-template-columns: 1fr; }
    .vacatures-results .vacatures-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .main-nav, .header-actions { display: none; }
    .mobile-menu-btn { display: flex; }
    .stats-cols { grid-template-columns: 1fr; gap: 1.5rem; }
    .form-row-2 { grid-template-columns: 1fr; }
    .profile-grid { grid-template-columns: 1fr; }
    .detail-sidebar-card { position: static; }
    .funnel-row { grid-template-columns: 120px 1fr; }
    .recovery-codes-list { grid-template-columns: 1fr; }
    .tabs { gap: 0; }
    .tab  { padding: .625rem .875rem; font-size: .875rem; }
}

@media (max-width: 480px) {
    .hero-actions { flex-direction: column; }
    .cta-actions  { flex-direction: column; align-items: center; }
    h1 { font-size: 1.625rem; }
    .vacature-list-card { flex-direction: column; }
    .vacature-list-aside { flex-direction: row; align-items: center; }
    .vacatures-results .vacatures-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   WERKGEVER-DASHBOARD — Cockpit, Smart Alerts, Kanban, Analytics
   ══════════════════════════════════════════════════════════════════ */

/* ── Cockpit: klikbare metric cards ─────────────────────────────── */
.cockpit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.metric-card {
    display: flex; align-items: center; gap: .875rem;
    background: var(--bg); border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl); padding: 1.125rem 1.25rem;
    cursor: pointer; text-align: left; font-family: inherit;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.metric-card:active { transform: translateY(0); }
.metric-icon { width: 42px; height: 42px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.metric-icon-blue   { background: #e6f1fb; color: #1d4ed8; }
.metric-icon-green  { background: #eafaf0; color: #15803d; }
.metric-icon-purple { background: var(--brand-50); color: var(--brand-500); }
.metric-icon-amber  { background: #fef6e6; color: #b45309; }
.metric-value { font-size: 1.75rem; font-weight: 900; color: var(--gray-900); line-height: 1; display: flex; align-items: center; gap: .375rem; }
.metric-label { font-size: .8125rem; color: var(--gray-500); margin-top: .25rem; }
.metric-badge { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; display: inline-block; }
.metric-card-alert { border-color: #f7c9a8; background: #fffaf3; }
.metric-card-alert .metric-badge { animation: metric-pulse 1.6s ease-in-out infinite; }
@keyframes metric-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); } 50% { box-shadow: 0 0 0 5px rgba(220,38,38,0); } }

/* ── Smart alerts ───────────────────────────────────────────────── */
.smart-alerts { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.smart-alert {
    display: flex; align-items: center; gap: .75rem;
    background: var(--bg); border: 1px solid var(--gray-200);
    border-left: 3px solid var(--gray-300);
    border-radius: var(--radius-xl); padding: .75rem 1rem;
}
.smart-alert-urgent { border-left-color: #dc2626; background: #fffaf9; }
.smart-alert-icon { color: var(--gray-400); flex-shrink: 0; display: flex; }
.smart-alert-urgent .smart-alert-icon { color: #dc2626; }
.smart-alert-text { flex: 1; font-size: .875rem; color: var(--gray-700); line-height: 1.4; }
.smart-alert-actions { display: flex; gap: .375rem; flex-shrink: 0; flex-wrap: wrap; }

/* ── Pipeline toolbar ───────────────────────────────────────────── */
.pipeline-toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pipeline-toolbar-label { font-size: .875rem; font-weight: 600; color: var(--gray-600); }
.pipeline-toolbar .form-select { width: auto; min-width: 200px; max-width: 100%; }
.pipeline-hint { font-size: .8125rem; color: var(--gray-400); }

/* ── Kanban-bord ────────────────────────────────────────────────── */
.kanban-wrap { position: relative; }
.kanban-board {
    display: grid; grid-auto-flow: column; grid-auto-columns: 280px;
    gap: 1rem; overflow-x: auto; padding-bottom: 1rem;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.kanban-col {
    background: var(--gray-50); border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl); display: flex; flex-direction: column;
    scroll-snap-align: start; min-height: 160px;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.kanban-col-head { display: flex; align-items: center; gap: .5rem; padding: .875rem 1rem; border-bottom: 1px solid var(--gray-100); }
.kanban-col-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.kanban-col-label { font-size: .8125rem; font-weight: 700; color: var(--gray-700); text-transform: uppercase; letter-spacing: .03em; flex: 1; }
.kanban-col-count { font-size: .75rem; font-weight: 700; color: var(--gray-500); background: var(--bg); border: 1px solid var(--gray-200); border-radius: 9999px; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .375rem; }
.kanban-col-list { padding: .75rem; display: flex; flex-direction: column; gap: .625rem; flex: 1; min-height: 80px; }
.kanban-col-empty { font-size: .75rem; color: var(--gray-400); text-align: center; padding: 1.25rem .5rem; border: 1.5px dashed var(--gray-200); border-radius: var(--radius-xl); }
/* Verberg de 'sleep hier'-tekst zodra er minstens één kaart in de kolom staat */
.kanban-col-list .kanban-card ~ .kanban-col-empty { display: none; }

/* Kolomaccenten */
.col-blue   .kanban-col-dot { background: #3b82f6; }
.col-amber  .kanban-col-dot { background: #d97706; }
.col-purple .kanban-col-dot { background: #7c3aed; }
.col-green  .kanban-col-dot { background: #16a34a; }
.col-teal   .kanban-col-dot { background: #0d9488; }
.col-red    .kanban-col-dot { background: #dc2626; }

/* Drop-zones tijdens slepen */
.kanban-board.is-dragging .kanban-col.drop-valid { border-color: var(--brand-300); background: var(--brand-50); }
.kanban-board.is-dragging .kanban-col.drop-invalid { opacity: .45; }
.kanban-col.drop-over { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(123,45,158,.12); background: var(--brand-50); }
.kanban-col.drop-over .kanban-col-empty { border-color: var(--brand-400); color: var(--brand-500); }

/* ── Kanban-kaart ───────────────────────────────────────────────── */
.kanban-card {
    display: flex; gap: .5rem;
    background: var(--bg); border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl); padding: .75rem;
    box-shadow: var(--shadow-sm); cursor: grab;
    touch-action: pan-y; user-select: none;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.kanban-card:hover { box-shadow: var(--shadow-md); border-color: var(--gray-300); }
.kanban-card:active { cursor: grabbing; }
.kanban-card-grip { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding-top: .125rem; flex-shrink: 0; }
.kanban-card-grip span { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--gray-300); box-shadow: 6px 0 0 var(--gray-300); }
.kanban-card-body { flex: 1; min-width: 0; }
.kanban-card-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.kanban-avatar { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: .75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kanban-card-naam { min-width: 0; }
.kanban-naam { display: block; font-size: .875rem; font-weight: 700; color: var(--gray-900); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban-card-tijd { font-size: .6875rem; color: var(--gray-400); }
.kanban-tip { display: inline-flex; align-items: center; gap: .25rem; font-size: .6875rem; font-weight: 600; padding: .1875rem .5rem; border-radius: 9999px; background: var(--gray-100); color: var(--gray-600); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-tip-direct { background: transparent; color: var(--gray-400); padding-left: 0; font-weight: 500; }
.kanban-tip-top { background: #fef6e6; color: #b45309; }
.kanban-tip-top svg { color: var(--accent-500); }
.kanban-card-top { border-color: #f5d99a; box-shadow: 0 0 0 1px #f5d99a inset, var(--shadow-sm); }
.kanban-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .625rem; }
.kanban-card-link { font-size: .75rem; font-weight: 600; color: var(--brand-500); }
.kanban-card-cv { color: var(--gray-400); display: flex; padding: .125rem; border-radius: .375rem; }
.kanban-card-cv:hover { color: var(--brand-500); }

/* Sleep-status */
.kanban-card.is-placeholder { opacity: .35; box-shadow: none; border-style: dashed; }
.kanban-ghost {
    position: fixed; z-index: 200; width: 256px; margin: 0; pointer-events: none;
    box-shadow: var(--shadow-lg); transform: rotate(1.5deg); cursor: grabbing;
    border-color: var(--brand-300);
}
/* Glow-microinteractie bij 'Aangenomen' */
@keyframes accept-glow {
    0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.0); }
    30%  { box-shadow: 0 0 0 4px rgba(22,163,74,.35); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
.kanban-card.just-accepted { animation: accept-glow 1.1s ease-out; border-color: #86efac; }
.kanban-card.just-moved { animation: accept-glow 1.1s ease-out; }

/* ── Skeleton loaders ───────────────────────────────────────────── */
.skeleton-card { height: 92px; border-radius: var(--radius-xl); background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%); background-size: 400% 100%; animation: skeleton-shine 1.3s ease-in-out infinite; margin-bottom: .625rem; }
@keyframes skeleton-shine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── Analytics ──────────────────────────────────────────────────── */
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.funnel-stage + .funnel-stage { margin-top: 1rem; }
.funnel-stage-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .375rem; }
.funnel-stage-label { font-size: .875rem; font-weight: 600; color: var(--gray-700); }
.funnel-stage-val { font-size: 1.125rem; font-weight: 900; color: var(--gray-900); }
.funnel-track { height: 12px; background: var(--gray-100); border-radius: 9999px; overflow: hidden; }
.funnel-fill { height: 100%; border-radius: 9999px; transition: width .5s ease; }
.funnel-bar-blue   { background: #3b82f6; }
.funnel-bar-purple { background: var(--brand-500); }
.funnel-bar-green  { background: #16a34a; }
.funnel-stage-sub { font-size: .75rem; color: var(--gray-400); margin-top: .3125rem; }

.fin-widget .fin-row { display: flex; justify-content: space-between; align-items: baseline; padding: .625rem 0; border-bottom: 1px solid var(--gray-100); }
.fin-row-label { font-size: .875rem; color: var(--gray-600); }
.fin-row-val { font-size: 1rem; font-weight: 800; color: var(--gray-900); }
.fin-row-sub { font-size: .75rem; color: var(--gray-400); margin: .25rem 0 .5rem; }
.fin-savings { margin-top: 1.25rem; background: var(--brand-600); border-radius: var(--radius-2xl); padding: 1.25rem; color: #fff; }
.fin-savings-label { font-size: .8125rem; color: rgba(255,255,255,.7); }
.fin-savings-val { font-size: 2rem; font-weight: 900; color: var(--accent-400); line-height: 1.1; margin: .125rem 0 .375rem; }
.fin-savings-note { font-size: .6875rem; color: rgba(255,255,255,.55); line-height: 1.5; }

/* ── Aanname-datum modal ────────────────────────────────────────── */
.kanban-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.kanban-modal[hidden] { display: none; }
.kanban-modal-backdrop { position: absolute; inset: 0; background: rgba(17,24,39,.5); animation: fade-in .15s ease; }
.kanban-modal-card { position: relative; background: var(--bg); border-radius: var(--radius-2xl); padding: 1.5rem; width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); animation: modal-pop .18s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.kanban-modal-card h3 { font-size: 1.125rem; font-weight: 800; color: var(--gray-900); margin-bottom: .25rem; }
.kanban-modal-sub { font-size: .875rem; color: var(--gray-500); margin-bottom: 1rem; }
.kanban-modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }

/* ── Responsive dashboard ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .cockpit { grid-template-columns: repeat(2, 1fr); }
    .analytics-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .cockpit { grid-template-columns: 1fr 1fr; gap: .625rem; }
    .metric-card { flex-direction: column; align-items: flex-start; gap: .5rem; padding: .875rem; }
    .metric-value { font-size: 1.5rem; }
    .smart-alert { flex-wrap: wrap; }
    .smart-alert-actions { width: 100%; }
    /* Kanban → volledige-breedte, swipe-bare kolommen */
    .kanban-board { grid-auto-columns: 86%; scroll-snap-type: x mandatory; gap: .75rem; }
}

/* ══════════════════════════════════════════════════════════════════
   SUCCES-PAGINA — sollicitatie verstuurd
   ══════════════════════════════════════════════════════════════════ */
.success-page { padding: 4rem 0; }
.success-card {
    max-width: 34rem; margin: 0 auto;
    background: var(--bg); border: 1px solid var(--gray-100);
    border-radius: var(--radius-3xl); padding: 3rem 2rem;
    text-align: center; box-shadow: var(--shadow-sm);
}
.success-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: #eafaf0; color: #16a34a;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem;
}
.success-card h1 { font-size: 1.75rem; margin-bottom: .75rem; }
.success-lead { font-size: 1.0625rem; color: var(--gray-600); line-height: 1.6; margin-bottom: 1.5rem; }
.success-note {
    display: flex; align-items: flex-start; gap: .625rem; text-align: left;
    background: var(--brand-50); color: var(--brand-700);
    border-radius: var(--radius-xl); padding: 1rem 1.25rem;
    font-size: .9375rem; line-height: 1.6; margin-bottom: 1rem;
}
.success-note svg { flex-shrink: 0; margin-top: .15rem; color: var(--brand-500); }
.success-tip {
    background: #fef6e6; color: #b45309;
    border-radius: var(--radius-xl); padding: .875rem 1.25rem;
    font-size: .875rem; line-height: 1.6; margin-bottom: 1rem; text-align: left;
}
.success-wish { font-size: 1.0625rem; font-weight: 700; color: var(--gray-900); margin: 1.5rem 0; }
.success-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 480px) {
    .success-card { padding: 2rem 1.25rem; }
    .success-actions { flex-direction: column; }
    .success-actions .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   ROLLEN-VERBETERINGEN v19 — validatie, gesloten, IBAN, impersonatie
   ══════════════════════════════════════════════════════════════════ */

/* Inline formuliervalidatie */
.field-error { display: block; color: #dc2626; font-size: .8125rem; margin-top: .375rem; }
.form-input.input-invalid, .form-textarea.input-invalid { border-color: #dc2626; }
.form-input.is-disabled { background: var(--gray-100); color: var(--gray-500); cursor: not-allowed; }

/* Gesloten-vacaturepagina */
.gesloten-page { padding: 3.5rem 0; }
.gesloten-head { text-align: center; max-width: 34rem; margin: 0 auto 2.5rem; }
.gesloten-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--gray-100); color: var(--gray-500); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
.gesloten-head h1 { font-size: 1.75rem; margin-bottom: .75rem; }
.gesloten-head p { color: var(--gray-500); line-height: 1.6; }
.gesloten-grid { margin-bottom: 2rem; }
.gesloten-actions { text-align: center; }

/* IBAN-waarschuwing (tipgever-dashboard) */
.iban-alert {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: #fef6e6; border: 1px solid #f5d99a; border-radius: var(--radius-2xl);
    padding: 1.125rem 1.25rem; margin-bottom: 1.5rem;
}
.iban-alert-body { display: flex; align-items: center; gap: .875rem; }
.iban-alert-icon { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #b45309; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.iban-alert-title { font-weight: 800; color: #92400e; }
.iban-alert-text { font-size: .875rem; color: #b45309; }

/* Admin: mismatch-koppelkaart accent */
.koppel-flagged { border-color: #f5d99a; box-shadow: 0 0 0 1px #f5d99a inset; }

/* Impersonatie-balk */
.impersonate-bar {
    background: #1f2937; color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
    padding: .625rem 1rem; font-size: .875rem; text-align: center;
}
.impersonate-bar strong { color: var(--accent-400); }
.impersonate-stop {
    background: #fff; color: #1f2937; border: none; cursor: pointer;
    font-size: .8125rem; font-weight: 700; padding: .375rem .875rem; border-radius: .5rem;
}
.impersonate-stop:hover { background: var(--gray-200); }

/* ── Kanban kaart-menu (⋯ snelacties) ───────────────────────────── */
.kanban-card-menu-btn {
    margin-left: auto; flex-shrink: 0;
    background: none; border: none; cursor: pointer;
    color: var(--gray-400); padding: .125rem; border-radius: .375rem;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition), color var(--transition);
}
.kanban-card-menu-btn:hover { background: var(--gray-100); color: var(--gray-700); }

.kanban-menu {
    position: fixed; z-index: 350; min-width: 190px;
    background: var(--bg); border: 1px solid var(--gray-100);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
    padding: .375rem;
}
.kanban-menu[hidden] { display: none; }
.kanban-menu-item {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .5rem .625rem; border: none; background: none; cursor: pointer;
    font-size: .875rem; font-weight: 500; color: var(--gray-700);
    border-radius: .5rem; text-align: left;
    transition: background var(--transition);
}
.kanban-menu-item:hover { background: var(--gray-50); }
.kanban-menu-arrow { color: var(--brand-500); font-weight: 700; }
.kanban-menu-item-danger { color: #dc2626; margin-top: .125rem; border-top: 1px solid var(--gray-100); border-radius: 0 0 .5rem .5rem; padding-top: .625rem; }
.kanban-menu-item-danger:hover { background: #fef2f2; }
.kanban-menu-empty { padding: .5rem .625rem; font-size: .8125rem; color: var(--gray-400); }

/* ── Homepage-toast ─────────────────────────────────────────────── */
.site-toast {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 300;
    width: 330px; max-width: calc(100vw - 2.5rem);
    background: linear-gradient(145deg, var(--brand-500), var(--brand-600));
    border: 1px solid var(--brand-600);
    border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg);
    padding: 1rem 1.75rem 1rem 1.125rem; display: flex; gap: .75rem;
    opacity: 0; transform: translateY(18px);
    transition: opacity .35s ease, transform .35s ease;
}
.site-toast[hidden] { display: none; }
.site-toast.is-visible { opacity: 1; transform: translateY(0); }
.site-toast-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center; }
.site-toast-body { min-width: 0; }
.site-toast-eyebrow { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-400); margin-bottom: .125rem; }
.site-toast-title { font-size: .9375rem; font-weight: 800; color: #fff; line-height: 1.3; }
.site-toast-sub { font-size: .8125rem; color: rgba(255,255,255,.82); margin-top: .125rem; }
.site-toast-btn { display: inline-block; margin-top: .625rem; font-size: .8125rem; font-weight: 700; color: var(--brand-600); background: var(--accent-400); padding: .4rem .8rem; border-radius: .5rem; transition: background var(--transition); }
.site-toast-btn:hover { background: var(--accent-500); color: var(--brand-600); text-decoration: none; }
.site-toast-close { position: absolute; top: .5rem; right: .5rem; background: none; border: none; cursor: pointer; color: rgba(255,255,255,.7); padding: .25rem; border-radius: .375rem; display: flex; transition: background var(--transition), color var(--transition); }
.site-toast-close:hover { background: rgba(255,255,255,.16); color: #fff; }
@media (max-width: 480px) { .site-toast { left: .75rem; right: .75rem; bottom: .75rem; width: auto; } }

/* Cookie- & privacybanner (linksonder, botst niet met de toast rechtsonder) */
.cookie-banner {
    position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 400;
    width: 380px; max-width: calc(100vw - 2.5rem);
    background: var(--bg); border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg);
    padding: 1.25rem;
    animation: cookieIn .4s ease both;
}
@keyframes cookieIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cookie-banner-text strong { display: block; font-weight: 800; color: var(--gray-900); margin-bottom: .25rem; }
.cookie-banner-text p { font-size: .8125rem; color: var(--gray-500); line-height: 1.5; margin: 0; }
.cookie-banner-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.cookie-banner-actions .btn { flex: 1; }
.cookie-banner-hide { opacity: 0; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease; }
@media (max-width: 480px) { .cookie-banner { left: .75rem; right: .75rem; bottom: .75rem; width: auto; } }

/* Locatie-autocomplete (plaatsnaam-suggesties) */
.loc-autocomplete { position: relative; }
.loc-suggestions {
    position: absolute; top: calc(100% + .25rem); left: 0; right: 0; z-index: 60;
    margin: 0; padding: .25rem; list-style: none;
    background: var(--bg); border: 1px solid var(--gray-100);
    border-radius: .6rem; box-shadow: var(--shadow-lg);
    max-height: 260px; overflow-y: auto;
}
.loc-suggestion { padding: .5rem .625rem; border-radius: .4rem; cursor: pointer; font-size: .9375rem; color: var(--gray-900); }
.loc-suggestion:hover, .loc-suggestion.is-active { background: var(--brand-50); color: var(--brand-600); }

/* Kruimelpad (vacature-detail) */
.detail-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--gray-500); margin-bottom: 1.25rem; }
.detail-breadcrumb a { color: var(--gray-500); text-decoration: none; }
.detail-breadcrumb a:hover { color: var(--brand-600); text-decoration: underline; }
.detail-breadcrumb-sep { color: var(--gray-400); }
.detail-breadcrumb [aria-current="page"] { color: var(--gray-700); font-weight: 600; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Werkgever-dashboard: header met vaste 'Nieuwe vacature'-CTA */
.wg-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; }
.wg-new-btn { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.wg-new-btn.is-active { box-shadow: 0 0 0 3px rgba(242, 201, 76, .45); }
.vacatures-admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 640px) {
    .wg-header-row { align-items: stretch; }
    .wg-header-row .wg-new-btn { width: 100%; justify-content: center; }
}

/* Tipgever-dashboard: kop van 'Vacatures om te delen' */
.deel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ═══════════════ Landingspagina /word-tipgever ═══════════════ */
.lp-body { background: #fff; color: #334155; }
.lp-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.lp-narrow { max-width: 60rem; }

/* Nav */
.lp-nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--gray-100); }
.lp-nav-inner { height: 4rem; display: flex; align-items: center; justify-content: space-between; }
.lp-nav-cta { white-space: nowrap; }

/* Decoratieve blobs */
.lp-blob { position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none; }
.lp-blob-1 { top: -6rem; right: -6rem; width: 24rem; height: 24rem; background: var(--brand-100); opacity: .7; }
.lp-blob-2 { top: 10rem; left: -6rem; width: 18rem; height: 18rem; background: rgba(242,201,76,.2); }
.lp-blob-3 { top: -5rem; right: -3rem; width: 18rem; height: 18rem; background: rgba(242,201,76,.2); }

/* Hero */
.lp-hero { position: relative; overflow: hidden; }
.lp-hero-grid { position: relative; z-index: 1; display: grid; gap: 3.5rem; align-items: center; padding: 4rem 1.25rem 5rem; }
@media (min-width: 900px) { .lp-hero-grid { grid-template-columns: 1fr 1fr; padding-top: 5.5rem; padding-bottom: 7rem; } }
.lp-badge { display: inline-flex; align-items: center; gap: .5rem; background: var(--brand-100); border: 1px solid var(--brand-200); color: var(--brand-600); font-weight: 600; font-size: .875rem; padding: .4rem 1rem; border-radius: 999px; }
.lp-badge-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent-400); }
.lp-h1 { margin: 1.5rem 0 0; font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; color: var(--gray-900); }
.lp-accent { color: var(--brand-500); }
.lp-sub { margin: 1.5rem 0 0; font-size: 1.125rem; line-height: 1.7; color: var(--gray-600); max-width: 34rem; }
.lp-cta-row { margin-top: 2rem; }
.lp-cta { box-shadow: 0 20px 60px -15px rgba(74,21,100,.35); }
.lp-arrow { display: inline-block; transition: transform var(--transition); }
.btn:hover .lp-arrow { transform: translateX(4px); }
.lp-micro { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .875rem; color: var(--gray-500); }
.lp-micro li { display: inline-flex; align-items: center; gap: .4rem; }
.lp-micro svg { width: 1rem; height: 1rem; color: #22c55e; }

/* Hero media */
.lp-hero-media { position: relative; }
.lp-video { position: relative; aspect-ratio: 16/9; border-radius: 1.5rem; overflow: hidden; background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); box-shadow: 0 20px 60px -15px rgba(74,21,100,.45); }
.lp-video-play { position: absolute; inset: 0; margin: auto; width: 5rem; height: 5rem; border: none; border-radius: 50%; background: rgba(255,255,255,.95); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-lg); transition: transform var(--transition); }
.lp-video-play:hover { transform: scale(1.08); }
.lp-video-play svg { width: 2rem; height: 2rem; color: var(--brand-600); transform: translateX(2px); }
.lp-video-label { position: absolute; bottom: 1rem; left: 1.25rem; color: rgba(255,255,255,.9); font-size: .875rem; font-weight: 500; }
.lp-video-time { position: absolute; top: 1rem; right: 1rem; background: rgba(0,0,0,.25); color: #fff; font-size: .75rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; }
.lp-proof-bubble { position: absolute; bottom: -1.25rem; left: -1.25rem; display: flex; align-items: center; gap: .75rem; background: #fff; padding: .75rem 1rem; border-radius: 1rem; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-100); animation: lpfloat 5s ease-in-out infinite; }
.lp-proof-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #dcfce7; color: #16a34a; }
.lp-proof-icon svg { width: 1.25rem; height: 1.25rem; }
.lp-proof-bubble strong { display: block; font-size: .875rem; font-weight: 800; color: var(--gray-900); }
.lp-proof-bubble small { color: var(--gray-500); font-size: .75rem; }
@keyframes lpfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 640px) { .lp-proof-bubble { display: none; } }

/* Secties */
.lp-section { padding: 5rem 0; }
.lp-section-alt { background: #f8f7fc; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.lp-head { text-align: center; max-width: 42rem; margin: 0 auto 3.5rem; }
.lp-eyebrow { display: block; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-500); margin-bottom: .5rem; }
.lp-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: -.02em; color: var(--gray-900); line-height: 1.15; }
.lp-lead { margin-top: 1rem; color: var(--gray-600); }

/* Vergelijking */
.lp-compare { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .lp-compare { grid-template-columns: 1fr 1fr; } }
.lp-cmp { position: relative; background: #fff; border: 1px solid var(--gray-100); border-radius: 1.5rem; padding: 2rem; }
.lp-cmp-good { border: 2px solid var(--accent-400); box-shadow: 0 20px 60px -15px rgba(74,21,100,.2); }
.lp-cmp-tag { display: inline-block; background: #f1f5f9; color: var(--gray-500); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .3rem .75rem; border-radius: 999px; }
.lp-cmp-tag-good { background: var(--brand-100); color: var(--brand-600); }
.lp-cmp-ribbon { position: absolute; top: -.75rem; left: 2rem; background: var(--accent-400); color: var(--brand-600); font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; padding: .3rem .75rem; border-radius: 999px; }
.lp-cmp-rows { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.lp-row { display: flex; align-items: center; justify-content: space-between; background: #f8fafc; padding: .75rem 1rem; border-radius: .75rem; color: var(--gray-600); }
.lp-row strong { color: #334155; }
.lp-row-soft { background: rgba(242,232,250,.55); }
.lp-row-bad { background: #fef2f2; box-shadow: inset 0 0 0 1px #fee2e2; }
.lp-row-bad span, .lp-row-bad strong { color: #dc2626; font-weight: 800; }
.lp-row-good { background: linear-gradient(90deg, var(--brand-600), var(--brand-500)); }
.lp-row-good span { color: #fff; font-weight: 600; }
.lp-row-good strong { color: var(--accent-400); font-size: 1.5rem; font-weight: 900; }
.lp-cmp-note { margin-top: 1.5rem; font-size: .875rem; color: var(--gray-500); }

/* Stappen */
.lp-steps { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-step { background: #fff; border: 1px solid var(--gray-100); border-radius: 1.5rem; padding: 2rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.lp-step-hl { background: rgba(242,232,250,.4); border-color: var(--brand-200); }
.lp-step-top { display: flex; align-items: center; justify-content: space-between; }
.lp-step-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; background: var(--brand-100); color: var(--brand-500); }
.lp-step-icon svg { width: 1.5rem; height: 1.5rem; }
.lp-step-icon-hl { background: var(--accent-400); color: var(--brand-600); }
.lp-step-num { font-size: 3rem; font-weight: 900; color: #eef2f7; line-height: 1; }
.lp-step-num-hl { color: var(--brand-200); }
.lp-step h3 { margin: 1.25rem 0 .5rem; font-size: 1.25rem; font-weight: 800; color: var(--gray-900); }
.lp-step p { color: var(--gray-600); line-height: 1.6; }

/* Vacatures */
.lp-vac-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
.lp-vac-all { font-size: .875rem; font-weight: 700; color: var(--brand-500); text-decoration: none; white-space: nowrap; }
.lp-vac-all:hover { color: var(--brand-600); }
.lp-vacatures { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .lp-vacatures { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 799px) { .lp-vacatures { grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -1.25rem; padding: 0 1.25rem; } .lp-vac-card { scroll-snap-align: start; } .lp-vacatures::-webkit-scrollbar { display: none; } }
.lp-vac-card { background: #fff; border: 1px solid var(--gray-100); border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); display: flex; flex-direction: column; }
.lp-vac-sector { align-self: flex-start; background: #f1f5f9; color: var(--gray-500); font-size: .75rem; font-weight: 600; padding: .25rem .75rem; border-radius: 999px; }
.lp-vac-card h3 { margin: 1rem 0 .25rem; font-size: 1.125rem; font-weight: 800; color: var(--gray-900); }
.lp-vac-loc { display: flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--gray-500); }
.lp-vac-loc svg { width: 1rem; height: 1rem; }
.lp-vac-badge { align-self: flex-start; margin-top: 1.25rem; background: var(--accent-400); color: var(--brand-600); font-weight: 900; font-size: .875rem; padding: .4rem .8rem; border-radius: .6rem; }
.lp-vac-btn { margin-top: 1.25rem; }

/* Testimonial */
.lp-testimonial { max-width: 48rem; margin: 3.5rem auto 0; background: #fff; border: 1px solid var(--gray-100); border-radius: 1.5rem; padding: 2.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.lp-stars { display: flex; gap: .25rem; color: var(--accent-400); }
.lp-stars svg { width: 1.25rem; height: 1.25rem; }
.lp-testimonial blockquote { margin: 1.25rem 0 0; font-size: 1.375rem; font-weight: 600; line-height: 1.4; color: #334155; }
.lp-testimonial figcaption { margin-top: 1.5rem; display: flex; align-items: center; gap: .75rem; }
.lp-avatar { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--brand-500); color: #fff; font-weight: 800; }
.lp-testimonial figcaption strong { display: block; color: var(--gray-900); }
.lp-testimonial figcaption small { color: var(--gray-500); }

/* Final CTA */
.lp-final-wrap { padding: 5rem 0; }
.lp-final { position: relative; overflow: hidden; border-radius: 2.5rem; background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); padding: 3.5rem 1.5rem; text-align: center; box-shadow: 0 30px 80px -20px rgba(74,21,100,.5); }
.lp-final-inner { position: relative; z-index: 1; }
.lp-guarantee { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1); color: #fff; font-size: .875rem; font-weight: 600; padding: .4rem 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.lp-guarantee svg { width: 1rem; height: 1rem; color: var(--accent-400); }
.lp-final-h { margin: 1.5rem 0 0; font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 900; letter-spacing: -.02em; color: #fff; line-height: 1.1; }
.lp-final-p { margin: 1rem auto 0; max-width: 34rem; color: var(--brand-100); }
.lp-final-cta { margin-top: 2rem; background: var(--accent-400); color: var(--brand-600); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.lp-final-cta:hover { background: #fff; color: var(--brand-600); transform: translateY(-2px); }
.lp-final-fine { margin-top: 1rem; font-size: .8125rem; color: rgba(242,232,250,.8); }

/* Footer */
.lp-footer { border-top: 1px solid var(--gray-100); background: #fff; }
.lp-footer .lp-wrap { padding-top: 3rem; padding-bottom: 3rem; }
.lp-footer-top { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 768px) { .lp-footer-top { flex-direction: row; align-items: center; justify-content: space-between; } }
.lp-footer-tag { margin-top: .75rem; font-size: .875rem; color: var(--gray-500); max-width: 20rem; }
.lp-trust { display: grid; grid-template-columns: repeat(2, auto); gap: 1rem 2rem; font-size: .875rem; }
@media (min-width: 640px) { .lp-trust { grid-template-columns: repeat(3, auto); } }
.lp-trust strong { display: block; color: var(--gray-900); }
.lp-trust span, .lp-trust a { display: block; color: var(--gray-500); text-decoration: none; }
.lp-trust a:hover { color: var(--brand-500); }
.lp-trust em { color: #cbd5e1; font-style: normal; }
.lp-footer-bottom { margin-top: 2.5rem; border-top: 1px solid var(--gray-100); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; }
@media (min-width: 640px) { .lp-footer-bottom { flex-direction: row; } }
.lp-footer-bottom p { font-size: .875rem; color: #94a3b8; }
.lp-footer-badge { display: inline-flex; align-items: center; gap: .5rem; background: #f0fdf4; color: #15803d; font-size: .875rem; font-weight: 600; padding: .5rem 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px #dcfce7; }
.lp-footer-badge svg { width: 1rem; height: 1rem; }

/* Mobiele sticky CTA */
.lp-sticky-cta { position: fixed; inset: auto 0 0 0; z-index: 40; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-top: 1px solid var(--gray-100); padding: .75rem 1rem; }
@media (min-width: 640px) { .lp-sticky-cta { display: none; } }
@media (max-width: 639px) { body.lp-body { padding-bottom: 5rem; } }

/* ═══════════════ Tipgever-profiel (/profiel, rol vinder) ═══════════════ */
.page-header-sub { max-width: 640px; margin-top: .35rem; }

.tp-profile { max-width: 720px; margin: 0 auto; }
.tp-form { display: flex; flex-direction: column; gap: 1.25rem; }

.tp-card { padding: 1.5rem; }

.tp-card-head { display: flex; align-items: flex-start; gap: .875rem; margin-bottom: 1.25rem; }
.tp-card-head h2 { font-size: 1.125rem; color: var(--gray-900); margin: 0; line-height: 1.3; }
.tp-card-head p  { font-size: .875rem; color: var(--text-muted); margin: .15rem 0 0; }

.tp-card-icon {
    flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-xl);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-100); color: var(--brand-600);
}
.tp-card-icon svg { width: 1.25rem; height: 1.25rem; }
.tp-card-icon-secure { background: #ecfdf5; color: #047857; }

/* Financiële card: subtiel 'vertrouwen'-randje */
.tp-card-secure { box-shadow: 0 0 0 3px rgba(16,185,129,.06), var(--shadow-sm); border: 1px solid #d1fae5; }

/* Beveiligd invoerveld met slot-icoon */
.secure-input { position: relative; }
.secure-input-icon {
    position: absolute; left: .875rem; top: 50%; transform: translateY(-50%);
    color: var(--gray-400); pointer-events: none; display: inline-flex;
}
.secure-input-icon svg { width: 1.1rem; height: 1.1rem; }
.secure-input .form-input { padding-left: 2.5rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.secure-input .form-input.is-valid   { border-color: #10b981; }
.secure-input .form-input.is-invalid { border-color: #ef4444; }

.iban-status { display: block; font-size: .8125rem; font-weight: 600; margin-top: .4rem; }
.iban-status.is-ok  { color: #047857; }
.iban-status.is-bad { color: #b91c1c; }

.secure-note {
    display: flex; align-items: flex-start; gap: .5rem; margin-top: .6rem;
    font-size: .8125rem; color: var(--text-muted); line-height: 1.5;
}
.secure-note svg { flex: 0 0 auto; width: 1rem; height: 1rem; color: #10b981; margin-top: .1rem; }

/* Sector-tags (checkbox-pillen) */
.sector-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.sector-tag { position: relative; cursor: pointer; user-select: none; }
.sector-tag input { position: absolute; opacity: 0; width: 0; height: 0; }
.sector-tag span {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .875rem; border-radius: 999px; font-size: .875rem; font-weight: 500;
    color: var(--gray-600); background: var(--bg);
    border: 1.5px solid var(--gray-200); transition: all .15s ease;
}
.sector-tag span::before {
    content: ""; width: .9rem; height: .9rem; border-radius: 50%; flex: 0 0 auto;
    border: 1.5px solid var(--gray-300); transition: all .15s ease;
}
.sector-tag:hover span { border-color: var(--brand-200); }
.sector-tag input:checked + span {
    color: var(--brand-600); background: var(--brand-100); border-color: var(--brand-500);
}
.sector-tag input:checked + span::before {
    border-color: var(--brand-500);
    background: var(--brand-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.6rem no-repeat;
}
.sector-tag input:focus-visible + span { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* Notificatie-toggle */
.toggle { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
    flex: 0 0 auto; position: relative; width: 2.75rem; height: 1.5rem; border-radius: 999px;
    background: var(--gray-300); transition: background .18s ease; margin-top: .1rem;
}
.toggle-thumb {
    position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s ease;
}
.toggle input:checked + .toggle-track { background: var(--brand-500); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(1.25rem); }
.toggle input:focus-visible + .toggle-track { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.toggle-text { font-size: .9375rem; color: var(--gray-600); line-height: 1.45; }

.tp-actions { position: sticky; bottom: 1rem; z-index: 5; }
.tp-actions .btn { width: 100%; box-shadow: var(--shadow-md); }

.tp-secondary { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.tp-muted { color: var(--text-muted); font-size: .9375rem; margin-bottom: .75rem; }

@media (min-width: 560px) {
    .tp-actions { position: static; }
    .tp-actions .btn { width: auto; min-width: 220px; }
}

/* ═══════════════ Landingspagina /plaats-vacature (werkgevers) ═══════════════ */
/* Gecentreerde hero-variant. .lp-sub heeft een max-breedte, dus die moet ook
   zijn eigen blok centreren; anders staat de tekst wel gecentreerd maar hangt
   het tekstblok links. */
.lp-hero-center { text-align: center; }
.lp-hero-center .lp-sub { margin-left: auto; margin-right: auto; }
.lp-hero-center .lp-cta-row,
.lp-hero-center .lp-micro { display: flex; justify-content: center; }

.wg-problems { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.wg-problem { background: var(--bg); border: 1px solid var(--gray-100); border-radius: var(--radius-2xl); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.wg-problem h3 { font-size: 1.0625rem; color: var(--gray-900); margin: .875rem 0 .4rem; }
.wg-problem p { font-size: .9375rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.wg-problem-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: var(--radius-xl);
    background: #fef2f2; color: #b91c1c; font-size: 1.25rem; font-weight: 800;
}
.wg-problem-icon svg { width: 1.375rem; height: 1.375rem; }

.wg-why { display: flex; flex-direction: column; gap: 1.5rem; }
.wg-why-item { display: flex; gap: 1rem; align-items: flex-start; }
.wg-why-item strong { display: block; color: var(--gray-900); font-size: 1.0625rem; margin-bottom: .3rem; }
.wg-why-item p { font-size: .9375rem; color: var(--text-muted); line-height: 1.65; margin: 0; }
.wg-why-num {
    flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-500); color: #fff; font-weight: 800;
}
.wg-why-foot {
    margin-top: 1.75rem; padding: 1rem 1.25rem; border-radius: var(--radius-xl);
    background: var(--brand-100); color: var(--brand-600);
    font-size: .9375rem; line-height: 1.6;
}

.wg-includes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .75rem 1.5rem; }
.wg-includes li { position: relative; padding-left: 1.9rem; font-size: .9375rem; color: var(--gray-600); line-height: 1.55; }
.wg-includes li::before {
    content: ""; position: absolute; left: 0; top: .1rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3.5'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.75rem no-repeat;
}

/* ═══════════════ Compacte stappenlijst (bevestigingspagina) ═══════════════ */
.steps-compact { display: flex; flex-direction: column; gap: 1rem; }
.step-compact { display: flex; align-items: flex-start; gap: .875rem; }
.step-compact strong { display: block; color: var(--gray-900); font-size: .9375rem; }
.step-compact p { margin: .15rem 0 0; font-size: .875rem; line-height: 1.5; }
.step-compact-num {
    flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-100); color: var(--brand-600);
    font-weight: 700; font-size: .875rem;
}

/* ═══════════════ Uitbetaalflow ═══════════════ */
/* Tipgever-dashboard: actiekaarten (betaalgegevens / ontvangst bevestigen) */
.payout-action { background: var(--bg); border: 1.5px solid var(--brand-200); border-radius: var(--radius-2xl); padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); }
.payout-action-paid { border-color: #bbf7d0; background: #f0fdf4; }
.payout-action-head { display: flex; gap: .875rem; align-items: flex-start; margin-bottom: 1rem; }
.payout-action-emoji { font-size: 1.75rem; line-height: 1; flex: 0 0 auto; }
.payout-action-title { font-weight: 700; color: var(--gray-900); line-height: 1.35; }
.payout-action-text { font-size: .9375rem; color: var(--text-muted); margin-top: .2rem; }
.payout-form .btn { margin-top: .75rem; }

/* Werkgever-dashboard: uitbetalingen aan tipgevers */
.wg-payouts { margin-bottom: 1.5rem; }
.wg-payout { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 0; border-top: 1px solid var(--gray-100); }
.wg-payout:first-of-type { border-top: none; }
.wg-payout-title { font-weight: 700; color: var(--gray-900); }
.wg-payout-sub { font-size: .875rem; color: var(--text-muted); margin-top: .15rem; }
.wg-payout-bank { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: .5rem; font-size: .875rem; color: var(--gray-600); }
.wg-payout-bank code { background: var(--brand-100); color: var(--brand-600); padding: .15rem .5rem; border-radius: 6px; letter-spacing: .04em; }
.wg-payout form { flex: 0 0 auto; }
.wg-payout-note { font-size: .8125rem; color: var(--text-muted); margin-top: 1rem; }

@media (max-width: 559px) {
    .wg-payout { flex-direction: column; align-items: stretch; }
    .wg-payout form .btn { width: 100%; }
}

/* ═══════════════ Betaalstap plaatsing (€500) ═══════════════ */
.pay-box { max-width: 520px; margin: 0 auto; }
.pay-summary h2 { font-size: 1.25rem; color: var(--gray-900); }
.pay-vac { color: var(--text-muted); margin: .25rem 0 1.25rem; font-size: 1.0625rem; }
.pay-lines { border-top: 1px solid var(--gray-100); margin-bottom: 1rem; }
.pay-line { display: flex; justify-content: space-between; padding: .75rem 0; border-bottom: 1px solid var(--gray-100); color: var(--gray-600); }
.pay-line strong { color: var(--gray-900); }
.pay-total span, .pay-total strong { font-weight: 800; color: var(--gray-900); font-size: 1.0625rem; }
.pay-note { font-size: .875rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1.25rem; }
.pay-summary .btn-full { width: 100%; }
.pay-secure { display: flex; align-items: center; gap: .4rem; justify-content: center; font-size: .8125rem; color: var(--text-muted); margin-top: .75rem; }
.pay-secure svg { width: 1rem; height: 1rem; color: #10b981; }
.pay-back { text-align: center; margin-top: 1rem; font-size: .875rem; }

.pay-result { text-align: center; max-width: 520px; }
.pay-result h2 { font-size: 1.375rem; color: var(--gray-900); margin: .5rem 0; }
.pay-result p { color: var(--text-muted); line-height: 1.6; }
.pay-result-icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 800; margin: 0 auto .5rem; background: #f0fdf4; color: #16a34a; }
.pay-result-icon.pay-pending { background: var(--brand-100); color: var(--brand-600); }
.pay-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }