/* ============================================================
   WILDBOS.COM — platformpagina's (wbp-)
   Gedeelde laag voor /platform/* en /pricing.
   Tokens komen uit style.css; hier staat alleen de opmaak en de
   animatiegrammatica die alle featurepagina's delen.
   Aangemaakt 22-9-2026.
   ============================================================ */

/* ---- accenten per pagina (style.css heeft oranje, groen, blauw) ---- */
body.theme-teal   { --accent:#14B8A6; --accent-light:#2DD4BF; --accent-dark:#0D9488; --accent-rgb:20,184,166;  --gradient-accent:linear-gradient(135deg,#14B8A6 0%,#2DD4BF 100%); }
body.theme-violet { --accent:#8B5CF6; --accent-light:#A78BFA; --accent-dark:#7C3AED; --accent-rgb:139,92,246;  --gradient-accent:linear-gradient(135deg,#8B5CF6 0%,#A78BFA 100%); }
body.theme-rose   { --accent:#F43F5E; --accent-light:#FB7185; --accent-dark:#E11D48; --accent-rgb:244,63,94;   --gradient-accent:linear-gradient(135deg,#F43F5E 0%,#FB7185 100%); }
body.theme-amber  { --accent:#EAB308; --accent-light:#FACC15; --accent-dark:#CA8A04; --accent-rgb:234,179,8;   --gradient-accent:linear-gradient(135deg,#EAB308 0%,#FACC15 100%); }
body.theme-sky    { --accent:#0EA5E9; --accent-light:#38BDF8; --accent-dark:#0284C7; --accent-rgb:14,165,233;  --gradient-accent:linear-gradient(135deg,#0EA5E9 0%,#38BDF8 100%); }

/* ---- hero ---- */
.wbp-hero{padding:34px 24px 54px;position:relative;overflow:hidden}
.wbp-hero::before{content:"";position:absolute;top:-280px;left:50%;transform:translateX(-50%);width:1150px;height:940px;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.11) 0%,rgba(var(--accent-rgb),.03) 38%,transparent 68%);
  border-radius:50%;pointer-events:none;animation:wbpBreathe 9s ease-in-out infinite}
@keyframes wbpBreathe{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
.wbp-hero-in{position:relative;z-index:2;max-width:900px;margin:0 auto;text-align:center}
.wbp-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.04);
  border:1px solid var(--card-border);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:26px}
.wbp-badge i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:wbpPulse 2.2s infinite}
@keyframes wbpPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55)}70%{box-shadow:0 0 0 9px rgba(var(--accent-rgb),0)}}
.wbp-hero h1{font-size:clamp(2.2rem,5.2vw,3.85rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:20px}
.wbp-hero .wbp-lead{font-size:1.125rem;color:var(--text-body);line-height:1.7;max-width:680px;margin:0 auto 32px}
.wbp-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.wbp-cta-inline{justify-content:flex-start;align-items:center;gap:16px;margin-top:28px}
.wbp-cta-note{font-size:13px;color:var(--text-faint)}
.wbp-note{margin-top:18px;font-size:13.5px;color:var(--text-faint)}

/* ---- antwoordblok boven de vouw (AI leest dit als definitie) ---- */
.wbp-answer{max-width:860px;margin:0 auto;padding:26px 30px;border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.07),rgba(255,255,255,.02));
  border:1px solid rgba(var(--accent-rgb),.22);text-align:left}
.wbp-answer h2{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;font-weight:700}
.wbp-answer p{color:var(--text-secondary);font-size:1.02rem;line-height:1.72;margin:0}
.wbp-answer p + p{margin-top:12px;color:var(--text-muted);font-size:.95rem}

/* ---- secties ---- */
.wbp-sec{padding:100px 24px;position:relative}
.wbp-sec.alt{background:var(--surface)}
.wbp-sec.tight{padding:64px 24px}
.wbp-head{max-width:760px;margin:0 auto 48px;text-align:center}
.wbp-head h2{font-size:clamp(1.7rem,3.2vw,2.35rem);letter-spacing:-.02em;margin-bottom:14px}
.wbp-head p{color:var(--text-muted);line-height:1.7}
.wbp-label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:600}

.wbp-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.28fr);gap:60px;align-items:center;max-width:1200px;margin:0 auto}
.wbp-split.rev{grid-template-columns:minmax(0,1.28fr) minmax(0,.92fr)}
.wbp-split.rev .wbp-copy{order:2}
.wbp-copy h2{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;margin-bottom:16px}
.wbp-copy>p{color:var(--text-body);line-height:1.72;margin-bottom:24px}
.wbp-points{list-style:none;padding:0;margin:0;display:grid;gap:19px}
.wbp-points li{padding-left:20px;border-left:2px solid rgba(var(--accent-rgb),.35)}
.wbp-points b{display:block;color:var(--white);font-size:1rem;margin-bottom:5px;font-weight:600}
.wbp-points span{color:var(--text-muted);font-size:.945rem;line-height:1.62}

