/* SalesFision Bundle — shared across all *-salesfision blocks */

/* Hier stonden tot 30-08-2026 twee @import-regels: een naar fonts.googleapis.com
 * en een naar cdn.jsdelivr.net. Allebei weggehaald, want een @import BINNEN een
 * stylesheet is de traagste manier om iets te laden die er is: de browser moet
 * eerst dit bestand ophalen en ontleden voordat hij aan het geimporteerde
 * begint, en dat is een keten in plaats van parallel verkeer.
 *
 * Gemeten met Lighthouse op de live homepage: 798 ms render-blokkering voor de
 * fonts en 817 ms voor flag-icons, op bestanden van 2,2 en 2,5 KB. Dat is bijna
 * volledig het opzetten van een verbinding met een vreemde server.
 *
 * Waar ze nu vandaan komen:
 *   - Open Sans + Playfair Display italic: wp_enqueue_style in
 *     includes/site-assets.php, dus parallel met dit bestand.
 *   - flag-icons: assets/css/flag-icons-subset.css, zelf gehost, uitgedund van
 *     27.904 naar 1.639 bytes en zonder vreemde herkomst.
 */

/* ── Hide WordPress theme chrome when salesfision bundle is active ── */
body.sf-hide-chrome > header,
body.sf-hide-chrome > footer,
body.sf-hide-chrome .site-header,
body.sf-hide-chrome .site-footer,
body.sf-hide-chrome #wp-site-header,
body.sf-hide-chrome #wp-site-footer { display: none !important; }

body.sf-hide-chrome { margin: 0 !important; padding: 0 !important; }

/* ──────────────────────────────────────────────────────── */
/* NAV OVERRIDE — force transparent at rest, glass on scroll */
/* The index page had this pattern; other pages baked glass  */
/* styles in by default. We unify here across all pages.     */
/* ──────────────────────────────────────────────────────── */
body.sf-hide-chrome nav {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}
body.sf-hide-chrome nav.glass {
    background: rgba(18,18,18,0.45) !important;
    backdrop-filter: blur(18px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.4) !important;
}

/* ── Mobile responsive (from original css/mobile.css) ── */
/* ===== SALESFISION — MOBILE RESPONSIVE ===== */
/* Only affects screens ≤ 900px. Desktop design is completely untouched. */

/* ── FLAG ICONS (all screen sizes) ── */
#langFlag.fi,
.lang-menu a .fi {
  width: 18px !important;
  height: 13px !important;
  border-radius: 2px;
  vertical-align: middle;
  display: inline-block !important;
  margin-right: 2px;
  background-size: cover;
}

