/* ============================================================================
   HEITJE VOOR KARWEITJE — marktplaats-website
   Warm papier op eikenhout. Roest (#D2791F) = HET ENIGE merkaccent.
   Volgt docs/DESIGN.md + de WCAG-AA contrastfixes uit de design-review:
   - knop/actie-vlakken op --primary-dark (wit 4.87:1)
   - --text-muted in light verdonkerd naar >=4.5:1
   - tekst op *Soft = --text (niet de accentkleur)
   - focus-ring in --primary-dark
   Synchroniseert met de Expo-app: zelfde palet (src/theme/colors.ts).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS
--------------------------------------------------------------------------- */
:root {
  /* Oppervlakken — warm papier */
  --bg:             #FBF5EA;
  --surface:        #FFFFFF;
  --surface-alt:    #F2E8D6;
  --surface-sunken: #F6EFE1;

  /* Tekst (light) — review: muted verdonkerd naar #6E5A45 (>=4.5:1 op surface+bg) */
  --text:           #3A2418;
  --text-muted:     #6E5A45;
  --text-inverse:   #FFFFFF;

  /* HET accent — roest. Solide actievlakken gebruiken --primary-dark (a11y). */
  --primary:        #D2791F;   /* groot display-accent (>=24px) + iconen */
  --primary-dark:   #A85F18;   /* knoppen, focus-ring, kleine accent-tekst */
  --primary-press:  #8C4E13;   /* pressed/hover op gevulde knoppen */
  --primary-soft:   #FBEAD2;

  /* Status — uitsluitend semantisch, nooit als 2e merk-accent */
  --success:        #5E8C4E;   --success-soft: #EAF1DF;
  --danger:         #C0492F;   --danger-soft:  #F8E6DF;
  --info:           #4E7A93;   --info-soft:    #E7EEF2;

  /* Lijnen + schaduwbasis (warm-bruin, nooit zwart op licht) */
  --border:         #EADFCB;
  --border-strong:  #DECBAE;
  --shadow-rgb:     60, 36, 24;

  /* Focus — review: ring in --primary-dark (>=3:1 op papier) */
  --focus-ring:     var(--primary-dark);

  /* Spacing (4/8pt) */
  --space-0-5:2px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px;

  /* Radius */
  --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* Typografie */
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fs-base:16px; --lh-base:1.5;
  --display-vs:"opsz" 144, "SOFT" 50, "WONK" 0;
  --display-vs-accent:"opsz" 144, "SOFT" 100, "WONK" 1;
  --num-tabular:tabular-nums;

  /* Schaduw-tiers (warm-bruin) */
  --shadow-raised:   0 1px 2px rgba(var(--shadow-rgb),.06), 0 2px 6px rgba(var(--shadow-rgb),.04);
  --shadow-floating: 0 4px 12px rgba(var(--shadow-rgb),.08), 0 12px 32px rgba(var(--shadow-rgb),.06);
  --shadow-overlay:  0 16px 48px rgba(var(--shadow-rgb),.18);
  --shadow-card-hover:0 2px 4px rgba(var(--shadow-rgb),.05), 0 10px 28px rgba(var(--shadow-rgb),.10);
  --focus-glow:      0 0 0 4px var(--primary-soft);

  /* Layout */
  --container:1200px;
  --sidebar:264px;
  --header-h:72px;
  --catnav-h:56px;

  /* Motion */
  --ease:cubic-bezier(0.2,0,0,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-pop:cubic-bezier(0.34,1.4,0.64,1);
  --d-fast:150ms; --d-base:250ms; --d-slow:320ms;
  --reveal-rise:14px;
  --t-color:color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
  --t-transform:transform var(--d-base) var(--ease);
  --t-shadow:box-shadow var(--d-base) var(--ease);

  color-scheme:light;
}

[data-theme="dark"] {
  --bg:#20160F; --surface:#2C2017; --surface-alt:#392B20; --surface-sunken:#261B12;
  --text:#F4E9D6; --text-muted:#B7A48C; --text-inverse:#20160F;
  --primary:#CC7320; --primary-dark:#E59A52; --primary-press:#F0AE6A; --primary-soft:#3A2A16;
  --success:#6FA057; --success-soft:#232D1A; --danger:#E0735A; --danger-soft:#34201A;
  --info:#6FA0BC; --info-soft:#1B2A33; --border:#46352A; --border-strong:#5A4634;
  --shadow-rgb:0,0,0;
  --focus-ring:var(--primary);
  --focus-glow:0 0 0 4px rgba(204,115,32,.30);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#20160F; --surface:#2C2017; --surface-alt:#392B20; --surface-sunken:#261B12;
    --text:#F4E9D6; --text-muted:#B7A48C; --text-inverse:#20160F;
    --primary:#CC7320; --primary-dark:#E59A52; --primary-press:#F0AE6A; --primary-soft:#3A2A16;
    --success:#6FA057; --success-soft:#232D1A; --danger:#E0735A; --danger-soft:#34201A;
    --info:#6FA0BC; --info-soft:#1B2A33; --border:#46352A; --border-strong:#5A4634;
    --shadow-rgb:0,0,0; --focus-ring:var(--primary); --focus-glow:0 0 0 4px rgba(204,115,32,.30);
    color-scheme:dark;
  }
}

/* ---------------------------------------------------------------------------
   2. RESET + BASE + A11Y
--------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:var(--text); text-decoration:none; }
button { font-family:inherit; }
.tabular { font-variant-numeric:var(--num-tabular); }

:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:var(--r-sm); }

.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-4); }
@media (min-width:768px)  { .container { padding-inline:var(--space-6); } }
@media (min-width:1280px) { .container { padding-inline:var(--space-8); } }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:var(--space-3); top:-60px; z-index:2000;
  padding:10px 16px; background:var(--primary-dark); color:#fff; border-radius:var(--r-md);
  font-weight:600; transition:top var(--d-fast) var(--ease);
}
.skip-link:focus { top:var(--space-3); color:#fff; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ---------------------------------------------------------------------------
   3. MOTION KEYFRAMES (alleen transform/opacity)
--------------------------------------------------------------------------- */
@keyframes hvk-reveal { from{opacity:0;transform:translate3d(0,var(--reveal-rise),0);} to{opacity:1;transform:none;} }
@keyframes hvk-sheet-up { from{opacity:0;transform:translate3d(0,16px,0) scale(.985);} to{opacity:1;transform:none;} }
@keyframes hvk-overlay-in { from{opacity:0;} to{opacity:1;} }
@keyframes hvk-shimmer { from{transform:translateX(-100%);} to{transform:translateX(100%);} }
@keyframes hvk-pulse-ring { 0%{opacity:.5;transform:scale(1);} 70%{opacity:0;transform:scale(2.4);} 100%{opacity:0;transform:scale(2.4);} }
@keyframes hvk-heart-pop { 0%{transform:scale(1);} 40%{transform:scale(1.28);} 70%{transform:scale(.94);} 100%{transform:scale(1);} }
@keyframes hvk-float { 0%,100%{transform:translate3d(0,0,0);} 50%{transform:translate3d(0,-8px,0);} }
@keyframes hvk-flash-up { from{background-color:var(--success-soft);} to{background-color:transparent;} }

