/* ==========================================================================
   Next — Design tokens
   ========================================================================== */

@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-Regular.ttf')   format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-Medium.ttf')    format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-SemiBold.ttf')  format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-Bold.ttf')      format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-Black.ttf')     format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --next-orange-50:  #FFF3EB;
  --next-orange-100: #FFDCC2;
  --next-orange-200: #FFB98A;
  --next-orange-300: #FF9554;
  --next-orange-400: #F77A34;
  --next-orange-500: #F26B21;
  --next-orange-600: #D9531A;
  --next-orange-700: #B33F11;
  --next-orange-800: #842E0C;

  --next-ink-0:    #000000;
  --next-ink-50:   #0A0A0B;
  --next-ink-100:  #111113;
  --next-ink-200:  #16171A;
  --next-ink-300:  #1D1E22;
  --next-ink-400:  #26272C;
  --next-ink-500:  #3A3C42;
  --next-ink-600:  #5C5F67;
  --next-ink-700:  #8A8D94;
  --next-ink-800:  #BEC0C5;
  --next-ink-900:  #E7E8EA;
  --next-ink-1000: #FFFFFF;

  --bg:          var(--next-ink-50);
  --bg-elevated: var(--next-ink-100);
  --bg-raised:   var(--next-ink-200);
  --bg-hover:    var(--next-ink-300);

  --fg:   var(--next-ink-1000);
  --fg-1: var(--next-ink-900);
  --fg-2: var(--next-ink-800);
  --fg-3: var(--next-ink-700);
  --fg-4: var(--next-ink-600);

  --accent:       var(--next-orange-500);
  --accent-hover: var(--next-orange-600);
  --accent-soft:  color-mix(in srgb, var(--next-orange-500) 14%, transparent);
  --accent-ring:  color-mix(in srgb, var(--next-orange-500) 40%, transparent);

  --star: #F7A91E;

  --border:        var(--next-ink-400);
  --border-strong: var(--next-ink-500);
  --border-faint:  color-mix(in srgb, #ffffff 6%, transparent);

  --success: #3BBF7C;
  --warning: #E8B23A;
  --danger:  #E5533A;
  --info:    #5AA0E6;

  --bg-hero-radial:
    radial-gradient(120% 80% at 50% 0%, #1A1B1F 0%, var(--next-ink-50) 55%, #000 100%);
  --bg-panel-radial:
    radial-gradient(80% 60% at 80% 20%, rgba(242,107,33,0.08) 0%, transparent 60%),
    radial-gradient(100% 100% at 50% 50%, var(--next-ink-100) 0%, var(--next-ink-50) 100%);
  --bg-orange-spot:
    radial-gradient(60% 60% at 50% 50%, rgba(242,107,33,0.35) 0%, rgba(242,107,33,0) 70%);

  --font-sans: 'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: var(--font-sans);

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700;    --fw-xbold: 800;  --fw-black: 900;

  --fs-xs:   11px;  --fs-sm:   13px;  --fs-base: 15px;
  --fs-md:   17px;  --fs-lg:   19px;  --fs-xl:   24px;
  --fs-2xl:  30px;  --fs-3xl:  38px;  --fs-4xl:  48px;
  --fs-5xl:  60px;  --fs-6xl:  76px;  --fs-7xl:  96px;

  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-normal:  1.35;
  --lh-relaxed: 1.55;
  --lh-loose:   1.7;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;

  --radius-xs: 2px;

  --shadow-sm:
    0 1px 0 0 rgba(255,255,255,0.04) inset,
    0 1px 2px 0 rgba(0,0,0,0.6);
  --shadow-md:
    0 1px 0 0 rgba(255,255,255,0.05) inset,
    0 8px 24px -6px rgba(0,0,0,0.7);
  --shadow-lg:
    0 1px 0 0 rgba(255,255,255,0.06) inset,
    0 24px 48px -12px rgba(0,0,0,0.8);

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-xslow:  720ms;

  --container-lg: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ==========================================================================
   Animaties & motion
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes ring {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ==========================================================================
   Typografie
   ========================================================================== */

.n-display, h1.n-h1 {
  font-weight: var(--fw-black);
  font-size: clamp(var(--fs-5xl), 8vw, var(--fs-7xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

.n-h1 {
  font-weight: var(--fw-black);
  font-size: clamp(var(--fs-4xl), 6vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.n-h2 {
  font-weight: var(--fw-black);
  font-size: clamp(var(--fs-3xl), 4.5vw, var(--fs-5xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 20px;
}

.n-h3 {
  font-weight: var(--fw-black);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.n-h4 {
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.n-h5 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.n-lead {
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.n-body {
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.n-small {
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.n-caption {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  line-height: var(--lh-loose);
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

/* ==========================================================================
   Basis / globals
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Subtiel achtergrondpatroon — blueprint grid + dot-grid + zachte warme gloed */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    radial-gradient(120% 70% at 50% -10%, rgba(242, 107, 33, 0.06) 0%, transparent 60%);
  background-size: 60px 60px, 60px 60px, 22px 22px, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::selection { background: var(--accent); color: #fff; }

/* Schermvullende hero-kop */
.hero-fullscreen {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  padding: 140px 0 80px;
}
@media (max-width: 640px) {
  .hero-fullscreen { padding: 120px 0 70px; }
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--fg-4);
  animation: scrollHintFloat 2.2s var(--ease-in-out) infinite;
}
.scroll-hint span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scroll-hint svg { display: block; }

@keyframes scrollHintFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.7; }
  50%      { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

.container {
  width: 100%;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section    { padding: 120px 0; position: relative; }

.aw      { color: var(--accent); }
.eyebrow { color: var(--accent); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  padding: 14px 22px; border-radius: 8px; border: 0; cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast),
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
  line-height: 1;
  text-decoration: none;
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.btn-lg { padding: 18px 28px; font-size: 17px; border-radius: 10px; }

.card-n {
  background: var(--bg-raised);
  border: 1px solid var(--border-faint);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--dur-base),
    box-shadow var(--dur-base),
    transform var(--dur-base) var(--ease-out);
}
.card-n:hover {
  border-color: var(--accent-ring);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* ===== Spec strip ===== */
.spec-row { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg-raised); border: 1px solid var(--border-faint); border-radius: 10px; overflow: visible; }
.spec-cell { padding: 20px 24px; border-right: 1px solid var(--border-faint); position: relative; min-width: 0; }
.spec-cell:last-child { border-right: 0; }
.spec-cell .lbl { color: var(--fg-3); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.spec-cell .val { color: var(--fg); font-weight: 700; font-size: 22px; margin-top: 6px; letter-spacing: -0.01em; }
.spec-cell .val small { color: var(--fg-3); font-weight: 500; font-size: 13px; }
@media (max-width: 820px) {
  .spec-row { grid-template-columns: repeat(2, 1fr); }
  .spec-cell:nth-child(2) { border-right: 0; }
  .spec-cell:nth-child(1), .spec-cell:nth-child(2) { border-bottom: 1px solid var(--border-faint); }
}

/* ===== Info tooltip ===== */
.info-tip {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
}
.info-tip .info-tip-text {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: 260px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #22242A;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #E8E9EC;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
}
.info-tip:hover .info-tip-text {
  display: block;
}

/* ===== Spec table ===== */
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border-faint); }
.spec-table thead th { color: var(--fg-3); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; background: var(--bg-elevated); }
.spec-table td:first-child { color: var(--fg-3); }
.spec-table td { color: var(--fg-1); }
.spec-table .hl { color: var(--accent); font-weight: 600; }
.spec-table tbody tr { transition: background var(--dur-fast); }
.spec-table tbody tr:hover { background: var(--bg-elevated); }
.spec-table tr[hidden] { display: none; }

/* ===== Grids ===== */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .pillar-grid { grid-template-columns: 1fr; } }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

.step { padding: 32px; background: var(--bg-elevated); border: 1px solid var(--border-faint); border-radius: 16px; }
.step-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 500; letter-spacing: 0.08em; margin-bottom: 12px; display: block; }
.step h3 { margin: 0 0 10px; color: var(--fg); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.step p  { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.6; }

/* ===== Form fields ===== */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { color: var(--fg-2); font-size: 13px; font-weight: 500; }
.field label span { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  background: var(--bg-raised); border: 1px solid var(--border);
  color: var(--fg); border-radius: 8px;
  font-family: inherit; font-size: 14px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--bg-elevated); }
.field textarea { min-height: 140px; resize: vertical; }

/* Op touch-formaten minimaal 16px: onder die grens zoomt iOS Safari automatisch
   in zodra een veld focus krijgt. */
@media (max-width: 860px) {
  .field input, .field select, .field textarea,
  .wiz-field input {
    font-size: 16px;
  }
}

/* ===== Buffervat stage ===== */
.buffervat-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 40px 0; overflow: visible;
}
.buffervat-img {
  position: relative; z-index: 2;
  width: 100%; max-width: 260px; height: auto;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)) drop-shadow(0 80px 80px rgba(0,0,0,0.35));
  object-fit: contain;
}
.buffervat-panel { padding: 32px; background: var(--bg-raised); border: 1px solid var(--border-faint); border-radius: 20px; }
@media (max-width: 640px) { .buffervat-panel { padding: 24px 20px; } }

/* ==========================================================================
   Navigatie
   ========================================================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 16px 0;
  transition:
    background var(--dur-base) var(--ease-out),
    backdrop-filter var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border-faint);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.035em;
}
.wordmark .dot { color: var(--accent); }
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Onder deze breedte alleen nog het hamburger-menu */
@media (max-width: 860px) { .nav-links { display: none; } }
.nav-links a {
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--dur-fast);
  padding: 6px 0;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a.active { color: var(--fg); }

.menu-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--accent);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.menu-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.menu-btn span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(5, 5, 8, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }

.menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 380px;
  max-width: 88vw;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.6);
  padding: 80px 36px 36px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.menu-overlay.open .menu-panel { transform: translateX(0); }

.menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg-2);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.menu-close:hover { background: var(--bg-hover); color: var(--fg); transform: rotate(90deg); }

.menu-group-title {
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.menu-group-title:not(:first-of-type) { margin-top: 28px; }

.menu-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-links li { border-bottom: 1px solid var(--border-faint); }
.menu-links a {
  display: block;
  padding: 15px 0;
  color: var(--fg);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast), padding-left var(--dur-fast);
}
.menu-links a:hover { color: var(--accent); padding-left: 6px; }

.menu-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 36px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  padding: 80px 0 48px;
  border-top: 1px solid var(--border-faint);
  background: var(--bg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-wordmark {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #fff;
  line-height: 1;
  margin-bottom: 20px;
}
.footer-wordmark .dot { color: var(--accent); }
.footer-tagline {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--fg-3);
  margin: 0;
}
.footer-heading {
  color: var(--fg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
}
.footer a {
  color: var(--fg-2);
  font-size: 14px;
  display: block;
  padding: 6px 0;
  transition: color var(--dur-fast);
}
.footer a:hover { color: var(--fg); }
.footer-legal {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border-faint);
  display: flex;
  justify-content: space-between;
  color: var(--fg-3);
  font-size: 13px;
}
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-legal { flex-direction: column; gap: 12px; }
}

/* ==========================================================================
   CTA-band
   ========================================================================== */

.cta-band {
  padding: 64px 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
.cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-label {
  margin: 0;
  color: var(--fg);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 34px);
  letter-spacing: -0.02em;
}
.cta-link {
  color: var(--fg-2);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color var(--dur-fast);
}
.cta-link:hover { color: var(--accent); }

.cta-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.cta-actions .cta-link.sub { color: var(--fg-4); font-size: 14px; }
.cta-actions .cta-link.sub:hover { color: var(--fg); }

/* ===== Mid-page check/brochure band ===== */
.cta-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 32px 40px;
  border: 1px solid var(--border-faint);
  border-radius: 20px;
  background: var(--bg-raised);
}
.cta-mid-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .cta-mid { padding: 28px 24px; } }

/* ==========================================================================
   Brochure drawer
   ========================================================================== */

.br-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 5, 8, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.br-overlay.open { opacity: 1; pointer-events: auto; }

.br-drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 480px;
  max-width: 92vw;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.6);
  padding: 44px 40px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.br-overlay.open .br-drawer { transform: translateX(0); }

.br-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg-2);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.br-close:hover { background: var(--bg-hover); color: var(--fg); transform: rotate(90deg); }

.br-head { margin-bottom: 24px; padding-right: 36px; }
.br-head p { color: var(--fg-3); margin: 12px 0 0; }

.br-form { display: flex; flex-direction: column; }
.br-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.br-address {
  background: var(--bg-raised);
  border: 1px solid var(--border-faint);
  border-radius: 12px;
  padding: 16px 16px 2px;
  margin-bottom: 22px;
}
.br-address > p {
  color: var(--fg-3);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.br-privacy {
  color: var(--fg-4);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  margin: 16px 0 0;
}
.br-privacy a { color: var(--fg-2); text-decoration: underline; }

.br-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  min-height: 70vh;
  padding: 0 8px;
}
.br-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.br-drawer.sent .br-success { display: flex; }
.br-drawer.sent .br-head, .br-drawer.sent .br-form { display: none; }

@media (max-width: 520px) {
  .br-drawer { padding: 40px 20px 28px; }
  .br-row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   Product cutout (hotspots)
   ========================================================================== */

.cutout { position: relative; display: flex; flex-direction: column; gap: 20px; }

.cutout-stage {
  position: relative;
  aspect-ratio: 3/2;
  border-radius: 20px;
  background: var(--bg-panel-radial);
  border: 1px solid var(--border-faint);
  overflow: hidden;
}
.cutout-stage.bare {
  background: none;
  border: none;
  overflow: visible;
}
.cutout-glow {
  position: absolute;
  inset: auto 0 -20% 0;
  height: 50%;
  background: var(--bg-orange-spot);
  filter: blur(30px);
  pointer-events: none;
}
.cutout-img {
  position: absolute;
  inset: 4% 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.65));
}

.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 3;
}
.hs-dot {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hs-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--accent-ring);
  animation: ring 2.2s var(--ease-out) infinite;
}
.hs-core {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6), 0 0 16px var(--accent);
  transition: transform var(--dur-fast);
}
.hotspot.active .hs-core { transform: scale(1.4); }

