/* =========================================================================
   TVM Buddy — design tokens
   Palette taken from the brand mark: white paper, near-black ink, and a
   single acid-lime accent used sparingly for anything actionable. The
   road cross-section (the signature visual) borrows real pavement-layer
   colours — asphalt, granular base, sand — so it reads as a real drawing,
   not a decorative graphic.
   ========================================================================= */
:root {
  --paper: #ffffff;
  --paper-dim: #f6f7f5;
  --ink: #161616;
  --ink-soft: #52534f;
  --ink-faint: #8b8c86;
  --accent: #caf711;
  --accent-hover: #b3e600;
  --accent-text: #4c5c00;
  --accent-tint: #f3ffd6;
  --line: #e5e6e0;
  --line-strong: #d2d3cb;

  --font-display: "Poppins", "Arial Black", sans-serif;
  --font-hero: "Poppins", "Arial Black", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 1px 2px rgba(22, 22, 22, 0.04), 0 8px 24px -12px rgba(22, 22, 22, 0.14);
  --container: 1120px;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    --motion-ok: 1;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.mono, code, .figure {
  font-family: var(--font-mono);
}

a {
  color: var(--accent-text);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible,
.accordion-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 2000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

.container-tvm {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand:hover {
  opacity: 0.85;
}

.brand-mark {
  display: block;
  width: auto;
}

.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 0.85rem;
}

.nav-links a:hover {
  color: var(--ink);
}

.btn-tvm-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--ink);
  font-weight: 700;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn-tvm-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-tvm-secondary {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-weight: 600;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-block;
}
.btn-tvm-secondary:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ---------- Hero ---------- */
.hero {
  padding: 3.5rem 0 4rem;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 991.98px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-tint);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-family: var(--font-hero);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  max-width: 20ch;
}

.hero-sub {
  color: var(--ink-soft);
  font-size: 1.15rem;
  max-width: 46ch;
  margin: 1.1rem 0 1.75rem;
}

.hero-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.hero-note {
  color: var(--ink-faint);
  font-size: 0.85rem;
  margin: 0;
}

.hero-visual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 460px;
  padding: 0 1.25rem 1.5rem 0;
}

.hero-visual-frame {
  position: relative;
  background: var(--paper);
  border: 6px solid var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transform: rotate(-1.5deg);
  transition: transform 0.35s ease;
}

.hero-visual:hover .hero-visual-frame {
  transform: rotate(0deg);
}

.hero-visual-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 4px);
}

.hero-visual-badge {
  position: absolute;
  right: 0.5rem;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transform: rotate(2deg);
}

.hero-visual-badge svg {
  color: var(--accent);
  flex: none;
}

/* Entrance: subtle fade + rise, staggered per element via --hero-delay.
   Gated behind prefers-reduced-motion so nobody gets motion they didn't
   ask for; see the reduced-motion override below. */
@media (prefers-reduced-motion: no-preference) {
  .hero-anim {
    opacity: 0;
    animation: hero-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--hero-delay, 0ms);
  }

  .hero-visual.hero-anim {
    animation-name: hero-rise-visual;
  }

  .hero-visual-badge {
    animation: hero-float 3.6s ease-in-out 1.1s infinite;
  }

  @keyframes hero-rise {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes hero-rise-visual {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes hero-float {
    0%, 100% { transform: rotate(2deg) translateY(0); }
    50% { transform: rotate(2deg) translateY(-7px); }
  }
}

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

/* ---------- Trust strip ---------- */
.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-dim);
  padding: 1.1rem 0;
}

.trust-strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.trust-strip li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 1rem;
}

.trust-strip svg {
  color: var(--accent);
  flex: none;
}

/* ---------- Section shell ---------- */
.section {
  padding: 4.5rem 0;
}

.section-alt {
  background: var(--paper-dim);
}

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.6rem;
  display: block;
}

.section-heading {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 0.75rem;
}

.section-lede {
  color: var(--ink-soft);
  max-width: 60ch;
  font-size: 1.05rem;
}

/* ---------- Formula cards ---------- */
.formula-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  height: 100%;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.formula-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.formula-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.formula-expr {
  display: block;
  background: var(--ink);
  color: #eaf7c9;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  margin: 0.9rem 0 1rem;
  overflow-x: auto;
}

