/* Platform-sectie (uit de homepage-test :8150, 11 nov 2026): 3D MacBook met live
   platform-demo en een nep-cursor die zelf door de modules klikt. Alles onder .sfp. */
.sfp{--red:#C8202A;--red-b:#E83642;--orange:#FF8A3D;--s700:#111425;--s600:#1B1F33;--s500:#262B44;--txt-2:#A9AEC4;--txt-3:#6E738C;--line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.13);--ease:cubic-bezier(.22,1,.36,1);
  position:relative;padding:clamp(70px,8.5vw,120px) 0;isolation:isolate;overflow-x:clip;color:#F4F5FA;font-family:Roboto,system-ui,sans-serif}
.sfp::before{content:"";position:absolute;width:900px;height:700px;top:50%;left:-300px;translate:0 -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(232,54,66,.16),transparent);filter:blur(30px);pointer-events:none;z-index:-1}
.sfp .wrap{width:min(1260px,100% - 32px);margin-inline:auto}
.sfp h2,.sfp h3,.sfp h4,.sfp h5,.sfp h6{font-family:Poppins,sans-serif;letter-spacing:-.03em;line-height:1.04;font-weight:700;color:#fff;margin:0}
.sfp p{margin:0}
.sfp button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sfp a{color:inherit;text-decoration:none}
.sfp code,.sfp .bar .url,.sfp .pf-cap,.sfp .pfl .ix{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace!important}
.sfp /* WINDOWS */
.win{position:relative;border-radius:22px;background:linear-gradient(180deg,#0d1020,#090b16);border:1px solid var(--line-2);box-shadow:0 70px 140px -50px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4),0 0 120px -40px rgba(232,54,66,.35)}
.sfp .win>.bar{display:flex;align-items:center;gap:7px;height:46px;padding:0 16px;border-bottom:1px solid var(--line)}
.sfp .bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.sfp .bar i:nth-child(2){background:#febc2e}
.sfp .bar i:nth-child(3){background:#28c840}
.sfp .bar .url{margin:0 auto;display:flex;align-items:center;gap:8px;padding:5px 14px;border-radius:8px;background:rgba(255,255,255,.04);font:500 12px "JetBrains Mono";color:var(--txt-3);max-width:70%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sfp .bar .url::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80}
.sfp .appg{display:grid;grid-template-columns:220px 1fr;min-height:540px}
.sfp .side{position:relative;padding:16px 12px;border-right:1px solid var(--line);display:grid;align-content:start;gap:2px}
.sfp .side .brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.sfp .side .brand img{width:32px;height:32px;padding:7px;border-radius:10px;background:var(--red);box-shadow:0 0 20px rgba(232,54,66,.5)}
.sfp .side .brand b{font:600 13px Poppins;display:block}
.sfp .side .brand small{font-size:11px;color:var(--txt-3)}
.sfp .side h6{font:600 10px Poppins;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);padding:14px 10px 6px}
.sfp .side button{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:10px;font:500 13px Poppins;color:var(--txt-2);text-align:left;transition:color .3s}
.sfp .side button span{display:flex;align-items:center;gap:10px}
.sfp .side button span::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--txt-3);transition:all .3s}
.sfp .side button:hover,.sfp .side button.on{color:#fff}
.sfp .side button.on span::before{background:var(--red-b);box-shadow:0 0 8px var(--red-b)}
.sfp .side em{font-style:normal;font:600 10px Poppins;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08)}
.sfp .side .hl{position:absolute;left:12px;right:12px;height:37px;border-radius:10px;background:rgba(232,54,66,.13);border:1px solid rgba(232,54,66,.25);transition:top .55s var(--ease);pointer-events:none}
.sfp .main{padding:22px;min-width:0}
.sfp .mtop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.sfp .mtop h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
.sfp .mtop small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt-3);margin-top:4px}
.sfp .mtop small::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ade80;animation:sfp_pulse 2s infinite}
@keyframes sfp_pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}100%{box-shadow:0 0 0 8px rgba(74,222,128,0)}}
.sfp .seg{position:relative;display:flex;padding:3px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.sfp .seg button{position:relative;z-index:1;padding:6px 11px;border-radius:8px;font:500 12px Poppins;color:var(--txt-3);transition:color .3s}
.sfp .seg button.on{color:#fff}
.sfp .seg .sp{position:absolute;top:3px;bottom:3px;border-radius:8px;background:rgba(255,255,255,.1);transition:left .5s var(--ease),width .5s var(--ease)}
.sfp .view{display:none}
.sfp .view.on{display:block;animation:sfp_viewIn .7s var(--ease) both}
@keyframes sfp_viewIn{from{opacity:0;transform:translateY(12px);filter:blur(6px)}}
.sfp .kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px}
.sfp .kpi{position:relative;padding:12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);overflow:hidden}
.sfp .kpi small{display:flex;align-items:center;gap:6px;font:600 10px Poppins;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.sfp .kpi small::before{content:"";width:5px;height:5px;border-radius:1px;background:var(--red-b)}
.sfp .kpi b{display:block;font:700 20px/1.2 Poppins;letter-spacing:-.03em;margin:6px 0 2px;transition:color .4s}
.sfp .kpi b.tick{color:#4ade80}
.sfp .kpi em{font-style:normal;font:600 11px Poppins;color:#4ade80}
.sfp .kpi.flash::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(74,222,128,.14),transparent);animation:sfp_sweep .9s var(--ease) forwards}
@keyframes sfp_sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.sfp .two{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
.sfp .box{padding:16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line);min-width:0}
.sfp .box h4{font-size:14px;font-weight:600;letter-spacing:-.01em}
.sfp .box small{font-size:11px;color:var(--txt-3)}
.sfp .chart{width:100%;height:170px;margin-top:10px;display:block}
.sfp .items{display:grid;gap:8px;margin-top:12px}
.sfp .item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:12px;color:var(--txt-3);transition:transform .5s var(--ease),border-color .3s,background .3s}
.sfp .item:hover{transform:translateX(4px);border-color:var(--line-2);background:rgba(255,255,255,.05)}
.sfp .item code{font:500 11px "JetBrains Mono";color:var(--txt-3)}
.sfp .item b{display:block;font:600 13px Poppins;color:#fff}
.sfp .st{font:600 10px Poppins;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:999px;white-space:nowrap}
.sfp .st.prog{background:rgba(91,108,255,.18);color:#9aa7ff}
.sfp .st.rev{background:rgba(255,201,77,.15);color:#ffc94d}
.sfp .st.todo{background:rgba(255,255,255,.07);color:var(--txt-2)}
.sfp .st.done{background:rgba(74,222,128,.15);color:#4ade80}
.sfp .kan{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sfp .kcol{padding:10px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid var(--line);display:grid;gap:8px;align-content:start;min-height:320px;transition:background .3s,border-color .3s}
.sfp .kcol.over{background:rgba(232,54,66,.07);border-color:rgba(232,54,66,.5);border-style:dashed}
.sfp .kcol h5{display:flex;justify-content:space-between;align-items:center;font:600 12px Poppins;color:var(--txt-2);padding:4px 4px 6px}
.sfp .kcol h5 em{font-style:normal;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11px}
.sfp .kc{padding:12px;border-radius:12px;background:var(--s600);border:1px solid var(--line);font-size:12px;color:var(--txt-3);transition:transform .45s var(--ease),border-color .3s,box-shadow .45s,opacity .3s;user-select:none}
.sfp .kc:hover{transform:translateY(-3px);border-color:rgba(232,54,66,.4);box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
@keyframes sfp_land{0%{transform:scale(1.06);box-shadow:0 0 0 3px rgba(232,54,66,.6)}100%{transform:none}}
.sfp .kc .t{font:600 10px Poppins;letter-spacing:.08em;text-transform:uppercase;color:var(--tc,#ff8a92)}
.sfp .kc b{display:block;font:600 13px/1.35 Poppins;color:#fff;margin:5px 0 10px}
.sfp .kc .f{display:flex;justify-content:space-between;align-items:center;min-height:24px}
.sfp .av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 9px Poppins;color:#fff;background:var(--s500);border:1px solid var(--line-2);flex:none}
.sfp #pWin .appg{pointer-events:none;user-select:none}
.sfp .mbp{position:relative;width:100%}
.sfp .mbp-img{position:relative;z-index:2;display:block;width:100%;height:auto;pointer-events:none;user-select:none}
.sfp .mbp-scr{position:absolute;z-index:1;left:9.437%;top:10.669%;width:81.127%;height:78.662%;overflow:hidden;border-radius:1.2% / 1.8%;background:#05060d}
.sfp .mbp-vp{position:absolute;left:0;top:0;width:1100px;height:711px;transform:scale(var(--s,.8));transform-origin:0 0;background:radial-gradient(70% 60% at 18% 100%,rgba(232,54,66,.35),transparent 70%),radial-gradient(60% 60% at 90% 10%,rgba(123,140,255,.28),transparent 70%),radial-gradient(50% 50% at 60% 70%,rgba(155,93,229,.18),transparent 70%),linear-gradient(160deg,#0b0f24,#05060d 60%)}
.sfp .mbar{position:absolute;left:0;right:0;top:0;height:26px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;background:rgba(10,12,24,.55);backdrop-filter:blur(20px);font:500 12.5px -apple-system,BlinkMacSystemFont,"Helvetica Neue",Roboto,sans-serif;color:#fff;z-index:3}
.sfp .mbar .ml,.sfp .mbar .mr{display:flex;align-items:center;gap:16px}
.sfp .mbar .ml img{width:14px;height:14px}
.sfp .mbar .ml b{font-weight:700}
.sfp .mbar .ml span{opacity:.92}
.sfp .mbar .bat{position:relative;width:22px;height:11px;border:1px solid rgba(255,255,255,.7);border-radius:3px;padding:1px}
.sfp .mbar .bat::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:4px;border-radius:0 1px 1px 0;background:rgba(255,255,255,.7)}
.sfp .mbar .bat i{display:block;width:78%;height:100%;border-radius:1px;background:#fff}
.sfp .mbp #pWin{position:absolute;left:26px;right:26px;top:50px;border-radius:12px;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.5)}
.sfp .mbp .appg{grid-template-columns:220px 1fr!important}
.sfp .mbp .side{display:grid!important}
.sfp .mbp .two{grid-template-columns:1.25fr 1fr!important}
.sfp .mbp .kpis{grid-template-columns:repeat(6,1fr)!important}
.sfp .mbp [data-view="sales"] .kan{grid-template-columns:repeat(4,1fr)!important}
.sfp .mbp .kan .kcol{display:grid!important}
.sfp .pf{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.sfp .pf-txt{display:grid;gap:16px;justify-items:start}
.sfp .pf-txt .body{font-size:16px}
.sfp .pf-txt .h2{font-size:clamp(32px,3.3vw,48px)}
.sfp .pfl{list-style:none;margin:2px 0 2px;padding:0;width:100%;display:grid;border-top:1px solid var(--line)}
.sfp .pfl li{position:relative;display:grid;grid-template-columns:34px 1fr;align-items:start;padding:9px 0 9px 14px;border-bottom:1px solid var(--line);transition:background .5s}
.sfp .pfl li::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--red-b);box-shadow:0 0 12px var(--red-b);transform:scaleY(0);transition:transform .5s var(--ease)}
.sfp .pfl .ix{font:500 11px "JetBrains Mono";color:var(--txt-3);padding-top:4px;transition:color .4s}
.sfp .pfl b{display:block;font:600 15px Poppins;color:var(--txt-3);transition:color .4s}
.sfp .pfl p{font-size:14px;color:var(--txt-2);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .4s,margin .6s var(--ease)}
.sfp .pfl li.on{background:linear-gradient(90deg,rgba(232,54,66,.07),transparent 70%)}
.sfp .pfl li.on::before{transform:none}
.sfp .pfl li.on .ix{color:var(--red-b)}
.sfp .pfl li.on b{color:#fff}
.sfp .pfl li.on p{max-height:44px;opacity:1;margin-top:4px}
.sfp .pfl .pg{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red-b);transform:scaleX(0);transform-origin:0 0}
.sfp .pfl li.on .pg{animation:sfp_pfpg var(--dur,6s) linear forwards}
@keyframes sfp_pfpg{to{transform:none}}
.sfp .pf-dev{position:relative}
.sfp .pf-glow{position:absolute;left:10%;right:10%;top:12%;bottom:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(232,54,66,.35),transparent);filter:blur(40px);z-index:0;pointer-events:none}
.sfp .pf-dev .mbp{z-index:1;width:110%}
.sfp .pf-dev .mbp-img{filter:drop-shadow(0 28px 30px rgba(0,0,0,.55)) drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.sfp .mbp-sh{position:absolute;z-index:0;left:-10%;right:-10%;bottom:-9%;height:22%;pointer-events:none}
.sfp .mbp-sh::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(170,180,240,.24),rgba(232,54,66,.1) 55%,transparent);filter:blur(8px)}
.sfp .mbp-sh::after{content:"";position:absolute;left:12%;right:12%;top:34%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.95),rgba(0,0,0,.7) 45%,transparent);filter:blur(7px)}
.sfp .pf-cap{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:30px;font:500 12px "JetBrains Mono";color:var(--txt-3)}
.sfp .pf-cap i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:sfp_pulse 2s infinite}
@media (max-width:920px){.sfp .pf{grid-template-columns:minmax(0,1fr)}
.sfp .pf-dev{order:2}
.sfp .pf-dev .mbp{width:100%}
}
.sfp .pcur{position:absolute;left:0;top:0;z-index:20;width:24px;height:24px;pointer-events:none;transform:translate(var(--cx,70%),var(--cy,60%));transition:transform 1.1s cubic-bezier(.65,0,.25,1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.sfp .pcur svg{display:block;transition:transform .15s}
.sfp .pcur.dn svg{transform:scale(.82)}
.sfp .pcur i{position:absolute;left:4px;top:3px;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid rgba(255,255,255,.8);opacity:0;transform:scale(.3)}
.sfp .pcur.dn i{animation:sfp_pclk .55s var(--ease)}
@keyframes sfp_pclk{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}
.sfp #pSide button.fh{color:#fff;background:rgba(255,255,255,.05)}
.sfp .seg button.fh{color:#fff}
.sfp /* === 3D MacBook === */
.mb3d{position:relative;width:114%!important;margin-left:-7%;aspect-ratio:1.5}
.sfp .mb3d .mbp-vp{transform:none!important;position:absolute;inset:0;width:1100px;height:711px}
.sfp /* venster schermvullend (gemaximaliseerd) direct onder de macOS-menubalk */
.mb3d #pWin{left:0;right:0;top:26px;bottom:0;border-radius:0;box-shadow:none;border:0;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column}
.sfp .mb3d #pWin.beam::before{display:none}
.sfp .mb3d #pWin .appg{flex:1;min-height:0}
.sfp .mb3d .mbar{background:rgba(8,10,20,.92)}
.sfp .mb3d .mbar{padding-left:14px;padding-right:14px}
.sfp .mbp-vp .boot{position:absolute;inset:0;z-index:40;background:#000;display:grid;place-items:center;transition:opacity .8s ease}
.sfp .mbp-vp .boot img{width:64px;opacity:0;transition:opacity .5s}
.sfp .mbp-vp .boot.logo img{opacity:.9}
.sfp .mbp-vp .boot.off{opacity:0;pointer-events:none}
@media (max-width:920px){.sfp .mb3d{width:100%!important;margin-left:0}
}
.sfp .tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font:600 11px/1 Poppins;letter-spacing:.14em;text-transform:uppercase;color:var(--c2,#ff8a92);background:color-mix(in srgb,var(--c,#E83642) 11%,transparent);border:1px solid color-mix(in srgb,var(--c,#E83642) 28%,transparent)}
.sfp .tag i{width:6px;height:6px;border-radius:50%;background:var(--c,#E83642);box-shadow:0 0 10px var(--c,#E83642)}
.sfp .h2{font-size:clamp(40px,5.6vw,76px);font-weight:800;letter-spacing:-.05em}
.sfp .h2 .grad{background:linear-gradient(95deg,var(--red-b),var(--orange) 60%,#ffd29a);-webkit-background-clip:text;background-clip:text;color:transparent}
.sfp .body{color:var(--txt-2);font-size:17px;max-width:520px}
.sfp .more{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 8px 0 20px;border-radius:14px;border:1px solid var(--line-2);font:600 14px Poppins;transition:border-color .4s,background .4s,transform .6s var(--ease)}
.sfp .more i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-style:normal;background:color-mix(in srgb,var(--c,#E83642) 18%,transparent);color:#fff;transition:transform .5s var(--ease),background .4s}
.sfp .more:hover{border-color:color-mix(in srgb,var(--c,#E83642) 60%,transparent);background:color-mix(in srgb,var(--c,#E83642) 7%,transparent)}
.sfp .more:hover i{transform:rotate(-45deg);background:var(--c,#E83642)}
.sfp .beam{position:relative}
.sfp .beam::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a),transparent 0 70%,var(--bc,#E83642) 85%,#fff 88%,transparent 92% 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:sfp_beam 6s linear infinite;pointer-events:none;z-index:3}
@keyframes sfp_beam{to{--a:360deg}}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}