.hs-card {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-width: 200px;
  max-width: 240px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(20, 20, 22, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity var(--dur-base), transform var(--dur-base);
}
.hs-card.right { left: 28px; transform: translate(-8px, -50%); }
.hs-card.left  { right: 28px; transform: translate(8px, -50%); }
.hotspot.active .hs-card { opacity: 1; transform: translateY(-50%); }

.hs-card-label  { font-family: var(--font-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 6px; }
.hs-card-value  { font-size: 15px; font-weight: 700; color: var(--fg); margin-bottom: 4px; letter-spacing: -0.01em; }
.hs-card-detail { font-size: 12px; color: var(--fg-3); line-height: 1.5; }

.cutout-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  font-size: 12px;
  color: var(--fg-2);
  font-weight: 500;
  transition: all var(--dur-fast);
  cursor: pointer;
}
.chip:hover, .chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--fg);
}
.chip-num { font-family: var(--font-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.05em; }

/* ==========================================================================
   Homepage
   ========================================================================== */

.hero-home {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-home-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}
.hero-home-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(5,5,8,0.90) 0%, rgba(5,5,8,0.60) 52%, rgba(5,5,8,0.08) 100%),
    linear-gradient(to top,   rgba(5,5,8,0.55) 0%, transparent 35%);
}
.hero-home-content {
  position: relative;
  z-index: 2;
  padding-top: 80px;
}
.hero-home-text { max-width: 800px; }
.hero-home-title {
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(var(--fs-4xl), 5.5vw, 72px);
}
.hero-home-lead {
  color: rgba(255,255,255,0.72);
  margin: 0 0 36px;
  max-width: 600px;
  font-size: var(--fs-md);
}
.hero-home-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.hero-reviews-wrap {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 2;
}
.hero-reviews {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 14px;
}
.hero-review-stars {
  color: var(--star);
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}
.hero-review-body { display: flex; flex-direction: column; gap: 3px; }
.hero-review-score {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1;
}
.hero-review-score strong { color: #fff; font-weight: 800; }
.hero-review-src {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  line-height: 1;
}
@media (max-width: 640px) {
  .hero-reviews-wrap { right: 16px; bottom: 16px; }
  .hero-home-ctas { flex-direction: column; }
  .hero-home-ctas .btn { width: 100%; justify-content: center; }
}

.works-with-homey {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.section-head {
  text-align: center;
  margin-bottom: 64px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.section-head-center {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.steps-head { max-width: 800px; margin-bottom: 56px; }

.review-spotlight {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 48px;
  padding: 28px;
  background: linear-gradient(135deg, var(--bg-raised) 0%, rgba(242, 107, 33, 0.04) 100%);
  border: 1px solid var(--border-faint);
  border-radius: 24px;
  align-items: stretch;
}
.review-image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 320px;
}
.review-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-xslow) var(--ease-out);
}
.review-image:hover img { transform: scale(1.04); }
.review-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(10,10,12,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
}
.review-badge-num   { font-weight: 800; font-size: 34px; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.review-badge-num span { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.55); margin-left: 2px; }
.review-badge-stars { color: var(--star); font-size: 14px; letter-spacing: 2px; margin-top: 8px; }
.review-badge-lbl   { color: rgba(255,255,255,0.6); font-size: 12px; margin-top: 4px; }

.review-quote { display: flex; flex-direction: column; justify-content: center; padding: 16px 24px 16px 0; }
.review-source-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.source-badge {
  font-size: 12px;
  color: var(--fg-2);
  padding: 7px 12px;
  background: var(--bg);
  border: 1px solid var(--border-faint);
  border-radius: 999px;
}
.source-badge strong { color: var(--fg); font-weight: 700; }
.blockquote {
  margin: 18px 0 24px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.review-attrib {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.review-attrib strong { color: var(--fg); font-size: 15px; display: block; }
.review-attrib span   { color: var(--fg-3); font-size: 13px; }

.review-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.review-mini {
  background: var(--bg-raised);
  border: 1px solid var(--border-faint);
  border-radius: 14px;
  padding: 22px;
}
.review-mini-top   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.review-mini-score { font-weight: 800; color: var(--fg); font-size: 22px; letter-spacing: -0.02em; }
.review-mini-score small { font-size: 12px; font-weight: 600; color: var(--fg-3); margin-left: 1px; }
.review-mini-stars { color: var(--star); font-size: 12px; letter-spacing: 2px; }
.review-mini p     { color: var(--fg-1); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.review-mini-who   { color: var(--fg-3); font-size: 12px; }
.review-mini-who strong { color: var(--fg-2); font-weight: 600; }

@media (max-width: 980px) {
  .review-spotlight  { grid-template-columns: 1fr; padding: 20px; gap: 24px; }
  .review-image      { min-height: 260px; }
  .review-quote      { padding: 4px 8px 12px; }
  .blockquote        { font-size: 22px; }
  .review-mini-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .review-mini-grid  { grid-template-columns: 1fr; }
}

.homey-band-home {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  padding: 60px;
  border: 1px solid var(--border-faint);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 60% 100% at 100% 50%, var(--accent-soft), transparent 70%),
    var(--bg-raised);
  align-items: center;
}
@media (max-width: 820px) { .homey-band-home { grid-template-columns: 1fr; padding: 40px 32px; gap: 40px; } }
.homey-right   { display: flex; align-items: center; justify-content: center; gap: 28px; }
.homey-mark-home { width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 12px 28px rgba(0,0,0,0.5)); transition: transform var(--dur-base) var(--ease-out); }
.homey-mark-home img { width: 124px; height: 124px; }
.homey-right:hover .homey-mark-home { transform: rotate(8deg) scale(1.04); }
.homey-caption { font-size: 14px; color: var(--fg-3); line-height: 1.3; }
.homey-caption strong { display: block; font-size: 22px; color: var(--fg); letter-spacing: -0.02em; font-weight: 700; }

/* Homey badge (herbruikbaar) */
.homey-badge { display: flex; align-items: center; gap: 6px; }
.homey-badge .eyebrow { margin: 0; }

.faq-item {
  border-bottom: 1px solid var(--border-faint);
  padding: 24px 0;
  cursor: pointer;
}
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  color: var(--fg);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color var(--dur-fast);
}
.faq-q:hover { color: var(--accent); }
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-base), padding var(--dur-base);
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.6;
}
.faq-item.open .faq-a { max-height: 400px; padding-top: 14px; }
.faq-plus { font-size: 24px; color: var(--fg-3); transition: transform var(--dur-fast); }
.faq-item.open .faq-plus { transform: rotate(45deg); color: var(--accent); }