.formula-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.formula-card a {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Steps (real sequence: 1 -> 2 -> 3) ---------- */
.step {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.step-index {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--accent-text);
  background: var(--accent-tint);
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.step p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ---------- "Hoe het werkt" pinned scroll (werkwijze) ---------- */
/* De sectie blijft ("pint") vast in beeld terwijl je scrollt door een
   hogere lege ruimte eromheen (.werkwijze-spacer); de scrollvoortgang
   binnen die ruimte bepaalt welke stap-kaart zichtbaar is en hoever de
   rail/het grote stapnummer links staan. Puur CSS position:sticky +
   een scroll-listener in JS — geen animatiebibliotheek nodig. */

.werkwijze-spacer {
  position: relative;
  height: 340vh;
}

/* min-height + flex-center houdt de inhoud verticaal gecentreerd
   binnen het venster terwijl 'm gepind staat. Zonder dit bleef de
   inhoud (die zelf vaak korter is dan de viewport) boven in de sticky
   box hangen, met een grote lege strook eronder voor de rest van de
   scrollruimte in .werkwijze-spacer — precies de "lege ruimte onder de
   carrousel" die dit oplost. */
.werkwijze-pinwrap {
  position: sticky;
  top: 6rem;
  min-height: calc(100vh - 6rem);
  display: flex;
  align-items: center;
  padding: 1.5rem 0;
  box-sizing: border-box;
}

.werkwijze-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.werkwijze-accent {
  color: var(--accent-text);
}

.werkwijze-indicator {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.werkwijze-groot {
  font-family: var(--font-hero);
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--ink);
  min-width: 2.2ch;
  flex: none;
  display: inline-block;
}

.werkwijze-groot-cijfer {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease,
    color 0.35s ease;
}

/* Kort na een stapwissel staat er een klasse op het cijfer die het even
   laat "landen": een lichte overshoot in plaats van een platte snap. */
.werkwijze-groot-cijfer.wz-pop {
  color: var(--accent-text);
  transform: scale(1.16);
}

.werkwijze-rail {
  display: flex;
  gap: 1.25rem;
  flex: 1;
  padding-top: 0.4rem;
}

.werkwijze-rail-track {
  position: relative;
  width: 3px;
  flex: none;
  background: var(--line);
  border-radius: 999px;
}

.werkwijze-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--accent);
  border-radius: 999px;
}

.werkwijze-rail-dot {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 11px;
  height: 11px;
  background: var(--ink);
  border: 2px solid var(--paper);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 rgba(202, 247, 17, 0.55);
  animation: wz-dot-pulse 2.2s ease-out infinite;
}

@keyframes wz-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(202, 247, 17, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(202, 247, 17, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(202, 247, 17, 0);
  }
}

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