/* ---------------------------------------------------------------------------
   4. DECORATIE — warme papierkorrel (review: opacity sterk verlaagd) + dividers
--------------------------------------------------------------------------- */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.22 0 0 0 0 0.14 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before { opacity:.04; }
.site-header,.category-nav,.main,.site-footer,.modal,.fab { position:relative; z-index:1; }

.divider-stitch { position:relative; height:0; border:0; border-top:2px dashed var(--border-strong); margin:var(--space-12) 0; }
.divider-stitch::after {
  content:""; position:absolute; left:50%; top:50%; width:8px; height:8px;
  transform:translate(-50%,-50%) rotate(45deg); background:var(--primary); border-radius:2px;
  box-shadow:0 0 0 5px var(--bg);
}

/* ---------------------------------------------------------------------------
   5. BUTTONS / PILLS / BADGES
--------------------------------------------------------------------------- */
.btn {
  --btn-h:48px; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:var(--btn-h); min-width:var(--btn-h); padding:0 var(--space-5);
  border-radius:var(--r-md); border:1px solid transparent; background:transparent; color:var(--text);
  font-family:var(--font-body); font-size:15px; font-weight:600; line-height:1; letter-spacing:.005em;
  white-space:nowrap; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:var(--t-color), box-shadow var(--d-fast) var(--ease);
}
.btn svg { width:18px; height:18px; flex-shrink:0; }
.btn:disabled,.btn[aria-disabled="true"] { opacity:.4; cursor:not-allowed; pointer-events:none; }

/* Primary — review: gevuld op --primary-dark (wit 4.87:1) */
.btn-primary { background:var(--primary-dark); color:#fff; box-shadow:var(--shadow-raised); }
.btn-primary:hover,.btn-primary:focus-visible { background:var(--primary-press); color:#fff; }
.btn-primary:active { background:var(--primary-press); }
[data-theme="dark"] .btn-primary { color:var(--text-inverse); }

.btn-secondary { background:var(--surface); color:var(--text); border-color:var(--border-strong); }
.btn-secondary:hover,.btn-secondary:focus-visible { border-color:var(--primary); color:var(--primary-dark); }
.btn-secondary:active { background:var(--surface-alt); }

.btn-lg { --btn-h:54px; font-size:16px; padding:0 var(--space-6); }
.btn-block { display:flex; width:100%; }

.btn-icon {
  position:relative; width:44px; height:44px; min-height:44px; padding:0; border-radius:var(--r-md);
  background:transparent; border:1px solid transparent; color:var(--text);
  display:grid; place-items:center; cursor:pointer; transition:var(--t-color);
}
.btn-icon svg { width:20px; height:20px; stroke-width:1.75; }
.btn-icon:hover { background:var(--surface-alt); }
.btn-icon:active { background:var(--border); }
/* review: vergroot effectief hit-area naar >=48px zonder layout te verstoren */
.btn-icon::before { content:""; position:absolute; inset:-2px; }

.pill { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px;
  border-radius:var(--r-pill); font-size:12px; font-weight:600; letter-spacing:.01em; line-height:1; }
.pill svg { width:13px; height:13px; stroke-width:2; }
.pill-token { background:var(--primary-soft); color:var(--text); font-variant-numeric:var(--num-tabular); }
.pill-escrow { background:var(--success-soft); color:var(--text); }
.pill-escrow svg { color:var(--success); }

.badge-verified { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px;
  border-radius:var(--r-pill); background:var(--success-soft); color:var(--text); font-size:13px; font-weight:600; }
.badge-verified svg { width:14px; height:14px; stroke-width:2; color:var(--success); }

/* ---------------------------------------------------------------------------
   6. HEADER
--------------------------------------------------------------------------- */
.site-header { position:sticky; top:0; z-index:100; background:var(--surface); border-bottom:1px solid var(--border);
  transition:box-shadow var(--d-base) var(--ease); }
.site-header.is-stuck { box-shadow:0 1px 0 var(--border), 0 8px 24px rgba(var(--shadow-rgb),.07); }
.header-inner { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); min-height:var(--header-h);
  padding-block:var(--space-2); }

.brand { display:inline-flex; align-items:center; gap:var(--space-3); font-family:var(--font-display);
  font-weight:600; font-size:18px; color:var(--text); white-space:nowrap; }
.brand-mark { width:44px; height:44px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; overflow:hidden; }
.brand-mark img { width:100%; height:100%; object-fit:contain; }
.brand-name { letter-spacing:-.01em; }
.brand-name em { font-style:italic; color:var(--primary); font-variation-settings:var(--display-vs-accent); }
.brand-name { display:none; }
@media (min-width:560px){ .brand-name { display:inline; } }

/* Zoekbalk in de header (altijd zichtbaar — ook mobiel, contract: #search-input visible) */
.header-search { order:3; flex:1 1 100%; display:flex; align-items:center; height:48px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-pill); overflow:hidden;
  transition:border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.header-search:focus-within { border-color:var(--primary); box-shadow:var(--focus-glow); }
.search-ico { display:grid; place-items:center; padding-left:var(--space-4); color:var(--text-muted); flex-shrink:0; }
.search-ico svg { width:20px; height:20px; stroke-width:1.75; }
.search-input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent;
  font-family:inherit; font-size:15px; color:var(--text); padding:0 var(--space-3); }
.search-input::placeholder { color:var(--text-muted); }
.search-cat-trigger { display:none; align-items:center; gap:6px; height:36px; margin-right:6px; padding:0 var(--space-3);
  border:0; border-left:1px solid var(--border); background:transparent; color:var(--text); font-size:14px; cursor:pointer; }
.search-cat-trigger svg { width:16px; height:16px; stroke-width:1.75; color:var(--text-muted); }
.search-submit { width:40px; height:40px; margin:4px; flex-shrink:0; border:0; border-radius:var(--r-pill);
  background:var(--primary-dark); color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:background var(--d-fast) var(--ease); }
.search-submit svg { width:20px; height:20px; stroke-width:2.25; }
.search-submit:hover { background:var(--primary-press); }
@media (min-width:768px){ .header-search { order:2; flex:1 1 auto; } .search-cat-trigger { display:inline-flex; } }

.header-actions { order:2; margin-left:auto; display:flex; align-items:center; gap:var(--space-1); }
.header-actions .label { display:none; }
.btn-account { position:relative; }
#fav-toggle { position:relative; }
.fav-count { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
  display:grid; place-items:center; border-radius:var(--r-pill); background:var(--primary-dark); color:#fff;
  font-size:10px; font-weight:700; }
