/* tb-home.css — de opmaak van de homepage.
   Op 3-10-2026 uit resources/views/theoriebriljant/home-v2.blade.php gehaald:
   daar stond 52% van het bestand als inline CSS,
   waardoor elke kleurwijziging in een blade van 198 KB moest gebeuren.
   De blokgrenzen hieronder zijn de oorspronkelijke style-tags. */


/* ==== blok 1 van 10 — data-source="tb-public-base.css" ==== */
/* ============================================================
   THEORIEBRILJANT — Solo-inspired SaaS theme
   ============================================================ */

:root {
  /* Sinds 3-10-2026 zijn dit aliassen naar public/css/tb-tokens.css.
     De oude namen blijven bestaan zodat de 357 var()-verwijzingen in dit
     bestand blijven werken; de waarden komen voortaan uit één bron.
     Nieuwe code gebruikt --tb-* rechtstreeks. */

  /* Brand — oranje is signaalkleur, niet hoofdkleur */
  --orange: var(--tb-accent);
  --orange-deep: var(--tb-accent-ink);
  --orange-light: var(--tb-accent-soft);

  --ink: var(--tb-ink);
  --ink-2: var(--tb-ink-2);
  --ink-3: var(--tb-ink-3);
  --line: var(--tb-line);
  --line-2: var(--tb-canvas-3);
  --canvas: var(--tb-canvas);
  --canvas-warm: var(--tb-canvas-2);
  --canvas-cream: var(--tb-canvas-2);
  --section-bg: var(--tb-canvas-2);

  --stage-bg: var(--tb-accent-soft);
  --stage-ink: var(--tb-accent-ink);

  /* Scheiding met een lijn in plaats van een schaduw: dat draagt de
     officiele toon van de gekozen richting. */
  --shadow-card: 0 0 0 1px var(--tb-line);
  --shadow-card-lg: 0 0 0 1px var(--tb-line-2);
  --shadow-btn: none;
  --shadow-soft: none;

  /* Beweging zonder veereffect */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-base: var(--tb-t);
  --t-slow: 320ms;

  /* Een hoekwaarde in plaats van vier */
  --r-sm: var(--tb-r-sm);
  --r-md: var(--tb-r);
  --r-lg: var(--tb-r);
  --r-xl: var(--tb-r);
  --r-pill: 999px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* ---------- Container ---------- */
.center {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 1024px) {
  .center { padding: 0 32px; }
}

/* ---------- Type ---------- */
.d1 {
  font-family: var(--tb-font), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw + 0.5rem, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #272E35;
}
.d1 span { display: block; color: inherit; }
.h2 {
  font-family: var(--tb-font), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.h3 {
  font-family: var(--tb-font), system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.375rem, 0.6vw + 1.2rem, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.lead {
  color: var(--ink-2);
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
  line-height: 1.6;
}

/* "stage" small uppercase label */
.stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--stage-bg);
  color: var(--stage-ink);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}
.stage::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--stage-ink);
  border-radius: 50%;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.btn_orange {
  background: var(--orange);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn_orange:hover {
  background: var(--orange-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(251, 109, 58, 0.50);
}
.btn_border {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--line);
}
.btn_border:hover {
  border-color: var(--ink);
}
.btn_transparent {
  background: transparent;
  color: var(--ink);
  height: 48px;
  padding: 0 18px;
}
.btn_transparent:hover { color: var(--orange); }
.btn_sm { height: 44px; padding: 0 18px; font-size: 0.875rem; }
/* tactiele press-feedback op alle knoppen */
.btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .header__link::after { transition: none; }
  .btn:active { transform: none; }
}

/* Focus */
:where(a, button, summary):focus-visible {
  outline: 3px solid rgba(251, 109, 58, 0.40);
  outline-offset: 3px;
  border-radius: var(--r-pill);
}

/* ============================================================
   HEADER
   ============================================================ */
/* Zwevende witte balk (vusk-stijl, 27 mei) — .header = transparante wrapper, .header__center = de balk */
.header {
  position: sticky;
  top: 0; z-index: 50;
  background: transparent;
  border-bottom: 0;
  padding: 14px 24px 0;
  transition: padding var(--t-base);
}
.header.is-scrolled, .header.is-stuck { padding-top: 8px; }
.header.is-scrolled .header__center,
.header.is-stuck .header__center {
  box-shadow: var(--shadow-card);
  border-color: rgba(0, 0, 0, 0.06);
}
.header__center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  gap: 20px;
  padding: 8px 12px 8px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--t-base), padding var(--t-base);
}
.header__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.125rem;
  color: var(--ink);
}
.header__logo-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--orange);
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(251, 109, 58, 0.40);
}
.header__logo-mark svg { width: 20px; height: 20px; }
.header__logo-img { height: 32px; width: auto; }

.header__wrapper {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.header__nav {
  display: none;
  gap: 4px;
}
.header__link {
  position: relative;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-out);
}
/* groeiende underline (scaleX vanuit midden, met veer) */
.header__link::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 5px;
  height: 2px; border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-base) var(--ease-spring);
}
.header__link:hover { color: var(--orange); }
.header__link:hover::after { transform: scaleX(1); }
.header__btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Mobiel: in-balk tekstknoppen verbergen; alleen logo + hamburger blijven.
   De CTA's staan al in de mobile-menu drawer. */
.header__btns .btn { display: none; }
.header__burger {
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: #fff;
  display: grid; place-items: center;
}
/* CSS-bars hamburger → morpht naar kruisje (X) bij open (aria-expanded toggelt via JS) */
.header__burger-box { position: relative; display: block; width: 20px; height: 14px; }
.header__burger-bar {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform var(--t-base) var(--ease-spring),
              opacity var(--t-fast) var(--ease-out);
}
.header__burger-bar:nth-child(1) { top: 0; }
.header__burger-bar:nth-child(2) { top: 6px; }
.header__burger-bar:nth-child(3) { top: 12px; }
.header__burger[aria-expanded="true"] .header__burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.header__burger[aria-expanded="true"] .header__burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.header__burger[aria-expanded="true"] .header__burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1024px) {
  .header__nav { display: flex; }
  .header__burger { display: none; }
  .header__btns .btn { display: inline-flex; }
  .header__logo-img { height: 40px; }
}

/* Mobile drawer — speelse spring-in */
.mobile-menu {
  position: fixed;
  inset: 86px 0 0 0;
  background: var(--canvas);
  padding: 16px 24px 32px;
  transform: translateY(-12px) scale(0.985);
  transform-origin: top center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-spring);
  z-index: 49;
  border-top: 1px solid var(--line);
  overflow-y: auto;
}
.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.mobile-menu a:not(.btn) {
  display: block;
  padding: 16px 8px;
  font-weight: 600;
  font-size: 1.0625rem;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__actions { display: grid; gap: 10px; margin-top: 24px; }

/* Gestaffelde reveal van menu-items + CTA's bij openen */
@keyframes menuItemIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-menu > a,
.mobile-menu > .mobile-menu__actions { opacity: 0; }
.mobile-menu.is-open > a,
.mobile-menu.is-open > .mobile-menu__actions {
  animation: menuItemIn 460ms var(--ease-spring) both;
}
.mobile-menu.is-open > *:nth-child(1) { animation-delay: 70ms; }
.mobile-menu.is-open > *:nth-child(2) { animation-delay: 120ms; }
.mobile-menu.is-open > *:nth-child(3) { animation-delay: 170ms; }
.mobile-menu.is-open > *:nth-child(4) { animation-delay: 220ms; }
.mobile-menu.is-open > *:nth-child(5) { animation-delay: 270ms; }
.mobile-menu.is-open > *:nth-child(6) { animation-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .header__burger-bar { transition: none; }
  .mobile-menu { transition: opacity var(--t-fast) linear; transform: none; }
  .mobile-menu.is-open { transform: none; }
  .mobile-menu > a,
  .mobile-menu > .mobile-menu__actions { opacity: 1; animation: none; }
}

@media (min-width: 1024px) { .mobile-menu { display: none; } }

/* ==== blok 2 van 10 — data-source="tb-public-sections-a.css" ==== */
/* ============================================================
   HERO + PARTNERS
   ============================================================ */
.main {
  position: relative;
  padding: 24px 0 64px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, var(--canvas-cream), transparent 70%),
    var(--canvas);
  overflow: hidden;
}
@media (min-width: 1024px) { .main { padding: 40px 0 96px; } }

.main__center { text-align: center; }
.main__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 840px;
  margin: 0 auto;
}

/* Two-column hero layout (text left, laptop right) — desktop only */
@media (min-width: 1024px) {
  .main__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 56px;
    text-align: left;
  }
  .main__hero .main__wrap {
    align-items: flex-start;
    text-align: left;
    max-width: none;
    margin: 0;
  }
  .main__hero .main__btns { justify-content: flex-start; }
}
.main__title { text-wrap: balance; }
.main__title em {
  font-style: normal;
  color: var(--orange);
  background: linear-gradient(180deg, transparent 65%, rgba(251, 109, 58, 0.18) 65%, rgba(251, 109, 58, 0.18) 92%, transparent 92%);
  padding: 0 0.04em;
  border-radius: 2px;
}

.main__text {
  color: var(--ink-2);
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 52ch;
}
.main__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Device mockups gallery */
.main__bg {
  margin: 56px 0 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
}
@media (max-width: 767px) {
  .main__bg { gap: 8px; }
}

/* Hero laptop mockup — groot, half over de rand, slide-in van rechts */
.main__bg--laptop {
  margin: 48px auto 0;
  max-width: 720px;
  width: 100%;
  position: relative;
  /* zorg dat de overlappende helft niet wordt afgesneden door de grid-cel */
  overflow: visible;
}
.main__laptop {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 30px 60px rgba(39, 46, 53, 0.18))
          drop-shadow(0 12px 24px rgba(39, 46, 53, 0.08));
  /* mobiel: gewone fade-up */
  animation: laptopRise 900ms var(--ease-out) both;
}
@keyframes laptopRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Desktop: groter laptop-beeld, voor de helft buiten beeld, slide-in van rechts naar links */
@media (min-width: 1024px) {
  .main__bg--laptop {
    margin: 0;
    max-width: none;
    /* anker links zodat het beeld naar rechts buiten de viewport mag uitlopen */
    align-self: center;
  }
  .main__laptop {
    /* Iets kleiner zodat de bron-pixels (1910px breed) ruim genoeg blijven voor retina */
    width: clamp(720px, 70vw, 1050px);
    max-width: none;
    /* Eindpositie: ~28% van de breedte zit voorbij de rechterrand */
    transform: translateX(28%);
    animation: laptopSlideIn 1100ms var(--ease-out) 120ms both;
  }
}

@keyframes laptopSlideIn {
  from { opacity: 0; transform: translateX(110%); }
  to   { opacity: 1; transform: translateX(28%); }
}

@media (prefers-reduced-motion: reduce) {
  .main__laptop { animation: none; }
}

/* ============================================================
   TRUST BADGES — zwevende vertrouwens-badges bij de laptop
   ============================================================ */
.trust-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
@media (min-width: 1024px) { .trust-badges { display: block; } }

.trust-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow:
    0 18px 40px -8px rgba(39, 46, 53, 0.18),
    0 4px 10px -2px rgba(39, 46, 53, 0.08);
  pointer-events: auto;
  transition: transform var(--t-base) var(--ease-spring);
  animation: trustBadgeIn 700ms var(--ease-out) both;
}
.trust-badge:hover {
  transform: translateY(-4px) rotate(0) !important;
}

