/* ============================================================
   WILDBOS.COM — wbx-: onderdelen voor de pagina's van 14-10-2026
   (/geo-bureau, /vergelijking, /veelgestelde-vragen, /geo-voor-bureaus
   en hun /en/-tegenhangers). Laadt ná platform.css; tokens uit style.css.
   Beweging start pas in beeld (.wbp-in via platform.js, .wbx-in via wbx.js)
   en staat stil bij prefers-reduced-motion.
   ============================================================ */

/* ---- vergelijkingstabel ---- */
.wbx-cmp{max-width:1080px;margin:0 auto;border:1px solid var(--card-border);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));position:relative;overflow:hidden}
.wbx-cmp-scroll{overflow-x:auto;scrollbar-width:thin}
.wbx-cmp table{width:100%;border-collapse:separate;border-spacing:0;font-size:.93rem;min-width:680px}
.wbx-cmp th,.wbx-cmp td{padding:15px 16px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.05)}
.wbx-cmp tbody tr:last-child th,.wbx-cmp tbody tr:last-child td{border-bottom:0}
.wbx-cmp thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:700;
  background:rgba(255,255,255,.025);white-space:nowrap}
.wbx-cmp thead th.us{color:var(--accent)}
.wbx-cmp tbody th{font-weight:600;color:var(--text-secondary);width:26%}
.wbx-cmp tbody th small{display:block;font-weight:400;color:var(--text-faint);font-size:.8rem;line-height:1.45;margin-top:4px}
.wbx-cmp td{color:var(--text-muted);line-height:1.5}
.wbx-cmp td b{color:var(--white);font-weight:600}
.wbx-cmp .us{position:relative;background:rgba(var(--accent-rgb),.055)}
.wbx-cmp td.us{color:var(--text-body)}
.wbx-cmp tbody tr{transition:background .25s}
.wbx-cmp tbody tr:hover{background:rgba(255,255,255,.025)}
.wbx-cmp th:first-child{position:sticky;left:0;z-index:2;background:var(--midnight)}
.wbp-sec.alt .wbx-cmp th:first-child{background:var(--surface)}
.wbx-cmp thead th:first-child{background:#121219}
.wbx-y,.wbx-n,.wbx-p{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.wbx-y{color:#34D399}
.wbx-n{color:var(--text-faint);font-weight:500}
.wbx-p{color:#E0A339}
.wbx-y::before,.wbx-n::before,.wbx-p::before{content:"";flex:0 0 18px;height:18px;border-radius:50%;
  background-position:center;background-repeat:no-repeat;background-size:11px}
.wbx-y::before{background-color:rgba(52,211,153,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.2 2.2 4.8-5' fill='none' stroke='%2334D399' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.wbx-n::before{background-color:rgba(255,255,255,.05);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%237A7A8C' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.wbx-p::before{background-color:rgba(224,163,57,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='2.2' fill='%23E0A339'/%3E%3C/svg%3E")}
/* beweging: rijen komen binnen, het eigen vinkje springt op, de eigen kolom krijgt een lichtstreep */
.wbx-cmp tbody tr{opacity:0;transform:translateY(8px)}
.wbx-cmp.wbp-in tbody tr{animation:wbpRise .55s var(--ease-out) calc(var(--i,0) * 70ms + 150ms) forwards}
.wbx-cmp.wbp-in td.us .wbx-y::before{animation:wbxTick .5s var(--ease-out) calc(var(--i,0) * 70ms + 450ms) both}
@keyframes wbxTick{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
.wbx-cmp::after{content:"";position:absolute;top:0;bottom:0;left:var(--us-x,26%);width:var(--us-w,18.5%);pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(var(--accent-rgb),.16) 45%,transparent 60%);background-size:100% 260%;
  background-position:0 -120%;opacity:0}
.wbx-cmp.wbp-in::after{animation:wbxScan 2.6s ease-in-out .9s 1 forwards}
@keyframes wbxScan{0%{opacity:0;background-position:0 -120%}15%{opacity:1}85%{opacity:1}100%{opacity:0;background-position:0 220%}}
.wbx-src{max-width:1080px;margin:18px auto 0;font-size:12.5px;line-height:1.6;color:var(--text-faint);text-align:left}
.wbx-src a{color:var(--text-muted)}
.wbx-legend{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:0 auto 22px;font-size:12.5px;color:var(--text-faint)}

/* ---- prijskaart met lopende rand ---- */
@property --wbx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.wbx-plan{max-width:980px;margin:0 auto;border-radius:24px;padding:1.5px;position:relative;
  background:conic-gradient(from var(--wbx-a),rgba(var(--accent-rgb),.08) 0deg,rgba(var(--accent-rgb),.85) 70deg,rgba(var(--accent-rgb),.08) 150deg,rgba(var(--accent-rgb),.08) 360deg)}
.wbx-plan.wbp-in{animation:wbxSpin 7s linear infinite}
@keyframes wbxSpin{to{--wbx-a:360deg}}
.wbx-plan-in{border-radius:22.5px;background:linear-gradient(180deg,#14141E,#0D0D15);padding:40px;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:start}
.wbx-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.3);padding:5px 12px;border-radius:999px;margin-bottom:18px}
.wbx-price b{display:block;font-size:clamp(2.6rem,5vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--white)}
.wbx-price small{display:block;margin-top:8px;font-size:.95rem;color:var(--text-muted)}
.wbx-plan p{color:var(--text-body);line-height:1.7;margin:20px 0 26px}
.wbx-plan .wbp-cta{justify-content:flex-start}
.wbx-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.wbx-plan li{position:relative;padding:14px 16px 14px 46px;border-radius:12px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);color:var(--text-body);font-size:.95rem;line-height:1.55;opacity:0;transform:translateX(10px)}
.wbx-plan li b{color:var(--white);font-weight:600}
.wbx-plan li::before{content:"";position:absolute;left:15px;top:15px;width:20px;height:20px;border-radius:50%;
  background:rgba(var(--accent-rgb),.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.2 2.2 4.8-5' fill='none' stroke='%23F5913E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.wbx-plan.wbp-in li{animation:wbxSlide .55s var(--ease-out) calc(var(--i,0) * 110ms + 250ms) forwards}
@keyframes wbxSlide{to{opacity:1;transform:none}}

/* ---- bewijsblok: één gemeten vraag ---- */
.wbx-proof{max-width:980px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:center;
  padding:30px 34px;border-radius:var(--radius-lg);border:1px solid var(--card-border);background:var(--card-bg)}
.wbx-ring{width:148px;height:148px;position:relative}
.wbx-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.wbx-ring circle{fill:none;stroke-width:10}
.wbx-ring .bg{stroke:rgba(255,255,255,.07)}
.wbx-ring .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:var(--c);transition:stroke-dashoffset 1.6s var(--ease-out) .2s}
.wbx-ring.wbp-in .fg{stroke-dashoffset:var(--o)}
.wbx-ring b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:2.1rem;font-weight:800;letter-spacing:-.03em;color:var(--white)}
.wbx-ring b small{font-size:.72rem;font-weight:500;letter-spacing:.02em;color:var(--text-muted);margin-top:3px}
.wbx-proof h3{font-size:1.15rem;margin-bottom:10px}
.wbx-proof p{color:var(--text-muted);line-height:1.68;margin:0}
.wbx-proof q{color:var(--text-secondary);font-style:normal}
.wbx-proof a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---- FAQ-hub: zoeken, chips, groepen ---- */
.wbx-search{max-width:760px;margin:0 auto;position:relative}
.wbx-search input{width:100%;font:inherit;font-size:1.05rem;color:var(--white);background:rgba(255,255,255,.04);
  border:1px solid var(--card-border);border-radius:16px;padding:18px 120px 18px 52px;outline:none;
  transition:border-color .25s,box-shadow .25s,background .25s}
.wbx-search input::placeholder{color:var(--text-faint)}
.wbx-search input:focus{border-color:rgba(var(--accent-rgb),.55);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12),0 20px 50px rgba(0,0,0,.35)}
.wbx-search input::-webkit-search-cancel-button{display:none}
.wbx-search svg{position:absolute;left:18px;top:50%;width:20px;height:20px;transform:translateY(-50%);stroke:var(--text-muted);
  fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.wbx-count{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--text-faint);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);padding:5px 10px;border-radius:999px;white-space:nowrap}
.wbx-kbd{display:inline-block;font:600 11px ui-monospace,Menlo,monospace;color:var(--text-muted);border:1px solid rgba(255,255,255,.14);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px;margin-left:4px}
.wbx-chips{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px;margin:22px auto 0}
.wbx-chips button{position:relative;z-index:1;font:inherit;font-size:.9rem;font-weight:600;color:var(--text-muted);cursor:pointer;
  background:transparent;border:1px solid var(--card-border);border-radius:999px;padding:9px 16px;transition:color .25s,border-color .25s}
.wbx-chips button:hover{color:var(--text-secondary);border-color:rgba(var(--accent-rgb),.3)}
.wbx-chips button[aria-pressed="true"]{color:var(--midnight);border-color:transparent}
.wbx-chips button span{opacity:.6;font-weight:500;margin-left:5px}
.wbx-pill{position:absolute;z-index:0;left:0;top:0;height:0;width:0;border-radius:999px;background:var(--accent);
  box-shadow:0 8px 24px rgba(var(--accent-rgb),.35);transition:transform .38s var(--ease-out),width .38s var(--ease-out),height .38s var(--ease-out)}
.wbx-groups{max-width:880px;margin:0 auto}
.wbx-group{margin-top:56px}
.wbx-group[hidden]{display:none}
.wbx-group h2{font-size:clamp(1.35rem,2.4vw,1.7rem);letter-spacing:-.02em;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.wbx-group h2 i{font-style:normal;font-size:12px;font-weight:600;color:var(--accent);background:rgba(var(--accent-rgb),.12);
  padding:3px 9px;border-radius:999px;letter-spacing:0}
.wbx-group .wbp-faq{max-width:none}
.wbx-group details[hidden]{display:none}
.wbx-group details{transition:border-color .25s,background .25s}
.wbx-group details:hover{border-color:rgba(var(--accent-rgb),.25)}
.wbx-group details[open]{border-color:rgba(var(--accent-rgb),.32);background:rgba(var(--accent-rgb),.04)}
.wbx-group details p a{color:var(--accent)}
.wbx-group mark{background:rgba(var(--accent-rgb),.28);color:var(--white);border-radius:3px;padding:0 2px}
.wbx-none{max-width:760px;margin:44px auto 0;text-align:center;color:var(--text-muted)}
.wbx-none a{color:var(--accent)}
[data-rise]{opacity:0;transform:translateY(14px)}
[data-rise].wbx-in{animation:wbpRise .6s var(--ease-out) var(--d,0ms) forwards}

/* ---- pilotprijs: doorgestreepte normale prijs en de plekken die er nog zijn ---- */
.wbx-was{display:block;font-size:1.15rem;font-weight:600;color:var(--text-faint);text-decoration:line-through;
  text-decoration-color:rgba(var(--accent-rgb),.75);text-decoration-thickness:2px;margin-bottom:6px}
.wbx-seats{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:.88rem;font-weight:600;color:var(--text-secondary);
  padding:7px 14px 7px 12px;border-radius:999px;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.28)}
.wbx-seats i{width:8px;height:8px;border-radius:50%;background:#34D399;position:relative;flex:none}
.wbx-seats i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #34D399;animation:wbxRing 2.4s ease-out infinite}
@keyframes wbxRing{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.wbx-seats i::after{animation:none}}

/* ---- mobiel ---- */
@media (max-width:960px){
  .wbx-plan-in{grid-template-columns:1fr;gap:28px;padding:28px}
  .wbx-proof{grid-template-columns:1fr;justify-items:center;text-align:center;padding:26px 22px}
}
@media (max-width:720px){
  .wbx-search input{padding:16px 16px 16px 48px;font-size:1rem}
  .wbx-count{display:none}
  .wbx-chips{justify-content:flex-start}
  .wbx-cmp th,.wbx-cmp td{padding:13px 12px}
}

@media (prefers-reduced-motion:reduce){
  .wbx-cmp tbody tr,.wbx-plan li,[data-rise]{opacity:1;transform:none;animation:none!important}
  .wbx-cmp::after{display:none}
  .wbx-plan.wbp-in{animation:none}
  .wbx-ring .fg{transition:none}
  .wbx-pill{transition:none}
}

/* ============================================================
   Bewijsblok (14-10-2026): klantresultaat The Human Edge + reviews.
   Staat op elke platformpagina vóór "De rest van het platform".
   ============================================================ */
.wbx-bewijs{overflow:hidden;isolation:isolate}
.wbx-bewijs::before{content:"";position:absolute;inset:-10% -20% auto;height:70%;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 60% at 22% 30%,rgba(52,211,153,.10),transparent 70%),
             radial-gradient(40% 55% at 82% 20%,rgba(var(--accent-rgb),.10),transparent 70%)}
.wbx-case{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:44px;align-items:center}
.wbx-case-who{display:flex;align-items:center;gap:12px;margin:2px 0 18px}
.wbx-case-who b{display:block;color:var(--white);font-size:1rem}
.wbx-case-who small{display:block;color:var(--text-muted);font-size:.84rem;margin-top:2px}
.wbx-case-logo{flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:.06em;
  color:#0A0A12;background:linear-gradient(135deg,#34D399,#A7F3D0);box-shadow:0 8px 26px rgba(52,211,153,.28)}
.wbx-case h2{font-size:clamp(1.65rem,3vw,2.3rem);letter-spacing:-.02em;line-height:1.14;margin-bottom:16px}
.wbx-case-txt>p{color:var(--text-muted);line-height:1.7;margin-bottom:22px}
.wbx-case-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:22px}
.wbx-case-stats div{padding:16px 14px;border-radius:14px;border:1px solid var(--card-border);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}
.wbx-case-stats b{display:block;font-size:clamp(1.35rem,2.4vw,1.9rem);letter-spacing:-.02em;color:var(--white);line-height:1.1;white-space:nowrap}
.wbx-case-stats div:first-child b{background:linear-gradient(135deg,#34D399,#A7F3D0);-webkit-background-clip:text;background-clip:text;color:transparent}
.wbx-case-stats small{display:block;margin-top:6px;font-size:.78rem;line-height:1.45;color:var(--text-muted)}
.wbx-case-q{margin:0;padding:16px 18px;border-left:2px solid #34D399;background:rgba(52,211,153,.05);border-radius:0 12px 12px 0;
  color:var(--text-body,rgba(255,255,255,.85));font-size:.95rem;line-height:1.6;font-style:italic}
.wbx-case-q cite{display:block;margin-top:8px;font-style:normal;font-size:.8rem;color:var(--text-muted)}
.wbx-case-viz{position:relative;display:grid;gap:14px}
.wbx-case-viz .wbp-fig{margin:0}
.wbx-rank{position:relative;margin:-56px 18px 0 auto;width:min(380px,92%);padding:16px 16px 14px;border-radius:16px;
  background:rgba(14,14,24,.94);border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 50px rgba(0,0,0,.45);backdrop-filter:blur(10px)}
.wbx-rank-q{font-size:.84rem;line-height:1.5;color:var(--text-body,rgba(255,255,255,.85));margin-bottom:10px}
.wbx-rank-q span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:4px;font-weight:700}
.wbx-rank ol{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.wbx-rank li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);font-size:.88rem;color:var(--text-muted);
  opacity:0;transform:translateX(-10px)}
.wbx-rank.wbx-in li{animation:wbxSlide .55s var(--ease-out) calc(250ms + var(--i)*160ms) forwards}
.wbx-rank li i{flex:0 0 22px;height:22px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;background:rgba(255,255,255,.06)}
.wbx-rank li.me{color:var(--white);font-weight:600;background:linear-gradient(90deg,rgba(52,211,153,.16),rgba(52,211,153,.04));border:1px solid rgba(52,211,153,.35)}
.wbx-rank li.me i{background:#34D399;color:#0A0A12}
.wbx-rank li em{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;color:#0A0A12;background:#34D399;border-radius:999px;padding:2px 8px;
  box-shadow:0 0 0 0 rgba(52,211,153,.6)}
.wbx-rank.wbx-in li em{animation:wbxGlow 2.4s ease-in-out 1.2s infinite}
.wbx-rank-eng{display:flex;gap:8px;flex-wrap:wrap}
.wbx-rank-eng span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-muted);padding:4px 9px;border-radius:999px;border:1px solid var(--card-border)}
.wbx-rank-eng img{display:block;filter:brightness(1.4)}
.wbx-rank-eng i.ds{width:12px;height:12px;border-radius:50%;background:#4D6BFE;display:block}
.wbx-rank p{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--text-faint)}
.wbx-case-src{max-width:1140px}
@keyframes wbxSlide{to{opacity:1;transform:none}}
@keyframes wbxGlow{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}60%{box-shadow:0 0 0 8px rgba(52,211,153,0)}}

/* reviews */
.wbx-revs{max-width:1140px;margin:84px auto 0}
.wbx-revs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.wbx-revs-head h2{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;margin-bottom:8px}
.wbx-revs-head p{color:var(--text-muted);margin:0}
.wbx-score{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:12px;padding:14px 18px;border-radius:16px;text-decoration:none;
  border:1px solid rgba(250,204,21,.25);background:linear-gradient(180deg,rgba(250,204,21,.08),rgba(250,204,21,.02));transition:transform .3s var(--ease-out),border-color .3s}
.wbx-score:hover{transform:translateY(-2px);border-color:rgba(250,204,21,.45)}
.wbx-score b{grid-row:span 2;font-size:2.1rem;line-height:1;color:var(--white);letter-spacing:-.02em}
.wbx-score small{color:var(--text-muted);font-size:.8rem}
.wbx-stars{display:inline-flex;gap:3px}
.wbx-stars i{width:15px;height:15px;display:block;background:rgba(255,255,255,.14);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center/contain no-repeat}
.wbx-stars i{background:linear-gradient(90deg,#FACC15 50%,rgba(255,255,255,.14) 50%) 100% 0/200% 100% no-repeat}
.wbx-in .wbx-stars i,.wbx-in.wbx-score .wbx-stars i{animation:wbxStar .5s var(--ease-out) forwards}
.wbx-stars i:nth-child(2){animation-delay:.12s!important}.wbx-stars i:nth-child(3){animation-delay:.24s!important}
.wbx-stars i:nth-child(4){animation-delay:.36s!important}.wbx-stars i:nth-child(5){animation-delay:.48s!important}
@keyframes wbxStar{to{background-position:0 0}}
.wbx-marquee{position:relative;overflow:hidden;padding:6px 0 10px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.wbx-track{display:flex;gap:16px;width:max-content;animation:wbxMarquee 70s linear infinite}
.wbx-marquee:hover .wbx-track,.wbx-marquee:focus-within .wbx-track{animation-play-state:paused}
@keyframes wbxMarquee{to{transform:translateX(calc(-50% - 8px))}}
.wbx-rev{flex:0 0 352px;margin:0;display:flex;flex-direction:column;gap:14px;padding:22px 22px 18px;border-radius:18px;
  border:1px solid var(--card-border);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));transition:transform .35s var(--ease-out),border-color .35s}
.wbx-rev:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.32)}
.wbx-rev .wbx-stars i{width:13px;height:13px;background:#FACC15}
.wbx-rev blockquote{margin:0;flex:1;color:var(--text-body,rgba(255,255,255,.85));font-size:.93rem;line-height:1.62}
.wbx-rev figcaption{display:flex;align-items:center;gap:11px}
.wbx-rev figcaption b{display:block;color:var(--white);font-size:.9rem}
.wbx-rev figcaption small{display:block;color:var(--text-muted);font-size:.78rem;line-height:1.35}
.wbx-av{flex:0 0 38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,hsl(var(--h) 70% 55%),hsl(calc(var(--h) + 40) 70% 40%))}
.wbx-rev-src{font-size:11px;color:var(--text-faint);letter-spacing:.02em}
.wbx-revs-all{margin:14px 0 0;text-align:right;font-size:.88rem}
.wbx-revs-all a{color:var(--accent);text-decoration:none;font-weight:600}
@media (max-width:960px){
  .wbx-case{grid-template-columns:1fr;gap:30px}
  .wbx-rank{margin:-34px 10px 0 auto}
  .wbx-revs{margin-top:64px}
}
@media (max-width:640px){
  .wbx-case-stats{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .wbx-case-stats div{padding:12px 10px}
  .wbx-case-stats b{font-size:1.15rem}
  .wbx-case-stats small{font-size:.7rem}
  .wbx-rank{margin:12px 0 0;width:100%}
  .wbx-revs-head{flex-direction:column;align-items:flex-start}
  .wbx-rev{flex-basis:282px;padding:18px}
}
@media (prefers-reduced-motion:reduce){
  .wbx-track{animation:none}
  .wbx-marquee{overflow-x:auto;-webkit-mask:none;mask:none}
  .wbx-track [aria-hidden="true"]{display:none}
  .wbx-rank li{opacity:1;transform:none}
  .wbx-stars i{background-position:0 0}
  .wbx-rank li em{animation:none!important}
}
/* de grafiek in het klantresultaat schaalt mee op mobiel (de sprong naar 9 moet in beeld staan) */
@media (max-width:760px){.wbx-case-viz .wbp-fig svg,.wbx-case-viz .wbp-fig .wbp-chrome{min-width:0}}
/* accenten voor de featurepagina's van 14-10-2026 */
body.theme-indigo  { --accent:#6366F1; --accent-light:#818CF8; --accent-dark:#4F46E5; --accent-rgb:99,102,241;  --gradient-accent:linear-gradient(135deg,#6366F1 0%,#A5B4FC 100%); }
body.theme-fuchsia { --accent:#D946EF; --accent-light:#E879F9; --accent-dark:#C026D3; --accent-rgb:217,70,239; --gradient-accent:linear-gradient(135deg,#D946EF 0%,#F0ABFC 100%); }
/* het verhaal in het klantresultaat (14-10-2026): vier stappen langs een lijn die zich tekent */
.wbx-case{align-items:start}
@media (min-width:961px){.wbx-case-viz{position:sticky;top:96px}}
.wbx-case-txt>p{margin-bottom:18px}
.wbx-story{list-style:none;margin:0 0 24px;padding:0 0 0 26px;position:relative;display:grid;gap:16px}
.wbx-story::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#34D399,rgba(var(--accent-rgb),.7));transform-origin:top;transform:scaleY(0)}
.wbx-story.wbx-in::before{animation:wbxLine 1.6s cubic-bezier(.22,1,.36,1) .1s forwards}
.wbx-story li{position:relative;opacity:0;transform:translateY(8px)}
.wbx-story.wbx-in li{animation:wbxSlide .6s cubic-bezier(.22,1,.36,1) calc(200ms + var(--i)*260ms) forwards}
.wbx-story li::before{content:"";position:absolute;left:-26px;top:5px;width:14px;height:14px;border-radius:50%;
  background:var(--midnight,#0A0F1A);border:2px solid #34D399;box-shadow:0 0 0 4px rgba(52,211,153,.12)}
.wbx-story li:last-child::before{background:#34D399}
.wbx-story b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#6EE7B7;margin-bottom:4px}
.wbx-story span{display:block;color:var(--text-muted);line-height:1.65;font-size:.95rem}
.wbx-story li:last-child span{color:var(--text-body,rgba(255,255,255,.88))}
.wbx-story[data-rise]{opacity:1;transform:none}
.wbx-story[data-rise].wbx-in{animation:none}
@keyframes wbxLine{to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.wbx-story::before{transform:none}.wbx-story li{opacity:1;transform:none}}
/* concurrenten van klanten: nooit bij naam, alleen geblurd (Joost 14-10-2026) */
.wbx-blur{filter:blur(5px);opacity:.8;user-select:none;pointer-events:none;letter-spacing:.02em}
/* klantresultaten in tabbladen (14-10-2026): The Human Edge en Schade Professionals */
.wbx-cases-head{max-width:1140px;margin:0 auto 34px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px 28px;flex-wrap:wrap}
.wbx-cases-head .wbp-label{margin-bottom:6px}
.wbx-cases-head p{margin:0;max-width:420px;color:var(--text-muted);font-size:.95rem;line-height:1.55}
.wbx-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(600px,100%)}
.wbx-tab{display:flex;align-items:center;gap:12px;min-width:0;text-align:left;padding:12px 14px;border-radius:16px;font:inherit;cursor:pointer;
  border:1px solid var(--card-border);background:rgba(255,255,255,.02);color:var(--text-muted);
  transition:border-color .3s,background .3s,box-shadow .3s,transform .3s var(--ease-out)}
.wbx-tab:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2)}
.wbx-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wbx-tab>span:last-child{min-width:0}
.wbx-tab b{display:block;color:var(--white);font-size:.95rem;line-height:1.25}
.wbx-tab small{display:block;margin-top:3px;font-size:.8rem;line-height:1.3;color:var(--text-muted)}
.wbx-tab .wbx-case-logo{flex:0 0 40px;height:40px;opacity:.55;filter:saturate(.4);box-shadow:none;transition:opacity .3s,filter .3s,box-shadow .3s}
.wbx-tab[aria-selected="true"]{border-color:rgba(52,211,153,.5);background:linear-gradient(135deg,rgba(52,211,153,.14),rgba(52,211,153,.03));
  box-shadow:0 14px 36px rgba(52,211,153,.12)}
.wbx-tab[aria-selected="true"] small{color:#6EE7B7}
.wbx-tab[aria-selected="true"] .wbx-case-logo{opacity:1;filter:none;box-shadow:0 8px 26px rgba(52,211,153,.28)}
.wbx-case-logo.sp{background:linear-gradient(135deg,#60A5FA,#BFDBFE)}
.wbx-tab[aria-selected="true"] .wbx-case-logo.sp{box-shadow:0 8px 26px rgba(96,165,250,.3)}
.wbx-case-panel:not([hidden]){animation:wbxPanel .55s cubic-bezier(.22,1,.36,1) both}
@keyframes wbxPanel{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wbx-case-sec{margin:0 0 12px;font-size:.84rem;color:var(--text-muted);line-height:1.45}
.wbx-case-sec b{color:var(--white);font-weight:600}
/* AI-bezoek per week: balken die vollopen */
.wbx-visits ol{gap:10px;margin-bottom:12px}
.wbx-visits li{display:grid;grid-template-columns:92px minmax(0,1fr) 46px;gap:10px;align-items:center;padding:0;background:none;font-size:.86rem}
.wbx-visits li small{font-size:11.5px;color:var(--text-muted);white-space:nowrap}
.wbx-visits li i{display:block;flex:none;width:auto;height:10px;border-radius:6px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.wbx-visits li i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--w);border-radius:6px;
  background:linear-gradient(90deg,rgba(52,211,153,.4),#34D399);transform:scaleX(0);transform-origin:left}
.wbx-visits.wbx-in li i::after{animation:wbxBar 1.1s cubic-bezier(.22,1,.36,1) calc(350ms + var(--i)*220ms) forwards}
.wbx-visits li b{color:var(--white);text-align:right;font-variant-numeric:tabular-nums}
.wbx-visits li.me{background:none;border:0;font-weight:400}
.wbx-visits li.me b{color:#6EE7B7}
.wbx-visits .wbx-rank-eng i{width:10px;height:10px;border-radius:50%;display:block}
@keyframes wbxBar{to{transform:scaleX(1)}}
@media (max-width:640px){
  .wbx-cases-head{margin-bottom:24px}
  .wbx-tabs{gap:8px}
  .wbx-tab{padding:10px;gap:9px;border-radius:14px}
  .wbx-tab .wbx-case-logo{flex-basis:34px;height:34px;font-size:11px;border-radius:10px}
  .wbx-tab b{font-size:.84rem}
  .wbx-tab small{font-size:.72rem}
  .wbx-visits li{grid-template-columns:84px minmax(0,1fr) 42px}
}
@media (prefers-reduced-motion:reduce){.wbx-case-panel:not([hidden]){animation:none}.wbx-visits li i::after{transform:none}}
/* hero met de UI ernaast (Joost 14-10-2026: "Ik heb liever die UI in de hero, aan de rechterkant.")
   Tekst links, figuur rechts, het korte antwoord eronder. Onder 1060px onder elkaar, tekst gecentreerd.
   De hero zelf blijft over de volle breedte lopen (gloed en korrel); de inhoud blijft binnen 1240px. */
.wbp-hero.wbp-hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:56px;align-items:center;
  padding-left:max(24px,calc((100% - 1240px) / 2));padding-right:max(24px,calc((100% - 1240px) / 2));padding-bottom:64px}
.wbp-hero-split .wbp-hero-in{max-width:none;margin:0;text-align:left}
.wbp-hero-split h1{font-size:clamp(2.1rem,3.7vw,3.25rem)}
.wbp-hero-split .wbp-lead{margin:0 0 30px;max-width:580px;font-size:1.08rem}
.wbp-hero-split .wbp-cta{justify-content:flex-start}
.wbp-hero-fig{position:relative;z-index:2;min-width:0}
.wbp-hero-fig::before{content:"";position:absolute;inset:10% -3% -8% 8%;border-radius:48px;background:rgba(var(--accent-rgb),.18);
  filter:blur(70px);z-index:-1;pointer-events:none}
.wbp-hero-fig .wbp-fig{margin:0;box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03)}
@media (max-width:1060px){
  .wbp-hero.wbp-hero-split{grid-template-columns:minmax(0,1fr);gap:42px}
  .wbp-hero-split .wbp-hero-in{text-align:center;max-width:780px;margin:0 auto}
  .wbp-hero-split .wbp-lead{margin:0 auto 30px}
  .wbp-hero-split .wbp-cta{justify-content:center}
  .wbp-hero-fig{width:100%;max-width:780px;margin:0 auto}
}
@media (max-width:960px){.wbp-hero.wbp-hero-split{padding-left:20px;padding-right:20px}}
/* op mobiel schaalt de figuur in de hero mee in plaats van opzij te scrollen */
@media (max-width:720px){.wbp-hero-fig .wbp-fig{overflow:hidden}.wbp-hero-fig .wbp-fig svg,.wbp-hero-fig .wbp-fig .wbp-chrome{min-width:0}}
/* de MCP-animatie in de hero: kaarten onder elkaar, de straal verticaal (zoals op mobiel) */
.wbp-hero-split .mcp-connect{grid-template-columns:minmax(0,1fr);gap:4px;padding:0}
.wbp-hero-split .mcp-beam{height:48px;width:60px;margin:0 auto;transform:rotate(90deg)}
.wbx-visits .wbx-rank-eng{gap:6px;flex-wrap:nowrap}
.wbx-visits .wbx-rank-eng span{padding:3px 8px;font-size:11px;gap:5px;white-space:nowrap}
@media (max-width:380px){.wbx-visits .wbx-rank-eng{flex-wrap:wrap}}
.wbp-hero-split + .wbp-sec.tight{padding-top:8px}