/* Photo carousel */
.carousel {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  overflow-x: clip;
}
.carousel-stage {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 3 / 2;
  margin: 0 auto;
}
.carousel-slide {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-faint);
  box-shadow: var(--shadow-lg);
  transition:
    transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-slow) var(--ease-out);
  cursor: pointer;
  background: var(--bg-elevated);
}
.carousel-slide.active { cursor: default; }
.carousel-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10,10,12,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base), transform var(--dur-base);
}
.carousel-slide.active .carousel-caption { opacity: 1; transform: translateY(0); }

.carousel-controls { display: flex; align-items: center; gap: 20px; }
.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-raised);
  color: var(--fg);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.carousel-btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.carousel-dots { display: flex; gap: 10px; }
.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.carousel-dot:hover { background: var(--fg-3); }
.carousel-dot.active { background: var(--accent); transform: scale(1.25); }
.carousel-dot.active:hover { background: var(--accent); }
@media (max-width: 820px) {
  .carousel-stage { max-width: 90vw; }
}

/* ==========================================================================
   Productpagina's (gedeeld)
   ========================================================================== */

.page-hero { padding: 0 0 40px; background: var(--bg-hero-radial); }
.page-hero.lg { padding-bottom: 80px; }
.hero-head { max-width: 740px; }