.trust-badge__body { line-height: 1.2; min-width: 0; }
.trust-badge__title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.trust-badge__sub {
  font-size: 0.6875rem;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.trust-badge__label {
  font-size: 0.75rem;
  color: var(--ink-2);
  font-weight: 600;
  margin-top: 2px;
}

/* ── Score-badge (Trustpilot/Kiyoh-stijl) ─────────────── */
.trust-badge--score {
  top: 6%;
  left: -4%;
  transform: rotate(-4deg);
  padding: 10px 16px 10px 10px;
  animation-delay: 250ms;
}
.trust-badge__score {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  display: grid;
  place-items: center;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(251, 109, 58, 0.35);
}
.trust-badge__stars {
  display: flex;
  gap: 1px;
  color: #FBBF24;
}
.trust-badge__stars svg { width: 12px; height: 12px; }

/* ── CBR-proof badge ───────────────────────────────────── */
.trust-badge--cbr {
  bottom: 8%;
  left: 2%;
  transform: rotate(2deg);
  animation-delay: 450ms;
}
.trust-badge__shield {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.trust-badge__shield svg { width: 22px; height: 22px; }

/* ── TikTok badge ──────────────────────────────────────── */
.trust-badge--tiktok {
  top: 32%;
  right: 22%;
  transform: rotate(5deg);
  animation-delay: 650ms;
}
.trust-badge__tiktok {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.trust-badge__tiktok svg { width: 22px; height: 22px; }

@keyframes trustBadgeIn {
  from { opacity: 0; transform: translateY(20px) scale(0.85) rotate(var(--r, 0deg)); }
  to   { opacity: 1; }
}
.trust-badge--score  { --r: -4deg; }
.trust-badge--cbr    { --r: 2deg; }
.trust-badge--tiktok { --r: 5deg; }

@media (prefers-reduced-motion: reduce) {
  .trust-badge { animation: none; }
}

/* ============================================================
   PROMO SCRIPT — handgeschreven teaser-strookjes met pijl
   ============================================================ */
.promo-script {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Caveat", "Brush Script MT", cursive;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--orange-deep);
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.promo-script--lg { font-size: 1.875rem; }

.promo-script svg.promo-arrow {
  width: 36px;
  height: 36px;
  color: currentColor;
  flex-shrink: 0;
}

/* ── Hero: onder de CTA-knoppen ────────────────────────── */
.main__promo {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
  transform: rotate(-2deg);
  animation: promoIn 700ms var(--ease-out) 900ms both;
}
.main__promo .promo-arrow {
  transform: scaleY(-1) rotate(20deg) translateY(2px);
}

/* ── Pricing: boven de "Compleet" card ────────────────── */
.pricing__card--highlight { position: relative; }
.pricing__promo {
  position: absolute;
  top: -52px;
  right: 12%;
  transform: rotate(4deg);
  z-index: 4;
  animation: promoIn 700ms var(--ease-out) 300ms both;
  color: var(--orange);
}
.pricing__promo .promo-arrow {
  transform: rotate(60deg) translate(2px, 6px);
}
@media (max-width: 767px) {
  .pricing__promo { top: -40px; right: 8%; font-size: 1.25rem; }
}

/* ── Deadline (Niet-geslaagd) sectie: naast de titel ──── */
.deadline__promo {
  display: inline-block;
  margin-left: 14px;
  transform: rotate(-3deg) translateY(-6px);
  color: var(--orange);
  font-size: 1.625rem;
}

@keyframes promoIn {
  from { opacity: 0; transform: translateY(8px) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .main__promo, .pricing__promo { animation: none; }
}

/* ============================================================
   REVEAL — scroll-triggered fade-in animaties
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }
.reveal--delay-4 { transition-delay: 320ms; }
.reveal--delay-5 { transition-delay: 400ms; }
.reveal--delay-6 { transition-delay: 480ms; }
.reveal--delay-7 { transition-delay: 560ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   STEPS — grote achtergrondnummer per stap
   ============================================================ */
.steps__item {
  position: relative;
  z-index: 1;
}
.steps__item::before {
  content: attr(data-step);
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--tb-font), sans-serif;
  font-weight: 800;
  font-size: clamp(5rem, 10vw, 8rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--orange);
  opacity: 0.08;
  pointer-events: none;
  z-index: -1;
  user-select: none;
}

/* ============================================================
   STICKY CTA — drijvende balk onderaan na scroll
   ============================================================ */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(120%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow:
    0 24px 60px -12px rgba(39, 46, 53, 0.20),
    0 8px 16px -4px rgba(39, 46, 53, 0.08);
  transition: transform 450ms var(--ease-spring);
  max-width: calc(100% - 32px);
}
.sticky-cta.is-visible {
  transform: translateX(-50%) translateY(0);
}
.sticky-cta__text {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.sticky-cta__text em {
  font-style: normal;
  color: var(--orange);
}
.sticky-cta__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink-3);
  display: grid;
  place-items: center;
  padding: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.sticky-cta__close:hover { color: var(--ink); background: var(--line-2); }
.sticky-cta__close svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .sticky-cta { padding: 8px 8px 8px 16px; gap: 10px; }
  .sticky-cta__text { font-size: 0.8125rem; }
  .sticky-cta .btn { padding: 10px 14px; font-size: 0.8125rem; }
  .sticky-cta__text em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* ============================================================
   LIVE COUNTER — "X mensen oefenen nu" pill in hero
   ============================================================ */
.live-counter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 4px;
  animation: liveCounterIn 700ms var(--ease-out) 200ms both;
}
.live-counter__text strong {
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.live-counter__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  position: relative;
  flex-shrink: 0;
}
.live-counter__dot::before,
.live-counter__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #10B981;
  animation: liveDotPulse 2.2s var(--ease-out) infinite;
}
.live-counter__dot::after { animation-delay: 1.1s; }
@keyframes liveDotPulse {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3.2); opacity: 0; }
}
@keyframes liveCounterIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-counter, .live-counter__dot::before, .live-counter__dot::after { animation: none; }
  .live-counter__dot::before, .live-counter__dot::after { display: none; }
}

/* ============================================================
   SECTION DIVIDERS — golvende overgangen tussen secties
   ============================================================ */
.section-divider {
  position: relative;
  display: block;
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0;
  line-height: 0;
  pointer-events: none;
}
.section-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}
.section-divider--from-orange {
  background: var(--orange);
  margin-top: -1px; /* sluit naadloos aan op USP bar */
}
.section-divider--from-orange svg { fill: var(--canvas-warm); }
.section-divider--from-canvas-warm-to-canvas {
  background: var(--canvas-warm);
}
.section-divider--from-canvas-warm-to-canvas svg { fill: var(--canvas); }
.section-divider--from-canvas-to-warm {
  background: var(--canvas);
}
.section-divider--from-canvas-to-warm svg { fill: var(--canvas-warm); }

/* ============================================================
   USP BAR — oranje balk met 3 voordelen (onder de hero)
   ============================================================ */
.usp-bar {
  background: var(--orange);
  color: #fff;
  padding: 22px 0;
  position: relative;
}
.usp-bar__center { /* erft .center */ }
.usp-bar__list {
  display: grid;
  /* mobiel: 3 punten naast elkaar, icoon boven gecentreerd */
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 10px;
  align-items: start;
}
.usp-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-width: 0;
}
.usp-bar__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.usp-bar__icon svg { width: 28px; height: 28px; }
.usp-bar__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
  min-width: 0;
}
.usp-bar__text strong {
  font-weight: 700;
  font-size: 0.8125rem;
  color: #fff;
  letter-spacing: -0.005em;
}
.usp-bar__text small {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}
/* tablet+: terug naar horizontale opmaak (icoon links naast tekst) */
@media (min-width: 768px) {
  .usp-bar__list { gap: 16px 32px; align-items: center; }
  .usp-bar__item { flex-direction: row; align-items: center; text-align: left; gap: 14px; }
  .usp-bar__text { align-items: flex-start; }
  .usp-bar__text strong { font-size: 1rem; }
  .usp-bar__text small  { font-size: 0.8125rem; }
}
@media (min-width: 1024px) {
  .usp-bar { padding: 26px 0; }
  .usp-bar__text strong { font-size: 1.0625rem; }
  .usp-bar__text small  { font-size: 0.875rem; }
}
.main__preview {
  flex-shrink: 0;
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card-lg);
}
.main__preview--phone {
  width: clamp(140px, 22vw, 220px);
  aspect-ratio: 220 / 460;
  border-radius: 36px;
  border: 6px solid #0F1116;
  background: linear-gradient(180deg, #FDF6F2, #fff);
  position: relative;
}
.main__preview--phone-tall {
  transform: translateY(-32px);
  z-index: 2;
}
.main__preview--phone .screen {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(180deg, #FDF6F2 0%, #fff 60%);
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.main__preview--phone .notch {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 18px;
  background: #0F1116;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}

/* Mock phone content */
.mock-stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 0.625rem;
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(39,46,53,0.05);
}
.mock-stat-card .num { font-size: 1.25rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.mock-stat-card .lbl { font-size: 0.5625rem; color: var(--ink-2); font-weight: 500; margin-top: 2px; }
.mock-stat-card .bar { height: 4px; background: var(--line-2); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.mock-stat-card .bar > div { height: 100%; background: var(--orange); border-radius: 4px; }

.mock-q {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  font-size: 0.625rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mock-q .head { font-size: 0.5rem; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.mock-q .ques { font-weight: 700; color: var(--ink); line-height: 1.3; }
.mock-q .opts { display: grid; gap: 4px; margin-top: auto; }
.mock-q .opt {
  padding: 6px 8px;
  background: var(--canvas-warm);
  border-radius: 8px;
  font-size: 0.5625rem;
  color: var(--ink-2);
}
.mock-q .opt.correct {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  font-weight: 600;
}

.mock-chart-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  flex: 1;
}
.mock-chart-card .lbl { font-size: 0.5rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.mock-chart-card svg { width: 100%; height: auto; margin-top: 8px; }

.mock-streak {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--tb-accent), #FF8E5C);
  padding: 8px 10px;
  border-radius: 12px;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
}
.mock-streak svg { width: 14px; height: 14px; }

/* Partners */
.main__partners { margin-top: 56px; text-align: center; }
.main__info {
  color: var(--ink-3);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}
.main__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;
  align-items: stretch;
  justify-items: stretch;
}
@media (min-width: 768px) { .main__list { grid-template-columns: repeat(4, 1fr); } }
.main__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-align: left;
  padding: 12px 4px;
}
.main__logo-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--orange-light);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.main__logo-icon svg { width: 24px; height: 24px; }
.main__logo-label {
  display: inline-block;
  min-width: 0;
}
.main__logo-label em {
  font-style: normal;
  color: var(--orange);
  font-weight: 700;
}

/* ============================================================
   QUALITY (gallery + counters)
   ============================================================ */
.quality {
  padding: 80px 0;
  background: var(--canvas-warm);
}
@media (min-width: 1024px) { .quality { padding: 120px 0; } }

.quality__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .quality__body { grid-template-columns: 1.1fr 1fr; gap: 64px; }
}

.quality__gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
}
.quality__gallery::before {
  content: "";
  position: absolute;
  inset: -10% -10%;
  background:
    radial-gradient(circle at 30% 30%, rgba(251, 109, 58, 0.10), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(251, 109, 58, 0.06), transparent 55%);
  z-index: 0;
  pointer-events: none;
}
.quality__preview {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--t-base) var(--ease-spring);
}
.quality__preview:hover { transform: translateY(-4px); }
.quality__preview:nth-child(1) { transform: translateY(-12px); }
.quality__preview:nth-child(2) { transform: translateY(8px); }
.quality__preview:nth-child(3) { transform: translateY(-4px); }
.quality__preview:nth-child(4) { transform: translateY(16px); }

/* Fan-stack variant: 3 vraag-mockups als waaier */
.quality__gallery--fan {
  display: block;
  padding: 0;
}
.quality__gallery--fan::before { display: none; }
.quality__fan {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.92;
  perspective: 1200px;
}
.quality__fan-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  height: auto;
  border-radius: 18px;
  background: #0F1A2E;
  box-shadow:
    0 24px 48px -16px rgba(15, 26, 46, 0.35),
    0 8px 16px -8px rgba(15, 26, 46, 0.22);
  transform-origin: center center;
  transition: transform var(--t-slow) var(--ease-spring);
  will-change: transform;
}
.quality__fan-card--back {
  transform: translate(-50%, -50%) rotate(-8deg) translate(-12%, -6%) scale(0.92);
  z-index: 1;
  opacity: 0.85;
}
.quality__fan-card--mid {
  transform: translate(-50%, -50%) rotate(6deg) translate(14%, 4%) scale(0.96);
  z-index: 2;
}
.quality__fan-card--front {
  transform: translate(-50%, -50%) rotate(-2deg) translate(0%, 0%) scale(1.04);
  z-index: 3;
  box-shadow:
    0 32px 64px -16px rgba(15, 26, 46, 0.40),
    0 12px 24px -8px rgba(15, 26, 46, 0.25);
}

/* Hover: spreid de waaier verder */
.quality__fan:hover .quality__fan-card--back {
  transform: translate(-50%, -50%) rotate(-12deg) translate(-22%, -10%) scale(0.92);
}
.quality__fan:hover .quality__fan-card--mid {
  transform: translate(-50%, -50%) rotate(10deg) translate(22%, 8%) scale(0.96);
}
.quality__fan:hover .quality__fan-card--front {
  transform: translate(-50%, -50%) rotate(-2deg) translate(0%, -2%) scale(1.06);
}

@media (max-width: 767px) {
  .quality__fan { aspect-ratio: 1 / 1; }
  .quality__fan-card { width: 96%; }
  .quality__fan-card--back {
    transform: translate(-50%, -50%) rotate(-6deg) translate(-6%, -8%) scale(0.92);
  }
  .quality__fan-card--mid {
    transform: translate(-50%, -50%) rotate(5deg) translate(8%, 6%) scale(0.96);
  }
}

.quality__wrap { max-width: 480px; }
.quality__wrap .stage { margin-bottom: 16px; }
.quality__title { margin-bottom: 16px; }
.quality__text {
  color: var(--ink-2);
  font-size: 1.0625rem;
  margin-bottom: 28px;
}