.werkwijze-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.werkwijze-mini li {
  font-size: 0.9rem;
  color: var(--ink-faint);
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.werkwijze-mini li.on {
  color: var(--ink);
  font-weight: 600;
}

.werkwijze-deck {
  position: relative;
  height: 320px;
  perspective: 1400px;
}

/* De kaarten worden niet meer met een simpele aan/uit-klasse getoond:
   JS zet per kaart --wz-ty/--wz-sc/--wz-rx/--wz-op/--wz-z op basis van
   de exacte scroll-voortgang (zie updateWerkwijze() in main.js), zodat
   de kaart die "aan de beurt is" soepel naar voren schuift terwijl de
   vorige als een kaartenstapel naar achteren en boven wegdraait, en de
   volgende al zichtbaar als stapeltje eronder klaarligt. Geen enkele
   waarde springt: alles is een doorlopende functie van de scrollpositie,
   dus dit blijft 1-op-1 gekoppeld aan de muis/trackpad-snelheid. */
.werkwijze-stap {
  position: absolute;
  inset: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  opacity: var(--wz-op, 0);
  z-index: var(--wz-z, 1);
  pointer-events: none;
  transform: translateY(var(--wz-ty, 40px)) scale(var(--wz-sc, 0.94))
    rotateX(var(--wz-rx, 6deg));
}

.werkwijze-stap.is-actief {
  pointer-events: auto;
  box-shadow: var(--shadow-card);
}

.werkwijze-num {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--accent-text);
  background: var(--accent-tint);
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.werkwijze-stap.is-actief .werkwijze-num {
  transform: scale(1.08);
}

.werkwijze-stap h3 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.werkwijze-stap p {
  color: var(--ink-soft);
  font-size: 1rem;
  margin-bottom: 0;
}

.werkwijze-voortgang {
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 1.75rem;
}

.werkwijze-voortgang span {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* Toegankelijkheid: wie animatie liever vermijdt, krijgt gewoon alle
   vier de stappen normaal onder elkaar, zonder pin-effect. */
@media (prefers-reduced-motion: reduce) {
  .werkwijze-spacer {
    height: auto;
  }
  .werkwijze-pinwrap {
    position: static;
    min-height: 0;
  }
  .werkwijze-deck {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .werkwijze-stap {
    position: static;
    opacity: 1 !important;
    visibility: visible;
    transform: none !important;
    transition: none;
  }
}

@media (max-width: 991.98px) {
  .werkwijze-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .werkwijze-spacer {
    height: 300vh;
  }
}

@media (max-width: 575.98px) {
  .werkwijze-groot {
    font-size: 2.6rem;
  }
  .werkwijze-deck {
    height: 360px;
  }
  .werkwijze-stap {
    padding: 1.5rem;
  }
}

/* ---------- Team (over ons) ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

@media (max-width: 991.98px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

.team-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: var(--line-strong);
}

.team-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-dim);
  margin-bottom: 1.25rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line);
}

.team-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.team-avatar-jeremy img {
  object-position: 50% 18%;
}

.team-card:hover .team-avatar {
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--accent);
}

.team-name {
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}

.team-role {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-text);
  margin-bottom: 1rem;
}

.team-bio {
  color: var(--ink-soft);
  font-size: 0.94rem;
  margin-bottom: 1.5rem;
}

.team-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.team-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.team-btn svg {
  flex: none;
}

.team-btn:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* Scroll-in reveal: progressive enhancement (JS toggles .is-visible via
   IntersectionObserver — see main.js). The .js-ready guard (set by an
   inline <script> in base.html's <head>) means elements only ever get
   hidden if JS is actually running to reveal them again; with JS off,
   or with reduced motion, cards are simply visible with no animation
   at all — never permanently invisible. */
@media (prefers-reduced-motion: no-preference) {
  .js-ready [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--reveal-delay, 0ms);
  }

  .js-ready [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Prijzen ---------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

@media (max-width: 991.98px) {
  .price-grid {
    grid-template-columns: 1fr;
  }
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.price-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: var(--line-strong);
}

.price-card.is-featured {
  border-color: var(--ink);
  box-shadow: var(--shadow-card);
}

@media (min-width: 992px) {
  .price-card.is-featured {
    transform: scale(1.035);
  }
  .price-card.is-featured:hover {
    transform: scale(1.035) translateY(-5px);
  }
}

.price-ribbon {
  position: absolute;
  top: -0.65rem;
  left: 1.75rem;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.price-discount-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: var(--ink);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}

@media (prefers-reduced-motion: no-preference) {
  .price-discount-badge {
    animation: price-badge-pulse 2.4s ease-in-out infinite;
  }
}

@keyframes price-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.price-card-name {
  font-size: 1.3rem;
  margin-bottom: 0.15rem;
}

.price-card-tagline {
  color: var(--ink-faint);
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
}

.price-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.35rem;
}

.price-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.1rem;
  color: var(--ink);
}

.price-period {
  color: var(--ink-faint);
  font-size: 0.9rem;
  margin-left: 0.35rem;
}

.price-per-credit {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

.price-credits-line {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent-text);
  background: var(--accent-tint);
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
  width: fit-content;
}

.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  flex: 1;
}

.price-features li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 0.7rem;
}

.price-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.price-features li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55rem;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid var(--accent-text);
  border-bottom: 1.5px solid var(--accent-text);
  transform: rotate(-45deg);
}

.price-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.92rem;
}

.price-cta-chevron {
  flex: none;
  transition: transform 0.25s ease;
}

.price-cta[aria-expanded="true"] .price-cta-chevron {
  transform: rotate(180deg);
}

.price-cta-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--accent-text);
  font-weight: 600;
  margin: 0.6rem 0 0;
}

.price-interest {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.price-interest-form .form-control {
  font-size: 0.9rem;
}

.price-interest-note {
  color: var(--ink-faint);
  font-size: 0.78rem;
  text-align: center;
  margin: 0.75rem 0 0;
}

.price-interest-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Demo video (Hoe het werkt) ---------- */
.demo-video-frame {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--ink);
  line-height: 0;
}

.demo-video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink);
}