#fav-toggle[aria-pressed="true"] { color:var(--danger); }
#fav-toggle[aria-pressed="true"] svg { fill:currentColor; }
#auth-button[data-signed-in="true"] { color:var(--primary-dark); }
.header-cta { order:2; }
.header-cta .cta-text { display:none; }
@media (min-width:768px){ .order-2 { order:2; } }
@media (min-width:1024px){
  .header-actions { gap:var(--space-2); }
  .header-actions .btn-icon { width:auto; padding:0 var(--space-3); gap:var(--space-2); }
  .header-actions .label { display:inline; font-size:14px; font-weight:500; }
  .header-cta .cta-text { display:inline; }
}
.header-burger { display:grid; }
@media (min-width:768px){ .header-burger { display:none; } }

/* ---------------------------------------------------------------------------
   7. CATEGORIE-NAV (chip-rail) — test-contract: .chip[data-keyword], één .is-active
--------------------------------------------------------------------------- */
.category-nav { position:sticky; top:var(--header-h); z-index:90; background:var(--surface);
  border-bottom:1px solid var(--border); }
/* Volledige-breedte scrollbalk, met chips uitgelijnd op de container.
   De randen vervagen zacht zodat het netjes 'doorloopt' i.p.v. hard afgekapt. */
.category-rail { display:flex; gap:var(--space-2); overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity; padding-block:var(--space-3); scroll-padding-left:var(--space-4);
  padding-inline:max(var(--space-4), calc((100% - var(--container)) / 2 + var(--space-4))); }
.category-rail::-webkit-scrollbar { display:none; }
@media (min-width:768px){ .category-rail { padding-inline:max(var(--space-6), calc((100% - var(--container)) / 2 + var(--space-6))); } }
.category-nav::before, .category-nav::after { content:""; position:absolute; top:0; bottom:0; width:56px;
  pointer-events:none; z-index:2; opacity:0; transition:opacity var(--d-fast) var(--ease); }
.category-nav::before { left:0; background:linear-gradient(90deg, var(--surface), transparent); }
.category-nav::after { right:0; background:linear-gradient(270deg, var(--surface), transparent); }
.category-nav.can-left::before { opacity:1; }
.category-nav.can-right::after { opacity:1; }
.chip { display:inline-flex; align-items:center; gap:var(--space-2); min-height:40px; padding:0 14px;
  border:1px solid var(--border-strong); border-radius:var(--r-pill); background:var(--surface); color:var(--text);
  font-size:14px; font-weight:500; white-space:nowrap; scroll-snap-align:start; cursor:pointer;
  transition:var(--t-color), transform var(--d-fast) var(--ease); }
.chip svg { width:16px; height:16px; flex-shrink:0; stroke-width:1.75; color:var(--text-muted);
  transition:transform var(--d-fast) var(--ease); }
.chip:hover { border-color:var(--primary); color:var(--primary-dark); transform:translateY(-1px); }
.chip:hover svg { transform:scale(1.08); color:var(--primary-dark); }
.chip.is-active { background:var(--text); color:var(--text-inverse); border-color:var(--text); }
.chip.is-active svg { color:var(--text-inverse); }
@media (pointer:coarse){ .chip { min-height:44px; } }

/* ---------------------------------------------------------------------------
   8. MAIN + HERO + TRUST-BAR
--------------------------------------------------------------------------- */
.main { padding-bottom:var(--space-20); }
.section-head { max-width:60ch; margin:0 auto var(--space-8); text-align:center; }
.section-eyebrow { display:inline-block; margin:0 0 var(--space-2); padding:5px 12px; border-radius:var(--r-pill);
  background:var(--primary-soft); color:var(--text); font-size:12px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; }
.section-title { margin:0; font-family:var(--font-display); font-weight:500; font-size:clamp(26px,3.4vw,40px);
  line-height:1.12; letter-spacing:-.015em; font-variation-settings:var(--display-vs); }
.section-title em { font-style:italic; color:var(--primary); font-variation-settings:var(--display-vs-accent); }
.section-lead { margin:var(--space-3) auto 0; max-width:60ch; color:var(--text-muted); font-size:17px; line-height:1.56; }

.hero { position:relative; margin:var(--space-6) 0 var(--space-10); }
.hero-grid { position:relative; display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:center;
  padding:var(--space-8); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden;
  background-color:var(--surface);
  background-image:radial-gradient(120% 90% at 16% 0%,var(--primary-soft) 0%,transparent 55%),
    radial-gradient(90% 80% at 100% 100%,var(--success-soft) 0%,transparent 60%),
    linear-gradient(160deg,var(--surface) 0%,var(--bg) 100%); }
@media (min-width:880px){ .hero-grid { grid-template-columns:1.35fr 1fr; gap:var(--space-12); padding:var(--space-12); } }
.hero-copy { position:relative; z-index:1; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0; padding:6px 12px;
  border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); color:var(--text);
  font-size:13px; font-weight:600; }
.hero-title { margin:var(--space-4) 0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(34px,5.2vw,58px); line-height:1.04; letter-spacing:-.022em; font-variation-settings:var(--display-vs); }
.hero-title em { font-style:italic; color:var(--primary); font-variation-settings:var(--display-vs-accent); }
.hero-lead { margin:0 0 var(--space-6); max-width:50ch; color:var(--text-muted); font-size:18px; line-height:1.56; }

.hero-search { display:flex; align-items:center; gap:var(--space-2); max-width:520px; height:56px; padding:0 0 0 var(--space-4);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-pill); overflow:hidden;
  transition:border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.hero-search:focus-within { border-color:var(--primary); box-shadow:var(--focus-glow); }
.hero-search .search-ico { padding:0; }
.hero-search-input { flex:1; min-width:0; border:0; outline:0; background:transparent; font-family:inherit;
  font-size:16px; color:var(--text); }
.hero-search-input::placeholder { color:var(--text-muted); }
.hero-search-btn { flex-shrink:0; height:48px; margin:4px; border-radius:var(--r-pill); }

.hero-popular { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:var(--space-4); }
.hero-popular-label { font-size:13px; color:var(--text-muted); }
.pop-chip { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border-radius:var(--r-pill);
  border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:13px; font-weight:500;
  cursor:pointer; transition:var(--t-color); }
.pop-chip:hover { border-color:var(--primary); color:var(--primary-dark); }

.hero-assurances { list-style:none; margin:var(--space-6) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); }
.hero-assurances li { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--text); }
.hero-assurances svg { width:18px; height:18px; stroke-width:1.75; color:var(--primary-dark); flex-shrink:0; }

.hero-visual { position:relative; z-index:1; display:none; }
@media (min-width:880px){ .hero-visual { display:block; } }
.hero-art { position:relative; aspect-ratio:4/3; border-radius:var(--r-lg); border:1px solid var(--border);
  background:radial-gradient(circle at 25% 30%,rgba(210,121,31,.18),transparent 55%),
    radial-gradient(circle at 75% 70%,rgba(94,140,78,.16),transparent 55%),
    linear-gradient(135deg,var(--surface) 0%,var(--surface-alt) 100%); box-shadow:var(--shadow-raised); overflow:hidden; }