.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 80px; }

/* Tekstkolom breder dan de productfoto */
.hero-grid-textwide { grid-template-columns: 0.85fr 1.15fr; }

/* Gespiegeld: foto links, tekst rechts (op mobiel weer tekst eerst) */
.hero-grid-mirror > *:first-child { order: 2; }
.hero-grid-mirror > *:last-child  { order: 1; }

@media (max-width: 900px) {
  .hero-grid,
  .hero-grid-textwide { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
  .hero-grid-mirror > *:first-child,
  .hero-grid-mirror > *:last-child { order: 0; }
}

/* Twee kaarten naast elkaar, gestapeld op mobiel */
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .duo-grid { grid-template-columns: 1fr; } }

.feature-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 12px;
  color: var(--fg-2);
  font-size: 15px;
}

/* All-electric */
.model-picker { margin-top: 28px; display: flex; gap: 8px; flex-wrap: wrap; }
.model-btn {
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--border-strong);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--dur-base);
  cursor: pointer;
}
.model-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.xxl-band {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  padding: 0px 56px;
  border: 1px solid var(--border-faint);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 60% 100% at 100% 50%, var(--accent-soft), transparent 70%),
    var(--bg-raised);
  overflow: visible;
}
.xxl-text { position: relative; z-index: 2; }
.xxl-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.xxl-img {
  width: 100%;
  height: auto;
  max-width: 460px;
  margin: -56px 0 -72px;
  filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}