.demo-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 22, 22, 0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.demo-video-play::after {
  content: "";
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.demo-video-play svg {
  position: relative;
  z-index: 1;
  color: var(--ink);
  margin-left: 4px;
}

.demo-video-play-ring {
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

@media (prefers-reduced-motion: no-preference) {
  .demo-video-play-ring {
    animation: demo-play-pulse 2.2s ease-out infinite;
  }
}

@keyframes demo-play-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.demo-video-play:hover::after {
  background: var(--accent);
}

.demo-video-play.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.demo-video-caption {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.85rem;
  margin: 1rem 0 0;
}

/* ---------- Contactformulier ---------- */
.contact-form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}

.contact-form-card .form-label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.contact-form-note {
  color: var(--ink-faint);
  font-size: 0.82rem;
  margin: 0.85rem 0 0;
}

.contact-form-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Site-brede meldingen (Django messages) ---------- */
.site-messages {
  padding-top: 1.5rem;
}

.site-messages .alert {
  border-radius: var(--radius);
}

/* ---------- Glossary ---------- */
.glossary dt {
  font-family: var(--font-mono);
  color: var(--ink);
  font-weight: 700;
  margin-top: 1.1rem;
}

.glossary dd {
  color: var(--ink-soft);
  margin-left: 0;
  margin-bottom: 0;
}

/* ---------- FAQ (bootstrap accordion, restyled) ---------- */
.accordion-item {
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.accordion-button {
  background: transparent;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  padding: 1.1rem 0;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  color: var(--accent-text);
  background: transparent;
}

.accordion-button::after {
  filter: none;
}

.accordion-body {
  color: var(--ink-soft);
  padding: 0 0 1.25rem;
}

/* ---------- Besparing (interactieve slider op de homepage) ----------
   Zelfde donkere paneel-taal als .cta-band (var(--ink) + lime accent),
   zodat de sectie tussen de witte "Werkwijze"- en FAQ-secties in
   opvalt zonder een heel nieuw kleurenpalet te introduceren. */
.besparing-panel {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--radius);
  padding: 3rem 2.5rem;
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2.75rem;
  align-items: center;
}

/* Zachte gloed rechtsboven, puur decoratief — dezelfde accentkleur als
   de rest van de site, alleen hier als lichtbron in plaats van een vlak. */
.besparing-panel::before {
  content: "";
  position: absolute;
  top: -45%;
  right: -12%;
  width: 55%;
  height: 170%;
  background: radial-gradient(circle, rgba(202, 247, 17, 0.16), transparent 65%);
  pointer-events: none;
}

/* Op mobiel valt .besparing-panel terug op één kolom (zie de
   grid-template-columns-override hieronder) en wordt daardoor véél
   hoger dan breed. De "170%"-hoogte hierboven is een percentage van
   die eigen (nu torenhoge) paneelhoogte, dus rekt de cirkelvormige
   gloed op mobiel uit tot een lange verticale streep in plaats van een
   zachte lichtvlek — dat was de "afgesneden gloed" op de telefoon.
   Breedte én hoogte hier allebei in vw (niet %) losmaakt de gloed van
   de eigen paneelhoogte en garandeert een vierkant/rond lichtpunt,
   ongeacht hoe hoog het paneel door de tekst wordt. */
@media (max-width: 991.98px) {
  .besparing-panel::before {
    top: -10vw;
    right: -20vw;
    width: 65vw;
    height: 65vw;
  }
}

.besparing-eyebrow {
  color: var(--accent);
}

.besparing-heading {
  color: #fff;
}

.besparing-lede {
  color: #c9cabf;
  max-width: 46ch;
}

.besparing-lede strong {
  color: var(--accent);
  font-weight: 700;
}

.besparing-calc {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  padding: 1.75rem 1.75rem 2rem;
}

.besparing-slider-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.3rem 1rem;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #c9cabf;
}

.besparing-slider-head label {
  flex: 1 1 auto;
  min-width: max-content;
}

.besparing-slider-head output {
  flex: 0 0 auto;
}

.besparing-slider-head output {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
}

.besparing-slider-track-wrap {
  margin-bottom: 1.15rem;
}

.besparing-slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #83847a;
}

/* Custom range-input: de vulling van de rail wordt via JS als een
   linear-gradient op het element zelf gezet (zie besparingSliderKleuren
   in main.js) — dat werkt cross-browser zonder pseudo-elementen op de
   ::-webkit-slider-runnable-track te moeten stylen. */
.besparing-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) 20%, rgba(255, 255, 255, 0.14) 20%);
  outline: none;
  cursor: pointer;
}

.besparing-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 0 rgba(202, 247, 17, 0.35);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.besparing-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: transparent;
}

.besparing-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--ink);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.besparing-slider:active::-webkit-slider-thumb,
.besparing-slider.is-dragging::-webkit-slider-thumb {
  box-shadow: 0 0 0 9px rgba(202, 247, 17, 0.22);
  transform: scale(1.08);
}

.besparing-slider:active::-moz-range-thumb,
.besparing-slider.is-dragging::-moz-range-thumb {
  box-shadow: 0 0 0 9px rgba(202, 247, 17, 0.22);
  transform: scale(1.08);
}

/* Acht kleine staafjes die stap voor stap "aanslaan" naarmate de
   schuifregelaar hoger komt, als een equalizer — een tactiele
   tussenstap naast de kale voortgangsbalk zelf. De transition-delay
   per staafje geeft een korte cascade wanneer er meteen meerdere
   tegelijk aan of uit gaan (bijv. bij een grote sleep in één keer). */