.hero-art::before,.hero-art::after { content:""; position:absolute; border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-raised); }
.hero-art::before { top:12%; left:9%; width:62%; height:48%;
  background:radial-gradient(circle at 30% 40%,rgba(94,140,78,.30),transparent 60%),linear-gradient(135deg,#E7EFD7,#C7D9AE); }
.hero-art::after { right:9%; bottom:12%; width:48%; height:36%;
  background:radial-gradient(circle at 60% 40%,rgba(210,121,31,.32),transparent 60%),linear-gradient(135deg,#F6E9CF,#E7C898); }
@media (min-width:880px) and (prefers-reduced-motion:no-preference){
  .hero-art::before { animation:hvk-float 11s ease-in-out infinite; }
  .hero-art::after { animation:hvk-float 13s ease-in-out infinite reverse; }
}

/* Trust-bar */
.trust-bar { margin-bottom:var(--space-10); }
.trust-bar-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3);
  padding:var(--space-5); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); }
@media (min-width:768px){ .trust-bar-grid { grid-template-columns:repeat(4,1fr); gap:var(--space-6); padding:var(--space-6) var(--space-8); } }
.trust-stat { display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
.trust-stat.with-ico { flex-direction:row; align-items:center; gap:var(--space-3); }
.trust-num { font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--text);
  font-variant-numeric:var(--num-tabular); line-height:1.1; }
.trust-unit { font-size:15px; color:var(--text-muted); }
.trust-label { font-size:13px; color:var(--text-muted); line-height:1.35; }
.trust-ico { width:40px; height:40px; flex-shrink:0; border-radius:var(--r-md); background:var(--primary-soft);
  color:var(--primary-dark); display:grid; place-items:center; }
.trust-ico svg { width:20px; height:20px; stroke-width:1.75; }
.live-dot { position:relative; display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%;
  background:var(--success); flex:0 0 auto; }
.live-dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--success);
  animation:hvk-pulse-ring 2.4s var(--ease-out) infinite; }

/* ---------------------------------------------------------------------------
   9. MARKTPLAATS — sidebar + listings
--------------------------------------------------------------------------- */
.marketplace { scroll-margin-top:calc(var(--header-h) + var(--catnav-h)); padding-top:var(--space-4); }
.marketplace-grid { display:grid; grid-template-columns:1fr; gap:var(--space-6); }
@media (min-width:1024px){ .marketplace-grid { grid-template-columns:var(--sidebar) 1fr; gap:var(--space-8); align-items:start; } }

/* Filters */
.filters { display:none; }
@media (min-width:1024px){
  .filters { display:block; position:sticky; top:calc(var(--header-h) + var(--catnav-h) + var(--space-4));
    align-self:start; max-height:calc(100vh - var(--header-h) - var(--catnav-h) - var(--space-8)); overflow-y:auto;
    padding-right:var(--space-1); }
}
.filters.is-open { display:block; }
.filters-head { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-4); }
.filters-title { margin:0; font-family:var(--font-display); font-size:20px; font-weight:500; }
.filters-reset { margin-left:auto; border:0; background:none; color:var(--primary-dark); font-size:13px;
  font-weight:600; cursor:pointer; padding:4px; }
.filters-reset:hover { text-decoration:underline; }
.filters-close { display:none; }

.filter-group { margin-bottom:var(--space-4); padding:var(--space-5); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); }
.filter-legend { margin:0 0 var(--space-3); font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); }
.filter-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.filter-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3);
  border-radius:var(--r-sm); font-size:14px; cursor:pointer; transition:background var(--d-fast) var(--ease); }
.filter-item:hover { background:var(--surface-alt); }
.filter-item input { appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0; flex-shrink:0;
  border:1.5px solid var(--border-strong); border-radius:5px; background:var(--surface); display:grid;
  place-items:center; cursor:pointer; transition:var(--t-color); }
.filter-item input:checked { background:var(--primary-dark); border-color:var(--primary-dark); }
.filter-item input[type="checkbox"]:checked::after { content:""; width:10px; height:6px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(0,-1px); }
.fi-ico { display:inline-flex; color:var(--text-muted); }
.fi-ico svg { width:18px; height:18px; stroke-width:1.75; }
.fi-label { flex:1; }
.filter-item .count { color:var(--text-muted); font-size:13px; font-variant-numeric:var(--num-tabular); }
.filter-item.is-empty { opacity:.5; }

.price-range { display:flex; align-items:center; gap:var(--space-2); }
.price-range input { width:100%; min-width:0; height:46px; padding:0 var(--space-3); border:1px solid var(--border-strong);
  border-radius:var(--r-md); background:var(--surface-alt); color:var(--text); font-family:inherit; font-size:14px;
  font-variant-numeric:var(--num-tabular); transition:var(--t-color), box-shadow var(--d-fast) var(--ease); }
.price-range input:focus { outline:0; border-color:var(--primary); background:var(--surface); box-shadow:var(--focus-glow); }
.price-dash { color:var(--text-muted); }
.price-hint { margin:var(--space-3) 0 0; font-size:12px; color:var(--text-muted); }

/* Listings */
.listings-bar { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-3);
  margin-bottom:var(--space-5); }
.results-title { margin:0; font-family:var(--font-display); font-weight:500; font-size:clamp(24px,3vw,30px);
  line-height:1.2; letter-spacing:-.01em; font-variation-settings:var(--display-vs); }
.results-title em { font-style:italic; color:var(--primary); font-variation-settings:var(--display-vs-accent); }
.results-count { margin:4px 0 0; color:var(--text-muted); font-size:14px; font-variant-numeric:var(--num-tabular); }
.listings-controls { display:flex; align-items:center; gap:var(--space-2); }
.filter-btn { display:inline-flex; }
@media (min-width:1024px){ .filter-btn { display:none; } }

.sort-wrap { display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 var(--space-3);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-md); }
.sort-wrap::before { content:""; width:16px; height:16px; flex-shrink:0;
  background:currentColor; color:var(--text-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M6 12h12M10 18h4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M6 12h12M10 18h4'/%3E%3C/svg%3E") center/contain no-repeat; }
.sort-wrap select { appearance:none; -webkit-appearance:none; border:0; background:transparent; font-family:inherit;
  font-size:14px; color:var(--text); cursor:pointer; padding-right:var(--space-2); }
.sort-wrap select:focus { outline:0; }

.view-toggle { display:inline-flex; gap:4px; padding:4px; background:var(--surface-alt); border-radius:var(--r-md); }
.view-tab { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border:0;
  background:transparent; border-radius:var(--r-sm); font-family:var(--font-body); font-size:14px; font-weight:600;
  color:var(--text-muted); cursor:pointer; transition:var(--t-color), box-shadow var(--d-fast) var(--ease); }
.view-tab svg { width:16px; height:16px; stroke-width:1.75; }
.view-tab .vt-label { display:none; }
@media (min-width:480px){ .view-tab .vt-label { display:inline; } }
.view-tab:hover { color:var(--text); }
.view-tab.is-active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-raised); }