/* ---- figuurlijst ---- */
.wbp-figrow{display:grid;gap:22px}
.wbp-fig{border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 40px 90px rgba(0,0,0,.45);background:#0A0A12;opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.wbp-fig.wbp-in{opacity:1;transform:none}
.wbp-fig-light{background:#fff}
.wbp-fig svg{display:block;width:100%;height:auto}
.wbp-chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#12121C;border-bottom:1px solid rgba(255,255,255,.06)}
.wbp-chrome.l{background:#F1F3F7;border-bottom:1px solid #E4E7ED}
.wbp-chrome i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.wbp-chrome.l i{background:#D4D8E0}
.wbp-chrome span{margin-left:10px;font-size:11.5px;letter-spacing:.03em;color:rgba(255,255,255,.35)}
.wbp-chrome.l span{color:#98A0AE}
.wbp-caption{font-size:12.5px;color:var(--text-faint);margin-top:10px;text-align:center}

/* ---- SVG-typografie (donker en licht) ---- */
.wbp-t-h{font:600 18px Inter,sans-serif;fill:#fff}
.wbp-t-hl{font:600 15px Inter,sans-serif;fill:#1F2430}
.wbp-t-sub{font:400 12.5px Inter,sans-serif;fill:#8A8A9C}
.wbp-t-subl{font:400 12.5px Inter,sans-serif;fill:#8A93A3}
.wbp-t-lbl{font:600 9.5px Inter,sans-serif;fill:#8A8A9C;letter-spacing:.09em}
.wbp-t-lbll{font:600 9.5px Inter,sans-serif;fill:#8A93A3;letter-spacing:.09em}
.wbp-t-num{font:600 26px Inter,sans-serif;fill:#fff;font-variant-numeric:tabular-nums}
.wbp-t-numl{font:600 25px Inter,sans-serif;fill:#1F2430;font-variant-numeric:tabular-nums}
.wbp-t-big{font:700 38px Inter,sans-serif;fill:#fff;font-variant-numeric:tabular-nums}
.wbp-t-bigl{font:700 36px Inter,sans-serif;fill:#1F2430;font-variant-numeric:tabular-nums}
.wbp-t-xs{font:400 10.5px Inter,sans-serif;fill:#7A7A8C}
.wbp-t-xsl{font:400 10.5px Inter,sans-serif;fill:#8A93A3}
.wbp-t-s{font:400 12.5px Inter,sans-serif;fill:#C7C9D4}
.wbp-t-sl{font:400 12.5px Inter,sans-serif;fill:#39404E}
.wbp-t-mono{font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;fill:#9AA0B0}
.wbp-t-monol{font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;fill:#5A6273}
.wbp-t-ok{font:600 12px Inter,sans-serif;fill:#34D399}
.wbp-t-btn{font:600 11px Inter,sans-serif;fill:#fff}
.wbp-t-badge{font:700 8.5px Inter,sans-serif;fill:#fff;letter-spacing:.06em;text-anchor:middle}

/* ---- animatiegrammatica: alles start zodra .wbp-in erop staat ---- */
.wbp-draw{stroke-dasharray:var(--len,700);stroke-dashoffset:var(--len,700)}
.wbp-in .wbp-draw{animation:wbpDraw 1.7s var(--ease-out) var(--d,.15s) forwards}
@keyframes wbpDraw{to{stroke-dashoffset:0}}

.wbp-fade{opacity:0}
.wbp-in .wbp-fade{animation:wbpFade .6s ease var(--d,0ms) forwards}
@keyframes wbpFade{to{opacity:1}}

.wbp-rise{opacity:0}
.wbp-in .wbp-rise{animation:wbpRise .6s var(--ease-out) var(--d,0ms) forwards}
@keyframes wbpRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.wbp-grow{width:0}
.wbp-in .wbp-grow{animation:wbpGrow 1.05s cubic-bezier(.2,.7,.3,1) var(--d,0ms) forwards}
@keyframes wbpGrow{to{width:var(--w)}}

.wbp-col{opacity:.3}
.wbp-in .wbp-col{animation:wbpCol .85s cubic-bezier(.2,.7,.3,1) var(--d,0ms) forwards}
@keyframes wbpCol{to{opacity:1;height:var(--h);y:var(--y)}}

.wbp-pop{opacity:0;transform-box:fill-box;transform-origin:center}
.wbp-in .wbp-pop{animation:wbpPop .5s var(--ease-out) var(--d,0ms) forwards}
@keyframes wbpPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

.wbp-in .wbp-ping{animation:wbpPing 2.4s ease-in-out var(--d,0ms) infinite}
@keyframes wbpPing{0%,100%{r:4.5}50%{r:7.5}}

.wbp-in .wbp-blink{animation:wbpBlink 1.9s ease-in-out infinite}
@keyframes wbpBlink{0%,100%{opacity:1}50%{opacity:.3}}

.wbp-type{width:0}
.wbp-in .wbp-type{animation:wbpType 1.8s steps(28) var(--d,.3s) forwards}
@keyframes wbpType{to{width:var(--w)}}

.wbp-in .wbp-sweep{animation:wbpSweep 3.2s linear var(--d,0ms) infinite}
@keyframes wbpSweep{0%{transform:translateX(0);opacity:0}8%{opacity:.85}92%{opacity:.85}100%{transform:translateX(var(--x,600px));opacity:0}}

.wbp-in .wbp-float{animation:wbpFloat 7s ease-in-out var(--d,0ms) infinite}
@keyframes wbpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.wbp-swap-a,.wbp-swap-b{opacity:0}
.wbp-in .wbp-swap-a{animation:wbpFade .4s ease .2s forwards,wbpOut .4s ease calc(1500ms + var(--d,0ms)) forwards}
.wbp-in .wbp-swap-b{animation:wbpFade .4s ease calc(1700ms + var(--d,0ms)) forwards}
@keyframes wbpOut{to{opacity:0}}

/* ---- cijferbalk ---- */
.wbp-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-lg);overflow:hidden;max-width:1020px;margin:0 auto}
.wbp-rail div{background:var(--midnight);padding:30px 22px;text-align:center}
.wbp-sec.alt .wbp-rail div{background:var(--surface)}
.wbp-rail b{display:block;font-size:2.15rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:7px;color:var(--white)}
.wbp-rail span{font-size:13px;color:var(--text-muted);line-height:1.5;display:block}

/* ---- kaartroosters ---- */
.wbp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1140px;margin:0 auto}
.wbp-grid.two{grid-template-columns:repeat(2,1fr);max-width:900px}
.wbp-grid.four{grid-template-columns:repeat(4,1fr)}
.wbp-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);padding:26px;
  transition:border-color .3s,transform .3s,background .3s}
.wbp-card:hover{border-color:rgba(var(--accent-rgb),.3);transform:translateY(-3px);background:var(--card-hover-bg)}
.wbp-card .ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-rgb),.12);color:var(--accent);margin-bottom:16px}
.wbp-card .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wbp-card h3{font-size:1.05rem;margin-bottom:9px;letter-spacing:-.01em}
.wbp-card p{font-size:.93rem;color:var(--text-muted);line-height:1.65;margin:0}
.wbp-card .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.88rem;color:var(--accent);font-weight:600}
.wbp-card a.more:hover{gap:10px;transition:gap .2s}
a.wbp-card{display:block;color:inherit;text-decoration:none}

/* ---- stappen ---- */
.wbp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1140px;margin:0 auto;counter-reset:s}
.wbp-steps div{position:relative;padding-top:42px}
.wbp-steps div::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
  background:rgba(var(--accent-rgb),.13);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.3)}
.wbp-steps b{display:block;margin-bottom:8px;font-size:1.02rem}
.wbp-steps p{font-size:.92rem;color:var(--text-muted);line-height:1.62;margin:0}

/* ---- prijstabel ---- */
.wbp-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1040px;margin:0 auto}
.wbp-pack{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:28px;position:relative;transition:border-color .3s,transform .3s}
.wbp-pack:hover{border-color:rgba(var(--accent-rgb),.38);transform:translateY(-3px)}
.wbp-pack.hot{border-color:rgba(var(--accent-rgb),.42)}
.wbp-pack .tag{position:absolute;top:-11px;left:28px;background:var(--accent);color:var(--midnight);
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.wbp-pack h3{font-size:1.02rem;margin-bottom:10px;color:var(--text-secondary)}
.wbp-pack .price{font-size:2.35rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:8px}
.wbp-pack .price small{font-size:.95rem;font-weight:500;color:var(--text-muted);letter-spacing:0}
.wbp-pack .cr{font-size:.92rem;color:var(--text-muted);margin-bottom:18px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.wbp-pack .cr em{font-style:normal;background:rgba(var(--accent-rgb),.13);color:var(--accent);
  font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:6px}
.wbp-pack ul{list-style:none;padding:18px 0 0;margin:0;border-top:1px solid rgba(255,255,255,.07);display:grid;gap:9px}
.wbp-pack li{font-size:.9rem;color:var(--text-muted);padding-left:19px;position:relative;line-height:1.55}
.wbp-pack li::before{content:"\2713";position:absolute;left:0;color:var(--accent);font-size:12px}
.wbp-vat{text-align:center;font-size:13px;color:var(--text-faint);margin-top:26px}

.wbp-table{max-width:1020px;margin:0 auto;border:1px solid var(--card-border);border-radius:var(--radius-lg);overflow:hidden}
.wbp-table div{display:flex;justify-content:space-between;gap:20px;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.05);font-size:.95rem}
.wbp-table div:last-child{border-bottom:0}
.wbp-table div span:first-child{color:var(--text-body)}
.wbp-table div span:last-child{color:var(--white);font-weight:600;white-space:nowrap}
.wbp-table div.hd{background:rgba(255,255,255,.03);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase}
.wbp-table div.hd span{color:var(--muted)!important;font-weight:600}

/* ---- faq ---- */
.wbp-faq{max-width:840px;margin:0 auto;display:grid;gap:12px}
.wbp-faq details{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:18px 22px}
.wbp-faq summary{cursor:pointer;font-weight:600;color:var(--text-secondary);list-style:none;display:flex;justify-content:space-between;gap:16px}
.wbp-faq summary::-webkit-details-marker{display:none}
.wbp-faq summary::after{content:"+";color:var(--accent);font-weight:400;font-size:20px;line-height:1}
.wbp-faq details[open] summary::after{content:"\2013"}
.wbp-faq p{margin:14px 0 0;font-size:.95rem;color:var(--text-muted);line-height:1.68}

/* ---- kruislinks ---- */
.wbp-links{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1140px;margin:0 auto}
.wbp-links a{display:block;padding:18px 20px;border-radius:var(--radius-md);background:var(--card-bg);
  border:1px solid var(--card-border);color:var(--text-secondary);text-decoration:none;font-size:.94rem;font-weight:600;
  transition:border-color .25s,background .25s,transform .25s}
.wbp-links a:hover{border-color:rgba(var(--accent-rgb),.32);background:var(--card-hover-bg);transform:translateY(-2px)}
.wbp-links a span{display:block;font-weight:400;font-size:.85rem;color:var(--text-faint);margin-top:5px;line-height:1.5}

/* ---- slot ---- */
.wbp-final{text-align:center;max-width:740px;margin:0 auto}
.wbp-final h2{font-size:clamp(1.9rem,3.6vw,2.6rem);letter-spacing:-.02em;margin-bottom:16px}
.wbp-final p{color:var(--text-body);margin-bottom:30px;font-size:1.05rem}

/* ---- kruimelpad ---- */
.wbp-crumb{max-width:1200px;margin:0 auto;padding:98px 24px 0;position:relative;z-index:3;font-size:12.5px;color:var(--text-faint)}
.wbp-crumb a{color:var(--text-muted);text-decoration:none}
.wbp-crumb a:hover{color:var(--accent)}

@media (max-width:1060px){
  .wbp-grid,.wbp-grid.four{grid-template-columns:repeat(2,1fr)}
  .wbp-links{grid-template-columns:repeat(2,1fr)}
  .wbp-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .wbp-split,.wbp-split.rev{grid-template-columns:1fr;gap:34px}
  .wbp-split.rev .wbp-copy{order:0}
  .wbp-packs{grid-template-columns:1fr}
  .wbp-rail{grid-template-columns:repeat(2,1fr)}
  .wbp-sec{padding:72px 20px}
  .wbp-hero{padding:26px 20px 40px}
  .wbp-crumb{padding-top:86px}
  .wbp-answer{padding:22px}
}
@media (max-width:720px){
  .wbp-grid,.wbp-grid.two,.wbp-grid.four,.wbp-steps{grid-template-columns:1fr}
  .wbp-fig{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
  .wbp-fig svg,.wbp-fig .wbp-chrome{min-width:600px}
  .wbp-table div{flex-direction:column;gap:4px}
  .wbp-table div span:last-child{color:var(--accent)}
}

@media (prefers-reduced-motion:reduce){
  .wbp-hero::before{animation:none}
  .wbp-fig{opacity:1;transform:none}
  .wbp-draw{stroke-dashoffset:0}
  .wbp-fade,.wbp-rise,.wbp-pop,.wbp-swap-a{opacity:1}
  .wbp-swap-b{opacity:0}
  .wbp-grow,.wbp-type{width:var(--w)}
  .wbp-in .wbp-ping,.wbp-in .wbp-blink,.wbp-in .wbp-sweep,.wbp-in .wbp-float,
  .wbp-in .wbp-swap-a,.wbp-in .wbp-swap-b{animation:none}
  .wbp-badge i{animation:none}
}