.besparing-segments {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.besparing-segment {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transform: scaleY(1);
  transition: background 0.35s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.besparing-segment.is-lit {
  background: var(--accent);
  transform: scaleY(1.7);
}

.besparing-segment:nth-child(1) { transition-delay: 0ms; }
.besparing-segment:nth-child(2) { transition-delay: 25ms; }
.besparing-segment:nth-child(3) { transition-delay: 50ms; }
.besparing-segment:nth-child(4) { transition-delay: 75ms; }
.besparing-segment:nth-child(5) { transition-delay: 100ms; }
.besparing-segment:nth-child(6) { transition-delay: 125ms; }
.besparing-segment:nth-child(7) { transition-delay: 150ms; }
.besparing-segment:nth-child(8) { transition-delay: 175ms; }

.besparing-results {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
}

.besparing-result {
  display: flex;
  flex-direction: column;
  margin-right: 1.5rem;
  margin-bottom: 0.5rem;
}

.besparing-result:last-child {
  margin-right: 0;
}

.besparing-result-label {
  margin-bottom: 0.3rem;
}

.besparing-result-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9a9b90;
}

.besparing-result-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  color: #fff;
}

.besparing-result.is-accent .besparing-result-value {
  color: var(--accent);
}

.besparing-result-divider {
  width: 1px;
  height: 2.5rem;
  margin-right: 1.5rem;
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 991.98px) {
  .besparing-panel {
    grid-template-columns: 1fr;
    padding: 2.25rem 1.5rem;
  }
}

@media (max-width: 575.98px) {
  .besparing-panel {
    padding: 1.75rem 1.25rem;
  }
  .besparing-calc {
    padding: 1.25rem 1.25rem 1.5rem;
  }
  .besparing-slider-head output {
    font-size: 1.15rem;
  }
  .besparing-segments {
    gap: 0.3rem;
  }
  .besparing-results {
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
  }
  .besparing-result-divider {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .besparing-segment,
  .besparing-slider::-webkit-slider-thumb,
  .besparing-slider::-moz-range-thumb {
    transition: none;
  }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  color: #fff;
}

.cta-band h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.cta-band p {
  color: #c9cabf;
  max-width: 50ch;
  margin: 0.75rem auto 1.5rem;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 3.5rem 0 2rem;
  color: var(--ink-faint);
  font-size: 0.9rem;
}

.site-footer a {
  color: var(--ink-soft);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--ink);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}

.footer-col-brand p {
  max-width: 32ch;
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin-bottom: 1.25rem;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 0.9rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 0.6rem;
}

.footer-social {
  display: flex;
  gap: 0.9rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-soft);
}

.footer-social a:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.footer-copyright {
  margin: 1.75rem 0 0;
  font-size: 0.82rem;
}

@media (max-width: 991.98px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-col-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575.98px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .hero {
    padding: 2.5rem 0 2rem;
    text-align: left;
  }
  .section {
    padding: 3rem 0;
  }
}

/* ---------- Auth pages (login, signup, profile) ---------- */
.auth-wrap {
  padding: 4rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.25rem;
  box-shadow: var(--shadow-card);
}

.auth-card h1 {
  font-size: 1.6rem;
  margin-bottom: 0.35rem;
}