.xxl-badge {
  position: absolute;
  top: 16px;
  left: -8px;
  z-index: 3;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .xxl-band { grid-template-columns: 1fr; padding: 32px 28px; gap: 8px; }
  .xxl-img { margin: 8px 0 -40px; max-width: 320px; }
  .xxl-badge { top: 0; left: 0; }
}

/* Hybride */
.reason-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .reason-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .reason-grid { grid-template-columns: 1fr; } }

.upgrade-band {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 48px;
  align-items: center;
}
.upgrade-steps { display: flex; flex-direction: column; gap: 12px; }
.upgrade-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  color: var(--fg-1);
  font-size: 14px;
  font-weight: 600;
}
.upgrade-step span {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}
@media (max-width: 820px) { .upgrade-band { grid-template-columns: 1fr; gap: 28px; } }

.homey-band {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  padding: 48px 56px;
  border: 1px solid var(--border-faint);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 60% 100% at 100% 50%, var(--accent-soft), transparent 70%),
    var(--bg-raised);
}
.homey-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.5));
}
@media (max-width: 820px) { .homey-band { grid-template-columns: 1fr; padding: 32px 28px; gap: 28px; } }

/* Buffervat / boilervat */
.img-wrap { display: flex; justify-content: center; }
.boiler-img {
  width: 100%;
  max-width: 260px;
  height: auto;
  filter: brightness(0.85) drop-shadow(0 40px 60px rgba(0, 0, 0, 0.65));
}

.explain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .explain-grid { grid-template-columns: 1fr; } }

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } }

.compare-card { padding: 32px; }
.compare-card-highlight {
  border-color: var(--accent);
  background:
    radial-gradient(ellipse 80% 80% at 50% 100%, var(--accent-soft), transparent 70%),
    var(--bg-raised);
}
.compare-label {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.pros-cons-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  font-size: 14px;
}
.pro-item {
  color: var(--fg-1);
  padding-left: 22px;
  position: relative;
}
.pro-item::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.neutral-item {
  color: var(--fg-2);
  padding-left: 22px;
  position: relative;
}
.neutral-item::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--fg-3);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}

.size-band {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
  padding: 48px 56px;
  border: 1px solid var(--border-faint);
  border-radius: 24px;
  background: var(--bg-raised);
}
.size-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.size-card {
  padding: 16px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  text-align: center;
}
@media (max-width: 820px) {
  .size-band { grid-template-columns: 1fr; padding: 32px 28px; gap: 28px; }
}

/* Contact / zakelijk */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; margin-top: 80px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.zakelijk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-top: 80px; }
@media (max-width: 900px) { .zakelijk-grid { grid-template-columns: 1fr; } }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.contact-cards { display: grid; gap: 20px; }

.offering-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.offering-item { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }

/* FAQ pagina */
.faqp-item {
  margin-bottom: 20px;
  border: 1px solid var(--border-faint);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-raised);
}
.faqp-q {
  width: 100%;
  padding: 20px 24px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faqp-q h3 { margin: 0; flex: 1; }
.faqp-plus {
  font-size: 24px;
  color: var(--accent);
  transition: transform 0.3s ease;
}
.faqp-item.open .faqp-plus { transform: rotate(45deg); }
.faqp-a {
  display: none;
  padding: 0 24px 20px;
  border-top: 1px solid var(--border-faint);
}
.faqp-item.open .faqp-a { display: block; }
.faqp-a p { margin: 0; color: var(--fg-2); }

/* ==========================================================================
   Check-wizard
   ========================================================================== */

.wiz {
  max-width: 720px;
  margin: 0 auto;
  padding: 140px 0 120px;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wiz-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
}
.wiz-progress .bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--bg-hover);
  overflow: hidden;
}
.wiz-progress .bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width var(--dur-slow) var(--ease-out);
}
.wiz-progress .lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  white-space: nowrap;
}

.wiz-step { display: none; }
.wiz-step.active { display: block; animation: wizIn var(--dur-slow) var(--ease-out); }
@keyframes wizIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wiz-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}
.wiz-choices.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .wiz-choices, .wiz-choices.two { grid-template-columns: 1fr; } }

.wiz-choice {
  padding: 22px 18px;
  border-radius: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border-faint);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.wiz-choice:hover { border-color: var(--accent-ring); transform: translateY(-2px); }
.wiz-choice.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 100%), var(--bg-raised);
}
.wiz-choice .t { font-size: 16px; font-weight: 700; color: var(--fg); display: block; }
.wiz-choice .s { font-size: 12.5px; color: var(--fg-3); margin-top: 4px; display: block; }
.wiz-choice.active .s { color: var(--fg-2); }

.wiz-field { margin-top: 28px; }
.wiz-field label { display: block; font-size: 13px; font-weight: 500; color: var(--fg-2); margin-bottom: 8px; }
.wiz-field input {
  width: 100%;
  padding: 16px 18px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 10px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  transition: border-color var(--dur-fast);
}
.wiz-field input:focus { outline: none; border-color: var(--accent); }
.wiz-field .hint { font-size: 12px; color: var(--fg-4); margin-top: 8px; }

.wiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  gap: 16px;
}
.wiz-back {
  color: var(--fg-3);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 0;
  transition: color var(--dur-fast);
}
.wiz-back:hover { color: var(--fg); }

.wiz-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 640px) { .wiz-result-grid { grid-template-columns: 1fr; } }