.quality__bottom {
  margin-top: 64px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  padding-top: 48px;
}
@media (min-width: 640px) { .quality__bottom { grid-template-columns: repeat(3, 1fr); } }
.quality__item {
  text-align: center;
}
.quality__counter {
  font-weight: 800;
  font-size: clamp(3rem, 4vw + 1rem, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
.quality__sign {
  color: var(--orange);
  font-size: 0.6em;
  margin-left: 4px;
}
.quality__category {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* ============================================================
   STEPS (4 stappen)
   ============================================================ */
.steps {
  padding: 80px 0;
  background: var(--canvas);
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) { .steps { padding: 120px 0; } }

/* Phone-in-hand decoratie in rechterkolom (25%), met swipe-up entry */
.steps__grid {
  display: block;
  position: relative;
}
@media (min-width: 1024px) {
  .steps__grid {
    display: grid;
    grid-template-columns: 65% 35%;
    align-items: end;
    gap: 32px;
  }
}
.steps__content { min-width: 0; }
.steps__visual {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  /* op mobiel: telefoon onder de stappen, gecentreerd-rechts */
  margin-top: 32px;
}
@media (max-width: 1023px) { .steps__visual { display: none; } }

.steps__phone {
  width: clamp(320px, 32vw, 500px);
  height: auto;
  display: block;
  /* Stick naar de onderkant van de sectie zodat hand uit de rand komt */
  margin-right: -32px;
  margin-bottom: -160px;
  filter: drop-shadow(0 30px 40px rgba(39, 46, 53, 0.14));
  animation: stepsPhoneSwipeUp 1100ms var(--ease-out) 150ms both;
}
@keyframes stepsPhoneSwipeUp {
  from {
    opacity: 0;
    transform: translateY(110%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .steps__phone { animation: none; }
}
.steps__center { position: relative; z-index: 1; }
.steps__center { text-align: center; }
.steps .stage { margin-bottom: 16px; }
.steps__title { margin: 0 auto 64px; max-width: 700px; text-wrap: balance; }

.steps__list {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, 1fr);
  text-align: left;
  position: relative;
}
@media (min-width: 640px)  { .steps__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps__list { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.steps__item {
  position: relative;
  text-align: center;
  padding: 32px 20px;
}
.steps__icon {
  width: 80px; height: 80px;
  margin: 0 auto 20px;
  border-radius: 20px;
  background: var(--canvas-warm);
  display: grid; place-items: center;
  position: relative;
  transition: background var(--t-base);
}
.steps__icon svg { width: 40px; height: 40px; color: var(--ink); }
.steps__item:hover .steps__icon {
  background: var(--orange-light);
}
.steps__item:hover .steps__icon svg { color: var(--orange-deep); }

.steps__number {
  display: inline-block;
  padding: 4px 12px;
  background: var(--canvas-warm);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  margin-bottom: 12px;
}
.steps__text {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Dashed connector lines (desktop) */
@media (min-width: 1024px) {
  .steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 72px;
    right: -16px;
    width: 32px;
    height: 2px;
    background-image: linear-gradient(90deg, var(--ink-3) 50%, transparent 50%);
    background-size: 8px 2px;
    background-repeat: repeat-x;
    opacity: 0.4;
  }
}

/* ==== blok 3 van 10 — data-source="tb-public-sections-b.css" ==== */
/* ============================================================
   ADVANTAGES — 3 grote feature cards
   ============================================================ */
.advantages {
  padding: 80px 0;
  background: var(--canvas-warm);
}
@media (min-width: 1024px) { .advantages { padding: 120px 0; } }

.advantages__head {
  text-align: center;
  margin-bottom: 56px;
}
.advantages__photo {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.avatar-stack {
  display: inline-flex;
  align-items: center;
}
.avatar-stack > * {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid var(--canvas-warm);
  background: linear-gradient(135deg, #FED7AA, var(--tb-accent));
  display: grid; place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.875rem;
  margin-left: -16px;
  box-shadow: 0 4px 10px -2px rgba(39,46,53,0.10);
}
.avatar-stack > *:first-child { margin-left: 0; }
.avatar-stack .a-2 { background: linear-gradient(135deg, #BBF7D0, #10B981); }
.avatar-stack .a-3 { background: linear-gradient(135deg, #FDE68A, #F59E0B); }
.avatar-stack .a-4 { background: linear-gradient(135deg, #DDD6FE, var(--tb-ink)); }
.avatar-stack .a-5 { background: linear-gradient(135deg, #FECACA, var(--tb-accent)); }
.avatar-stack .a-more {
  background: var(--ink);
  color: #fff;
  font-size: 0.75rem;
}

.advantages .stage { margin-bottom: 16px; }
.advantages__title { max-width: 760px; margin: 0 auto; text-wrap: balance; }

.advantages__list {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .advantages__list { grid-template-columns: repeat(3, 1fr); } }

.advantages__item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base);
}
.advantages__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-lg);
}

.advantages__bg {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #FFF3EB 0%, #FFE4D6 100%);
  display: grid;
  place-items: center;
}
.advantages__item:nth-child(2) .advantages__bg { background: linear-gradient(160deg, #EBF5FF 0%, #D6E8FF 100%); }
.advantages__item:nth-child(3) .advantages__bg { background: linear-gradient(160deg, #F0F0FF 0%, #DCD6FF 100%); }

.advantages__preview {
  width: 80%;
  aspect-ratio: 1;
  position: relative;
}

.advantages__body {
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.advantages__icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--canvas-warm);
  display: grid; place-items: center;
  color: var(--orange);
}
.advantages__icon svg { width: 32px; height: 32px; }
.advantages__info {
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.advantages__text {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  flex: 1;
}
.advantages__btn { align-self: flex-start; margin-top: 8px; }

/* ── Mockup widget: AI-coach "Grootste valkuilen" (card 1) ── */
.adv-coach-preview {
  width: 100%;
  padding: 18px 14px;
  display: block;
  aspect-ratio: auto;
}
.adv-coach-widget {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.adv-coach-widget__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tb-font), sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #F8FAFC;
  margin: 0;
  letter-spacing: -0.01em;
}
.adv-coach-widget__bar {
  display: inline-block;
  width: 3px;
  height: 12px;
  background: #10B981;
  border-radius: 2px;
}
.adv-coach-valks { display: flex; flex-direction: column; gap: 8px; }
.adv-coach-valk {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
}
.adv-coach-valk__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.adv-coach-valk__name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #F1F5F9;
}
.adv-coach-pill {
  background: rgba(239, 68, 68, 0.18);
  color: #FCA5A5;
  font-size: 0.625rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.adv-coach-valk__advice {
  margin-top: 5px;
  font-size: 0.6875rem;
  color: #94A3B8;
  line-height: 1.4;
}

/* ── Mockup widget: verkeersborden sign-quiz card (card 2) ── */
.adv-signs-preview {
  width: 100%;
  padding: 18px 14px;
  display: block;
  aspect-ratio: auto;
}
.adv-signs-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.adv-signs-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}
.adv-signs-progress__bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.adv-signs-progress__fill {
  height: 100%;
  width: 75%;
  background: var(--orange);
  border-radius: 999px;
}
.adv-signs-progress__count {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #94A3B8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.adv-signs-body {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
}
.adv-signs-image {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  display: grid;
  place-items: center;
  padding: 6px;
}
.adv-signs-image svg { width: 100%; height: auto; display: block; }
.adv-signs-category {
  font-size: 0.5625rem;
  color: #64748B;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.adv-signs-q {
  font-family: var(--tb-font), sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #F8FAFC;
  margin: 2px 0 0;
  line-height: 1.25;
}
.adv-signs-opts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}
.adv-signs-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  font-size: 0.6875rem;
  color: #CBD5E1;
}
.adv-signs-opt.is-correct {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.4);
  color: #6EE7B7;
  font-weight: 700;
}
.adv-signs-check {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #10B981;
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.adv-signs-check svg { width: 9px; height: 9px; }

/* Op desktop iets ruimer */
@media (min-width: 1024px) {
  .adv-coach-preview, .adv-signs-preview { padding: 22px 18px; }
  .adv-coach-widget, .adv-signs-card { padding: 16px 16px 14px; }
  .adv-coach-widget__title, .adv-signs-q { font-size: 0.9375rem; }
  .adv-coach-valk__name { font-size: 0.8125rem; }
  .adv-coach-valk__advice { font-size: 0.75rem; }
  .adv-signs-opt { font-size: 0.75rem; padding: 7px 10px; }
}

/* ── Description row 2: "Persoonlijk leerpad" widget panel ── */
.adv-leerpad-panel {
  position: relative;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 60% 50% at 25% 30%, rgba(139, 92, 246, 0.22), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(16, 185, 129, 0.18), transparent 60%),
    #0B1220;
  box-shadow:
    0 30px 60px -20px rgba(11, 18, 32, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  isolation: isolate;
}
.adv-leerpad-widget {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  padding: 22px 22px 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.adv-leerpad-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tb-font), sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #F8FAFC;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.adv-leerpad-bar {
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--tb-ink);
  border-radius: 2px;
}
.adv-leerpad-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.adv-leerpad-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  font-size: 0.9375rem;
  color: #E2E8F0;
  line-height: 1.4;
}
.adv-leerpad-num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--tb-ink), var(--tb-ink-2));
  color: #fff;
  font-weight: 800;
  font-size: 0.875rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.adv-leerpad-text strong { color: #F8FAFC; font-weight: 700; }

.adv-leerpad-quote {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 12px;
  color: #FDE68A;
  font-size: 0.875rem;
  line-height: 1.5;
  font-style: italic;
}
.adv-leerpad-quote-label {
  display: block;
  font-style: normal;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FBBF24;
  margin-bottom: 4px;
}

/* ============================================================
   HISTORY — light section met donker dashboard-panel rechts
   ============================================================ */
.history {
  padding: 80px 0;
  background: var(--canvas-warm);
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) { .history { padding: 120px 0; } }

.history__container {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) { .history__container { grid-template-columns: 1fr 1.2fr; gap: 72px; } }

.history__wrap { max-width: 480px; }
.history__wrap .stage { margin-bottom: 16px; }
.history__title { margin-bottom: 16px; }
.history__info {
  color: var(--ink-2);
  font-size: 1.0625rem;
  margin-bottom: 28px;
}

/* ── Bento grid (3 losse donkere kaarten) ─────────────── */
.history__dashboard {
  position: relative;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
@media (min-width: 640px) {
  .history__dashboard {
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
  }
  .history__widget-recent { grid-column: 1 / -1; }
  .history__widget-prod   { grid-column: 1; }
  .history__widget-weak   { grid-column: 2; }
}

/* ── Widget base — elke kaart eigen donkere achtergrond + glow ─ */
.history .tb-widget {
  position: relative;
  padding: 24px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 80% 100% at 30% 20%, rgba(var(--tb-w-accent-rgb, 249, 115, 22), 0.22), transparent 60%),
    #0B1220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 20px 40px -12px rgba(11, 18, 32, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  isolation: isolate;
  overflow: hidden;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.history .tb-widget::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(circle at 70% 80%, rgba(var(--tb-w-accent-rgb, 249, 115, 22), 0.18) 0%, transparent 50%);
  filter: blur(30px);
  pointer-events: none;
  opacity: 0.8;
}
.history .tb-widget:hover {
  transform: translateY(-3px);
  box-shadow:
    0 28px 56px -16px rgba(11, 18, 32, 0.40),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.history .tb-widget-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.history .tb-widget-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #F8FAFC;
  margin: 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.history .tb-widget-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--tb-w-accent, var(--orange));
  border-radius: 2px;
  flex-shrink: 0;
}
.history .tb-widget-sub {
  font-size: 0.82rem;
  color: #94A3B8;
  margin-top: 4px;
  font-weight: 500;
}

/* Accent kleuren */
.history .tb-widget--accent-purple { --tb-w-accent: var(--tb-ink); --tb-w-accent-rgb: 139, 92, 246; }
.history .tb-widget--accent-green  { --tb-w-accent: #10B981; --tb-w-accent-rgb: 16, 185, 129; }
.history .tb-widget--accent-amber  { --tb-w-accent: #F59E0B; --tb-w-accent-rgb: 245, 158, 11; }

/* ── Recent exams list ────────────────────────────────── */
.history .tb-recent-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.history .tb-recent-item a {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: all .15s var(--ease-out);
}
.history .tb-recent-item a:hover {
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateX(2px);
}
.history .tb-recent-title { color: #F1F5F9; font-weight: 600; font-size: 0.92rem; }
.history .tb-recent-date  { color: #64748B; font-size: 0.82rem; white-space: nowrap; }
.history .tb-recent-score {
  font-weight: 800;
  font-size: 0.95rem;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.history .tb-recent-score--pass { background: rgba(16, 185, 129, 0.18); color: #6EE7B7; }
.history .tb-recent-score--mid  { background: rgba(245, 158, 11, 0.18); color: #FBBF24; }
.history .tb-recent-score--fail { background: rgba(239, 68, 68, 0.18);  color: #FCA5A5; }
.history .tb-recent-trend { font-weight: 800; font-size: 1.05rem; }
.history .tb-recent-trend--up   { color: #34D399; }
.history .tb-recent-trend--down { color: #F87171; }

/* ── Productivity area chart ──────────────────────────── */
.history .tb-area-chart {
  width: 100%;
  height: 84px;
  display: block;
  margin: 8px 0 4px;
}
.history .tb-prod-labels {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.history .tb-prod-label {
  flex: 1;
  text-align: center;
  font-size: 0.68rem;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ── Zwakste onderwerp ────────────────────────────────── */
.history .tb-widget-zwakste { text-align: center; }
.history .tb-zwakste-name {
  font-weight: 800;
  font-size: 1.5rem;
  color: #F8FAFC;
  margin: 18px 0 6px;
  letter-spacing: -0.02em;
}
.history .tb-zwakste-pct {
  color: #FBBF24;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 18px;
}

/* ── CTA-ghost ─────────────────────────────────────────── */
.history .tb-widget-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #E2E8F0;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all .15s var(--ease-out);
}
.history .tb-widget-cta-ghost:hover {
  border-color: var(--tb-w-accent, var(--orange));
  color: var(--tb-w-accent, var(--orange));
}

/* ============================================================
   OPTIONS — 8 small feature tiles
   ============================================================ */
.options {
  padding: 80px 0;
  background: var(--canvas-warm);
}
@media (min-width: 1024px) { .options { padding: 120px 0; } }

.options__head {
  text-align: center;
  margin-bottom: 56px;
}
.options__head .stage { margin-bottom: 16px; }
.options__title { max-width: 700px; margin: 0 auto; text-wrap: balance; }

.options__list {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .options__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .options__list { grid-template-columns: repeat(4, 1fr); } }

.options__item {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base);
  box-shadow: var(--shadow-card);
}
.options__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-lg);
}
.options__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--canvas-warm);
  display: grid; place-items: center;
  color: var(--orange);
  transition: background var(--t-base);
}
.options__item:hover .options__icon { background: var(--orange-light); }
.options__icon svg { width: 26px; height: 26px; }
.options__info {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.options__text {
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* ============================================================
   INTEGRATIONS — partner logos grid
   ============================================================ */
.integrations {
  padding: 80px 0;
  background: var(--canvas);
}
@media (min-width: 1024px) { .integrations { padding: 120px 0; } }
.integrations__wrap { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.integrations__wrap .stage { margin-bottom: 16px; }
.integrations__title { margin-bottom: 16px; }
.integrations__text { color: var(--ink-2); font-size: 1.0625rem; }

.integrations__list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .integrations__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .integrations__list { grid-template-columns: repeat(6, 1fr); } }

.integrations__item {
  aspect-ratio: 1.4 / 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  transition: transform var(--t-base) var(--ease-spring), border-color var(--t-fast), color var(--t-fast);
}
.integrations__item:hover {
  transform: translateY(-2px);
  border-color: var(--orange);
  color: var(--orange);
}
.integrations__item svg { width: 36px; height: auto; opacity: 0.85; }

/* ============================================================
   DEVICES — multi-device showcase
   ============================================================ */
.devices {
  padding: 80px 0;
  background: var(--canvas);
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) { .devices { padding: 120px 0; } }

.devices__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1024px) {
  .devices__grid { grid-template-columns: 1fr 1.1fr; gap: 64px; }
}

.devices__copy .stage { margin-bottom: 16px; }
.devices__title { margin-bottom: 16px; text-wrap: balance; }
.devices__text { color: var(--ink-2); font-size: 1.0625rem; margin-bottom: 28px; }

.devices__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.devices__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.devices__list strong { display: block; font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.3; }
.devices__list small { display: block; font-size: 0.9375rem; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.devices__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--orange-light);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.devices__icon svg { width: 22px; height: 22px; }

/* Visual: laptop met phone-in-hand er overheen */
.devices__visual {
  position: relative;
  width: 100%;
  min-height: 360px;
}
.devices__laptop {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(39, 46, 53, 0.18));
}
.devices__phone {
  position: absolute;
  right: -8%;
  bottom: -8%;
  width: 38%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(39, 46, 53, 0.22));
}
@media (max-width: 767px) {
  .devices__phone { right: -4%; bottom: -16%; width: 50%; }
}

/* ============================================================
   SEO CONTENT — losse tekstblokken (zoals theorie.nl)
   ============================================================ */
.seo-content {
  padding: 80px 0;
  background: var(--canvas-warm);
}
@media (min-width: 1024px) { .seo-content { padding: 120px 0; } }

.seo-content__head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.seo-content__head .stage { margin-bottom: 16px; }
.seo-content__title { margin-bottom: 12px; text-wrap: balance; }

.seo-content__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .seo-content__list { gap: 56px; }
}

.seo-block {
  background: transparent;
  border: 0;
  padding: 0;
  display: block;
}
.seo-block h3 {
  font-family: var(--tb-font), sans-serif;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 16px;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .seo-block h3 { font-size: 1.5rem; }
}
.seo-block p {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 12px;
}
.seo-block p:last-child { margin-bottom: 0; }
.seo-block strong { color: var(--ink); font-weight: 700; }
.seo-block em { font-style: italic; color: var(--orange-deep); font-weight: 600; }

/* ============================================================
   PRICING — 2 plannen met week/maand toggle
   ============================================================ */
.pricing {
  padding: 80px 0;
  background: var(--canvas-warm);
}
@media (min-width: 1024px) { .pricing { padding: 120px 0; } }

.pricing__head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.pricing__head .stage { margin-bottom: 16px; }
.pricing__title { margin-bottom: 16px; }
.pricing__sub { color: var(--ink-2); font-size: 1.0625rem; }

/* Toggle — segmented control */
.pricing__toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 32px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
}
.pricing__toggle-btn {
  position: relative;
  z-index: 1;
  padding: 10px 28px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink-2);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: color var(--t-base);
}
.pricing__toggle-btn.is-active { color: #fff; }
.pricing__toggle-pill {
  position: absolute;
  z-index: 0;
  top: 4px; bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: var(--orange);
  border-radius: var(--r-pill);
  transition: transform var(--t-base) var(--ease-out);
}
.pricing__toggle[data-active="maand"] .pricing__toggle-pill { transform: translateX(100%); }

/* Cards */
.pricing__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  align-items: stretch;
}
@media (min-width: 768px) { .pricing__cards { grid-template-columns: 1fr 1fr; gap: 28px; } }

.pricing__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.pricing__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-lg); }

.pricing__ribbon {
  background: var(--canvas-warm);
  color: transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
  padding: 10px;
  letter-spacing: 0.04em;
  user-select: none;
  min-height: 40px;
}
.pricing__card--highlight {
  border-color: var(--orange);
  border-width: 2px;
  box-shadow: 0 24px 56px -16px rgba(251, 109, 58, 0.32);
}
.pricing__card--highlight .pricing__ribbon {
  background: var(--orange);
  color: #fff;
  text-transform: uppercase;
}

.pricing__body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 1024px) { .pricing__body { padding: 32px 36px 36px; } }

.pricing__name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pricing__price {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin-top: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.pricing__currency { font-size: 1.5rem; margin-top: 8px; font-weight: 700; color: var(--ink-2); }
.pricing__amount { font-size: 3.5rem; }
.pricing__cents { font-size: 1.125rem; margin-top: 8px; font-weight: 700; }
.pricing__per { color: var(--ink-2); font-size: 0.9375rem; margin-top: 4px; }

/* Discount mechaniek */
.pricing__discount {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 12px;
  align-self: flex-start;
  box-shadow: var(--shadow-btn);
}
.pricing__was {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  margin-right: 12px;
  color: var(--ink-3);
  font-weight: 700;
}
.pricing__was-amount { font-size: 1.75rem; line-height: 1; margin-top: 14px; }
.pricing__was-cents { font-size: 0.75rem; margin-top: 14px; font-weight: 700; }
.pricing__strike {
  position: absolute;
  inset: 0;
  width: 110%;
  height: 100%;
  color: var(--orange);
  pointer-events: none;
  transform: translateY(6px) rotate(-3deg);
}

.pricing__lead {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}

.pricing__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 28px;
  flex: 1;
}
.pricing__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.4;
}
.pricing__features li svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--orange);
}
.pricing__features li strong { color: var(--ink); font-weight: 700; }

.pricing__cta {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.pricing__guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 32px;
}
.pricing__guarantee svg { width: 18px; height: 18px; color: var(--orange); }

/* ==== blok 4 van 10 — data-source="tb-public-sections-c.css" ==== */
/* ============================================================
   DESCRIPTION — split rows
   ============================================================ */
.description {
  padding: 80px 0;
  background: var(--canvas-warm);
}
@media (min-width: 1024px) { .description { padding: 120px 0; } }

.description__row {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  align-items: center;
}
.description__row + .description__row { margin-top: 96px; }
@media (min-width: 1024px) {
  .description__row {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  .description__row + .description__row { margin-top: 128px; }
  .description__row:nth-child(even) .description__wrap { order: 2; }
}
.description__wrap { max-width: 480px; }
.description__wrap .stage { margin-bottom: 16px; }
.description__title { margin-bottom: 16px; }
.description__text {
  color: var(--ink-2);
  font-size: 1.0625rem;
  margin-bottom: 28px;
}

.description__details {
  position: relative;
  background: #fff;
  border-radius: 32px;
  padding: 48px 32px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.description__details::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(251, 109, 58, 0.10), transparent 70%);
  pointer-events: none;
}

/* Calendar mock for "schedule" feature */
.calendar-mock {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  position: relative;
  z-index: 1;
}
.calendar-mock__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.calendar-mock__month {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.calendar-mock__nav {
  display: flex;
  gap: 4px;
}
.calendar-mock__nav button {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  display: grid; place-items: center;
  color: var(--ink-2);
}
.calendar-mock__nav svg { width: 12px; height: 12px; }
.calendar-mock__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 0.75rem;
  text-align: center;
}
.calendar-mock__dow {
  color: var(--ink-3);
  font-weight: 600;
  padding: 6px 0;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.calendar-mock__day {
  padding: 8px 0;
  border-radius: 8px;
  color: var(--ink-2);
  font-weight: 500;
}
.calendar-mock__day.is-muted { opacity: 0.3; }
.calendar-mock__day.is-event {
  background: var(--canvas-warm);
  color: var(--ink);
  font-weight: 700;
}
.calendar-mock__day.is-today {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
}
.calendar-mock__day.is-dot { position: relative; }
.calendar-mock__day.is-dot::after {
  content: "";
  position: absolute;
  bottom: 3px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--orange);
}

/* Reminder list mock */
.reminder-mock {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.reminder-mock__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(39,46,53,0.04);
}
.reminder-mock__check {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 8px;
  border: 2px solid var(--line);
  display: grid; place-items: center;
}
.reminder-mock__item.done .reminder-mock__check {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.reminder-mock__check svg { width: 14px; height: 14px; opacity: 0; }
.reminder-mock__item.done .reminder-mock__check svg { opacity: 1; }
.reminder-mock__text {
  flex: 1;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}
.reminder-mock__item.done .reminder-mock__text {
  text-decoration: line-through;
  color: var(--ink-3);
}
.reminder-mock__meta {
  font-size: 0.75rem;
  color: var(--ink-3);
  font-weight: 500;
}

/* ============================================================
   PRODUCTIVITY — split + 3 categorieën
   ============================================================ */
.productivity {
  padding: 80px 0;
  background: var(--canvas);
}
@media (min-width: 1024px) { .productivity { padding: 120px 0; } }

.productivity__row {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .productivity__row { grid-template-columns: 1fr 1.2fr; gap: 96px; }
  /* sticky titel-kolom alleen op desktop (2-koloms); op mobiel zou de titel
     blijven plakken terwijl de kaarten er overheen scrollen → clipping */
  .productivity__wrap { position: sticky; top: 110px; }
}
.productivity__wrap { max-width: 460px; }
.productivity__wrap .stage { margin-bottom: 16px; }
.productivity__title { margin-bottom: 16px; }
.productivity__info { color: var(--ink-2); font-size: 1.0625rem; margin-bottom: 28px; }

.productivity__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.productivity__item {
  background: var(--canvas-warm);
  border-radius: 24px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  transition: transform var(--t-base) var(--ease-spring);
}
@media (min-width: 640px) {
  .productivity__item { grid-template-columns: 1fr 1.2fr; }
  .productivity__item:nth-child(even) .productivity__preview { order: 2; }
}
.productivity__item:hover { transform: translateY(-2px); }
.productivity__preview {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #FFF3EB, #FFE4D6);
  display: grid;
  place-items: center;
  position: relative;
}
.productivity__item:nth-child(2) .productivity__preview { background: linear-gradient(135deg, #EBF5FF, #D6E8FF); }
.productivity__item:nth-child(3) .productivity__preview { background: linear-gradient(135deg, #F0F0FF, #DCD6FF); }
.productivity__details { padding: 0 8px; }
.productivity__category {
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}
.productivity__text {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ============================================================
   REVIEW — testimonials
   ============================================================ */
.review {
  padding: 80px 0;
  background: var(--canvas-warm);
}
@media (min-width: 1024px) { .review { padding: 120px 0; } }
.review__head { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.review__head .stage { margin-bottom: 16px; }

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

.review__item {
  background: #fff;
  border-radius: 24px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base);
}
.review__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-lg);
}
.review__stars { display: flex; gap: 2px; color: #F59E0B; }
.review__stars svg { width: 18px; height: 18px; fill: currentColor; }
.review__text {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  flex: 1;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.review__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.review__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}
.review__author { font-weight: 700; font-size: 0.9375rem; color: var(--ink); }
.review__company { font-size: 0.8125rem; color: var(--ink-3); margin-top: 2px; }

/* ============================================================
   CTA — final
   ============================================================ */
.consultation {
  padding: 80px 0;
  background: var(--canvas);
}
@media (min-width: 1024px) { .consultation { padding: 120px 0; } }

.consultation__box {
  position: relative;
  background:
    radial-gradient(circle at 80% 30%, rgba(251, 109, 58, 0.20), transparent 60%),
    radial-gradient(circle at 20% 70%, rgba(255, 230, 200, 0.50), transparent 60%),
    linear-gradient(140deg, var(--canvas-cream), #FFEDE0);
  border-radius: 36px;
  padding: 56px 32px;
  text-align: center;
  overflow: hidden;
}
@media (min-width: 1024px) { .consultation__box { padding: 88px 40px; } }

.consultation__box .stage { margin-bottom: 20px; }
.consultation__title { max-width: 18ch; margin: 0 auto 16px; text-wrap: balance; }
.consultation__text {
  color: var(--ink-2);
  font-size: 1.0625rem;
  max-width: 50ch;
  margin: 0 auto 32px;
}
.consultation__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.consultation__fine {
  margin-top: 20px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* Floating background shapes */
.consultation__shape {
  position: absolute;
  border-radius: 24px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.8);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(251, 109, 58, 0.10);
  display: none;
}
@media (min-width: 1024px) { .consultation__shape { display: block; } }
.consultation__shape--1 {
  top: 40px; left: 48px;
  width: 96px; height: 96px;
  transform: rotate(-12deg);
}
.consultation__shape--2 {
  bottom: 56px; right: 64px;
  width: 80px; height: 80px;
  border-radius: 50%;
  transform: rotate(8deg);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #14181E;
  color: #C8CDD4;
  padding: 80px 0 32px;
}
.footer__body {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  padding-bottom: 56px;
  border-bottom: 1px solid #252B33;
}
@media (min-width: 1024px) { .footer__body { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 64px; } }

.footer__wrap { max-width: 380px; }
.footer__logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em;
  color: #fff;
}
.footer__logo-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--orange);
  display: grid; place-items: center; color: #fff;
}
.footer__logo-mark svg { width: 20px; height: 20px; }
.footer__text {
  margin-top: 16px;
  color: #8B939B;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.footer__address {
  margin-top: 20px;
  color: #6F767E;
  font-size: 0.8125rem;
  line-height: 1.7;
}

.footer__col h4 {
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 14px; }
.footer__col a {
  color: #8B939B;
  font-size: 0.9375rem;
  transition: color var(--t-fast);
}
.footer__col a:hover { color: #fff; }

.footer__line {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px 0;
  border-bottom: 1px solid #252B33;
}
@media (min-width: 768px) { .footer__line { flex-direction: row; align-items: center; } }

.footer__downloads {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.footer__download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #1F252E;
  border: 1px solid #252B33;
  border-radius: 12px;
  color: #fff;
  transition: background var(--t-fast);
}
.footer__download:hover { background: #2A3038; }
.footer__download svg { width: 22px; height: 22px; flex-shrink: 0; }
.footer__download .sm { font-size: 0.625rem; color: #8B939B; line-height: 1; margin-bottom: 2px; }
.footer__download .lg { font-size: 0.9375rem; font-weight: 700; line-height: 1; }

/* Footer contact */
.footer__contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: #B0B8C1;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color var(--t-fast);
}
.footer__contact:hover { color: #fff; }
.footer__contact svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--orange); }

/* Footer payments */
.footer__payments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__payments-label {
  font-size: 0.75rem;
  color: #6F767E;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer__payments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.footer__pay {
  display: inline-flex;
  align-items: center;
}
.footer__pay svg {
  width: 40px;
  height: auto;
  display: block;
  border-radius: 4px;
  filter: grayscale(0.05);
}
.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;
}

.footer__nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__nav a {
  color: #8B939B;
  font-size: 0.875rem;
  transition: color var(--t-fast);
}
.footer__nav a:hover { color: #fff; }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 24px;
}
@media (min-width: 640px) { .footer__bottom { flex-direction: row; align-items: center; } }
.footer__copyright { color: #6F767E; font-size: 0.8125rem; }
.footer__social { display: flex; gap: 8px; }
.footer__social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #1F252E;
  display: grid; place-items: center;
  color: #8B939B;
  transition: background var(--t-fast), color var(--t-fast);
}
.footer__social a:hover { background: var(--orange); color: #fff; }
.footer__social svg { width: 16px; height: 16px; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==== blok 5 van 10 ==== */
/* Brand-logo sizing voor header/footer (vervangt de placeholder SVG-mark uit de template) */
  .header__logo-img{display:block;height:36px;width:auto;max-width:200px}
  .footer__logo-img{display:block;height:40px;width:auto;max-width:220px}
  .header__logo,.footer__logo{display:inline-flex;align-items:center;gap:0}

  /* ───── Wave A — Deadline / Comparison / FAQ / Garantie ───── */

  /* Deadline-card sectie */
  .deadline{padding:48px 0 8px}
  .deadline__center{padding:0 24px}
  .deadline__card{background:linear-gradient(135deg,#FFEFE6 0%,#FFFCFA 100%);border:1px solid rgba(251,109,58,.18);border-radius:24px;padding:48px 40px;text-align:center;max-width:880px;margin:0 auto;box-shadow:0 12px 40px rgba(251,109,58,.08)}
  .deadline__title{margin:8px 0 16px}
  .deadline__lead{font-size:1.0625rem;color:var(--ink-2);max-width:640px;margin:0 auto 28px;line-height:1.55}
  .deadline__points{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
  .deadline__point{background:#fff;border-radius:16px;padding:20px 18px;text-align:left;box-shadow:0 4px 12px rgba(39,46,53,.06)}
  .deadline__point svg{width:24px;height:24px;color:var(--orange);margin-bottom:8px}
  .deadline__point strong{display:block;font-weight:800;color:var(--ink);font-size:1.0625rem;margin-bottom:4px}
  .deadline__point span{display:block;font-size:.875rem;color:var(--ink-3);line-height:1.4}
  @media (max-width:720px){.deadline__points{grid-template-columns:1fr;gap:12px}.deadline__card{padding:32px 24px}}

  /* Vergelijkingstabel */
  .comparison{padding:48px 0}
  .comparison__center{padding:0 24px}
  .comparison__head{text-align:center;max-width:680px;margin:0 auto 32px}
  .comparison__lead{color:var(--ink-2);margin-top:12px;font-size:.95rem;line-height:1.5}
  .comparison__table-wrap{max-width:920px;margin:0 auto;overflow-x:auto;border-radius:20px;border:1px solid var(--line);background:#fff;box-shadow:0 8px 24px rgba(39,46,53,.06)}
  .comparison__table{width:100%;border-collapse:collapse;font-size:.9375rem}
  .comparison__table th,.comparison__table td{padding:18px 20px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line-2)}
  .comparison__table thead th{font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:700;background:#FBFAF8}
  .comparison__th--us{color:var(--orange-deep);background:linear-gradient(180deg,rgba(251,109,58,.10),rgba(251,109,58,.06))!important}
  .comparison__table tbody tr:last-child th,.comparison__table tbody tr:last-child td{border-bottom:0}
  .comparison__table tbody th{font-weight:600;color:var(--ink-2);width:34%;background:#FBFAF8}
  .comparison__us{color:var(--ink);font-weight:600;background:rgba(251,109,58,.06)}
  .comparison__us strong{color:var(--orange-deep);font-weight:800}
  .comparison__check{width:18px;height:18px;color:var(--orange);vertical-align:-3px;margin-right:6px}
  .comparison__cross{width:18px;height:18px;color:var(--ink-3);vertical-align:-3px;margin-right:6px;opacity:.7}
  .comparison__note{display:block;font-size:.75rem;color:var(--ink-3);font-weight:500;margin-top:2px}
  .comparison__source{font-size:.8125rem;color:var(--ink-3);text-align:center;margin-top:16px;max-width:680px;margin-left:auto;margin-right:auto;line-height:1.5}
  /* Mobiel: vergelijkingstabel → kaarten per rij (geen horizontale scroll) */
  @media (max-width:600px){
    .comparison__table-wrap{max-width:100%;border:0;background:transparent;box-shadow:none;overflow:visible;border-radius:0}
    .comparison__table{font-size:.9375rem}
    .comparison__table thead{display:none}
    .comparison__table tbody,.comparison__table tbody tr,.comparison__table tbody th,.comparison__table tbody td{display:block;width:auto}
    .comparison__table tbody tr{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 4px 14px rgba(39,46,53,.05)}
    .comparison__table tbody th{font-weight:800;color:var(--ink);font-size:1.02rem;padding:0 0 10px;background:transparent;border:0}
    .comparison__table tbody td{padding:8px 0 0;border:0;background:transparent!important;color:var(--ink-2)}
    .comparison__table tbody td::before{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:3px}
    .comparison__table tbody td.comparison__us::before{content:"Theoriebriljant";color:var(--orange-deep)}
    .comparison__table tbody td:not(.comparison__us)::before{content:"Andere platforms"}
    .comparison__us{border-left:3px solid var(--orange);padding-left:12px!important;border-radius:0 8px 8px 0}
  }

  /* FAQ-sectie */
  .faq{padding:48px 0;background:linear-gradient(180deg,#FFFCFA 0%,#FFEFE6 100%)}
  .faq__center{padding:0 24px}
  .faq__head{text-align:center;max-width:600px;margin:0 auto 32px}
  .faq__list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  .faq__item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden;transition:border-color .15s,box-shadow .15s}
  .faq__item[open]{border-color:rgba(251,109,58,.30);box-shadow:0 4px 14px rgba(251,109,58,.08)}
  .faq__item summary{padding:18px 56px 18px 22px;cursor:pointer;font-weight:700;color:var(--ink);font-size:1rem;list-style:none;position:relative;line-height:1.4}
  .faq__item summary::-webkit-details-marker{display:none}
  .faq__item summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:300;color:var(--orange);transition:transform .15s}
  .faq__item[open] summary::after{content:"−";transform:translateY(-50%) rotate(180deg)}
  .faq__answer{padding:0 22px 20px;color:var(--ink-2);line-height:1.6;font-size:.9375rem}
  @media (max-width:480px){.faq__item summary{padding:16px 46px 16px 18px;font-size:.95rem}.faq__item summary::after{right:16px}.faq__answer{padding:0 18px 18px}}
  /* FAQ-animatie: veer-marker + pop, antwoord fade-in, + échte hoogte-animatie (moderne browsers) */
  .faq__item summary::after{transition:transform var(--t-base) var(--ease-spring)}
  .faq__item[open] summary::after{transform:translateY(-50%) rotate(180deg) scale(1.12)}
  @keyframes faqAnswerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .faq__item[open] .faq__answer{animation:faqAnswerIn .4s var(--ease-out) both}
  @supports (interpolate-size: allow-keywords){
    .faq{interpolate-size:allow-keywords}
    .faq__item::details-content{block-size:0;overflow:hidden;transition:block-size var(--t-base) var(--ease-out),content-visibility var(--t-base);transition-behavior:allow-discrete}
    .faq__item[open]::details-content{block-size:auto}
  }
  @media (prefers-reduced-motion: reduce){
    .faq__item summary::after{transition:none}
    .faq__item[open] summary::after{transform:translateY(-50%) rotate(180deg)}
    .faq__item[open] .faq__answer{animation:none}
    .faq__item::details-content{transition:none}
  }

  /* Final-CTA fineprint */
  .consultation__fineprint{font-size:.8125rem;color:rgba(255,255,255,.7);margin-top:16px;letter-spacing:.02em}

/* ==== blok 6 van 10 — id="tb-v2-dark" — UITGEZET 3-10-2026 ====
   Dit blok maakte advantages, history, description en consultation donker
   (#0F172A, frosted glass, paarse gloed, veel !important). Keuze Daan: de
   pagina wordt licht met één donker slot, zoals schets 1 (Examenbureau).
   Het staat ingepakt in een media-query die nooit waar is, omdat het zelf
   commentaar bevat en dus niet als geheel uit te commentariëren is.
   Terugzetten: haal de regel @media (min-width: 99999px) { en haar sluithaak weg.
   Het donkere slot staat verderop opnieuw, in de nieuwe vormtaal. ==== */
@media (min-width: 99999px) {

/* v2 — donkere secties in login/dashboard-palet: #0F172A + oranje glow + frosted-glass.
   Donker: advantages, history, description, consultation. (steps blijft licht, zoals origineel.)
   Social proof onaangeroerd. */

/* ---- AI-COACH (advantages) als donkere band ---- */
.advantages{ background:#0F172A !important; position:relative; isolation:isolate; }
/* glow alleen onderin — niets bij de bovenrand zodat de naad met steps verdwijnt (doorlopend navy) */
.advantages::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(700px 460px at 18% 96%, rgba(139,92,246,.12), transparent 62%);
}
.advantages .advantages__center{ position:relative; z-index:1; }
.advantages .advantages__title,
.advantages .advantages__body,
.advantages .advantages__info,
.advantages .advantages__text{ color:#E2E8F0 !important; }
.advantages .stage{ color:var(--tb-accent) !important; }
.advantages .advantages__item{ background:transparent !important; border:0 !important; box-shadow:none !important; }

/* advantages → echte dashboard-widgets (Videocursus / Alle CBR-vragen / Persoonlijke coach) */
.advantages .tb-widget{
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.10) !important;
  border-radius:18px !important; padding:18px !important;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 30px -14px rgba(0,0,0,.5) !important;
}
.advantages .tb-widget-head{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.advantages .tb-widget-title{ color:#fff !important; font-size:1.05rem !important; margin:0 !important; }
.advantages .tb-widget-title::before{ display:none !important; }   /* geen accent-bar; we gebruiken het icoon */
.advantages .tb-widget-sub{ color:rgba(226,232,240,.6) !important; font-size:.8rem !important; margin:2px 0 0 !important; }
.advantages .aw-icon{ width:40px; height:40px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:rgba(var(--tb-w-accent-rgb,249,115,22),.16); color:var(--tb-w-accent,var(--tb-accent)); }
.advantages .aw-list{ display:flex; flex-direction:column; gap:8px; }
.advantages .aw-row{ display:flex; align-items:center; gap:10px; font-size:.85rem; color:#E2E8F0;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:8px 11px; }
.advantages .aw-row__name{ flex:1; }
.advantages .aw-row__play{ color:var(--tb-w-accent,var(--tb-accent)); display:inline-flex; }
.advantages .aw-tag{ font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(226,232,240,.55);
  border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:2px 8px; }
.advantages .aw-pill{ font-size:.7rem; font-weight:700; color:var(--tb-w-accent,#10B981);
  background:rgba(var(--tb-w-accent-rgb,16,185,129),.18); border-radius:999px; padding:2px 9px; }
.advantages .aw-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.advantages .aw-chip{ font-size:.72rem; color:#E2E8F0; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10); border-radius:999px; padding:4px 10px; }
.advantages .aw-stat{ font-size:.8rem; color:rgba(226,232,240,.7); }
.advantages .aw-stat b{ color:#fff; }

/* beeldkaarten (oefenexamens-stijl): beeld-header bovenaan, aangesloten op de body eronder */
.advantages .advantages__list{ align-items:start; }
.aw-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  border-radius:18px; overflow:hidden; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 34px -16px rgba(0,0,0,.6); }
.aw-card__hero{ position:relative; height:168px; background:#F4F4F8;
  border-bottom:3px solid rgb(var(--aw-accent-rgb,249,115,22)); }
.aw-card__img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.aw-card__hero--contain .aw-card__img{ object-fit:contain; padding:14px; }
.aw-card__hero-ov{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(15,23,42,.18) 100%); }
.aw-card__body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:7px; }
.aw-card .aw-icon{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; margin-bottom:2px;
  background:rgba(var(--aw-accent-rgb,249,115,22),.16); color:rgb(var(--aw-accent-rgb,249,115,22)); }
.aw-card__title{ color:#fff !important; font-size:1.12rem; font-weight:800; margin:0; letter-spacing:-.01em; }
.aw-card__sub{ color:rgba(226,232,240,.65) !important; font-size:.82rem; margin:0; }
.aw-card__text{ color:rgba(226,232,240,.85) !important; font-size:.9rem; margin:4px 0 6px; line-height:1.5; }
.aw-card__tag{ position:absolute; top:12px; right:12px; z-index:2; font-size:.62rem; text-transform:uppercase; letter-spacing:.07em;
  color:#fff; background:rgba(15,23,42,.62); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:3px 10px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.aw-card .btn{ align-self:flex-start; margin-top:4px; }
.aw-card--purple{ --aw-accent-rgb:139,92,246; }
.aw-card--orange{ --aw-accent-rgb:249,115,22; }
.aw-card--green{ --aw-accent-rgb:16,185,129; }

/* steps: korte detail-regel onder elk label */
.steps__sub{ font-size:.8rem; color:var(--ink-3,#9CA3AF); margin-top:4px; line-height:1.4; }

/* ---- Oranje branding-knoppen in alle donkere secties (= native .btn_orange) ---- */
.advantages .btn_border, .history .btn_border, .description .btn_border{
  background: var(--orange) !important; color:#fff !important;
  border-color: transparent !important; box-shadow: var(--shadow-btn);
}

/* ---- FINAL CTA (consultation) als donkere band ---- */
.consultation{ background:#0F172A !important; position:relative; isolation:isolate; }
.consultation::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(640px 380px at 85% 15%, rgba(249,115,22,.14), transparent 60%);
}
.consultation .center{ position:relative; z-index:1; }
.consultation .consultation__box{
  position:relative; isolation:isolate;
  background:
    radial-gradient(700px 380px at 12% 18%, rgba(249,115,22,.22), transparent 60%),
    radial-gradient(620px 420px at 88% 82%, rgba(139,92,246,.20), transparent 60%),
    radial-gradient(900px 520px at 50% 120%, rgba(236,72,153,.12), transparent 60%),
    linear-gradient(150deg, #16213B, #0F172A) !important;
  border:1px solid rgba(255,255,255,.10);
}
/* fijne dot-grid textuur voor diepte */
.consultation .consultation__box::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px; opacity:.5;
}
/* decoratieve shapes → zachte geblurde accent-gloed-bollen */
.consultation .consultation__shape{ position:absolute; z-index:0; border-radius:50%; filter:blur(48px); pointer-events:none; opacity:.55; }
.consultation .consultation__shape--1{ width:260px; height:260px; top:-60px; left:-50px; background:radial-gradient(circle, rgba(249,115,22,.6), transparent 70%); }
.consultation .consultation__shape--2{ width:300px; height:300px; bottom:-80px; right:-60px; background:radial-gradient(circle, rgba(139,92,246,.5), transparent 70%); }
/* inhoud boven textuur/shapes */
.consultation .consultation__box > .stage,
.consultation .consultation__box > .consultation__title,
.consultation .consultation__box > .consultation__text,
.consultation .consultation__box > .consultation__guarantee,
.consultation .consultation__box > .consultation__btns,
.consultation .consultation__box > .consultation__fineprint{ position:relative; z-index:1; }
.consultation .consultation__title{ color:#fff !important; }
.consultation .consultation__text{ color:rgba(255,255,255,.78) !important; }
.consultation .stage{ color:var(--tb-accent) !important; }
.consultation .btn_border{ color:#fff !important; border-color:rgba(255,255,255,.32) !important; background:transparent !important; }
/* garantie-badge */
.consultation .consultation__guarantee{ display:inline-flex; align-items:center; gap:8px; margin:0 auto 20px;
  padding:8px 16px; border-radius:999px; font-size:.85rem; font-weight:700; color:#FDBA74;
  background:rgba(249,115,22,.12); border:1px solid rgba(249,115,22,.35); }
.consultation .consultation__guarantee svg{ color:var(--tb-accent); }

/* ===== HISTORY ("Voortgang die je écht begrijpt") + DESCRIPTION ("Geen kennis meer kwijtraken") ===== */
.history, .description{ background:#0F172A !important; position:relative; isolation:isolate; }
.history::before, .description::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 460px at 85% 12%, rgba(249,115,22,.13), transparent 60%),
    radial-gradient(560px 420px at 8% 94%, rgba(139,92,246,.10), transparent 60%);
}
.history > *, .description > *{ position:relative; z-index:1; }
.history h2,.history h3,.history p,.history .history__title,.history .history__lead,
.description h2,.description h3,.description p,.description .description__title,.description .description__lead{ color:#E2E8F0 !important; }
.history .stage, .description .stage{ color:var(--tb-accent) !important; }

/* ---- Dashboard-glass voor de showcase-kaarten in de donkere secties ---- */
/* history: de dashboard-widgets zelf; description: de witte wrapper .description__details */
.history .tb-widget,
.description .description__details{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 30px -14px rgba(0,0,0,.5) !important;
}
/* witte sheen-overlay weg + binnen-kaarten transparant zodat .description__details de enige glass-kaart is */
.description .description__details::before{ display:none !important; }
.description .calendar-mock,
.description .adv-leerpad-panel,
.description .adv-leerpad-widget{ background:transparent !important; border:0 !important; box-shadow:none !important; }
/* widget-/paneel-tekst licht; semantische score-/accent-/chart-kleuren blijven ongemoeid */
.history .tb-widget-title,.history .tb-widget-sub,.history .tb-recent-title,
.description .adv-leerpad-title,.description .adv-leerpad-text,.description .calendar-mock__month{ color:#E2E8F0 !important; }
.history .tb-recent-date,.history .tb-prod-label,.history .tb-prod-labels,
.description .adv-leerpad-quote-label,.description .calendar-mock__dow{ color:rgba(226,232,240,.6) !important; }
.description .calendar-mock__day{ color:rgba(226,232,240,.78) !important; }
.description .calendar-mock__day.is-muted{ color:rgba(226,232,240,.3) !important; }

/* ---- Agenda-widget (vervangt de maand-kalender) — countdown + dagdoel, dashboard-stijl ---- */
.tb-agenda-mock{ display:flex; flex-direction:column; gap:22px; padding:8px 6px; color:#E2E8F0; }
.tb-agenda-count{ text-align:center; line-height:1.05; }
.tb-agenda-count__label{ display:block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(226,232,240,.55); }
.tb-agenda-count__num{ display:block; font-size:3.6rem; font-weight:800; color:var(--tb-accent); letter-spacing:-.02em; }
.tb-agenda-count__unit{ display:block; font-size:.92rem; color:rgba(226,232,240,.75); }
.tb-agenda-today__row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; font-size:.9rem; }
.tb-agenda-today__task{ color:#E2E8F0; font-weight:600; }
.tb-agenda-today__pct{ color:var(--tb-accent); font-weight:700; }
.tb-agenda-bar{ height:8px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.tb-agenda-bar > span{ display:block; height:100%; border-radius:999px; background:var(--orange,var(--tb-accent)); }
.tb-agenda-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.tb-agenda-day{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.tb-agenda-dot{ width:100%; max-width:34px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#E2E8F0; font-size:.9rem; font-weight:700; }
.tb-agenda-lbl{ font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:rgba(226,232,240,.55); }
.tb-agenda-day.is-done  .tb-agenda-dot{ background:rgba(249,115,22,.18); border-color:rgba(249,115,22,.45); color:var(--tb-accent); }
.tb-agenda-day.is-today .tb-agenda-dot{ background:var(--orange,var(--tb-accent)); border-color:transparent; box-shadow:0 6px 16px -6px rgba(249,115,22,.7); }
.tb-agenda-day.is-today .tb-agenda-dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:#fff; }
.tb-agenda-day.is-today .tb-agenda-lbl{ color:var(--tb-accent); }
.tb-agenda-day.is-exam  .tb-agenda-dot{ background:rgba(249,115,22,.14); border-color:rgba(249,115,22,.5); }

}

/* ==== blok 7 van 10 — data-source="tb-scroll-reveal" ==== */
/* Scroll-reveal: secties onder de hero faden omhoog bij in-beeld komen.
   Alleen actief mét JS (html.js-anim, gezet als IntersectionObserver bestaat) én
   wanneer de gebruiker beweging toestaat. Geen JS / reduced-motion → gewoon zichtbaar. */
@media (prefers-reduced-motion: no-preference) {
  html.js-anim .usp-bar__list,
  html.js-anim .pricing__head,
  html.js-anim .pricing__cards,
  html.js-anim .review__list,
  html.js-anim .productivity__row,
  html.js-anim .options__list,
  html.js-anim .faq__list,
  html.js-anim .seo-content,
  html.js-anim .footer__body {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease-out), transform .7s var(--ease-spring);
    will-change: opacity, transform;
  }
  html.js-anim .tb-reveal-in { opacity: 1 !important; transform: none !important; }
}

/* Skip-to-content link (WCAG 2.1 — keyboard navigatie) */
.tb-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 12px 24px;
  background: var(--orange, var(--tb-accent));
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  transition: top 200ms;
}
.tb-skip-link:focus {
  top: 0;
  outline: 3px solid rgba(251, 109, 58, 0.40);
  outline-offset: 2px;
}

/* ==== blok 8 van 10 ==== */
#tb-preloader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#fff;transition:opacity .25s ease}
  #tb-preloader.is-hidden{opacity:0;pointer-events:none}
  #tb-preloader img{width:90px;height:90px}
  @media (prefers-reduced-motion: reduce){ #tb-preloader{display:none} }

/* ==== blok 9 van 10 — data-source="tb-copy-rewrite-2026-06" ==== */
/* Hero trust-strip (vervangt de 2e CTA) */
  .hero-trust-strip{
    list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
    margin:18px 0 0;padding:0;font-size:.9rem;color:var(--ink-2);
  }
  .hero-trust-strip li{display:flex;align-items:center;gap:6px;white-space:nowrap;}
  .hero-trust-strip li+li{position:relative;}
  .hero-trust-strip li+li::before{
    content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
    width:4px;height:4px;border-radius:50%;background:var(--line-2,#E2E2E2);
  }
  .hero-trust-strip strong{color:var(--orange);font-weight:800;}

  /* CBR-vergelijkingsregel onder de stat-strip */
  .quality__compare{
    text-align:center;margin:22px auto 0;max-width:520px;
    font-size:.95rem;color:var(--ink-2);line-height:1.5;
  }
  .quality__compare strong{color:var(--ink);font-weight:800;}

  /* Risico-omkering blok */
  .risk-reversal{padding:40px 0;background:linear-gradient(180deg,#FFF7F2 0%,#FFFFFF 100%);}
  .risk-reversal__center{padding:0 24px;}
  .risk-reversal__title{
    text-align:center;font-size:clamp(1.35rem,3.4vw,1.9rem);font-weight:800;
    color:var(--ink);margin:0 auto 26px;max-width:620px;line-height:1.2;
  }
  .risk-reversal__list{
    list-style:none;margin:0 auto;padding:0;max-width:920px;display:grid;gap:14px;
    grid-template-columns:1fr;
  }
  @media (min-width:768px){.risk-reversal__list{grid-template-columns:repeat(3,1fr);}}
  .risk-reversal__list li{
    display:flex;align-items:flex-start;gap:12px;background:#fff;
    border:1px solid var(--line);border-radius:14px;padding:18px 20px;
    font-size:.95rem;color:var(--ink-2);line-height:1.45;box-shadow:var(--shadow-card,0 2px 10px rgba(0,0,0,.04));
  }
  .risk-reversal__list svg{
    flex:0 0 auto;width:22px;height:22px;color:#fff;background:var(--orange);
    border-radius:50%;padding:4px;margin-top:1px;
  }
  .risk-reversal__list strong{color:var(--ink);font-weight:700;}

  /* "Voor wie is dit" sublabel in prijskaarten */
  .pricing__for{margin:-6px 0 4px;font-size:.85rem;font-style:italic;color:var(--ink-3,#8A8F98);}

  /* FAQ-intro */
  .faq__intro{margin:12px auto 0;max-width:560px;color:var(--ink-2);font-size:.95rem;line-height:1.55;}
  .faq__intro a{color:var(--orange);font-weight:700;text-decoration:none;}
  .faq__intro a:hover{text-decoration:underline;}

/* ==== blok 10 van 10 ==== */
@keyframes pulse { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }


/* ============================================================
   RICHTING EXAMENBUREAU — hero (3-10-2026)
   Keuze Daan uit redesign/schetsen/1-examenbureau.html.
   Staat achteraan zodat het de oudere regels overschrijft zonder !important.
   ============================================================ */

/* De primaire knop is inkt, niet oranje. Oranje is signaalkleur:
   het markeert wat de aandacht verdient, het is geen knopkleur. */
.btn_orange{
  background: var(--tb-ink);
  color: var(--tb-canvas);
  box-shadow: none;
  border-radius: var(--tb-r);
}
.btn_orange:hover{ background: var(--tb-ink-2); box-shadow: none; }

/* Aankondiging boven de kop: een streepje en kleinkapitaal in plaats van een pil. */
.main .stage{
  background: none;
  color: var(--tb-ink-3);
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.main .stage::before{
  content: "";
  width: 28px;
  height: 2px;
  background: var(--tb-accent);
  flex: none;
}
.main .stage::after{ content: none; }

/* De nadruk in de kop wordt een streep onder de woorden in plaats van een vlak erachter. */
.main__title em{
  font-style: normal;
  background: none;
  color: inherit;
  padding: 0;
  position: relative;
  white-space: nowrap;
}
.main__title em::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .08em;
  height: .1em;
  background: var(--tb-accent);
}

/* Twee wegen naast elkaar: de knop en een rustige tekstlink. */
.main__btns{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tb-s2);
}
.hero-tekstlink{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--tb-accent-ink);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
.hero-tekstlink:hover{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Feitenbalk onder de hero: alleen getallen die in de database te tellen zijn.
   Verving de strip met "94% slaagt in 1x" en de reviewregel. */
.hero-feiten{
  list-style: none;
  margin: var(--tb-s4) 0 0;
  padding: var(--tb-s3) 0 0;
  border-top: 1px solid var(--tb-line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tb-s3) 0;
}
.hero-feiten li{
  padding-right: var(--tb-s3);
  border-right: 1px solid var(--tb-line);
}
.hero-feiten li:last-child{ border-right: 0; }
.hero-feiten b{
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--tb-ink);
  font-variant-numeric: tabular-nums;
}
.hero-feiten span{
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--tb-ink-3);
}
@media (min-width: 760px){
  .hero-feiten{ grid-template-columns: repeat(4, 1fr); }
}


/* ------------------------------------------------------------
   Overloop op tabletbreedte (3-10-2026)
   Twee decoratieve afbeeldingen stonden absoluut gepositioneerd buiten hun
   container: .quality__fan-card (left 50%, width 92%) en .devices__phone
   (right -8%). Op 768px maakte dat de pagina 792px breed, dus 24px
   horizontaal schuiven. Gemeten in de nulmeting van 3-10 en daarvoor nooit
   opgemerkt, omdat 390 en 1280 het niet laten zien.
   De beelden zijn versiering; afsnijden is hier juister dan verschuiven.
   ------------------------------------------------------------ */
@media (max-width: 1100px){
  .quality__fan,
  .devices__visual{
    overflow: hidden;
  }
}


/* ------------------------------------------------------------
   Prijsbadge (3-10-2026) — verving het handgeschreven "Onze topper!"
   met zijn pijltje. Caveat wordt niet meer geladen.
   ------------------------------------------------------------ */
.pricing__tag{
  position: absolute;
  top: -13px;
  left: var(--tb-s4);
  background: var(--tb-ink);
  color: var(--tb-canvas);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--tb-r-sm);
  white-space: nowrap;
}
.pricing__card--highlight{ position: relative; }


/* ------------------------------------------------------------
   Raakvlakken op aanraakschermen (3-10-2026)
   Gemeten in de nulmeting: 23 elementen onder 44px op de homepage, 16 tot 20
   op de andere publieke pagina's — vooral links in de navigatie en de voet,
   de twee logo's en de sluitknop van de vaste balk.
   Padding in plaats van display-wijziging, zodat de tekstflow in de voet heel
   blijft. Grens op 900px: een tablet is ook touch.
   ------------------------------------------------------------ */
@media (max-width: 900px){
  .footer a,
  .footer__nav a,
  .header__nav a,
  .mobile-menu a,
  .main__list a{
    padding-block: 11px;
  }

  .header__logo,
  .footer__logo,
  .footer__contact{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .sticky-cta__close{
    min-width: 44px;
    min-height: 44px;
  }
}


/* Raakvlakken, tweede ronde (3-10-2026).
   De eerste regel was niet specifiek genoeg: de voetlinks zitten in
   .footer__col ul li a en kregen hun maat van een latere regel.
   Let op de grens: links IN LOPENDE TEKST blijven met rust. WCAG 2.5.8
   zondert die expliciet uit, en een link van 44px hoog midden in een
   alinea breekt de regelafstand. */
@media (max-width: 900px){
  .footer__col ul li a,
  .footer__col a,
  .mobile-menu a,
  .header__nav a{
    display: inline-block;
    padding-block: 11px;
    min-height: 44px;
    box-sizing: border-box;
  }
}


/* Raakvlakken, sluitstuk (3-10-2026).
   Tag-gebaseerd, omdat de klassenamen per pagina verschillen en de vorige
   twee rondes daardoor gaten lieten. Header, nav en voet zijn bedieningszones;
   lopende tekst zit er niet in, behalve de contactregel in de voet, en die
   mag juist wel groeien. */
@media (max-width: 900px){
  header a,
  nav a,
  footer a{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  header button,
  nav button,
  footer button{
    min-height: 44px;
    min-width: 44px;
  }
}


/* ============================================================================
   VORMTAAL EXAMENBUREAU — 3 oktober 2026
   Keuze Daan uit redesign/schetsen/1-examenbureau.html.

   Tot nu toe was alleen de kleur omgezet; de vorm bleef die van het oude
   ontwerp: pil-badges boven elke sectie, oranje pil-knoppen, hoeken van 20 tot
   28px, zachte schaduwen en drie donkere secties met glas. Dit blok zet die
   vorm om naar wat de schets laat zien: wit en inkt, scheiding met een lijn,
   hoeken van 8px, en oranje alleen als klein signaal.

   Staat achteraan tb-home.css zodat het de eerdere blokken overschrijft.
   Raakt alleen de vorm, nooit de tekst.
   ============================================================================ */

/* ── 1. Het sectielabel: een streepje met kleinkapitaal, geen pil ──────────
   Zestien van deze labels staan boven de secties ("Alles op één plek",
   "Drie superkrachten", "Zie waar je staat"). Ze waren afgeronde vlakjes met
   een oranje achtergrond. */
.stage{
  background: none !important;
  color: var(--tb-ink-3) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: none !important;
}
.stage::before{
  content: "";
  width: 28px;
  height: 2px;
  background: var(--tb-accent);
  flex: none;
  border-radius: 0;
  position: static;
  margin: 0;
}
.stage::after{ content: none !important; }

/* ── 2. Knoppen: rechthoekig, inkt voor de hoofdactie ─────────────────────── */
.btn,
.btn_orange,
.btn_white,
.btn_border,
.btn_transparent{
  border-radius: var(--tb-r) !important;
  box-shadow: none !important;
  font-weight: 600;
}
.btn_orange{
  background: var(--tb-ink) !important;
  color: var(--tb-canvas) !important;
}
.btn_orange:hover{ background: var(--tb-ink-2) !important; }

.btn_white,
.btn_border,
.btn_transparent{
  background: var(--tb-canvas) !important;
  color: var(--tb-ink) !important;
  border: 1px solid var(--tb-line-2) !important;
}
.btn_white:hover,
.btn_border:hover,
.btn_transparent:hover{ border-color: var(--tb-ink) !important; }

/* ── 3. Hoeken: één waarde in plaats van vier ─────────────────────────────
   Alles wat een kaart, paneel of blok is krijgt 8px. Pillen die een pil
   horen te blijven (kleine labels, avatars) staan hieronder uitgezonderd. */
.quality__card, .quality__item, .steps__card, .steps__item,
.advantages__item, .advantages__card, .aw-card, .tb-widget,
.deadline__card, .deadline__item, .comparison__table, .comparison__wrap,
.history__card, .history__panel, .options__card, .options__item,
.devices__card, .pricing__card, .description__card, .productivity__card,
.faq__item, .seo-content__block, .consultation__card, .risk-reversal__item,
.main__list, .tb-recent-item, .tb-panel{
  border-radius: var(--tb-r) !important;
}

/* ── 4. Scheiding met een lijn, niet met een schaduw ─────────────────────── */
.quality__card, .steps__card, .deadline__item, .options__card,
.pricing__card, .faq__item, .risk-reversal__item, .tb-widget, .aw-card{
  box-shadow: none !important;
  border: 1px solid var(--tb-line) !important;
  background: var(--tb-canvas) !important;
}

/* glas hoort niet bij deze richting */
.tb-widget, .aw-card, .history__panel, .consultation__card{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── 5. De oranje band met de golfrand wordt een rustige strook ───────────
   Het was een fel oranje vlak met een gebogen onderkant. */
.usp-bar{
  background: var(--tb-canvas-2) !important;
  border-top: 1px solid var(--tb-line);
  border-bottom: 1px solid var(--tb-line);
  color: var(--tb-ink) !important;
  clip-path: none !important;
  border-radius: 0 !important;
  padding-block: var(--tb-s4) !important;
}
.usp-bar *,
.usp-bar .usp-bar__label,
.usp-bar .usp-bar__title,
.usp-bar .usp-bar__sub{ color: var(--tb-ink) !important; }
.usp-bar .usp-bar__sub,
.usp-bar small{ color: var(--tb-ink-3) !important; }
.usp-bar svg{ color: var(--tb-accent-ink) !important; }
.usp-bar::before,
.usp-bar::after{ display: none !important; }

/* ── 6. De secties die donker waren, zijn nu licht ───────────────────────
   advantages, history en description. Het donkere blok dat ze kleurde staat
   hierboven uitgezet; dit zet de tekstkleuren terug. */
.advantages, .history, .description{
  background: var(--tb-canvas) !important;
}
.advantages *, .history *, .description *{
  color: inherit;
}
.advantages .advantages__title, .advantages .advantages__text,
.history .history__title, .history .history__text,
.description .description__title, .description .description__text{
  color: var(--tb-ink) !important;
}
.advantages .tb-widget, .advantages .aw-card{
  background: var(--tb-canvas) !important;
  border: 1px solid var(--tb-line) !important;
}
.advantages .aw-row, .advantages .aw-chip{
  background: var(--tb-canvas-2) !important;
  border: 1px solid var(--tb-line) !important;
  color: var(--tb-ink-2) !important;
  border-radius: var(--tb-r-sm) !important;
}
.advantages .tb-widget-title, .advantages .aw-stat b{ color: var(--tb-ink) !important; }
.advantages .tb-widget-sub, .advantages .aw-stat{ color: var(--tb-ink-3) !important; }

/* ── 7. Het slot blijft donker, zoals in de schets ───────────────────────── */
.consultation{
  background: var(--tb-ink) !important;
  color: var(--tb-canvas) !important;
}
.consultation .consultation__title,
.consultation h2{ color: var(--tb-canvas) !important; }
.consultation .consultation__text,
.consultation p{ color: #B8C0D0 !important; }
.consultation .stage{ color: #8A94A8 !important; }
.consultation .btn_orange{
  background: var(--tb-accent) !important;
  color: #1A0A00 !important;
}
.consultation .btn_orange:hover{ background: #FF8742 !important; }
.consultation__shape,
.consultation::before,
.consultation::after{ display: none !important; }

/* ── 8. Sectiekoppen krijgen lucht, zoals in de schets ───────────────────── */
section > .center > .stage,
section .stage{ margin-bottom: var(--tb-s3); }


/* ============================================================================
   VORMTAAL, tweede ronde (3-10-2026)

   Het uitzetten van het donkere blok nam ook de LAYOUT mee die daarin zat:
   de drie kaarten in "Wat je krijgt in één app" vielen uit elkaar, want hun
   opbouw (beeld bovenaan, body eronder) stond tussen de kleurregels.
   Hieronder staat die opbouw terug, in de lichte vormtaal.
   ============================================================================ */

/* ── De kaarten van "Wat je krijgt in één app" ───────────────────────────── */
.aw-card{
  background: var(--tb-canvas);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-r);
  overflow: hidden;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.aw-card__hero{
  position: relative;
  height: 168px;
  background: var(--tb-canvas-2);
  border-bottom: 1px solid var(--tb-line);
  flex: none;
}
.aw-card__img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.aw-card__hero--contain .aw-card__img{ object-fit: contain; padding: 14px; }
.aw-card__hero-ov{ display: none; }
.aw-card__body{
  padding: var(--tb-s3);
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.aw-card .aw-icon{
  width: 32px; height: 32px;
  border-radius: var(--tb-r-sm);
  display: grid; place-items: center;
  margin-bottom: 2px;
  background: var(--tb-accent-soft);
  color: var(--tb-accent-ink);
}
.aw-card__title{
  color: var(--tb-ink) !important;
  font-size: 1.12rem; font-weight: 700; margin: 0;
  letter-spacing: -.02em;
}
.aw-card__sub{ color: var(--tb-ink-3) !important; font-size: .82rem; margin: 0; }
.aw-card__text{ color: var(--tb-ink-2) !important; font-size: .9rem; margin: 4px 0 6px; line-height: 1.55; }
.aw-card__tag{
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: .62rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tb-ink); background: var(--tb-canvas);
  border: 1px solid var(--tb-line-2);
  border-radius: var(--tb-r-sm);
  padding: 3px 10px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.aw-card .btn{ align-self: flex-start; margin-top: auto; }

/* De drie accentkleuren (paars, oranje, groen) worden er één. */
.aw-card--purple, .aw-card--orange, .aw-card--green{ --aw-accent-rgb: 255,117,31; }

/* ── De widgets in dezelfde sectie ───────────────────────────────────────── */
.advantages .tb-widget{
  background: var(--tb-canvas) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-r) !important;
  padding: var(--tb-s3) !important;
  box-shadow: none !important;
}
.advantages .aw-icon{
  background: var(--tb-accent-soft);
  color: var(--tb-accent-ink);
}

/* ── Knoppen in de secties die donker wáren ──────────────────────────────── */
.advantages .btn_border,
.history .btn_border,
.description .btn_border{
  background: var(--tb-canvas) !important;
  color: var(--tb-ink) !important;
  border: 1px solid var(--tb-line-2) !important;
  box-shadow: none !important;
}
.advantages .btn_border:hover,
.history .btn_border:hover,
.description .btn_border:hover{ border-color: var(--tb-ink) !important; }

/* ── Het slot: donker, maar vlak in plaats van gloed en textuur ──────────── */
.consultation .consultation__box{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: var(--tb-r) !important;
}
.consultation .consultation__box::after,
.consultation::before{ display: none !important; }

/* ── De golfrand onder de oranje band ────────────────────────────────────── */
.section-divider,
.section-divider--from-orange{ display: none !important; }

/* ── Resterende pil-vormen die geen pil horen te zijn ────────────────────── */
.steps__number,
.pricing__ribbon,
.pricing__discount,
.quality__badge,
.comparison__badge,
.deadline__point,
.aw-tag, .aw-pill, .aw-chip{
  border-radius: var(--tb-r-sm) !important;
}

/* De avatarstapel blijft rond: dat zijn gezichten, geen labels. */


/* ============================================================================
   VORMTAAL, derde ronde (3-10-2026)
   De widgets in de voortgangssectie waren apart donker gedefinieerd (regel 1879,
   buiten het donkere blok): een donkere vulling #0B1220 met witte tekst en een
   geblurde gloed. De vulling werd licht, de tekst bleef wit — dus onleesbaar.
   Hieronder staat die hele widget in de lichte vormtaal.
   ============================================================================ */

.history .tb-widget,
.description .tb-widget,
.productivity .tb-widget{
  background: var(--tb-canvas) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-r) !important;
  box-shadow: none !important;
  padding: var(--tb-s3) !important;
}
.history .tb-widget::after,
.history .tb-widget::before{ display: none !important; }
.history .tb-widget:hover{ transform: none !important; box-shadow: none !important; }

.history .tb-widget-title,
.history .tb-recent-title,
.history .tb-widget-zwakste,
.history .tb-widget b,
.description .tb-widget-title,
.productivity .tb-widget-title{
  color: var(--tb-ink) !important;
}
.history .tb-widget-sub,
.history .tb-recent-meta,
.history .tb-widget small,
.description .tb-widget-sub{
  color: var(--tb-ink-3) !important;
}
.history .tb-widget p,
.history .tb-recent-item,
.history .tb-widget li{
  color: var(--tb-ink-2) !important;
}

/* het streepje voor een widgettitel wordt het accent */
.history .tb-widget-title::before{
  background: var(--tb-accent) !important;
  border-radius: 0 !important;
}

/* de rijen in de lijst van vorige examens */
.history .tb-recent-item,
.history .tb-recent-list li{
  background: var(--tb-canvas-2) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-r-sm) !important;
}

/* de percentagelabels houden hun betekeniskleur, maar vlakker */
.history .tb-recent-score,
.history .tb-pill{
  border-radius: var(--tb-r-sm) !important;
  box-shadow: none !important;
}

/* de ghost-knop onderin een widget */
.history .tb-widget-cta-ghost{
  background: var(--tb-canvas) !important;
  color: var(--tb-ink) !important;
  border: 1px solid var(--tb-line-2) !important;
  border-radius: var(--tb-r) !important;
}
.history .tb-widget-cta-ghost:hover{ border-color: var(--tb-ink) !important; }

/* De drie accentvarianten worden er één. */
.history .tb-widget--accent-purple,
.history .tb-widget--accent-green,
.history .tb-widget--accent-amber{
  --tb-w-accent: var(--tb-accent);
  --tb-w-accent-rgb: 255, 117, 31;
}

/* ── De iconen bij de vier stappen hadden een gekleurde schaduwvorm ──────── */
.steps__icon::before,
.steps__icon::after{ display: none !important; }
.steps__icon{
  background: var(--tb-canvas) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-r) !important;
  box-shadow: none !important;
  color: var(--tb-ink) !important;
}

/* ── De zachte gekleurde vlakken achter de preview-beelden ───────────────── */
.advantages__bg,
.productivity__preview,
.quality__preview{
  background: var(--tb-canvas-2) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-r) !important;
}


/* ============================================================================
   VORMTAAL, vierde ronde (3-10-2026)
   Twee dingen die het uitzetten van het donkere blok meenam:
   de hele opbouw van de agenda-widget (die stond tussen de kleurregels), en
   een tweede badge op de prijskaart die het handschrift verving terwijl er al
   een ribbon stond.
   ============================================================================ */

/* ── De agenda-widget in de studie-agenda-sectie ─────────────────────────── */
.tb-agenda-mock{
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 8px 6px;
  color: var(--tb-ink);
}
.tb-agenda-count{ text-align: center; line-height: 1.05; }
.tb-agenda-count__label{
  display: block;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tb-ink-3);
}
.tb-agenda-count__num{
  display: block;
  font-size: 3.6rem; font-weight: 800;
  color: var(--tb-ink);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.tb-agenda-count__unit{ display: block; font-size: .92rem; color: var(--tb-ink-2); }

.tb-agenda-today__row{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; font-size: .9rem;
}
.tb-agenda-today__task{ color: var(--tb-ink); font-weight: 600; }
.tb-agenda-today__pct{ color: var(--tb-accent-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.tb-agenda-bar{
  height: 6px; border-radius: 999px;
  background: var(--tb-canvas-3);
  overflow: hidden;
}
.tb-agenda-bar > span{
  display: block; height: 100%; border-radius: 999px;
  background: var(--tb-accent);
}

.tb-agenda-week{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tb-agenda-day{ display: flex; flex-direction: column; align-items: center; gap: 7px; }
.tb-agenda-dot{
  width: 100%; max-width: 34px; aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tb-canvas-2);
  border: 1px solid var(--tb-line);
  color: var(--tb-ink-2);
  font-size: .9rem; font-weight: 700;
}
.tb-agenda-lbl{
  font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tb-ink-3);
}
.tb-agenda-day.is-done .tb-agenda-dot{
  background: var(--tb-accent-soft);
  border-color: var(--tb-accent);
  color: var(--tb-accent-ink);
}
.tb-agenda-day.is-today .tb-agenda-dot{
  background: var(--tb-ink);
  border-color: var(--tb-ink);
  box-shadow: none;
}
.tb-agenda-day.is-today .tb-agenda-dot::after{
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tb-canvas);
}
.tb-agenda-day.is-today .tb-agenda-lbl{ color: var(--tb-ink); font-weight: 700; }
.tb-agenda-day.is-exam .tb-agenda-dot{
  background: var(--tb-canvas);
  border-color: var(--tb-accent);
  color: var(--tb-accent-ink);
}

/* de wrapper eromheen */
.description .description__details{
  background: var(--tb-canvas) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-r) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: var(--tb-s3);
}

/* het leerpad-paneel in dezelfde sectie */
.description .adv-leerpad-title,
.description .adv-leerpad-text{ color: var(--tb-ink) !important; }
.description .adv-leerpad-quote-label{ color: var(--tb-ink-3) !important; }
.description .adv-leerpad-num{
  background: var(--tb-accent-soft) !important;
  color: var(--tb-accent-ink) !important;
  border-radius: var(--tb-r-sm) !important;
}

/* ── De prijskaart had al een ribbon; mijn tag was dubbel ────────────────── */
.pricing__tag{ display: none !important; }
.pricing__ribbon{
  background: var(--tb-ink) !important;
  color: var(--tb-canvas) !important;
  border-radius: var(--tb-r-sm) !important;
  box-shadow: none !important;
}
.pricing__card--highlight{
  border: 1px solid var(--tb-ink) !important;
  box-shadow: none !important;
}


/* ============================================================================
   VORMTAAL, vijfde ronde (3-10-2026)
   Het leerpad-paneel is een weergave van het dashboard, en dat is donker —
   net als de laptop in de hero. Het paneel blijft dus donker; alleen mijn
   eerdere regel die de tekst erin op inkt zette, was fout.
   ============================================================================ */

.adv-leerpad-panel{
  background: #0B1220;
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-r);
  box-shadow: none;
}
.adv-leerpad-panel .adv-leerpad-title,
.adv-leerpad-panel .adv-leerpad-title *,
.description .adv-leerpad-panel .adv-leerpad-title{
  color: #F2F5F8 !important;
}
.adv-leerpad-panel .adv-leerpad-text,
.adv-leerpad-panel li,
.adv-leerpad-panel ol,
.description .adv-leerpad-panel .adv-leerpad-text{
  color: #C7D0DC !important;
}
.adv-leerpad-panel .adv-leerpad-quote-label,
.description .adv-leerpad-panel .adv-leerpad-quote-label{
  color: #8A94A8 !important;
}
.adv-leerpad-panel .adv-leerpad-num{
  background: rgba(255,117,31,.18) !important;
  color: #FF9A5A !important;
  border-radius: var(--tb-r-sm) !important;
}
.adv-leerpad-panel .adv-leerpad-bar{
  background: var(--tb-accent) !important;
}
.adv-leerpad-widget{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--tb-r) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.adv-leerpad-panel li{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--tb-r-sm) !important;
}


/* De zwevende balk op de telefoon was een pil met een ronde sluitknop. */
.sticky-cta,
.sticky-cta__inner{
  border-radius: var(--tb-r) !important;
  box-shadow: 0 8px 28px -10px rgba(11,18,32,.28) !important;
}
.sticky-cta .btn,
.sticky-cta .btn_orange{
  border-radius: var(--tb-r-sm) !important;
}
.sticky-cta__close{
  border-radius: var(--tb-r-sm) !important;
  min-width: 44px;
  min-height: 44px;
}