.auth-card .section-lede {
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.auth-card label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.auth-card .form-control,
.auth-card .form-select {
  margin-bottom: 1rem;
}

.auth-card .btn-tvm-primary {
  width: 100%;
  text-align: center;
  margin-top: 0.25rem;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-weight: 600;
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.btn-google:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
}

.auth-footer-note {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.auth-errorlist {
  list-style: none;
  padding: 0;
  margin: -0.5rem 0 1rem;
  color: #b3261e;
  font-size: 0.85rem;
}

.auth-helptext {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: -0.75rem 0 1rem;
}

/* ---------- Cookie consent gate ---------- */
/* Rendered by the server already in the right starting state (hidden if
   a choice was made before — see home/context_processors.py), so this
   CSS only needs to define what "visible" looks like; JS toggles it. */

html.cookie-gate-active,
html.cookie-gate-active body {
  overflow: hidden;
}

.cookie-gate {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
  background: rgba(22, 22, 22, 0.6);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.cookie-gate-card {
  background: var(--paper);
  border-radius: var(--radius);
  max-width: 460px;
  width: 100%;
  padding: 2rem;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.4);
}

.cookie-gate-card h2 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.cookie-gate-card p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}

.cookie-gate-card p a {
  color: var(--accent-text);
}

.cookie-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cookie-gate-actions .btn-tvm-primary,
.cookie-gate-actions .btn-tvm-secondary {
  flex: 1 1 180px;
  text-align: center;
}

/* ---------- Werkruimte (portal) ---------- */
/* De werkruimte is een intern staf-hulpmiddel, geen publieke
   marketingpagina — .container-tvm (max 1120px, gemaakt voor leesbare
   regellengtes in lopende tekst) laat op een gewoon bureaubladscherm
   dus onnodig veel ruimte links en rechts onbenut liggen. .portal-shell
   vervangt die klasse in base_portal.html (zowel de navbar als de
   content-wrapper): een veel ruimere max-width (1680px, ruim boven een
   gewoon laptopscherm, dus daar in de praktijk edge-to-edge) met een
   iets grotere zij-marge, zodat er op een breed/ultrawide-scherm nog
   wel wat rustige lucht aan de zijkanten overblijft in plaats van
   content die letterlijk van rand tot rand loopt. Blijft daarmee net
   zo responsive als .container-tvm, alleen met een veel hogere
   bovengrens. */
.portal-shell {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 3rem;
}

@media (max-width: 991.98px) {
  .portal-shell {
    padding: 0 1.75rem;
  }
}

@media (max-width: 767.98px) {
  .portal-shell {
    padding: 0 1.25rem;
  }
}

.portal-topbar {
  background: #161616;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #2a2a2a;
}

.portal-topbar .navbar-brand {
  display: flex;
  align-items: baseline;
  padding: 0;
}

.portal-topbar .navbar-brand > * {
  margin-left: 0.6rem;
}

.portal-topbar .navbar-brand > *:first-child {
  margin-left: 0;
}

.portal-brand-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}

.portal-brand-accent,
.portal-brand-dot {
  color: var(--accent);
}

.portal-brand-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8b8c86;
  border-left: 1px solid #3a3a3a;
  padding-left: 0.6rem;
  white-space: nowrap;
}

.portal-topbar .nav-link {
  color: #dfe0dc;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
}

.portal-topbar .nav-link:hover,
.portal-topbar .nav-link:focus {
  color: #fff;
}

.portal-topbar .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.portal-topbar .navbar-nav .nav-item + .nav-item {
  margin-left: 0.15rem;
}

@media (min-width: 992px) {
  .portal-topbar .navbar-nav.align-items-lg-center .nav-item + .nav-item {
    margin-left: 0.5rem;
  }
}

.portal-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  flex-shrink: 0;
  margin-right: 0.55rem;
}

.portal-topbar .dropdown-menu {
  background: #1e1e1e;
  border-color: #333;
  padding: 0.4rem;
  margin-top: 0.5rem;
}

.portal-topbar .dropdown-item {
  color: #dfe0dc;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}

.portal-topbar .dropdown-item:hover,
.portal-topbar .dropdown-item:focus {
  background: #2a2a2a;
  color: #fff;
}

.portal-topbar .dropdown-divider {
  border-color: #333;
  margin: 0.3rem 0;
}

/* `.dashboard-page` is de klant-facing tegenhanger van `.portal-page`
   (zie hieronder): zelfde kaart-/tabel-/paginering-stijl, maar dan voor
   het klant-dashboard op de publieke site (binnen base.html, met de
   gewone site-header) i.p.v. de losstaande staf-werkruimte. Vandaar dat
   de kaart-/tabel-/paginering-selectors hieronder bewust op beide
   klassen matchen. De buitenmarge (padding) is bewust wél twee losse
   regels: `.dashboard-page` zet links/rechts op 0 omdat die altijd een
   geneste `.container-tvm` bevat die zelf al `0 1.5rem` horizontale
   padding meegeeft (zie dashboard/templates/.../overview.html e.d.) —
   maar `.portal-page` (base_portal.html) heeft géén geneste container,
   dus zou een gedeelde `padding: … 0 …`-regel daar de horizontale
   padding van `.portal-shell` (de andere klasse op datzelfde element)
   simpelweg overschrijven en de werkruimte-inhoud tot tegen de rand
   van elk scherm ≤1680px (dus zo goed als elk laptop-/desktopscherm)
   laten lopen. Precies dat ging hier eerder mis. */
.portal-page {
  padding-top: 2.25rem;
  padding-bottom: 4rem;
}

.dashboard-page {
  padding: 2.25rem 0 4rem;
}

/* Tabbladen bovenaan elke klant-dashboardpagina (Overzicht / Mijn
   account) — puur navigatie, geen Bootstrap-tabs nodig voor zoiets
   simpels. */
.dashboard-subnav {
  display: flex;
  gap: 1.75rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.75rem;
  overflow-x: auto;
}

.dashboard-subnav a {
  padding: 0 0 0.75rem;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.dashboard-subnav a:hover {
  color: var(--ink);
}

.dashboard-subnav a.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.portal-alert {
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.portal-alert.alert-success {
  background: var(--accent-tint);
  color: var(--accent-text);
  border-color: var(--accent-tint);
}

.portal-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.portal-header h1 {
  font-size: 1.6rem;
  margin: 0;
}

.portal-page .card,
.dashboard-page .card {
  border-color: var(--line);
  border-radius: var(--radius);
}

.portal-page .card-header,
.dashboard-page .card-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 1rem 1.5rem;
}

.portal-page .card-body,
.dashboard-page .card-body {
  padding: 1.5rem;
}

.portal-stat-card .card-body {
  padding: 1.25rem 1.5rem;
}

.portal-stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--ink);
}