.wiz-result-card {
  padding: 28px;
  border-radius: 16px;
  background: var(--bg-raised);
  border: 1px solid var(--border-faint);
}
.wiz-result-card.hl {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 100%), var(--bg-raised);
}
.wiz-result-card .lbl { font-size: 12px; font-weight: 600; color: var(--fg-3); letter-spacing: 0.02em; }
.wiz-result-card .big { font-size: 30px; font-weight: 800; color: var(--fg); letter-spacing: -0.02em; margin-top: 8px; line-height: 1.1; }
.wiz-result-card .big.aw { color: var(--accent); }
.wiz-result-card .sub { font-size: 13px; color: var(--fg-3); margin-top: 6px; }

/* ==========================================================================
   Responsive / mobiel
   ========================================================================== */

/* Grid- en flexkinderen krijgen standaard min-width:auto, waardoor een lang
   woord of een brede tabel de kolom breder maakt dan het scherm. min-width:0
   laat ze wél krimpen. */
.pillar-grid > *, .steps > *, .duo-grid > *, .explain-grid > *,
.compare-grid > *, .reason-grid > *, .contact-grid > *, .zakelijk-grid > *,
.hero-grid > *, .review-mini-grid > *, .footer-grid > *, .field-row > *,
.size-band > *, .size-cards > *, .homey-band > *, .homey-band-home > *,
.upgrade-band > *, .cta-mid > *, .wiz-choices > *, .review-spotlight > * {
  min-width: 0;
}

/* Tabellen scrollen binnen hun eigen kader in plaats van de pagina te rekken */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .spec-table { min-width: 520px; }

@media (max-width: 860px) {
  /* Lange samenstellingen (warmtepompboiler, energielasten) mogen afbreken */
  h1, h2, h3, h4, h5, .n-display, .blockquote { overflow-wrap: break-word; }
}

@media (max-width: 640px) {
  /* Kopregels een maat kleiner zodat ze binnen de schermbreedte blijven */
  .n-display, h1.n-h1 { font-size: clamp(34px, 9.5vw, 46px); }
  .n-h1  { font-size: clamp(32px, 9vw, 42px); }
  .n-h2  { font-size: clamp(26px, 7.5vw, 34px); }
  .n-h3  { font-size: 26px; }
  .n-h4  { font-size: 22px; }
  .n-h5  { font-size: 18px; }
  .hero-home-title { font-size: clamp(34px, 9.5vw, 46px); }
  .blockquote { font-size: 20px; }

  /* Ruimer ademen, minder padding */
  .section { padding: 72px 0; }
  .card-n { padding: 22px 20px; }
  .compare-card { padding: 24px 20px; }
  .step { padding: 24px 20px; }
  .cta-mid { padding: 24px 20px; }
  .homey-band, .homey-band-home, .upgrade-band, .size-band { padding: 28px 20px; }
  .review-spotlight { padding: 16px; }

  /* Knoppen op volle breedte: prettiger te raken met de duim */
  .cta-mid-actions { width: 100%; }
  .cta-mid-actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero-home-ctas .btn { width: 100%; justify-content: center; }

  /* Spec-strip: labels en waarden compacter. De waarde schaalt mee zodat
     lange opsommingen als "25/40/100/200 L" op één regel blijven. */
  .spec-cell { padding: 16px 14px; }
  .spec-cell .val { font-size: clamp(15px, 4.6vw, 19px); }
  .spec-cell .val small { font-size: 12px; }

  /* Wizard */
  .wiz { padding: 120px 0 80px; }
  .wiz-nav { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .wiz-nav .btn { width: 100%; justify-content: center; }
  .wiz-nav .wiz-back { text-align: center; }
  .wiz-result-card { padding: 22px 20px; }
  .wiz-result-card .big { font-size: 26px; }
}

/* Personen-keuze: 5 knoppen blijven naast elkaar, ook op smalle schermen */
.wiz-choices-5 { grid-template-columns: repeat(5, 1fr); }
.wiz-choices-5 .wiz-choice { text-align: center; }
@media (max-width: 640px) {
  .wiz-choices-5 { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .wiz-choices-5 .wiz-choice { padding: 16px 4px; }
}

/* Menu- en brochurepaneel vullen op smalle schermen het hele scherm. Dat leest
   prettiger en voorkomt dat het paneel naast de viewport uitlijnt wanneer de
   browser een klassieke scrollbar toont. */
@media (max-width: 560px) {
  .menu-panel { width: 100%; max-width: 100%; padding: 76px 24px 32px; }
  .br-drawer  { width: 100%; max-width: 100%; padding: 40px 20px 28px; }
}

/* Productfoto's nemen op mobiel minder verticale ruimte in */
@media (max-width: 640px) {
  .buffervat-img { max-width: 170px; }
  .buffervat-stage { padding: 8px 0 24px; }
  .boiler-img { max-width: 180px; }
}

/* Spec-strip met vier waarden: 2x2 op desktop, onder elkaar op smalle schermen
   zodat lange waarden niet midden in een getal afbreken. */
.spec-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 460px) {
  .spec-row-2 { grid-template-columns: 1fr; }
  .spec-row-2 .spec-cell { border-right: 0; border-top: 1px solid var(--border-faint); }
  .spec-row-2 .spec-cell:first-child { border-top: 0; }
  .spec-row-2 .spec-cell .val { font-size: 19px; }
}

/* Hotspot-kaartjes: naast de hotspot is op mobiel te weinig ruimte, waardoor de
   kaart buiten beeld valt. Daarom onderin het scherm tonen, als een panel. */
@media (max-width: 560px) {
  /* transform op .hotspot zou het containing block worden voor position:fixed,
     dus hier met marges centreren in plaats van met translate */
  .hotspot { transform: none; margin-left: -8px; margin-top: -8px; }

  .hs-card,
  .hs-card.right,
  .hs-card.left {
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 20px;
    min-width: 0;
    max-width: none;
    width: min(340px, calc(100vw - 32px));
    transform: translate(-50%, 12px);
    z-index: 60;
  }
  .hotspot.active .hs-card { transform: translate(-50%, 0); }
}

/* ==========================================================================
   Bedankt-scherm na formulierinzending (contact / zakelijk)
   ========================================================================== */

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 32px 8px;
}
.form-success[hidden] { display: none; }
.form-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