/* ── HAMBURGER BUTTON (hidden on desktop) ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  /* position: relative is required for z-index to apply */
  position: relative;
  z-index: 10003;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 900px) {

  /* ── NAVBAR ── */
  /* Raise nav-wrapper above the overlay so hamburger stays clickable.
     IMPORTANT: drop the desktop transform — it would otherwise make
     `.nav-wrapper` a containing block for the position:fixed nav-links,
     trapping the fullscreen overlay inside the small navbar rectangle. */
  .nav-wrapper {
    width: calc(100% - 32px) !important;
    top: 10px !important;
    left: 16px !important;
    transform: none !important;
    z-index: 10003 !important;
  }
  nav { padding: 13px 20px !important; border-radius: 40px !important; }
  .nav-hamburger { display: flex !important; }

  /* When the fullscreen menu is open, <nav> must NOT establish a containing
     block for the position:fixed overlay (otherwise it opens "half" once the
     scroll-triggered .glass backdrop-filter is active).
     The `body.sf-hide-chrome` prefix is REQUIRED: it must out-specify the
     `body.sf-hide-chrome nav.glass` rule above, else (both !important) the
     glass backdrop-filter wins and traps the overlay. Do not remove it. */
  body.sf-hide-chrome nav.sf-menu-open,
  body.sf-hide-chrome nav.sf-menu-open.glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    /* Drop the filter INSTANTLY, not over the 0.35s nav transition: while the
       blur animates down it stays a containing block and traps the overlay at
       navbar size for ~350ms before it snaps to fullscreen (the "open stutter"). */
    transition: none !important;
  }

  .nav-links {
    /* Always laid out (fullscreen) but hidden, so opening can fade in smoothly.
       opacity/visibility (not display) is animatable; opacity creates no
       containing block, so the fixed overlay stays viewport-sized. */
    display: flex !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(8, 8, 8, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    flex-direction: column !important;
    align-items: center !important;
    /* flex-start + padding prevents the overflow-scroll bug with justify-content:center */
    justify-content: flex-start !important;
    gap: 0 !important;
    z-index: 10002 !important;
    padding: 90px 32px 48px !important;
    overflow-y: auto !important;
    border: none !important;
  }
  .nav-links.nav-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.3s ease !important;
  }

  .nav-links > a {
    font-size: 20px !important;
    color: #ccc !important;
    padding: 14px 0 !important;
    width: 100% !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    display: block !important;
  }
  .nav-links > a:last-child { border-bottom: none !important; }
  .nav-links > a:active, .nav-links > a:hover { color: #fff !important; }
  .nav-links .nav-lang {
    font-size: 15px !important;
    color: #666 !important;
    margin-top: 8px !important;
    border-bottom: none !important;
  }

  /* Services: always fully visible on mobile — no collapsible needed */
  .nav-dropdown {
    width: 100% !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
  }
  /* "Our Services" label */
  .nav-dropdown-btn {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #e63946 !important;
    padding: 14px 0 8px !important;
    display: block !important;
    width: 100% !important;
    cursor: default !important;
    pointer-events: none !important;
  }
  /* Always show the dropdown links on mobile */
  .dropdown-menu {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
    transition: none !important;
  }
  /* Mega-menu stacks vertically on mobile — clean list, no heavy cards */
  .nav-mega .mega-menu {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .nav-mega .mega-menu::before { display: none !important; }
  .mega-col {
    padding: 18px 0 14px !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .mega-col:last-child { border-bottom: none !important; }
  .mega-col:hover { background: transparent !important; }
  /* Slice 7A (T-04): de legacy fase-pill (.mega-tag, 9,5px UPPERCASE roze) is
     verwijderd — er bestaat geen .mega-tag-consument meer (grep php/blocks/
     assets 2026-09-08); de gebiedsbelofte is <p class="mega-promise">, zie het
     Slice-6-mobiele blok verderop. */
  .mega-col h6 {
    display: block !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: rgba(255,255,255,0.85) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    text-align: left !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    min-height: 0 !important;
  }
  .mega-col h6::after { display: none !important; }
  .mega-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .mega-col ul li a {
    padding: 8px 0 !important;
    background: transparent !important;
    border: none !important;
    border-left: 0 !important;
    text-align: left !important;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .mega-col ul li a .mega-name {
    display: block !important;
    font-size: 17px !important;
    color: #f0f0f0 !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin-bottom: 1px !important;
  }
  /* Hide the service descriptions (Customer Research, Project Management, …)
     in the mobile mega-menu — names only on mobile. */
  .mega-col ul li a small {
    display: none !important;
  }
  .mega-col ul li a:hover .mega-name { color: #fff !important; }
  .mega-col ul li a:hover small { color: #fca5a5 !important; }
  .dropdown-menu a {
    text-align: center !important;
    font-size: 17px !important;
    color: #bbb !important;
    padding: 9px 0 !important;
    display: block !important;
    white-space: normal !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .dropdown-menu a:active, .dropdown-menu a:hover { color: #fff !important; background: transparent !important; }

  /* Language switcher in mobile menu — Ronde 7A.3: een accordion die ingeklapt
     begint. De desktopkop (span met vlag + taalcode) is hier verborgen; de knop
     toont de volledige taalnaam in de eigen taal en draagt aria-expanded. */
  .lang-switcher .lang-btn--desktop { display: none !important; }
  .lang-switcher .lang-btn--mobile {
    display: block !important;
    width: 100% !important;
    font-size: 13px !important;
    color: #888 !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    padding: 12px 0 6px !important;
    text-transform: none !important;
    text-align: center !important;
  }
  .lang-switcher .lang-btn--mobile:hover,
  .lang-switcher .lang-btn--mobile[aria-expanded="true"] { color: #bbb !important; }
  .lang-switcher .lang-btn--mobile .nav-caret {
    display: inline-block;
    transition: transform 0.2s ease;
  }
  .lang-switcher.open .lang-btn--mobile .nav-caret { transform: rotate(180deg); }
  .lang-switcher .dropdown-menu a {
    font-size: 18px !important;
    color: #ccc !important;
    padding: 8px 0 !important;
  }

  /* ── HERO ── */
  .hero { padding: 110px 24px 60px !important; }
  .hero h1 { font-size: clamp(36px, 9vw, 54px) !important; letter-spacing: -1px !important; margin-bottom: 16px !important; }
  .hero .sub { font-size: 14px !important; }
  .btn-hero { display: block !important; width: 100% !important; text-align: center !important; box-sizing: border-box !important; margin-bottom: 12px !important; }
  .btn-primary { display: block !important; width: 100% !important; text-align: center !important; box-sizing: border-box !important; margin-bottom: 32px !important; }
  .hero-socials { gap: 10px !important; flex-wrap: wrap !important; justify-content: center !important; }

  /* ── SECTION INNER ── */
  .section-inner { padding: 60px 20px !important; }
  .section-title h2 { font-size: 32px !important; }
  .section-title p { font-size: 15px !important; }

  /* ── FEATURE ROWS ── */
  .feature-row {
    flex-direction: column !important;
    padding: 60px 20px !important;
    gap: 40px !important;
  }
  .feature-row.reverse { flex-direction: column !important; }
  .feature-text h2 { font-size: 28px !important; line-height: 1.25 !important; }
  .feature-text p { font-size: 16px !important; margin-bottom: 24px !important; }
  .feature-text .feature-sub { font-size: 16px !important; }
  .feature-img { min-height: unset !important; width: 100% !important; }
  .see-more, .btn-outline { display: block !important; width: 100% !important; text-align: center !important; box-sizing: border-box !important; }

  /* ── SERVICE PAGE ANIMATION CONTAINERS ── */
  /* Scale down the animation boxes so they fit mobile without overflowing */
  .feature-img > div[style*="width:600px"],
  .feature-img > div[style*="width:500px"],
  .feature-img > div[style*="width:560px"],
  .feature-img > div[style*="width:520px"],
  .feature-img > div[style*="width:540px"],
  .fv-wrap, .ai-wrap, .hs-wrap, .sm-wrap, .ra-wrap, .soc-wrap {
    transform: scale(0.7) !important;
    transform-origin: top center !important;
    margin-bottom: -80px !important;
  }

  /* ── SERVICES GRID (5-col → 2-col) ── */
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; margin-top: 32px !important; }
  .svc-card { padding: 18px 12px !important; }
  .svc-card .svc-icon { width: 48px !important; height: 48px !important; margin-bottom: 12px !important; }

  /* ── BLOG / USE CASES ── */
  .usecases-grid { grid-template-columns: 1fr !important; padding: 0 20px !important; }
  .usecases-header { padding: 0 20px !important; }
  .usecases-header h2 { font-size: 28px !important; }
  .blog-grid { grid-template-columns: 1fr !important; }

  /* ── PRICING ── */
  .pricing-section { padding: 80px 20px !important; }
  .pricing-inner h2 { font-size: 30px !important; }
  .pricing-inner .sub { font-size: 14px !important; }
  .pricing-cards { flex-direction: column !important; align-items: center !important; gap: 20px !important; }
  .pricing-card { width: 100% !important; max-width: 420px !important; padding: 36px 24px !important; }
  .pricing-section .astronaut { display: none !important; }

  /* ── TESTIMONIALS ── */
  .testimonials-section { padding: 64px 20px !important; }
  .testimonials-grid { gap: 16px !important; margin-top: 36px !important; }
  .testimonial-card { width: 100% !important; min-width: unset !important; padding: 28px 20px !important; }

  /* ── CTA SECTION ── */
  .cta-section { padding: 64px 20px !important; }
  .cta-card { padding: 40px 20px !important; }
  .cta-section h2 { font-size: 26px !important; }
  .cta-section p { font-size: 14px !important; }
  .cta-section .btn-outline,
  .cta-section a.btn-outline { display: inline-block !important; width: auto !important; }

  /* ── FOOTER ── */
  footer { padding: 48px 20px 28px !important; }
  .footer-top { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; padding-bottom: 24px !important; margin-bottom: 32px !important; }
  .footer-cols { flex-direction: column !important; gap: 24px !important; margin-bottom: 32px !important; }
  .footer-col { min-width: unset !important; }
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }

  /* ── DECORATIVE ELEMENTS ── */
  .page-deco { display: none !important; }

  /* ── RESULTS / STATS (index) ── */
  .results-inner { flex-direction: column !important; gap: 32px !important; align-items: center !important; }
  .results-num { font-size: 48px !important; }

  /* ── PAGE HERO (sub-pages) ── */
  .page-hero { padding: 110px 20px 48px !important; }
  .page-hero h1 { font-size: 32px !important; }
  .page-hero p { font-size: 15px !important; }

  /* ── ABOUT PAGE TIMELINE ── */
  .timeline-inner { padding: 60px 20px !important; }
  .timeline-title { margin-bottom: 40px !important; }
  .timeline-title h2 { font-size: 28px !important; }
  .timeline::before { display: none !important; }
  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) { flex-direction: column !important; gap: 12px !important; margin-bottom: 24px !important; }
  .timeline-dot { display: none !important; }
  .timeline-content { text-align: left !important; padding: 20px !important; }
  .timeline-content:nth-child(1) { text-align: left !important; }

  /* ── CONTACT PAGE ── */
  .contact-section { padding: 60px 20px !important; }
  .contact-info h2 { font-size: 26px !important; }
  .contact-form { padding: 24px 16px !important; }
  .map-section { padding: 40px 20px !important; }

  /* ── MODAL ── */
  #meetingModal { padding: 12px !important; }
  .modal-box-wrapper { max-width: 100% !important; width: 100% !important; }
  .modal-box-wrapper > div { padding: 32px 16px !important; border-radius: 16px !important; }
  .modal-options { grid-template-columns: 1fr !important; gap: 6px !important; }
  /* Ronde 7A.2 (NV-13): de tweekolomsrasters (naam/bedrijf, e-mail/bevestigen)
     staan in <form id="meetingForm">, niet direct onder de modaldoos. De oude
     selector `.modal-box-wrapper > div > div[style*="display:grid"]` raakte
     daardoor 0 elementen en op 390 px bleven het twee kolommen van 157 px, met
     afgekapte e-mailplaceholders. Deze regel volgt de echte markup. */
  #meetingModal #meetingForm > div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }
  #meetingModal h2 { font-size: 22px !important; }

  /* ── SERVICE PAGE INNER LAYOUTS ── */
  .section-inner [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }

  /* Trusted logos — reduce height on mobile */
  .logo-item { height: 60px !important; min-width: 110px !important; padding: 0 16px !important; }
  .logo-item img { height: 26px !important; }

}

/* Extra small screens */
@media (max-width: 480px) {
  .hero h1 { font-size: 32px !important; }
  .section-title h2 { font-size: 26px !important; }
  .feature-text h2 { font-size: 24px !important; }
  .services-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .pricing-card { max-width: 100% !important; }
}

/* ── FOOTER COLUMN REORDER (all breakpoints) — Services → Extra's → Contact ── */
.footer-cols .footer-col:nth-child(1) { order: 4; } /* Contact → last */
.footer-cols .footer-col:nth-child(2) { order: 3; } /* Extra's → 3rd */
.footer-cols .footer-col:nth-child(3) { order: 1; } /* Services col 1 → 1st */
.footer-cols .footer-col:nth-child(4) { order: 2; } /* Services col 2 → 2nd */

/* ── FLOATING "BOOK MEETING" CTA ── */
/* Slice 6 (besluit B7): ghost/outline-pill — donker glas met witte rand in
   plaats van rood gevuld, zodat de rode Scan-pill in de nav de enige rood
   gevulde actiefamilie per scherm is. Hover inverteert (wit vlak, donkere
   tekst); de pulse-dot blijft. Label per taal via functions.php. */
.sf-sticky-book {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 21px;
  background: rgba(10,10,12,0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.sf-sticky-book:hover {
  transform: translateY(-2px);
  background: #fff;
  border-color: #fff;
  color: #111;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.sf-sticky-book:hover .sf-sticky-pulse,
.sf-sticky-book:hover .sf-sticky-pulse::after { background: #e63946; }
.sf-sticky-book:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* De pill (bottom 24 + ~48px) hangt boven de footer-legal-regel; op elke viewport
   krijgt de footer daarom onderruimte (gemeten desktop 1440: overlapte 'Terms &
   conditions'; mobiel 390: M-08). Niet op het Scan-template — daar wordt de
   sticky niet gerenderd (functions.php) en zou de ruimte loos zijn. */
/* !important is nodig: de pre-existing mobiele regel `footer { padding: 48px 20px 28px
   !important }` (≤900px, hierboven) won anders — de pill overlapte de legal-links op
   390/768px (fix-ronde 1, adversarieel a11y-responsive 11 / M-08). */
body:not(.sf-bsc) footer.sf-site-footer { padding-bottom: 96px !important; }
.sf-sticky-pulse {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}
.sf-sticky-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
  animation: sfStickyPulse 2s ease-out infinite;
}
@keyframes sfStickyPulse {
  0%   { transform: scale(0.85); opacity: 0.55; }
  100% { transform: scale(1.7);  opacity: 0; }
}

@media (max-width: 600px) {
  .sf-sticky-book { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 13px; }
}

/* ── GLOBAL RED BUTTON STYLE (matches platform "See a live demo") ── */
.btn-primary {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Slice 7A (D4/G-6): semantisch CTA-token, gemeten ≥ 4,5:1 met witte tekst.
     Tokens in :root bij de Slice-6-chrome-sectie (--sf-red-cta …). */
  background: var(--sf-red-cta, #d63340) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.2px !important;
  line-height: 1 !important;
  padding: 16px 32px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 0 0 0 rgba(230,57,70,0.45), 0 18px 40px -12px rgba(230,57,70,0.55) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}
/* Ronde 6: CTA's die alleen een modal openen zijn echte knoppen (geen dode href="#").
   Dezelfde klassen als de links; hier alleen de browser-eigen knopopmaak neutraliseren. */
button.btn-primary,
button.btn-outline,
button.sf-linkbutton {
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
button.btn-primary { border: 0 !important; }
button.sf-linkbutton {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
}
button.sf-pricing__cta-secondary.sf-linkbutton { text-decoration: underline; text-underline-offset: 4px; }

.btn-primary:hover {
  transform: translateY(-2px) !important;
  background: var(--sf-red-cta-hover, #c8202e) !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px rgba(230,57,70,0.18), 0 22px 44px -10px rgba(230,57,70,0.7) !important;
}
/* Slice 7A (D4): onderscheidende toestanden van de primaire CTA-familie.
   active = dieper rood + lichte indruk; focus-visible = dezelfde witte ring als
   de nav-pil (UA-default was 1px donker op donker); disabled = 45 % dekking,
   geen schaduw/lift/glans (WCAG 1.4.3 zondert inactieve componenten uit). */
.btn-primary:active {
  transform: translateY(0) scale(0.98) !important;
  background: var(--sf-red-cta-active, #b81d2a) !important;
}
.btn-primary:focus-visible {
  outline: 2px solid var(--sf-red-cta-ring, #fff) !important;
  outline-offset: 3px !important;
}
.btn-primary[disabled],
.btn-primary[aria-disabled="true"] {
  opacity: 0.45 !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn-primary[disabled]::after,
.btn-primary[aria-disabled="true"]::after { animation: none !important; }
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Glans-alpha .22 → .14 (G-6): de glans mag de vulling nooit onder AA duwen. */
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.14) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
  animation: sfBtnShine 3.4s 1.2s ease-in-out infinite;
}
@keyframes sfBtnShine {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { animation: none !important; }
}

/* ── COMPACT CTA (site-wide) ── */
.cta-compact {
  padding: 80px 24px !important;
  background: #0a0a0a !important;
}
.cta-compact .cta-card {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 38px 48px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #181818 0%, #0e0e0e 100%) !important;
  border: 1px solid rgba(230,57,70,0.32) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  text-align: center !important;
  box-shadow: 0 22px 60px -22px rgba(230,57,70,0.45), 0 0 0 1px rgba(230,57,70,0.05) !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.cta-compact .cta-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 520px 220px at 100% 0%, rgba(230,57,70,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.cta-compact .cta-card > * { position: relative; z-index: 1; }
.cta-compact .cta-card:hover {
  border-color: rgba(230,57,70,0.55) !important;
  transform: translateY(-2px);
  box-shadow: 0 26px 70px -22px rgba(230,57,70,0.6), 0 0 0 1px rgba(230,57,70,0.1) !important;
}
.cta-compact .cta-card .section-badge { margin-bottom: 14px !important; }
.cta-compact .cta-card h2 {
  font-size: clamp(24px, 2.6vw, 34px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.15 !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.4px;
}
.cta-compact .cta-card h2 span { color: #e63946 !important; }
.cta-compact .cta-card h2 span.cta-h-white { color: #fff !important; }
.cta-compact .cta-card p {
  font-size: 14.5px !important;
  color: rgba(255,255,255,0.62) !important;
  margin: 0 0 24px !important;
  line-height: 1.5;
}
.cta-compact .cta-card .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  padding: 16px 30px !important;
  font-size: 14.5px !important;
  white-space: nowrap;
  margin: 0 !important;
}
@media (max-width: 760px) {
  .cta-compact .cta-card { padding: 28px 26px !important; }
}

/* ── DASHBOARD MOCKUP (shared, used on platform & service pages) ── */
.sf-dash {
  width: 100%;
  background: linear-gradient(180deg, #14171f 0%, #0e1018 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,0.32), 0 0 0 1px rgba(232,54,66,0.04) inset;
}
.sf-dash-chrome { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.06); }
.sf-dash-dots { display: flex; gap: 6px; }
.sf-dash-dots span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.sf-dash-dots span:nth-child(1) { background: #ff5f57; }
.sf-dash-dots span:nth-child(2) { background: #febc2e; }
.sf-dash-dots span:nth-child(3) { background: #28c840; }
.sf-dash-url { flex: 1; text-align: center; font-size: 12.5px; color: rgba(255,255,255,0.55); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(0,0,0,0.35); padding: 6px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); }
.sf-dash-url .lock { color: #28c840; margin-right: 6px; font-size: 9px; vertical-align: middle; }
.sf-dash-body { display: grid; grid-template-columns: 200px 1fr; min-height: 420px; }
.sf-dash-side { background: rgba(0,0,0,0.25); border-right: 1px solid rgba(255,255,255,0.06); padding: 18px 14px; font-size: 13px; }
.sf-dash-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.sf-dash-brand-dot { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #e63946 0%, #ff7043 100%); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; letter-spacing: 0.5px; }
.sf-dash-brand-name { font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.25; }
.sf-dash-brand-name small { display: block; font-weight: 500; font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 1px; }
.sf-dash-side h6 { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: 1.4px; text-transform: uppercase; margin: 18px 0 10px; padding: 0 6px; }
.sf-dash-side ul { list-style: none; padding: 0; margin: 0 0 6px; }
.sf-dash-side li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: rgba(255,255,255,0.7); font-size: 12.5px; }
.sf-dash-side li.active { background: rgba(232,54,66,0.12); color: #fff; }
.sf-dash-side li .dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.35); flex-shrink: 0; }
.sf-dash-side li.active .dot { background: #e63946; box-shadow: 0 0 8px #e63946; }
.sf-dash-side li .badge { margin-left: auto; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.sf-dash-main { padding: 22px 24px; min-width: 0; }
.sf-dash-topline { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 14px; flex-wrap: wrap; }
.sf-dash-topline h3 { font-size: 16px; font-weight: 700; color: #fff; margin: 0; line-height: 1.3; }
.sf-dash-topline h3 small { display: block; font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.4); margin-top: 4px; }
.sf-dash-pills { display: flex; gap: 4px; background: rgba(0,0,0,0.4); padding: 3px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); }
.sf-dash-pills .pill { background: transparent; border: 0; color: rgba(255,255,255,0.6); font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.sf-dash-pills .pill.active { background: rgba(232,54,66,0.18); color: #fff; }
.sf-dash-pills span.pill { cursor: default; text-align: center; } /* decoratieve illustratie-pill (span, geen knop): wint van de cursor:pointer in de block-style.css-kopieën; text-align houdt de oude button-centrering */
.sf-dash-funnel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 12px; margin-bottom: 16px; }
.sf-dash-funnel .funnel-cell { padding: 0 6px; border-right: 1px solid rgba(255,255,255,0.05); min-width: 0; }
.sf-dash-funnel .funnel-cell:last-child { border-right: 0; }
.sf-dash-funnel .funnel-cell .stage { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-dash-funnel .funnel-cell .stage b { color: #e63946; font-weight: 800; }
.sf-dash-funnel .funnel-cell .num { font-size: 17px; font-weight: 800; color: #fff; line-height: 1; }
.sf-dash-funnel .funnel-cell .delta { font-size: 11px; font-weight: 700; margin-top: 4px; }
.sf-dash-funnel .funnel-cell .delta.up { color: #5fd49b; }
.sf-dash-funnel .funnel-cell .delta.down { color: #ff7c7c; }
.sf-dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-dash-card { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 14px; min-width: 0; }
.sf-dash-card h5 { font-size: 13.5px; font-weight: 700; color: #fff; margin: 0 0 2px; }
.sf-dash-card .h5-sub { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 12px; }
.sf-dash-card .chart-wrap { width: 100%; height: 130px; }
.sf-dash-card .chart-wrap svg { width: 100%; height: 100%; display: block; }
.sf-dash-card .chart-grid line { stroke: rgba(255,255,255,0.05); stroke-dasharray: 2 4; }
.sf-work-list { display: flex; flex-direction: column; gap: 8px; }
.sf-work-list .work-item { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); }
.sf-work-list .work-item .key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: rgba(255,255,255,0.5); }
.sf-work-list .work-item .title { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.3; }
.sf-work-list .work-item .title small { display: block; font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.4); margin-top: 2px; }
.sf-work-list .work-item .status { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.sf-work-list .work-item .status.doing { background: rgba(96,165,250,0.18); color: #93c5fd; }
.sf-work-list .work-item .status.review { background: rgba(255,179,71,0.18); color: #ffd28a; }
.sf-work-list .work-item .status.todo { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }
.sf-work-list .work-item .status.done { background: rgba(95,212,155,0.18); color: #8eebbb; }
@media (max-width: 900px) {
  .sf-dash-body { grid-template-columns: 1fr; }
  .sf-dash-side { display: none; }
  .sf-dash-funnel { grid-template-columns: repeat(3, 1fr); }
  .sf-dash-funnel .funnel-cell:nth-child(3n) { border-right: 0; }
  .sf-dash-cols { grid-template-columns: 1fr; }
  .sf-dash-url { font-size: 10.5px; }
}

/* CTA badge always red, even on service pages with thematic badge colors */
.cta-compact .cta-card .section-badge {
  background: rgba(230,57,70,0.18) !important;
  border: 1px solid rgba(230,57,70,0.45) !important;
  color: #fca5a5 !important;
  border-radius: 10px !important;
  padding: 5px 13px !important;
}

.sf-dash-brand-dot img { width: 60%; height: 60%; object-fit: contain; display: block; }

/* ── KANBAN BOARD (shared with home + service pages) ── */
.feature-board { padding: 0 !important; }
.feature-board .sf-dash { max-width: none !important; margin: 0 !important; }

.feature-board .kanban {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.feature-board .kanban-col {
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 10px 8px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.feature-board .kb-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
  padding: 0 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.feature-board .kb-dot { width: 7px; height: 7px; border-radius: 50%; }
.feature-board .kb-dot-todo   { background: rgba(255,255,255,0.5); }
.feature-board .kb-dot-doing  { background: #93c5fd; box-shadow: 0 0 6px rgba(147,197,253,0.7); }
.feature-board .kb-dot-review { background: #ffd28a; box-shadow: 0 0 6px rgba(255,210,138,0.7); }
.feature-board .kb-dot-done   { background: #5fd49b; box-shadow: 0 0 6px rgba(95,212,155,0.7); }
.feature-board .kb-title { flex: 1; }
.feature-board .kb-count {
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
}

.feature-board .kb-card {
  background: linear-gradient(180deg, #1c1f29 0%, #14171f 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 9px 10px;
  display: flex; flex-direction: column; gap: 7px;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.feature-board .kb-card:hover { transform: translateY(-1px); border-color: rgba(230,57,70,0.3); }
.feature-board .kb-card-done { opacity: 0.55; }
.feature-board .kb-card-done .kb-text { text-decoration: line-through; }

.feature-board .kb-tag {
  align-self: flex-start;
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}
.feature-board .tag-purple { background: rgba(167,139,250,0.18); color: #c4b5fd; border: 1px solid rgba(167,139,250,0.32); }
.feature-board .tag-blue   { background: rgba(96,165,250,0.18);  color: #93c5fd; border: 1px solid rgba(96,165,250,0.32); }
.feature-board .tag-red    { background: rgba(230,57,70,0.18);   color: #fca5a5; border: 1px solid rgba(230,57,70,0.4); }
.feature-board .tag-orange { background: rgba(255,179,71,0.18);  color: #ffd28a; border: 1px solid rgba(255,179,71,0.32); }
.feature-board .tag-green  { background: rgba(95,212,155,0.18);  color: #8eebbb; border: 1px solid rgba(95,212,155,0.32); }

.feature-board .kb-text { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.35; }
.feature-board .kb-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.feature-board .kb-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff; letter-spacing: 0.3px;
  border: 1.5px solid rgba(0,0,0,0.4);
}
.feature-board .a-1 { background: linear-gradient(135deg, #e63946, #ff7043); }
.feature-board .a-2 { background: linear-gradient(135deg, #5AA9FF, #1F4A8B); }
.feature-board .a-3 { background: linear-gradient(135deg, #B78CFF, #5A3FB7); }
.feature-board .kb-priority {
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
}
.feature-board .kb-priority.high { background: rgba(230,57,70,0.25); color: #fca5a5; }

@media (max-width: 1100px) {
  .feature-board .sf-dash-side { display: none; }
  .feature-board .sf-dash-body { grid-template-columns: 1fr; min-height: 0; }
}
@media (max-width: 720px) {
  .feature-board .kanban { grid-template-columns: 1fr; }
}

/* Reset native <button> defaults when used with .btn-primary */
button.btn-primary {
  border: 0 !important;
  cursor: pointer;
  font-family: inherit !important;
  -webkit-appearance: none;
  appearance: none;
}

/* ── MEGA MENU (Our Services dropdown) ── */
.nav-mega { position: relative; }
.nav-mega .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 880px;
  max-width: 92vw;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  gap: 8px;
  padding: 22px;
  background: rgba(14,14,14,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(230,57,70,0.04) inset;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s, visibility 0.22s, transform 0.22s;
  z-index: 200;
}
/* Slice 7A (T-05): open via muis-hover of expliciet (klik/Enter → .open, door
   het nav-script met aria-expanded); geen :focus-within meer, zodat Tab naar de
   knop het paneel niet ongevraagd opent en Escape het altijd kan sluiten. */
.nav-mega:hover .mega-menu,
.nav-mega.open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Hover-brug: de kloof knop→paneel is gemeten 19,8px (audit 7A); -22px/26px
   dekt hem volledig, zodat het paneel niet flikkert op weg naar beneden. */
.nav-mega .mega-menu::before {
  content: "";
  position: absolute;
  top: -22px; left: 0; right: 0; height: 26px;
  background: transparent;
}

.mega-col {
  padding: 10px 8px;
  border-radius: 10px;
  transition: background 0.2s ease;
}
.mega-col:hover { background: rgba(255,255,255,0.025); }

.mega-col {
  display: flex;
  flex-direction: column;
  padding: 4px 0 4px 4px;
}
.mega-col:hover { background: transparent; }
/* Slice 7A: de fase-pill (.mega-tag) bestaat niet meer; de gebiedsbelofte is
   <p class="mega-promise"> ná de h6 — zie 'Slice 7A — mega-menu polish'. */
.mega-col h6 {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 14px;
  padding: 0 0 10px;
  letter-spacing: -0.2px;
  position: relative;
  min-height: 30px;
}
.mega-col h6::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 22px; height: 2px;
  background: #e63946;
}
.mega-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-col ul li { margin: 0; }
.mega-col ul li a {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 2px;
  padding: 8px 10px 8px 0 !important;
  margin: 0 0 0 -2px;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #ddd !important;
  white-space: normal !important;
  background: transparent !important;
  border-left: 2px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease;
}
.mega-col ul li a .mega-name {
  font-weight: 700;
  font-size: 13.5px;
  color: rgba(255,255,255,0.72);
  line-height: 1.2;
}
.mega-col ul li a small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-top: 2px;
}
.mega-col ul li a:hover {
  background: rgba(230,57,70,0.10) !important;
  border-left-color: #e63946;
  padding-left: 8px !important;
  color: #fff !important;
}
.mega-col ul li a:hover small { color: #fca5a5; }

@media (max-width: 1100px) {
  .nav-mega .mega-menu { min-width: 680px; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav-mega .mega-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: 1fr;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 8px 0 !important;
  }
  .mega-col h6 { font-size: 14px; }
}

/* Language picker: re-enabled now the Translate routing layer is active
   (was: TEMP hidden). Only the legacy ?lang= fallback stays hidden — it is
   non-functional without Translate and was the block this rule used to hide. */
.lang-switcher--legacy-hidden { display: none !important; }

/* Ronde 7A.3: de mobiele taalbediening bestaat alleen onder de mobiele breuklijn
   (zie de @media-regel hierboven). Op desktop blijft de bestaande <span>-kop met
   vlag, taalcode en caret staan, dus ook dezelfde tabvolgorde. */
.lang-btn--mobile { display: none; }

/* Hide service subtitles in mega-menu */
.mega-menu small { display: none !important; }

/* Legal page (Terms / Privacy) */
.sf-legal-page { background: #0c0c0c; color: #d7d7d7; margin: 0; }
.legal-hero { background: #0c0c0c; padding: 140px 24px 60px; text-align: center; }
.legal-hero-inner { max-width: 820px; margin: 0 auto; }
.legal-hero h1 { color: #fff; font-size: 48px; font-weight: 800; letter-spacing: -0.5px; margin: 16px 0 18px; }
.legal-hero-sub { color: #b5b5b5; font-size: 17px; line-height: 1.6; margin: 0 0 18px; }
.legal-hero-meta { display: inline-block; color: #888; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; }
.legal-body { background: #0c0c0c; padding: 20px 24px 120px; }
.legal-body-inner { max-width: 820px; margin: 0 auto; }
.legal-body-inner h2 { color: #fff; font-size: 22px; font-weight: 700; margin: 48px 0 14px; letter-spacing: -0.2px; }
.legal-body-inner h2:first-child { margin-top: 0; }
.legal-body-inner h3 { color: #fff; font-size: 18px; font-weight: 700; margin: 36px 0 12px; }
.legal-body-inner h4 { color: #fff; font-size: 16px; font-weight: 600; margin: 24px 0 10px; }
.legal-body-inner p { color: #c0c0c0; font-size: 15.5px; line-height: 1.75; margin: 0 0 14px; }
.legal-body-inner ul, .legal-body-inner ol { color: #c0c0c0; font-size: 15.5px; line-height: 1.75; padding-left: 22px; margin: 0 0 14px; }
.legal-body-inner li { margin-bottom: 6px; }
.legal-body-inner strong { color: #fff; font-weight: 600; }
.legal-body-inner a { color: #ff6b75; text-decoration: underline; }
@media (max-width: 720px) {
  .legal-hero { padding: 100px 18px 40px; }
  .legal-hero h1 { font-size: 32px; }
  .legal-body { padding: 8px 18px 80px; }
  .legal-body-inner h2 { font-size: 19px; }
}

/* ── Shared per-page FAQ accordion (sf_render_faq). Accent via --sf-accent, set per page (defaults to brand red). Badge inherits the page's own .section-badge colour. ── */
.sf-faq { padding: 100px 40px; }
.sf-faq .section-inner { max-width: 1200px; margin: 0 auto; }
.sf-faq .section-title { text-align: center; margin-bottom: 48px; }
.sf-faq .section-title h2 { font-size: 36px; font-weight: 800; color: #fff; margin: 0; }
.sf-faq .sf-faq-list { max-width: 800px; margin: 0 auto; }
.sf-faq .sf-faq-item { border-bottom: 1px solid rgba(255,255,255,0.07); }
.sf-faq .sf-faq-q { width: 100%; background: none; border: none; color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; padding: 24px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color 0.2s; }
.sf-faq .sf-faq-q:hover { color: var(--sf-accent, #e63946); }
.sf-faq .sf-faq-icon { width: 24px; height: 24px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; transition: transform 0.3s, background 0.2s, border-color 0.2s; }
.sf-faq .sf-faq-item.open .sf-faq-icon { transform: rotate(45deg); background: var(--sf-accent, #e63946); border-color: var(--sf-accent, #e63946); color: #fff; }
.sf-faq .sf-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.sf-faq .sf-faq-a-inner { padding: 0 0 24px; font-size: 14px; color: #888; line-height: 1.7; }
.sf-faq .sf-faq-item.open .sf-faq-a { max-height: 600px; }
@media (max-width: 720px) { .sf-faq { padding: 60px 20px; } }

/* ===================================================================
 * BASE CHROME + RESET — re-homed from the bespoke carrier blocks
 * (e.g. about-stats-salesfision/style.css) which previously supplied the
 * desktop nav/footer/typography base. After migrating carrier blocks to
 * library blocks, this base must live globally so site-chrome (nav/footer)
 * renders correctly on every page. Desktop base only; responsive/mega rules
 * remain above. =================================================== */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Open Sans', Arial, sans-serif; background-color: #0d0d0d; color: #ccc; line-height: 1.7; }
body a { text-decoration: none; color: inherit; }

/* nav */
.nav-wrapper { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1000; width: calc(100% - 120px); max-width: 1400px; }
.nav-wrapper nav { background: transparent; border: 1px solid transparent; border-radius: 50px; padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.nav-wrapper nav.glass { background: rgba(18,18,18,0.45); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border-color: rgba(255,255,255,0.1); box-shadow: 0 4px 32px rgba(0,0,0,0.4); }
.nav-logo img { height: 22px; width: auto; display: block; }
.nav-logo { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-size: 14px; color: #bbb; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: #e63946; }
.nav-dropdown { position: relative; }
.nav-dropdown-btn { font-size: 14px; color: #bbb; font-weight: 500; cursor: pointer; transition: color 0.2s; white-space: nowrap; }
.nav-dropdown:hover .nav-dropdown-btn { color: #fff; }
.dropdown-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); background: rgba(14,14,14,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 8px; min-width: 210px; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s, transform 0.2s; z-index: 200; box-shadow: 0 16px 48px rgba(0,0,0,0.5); }
.nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-menu a { display: block; padding: 9px 14px; font-size: 13px; color: #aaa; border-radius: 8px; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.dropdown-menu a:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* footer */
footer { background: #0a0a0a; padding: 80px 40px 40px; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 48px; }
.footer-logo img { height: 36px; width: auto; display: block; }
.footer-cols { display: flex; gap: 60px; flex-wrap: wrap; margin-bottom: 48px; }
.footer-col { flex: 1; min-width: 140px; }
.footer-col h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
.footer-col a, .footer-col span { display: block; font-size: 13px; color: #888; margin-bottom: 10px; transition: color 0.2s; }
.footer-col a:hover { color: #e63946; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
/* Slice 6 (B11/M-06): #555 op #0a0a0a was 2,65:1; #8a8a8a = 5,7:1 (WCAG AA).
   Gescoopt op de chrome-root (footer.sf-site-footer, specificiteit 0,2,1): 40 blok-
   stylesheets (platform-hero/-diff, home-hero, …) dragen een legacy-kopie
   `.footer-bottom p, .footer-legal { color:#555 }` die ná dit bestand laadt en bij
   gelijke specificiteit won (fix-ronde 1, adversarieel a11y-responsive 18). */
.footer-bottom p, .footer-legal,
footer.sf-site-footer .footer-bottom p, footer.sf-site-footer .footer-legal { font-size: 12px; color: #8a8a8a; }
.footer-legal a,
footer.sf-site-footer .footer-legal a, footer.sf-site-footer .sf-footer-legal-btn { color: #8a8a8a; transition: color 0.2s; }
.footer-legal a:hover,
footer.sf-site-footer .footer-legal a:hover, footer.sf-site-footer .sf-footer-legal-btn:hover { color: #e63946; }
.footer-socials { display: flex; gap: 12px; }
.footer-socials a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #888; font-size: 13px; transition: border-color 0.2s, color 0.2s; }
.footer-socials a:hover { border-color: #e63946; color: #e63946; }
/* Breadcrumbs (Yoast) — blogpost-template, donkere chrome */
.sf-breadcrumb { display: block; margin-bottom: 24px; font-size: 13px; color: #888; line-height: 1.5; }
.sf-breadcrumb a { color: #888; text-decoration: none; transition: color 0.2s; }
.sf-breadcrumb a:hover { color: var(--sf-accent, #e63946); }
.sf-breadcrumb .breadcrumb_last, .sf-breadcrumb [aria-current="page"] { color: #bbb; }

/* ── Slice 3: chrome & navigation foundation ─────────────────────────
   Drie-gebiedenmenu (WEB-010/016-basis) + klik/toetsenbord-open naast
   hover, en <button>-semantiek voor de dropdown-knoppen. */

/* Echte <button> zonder browser-chrome, identiek aan de oude <span>. */
button.nav-dropdown-btn {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  color: #bbb;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
}
button.nav-dropdown-btn:focus-visible {
  outline: 2px solid #e63946;
  outline-offset: 3px;
  border-radius: 4px;
  color: #fff;
}

/* Klik/toetsenbord-geopend paneel: zelfde presentatie als hover. */
.nav-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* (.nav-mega.open .mega-menu staat sinds Slice 7A bij de basisregel van het
   mega-menu, samen met :hover.) Na Escape onderdrukt .sf-esc de hover tot de
   muis het menu verlaat (nav-script, T-05); alleen desktop — op mobiel sluit
   Escape het hele sheet. */
@media (min-width: 901px) {
  .nav-dropdown.sf-esc:hover .dropdown-menu,
  .nav-mega.sf-esc:hover .mega-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Drie gebiedskolommen in plaats van vijf fasekolommen. */
.nav-mega .mega-menu {
  grid-template-columns: repeat(3, 1fr);
  min-width: 760px;
}

/* De gebiedsbelofte (Slice 3: zin i.p.v. fase-tag) is sinds Slice 7A
   <p class="mega-promise"> onder de titel; regels bij 'Slice 7A — mega-menu polish'. */

/* PRODUCT-item (SalesFision Platform) licht afgezet van de dienstenlijst. */
.mega-col ul li a.mega-product {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.14);
}
.mega-col ul li a.mega-product small {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 9px;
  color: #fca5a5;
}

/* ── Slice 5: Platform Visual Rebuild (WEB-027 / WEB-004) ─────────── */

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

/* Prijsband: rood omrand kaartje. Sinds Slice 6 (B9) een compacte feitenregel ná de
   AI-band (zie .sf-plat-price--compact hieronder); de oude tier-/pill-regels van de
   grote kaart zijn verwijderd (grep-bewijs: geen render gebruikt ze meer). */
.sf-plat-price { background: #0a0a0a; padding: 0 40px 40px; }
.sf-plat-price .section-inner { max-width: 1200px; margin: 0 auto; }
.sf-plat-price__card { border: 1px solid rgba(230,57,70,0.5); background: #111114; border-radius: 18px; padding: 34px 34px 30px; text-align: center; }
.sf-plat-price__ctas { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0; }
.sf-plat-price__link { color: #c9cbd6; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.sf-plat-price__link:hover { color: #fff; }

/* Viergroepen-catalogus + Knowledge-inbegrepen-container. */
.apps-grid-v3 { display: flex; flex-direction: column; gap: 40px; }
.apps-group__title { font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #8a8da0; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.apps-included { border: 1px dashed rgba(74,222,128,0.4); border-radius: 16px; padding: 20px; }
.apps-included__grid { align-items: stretch; }
.apps-included__note h3 { font-size: 16px; font-weight: 800; color: #a7f3d0; margin: 0 0 8px; }
.apps-included__note p { font-size: 13.5px; color: #c9cbd6; line-height: 1.65; margin: 0; }
.apps-included__note { display: flex; flex-direction: column; justify-content: center; padding: 10px 8px; }

/* AI-laag en Customer Portal: sinds Slice 7A-visual onderaan dit bestand (.apps-layout / .sf-plat-ai--layer / .sf-plat-portal--bridge). */
@media (max-width: 900px) {
  .sf-plat-price { padding-left: 20px; padding-right: 20px; }
  .apps-included__grid { grid-template-columns: 1fr; }
}

/* ── Slice 6: Scan-first commercial journey ───────────────────────── */

/* ═══ Slice 6 — CHROME & ROUTES (thema-agent) ═══════════════════════
   Alles hieronder tot 'Slice 6 — BLOKKEN' is site-chrome: nav, mega-menu,
   mobiel sheet, sticky, footer, modal en het Scan-/calculatortemplate.
   Contract met de SPA (assets/business-scan): de chrome zet expliciet zijn
   eigen font en reset; de SPA scopet alles op #sf-bsc-app (--bsc-*-tokens). */

/* Nav-offset (B5): nav-onderkant + ≥24px. Gemeten .nav-wrapper: desktop
   top 16 + hoogte 80 = 96px -> 120px; mobiel top 10 + 50 = 60px -> 96px.
   Gebruikt door het Scan-template (#sf-bsc-app padding-top en
   html{scroll-padding-top}); beschikbaar voor elke pagina met vaste nav. */
:root { --sf-nav-offset: 120px; }

/* Slice 7A (D4, beslispoort G-6): semantisch token voor de primaire rode
   CTA-familie (.btn-primary, nav-pil, mega-Scan-knop, sheet-pil, modal-submit).
   #d63340 = zelfde merkrood, iets dieper (ΔE00 3,84 t.o.v. #e63946); witte tekst
   4,77:1 in rust, hover 5,67:1, active 6,47:1 — pixelgemeten in
   CTA_ACCESSIBILITY.md (slice7a). Legacy rood-als-TEKST (#e63946) blijft
   ongemoeid (T-08 buiten scope). */
:root {
  --sf-red-cta: #d63340;
  --sf-red-cta-hover: #c8202e;
  --sf-red-cta-active: #b81d2a;
  --sf-red-cta-grad-end: #c8202e;
  --sf-red-cta-ring: #fff;
}

/* Chrome-font expliciet (B4): de rest van de site rendert nav/footer/modal in
   de customizer-bodyfont (--sf-font-body, standaard "Inter" — gemeten op
   /pricing/: body/nav/footer 'Inter, sans-serif' via tailwind .font-body).
   Zonder deze regel erfde de chrome op het Scan-template de SPA-bodyfont.
   Dezelfde variabele als de site, dus een customizer-wijziging blijft
   site-breed gelijk. */
.nav-wrapper, .nav-wrapper a, .nav-wrapper button, .nav-wrapper h6, .nav-wrapper p,
footer.sf-site-footer, footer.sf-site-footer a, footer.sf-site-footer h4,
footer.sf-site-footer span, footer.sf-site-footer p, footer.sf-site-footer button,
#meetingModal, #meetingModal h2, #meetingModal h3, #meetingModal p, #meetingModal label,
#meetingModal input, #meetingModal textarea, #meetingModal button {
  font-family: var(--sf-font-body, "Inter"), sans-serif;
}
/* Reset-pariteit zonder tailwind-preflight (B4a dequeue op het Scan-template):
   de preflight zette deze marges op 0; hier expliciet zodat de chrome op
   /business-scan/ en /calculator/ pixelgelijk blijft aan /pricing/. */
footer.sf-site-footer .footer-bottom p { margin: 0; }
footer.sf-site-footer .footer-col h4 { margin-top: 0; }
footer.sf-site-footer .footer-col a, footer.sf-site-footer .footer-col span { text-decoration: none; }
#meetingModal form { margin: 0; }
/* Tailwind-preflight zet button/input/textarea op line-height:inherit; zonder
   preflight valt de UA-'normal' terug (gemeten: uitklapknop 23,8→18px,
   modal-input 49,8→43px). Expliciet, zodat de chrome overal gelijk meet. */
.nav-wrapper button, footer.sf-site-footer button,
#meetingModal button, #meetingModal input, #meetingModal textarea, #meetingModal select { line-height: inherit; }
#meetingModal ::placeholder { color: #9ca3af; opacity: 1; }
/* Modal-badge ('Book a meeting'-label, inline #e63946 op #161616 = 4,3:1 bij 11px):
   dezelfde lichte accenttint als de mega-tag (#fca5a5, 8,6:1). axe color-contrast
   in de geopende modal was hierdoor de enige chrome-node. */
#meetingModal .modal-box-wrapper > div > div:first-of-type > span:first-child { color: #fca5a5 !important; }

/* Skip-link (B6) — eerste tabstop op het Scan-template, vóór de nav.
   Hogere specificiteit dan de SPA-.sf-skip-link zodat top/z-index winnen:
   hij moet BOVEN de vaste nav (z 1000 / mobiel 10003) verschijnen. */
a.sf-skip-link.sf-skip-link--site {
  position: fixed;
  top: -64px;
  left: 16px;
  z-index: 10010;
  background: #111114;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 10px 18px;
  border-radius: 10px;
  font-family: var(--sf-font-body, "Inter"), sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: top 0.15s ease;
}
a.sf-skip-link.sf-skip-link--site:focus,
a.sf-skip-link.sf-skip-link--site:focus-visible {
  top: 12px;
  outline: 2px solid #e63946;
  outline-offset: 2px;
}

/* Business Scan als onderscheiden primaire nav-actie (WEB-017 deel 2). */
.nav-links a.sf-nav-scan-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--sf-red-cta, #d63340), var(--sf-red-cta-grad-end, #c8202e));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 8px 18px;
  border-radius: 999px;
  transition: background 0.2s, transform 0.1s;
}
/* Hover = DONKERDER (hover→active-gradient), geen brightness(1.1) meer: die
   lichtte de vulling op tot 3,7:1 (audit 7A). */
.nav-links a.sf-nav-scan-btn:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--sf-red-cta-hover, #c8202e), var(--sf-red-cta-active, #b81d2a));
  filter: none;
}
.nav-links a.sf-nav-scan-btn:active { transform: scale(0.98); background: var(--sf-red-cta-active, #b81d2a); }
.nav-links a.sf-nav-scan-btn:focus-visible { outline: 2px solid var(--sf-red-cta-ring, #fff); outline-offset: 3px; }

/* Secundaire calculator-tekstlink in de nav (fix-ronde 1, adversarieel 9a): alleen in het
   mobiele sheet (≤900px, zie onder); op desktop staat dezelfde link in het mega-Scan-paneel. */
.nav-links a.sf-nav-calc-link { display: none; }

/* ── Desktop-chrome 901–1400px (fix-ronde 1, adversarieel a11y-responsive 11) ──
   1) Het mega-paneel (980px) hing gecentreerd onder de knop en viel daardoor links
      buiten beeld op 1280/1366-laptops. Het paneel is nu gepositioneerd t.o.v. de
      nav zelf (nav = containing block, .nav-mega static) en gecentreerd op de nav,
      met een harde viewport-grens. `top` compenseert de nav-padding zodat de
      afstand tot de knop ongeveer gelijk blijft (hover-brug ::before dekt hem).
   2) Sinds de Scan-pil paste de nav niet meer onder ±1194px (pil op 2 regels, logo
      geknepen tot 0px). Compacte nav in twee stappen: 1001–1200 en 901–1000. */
@media (min-width: 901px) {
  .nav-wrapper nav { position: relative; }
  .nav-wrapper .nav-mega { position: static; }
  .nav-wrapper .nav-mega .mega-menu {
    left: 50%;
    top: calc(100% - 7px);
    max-width: calc(100vw - 32px);
  }
  .nav-logo { flex: 0 0 auto; }
  .nav-links { flex-shrink: 0; }
  .nav-links a.sf-nav-scan-btn { white-space: nowrap; }
}
/* Slice 7A (adversarieel A16/M-1): de legacy blok-stylesheets (page-about, home-hero,
   page-platform, page-contact …) laden ná dit bestand en zetten .nav-links { gap: 28px },
   .nav-links a { font-size: 14px }, .nav-wrapper { width: calc(100% - 120px) } en
   .nav-logo img { height: 22px } met gelijke specificiteit terug — daardoor liep de nav op
   901–1050px buiten beeld op home/platform/legal/contact/about. Zwaardere selectors
   (body .nav-wrapper / .nav-wrapper .nav-links) laten de compacte nav op elk template winnen. */
@media (min-width: 901px) and (max-width: 1200px) {
  body .nav-wrapper { width: calc(100% - 64px); }
  body .nav-wrapper nav { padding: 16px 28px; }
  .nav-wrapper .nav-links { gap: 16px; }
  .nav-wrapper .nav-links > a, .nav-wrapper .nav-links > .nav-dropdown > .nav-dropdown-btn { font-size: 13px; white-space: nowrap; }
  .nav-wrapper .nav-links a.sf-nav-scan-btn { font-size: 12px; padding: 7px 14px; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  body .nav-wrapper { width: calc(100% - 40px); }
  body .nav-wrapper nav { padding: 14px 20px; }
  .nav-wrapper .nav-links { gap: 12px; }
  .nav-wrapper .nav-logo img { height: 18px; }
}

/* Mega-menu: vierde kolom = het rood omrande Scan-paneel (B6). Het enige rode
   vlak in het menu; de drie gebiedskolommen blijven zoals in Slice 3. */
.nav-mega .mega-menu {
  grid-template-columns: repeat(3, 1fr) minmax(230px, 0.95fr);
  min-width: 980px;
}
@media (max-width: 1100px) {
  /* Smalle desktops: twee kolommen, het Scan-paneel wordt de vierde cel. */
  .nav-mega .mega-menu { grid-template-columns: repeat(2, 1fr); min-width: 680px; }
}
.mega-menu .mega-col--scan {
  border: 1px solid rgba(230,57,70,0.55);
  background: rgba(230,57,70,0.06);
  border-radius: 12px;
  padding: 16px 16px 14px;
  align-self: stretch;
}
.mega-menu .mega-col--scan:hover { background: rgba(230,57,70,0.09); }
.mega-menu .mega-col--scan h6 { margin: 0 0 8px; padding: 0; min-height: 0; }
.mega-menu .mega-col--scan h6::after { display: none; }
.mega-menu .mega-scan__lead { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #c9cbd6; }
.mega-menu a.mega-scan__btn {
  display: inline-block;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--sf-red-cta, #d63340), var(--sf-red-cta-grad-end, #c8202e));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: 999px;
  white-space: normal;
  text-align: center;
  transition: background 0.2s;
}
.mega-menu a.mega-scan__btn:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--sf-red-cta-hover, #c8202e), var(--sf-red-cta-active, #b81d2a));
  filter: none;
}
.mega-menu a.mega-scan__btn:active { background: var(--sf-red-cta-active, #b81d2a); }
.mega-menu a.mega-scan__btn:focus-visible { outline: 2px solid var(--sf-red-cta-ring, #fff); outline-offset: 3px; }
.mega-menu a.mega-scan__link {
  display: inline-block;
  margin-top: 10px;
  padding: 0;
  font-size: 12.5px;
  color: #c9cbd6;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  white-space: normal;
}
.mega-menu a.mega-scan__link:hover { color: #fff; background: transparent; }

/* ── Slice 7A — mega-menu polish (besluit A, T-03) ───────────────────────
   DOM per gebiedskolom: <h6>{titel}</h6><p class="mega-promise">{belofte}</p><ul>…
   De belofte staat ONDER de titel als gedempte zin (subordinaat; typografie
   gelijkgetrokken met de Scan-paneel-lead: 13px, #c9cbd6), maximaal twee
   regels met een vaste hoogte van twee regels, zodat de drie dienstlijsten op
   één lijn beginnen — ook op 901–1100px in het 2-kolomsgrid. De rode
   ::after-streep onder de h6 is vervangen door een gedempte divider bóven de
   dienstlijst. Het Scan-paneel (.mega-col--scan) behoudt zijn eigen h6-regels
   (hogere specificiteit, zie hierboven). */
.mega-col:not(.mega-col--scan) h6 {
  margin: 0 0 6px;
  padding: 0;
  min-height: 0;
  line-height: 1.25;
}
.mega-col h6::after { display: none; }
.mega-col .mega-promise {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 4px 0 12px;
  padding: 0;
  min-height: 2.9em; /* 2 regels × 1.45 */
  font-family: var(--sf-font-body, "Inter"), sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: #c9cbd6;
}
.mega-col > ul {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 8px;
}

/* Meeting-modal opties (B11/M-05): de optielabels erfden op blok-loze pagina's
   de tailwind-bodykleur (#1f2937 op #161616 = 1,25:1) en misten hun layout;
   de blok-CSS (about-stats e.a.) gaf #aaa. Hier chrome-breed en expliciet:
   #e0e0e0 op #1e1e1e = 11,5:1. Specificiteit via #meetingModal wint van de
   blok-CSS, zodat de modal op élke pagina hetzelfde is. */
#meetingModal .modal-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#meetingModal .modal-option { position: relative; }
#meetingModal .modal-option input { position: absolute; opacity: 0; width: 0; height: 0; }
#meetingModal .modal-option label {
  display: flex; align-items: center; gap: 9px;
  background: #1e1e1e; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  padding: 9px 12px; font-size: 12.5px; color: #e0e0e0; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s; user-select: none; line-height: 1.3;
}
#meetingModal .modal-option label::before {
  content: ''; width: 14px; height: 14px; min-width: 14px;
  border: 1.5px solid rgba(255,255,255,0.3); border-radius: 50%;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
#meetingModal .modal-option input[type="checkbox"] + label::before { border-radius: 4px; }
#meetingModal .modal-option input[type="radio"]:checked + label::before { background: #e63946; border-color: #e63946; box-shadow: inset 0 0 0 3px #1e1e1e; }
#meetingModal .modal-option input[type="checkbox"]:checked + label::before { background: #e63946; border-color: #e63946; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px; }
#meetingModal .modal-option input:checked + label { border-color: rgba(230,57,70,0.45); background: rgba(230,57,70,0.07); color: #fff; }
#meetingModal .modal-option input:focus-visible + label { outline: 2px solid #e63946; outline-offset: 2px; }
#meetingModal .modal-option label:hover { border-color: rgba(255,255,255,0.22); color: #fff; }
/* De '(meerdere keuzes mogelijk)'-hint stond inline op #666 (3,2:1); #9a9a9a = 6,4:1. */
#meetingModal label > span { color: #9a9a9a !important; }

/* ── Mobiel (≤900px): Scan eerst, uitklapmenu's ingeklapt, inert sheet ── */
@media (max-width: 900px) {
  :root { --sf-nav-offset: 96px; }

  /* Het Scan-paneel zit al als eerste item in het sheet; niet dubbel tonen. */
  .mega-menu .mega-col--scan { display: none !important; }

  /* Slice 7A (T-04): in het sheet is de gebiedstitel 16px/800 zonder kapitalen,
     de belofte een leesbare zin (13px/400, mag afbreken, geen clamp) en de
     dienstlinks 16px/600 — gebiedsnaam ≥ dienstnaam. !important omdat de
     legacy mobiele mega-regels bovenin dit bestand zelf !important dragen. */
  .mega-col h6 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: -0.1px !important;
    color: #fff !important;
    margin: 0 0 4px !important;
  }
  .mega-col .mega-promise {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    min-height: 0 !important;
    max-width: 100%;
    margin: 0 0 10px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: #c9cbd6 !important;
  }
  .mega-col > ul { border-top: 1px solid rgba(255,255,255,0.08) !important; padding-top: 6px !important; }
  .mega-col ul li a .mega-name { font-size: 16px !important; font-weight: 600 !important; }

  /* Scan als EERSTE item in het sheet (B6/M-03), witte tekst op de rode pil,
     geen scheidingslijn, ≥48px hoog. Overrulet de generieke
     .nav-links > a-regels hierboven (die !important dragen). */
  .nav-links > a.sf-nav-scan-btn {
    order: -1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 240px;
    min-height: 48px;
    margin: 0 auto 14px;
    padding: 12px 28px !important;
    font-size: 16px !important;
    color: #fff !important;
    border-bottom: 0 !important;
  }
  .nav-links > a.sf-nav-scan-btn:hover,
  .nav-links > a.sf-nav-scan-btn:active { color: #fff !important; }

  /* Calculator direct bereikbaar op mobiel (fix-ronde 1, adversarieel 9a): secundaire
     tekstlink direct onder de Scan-pil (order -1, DOM-volgorde ná de pil), gedempt,
     onderstreept, ≥44px tap-target (B11/M-10). De pil blijft de enige rode primaire. */
  .nav-links > a.sf-nav-calc-link {
    order: -1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: 44px;
    margin: -6px auto 8px;
    padding: 6px 14px !important;
    font-size: 15px !important;
    color: #bbb !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    border-bottom: 0 !important;
  }
  .nav-links > a.sf-nav-calc-link:hover,
  .nav-links > a.sf-nav-calc-link:active { color: #fff !important; }
  .nav-links > a.sf-nav-calc-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }

  /* Uitklapmenu's (diensten, contact en sinds Ronde 7A.3 ook de taalwisselaar)
     starten INGEKLAPT en zijn aanklikbaar; het nav-script van de chrome toggelt
     .open + aria-expanded. */
  .nav-links .nav-dropdown .nav-dropdown-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  .nav-links .nav-dropdown:not(.open) .dropdown-menu { display: none !important; }

  /* Gesloten sheet: niets zichtbaar of focusbaar. De generieke mobiele regel
     .dropdown-menu{visibility:visible!important} lekte de menulinks terug in
     de tab-volgorde (M-02); het nav-script zet bovendien `inert`. */
  .nav-links:not(.nav-open) .dropdown-menu,
  .nav-links:not(.nav-open) .mega-menu { visibility: hidden !important; }

  /* Hamburger (M-07): 44×44-hitbox via padding, zonder layoutverschuiving
     (negatieve marges houden de visuele 26×18-strepen op hun plek). */
  .nav-hamburger {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 13px 9px;
    margin: -13px -9px;
  }
  .nav-hamburger:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 8px; }

  /* Secundaire tekstlinks (B11/M-10): tap-target ≥44px. */
  .sf-pricing__journey-secondary,
  .sf-plat-price__link,
  .sf-pricing__cta-secondary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
  }

  /* Sticky-onderruimte (M-08): zie de viewport-onafhankelijke regel bij
     .sf-sticky-book hierboven — geldt ook hier. */
}

/* ═══ Slice 6 — BLOKKEN (pricing/platform; SPA-/blok-agent) ═════════ */

/* Compacte Platform-prijsregel (v2 van de band): prijs ondersteunt, verkoopt niet. */
.sf-plat-price--compact .sf-plat-price__card { padding: 22px 26px 20px; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.sf-plat-price--compact .sf-plat-price__facts { flex: 1 1 380px; margin: 0; color: #e0e0e0; font-size: 14.5px; line-height: 1.7; }
.sf-plat-price--compact .sf-plat-price__facts strong { color: #fff; }
/* B9: de twee feitenregels (voorheen inline styles) — staffel/opzegbaarheid + het principe. */
.sf-plat-price--compact .sf-plat-price__facts-main { margin: 10px 0 0; }
.sf-plat-price--compact .sf-plat-price__facts-sub { margin: 6px 0 0; font-size: 13px; color: #8a8da0; }
.sf-plat-price--compact .sf-plat-price__ctas { justify-content: flex-start; margin: 0; }

/* Homepage-minimum (B10): twee hero-CTA's — Scan rood, gesprek outline. Alleen de
   knoppenrij; hero, teaser, slot-CTA en sticky blijven ongemoeid. */
.hero .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 40px; position: relative; z-index: 2; }
.hero .hero-ctas .btn-primary, .hero .hero-ctas .btn-outline { margin-bottom: 0 !important; }
.hero .hero-ctas .btn-outline { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 15px 28px; font-size: 14.5px; font-weight: 600; border-radius: 10px; }
@media (max-width: 980px) { .hero .hero-ctas { justify-content: center; } }
@media (max-width: 900px) {
  .hero .hero-ctas .btn-primary, .hero .hero-ctas .btn-outline { display: inline-flex !important; width: auto !important; }
}

/* Pricing-pagina v2: scan-first-hero + compacte feiten. */
.sf-pricing__journey-ctas { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 26px 0 8px; }
.sf-pricing__journey-secondary { color: #c9cbd6; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.sf-pricing__journey-secondary:hover { color: #fff; }
.sf-pricing__facts { max-width: 760px; margin: 0 auto 56px; }
.sf-pricing__facts-title { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #8a8da0; margin: 0 0 16px; }
.sf-pricing__facts-list { list-style: none; padding: 0; margin: 0; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; }
.sf-pricing__facts-list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; font-size: 14.5px; color: #e0e0e0; background: #111114; }
.sf-pricing__facts-list li + li { border-top: 1px solid rgba(255,255,255,0.08); }
/* Labelkolom mag krimpen; de prijskolom heeft een vaste breedte zodat de drie rijen
   uitlijnen. Geen nowrap op .amount: de geneste .terms-regel (voorwaarden) moet kunnen
   afbreken — anders wordt hij op mobiel door overflow:hidden afgekapt en knijpt hij op
   desktop de labelkolom (adversariële review aanval 8). */
.sf-pricing__facts-list li > span:first-child { flex: 1 1 auto; min-width: 0; }
.sf-pricing__facts-list .amount { color: #fff; font-weight: 800; flex: 0 0 300px; }
.sf-pricing__facts-list .terms { display: block; white-space: normal; font-size: 12px; color: #8a8da0; font-weight: 400; margin-top: 2px; }
@media (max-width: 640px) { .sf-pricing__facts-list li { flex-direction: column; gap: 4px; } .sf-pricing__facts-list .amount { flex-basis: auto; } }

/* ═══ Slice 7A — platform-areas (thema-agent B; besluit B + G-3) ═══════════════
   Drie-gebieden-verhaal "Eén platform voor je hele bedrijf" op /platform/ ×7,
   direct ná #ft-difference en vóór #ft-apps. Volgt het geaccepteerde audit-
   voorstel (audit7-three-areas-proposal.css, prefix .sf-plat-story → .sf-plat-areas).
   Hergebruikt .section-badge/.section-title/.page-deco uit de platform-blok-CSS
   (beide render-paden laden die); eigen, expliciete .section-inner-padding zoals
   de andere v3-banden. Contrast: #8a8da0 op de kaart ≥ 5,5:1, #c9cbd6 ≥ 11:1.
   Geen nieuwe libraries/iconen: chips hergebruiken de platform-icoon-SVG's. */
.sf-plat-areas { background: #0a0a0a; position: relative; overflow: hidden; padding: 0 40px; }
.sf-plat-areas > .page-deco { left: -110px; top: 60%; transform: translateY(-50%) rotate(-8deg); width: 320px; }
.sf-plat-areas .section-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 100px 0 48px; }
.sf-plat-areas .section-title { margin-bottom: 48px; }
.sf-plat-areas__accent { color: #e63946; }
.sf-plat-areas__rail { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sf-plat-areas__rail::before { content: ""; position: absolute; left: 8%; right: 8%; top: 15px; height: 1px; background: linear-gradient(90deg, transparent, rgba(230,57,70,0.55) 18%, rgba(230,57,70,0.55) 82%, transparent); pointer-events: none; }
.sf-plat-areas__area { position: relative; min-width: 0; padding: 46px 24px 22px; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); display: flex; flex-direction: column; gap: 10px; }
.sf-plat-areas__node { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: #0a0a0a; border: 1px solid rgba(230,57,70,0.55); display: grid; place-items: center; }
.sf-plat-areas__node i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #e63946; box-shadow: 0 0 8px #e63946; }
.sf-plat-areas__area h3 { font-size: 22px; font-weight: 800; color: #fff; margin: 0; line-height: 1.2; }
.sf-plat-areas__outcome { font-size: 15px; color: rgba(255,255,255,0.85); line-height: 1.55; margin: 0; }
.sf-plat-areas__helps { font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #8a8da0; margin: 10px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.sf-plat-areas__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sf-plat-areas__chips li { margin: 0; padding: 0; }
.sf-plat-areas__chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 11px 5px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: #fff; text-decoration: none; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); transition: border-color .2s, background-color .2s; }
.sf-plat-areas__chip:hover { color: #fff; border-color: rgba(230,57,70,0.55); background: rgba(230,57,70,0.10); }
.sf-plat-areas__chip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-color: rgba(230,57,70,0.55); }
.sf-plat-areas__icon { width: 18px; height: 18px; flex: 0 0 auto; }
.sf-plat-areas__chip small { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #c9cbd6; margin-left: 2px; }
/* Knowledge = inbegrepen: dezelfde groene markering als de inbegrepen-container in de catalogus. */
.sf-plat-areas__chip--included { border-color: rgba(74,222,128,0.4); }
.sf-plat-areas__chip--included small { color: #a7f3d0; }
/* Customer Portal = verbonden oplossing (geen app, geen prijs — D2): gestippeld, transparant, met pijl. */
.sf-plat-areas__chip--solution { border-style: dashed; border-color: rgba(255,255,255,0.28); background: transparent; }
.sf-plat-areas__chip--solution:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.45); }
.sf-plat-areas__chip-mark { color: #c9cbd6; font-size: 12px; line-height: 1; }
/* G-3: gedempte lensregel ≤ 13px onderaan elke kaart — gelokaliseerd label + Engelse lensnaam. */
.sf-plat-areas__lens { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12.5px; line-height: 1.5; font-weight: 600; color: #c9cbd6; }
.sf-plat-areas__lens-label { display: inline-block; margin-right: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #8a8da0; }
.sf-plat-areas__cross { max-width: 880px; margin: 40px auto 0; text-align: center; font-size: 14.5px; line-height: 1.7; color: #c9cbd6; }
.sf-plat-areas__handoff { text-align: center; margin: 12px 0 0; }
.sf-plat-areas__handoff a { color: #c9cbd6; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.sf-plat-areas__handoff a:hover, .sf-plat-areas__handoff a:focus-visible { color: #fff; }
.sf-plat-areas__handoff a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
@media (max-width: 900px) {
  .sf-plat-areas { padding: 0 20px; }
  .sf-plat-areas > .page-deco { display: none; }
  /* !important: de globale mobiele regel (.section-inner { padding: 60px 20px !important }, MOBILE RESPONSIVE)
     zou anders winnen; de opdracht vraagt een expliciete 80px 0 40px zoals de andere v3-banden. */
  .sf-plat-areas .section-inner { padding: 80px 0 40px !important; }
  .sf-plat-areas .section-title { margin-bottom: 36px; }
  .sf-plat-areas__rail { grid-template-columns: 1fr; gap: 14px; }
  .sf-plat-areas__rail::before { left: 27px; right: auto; top: 6%; bottom: 6%; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(230,57,70,0.55) 12%, rgba(230,57,70,0.55) 88%, transparent); }
  .sf-plat-areas__node { left: 16px; top: 22px; transform: none; }
  .sf-plat-areas__area { padding: 22px 20px 20px 52px; }
  .sf-plat-areas__area h3 { font-size: 20px; }
  .sf-plat-areas__cross { margin-top: 30px; font-size: 14px; }
}
@media (max-width: 480px) { .sf-plat-areas__area { padding-left: 46px; padding-right: 16px; } }
@media (prefers-reduced-motion: reduce) { .sf-plat-areas__chip { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Slice 7A-visual — Platform-compositie (Tony, 2026-09-08)
   1) Customer Portal als brug: klantwereld → Portal → Platform-apps, direct ná
      #ft-areas en vóór #ft-apps (was: losse band ná de FAQ). Compositie
      geadapteerd van de Scan-landing (PortalDocking: koele klantzijde, rode
      organisatiezijde, luchtsluis met twee ringen en een corridor waarin één
      verzoek naar rechts en één status terug reist). Geen prijs, geen data-app.
   2) AI als laag: op desktop een verticale kolom naast de catalogus die alle
      app-groepen van boven tot onder overspant (.apps-layout, sticky inhoud);
      ≤ 999px een compacte horizontale strook boven de kaarten. Nooit een tegel.
   3) Minder lege ruimte rond beide (apps-sectie 64/72 i.p.v. 100/100).
   Contrast: #c9cbd6 ≥ 11:1, #9a9db0 ≥ 5,6:1, #fca5a5 ≥ 8:1 op de donkere vlakken.
   ═══════════════════════════════════════════════════════════════════════════ */
.sf-plat-portal { background: #0a0a0a; position: relative; padding: 0 40px; }
.sf-plat-portal .section-inner { max-width: 1200px; margin: 0 auto; padding: 8px 0 52px; }
.sf-plat-portal .section-title { margin-bottom: 34px; }
.sf-plat-portal .section-title h2 { font-size: clamp(28px, 3.4vw, 42px); }
.sf-plat-portal .section-title p { max-width: 760px; }
.sf-plat-portal__stage { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.15fr) minmax(240px, 1fr); align-items: center; position: relative; }
.sf-plat-portal__side { border-radius: 16px; padding: 22px 22px 20px; min-width: 0; }
.sf-plat-portal__side--customer { background: linear-gradient(160deg, rgba(14,26,58,0.65), rgba(10,12,24,0.45)); border: 1px solid rgba(184,214,255,0.22); }
.sf-plat-portal__side--org { background: linear-gradient(200deg, rgba(46,10,16,0.55), rgba(10,12,24,0.45)); border: 1px solid rgba(230,57,70,0.34); }
.sf-plat-portal__sidelabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; line-height: 1.4; }
.sf-plat-portal__side--customer .sf-plat-portal__sidelabel { color: #b8d6ff; }
.sf-plat-portal__side--org .sf-plat-portal__sidelabel { color: #fca5a5; }
.sf-plat-portal__requests, .sf-plat-portal__bays { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sf-plat-portal__request { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 11px 14px; font-size: 14.5px; line-height: 1.45; color: #f0f0f0; }
.sf-plat-portal__bay { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 8px 12px; font-size: 14.5px; }
.sf-plat-portal__bay a { display: inline-flex; align-items: center; gap: 9px; min-height: 30px; color: #e6e6e6; text-decoration: none; }
.sf-plat-portal__bay a:hover { color: #fff; }
.sf-plat-portal__bay a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.sf-plat-portal__bay[data-active] { border-color: rgba(230,57,70,0.7); box-shadow: inset 0 0 0 1px rgba(230,57,70,0.25); }
.sf-plat-portal__bay[data-active] a { color: #fff; font-weight: 600; }
.sf-plat-portal__bayicon { width: 18px; height: 18px; flex: 0 0 auto; }
.sf-plat-portal__bayactive { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fca5a5; white-space: nowrap; }
.sf-plat-portal__sidenote { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #9a9db0; }
/* de sluis */
.sf-plat-portal__gate { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 8px; min-width: 0; }
.sf-plat-portal__airlock { position: relative; display: flex; align-items: center; justify-content: center; min-height: 190px; width: 100%; }
.sf-plat-portal__ring { width: 120px; height: 120px; border-radius: 50%; border: 1.5px solid rgba(230,57,70,0.55); flex: none; box-shadow: 0 0 34px rgba(230,57,70,0.18); }
.sf-plat-portal__ring--left { margin-right: -46px; border-color: rgba(184,214,255,0.5); box-shadow: 0 0 34px rgba(184,214,255,0.12); }
.sf-plat-portal__ring--right { margin-left: -46px; }
.sf-plat-portal__corridor { position: relative; z-index: 1; flex: 1; max-width: 320px; border-radius: 999px; border: 1px solid rgba(230,57,70,0.4); background: rgba(5,6,16,0.88); padding: 12px 18px; display: grid; gap: 8px; }
.sf-plat-portal__flow { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.sf-plat-portal__flow em { font-style: normal; color: #c9cbd6; }
.sf-plat-portal__flow i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sf-plat-portal__flow--in i { background: #e63946; animation: sf-plat-flow-in 2.6s infinite; }
.sf-plat-portal__flow--back { justify-content: flex-end; }
.sf-plat-portal__flow--back i { background: #b8d6ff; animation: sf-plat-flow-back 2.6s infinite; }
.sf-plat-portal__flow i:nth-child(2) { animation-delay: 0.28s; }
.sf-plat-portal__flow i:nth-child(3) { animation-delay: 0.56s; }
.sf-plat-portal__flow--back i:nth-of-type(1) { animation-delay: 1.3s; }
.sf-plat-portal__flow--back i:nth-of-type(2) { animation-delay: 1.58s; }
.sf-plat-portal__flow--back i:nth-of-type(3) { animation-delay: 1.86s; }
@keyframes sf-plat-flow-in { 0% { opacity: 0.15; transform: translateX(-6px); } 45% { opacity: 1; } 100% { opacity: 0.15; transform: translateX(6px); } }
@keyframes sf-plat-flow-back { 0% { opacity: 0.15; transform: translateX(6px); } 45% { opacity: 1; } 100% { opacity: 0.15; transform: translateX(-6px); } }
.sf-plat-portal__label { text-align: center; margin-top: 4px; max-width: 100%; }
.sf-plat-portal__label strong { display: block; font-size: 19px; font-weight: 800; color: #fff; }
.sf-plat-portal__label span { display: block; font-size: 13.5px; color: #c9cbd6; margin-top: 2px; }
.sf-plat-portal__label em { display: block; font-size: 12px; font-style: normal; line-height: 1.45; color: #9a9db0; margin-top: 6px; }
/* regel, cta's, handoff naar de catalogus */
.sf-plat-portal__rule { max-width: 760px; margin: 32px auto 0; border-left: 2px solid #e63946; padding: 4px 0 4px 20px; }
.sf-plat-portal__rule strong { display: block; font-size: 17px; color: #fff; }
.sf-plat-portal__rule p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.65; color: #c9cbd6; }
.sf-plat-portal__ctas { display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: center; align-items: center; margin: 28px 0 0; }
.sf-plat-portal__link { display: inline-flex; align-items: center; min-height: 44px; color: #c9cbd6; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
button.sf-plat-portal__link { color: #c9cbd6; } /* de knopvariant erft anders de UA-knopkleur */
.sf-plat-portal__link:hover, .sf-plat-portal__link:focus-visible { color: #fff; }
.sf-plat-portal__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.sf-plat-portal__handoff { text-align: center; margin: 8px 0 0; }
.sf-plat-portal__handoff a { color: #c9cbd6; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.sf-plat-portal__handoff a:hover, .sf-plat-portal__handoff a:focus-visible { color: #fff; }
.sf-plat-portal__handoff a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.sf-plat-portal__handoff::after { content: ""; display: block; width: 1px; height: 36px; margin: 6px auto 0; background: linear-gradient(180deg, rgba(230,57,70,0.55), transparent); }
@media (max-width: 1100px) {
  .sf-plat-portal__stage { grid-template-columns: minmax(200px, 1fr) minmax(220px, 1fr) minmax(200px, 1fr); }
  .sf-plat-portal__side { padding: 18px 16px 16px; }
  .sf-plat-portal__ring { width: 96px; height: 96px; }
  .sf-plat-portal__ring--left { margin-right: -36px; }
  .sf-plat-portal__ring--right { margin-left: -36px; }
  .sf-plat-portal__corridor { padding: 10px 14px; }
}
@media (max-width: 900px) {
  .sf-plat-portal { padding: 0 20px; }
  .sf-plat-portal .section-inner { padding: 0 0 40px !important; }
  .sf-plat-portal .section-title { margin-bottom: 26px; }
  .sf-plat-portal__stage { grid-template-columns: 1fr; gap: 14px; }
  .sf-plat-portal__side { padding: 18px 16px 16px; }
  .sf-plat-portal__gate { padding: 4px 0; }
  .sf-plat-portal__airlock { min-height: 118px; }
  .sf-plat-portal__ring { width: 84px; height: 84px; }
  .sf-plat-portal__ring--left { margin-right: -30px; }
  .sf-plat-portal__ring--right { margin-left: -30px; }
  .sf-plat-portal__corridor { max-width: 300px; }
  .sf-plat-portal__rule { margin-top: 24px; }
  .sf-plat-portal__ctas { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { .sf-plat-portal__flow i { animation: none; opacity: 0.8; } }

/* AI als laag in de catalogus (#ft-apps): kolom naast de groepen, van boven tot onder. */
.apps-layout { display: grid; grid-template-columns: minmax(0, 1fr) 224px; gap: 24px; align-items: stretch; }
.apps-layout > .apps-grid-v3 { min-width: 0; grid-column: 1; grid-row: 1; }
/* De laag staat in de DOM vóór de grid (mobiel: erboven), op desktop expliciet in kolom 2. */
.apps-layout > .sf-plat-ai--layer { grid-column: 2; grid-row: 1; }
.sf-plat-ai--layer { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,255,255,0.14); background: linear-gradient(180deg, rgba(230,57,70,0.12) 0%, rgba(255,255,255,0.045) 45%, rgba(230,57,70,0.07) 100%); }
.sf-plat-ai__inner { position: sticky; top: 112px; z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 20px 26px; }
.sf-plat-ai__badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; font-size: 17px; font-weight: 800; letter-spacing: 1px; color: #fff; background: rgba(230,57,70,0.25); border: 1px solid rgba(230,57,70,0.5); }
.sf-plat-ai__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sf-plat-ai__tag { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #fca5a5; }
.sf-plat-ai__text h3 { font-size: 18px; font-weight: 800; color: #fff; margin: 0; line-height: 1.25; }
.sf-plat-ai__text p { font-size: 13.5px; color: #c9cbd6; line-height: 1.6; margin: 0; }
.sf-plat-ai__thread { position: absolute; inset: 0; pointer-events: none; }
.sf-plat-ai__thread span { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(230,57,70,0.35), transparent); animation: sf-ai-drift 7s ease-in-out infinite; }
.sf-plat-ai__thread span:nth-child(1) { left: 18%; animation-delay: 0s; }
.sf-plat-ai__thread span:nth-child(2) { left: 42%; animation-delay: 1.6s; }
.sf-plat-ai__thread span:nth-child(3) { left: 66%; animation-delay: 3.2s; }
.sf-plat-ai__thread span:nth-child(4) { left: 88%; animation-delay: 4.8s; }
@keyframes sf-ai-drift { 0%, 100% { opacity: 0.25; transform: translateY(-4%); } 50% { opacity: 0.9; transform: translateY(4%); } }
@media (prefers-reduced-motion: reduce) { .sf-plat-ai__thread span { animation: none; opacity: 0.35; } }
@media (max-width: 1100px) { .apps-layout { grid-template-columns: minmax(0, 1fr) 208px; gap: 20px; } }
@media (max-width: 999px) {
  /* tablet/mobiel: compacte horizontale strook boven de kaarten, geen horizontale overflow */
  .apps-layout { display: block; }
  .sf-plat-ai--layer { margin: 0 0 22px; }
  .sf-plat-ai__inner { position: static; flex-direction: row; align-items: center; gap: 16px; padding: 16px 18px; }
  .sf-plat-ai__badge { width: 46px; height: 46px; font-size: 15px; border-radius: 13px; }
  .sf-plat-ai__text h3 { font-size: 16px; }
  .sf-plat-ai__text p { font-size: 13px; }
  .sf-plat-ai__thread { display: none; }
}
@media (max-width: 560px) { .sf-plat-ai__inner { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* ══════════════════════════════════════════════════════════════════════════
   Slice 7C1 — Applicatie-detailpagina's (framework), gecorrigeerd in 7C1b.
   Eén set stijlen voor alle Platform-applicaties: de pagina's verschillen in
   inhoud, nooit in opmaak. Kleur draagt nergens alleen betekenis (statussen
   hebben altijd tekst), en alles blijft leesbaar tot 360 px.

   7C1b — het raamwerk ERFT van de site in plaats van een eigen laag te maken:
   - Typografie: Tailwind-preflight zet h1..h6 op font-weight:inherit, dus elke
     SalesFision-pagina herstelt de kopgewichten zelf (.platform-hero-text h1,
     .section-title h2). Dat deed dit raamwerk niet — vandaar koppen op 400
     terwijl de rest van de site op 800 staat. Hier hersteld met dezelfde
     waarden: 800, negatieve letterspatiëring, dezelfde regelhoogtes.
   - Containers: 1280 px standaard (gelijk aan de Platform-hero), 1400 px voor
     brede onderdelen (de site-standaard van .section-inner).
   - Knoppen: één actiegroep met exact de normalisatie van .platform-hero-ctas
     (min-height 50, line-height 1.15, gelijke padding) zodat primair, secundair
     en tekstlink één rij vormen.
   - Vaste nav: de eerste sectie begint op --sf-nav-offset (het bestaande token)
     en elke sectie krijgt scroll-margin-top, zodat een anker nooit achter de
     nav landt. Geen eigen z-index-lagen: de sectiestapeling komt uit
     section { position: relative; z-index: 1 } van de site, de nav staat op
     1000 en blijft dus altijd bovenop.
   ══════════════════════════════════════════════════════════════════════════ */
.sf-appd {
  /* Containerbreedtes van de site: tekst 1280, brede onderdelen 1400. */
  --sf-appd-w: 1280px;
  --sf-appd-w-wide: 1400px;
  background: #0d0d0d;
  color: #d7d7db;
}
/* Geen tweede positioneringscontext: section { position: relative; z-index: 1 }
   staat al in de gedeelde site-CSS. Wel een scroll-marge, zodat ankerlinks
   onder de vaste nav uitkomen in plaats van erachter. */
.sf-appd section,
.sf-appd [id] { scroll-margin-top: var(--sf-nav-offset, 120px); }

.sf-appd .section-inner { max-width: var(--sf-appd-w); padding-top: 64px; padding-bottom: 64px; }
.sf-appd .section-inner--wide { max-width: var(--sf-appd-w-wide); }

/* Typografie — dezelfde schaal en gewichten als de rest van SalesFision.
   (Inter wordt geladen op 400/500/600/700; 800 rendert daardoor als 700, exact
   zoals op de homepage en /platform/. Geen eigen font-stack en geen eigen
   font-family: het raamwerk erft de bodyfont van de site.) */
.sf-appd h1 { font-size: clamp(40px, 5vw, 72px); font-weight: 800; line-height: 1.05; letter-spacing: -1.5px; color: #fff; margin: 0 0 22px; max-width: 20ch; }
.sf-appd h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; line-height: 1.12; letter-spacing: -0.8px; color: #fff; margin: 12px 0 0; }
.sf-appd h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: #fff; margin: 0 0 8px; letter-spacing: -0.2px; }
.sf-appd h4 { font-size: 15px; font-weight: 700; line-height: 1.35; color: #fff; margin: 0 0 12px; }
.sf-appd p { margin: 0 0 12px; }
.sf-appd-lead { max-width: 66ch; font-size: 16px; line-height: 1.7; color: #b9b9c2; margin-top: 14px; }
.sf-appd-note { margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: #9a9aa6; max-width: 72ch; }
.sf-appd-note--strong { color: #c9c9d2; border-left: 2px solid var(--sf-red-cta, #d63340); padding-left: 14px; }
.sf-appd-accent { color: var(--sf-red-cta, #d63340); }
.sf-appd-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.sf-appd-link:hover { color: var(--sf-red-cta, #d63340); }
.sf-appd :focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* Banden: vier rustpunten in het verticale ritme (probleem, productinterface,
   slot). Een overgeslagen sectie laat twee banden aan elkaar groeien
   — dat blijft correct, want de band draagt geen betekenis. */
.sf-appd-problem, .sf-appd-ui, .sf-appd-cta { background: #0a0a0c; }

/* Kruimelpad — in de normale documentflow, binnen de hero-container.
   De site-CSS stijlt het BARE element nav (de vaste hoofdnavigatie: flex,
   pill-padding, radius 50px). Een kruimelpad is óók een nav, dus die opmaak
   wordt hier expliciet teruggezet; zonder deze reset leest het kruimelpad als
   een tweede navigatiebalk. */
.sf-appd__crumbs {
  display: block; position: static; width: auto; max-width: none; transform: none;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; box-shadow: none; margin: 0 0 22px; transition: none;
  /* !important tegenover de globale mobiele regel
     (nav { padding: 13px 20px !important; border-radius: 40px !important }
     onder MOBILE RESPONSIVE), die op de vaste hoofdnavigatie mikt. */
  border-radius: 0 !important;
  padding: 0 !important;
}
.sf-appd__crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: 13px; color: #9a9aa6; }
.sf-appd__crumbs li + li::before { content: "\203A"; margin-right: 8px; color: #55555f; }
.sf-appd__crumbs a { color: #b9b9c2; text-decoration: none; }
.sf-appd__crumbs a:hover { color: #fff; text-decoration: underline; }
.sf-appd__crumbs [aria-current="page"] { color: #fff; }

/* Hero — begint onder de vaste nav (token uit de Slice-6-chrome). */
.sf-appd-hero .section-inner { padding-top: calc(var(--sf-nav-offset, 120px) + 24px); padding-bottom: 56px; }
.sf-appd-hero__id { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.sf-appd-hero__icon { width: 40px; height: 40px; border-radius: 10px; background: #16161b; padding: 7px; border: 1px solid #26262e; }
.sf-appd-hero__lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; color: #c3c3cc; max-width: 62ch; }
.sf-appd-hero__facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13.5px; color: #9c9ca6; }
.sf-appd-hero__facts li { position: relative; padding-left: 18px; }
.sf-appd-hero__facts li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-red-cta, #d63340); }

/* Actiegroep — één component voor hero, prijs en slot.
   Zelfde normalisatie als .platform-hero-ctas op /platform/: gelijke hoogte
   (align-items: stretch + min-height), gelijke padding en radius, en een
   tekstlink die optisch op dezelfde lijn staat. !important is nodig omdat de
   globale .btn-primary in deze stylesheet zelf met !important werkt. */
.sf-appd-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; margin: 26px 0 0; }
.sf-appd-actions .btn-primary,
.sf-appd-actions .btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px;
  padding: 14px 30px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.2px !important;
  border-radius: 8px !important;
  text-align: center;
  margin: 0 !important;
}
.sf-appd-actions .sf-appd-link { display: inline-flex; align-items: center; min-height: 50px; padding: 0 2px; }
.sf-appd-actions--links { gap: 10px 28px; margin-top: 28px; }
/* De volgende regel tekst botst niet tegen de knoppen (en niet tegen hun schaduw). */
.sf-appd-actions + p, .sf-appd-actions + ul { margin-top: 26px; }

/* Rasters en kaarten */
.sf-appd-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.sf-appd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-appd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-appd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-appd-card { background: #111116; border: 1px solid #23232b; border-radius: 14px; padding: 20px 22px; }
.sf-appd-card p { font-size: 15px; line-height: 1.65; color: #a9a9b4; margin: 0; }
.sf-appd-card ul { list-style: none; margin: 12px 0 0; padding: 0; }
.sf-appd-card li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 15px; line-height: 1.6; color: #a9a9b4; }
.sf-appd-card li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: #3d3d47; }
.sf-appd-card--caps { padding-bottom: 14px; }
.sf-appd-card--scope.is-app { border-color: rgba(214, 51, 64, 0.45); background: #131317; }
/* Slice 7C2c: de kolom die over de consultancydienst gaat, wijst door naar die
   dienstpagina in plaats van de uitleg te herhalen. De rechterkolom somt de
   applicatiefuncties niet meer op; zonder deze regel rekte de langere linker-
   kolom de rechter uit tot een halflege kaart. Elke kolom krijgt nu zijn
   eigen hoogte. */
.sf-appd-scope .sf-appd-grid--2 { align-items: start; }
.sf-appd-scope__more { margin: 14px 0 0; font-size: 14.5px; }
.sf-appd-kind { display: inline-block; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9aa6; border: 1px solid #2c2c35; border-radius: 999px; padding: 3px 10px; margin: 0 0 10px; }
.sf-appd-kind--solution { color: #e8c07a; border-color: rgba(232, 192, 122, 0.4); }
.sf-appd-kind--included { color: #7fc8a9; border-color: rgba(127, 200, 169, 0.4); }

/* Probleem */
.sf-appd-symptoms { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; max-width: 80ch; }
.sf-appd-symptoms li { position: relative; padding: 12px 16px 12px 40px; background: #111116; border: 1px solid #23232b; border-radius: 12px; font-size: 15px; line-height: 1.6; color: #b3b3bd; }
.sf-appd-symptoms li::before { content: "!"; position: absolute; left: 16px; top: 13px; width: 16px; height: 16px; border-radius: 50%; background: rgba(214, 51, 64, 0.16); color: var(--sf-red-cta, #d63340); font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* Werkstroom */
.sf-appd-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.sf-appd-steps li { position: relative; padding: 18px 22px 18px 64px; background: #111116; border: 1px solid #23232b; border-radius: 14px; }
.sf-appd-steps__n { position: absolute; left: 22px; top: 18px; width: 26px; height: 26px; border-radius: 8px; background: rgba(214, 51, 64, 0.14); color: var(--sf-red-cta, #d63340); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.sf-appd-steps p { font-size: 15px; line-height: 1.65; color: #a9a9b4; margin: 0; }

/* Productinterface */
.sf-appd-window { margin-top: 28px; border: 1px solid #23232b; border-radius: 16px; overflow: hidden; background: #101015; }
.sf-appd-window__bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: #16161c; border-bottom: 1px solid #23232b; }
.sf-appd-window__dots { display: inline-flex; gap: 6px; }
.sf-appd-window__dots i { width: 9px; height: 9px; border-radius: 50%; background: #2e2e38; display: block; }
.sf-appd-window__title { font-size: 13.5px; color: #d7d7db; font-weight: 600; }
.sf-appd-window__tag { margin-left: auto; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #9a9aa6; }
.sf-appd-panel + .sf-appd-panel { border-top: 1px solid #1d1d24; }
.sf-appd h3.sf-appd-panel__title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9aa6; margin: 0; padding: 14px 18px 0; }
.sf-appd-panel__body { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 18px; padding: 12px 18px 20px; align-items: start; }
.sf-appd-table__scroll { overflow-x: auto; }
.sf-appd-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.sf-appd-table th, .sf-appd-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #1d1d24; color: #b3b3bd; font-weight: 400; vertical-align: top; }
.sf-appd-table thead th { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #9a9aa6; border-bottom-color: #26262e; }
.sf-appd-table tbody th { color: #fff; font-weight: 600; }
.sf-appd-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; border: 1px solid; white-space: nowrap; }
.sf-appd-status--done { color: #7fc8a9; border-color: rgba(127, 200, 169, 0.45); background: rgba(127, 200, 169, 0.08); }
.sf-appd-status--busy { color: #8ab4f8; border-color: rgba(138, 180, 248, 0.45); background: rgba(138, 180, 248, 0.08); }
.sf-appd-status--wait { color: #d7d7db; border-color: #33333d; background: #17171d; }
.sf-appd-status--alert { color: #f0a1a8; border-color: rgba(214, 51, 64, 0.5); background: rgba(214, 51, 64, 0.1); }
.sf-appd-side { background: #131319; border: 1px solid #23232b; border-radius: 12px; padding: 16px 18px; }
.sf-appd-side dl { margin: 0; display: grid; gap: 10px; }
.sf-appd-side dt { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #9a9aa6; }
.sf-appd-side dd { margin: 2px 0 0; font-size: 14px; color: #d7d7db; }
.sf-appd-side__note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: #9a9aa6; }

/* Verbindingen */
.sf-appd-conn__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-appd-conn__item { background: #111116; border: 1px solid #23232b; border-radius: 14px; padding: 18px 20px; }
/* Slice 7C4a: een oneven laatste verbinding vult de rij, anders blijft er een
   halve kolom leeg. Op de bestaande pagina's (4 en 6 kaarten) doet dit niets. */
.sf-appd-conn__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sf-appd-conn__item--solution { border-color: rgba(232, 192, 122, 0.35); }
.sf-appd-conn__item--included { border-color: rgba(127, 200, 169, 0.32); }
.sf-appd-conn__route { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; font-size: 15px; color: #fff; font-weight: 600; }
.sf-appd-conn__arrow { color: var(--sf-red-cta, #d63340); }
.sf-appd-conn__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.sf-appd-conn__dir { font-size: 12.5px; color: #9a9aa6; }
.sf-appd-conn__item p:last-child { font-size: 15px; line-height: 1.65; color: #a9a9b4; margin: 0; }
/* Tweerichtingsverkeer: elke richting krijgt een eigen regel met de richting in
   woorden, zodat de pijl nooit de enige drager van betekenis is. */
.sf-appd-conn__ways { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sf-appd-conn__ways li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px 10px; align-items: start; font-size: 14.5px; line-height: 1.6; color: #a9a9b4; }
.sf-appd-conn__way-dir { color: #fff; font-weight: 600; }

/* Prijs */
.sf-appd-price__card { margin-top: 24px; border: 1px solid rgba(214, 51, 64, 0.45); background: #111114; border-radius: 16px; padding: 22px 26px; }
.sf-appd-price__main { font-size: 17px; line-height: 1.5; color: #fff; margin: 0; }
.sf-appd-price__sub { font-size: 14.5px; line-height: 1.6; color: #a9a9b4; margin: 10px 0 0; }
.sf-appd-card--incl { border-color: rgba(127, 200, 169, 0.32); }
.sf-appd-card--excl { border-color: #2c2c35; }
.sf-appd-price__links { font-size: 14.5px; }

/* Slot */
.sf-appd-cta h2 { max-width: 22ch; }
.sf-appd-back { margin: 26px 0 0; font-size: 14px; }

/* Responsief: 1280, 1000, 414, 390, 360 — nooit horizontale overflow. */
@media (max-width: 1180px) {
  .sf-appd .section-inner { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1000px) {
  .sf-appd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-appd-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-appd-panel__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  /* De richtingsregel krijgt een eigen regel: twee kolommen passen niet naast
     elkaar zodra de applicatienamen lang zijn. */
  .sf-appd-conn__ways li { grid-template-columns: minmax(0, 1fr); }
  /* !important: de globale mobiele regel .section-inner { padding: 60px 20px !important }
     (MOBILE RESPONSIVE) zou anders ook de hero-offset onder de vaste nav wissen. */
  .sf-appd .section-inner { padding: 52px 20px !important; }
  .sf-appd .section-inner--wide { padding-left: 20px !important; padding-right: 20px !important; }
  .sf-appd-hero .section-inner { padding-top: calc(var(--sf-nav-offset, 96px) + 20px) !important; padding-bottom: 44px !important; }
  .sf-appd-grid--2, .sf-appd-grid--3, .sf-appd-grid--4,
  .sf-appd-conn__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sf-appd h1 { font-size: 32px; letter-spacing: -0.8px; }
  .sf-appd h2 { font-size: 26px; letter-spacing: -0.4px; }
  /* Acties onder elkaar, gelijke breedte, en nooit tegen de volgende regel. */
  .sf-appd-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .sf-appd-actions .btn-primary,
  .sf-appd-actions .btn-outline { width: 100% !important; }
  .sf-appd-actions .sf-appd-link { justify-content: center; min-height: 44px; }
  .sf-appd-actions--links { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sf-appd-table { min-width: 340px; font-size: 13px; }
  .sf-appd-steps li { padding: 16px 16px 16px 56px; }
  .sf-appd-window__tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-appd *, .sf-appd *::before, .sf-appd *::after { transition: none !important; animation: none !important; }
}

/* Contrast op de eigen achtergrond (WCAG AA, gemeten ≥ 4,5:1). */
.sf-appd .section-badge { color: #f4a3a9; background: rgba(214, 51, 64, 0.16); border-color: rgba(214, 51, 64, 0.4); }

/* Slice 7C1 - app-kaart met detailpagina: de naam is een gewone link. */
.app-card__link { color: inherit; text-decoration: none; }
.app-card__link:hover { color: var(--sf-red-cta, #d63340); text-decoration: underline; text-underline-offset: 3px; }
.app-card__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }

/* WordPress-adminbar: de vaste nav staat op top:16px en zou anders onder de
   32px hoge adminbar schuiven. Alleen zichtbaar voor ingelogde gebruikers, dus
   het raakt geen enkele bezoekerspagina. */
body.admin-bar .nav-wrapper { top: 48px; }
@media screen and (max-width: 782px) {
  body.admin-bar .nav-wrapper { top: 56px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Slice 7C2 — Customer Portal-detailpagina.
   De pagina draait op hetzelfde .sf-appd-raamwerk als de applicatiepagina's
   (typografie, containers, banden, kaarten, actiegroep). .sf-cpd voegt alleen
   toe wat het Portal eigen is: de merkbalk in de productinterface, de
   scenariokaarten, de uitspraak over Service Management en de brug in
   detailcontext. Geen tweede typografie, geen eigen tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* De brug staat op de detailpagina in de gewone sectieflow: geen eigen
   achtergrondblok, wel de bandkleur van het raamwerk. */
.sf-cpd-bridge { background: #0a0a0c; }
.sf-cpd-bridge .sf-plat-portal { background: transparent; padding: 0; }
.sf-cpd-bridge .sf-plat-portal .section-inner { max-width: var(--sf-appd-w, 1280px); padding: 64px 90px; }
.sf-cpd-bridge .sf-plat-portal .section-title { text-align: left; margin-bottom: 30px; }
.sf-cpd-bridge .sf-plat-portal .section-title h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; letter-spacing: -0.8px; line-height: 1.12; margin: 12px 0 0; }
.sf-cpd-bridge .sf-plat-portal .section-title p { margin: 14px 0 0; max-width: 66ch; font-size: 16px; line-height: 1.7; color: #b9b9c2; }
.sf-cpd-bridge .sf-plat-portal__rule { margin-left: 0; }
.sf-cpd-bridge .sf-plat-portal__note { max-width: 72ch; margin: 22px 0 0; font-size: 13.5px; line-height: 1.6; color: #9a9aa6; }

/* Merkbalk in de productinterface: een neutrale plaatshouder, nooit een echt
   logo. Maakt zichtbaar dat het Portal de naam van de klant draagt. */
.sf-cpd-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 14px 18px; border-bottom: 1px solid #1d1d24; background: #0e0e13; }
.sf-cpd-brand__mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1px dashed #3a3a45; color: #7f7f8c; font-size: 13px; }
.sf-cpd-brand__label { font-size: 13.5px; font-weight: 600; color: #d7d7db; }
.sf-cpd-brand__note { font-size: 12.5px; color: #9a9aa6; }

/* Scenariokaarten: wat de klant doet, wat erachter gebeurt, wat het ondersteunt. */
.sf-cpd-scenario__rows { margin: 12px 0 0; display: grid; gap: 12px; }
.sf-cpd-scenario__rows dt { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9aa6; }
.sf-cpd-scenario__rows dd { margin: 3px 0 0; font-size: 15px; line-height: 1.6; color: #a9a9b4; }
.sf-cpd-scenario__support { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #23232b; font-size: 13.5px; color: #c9c9d2; }

/* De uitspraak over Portal en Service Management. */
.sf-cpd-quote { margin: 22px 0 0; padding: 0 0 0 18px; border-left: 3px solid var(--sf-red-cta, #d63340); max-width: 62ch; }
.sf-cpd-quote p { margin: 0; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.5; color: #fff; font-weight: 600; }
/* Slice 7C2c: de vier kaarten onder de uitspraak zijn vervangen door één
   toelichting; die had anders geen lucht onder het citaat. */
.sf-cpd-service .sf-cpd-quote + .sf-appd-lead { margin-top: 20px; }
.sf-cpd-more { margin: 22px 0 0; font-size: 14.5px; }

/* Prijsblok zonder bedrag: een lijst met wat de investering bepaalt. */
.sf-cpd-price__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sf-cpd-price__card li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.6; color: #d7d7db; }
.sf-cpd-price__card li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--sf-red-cta, #d63340); }

/* Contextuele links onder de slotactie. */
.sf-cpd-links { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid #1d1d24; }
.sf-cpd-links h3 { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9aa6; margin: 0 0 12px; font-weight: 700; }
.sf-cpd-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14.5px; }

@media (max-width: 1180px) {
  .sf-cpd-bridge .sf-plat-portal .section-inner { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 820px) {
  /* !important tegenover de globale mobiele regel .section-inner { padding: 60px 20px !important }. */
  .sf-cpd-bridge .sf-plat-portal .section-inner { padding: 52px 20px !important; }
  .sf-cpd-bridge .sf-plat-portal .section-title { margin-bottom: 24px; }
}
@media (max-width: 560px) {
  .sf-cpd-brand { padding: 12px 16px; }
  .sf-cpd-links ul { flex-direction: column; gap: 10px; }
}

/* ── Slice 7C2b — correcties op het applicatieraamwerk ─────────────────────── */

/* Verbindingskaarten krijgen hun eigen hoogte. Zonder align-items:start rekt de
   grid elke kaart tot de hoogte van de langste in dezelfde rij — de Customer
   Portal-kaart (met twee richtingsregels) maakte de CRM-kaart ernaast leeg en
   hoog. De rasteropbouw zelf blijft ongewijzigd. */
.sf-appd-conn__list { align-items: start; }

/* Prijs: twee expliciete staffels in plaats van een vanaf-prijs. */
.sf-appd-price__tiers { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-appd-price__tiers li { display: grid; gap: 2px; padding: 14px 16px; background: #17171d; border: 1px solid #2c2c35; border-radius: 12px; }
.sf-appd-price__amount { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: #fff; line-height: 1.1; }
.sf-appd-price__when { font-size: 14px; color: #d7d7db; }
.sf-appd-price__per { font-size: 12.5px; color: #9a9aa6; }
.sf-appd-price__terms { margin: 12px 0 0; font-size: 12.5px; color: #9a9aa6; }
.sf-appd-price__card .sf-appd-price__sub + .sf-appd-price__sub { margin-top: 8px; }

@media (max-width: 560px) {
  .sf-appd-price__tiers { grid-template-columns: minmax(0, 1fr); }
}

/* ── Slice 7C2b — compacte Portal-mockups ─────────────────────────────────── */

/* Welkomstscherm: het eerste klantbeeld, één kolom, geen brede tabel. */
.sf-cpd-welcome__window { max-width: 720px; }
.sf-cpd-welcome__body { padding: 18px 20px 22px; display: grid; gap: 4px; }
.sf-cpd-welcome__greeting { margin: 0; font-size: 18px; font-weight: 700; color: #fff; }
.sf-cpd-welcome__sub { margin: 2px 0 0; font-size: 14px; color: #a9a9b4; }
.sf-cpd-welcome__actions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sf-cpd-welcome__actions li { border: 1px solid #2c2c35; background: #17171d; border-radius: 999px; padding: 8px 14px; font-size: 13.5px; color: #d7d7db; }
.sf-cpd-welcome__running { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sf-cpd-welcome__running li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border: 1px solid #23232b; border-radius: 12px; background: #111116; }
.sf-cpd-welcome__runtitle { font-size: 14.5px; color: #fff; font-weight: 600; }
.sf-cpd-welcome__runmeta { font-size: 12.5px; color: #9a9aa6; }
.sf-cpd-welcome__update { margin: 0; display: grid; gap: 4px; padding: 12px 14px; border-left: 2px solid var(--sf-red-cta, #d63340); background: #111116; border-radius: 0 12px 12px 0; font-size: 14.5px; color: #d7d7db; }

/* Eén verzoek, twee vensters naast elkaar; het teamvenster is het kleinere. */
.sf-cpd-story__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 28px; }
.sf-cpd-story__body { padding: 16px 20px 20px; display: grid; gap: 6px; }
.sf-cpd-story__label { margin: 0; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9aa6; }
.sf-cpd-story__subject { margin: 2px 0 0; font-size: 18px; font-weight: 700; color: #fff; }
.sf-cpd-story__meta, .sf-cpd-story__rows { margin: 8px 0 0; display: grid; gap: 8px; }
.sf-cpd-story__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-cpd-story__meta dt, .sf-cpd-story__rows dt { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #9a9aa6; }
.sf-cpd-story__meta dd, .sf-cpd-story__rows dd { margin: 2px 0 0; font-size: 14px; color: #d7d7db; }
.sf-cpd-story__blocktitle { margin: 14px 0 2px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9aa6; }

/* Berichten: klant links, team rechts — kleur is nooit de enige drager, de naam staat erbij. */
.sf-cpd-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sf-cpd-thread__item { border: 1px solid #23232b; border-radius: 12px; padding: 10px 14px; background: #111116; }
.sf-cpd-thread__item--org { border-color: rgba(214, 51, 64, 0.35); background: #131317; }
.sf-cpd-thread__who { margin: 0; font-size: 12.5px; font-weight: 700; color: #fff; }
.sf-cpd-thread__body { margin: 4px 0 0; font-size: 14.5px; line-height: 1.6; color: #b3b3bd; }
.sf-cpd-thread__meta { margin: 4px 0 0; font-size: 12px; color: #9a9aa6; }

.sf-cpd-doc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 10px 14px; border: 1px dashed #33333d; border-radius: 12px; }
.sf-cpd-doc__icon { color: #9a9aa6; }
.sf-cpd-doc__label { font-size: 14px; color: #fff; font-weight: 600; }
.sf-cpd-doc__meta { font-size: 12.5px; color: #9a9aa6; }
.sf-cpd-next { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(214, 51, 64, 0.12); border: 1px solid rgba(214, 51, 64, 0.4); font-size: 14.5px; color: #fff; }

@media (max-width: 900px) {
  .sf-cpd-story__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sf-cpd-story__meta { grid-template-columns: minmax(0, 1fr); }
  .sf-cpd-welcome__running li { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* ── Slice 7C3: dienstpagina → applicatiepagina ─────────────────────────────
   De dienstpagina's hebben hun eigen donkere opmaak met een accentkleur per
   dienst (Digital teal, Service Management oranje). Deze band leent daarom de
   neutrale kaartvorm die beide pagina's al gebruiken (.feature-card) en voegt
   geen eigen accent toe, zodat hij op elke dienstpagina thuishoort. */
/* Een dienstkaart die naar de pagina erover doorverwijst. Neutraal gestyled,
   want de accentkleur verschilt per dienstpagina. */
.feature-card__more { margin: 14px 0 0; font-size: 13.5px; }
.feature-card__more a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.feature-card__more a:hover { text-decoration-thickness: 2px; }
.sf-svc-applink { padding: 0 40px 100px; }
.sf-svc-applink__inner { max-width: 1200px; margin: 0 auto; }
.sf-svc-applink__card { background: #161616; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; padding: 36px 32px; }
.sf-svc-applink__card h2 { font-size: 24px; font-weight: 800; color: #fff; margin: 12px 0 14px; }
.sf-svc-applink__body { font-size: 15px; line-height: 1.8; color: #888; margin: 0 0 14px; max-width: 900px; }
.sf-svc-applink__note { font-size: 14px; line-height: 1.7; color: #9a9aa6; margin: 0; max-width: 900px; }
.sf-svc-applink__more { margin: 18px 0 0; font-size: 14.5px; }
.sf-svc-applink__more a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sf-svc-applink__more a:hover { text-decoration-thickness: 2px; }
@media (max-width: 768px) {
  .sf-svc-applink { padding: 0 20px 60px; }
  .sf-svc-applink__card { padding: 26px 22px; }
  .sf-svc-applink__card h2 { font-size: 21px; }
}

/* ── Correctieronde: herkenbare productweergaven per applicatie ─────────────
   Tot deze ronde toonde elke applicatiepagina dezelfde tabel. Deze blokken
   geven bord, kalender, cockpit, funnel, zoekervaring, kwalificatie, tijdlijn
   en kluis hun eigen vorm, binnen hetzelfde donkere palet en zonder JavaScript.
   De markup komt uit includes/site-platform-app-detail-panels.php.          */

.sf-appd-panel--full .sf-appd-panel__body { grid-template-columns: minmax(0, 1fr); }

/* Gedeelde onderdelen */
.sf-appd-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; color: #9a9aa6; background: #17171d; border: 1px solid #26262e; white-space: nowrap; }
.sf-appd-owner { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: #e8e8ee; background: #2a2a33; border: 1px solid #3a3a45; margin-left: auto; }
.sf-appd-fauxbtn { display: inline-block; margin: 12px 0 0; padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #fff; background: #d63340; }

/* 1. Bord — kolommen met kaarten (Project Management, Sales, Service Management) */
.sf-appd-board__scroll { overflow-x: auto; padding-bottom: 4px; }
.sf-appd-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(212px, 1fr); gap: 12px; min-width: 640px; }
.sf-appd-col { background: #101015; border: 1px solid #23232b; border-radius: 12px; padding: 12px 10px 14px; }
.sf-appd-col__head { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px; }
.sf-appd h4.sf-appd-col__head, .sf-appd-col__head h4 { margin: 0; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: #9a9aa6; font-weight: 700; }
.sf-appd-col__count { margin-left: auto; font-size: 11px; color: #8a8a95; background: #17171d; border: 1px solid #26262e; border-radius: 999px; padding: 1px 8px; }
.sf-appd-col__meta { margin: 0 4px 8px; font-size: 11.5px; color: #8a8a95; }
.sf-appd-col__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sf-appd-card2 { background: #16161c; border: 1px solid #26262e; border-radius: 10px; padding: 10px 11px; }
.sf-appd-card2--blocked { border-color: rgba(214, 51, 64, 0.45); }
.sf-appd-card2__id { font-size: 11px; color: #8a8a95; letter-spacing: 0.03em; }
.sf-appd-card2__title { margin: 3px 0 0; font-size: 13.5px; line-height: 1.35; color: #fff; font-weight: 600; }
.sf-appd-card2__meta { margin: 5px 0 0; font-size: 11.5px; color: #9a9aa6; }
.sf-appd-card2__blocked { margin: 7px 0 0; font-size: 11.5px; color: #f0a1a8; }
.sf-appd-card2__foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 9px 0 0; }

/* 2. Kalender — gekleurde items per dag (Social Media, HR) */
.sf-appd-cal__legend { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 11.5px; color: #9a9aa6; }
.sf-appd-cal__legend li { display: inline-flex; align-items: center; gap: 6px; }
.sf-appd-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.sf-appd-dot--a, .sf-appd-cal__item--a { background: rgba(138, 180, 248, 0.16); border-color: rgba(138, 180, 248, 0.4); color: #a9c7fb; }
.sf-appd-dot--b, .sf-appd-cal__item--b { background: rgba(127, 200, 169, 0.16); border-color: rgba(127, 200, 169, 0.4); color: #9ad6bd; }
.sf-appd-dot--c, .sf-appd-cal__item--c { background: rgba(233, 196, 106, 0.16); border-color: rgba(233, 196, 106, 0.42); color: #e3c884; }
.sf-appd-dot--d, .sf-appd-cal__item--d { background: rgba(199, 146, 234, 0.16); border-color: rgba(199, 146, 234, 0.4); color: #cfa6ef; }
.sf-appd-dot--off, .sf-appd-cal__item--off { background: rgba(214, 51, 64, 0.12); border-color: rgba(214, 51, 64, 0.4); color: #f0a1a8; }
.sf-appd-dot--work, .sf-appd-cal__item--work { background: #17171d; border-color: #33333d; color: #d7d7db; }
.sf-appd-dot { border: 1px solid; }
.sf-appd-cal__scroll { overflow-x: auto; }
.sf-appd-cal__grid { display: grid; grid-template-columns: repeat(5, minmax(116px, 1fr)); gap: 6px; min-width: 600px; }
.sf-appd-cal__dayhead { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a95; padding: 0 2px 2px; }
.sf-appd-cal__cell { min-height: 96px; background: #101015; border: 1px solid #23232b; border-radius: 10px; padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 5px; }
.sf-appd-cal__cell.is-dim { opacity: 0.55; }
.sf-appd-cal__date { font-size: 11px; color: #8a8a95; }
.sf-appd-cal__item { display: block; border: 1px solid; border-radius: 7px; padding: 5px 7px; font-size: 11.5px; line-height: 1.3; }
.sf-appd-cal__item i { display: block; font-style: normal; font-size: 10.5px; color: #8a8a95; margin-top: 2px; }

/* 3. Cockpit — kerncijfers, verhoudingen en signalen (Finance) */
.sf-appd-cockpit { display: grid; gap: 16px; }
.sf-appd-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sf-appd-kpi { background: #101015; border: 1px solid #23232b; border-left-width: 3px; border-radius: 10px; padding: 11px 13px; display: grid; gap: 3px; }
.sf-appd-kpi--done { border-left-color: #7fc8a9; }
.sf-appd-kpi--busy { border-left-color: #8ab4f8; }
.sf-appd-kpi--alert { border-left-color: #d63340; }
.sf-appd-kpi--wait { border-left-color: #3a3a45; }
.sf-appd-kpi__label { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: #9a9aa6; }
.sf-appd-kpi__value { font-size: 19px; color: #fff; font-weight: 700; letter-spacing: -0.01em; }
.sf-appd-kpi__sub { font-size: 11.5px; color: #8a8a95; }
.sf-appd-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sf-appd-bars li { display: grid; grid-template-columns: minmax(84px, 148px) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.sf-appd-bars__label { font-size: 12.5px; color: #b3b3bd; }
.sf-appd-bars__track { height: 8px; border-radius: 999px; background: #1d1d24; overflow: hidden; display: block; }
.sf-appd-bars__fill { display: block; height: 100%; border-radius: 999px; background: #8ab4f8; }
.sf-appd-bars__fill--done { background: #7fc8a9; }
.sf-appd-bars__fill--alert { background: #d63340; }
.sf-appd-bars__fill--wait { background: #4a4a57; }
.sf-appd-bars__value { font-size: 12.5px; color: #d7d7db; white-space: nowrap; }
.sf-appd-signals { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sf-appd-signal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #101015; border: 1px solid #23232b; border-radius: 10px; padding: 9px 12px; }
.sf-appd-signal__text { font-size: 13px; color: #d7d7db; flex: 1 1 200px; }
.sf-appd-signal__action { font-size: 12px; color: #fff; background: #2a2a33; border: 1px solid #3a3a45; border-radius: 7px; padding: 4px 10px; white-space: nowrap; }

/* 4. Funnel en doelvoortgang (Marketing) */
.sf-appd-funnelwrap { display: grid; gap: 16px; }
.sf-appd-period { margin: 0; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: #8a8a95; }
.sf-appd-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: sf-funnel; }
.sf-appd-funnel li { display: flex; align-items: center; gap: 10px; }
.sf-appd-funnel__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 40%; padding: 9px 13px; border-radius: 8px; background: linear-gradient(90deg, rgba(138, 180, 248, 0.22), rgba(138, 180, 248, 0.08)); border: 1px solid rgba(138, 180, 248, 0.28); }
.sf-appd-funnel__label { font-size: 12.5px; color: #e8e8ee; }
.sf-appd-funnel__value { font-size: 13px; font-weight: 700; color: #fff; }
.sf-appd-funnel__delta { font-size: 12px; white-space: nowrap; }
.sf-appd-funnel__delta--done { color: #7fc8a9; }
.sf-appd-funnel__delta--alert { color: #f0a1a8; }
.sf-appd-funnel__delta--wait { color: #9a9aa6; }
.sf-appd-funnel__delta--busy { color: #8ab4f8; }
.sf-appd-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sf-appd-goals__top { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.sf-appd-goals__label { font-size: 12.5px; color: #b3b3bd; }
.sf-appd-goals__value { font-size: 12.5px; color: #fff; font-weight: 600; }
.sf-appd-goals__sub { display: block; margin-top: 5px; font-size: 11.5px; color: #8a8a95; }

/* 5. Zoekervaring en artikel (Knowledge) */
.sf-appd-search { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 14px; }
.sf-appd-search__bar { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; padding: 9px 12px; background: #101015; border: 1px solid #2a2a33; border-radius: 9px; }
.sf-appd-search__icon { color: #8a8a95; font-size: 15px; }
.sf-appd-search__q { font-size: 13px; color: #e8e8ee; flex: 1; }
.sf-appd-search__bar kbd { font-size: 10.5px; color: #8a8a95; background: #17171d; border: 1px solid #2a2a33; border-radius: 5px; padding: 2px 6px; font-family: inherit; }
.sf-appd-search__from { margin: 0 0 10px; font-size: 11.5px; color: #8a8a95; }
.sf-appd-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sf-appd-hit { background: #101015; border: 1px solid #23232b; border-radius: 9px; padding: 9px 11px; }
.sf-appd-hit.is-active { border-color: #3a3a45; background: #16161c; }
.sf-appd-hit__title { margin: 0; font-size: 13px; color: #fff; font-weight: 600; }
.sf-appd-hit__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; font-size: 11.5px; color: #8a8a95; }
.sf-appd-article { background: #101015; border: 1px solid #23232b; border-radius: 12px; padding: 14px 16px 16px; }
.sf-appd .sf-appd-article h4 { margin: 0; font-size: 15px; color: #fff; font-weight: 700; }
.sf-appd-article__meta { margin: 6px 0 10px; font-size: 11.5px; color: #8a8a95; }
.sf-appd-article__p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; color: #b3b3bd; }
.sf-appd-article__foot { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #23232b; font-size: 11.5px; color: #8a8a95; }

/* 6. Zoekcriteria en gevonden organisaties (Leads) */
.sf-appd-criteria { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 14px; }
.sf-appd-criteria__form { background: #101015; border: 1px solid #23232b; border-radius: 12px; padding: 13px 15px 15px; }
.sf-appd .sf-appd-criteria__form h4 { margin: 0 0 10px; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: #9a9aa6; font-weight: 700; }
.sf-appd-criteria__form dl { margin: 0; display: grid; gap: 9px; }
.sf-appd-criteria__form dt { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #8a8a95; }
.sf-appd-criteria__form dd { margin: 3px 0 0; font-size: 12.5px; color: #e8e8ee; background: #16161c; border: 1px solid #2a2a33; border-radius: 7px; padding: 6px 10px; }
.sf-appd-criteria__count { margin: 0 0 8px; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: #9a9aa6; }
.sf-appd-criteria__hits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sf-appd-found { display: flex; align-items: center; gap: 10px; background: #101015; border: 1px solid #23232b; border-radius: 9px; padding: 9px 11px; }
.sf-appd-found.is-picked { border-color: rgba(127, 200, 169, 0.4); }
.sf-appd-found__check { width: 17px; height: 17px; border-radius: 5px; border: 1px solid #3a3a45; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #7fc8a9; flex: none; }
.sf-appd-found.is-picked .sf-appd-found__check { border-color: rgba(127, 200, 169, 0.6); background: rgba(127, 200, 169, 0.12); }
.sf-appd-found__main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sf-appd-found__name { font-size: 13px; color: #fff; font-weight: 600; }
.sf-appd-found__meta { font-size: 11.5px; color: #8a8a95; }
.sf-appd-found__score { display: inline-flex; align-items: center; gap: 8px; }
.sf-appd-score { font-size: 12.5px; font-weight: 700; color: #e8e8ee; background: #17171d; border: 1px solid #2a2a33; border-radius: 7px; padding: 3px 9px; }

/* 7. Tijdlijn (CRM, Sales) */
.sf-appd-tl__head { margin: 0 0 10px; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: #9a9aa6; }
.sf-appd-tl__list { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 10px; border-left: 1px solid #26262e; }
.sf-appd-tl__item { position: relative; display: grid; grid-template-columns: minmax(96px, 132px) minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.sf-appd-tl__item::before { content: ""; position: absolute; left: -19px; top: 5px; width: 9px; height: 9px; border-radius: 999px; background: #4a4a57; border: 2px solid #0d0d12; }
.sf-appd-tl__item--done::before { background: #7fc8a9; }
.sf-appd-tl__item--busy::before { background: #8ab4f8; }
.sf-appd-tl__item--alert::before { background: #d63340; }
.sf-appd-tl__when { font-size: 11.5px; color: #8a8a95; padding-top: 1px; }
.sf-appd-tl__body { display: grid; gap: 3px; min-width: 0; }
.sf-appd-tl__what { font-size: 13px; color: #fff; font-weight: 600; }
.sf-appd-tl__who { font-size: 11.5px; color: #9a9aa6; }
.sf-appd-tl__note { font-size: 12px; color: #b3b3bd; line-height: 1.5; }

/* 8. Kluis — gemaskeerde geheimen en toegang (Vault) */
.sf-appd-vault { display: grid; gap: 14px; }
.sf-appd-vault__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sf-appd-secret { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; background: #101015; border: 1px solid #23232b; border-radius: 10px; padding: 9px 12px; }
.sf-appd-secret__kind { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #9a9aa6; background: #17171d; border: 1px solid #26262e; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.sf-appd-secret__main { display: grid; gap: 2px; flex: 1 1 180px; min-width: 0; }
.sf-appd-secret__name { font-size: 13px; color: #fff; font-weight: 600; }
.sf-appd-secret__meta { font-size: 11.5px; color: #8a8a95; }
.sf-appd-secret__value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: 0.08em; color: #8a8a95; background: #16161c; border: 1px solid #2a2a33; border-radius: 7px; padding: 5px 10px; }
.sf-appd-secret__copy { font-size: 12px; color: #e8e8ee; background: #2a2a33; border: 1px solid #3a3a45; border-radius: 7px; padding: 4px 10px; white-space: nowrap; }
.sf-appd-access { background: #101015; border: 1px solid #23232b; border-radius: 12px; padding: 13px 15px 14px; }
.sf-appd .sf-appd-access h4 { margin: 0 0 9px; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: #9a9aa6; font-weight: 700; }
.sf-appd-access ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sf-appd-access li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: #b3b3bd; }
.sf-appd-access__who { color: #fff; font-weight: 600; min-width: 128px; }
.sf-appd-access__what { flex: 1 1 160px; }

/* Smaller screens — elke weergave blijft leesbaar op 390 px */
@media (max-width: 980px) {
  .sf-appd-search, .sf-appd-criteria { grid-template-columns: minmax(0, 1fr); }
  .sf-appd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sf-appd-tl__item { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .sf-appd-tl__item .sf-appd-tl__status { justify-self: start; }
  .sf-appd-bars li { grid-template-columns: minmax(0, 1fr) auto; }
  .sf-appd-bars__track { grid-column: 1 / -1; order: 3; }
  .sf-appd-secret__value { flex: 1 1 100%; }
  .sf-appd-signal__action { margin-left: auto; }
}