.portal-stat-label {
  font-size: 0.82rem;
  color: var(--ink-faint);
}

.portal-page .table,
.dashboard-page .table {
  font-size: 0.92rem;
  margin-bottom: 0;
}

.portal-page .table th,
.dashboard-page .table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-weight: 700;
  border-bottom-width: 1px;
}

.portal-page .table td,
.dashboard-page .table td {
  vertical-align: middle;
}

.portal-page .table a,
.dashboard-page .table a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.portal-page .table a:hover,
.dashboard-page .table a:hover {
  color: var(--accent-text);
}

.portal-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--paper-dim);
  color: var(--ink-soft);
}

.portal-badge.status-customer { background: var(--accent-tint); color: var(--accent-text); }
.portal-badge.status-active { background: #e7f0ff; color: #1d4ed8; }
.portal-badge.status-lead { background: var(--paper-dim); color: var(--ink-soft); }
.portal-badge.status-inactive { background: #f3f0ee; color: #8a8378; }

/* NPS-categorie (Analyse-pagina + bedrijfsdetail): promoter in de
   merkkleur, criticaster in rood, passief neutraal — dezelfde
   kleurlogica als hierboven, alleen andere betekenis. */
.portal-badge.nps-promoter { background: var(--accent-tint); color: var(--accent-text); }
.portal-badge.nps-passive { background: var(--paper-dim); color: var(--ink-soft); }
.portal-badge.nps-detractor { background: #fdecea; color: #b42318; }

/* Credit-transactietypes op het klant-dashboard
   (dashboard/templates/dashboard/overview.html): toekenning/aankoop
   voegen credits toe (merkkleur/blauw, zelfde soort positieve kleur
   als status-customer/status-active hierboven), verbruik is neutraal
   — heel gewoon gebruik van de tool, geen waarschuwing. */
.portal-badge.tx-grant { background: var(--accent-tint); color: var(--accent-text); }
.portal-badge.tx-purchase { background: #e7f0ff; color: #1d4ed8; }
.portal-badge.tx-spend { background: var(--paper-dim); color: var(--ink-soft); }

/* Urgentie van een aankomende contractverlenging (Analyse-pagina):
   binnen 14 dagen = hoog, binnen 30 = gemiddeld, daarna neutraal. */
.portal-badge.urgency-high { background: #fdecea; color: #b42318; }
.portal-badge.urgency-medium { background: #fff4e0; color: #92620a; }
.portal-badge.urgency-low { background: var(--paper-dim); color: var(--ink-soft); }

/* Ernst-badges voor de "Beveiliging"-sectie (dashboard + logboek) —
   los van de status-badges hierboven, dus eigen kleurenset i.p.v. de
   merkkleur: rood/amber lenen zich beter voor "let hierop" dan lime. */
.portal-badge.severity-high { background: #fdecea; color: #b42318; }
.portal-badge.severity-medium { background: #fff4e0; color: #92620a; }
.portal-badge.severity-low { background: var(--paper-dim); color: var(--ink-soft); }

/* Geruststellend (geen dreigingen) vs. waarschuwend (wel iets te zien)
   bannertje bovenaan de "Beveiliging"-sectie op het dashboard. */
.portal-security-alert {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
}

.portal-security-alert.is-ok {
  background: var(--accent-tint);
  color: var(--accent-text);
}

.portal-security-alert.is-warning {
  background: #fdecea;
  color: #b42318;
}

.portal-security-alert strong {
  font-variant-numeric: tabular-nums;
}

/* ---------- Dashboard-grafieken ---------- */
/* Bewust in pure CSS (geen chart-library): het gaat om een paar simpele
   staaf-/kolomdiagrammen, en dat houdt de werkruimte licht en snel. */

.portal-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 767.98px) {
  .portal-charts-row {
    grid-template-columns: 1fr;
  }
}

.portal-hbar-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.portal-hbar-row-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}

.portal-hbar-row-head .portal-hbar-count {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.portal-hbar-track {
  height: 8px;
  background: var(--paper-dim);
  border-radius: 999px;
  overflow: hidden;
}

.portal-hbar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
}

.portal-hbar-fill.status-customer { background: var(--accent); }
.portal-hbar-fill.status-active { background: #1d4ed8; }
.portal-hbar-fill.status-lead { background: var(--ink-faint); }
.portal-hbar-fill.status-inactive { background: #d8d2c8; }

/* Kleuren voor de "gebeurtenissen per type"-balken in de
   Beveiliging-sectie: rate limits (verkeer geblokkeerd) in
   rood/amber, een geactiveerde spamval in de merkkleur — dat laatste
   is immers een afweer die gewerkt heeft, geen dreiging op zich. */
.portal-hbar-fill.sec-auth_rate_limited,
.portal-hbar-fill.sec-werkruimte_rate_limited,
.portal-hbar-fill.sec-api_rate_limited { background: #b42318; }
.portal-hbar-fill.sec-werkruimte_denied,
.portal-hbar-fill.sec-form_rate_limited,
.portal-hbar-fill.sec-api_unauthorized { background: #b7791f; }
.portal-hbar-fill.sec-form_honeypot { background: var(--accent); }

/* NPS-balkjes op de Analyse-pagina — zelfde kleurlogica als de
   nps-*-badges hierboven. */
.portal-hbar-fill.nps-promoter { background: var(--accent); }
.portal-hbar-fill.nps-passive { background: var(--ink-faint); }
.portal-hbar-fill.nps-detractor { background: #b42318; }

.portal-columns {
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  height: 160px;
  padding-top: 1.5rem;
}

.portal-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}

.portal-column-value {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.portal-column-bar {
  width: 100%;
  max-width: 34px;
  border-radius: 5px 5px 0 0;
  background: var(--ink);
  min-height: 3px;
}

.portal-column-label {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.portal-grouped-columns {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  height: 160px;
  padding-top: 1.5rem;
}

.portal-grouped-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}

.portal-grouped-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  width: 100%;
  max-width: 36px;
  height: 100%;
}

.portal-grouped-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  min-height: 3px;
}

.portal-grouped-bar.is-in { background: var(--accent); }
.portal-grouped-bar.is-out { background: var(--ink-faint); }

.portal-chart-legend {
  display: flex;
  gap: 1.25rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.portal-chart-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 0.4rem;
}

.portal-chart-legend-dot.is-in { background: var(--accent); }
.portal-chart-legend-dot.is-out { background: var(--ink-faint); }

.portal-empty {
  color: var(--ink-faint);
  font-size: 0.9rem;
  padding: 1rem 0;
  margin: 0;
}

/* ---------- Agenda ---------- */
.portal-agenda-date-head {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--paper-dim);
}

.portal-agenda-description {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

/* Verstreken agendapunten blijven zichtbaar (bijv. bij "Alles" of
   "Verleden") maar duidelijk gedempt, zodat ze niet met aankomende
   afspraken verward worden. */
.portal-agenda-row-past {
  color: var(--ink-faint);
}

.portal-agenda-row-past a {
  color: var(--ink-soft);
}

/* (Kalenderweergave van de agenda heeft een eigen stylesheet:
   static/home/css/portal-calendar.css, zie de toelichting daar.) */

.portal-note {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.portal-note:last-child {
  border-bottom: none;
}

.portal-note-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}

/* ---------- Bedrijven: Excel-import (portal/company_import.html) ---------- */
.portal-import-rules {
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding-left: 1.1rem;
  margin-bottom: 0;
}

.portal-import-rules li {
  margin-bottom: 0.3rem;
}

.portal-import-errors,
.portal-import-changes {
  font-size: 0.82rem;
  padding-left: 1.1rem;
  margin: 0;
}

.portal-import-errors li {
  color: #b42318;
}

.portal-import-changes li {
  color: var(--ink-soft);
}

.portal-page .pagination .page-link,
.dashboard-page .pagination .page-link {
  color: var(--ink);
  border-color: var(--line);
}

.portal-page .pagination .page-item.active .page-link,
.dashboard-page .pagination .page-item.active .page-link {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.portal-page .pagination .page-link:hover,
.dashboard-page .pagination .page-link:hover {
  background: var(--paper-dim);
  color: var(--ink);
}

.portal-danger-zone.card {
  border-color: #f3d2ce;
  background: #fdf5f4;
}

.portal-danger-zone .card-header {
  background: transparent;
  border-bottom-color: #f3d2ce;
  color: #b3261e;
}

@media (max-width: 575.98px) {
  .portal-header {
    align-items: flex-start;
  }
}