/* Bevestiging van de check krijgt het volledige scherm: navigatie, voortgang,
   formulier-intro en footer verdwijnen zodat alleen de bedankboodschap overblijft. */
body.check-klaar .nav,
body.check-klaar .footer,
body.check-klaar .wiz-progress,
body.check-klaar .wiz-form-intro,
body.check-klaar .wiz-nav { display: none; }

body.check-klaar .wiz {
  min-height: 100svh;
  justify-content: center;
  padding: 40px 0;
}
body.check-klaar .page-hero { padding-bottom: 0; }

/* ==========================================================================
   Formuliervalidatie & adresaanvulling
   ========================================================================== */

.field-fout input,
.field-fout select,
.field-fout textarea { border-color: var(--danger); }

.veld-fout {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--danger);
}

/* Terugkoppeling bij het opzoeken van een adres */
.adres-resultaat {
  margin: -8px 0 16px;
  min-height: 20px;
  font-size: 13px;
  line-height: 20px;
  color: var(--fg-3);
}
.adres-resultaat:empty { margin: 0; min-height: 0; }
.adres-resultaat.bezig    { color: var(--fg-4); }
.adres-resultaat.gevonden { color: var(--success); }
.adres-resultaat.fout     { color: var(--warning); }

/* Postcode smaller dan huisnummer: past bij de inhoud */
.adres-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
@media (max-width: 600px) { .adres-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Juridische pagina's (privacy, voorwaarden)
   ========================================================================== */

.doc { max-width: 760px; margin: 0 auto; }

.doc-meta {
  font-size: 13px;
  color: var(--fg-4);
  margin: 0 0 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-faint);
}

.doc h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.02em;
  margin: 48px 0 16px;
  scroll-margin-top: 100px;
}
.doc h2:first-of-type { margin-top: 0; }

.doc h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  margin: 28px 0 10px;
}

.doc p,
.doc li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-2);
}
.doc p { margin: 0 0 16px; }

.doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--accent); }

.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { color: var(--accent-hover); }

.doc strong { color: var(--fg); font-weight: 600; }

/* Inhoudsopgave bovenaan */
.doc-inhoud {
  background: var(--bg-raised);
  border: 1px solid var(--border-faint);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 48px;
}
.doc-inhoud p {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 14px;
}
.doc-inhoud ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 32px;
}
.doc-inhoud li { margin-bottom: 7px; font-size: 14px; }
.doc-inhoud a { text-decoration: none; color: var(--fg-2); }
.doc-inhoud a:hover { color: var(--accent); }
@media (max-width: 640px) { .doc-inhoud ol { columns: 1; } .doc-inhoud { padding: 20px; } }

/* Uitgelicht kader, bijvoorbeeld voor contactgegevens */
.doc-kader {
  background: var(--bg-raised);
  border: 1px solid var(--border-faint);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 24px;
}
.doc-kader p:last-child { margin-bottom: 0; }


/* Kop van een juridische pagina. Geen schermvullende hero: de tekst is de
   inhoud, dus die begint zo snel mogelijk. */
.doc-hero { padding-bottom: 0; }

.doc-kop {
  max-width: 760px;
  margin: 0 auto;
  padding: 150px 0 44px;
}
.doc-kop h1 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 12px 0 0;
}
.doc-kop-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 16px 0 0;
  max-width: 600px;
}

@media (max-width: 860px) {
  .doc-kop { padding: 116px 0 32px; }
  .doc-kop h1 { font-size: 34px; }
  .doc-kop-lead { font-size: 16px; }
  .doc h2 { font-size: 21px; margin: 40px 0 14px; scroll-margin-top: 84px; }
  .doc h3 { font-size: 16px; }
  .doc-meta { margin-bottom: 32px; }
}

@media (max-width: 640px) {
  .doc-kop { padding: 100px 0 26px; }
  .doc-kop h1 { font-size: 30px; }
  .doc h2 { font-size: 20px; }
  .doc p, .doc li { font-size: 15px; }
  .doc ul { padding-left: 18px; }
  .doc-kader { padding: 18px 20px; }
  /* Lange e-mailadressen en URL's mogen afbreken op smalle schermen */
  .doc a { overflow-wrap: anywhere; }
}

/* 404. Geen schermvullende hero: de bezoeker is verdwaald en wil vooral
   snel ergens anders heen. */
.nf-hero { padding-bottom: 0; }

.nf {
  max-width: 720px;
  margin: 0 auto;
  padding: 140px 0 110px;
  text-align: center;
}

/* Het cijfer zit achter de tekst als decor, niet als inhoud. */
.nf-code {
  font-size: 190px;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--border-faint);
  margin-bottom: -14px;
  user-select: none;
}

.nf h1 {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 12px 0 0;
}

.nf-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 20px auto 0;
  max-width: 520px;
}

.nf-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

.nf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border-faint);
  font-size: 14px;
}
.nf-links span { color: var(--fg-4); }
.nf-links a { color: var(--fg-2); }
.nf-links a:hover { color: var(--accent); }

.nf-voet {
  font-size: 14px;
  color: var(--fg-4);
  margin: 28px 0 0;
}
.nf-voet a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) {
  .nf { padding: 112px 0 80px; }
  .nf-code { font-size: 140px; margin-bottom: -10px; }
  .nf h1 { font-size: 36px; }
  .nf-lead { font-size: 16px; }
}

@media (max-width: 640px) {
  .nf { padding: 96px 0 64px; }
  .nf-code { font-size: 100px; -webkit-text-stroke-width: 1.5px; margin-bottom: -6px; }
  .nf h1 { font-size: 30px; }
  .nf-acties .btn { width: 100%; }
  .nf-links { gap: 8px 14px; font-size: 13px; }
}