/* Grid + cards — review: max 3 kolommen naast de sidebar */
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); }
@media (min-width:520px){ .grid { grid-template-columns:repeat(3,1fr); gap:var(--space-4); } }
@media (min-width:1024px){ .grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .grid { grid-template-columns:repeat(3,1fr); } }
[hidden] { display:none !important; }

.card { position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
  transition:var(--t-transform), var(--t-shadow), border-color var(--d-base) var(--ease); }
.card:hover { transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow-card-hover); }
.card:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
.card-thumb { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-alt); }
.card-thumb-bg { position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform var(--d-slow) var(--ease); }
.card:hover .card-thumb-bg { transform:scale(1.04); }
.card-thumb-ico { position:absolute; inset:0; display:grid; place-items:center; color:rgba(58,36,24,.34); }
.card-thumb-ico svg { width:38px; height:38px; stroke-width:1.5; }

.card-fav { position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.92); border:0; display:grid; place-items:center; color:var(--text);
  box-shadow:var(--shadow-raised); cursor:pointer; transition:var(--t-color), transform var(--d-fast) var(--ease); }
.card-fav::before { content:""; position:absolute; inset:-5px; }
.card-fav svg { width:16px; height:16px; transition:transform var(--d-fast) var(--ease); }
.card-fav:hover { background:#fff; transform:scale(1.06); }
.card-fav:active { transform:scale(.96); }
.card-fav.is-saved { color:var(--danger); }
.card-fav.is-saved svg { fill:currentColor; }
.card-fav.just-saved svg { animation:hvk-heart-pop 320ms var(--ease-pop); }

.card-badge { position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:6px; height:26px;
  padding:0 10px; border-radius:var(--r-pill); background:rgba(255,255,255,.94); color:var(--text);
  font-size:12px; font-weight:600; letter-spacing:.01em; box-shadow:var(--shadow-raised); }
.card-badge.is-new::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--primary); }

.card-body { display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-3) var(--space-4) var(--space-4); }
.card-cat { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.card-title { margin:0; font-size:15px; font-weight:600; line-height:1.35; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
.card-price { margin-top:var(--space-1); display:flex; align-items:baseline; gap:6px; }
.card-price .tokens { font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:-.01em;
  color:var(--primary-dark); font-variant-numeric:var(--num-tabular); }
.card-price .euro { font-size:13px; color:var(--text-muted); font-variant-numeric:var(--num-tabular); }
.card-meta { margin-top:var(--space-2); display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-3);
  font-size:12px; color:var(--text-muted); }
.card-meta span { display:inline-flex; align-items:center; gap:4px; min-width:0; }
.card-meta svg { width:12px; height:12px; flex-shrink:0; stroke-width:1.75; }
.card-meta span span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-foot { margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--border);
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); }
.card-foot svg { width:14px; height:14px; stroke-width:1.75; color:var(--success); flex-shrink:0; }

/* batch-reveal van cards na fetch/filter */
.grid.is-fresh > .card { animation:hvk-reveal var(--d-base) var(--ease-out) both; }
.grid.is-fresh > .card:nth-child(n+5) { animation-delay:50ms; }
.grid.is-fresh > .card:nth-child(n+9) { animation-delay:100ms; }

/* Categorie-illustraties (warm, licht) */
.thumb-tuin{background:radial-gradient(circle at 30% 78%,rgba(94,140,78,.42),transparent 58%),linear-gradient(160deg,#E7EFD7 0%,#C7D9AE 100%);}
.thumb-verhuis{background:radial-gradient(circle at 24% 26%,rgba(210,121,31,.34),transparent 58%),linear-gradient(150deg,#F6E9CF 0%,#E7C898 100%);}
.thumb-schoon{background:radial-gradient(circle at 70% 30%,rgba(78,122,147,.30),transparent 60%),linear-gradient(160deg,#EDF3F6 0%,#D4E0E7 100%);}
.thumb-bijles{background:radial-gradient(circle at 30% 30%,rgba(168,95,24,.30),transparent 58%),linear-gradient(150deg,#F7F0E0 0%,#E6D2A9 100%);}
.thumb-bood{background:radial-gradient(circle at 72% 70%,rgba(192,73,47,.30),transparent 56%),linear-gradient(150deg,#FAEDE6 0%,#EFCDBF 100%);}
.thumb-hond{background:radial-gradient(circle at 30% 64%,rgba(140,118,96,.40),transparent 56%),linear-gradient(150deg,#EFE2CE 0%,#D8C2A4 100%);}
.thumb-klus{background:radial-gradient(circle at 38% 38%,rgba(210,121,31,.36),transparent 56%),linear-gradient(150deg,#F6E9CF 0%,#E2BE89 100%);}
.thumb-auto{background:radial-gradient(circle at 70% 30%,rgba(78,122,147,.32),transparent 60%),linear-gradient(160deg,#E4EDF1 0%,#C2D2DA 100%);}
.thumb-computer{background:radial-gradient(circle at 50% 42%,rgba(78,122,147,.30),transparent 60%),linear-gradient(150deg,#EAF0F3 0%,#D2DEE5 100%);}
.thumb-oppassen{background:radial-gradient(circle at 35% 35%,rgba(210,121,31,.26),transparent 58%),linear-gradient(150deg,#F7EEDC 0%,#EAD3AE 100%);}
.thumb-default{background:radial-gradient(circle at 40% 40%,rgba(210,121,31,.30),transparent 56%),linear-gradient(150deg,#F7EFE0 0%,#EAD7B6 100%);}

/* Skeleton */
.card.skeleton { pointer-events:none; cursor:default; }
.skeleton .card-thumb { background:var(--surface-alt); }
.card.skeleton .card-thumb, .sk-line { position:relative; overflow:hidden; }
.sk-line { height:12px; margin-top:10px; border-radius:6px; background:var(--surface-alt); }
.sk-line-lg { width:85%; } .sk-line-sm { width:45%; }
.card.skeleton .card-thumb::after, .sk-line::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); animation:hvk-shimmer 1.5s var(--ease) infinite; }
[data-theme="dark"] .card.skeleton .card-thumb::after, [data-theme="dark"] .sk-line::after {
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); }
@media (prefers-reduced-motion:reduce){ .card.skeleton .card-thumb::after, .sk-line::after { display:none; } }

/* State blocks */
.state-block { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
  padding:var(--space-16) var(--space-6); text-align:center; }
.state-emoji { width:64px; height:64px; border-radius:var(--r-pill); background:var(--primary-soft);
  color:var(--primary-dark); display:grid; place-items:center; }
.state-emoji svg { width:32px; height:32px; stroke-width:1.75; }
.state-block h3 { margin:0; font-family:var(--font-display); font-weight:500; font-size:20px; }
.state-block p { margin:0; max-width:42ch; color:var(--text-muted); font-size:14px; line-height:1.5; }
.state-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center; margin-top:var(--space-2); }
.state-block[data-testid="error-state"] .state-emoji { background:var(--danger-soft); color:var(--danger); }

/* Map */
.map { border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.map-canvas { width:100%; height:60vh; min-height:420px; background:var(--surface-alt); }
.map-empty { margin:0; padding:var(--space-4); color:var(--text-muted); font-size:14px; text-align:center; }
.leaflet-popup-content-wrapper { border-radius:var(--r-md); }
.leaflet-popup-content { margin:12px 14px; font-family:var(--font-body); }
.map-pop-title { font-weight:600; color:var(--text); }
.map-pop-price { margin-top:2px; font-size:13px; color:var(--primary-dark); font-variant-numeric:var(--num-tabular); }
.map-pop-loc { margin-top:2px; font-size:12px; color:var(--text-muted); }
.map-pop-btn { display:inline-block; margin-top:8px; padding:6px 12px; border-radius:var(--r-md);
  background:var(--primary-dark); color:#fff !important; font-size:13px; font-weight:600; }

.load-more-wrap { display:flex; justify-content:center; margin-top:var(--space-8); }

/* ---------------------------------------------------------------------------
   10. SECTIES — how / proof / safety / app / faq
--------------------------------------------------------------------------- */
.section { padding-block:var(--space-16); }
.section-alt { background:var(--surface-alt); }

.how-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--space-5);
  counter-reset:step; }
@media (min-width:768px){ .how-steps { grid-template-columns:repeat(3,1fr); gap:var(--space-6); } }
.how-step { position:relative; padding:var(--space-6); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); }
.how-num { display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-pill);
  background:var(--primary-soft); color:var(--primary-dark); font-family:var(--font-display); font-weight:600; font-size:18px; }
.how-ico { position:absolute; top:var(--space-6); right:var(--space-6); color:var(--text-muted); }
.how-ico svg { width:24px; height:24px; stroke-width:1.75; }
.how-step h3 { margin:var(--space-4) 0 var(--space-2); font-size:18px; font-weight:600; }
.how-step p { margin:0; color:var(--text-muted); font-size:15px; line-height:1.55; }
.how-cta { display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin-top:var(--space-8); }

.testimonials { list-style:none; margin:0 0 var(--space-10); padding:0; display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:768px){ .testimonials { grid-template-columns:repeat(3,1fr); gap:var(--space-5); } }
.testimonial { padding:var(--space-6); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); }
.stars { display:inline-flex; gap:2px; margin-bottom:var(--space-3); color:var(--primary); }
.stars svg { width:16px; height:16px; fill:currentColor; stroke:none; }
.testimonial blockquote { margin:0 0 var(--space-4); font-size:15px; line-height:1.6; color:var(--text); }
.testimonial-by { display:flex; align-items:center; gap:var(--space-3); }
.testimonial-avatar { width:40px; height:40px; flex-shrink:0; border-radius:var(--r-pill); background:var(--primary-soft);
  color:var(--primary-dark); display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:16px; }
.testimonial-by strong { display:block; font-size:14px; }
.testimonial-role { font-size:13px; color:var(--text-muted); }

.proof-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); margin:0;
  padding:var(--space-8); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); text-align:center; }
@media (min-width:768px){ .proof-stats { grid-template-columns:repeat(4,1fr); } }
.proof-stats > div { display:flex; flex-direction:column; gap:4px; }
.stat-num { font-family:var(--font-display); font-weight:600; font-size:clamp(28px,4vw,40px); color:var(--text);
  font-variant-numeric:var(--num-tabular); line-height:1; }
.proof-stats dd { margin:0; color:var(--text-muted); font-size:14px; }

.safety-grid { display:grid; grid-template-columns:1fr; gap:var(--space-8); }
@media (min-width:980px){ .safety-grid { grid-template-columns:0.9fr 1.1fr; align-items:center; } }
.safety-intro .section-eyebrow, .safety-intro .section-title { text-align:left; }
.safety-intro .section-title { margin-bottom:var(--space-3); }
.safety-intro .section-lead { margin-left:0; text-align:left; }
.safety-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:560px){ .safety-cards { grid-template-columns:repeat(2,1fr); } }
.safety-card { padding:var(--space-5); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); }
.safety-ico { width:44px; height:44px; border-radius:var(--r-md); background:var(--primary-soft); color:var(--primary-dark);
  display:grid; place-items:center; margin-bottom:var(--space-3); }
.safety-ico svg { width:22px; height:22px; stroke-width:1.75; }
.safety-card h3 { margin:0 0 6px; font-size:16px; font-weight:600; }
.safety-card p { margin:0; color:var(--text-muted); font-size:14px; line-height:1.5; }

.app-cta-grid { display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:center;
  padding:var(--space-10) var(--space-8); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  background-image:radial-gradient(100% 80% at 100% 0,var(--primary-soft) 0,transparent 55%); }
@media (min-width:880px){ .app-cta-grid { grid-template-columns:1.2fr .8fr; } }
.app-cta-copy .section-eyebrow, .app-cta-copy .section-title, .app-cta-copy .section-lead { text-align:left; margin-left:0; }
.app-features { list-style:none; margin:var(--space-5) 0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.app-features li { display:inline-flex; align-items:center; gap:10px; font-size:15px; }
.app-features svg { width:20px; height:20px; stroke-width:1.75; color:var(--primary-dark); }
.store-badges { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.store-badge { display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 18px; border-radius:var(--r-md);
  background:var(--text); color:var(--surface); transition:transform var(--d-fast) var(--ease); }
.store-badge:hover { transform:translateY(-2px); color:var(--surface); }
.store-badge svg { width:24px; height:24px; }
.store-badge .sb-small { display:block; font-size:10px; opacity:.8; line-height:1; }
.store-badge .sb-large { display:block; font-size:15px; font-weight:600; line-height:1.2; }
.app-cta-visual { display:flex; justify-content:center; }
.app-qr-card { padding:var(--space-5); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  text-align:center; box-shadow:var(--shadow-raised); }
.app-qr { width:148px; height:148px; margin:0 auto; }
.app-qr-card p { margin:var(--space-3) 0 0; font-size:13px; color:var(--text-muted); }

.faq-narrow { max-width:760px; margin-inline:auto; }
.faq-list { display:flex; flex-direction:column; gap:var(--space-2); }
.faq-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-4) var(--space-5); font-size:16px; font-weight:600; cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:""; width:20px; height:20px; flex-shrink:0; background:currentColor; color:var(--text-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--d-fast) var(--ease); }
.faq-item[open] summary::after { transform:rotate(180deg); }
.faq-item summary:hover { color:var(--primary-dark); }
.faq-answer { padding:0 var(--space-5) var(--space-5); color:var(--text-muted); font-size:15px; line-height:1.6; }
.faq-answer p { margin:0; }

/* ---------------------------------------------------------------------------
   11. FOOTER + FAB
--------------------------------------------------------------------------- */
.site-footer { margin-top:var(--space-16); padding:var(--space-12) 0 var(--space-6); background:var(--surface);
  border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:1fr; gap:var(--space-8); margin-bottom:var(--space-8); }
@media (min-width:640px){ .footer-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .footer-grid { grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:var(--space-6); } }
.footer-brand .brand { margin-bottom:var(--space-3); }
.footer-brand .brand-name { display:inline; }
.footer-tagline { margin:0 0 var(--space-4); max-width:34ch; color:var(--text-muted); font-size:14px; line-height:1.5; }
.footer-col h3 { margin:0 0 var(--space-3); font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); }
.footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.footer-col a { font-size:14px; color:var(--text); transition:color var(--d-fast) var(--ease); }
.footer-col a:hover { color:var(--primary-dark); }
.footer-legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-3); padding-top:var(--space-5);
  border-top:1px solid var(--border); color:var(--text-muted); font-size:12px; }
.footer-legal p { margin:0; }
.footer-lang { display:inline-flex; align-items:center; gap:6px; }
.footer-lang svg { width:14px; height:14px; stroke-width:1.75; }

.fab { position:fixed; right:var(--space-4); bottom:calc(var(--space-4) + env(safe-area-inset-bottom)); z-index:80;
  display:inline-flex; align-items:center; gap:var(--space-2); height:52px; padding:0 var(--space-5); border:0;
  border-radius:var(--r-pill); background:var(--primary-dark); color:#fff; font-family:var(--font-body); font-weight:600;
  font-size:15px; cursor:pointer; box-shadow:var(--shadow-floating);
  transition:background var(--d-fast) var(--ease), transform var(--d-base) var(--ease); }
.fab svg { width:20px; height:20px; stroke-width:2.25; }
.fab:hover { background:var(--primary-press); transform:translateY(-2px); }
@media (min-width:1024px){ .fab { display:none; } }

/* ---------------------------------------------------------------------------
   12. MODALS + velden + auth + cost-preview + chat
--------------------------------------------------------------------------- */
.modal { position:fixed; inset:0; z-index:1000; display:none; align-items:flex-end; justify-content:center;
  background:rgba(var(--shadow-rgb),.45); }
@supports (backdrop-filter:blur(2px)) { .modal { backdrop-filter:blur(2px); } }
.modal.is-open { display:flex; animation:hvk-overlay-in var(--d-fast) var(--ease); }
@media (min-width:560px){ .modal { align-items:center; padding:var(--space-6); } }
.modal-card { position:relative; width:100%; max-width:440px; max-height:92vh; overflow-y:auto; padding:var(--space-6);
  background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--shadow-overlay); }
.modal.is-open .modal-card { animation:hvk-sheet-up var(--d-base) var(--ease-out) both; }
@media (min-width:560px){ .modal-card { border-radius:var(--r-xl); } }
.modal-wide .modal-card { max-width:580px; padding:0; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); }
.modal-title { margin:0; font-family:var(--font-display); font-weight:500; font-size:24px; font-variation-settings:var(--display-vs); }
.modal-title em { font-style:italic; color:var(--primary); font-variation-settings:var(--display-vs-accent); }
.modal-close { width:40px; height:40px; flex-shrink:0; border:0; border-radius:var(--r-pill); background:var(--surface-alt);
  color:var(--text); display:grid; place-items:center; cursor:pointer; transition:background var(--d-fast) var(--ease); }
.modal-close svg { width:20px; height:20px; stroke-width:2; }
.modal-close:hover { background:var(--border); }
.modal-head-floating { position:absolute; top:var(--space-3); right:var(--space-3); left:auto; margin:0; z-index:3; }
.modal-head-floating .modal-close { background:rgba(255,255,255,.92); box-shadow:var(--shadow-raised); }

.field { margin-bottom:var(--space-4); }
.field label { display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--text-muted); }
.field input, .field textarea { width:100%; border:1px solid var(--border-strong); border-radius:var(--r-md);
  background:var(--surface-alt); color:var(--text); font-family:inherit; font-size:16px;
  transition:var(--t-color), box-shadow var(--d-fast) var(--ease); }
.field input { height:48px; padding:0 var(--space-4); }
.field textarea { min-height:96px; padding:var(--space-3) var(--space-4); resize:vertical; }
.field input:focus, .field textarea:focus { outline:0; border-color:var(--primary); background:var(--surface); box-shadow:var(--focus-glow); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }

.auth-tabs { display:flex; gap:var(--space-1); margin-bottom:var(--space-5); padding:4px; background:var(--surface-alt); border-radius:var(--r-md); }
.auth-tab { flex:1; padding:10px; border:0; background:transparent; border-radius:var(--r-sm); font-size:14px; font-weight:600;
  color:var(--text-muted); cursor:pointer; transition:var(--t-color), box-shadow var(--d-fast) var(--ease); }
.auth-tab.is-active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-raised); }
/* review: tekst op *Soft = --text (niet de statuskleur); kleur-drager = linker-streep + icoon */
.auth-msg { display:none; margin-bottom:var(--space-4); padding:var(--space-3) var(--space-4); border-radius:var(--r-md);
  font-size:14px; line-height:1.45; color:var(--text); }
.auth-msg[style*="block"], .auth-msg.is-shown { display:block; }
#auth-error, #create-error { background:var(--danger-soft); border-left:3px solid var(--danger); }
#auth-info, #create-info { background:var(--success-soft); border-left:3px solid var(--success); }
.auth-submit { width:100%; }
.auth-foot { margin:var(--space-4) 0 0; font-size:13px; line-height:1.5; color:var(--text-muted); text-align:center; }

.cost-preview { margin-bottom:var(--space-4); padding:var(--space-3) var(--space-4); background:var(--surface-sunken);
  border:1px solid var(--border); border-radius:var(--r-md); font-size:14px; }
.cost-preview .row { display:flex; justify-content:space-between; padding:3px 0; }
.cost-preview .row span:last-child { font-variant-numeric:var(--num-tabular); border-radius:4px; }
.cost-preview .row.total { margin-top:4px; padding-top:6px; border-top:1px solid var(--border); font-weight:600; color:var(--text); }
.cost-preview .row .flash-up { animation:hvk-flash-up 320ms var(--ease); }

/* Detail */
#detail-body { padding:0 0 var(--space-6); }
.detail-hero { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-xl) var(--r-xl) 0 0; background:var(--surface-alt); }
.detail-hero .card-thumb-bg { position:absolute; inset:0; }
.detail-pad { padding:var(--space-6); }
.detail-cat { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.detail-title { margin:var(--space-1) 0 var(--space-3); font-family:var(--font-display); font-weight:500; font-size:26px;
  line-height:1.2; font-variation-settings:var(--display-vs); }
.detail-price { display:flex; align-items:baseline; gap:8px; margin-bottom:var(--space-3); }
.detail-price .tokens { font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--primary-dark);
  font-variant-numeric:var(--num-tabular); }
.detail-price .euro { font-size:15px; color:var(--text-muted); font-variant-numeric:var(--num-tabular); }
.detail-meta { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin-bottom:var(--space-4);
  font-size:14px; color:var(--text-muted); }
.detail-meta span { display:inline-flex; align-items:center; gap:6px; }
.detail-meta svg { width:16px; height:16px; stroke-width:1.75; }
.detail-section-title { margin:var(--space-4) 0 var(--space-1); font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-muted); }
.detail-desc { margin:0 0 var(--space-4); font-size:15px; line-height:1.6; color:var(--text); white-space:pre-line; }
.detail-trust { display:flex; align-items:flex-start; gap:10px; margin:var(--space-4) 0; padding:var(--space-3) var(--space-4);
  background:var(--success-soft); border-radius:var(--r-md); font-size:13px; line-height:1.5; color:var(--text); }