/* Keurmerken en certificeringen. De logo's zijn aangeleverd als donkere inkt
   op wit; op deze achtergrond zouden ze wegvallen. invert(1) draait de
   luminantie om, waardoor ze licht worden zonder hun binnenvorm te verliezen.
   Puur wit maken (brightness(0) invert(1)) werkt niet: het TUV-logo wordt dan
   een dichte vlek. */
.certs {
  border-top: 1px solid var(--border-faint);
  padding: 72px 0 76px;
  text-align: center;
}

.certs-sub {
  font-size: 15px;
  line-height: 1.6;
  text-wrap: balance;
  color: var(--fg-3);
  margin: 12px auto 44px;
  max-width: 520px;
}

.certs-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 38px 56px;
}
.certs-logos img {
  height: 44px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  filter: grayscale(1) invert(1);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.certs-logos img:hover { opacity: 0.9; }

.certs-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  font-size: 14px;
  color: var(--fg-4);
}
.certs-radio svg { flex: 0 0 auto; color: var(--accent); }

@media (max-width: 860px) {
  .certs { padding: 56px 0 60px; }
  .certs-logos { gap: 30px 40px; }
  .certs-logos img { height: 36px; max-width: 160px; }
}

@media (max-width: 640px) {
  .certs { padding: 48px 0 52px; }
  .certs-logos { gap: 26px 32px; }
  .certs-logos img { height: 32px; max-width: 130px; }
  .certs-sub { margin-bottom: 34px; }
}

/* Compacte variant voor in een formulier. Geen kop, geen uitleg: hier gaat het
   om een geruststelling op het moment dat iemand zijn gegevens achterlaat,
   niet om een sectie die aandacht vraagt. */
.certs-strip {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-faint);
  text-align: center;
}

.certs-strip-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-4);
  margin: 0 0 16px;
}

.certs-strip .certs-logos {
  gap: 18px 30px;
}
.certs-strip .certs-logos img {
  height: 31px;
  max-width: 140px;
  opacity: 0.55;
}
.certs-strip .certs-logos img:hover { opacity: 0.75; }

@media (max-width: 640px) {
  .certs-strip .certs-logos { gap: 16px 22px; }
  .certs-strip .certs-logos img { height: 26px; max-width: 108px; }
}

/* ---------------------------------------------------------------------------
   ONDERBALK
   Wordt door js/voorkeuren.js in de body gehangen, alleen als er nog geen keuze
   is gemaakt. Staat bewust niet in de HTML van de pagina's zelf: dan zou hij
   twaalf keer onderhouden moeten worden en toch op elke pagina verborgen
   moeten worden zodra iemand kiest.
--------------------------------------------------------------------------- */

.onderbalk {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 0;
  width: min(880px, calc(100% - 32px));
  margin-bottom: 16px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  /* De balk komt er zonder opkomstanimatie in, en dat is een bewuste keuze.
     Alles wat de zichtbaarheid van een verse balk afhankelijk maakt van een
     lopende overgang of animatie kan misgaan: gebeurt die tik niet, dan blijft
     de balk op zijn beginstand onder het scherm staan en krijgt de bezoeker de
     vraag nooit te zien. Geen balk is geen toestemming. Een schuifje omhoog is
     dat risico niet waard. Bij het sluiten mag het wel: staat die animatie
     stil, dan ruimt de tijdklok in voorkeuren.js de balk alsnog op.
     De translate op de x-as hoort bij het centreren. */
  transform: translate(-50%, 0);
}

.onderbalk.is-sluitend {
  animation: onderbalk-omlaag var(--dur-base) var(--ease-in-out) both;
}

@keyframes onderbalk-omlaag {
  from { transform: translate(-50%, 0);                 opacity: 1; }
  to   { transform: translate(-50%, calc(100% + 24px)); opacity: 0; }
}

.onderbalk-inhoud {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 26px;
}

.onderbalk-titel {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  margin: 0 0 6px;
  letter-spacing: var(--tracking-snug);
}

.onderbalk-tekst p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-3);
  margin: 0;
  text-wrap: pretty;
}

.onderbalk-tekst a {
  color: var(--fg-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.onderbalk-tekst a:hover { color: var(--accent); }

.onderbalk-knoppen {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* Weigeren moet even makkelijk zijn als accepteren, dus even groot en even
   goed leesbaar. Alleen de kleur verschilt. */
.onderbalk-knoppen .btn {
  font-size: var(--fs-sm);
  padding: 13px 20px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .onderbalk-inhoud {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 20px;
  }
  .onderbalk-knoppen .btn { flex: 1; }
}

@media (max-width: 380px) {
  .onderbalk-knoppen { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .onderbalk.is-sluitend { animation-duration: 1ms; }
}

/* De reviewbadge rechtsonder botst met de onderbalk. Zolang de balk er staat
   wijkt de badge, daarna komt hij terug. */
.onderbalk-open .hero-reviews-wrap {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* Uitgelichte kaart in "Waarom Next".
   Het tweede blok gaat over de Homey-integratie en dat is wat Next onderscheidt,
   dus die kaart mag meer aandacht trekken dan de twee ernaast. Bewust dezelfde
   afmetingen: één kaart groter maken breekt het raster, en op mobiel staan ze
   toch onder elkaar en valt dat effect helemaal weg. De nadruk zit daarom in
   rand, tint en diepte.
   De ruststand ligt ongeveer waar de gewone kaarten bij hover komen, dus de
   hover gaat hier een stap verder om nog voelbaar te blijven. */
.card-uitgelicht {
  border-color: var(--accent-ring);
  box-shadow: var(--shadow-md);
  background:
    radial-gradient(130% 100% at 50% 0%,
      color-mix(in srgb, var(--accent) 10%, transparent) 0%,
      transparent 62%),
    var(--bg-raised);
}

.card-uitgelicht:hover {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow: var(--shadow-lg);
}