.detail-trust svg { width:18px; height:18px; stroke-width:1.75; color:var(--success); flex-shrink:0; margin-top:1px; }

.chat { margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--border); }
.chat-list { display:flex; flex-direction:column; gap:var(--space-2); max-height:280px; padding:var(--space-2) 0; overflow-y:auto; }
.chat-state { padding:var(--space-5) var(--space-4); background:var(--surface-sunken); border:1px solid var(--border);
  border-radius:var(--r-md); color:var(--text-muted); font-size:14px; text-align:center; line-height:1.5; }
.msg-row { display:flex; }
.msg-row.mine { justify-content:flex-end; }
.bubble { max-width:80%; padding:8px 12px; border-radius:16px; border-bottom-left-radius:4px; background:var(--surface-alt);
  color:var(--text); font-size:14px; line-height:1.45; }
.msg-row.mine .bubble { background:var(--primary-dark); color:#fff; border-bottom-left-radius:16px; border-bottom-right-radius:4px; }
.bubble time { display:block; margin-top:3px; font-size:11px; opacity:.7; text-align:right; font-variant-numeric:var(--num-tabular); }
.chat-input-bar { display:flex; gap:var(--space-2); margin-top:var(--space-3); }
.chat-input-bar input { flex:1; height:44px; padding:0 var(--space-4); border:1px solid var(--border-strong);
  border-radius:var(--r-pill); background:var(--surface-alt); color:var(--text); font-family:inherit; font-size:15px;
  transition:var(--t-color), box-shadow var(--d-fast) var(--ease); }
.chat-input-bar input:focus { outline:0; border-color:var(--primary); background:var(--surface); box-shadow:var(--focus-glow); }
.chat-send { width:44px; height:44px; flex-shrink:0; border:0; border-radius:var(--r-pill); background:var(--primary-dark);
  color:#fff; display:grid; place-items:center; cursor:pointer; transition:background var(--d-fast) var(--ease); }
.chat-send svg { width:20px; height:20px; stroke-width:2; }
.chat-send:hover { background:var(--primary-press); }
.chat-send:disabled { background:var(--border-strong); cursor:not-allowed; }

/* Mobiele filter-sheet */
@media (max-width:1023px){
  .filters.is-open { display:block; position:fixed; inset:0; z-index:1100; margin:0; max-height:100vh; overflow-y:auto;
    padding:var(--space-5); background:var(--bg); }
  .filters.is-open .filters-close { display:grid; }
  .filters-close { width:40px; height:40px; border:0; border-radius:var(--r-pill); background:var(--surface-alt);
    color:var(--text); display:grid; place-items:center; cursor:pointer; }
  .filters-close svg { width:20px; height:20px; stroke-width:2; }
}

/* ---------------------------------------------------------------------------
   13. SCROLL-REVEAL
--------------------------------------------------------------------------- */
[data-reveal] { opacity:0; }
[data-reveal].is-in { animation:hvk-reveal var(--d-base) var(--ease-out) both; }
@media (prefers-reduced-motion:reduce){ [data-reveal] { opacity:1; } [data-reveal].is-in { animation:none; } }

/* ---------------------------------------------------------------------------
   14. VRIENDEN (account-paneel)
--------------------------------------------------------------------------- */
#friends-btn { position:relative; }
.friends-count { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; display:grid;
  place-items:center; border-radius:var(--r-pill); background:var(--primary-dark); color:#fff; font-size:10px; font-weight:700; }
.fr-tabs { display:flex; gap:var(--space-1); margin-bottom:var(--space-4); padding:4px; background:var(--surface-alt); border-radius:var(--r-md); }
.fr-tab { position:relative; flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px;
  border:0; background:transparent; border-radius:var(--r-sm); font-family:inherit; font-size:14px; font-weight:600;
  color:var(--text-muted); cursor:pointer; transition:var(--t-color), box-shadow var(--d-fast) var(--ease); }
.fr-tab.is-active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-raised); }
.fr-badge { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--primary-dark); color:#fff; font-size:11px; font-weight:700; }
.fr-panel { min-height:120px; }
.fr-list { display:flex; flex-direction:column; gap:var(--space-2); max-height:52vh; overflow-y:auto; }
.fr-section-label { margin:var(--space-3) 0 var(--space-2); font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-muted); }
.fr-row { display:flex; align-items:center; gap:var(--space-3); padding:10px 12px; border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--surface); }
.fr-avatar { width:40px; height:40px; flex-shrink:0; border-radius:50%; background:var(--primary-soft); color:var(--text);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:16px; overflow:hidden; }
.fr-avatar img { width:100%; height:100%; object-fit:cover; }
.fr-mid { flex:1; min-width:0; }
.fr-name { font-weight:600; font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-sub { font-size:12px; color:var(--text-muted); }
.fr-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.fr-btn { height:38px; padding:0 14px; border-radius:var(--r-md); border:0; font-family:inherit; font-weight:600;
  font-size:13px; cursor:pointer; transition:var(--t-color); }
.fr-btn-primary { background:var(--primary-dark); color:#fff; }
.fr-btn-primary:hover { background:var(--primary-press); }
.fr-btn-ghost { background:transparent; border:1px solid var(--border-strong); color:var(--text-muted); }
.fr-btn-ghost:hover { border-color:var(--primary); color:var(--primary-dark); }
.fr-tag { padding:7px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:600; }
.fr-tag-success { background:var(--success-soft); color:var(--text); }
.fr-tag-muted { background:var(--surface-alt); color:var(--text-muted); }
.fr-search-input { width:100%; height:48px; padding:0 16px; margin-bottom:var(--space-3); border:1px solid var(--border-strong);
  border-radius:var(--r-pill); background:var(--surface-alt); color:var(--text); font-family:inherit; font-size:15px; }
.fr-search-input:focus { outline:0; border-color:var(--primary); background:var(--surface); box-shadow:var(--focus-glow); }
.fr-empty { padding:24px 12px; text-align:center; color:var(--text-muted); font-size:14px; line-height:1.5; }