/* CTA met warp-sterrenveld en drie routes (uit de homepage-test :8150, 11 nov 2026). Alles onder .sfx. */
.sfx{--ease:cubic-bezier(.22,1,.36,1);--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);position:relative;padding:clamp(60px,7vw,100px) 0;background:transparent!important;color:#F4F5FA;font-family:Roboto,system-ui,sans-serif}
.sfx-wrap{width:min(1260px,100% - 32px);margin-inline:auto}
.sfx-card{position:relative;padding:clamp(56px,7vw,96px) clamp(22px,4vw,56px) clamp(36px,4vw,52px);border-radius:40px;overflow:hidden;text-align:center;isolation:isolate;background:#03040a;border:1px solid rgba(232,54,66,.28)}
.sfx-warp{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.sfx-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 55% at 50% 115%,rgba(232,54,66,.42),transparent 70%),radial-gradient(60% 60% at 50% 40%,transparent,rgba(3,4,10,.75))}
.sfx-h2{margin:0 auto 18px!important;max-width:980px;font:900 clamp(38px,5.4vw,78px)/1 Poppins,sans-serif!important;letter-spacing:-.045em!important;word-spacing:.06em;color:#fff!important}
.sfx-grad{display:inline-block;padding-bottom:.12em;margin-bottom:-.12em;background:linear-gradient(95deg,#E83642,#FF8A3D 60%,#ffd29a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sfx-body{margin:0 auto!important;max-width:560px;font:500 italic 20px Poppins,sans-serif!important;color:#A9AEC4!important}
.sfx-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(36px,4vw,52px);text-align:left}
.sfx-route{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:26px 26px 24px;border-radius:24px;border:1px solid var(--line-2);background:rgba(10,12,24,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:inherit!important;text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .6s var(--ease),border-color .5s,background .5s,box-shadow .6s}
.sfx-route::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .6s;background:radial-gradient(120% 90% at 0% 0%,rgba(232,54,66,.22),transparent 60%)}
.sfx-route:hover{transform:translateY(-6px);border-color:rgba(232,54,66,.5);box-shadow:0 30px 60px -30px rgba(232,54,66,.6)}
.sfx-route:hover::before{opacity:1}
.sfx-route:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sfx-route.main{background:linear-gradient(160deg,rgba(232,54,66,.28),rgba(200,32,42,.1) 60%,rgba(10,12,24,.7));border-color:rgba(232,54,66,.55);box-shadow:0 30px 70px -30px rgba(232,54,66,.7)}
.sfx-n{font:500 12px "JetBrains Mono",ui-monospace,monospace;color:#6E738C}
.sfx-route.main .sfx-n{color:#ff8a92}
.sfx-rt{font:700 20px/1.25 Poppins,sans-serif;letter-spacing:-.02em;color:#fff}
.sfx-rx{font-size:14.5px;line-height:1.55;color:#A9AEC4}
.sfx-go{display:inline-flex;align-items:center;gap:10px;margin-top:8px;font:600 14px Poppins,sans-serif;color:#fff}
.sfx-go em{font-style:normal;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:transform .5s var(--ease),background .4s}
.sfx-route:hover .sfx-go em{transform:translateX(4px);background:#E83642}
.sfx-route.main .sfx-go{justify-self:start;padding:0 8px 0 18px;height:46px;border-radius:14px;background:linear-gradient(180deg,#f04a55,#C8202A);box-shadow:0 12px 30px -10px rgba(232,54,66,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.sfx-route.main .sfx-go em{background:rgba(0,0,0,.2)}
.sfx-route.main:hover .sfx-go em{background:rgba(0,0,0,.3)}
.sfx-browse{margin:28px auto 0!important;max-width:720px;font-size:14px!important;color:#6E738C!important}
.sfx-browse a{color:#A9AEC4!important;text-decoration:underline;text-decoration-color:rgba(232,54,66,.6);text-underline-offset:3px;transition:color .3s}
.sfx-browse a:hover{color:#fff!important}
.sfx-btn{margin-top:32px;display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 30px;border:0;border-radius:18px;cursor:pointer;font:600 17px Poppins,sans-serif;color:#fff;background:linear-gradient(180deg,#f04a55,#C8202A);box-shadow:0 12px 34px -10px rgba(232,54,66,.75)}
.sfx-btn em{font-style:normal}
@media (max-width:900px){.sfx-routes{grid-template-columns:minmax(0,1fr)}.sfx-card{border-radius:28px}}
@media (prefers-reduced-motion:reduce){.sfx-route{transition:none}}

/* ── Fisionbot gluurt over de Business Scan-kaart (13 nov 2026) ──────────
   Staat in .sfx-routes, op de bovenrand van de Scan-kaart (eerste route, ook
   op mobiel de bovenste). clip-path snijdt hem precies af op die rand, dus hij
   komt erachter vandaan omhoog. Alleen het hoofd komt eruit. Rustig omhoog, blijven, rustig
   weg. Standen (klassen van script.js): .p2 hoofd boven de rand, .weg (achter de kaart), .eng (muis op de Scan-kaart:
   komt verder omhoog, kaart tilt 6px mee). */
.sfx-routes{position:relative}
.sfx-bot{--rot:0deg;--ty:104%;--ex:0px;--ey:0px;--hk:0deg;
  position:absolute;z-index:2;left:22px;bottom:100%;width:120px;aspect-ratio:997/1320;
  pointer-events:none;clip-path:inset(-80px -90px 0 -90px)}
.sfx-bot-rig{position:absolute;inset:0;transform-origin:50% 100%;
  transform:translateY(var(--ty)) rotate(var(--rot));transition:transform 1.4s cubic-bezier(.45,0,.25,1)}
.sfx-bot-rig img,.sfx-bot-head{position:absolute;inset:0;width:100%;height:100%}
.sfx-bot-arm{transform-origin:24.6% 55.8%;transition:transform .4s cubic-bezier(.34,1.6,.64,1)}
.sfx-bot-head{transform-origin:54% 40%;transform:rotate(var(--hk));transition:transform 1.2s cubic-bezier(.45,0,.25,1)}
.sfx-bot-eyes{transform-origin:47.1% 19.3%;translate:var(--ex) var(--ey);transition:translate .35s cubic-bezier(.22,1,.36,1)}
.sfx-bot.knip .sfx-bot-eyes{transform:scaleY(.1)}
/* Alleen het hoofd komt boven de rand (hoofd = bovenste 41% van het beeld) */
.sfx-bot-arm{opacity:0}
.sfx-bot.p2{--ty:67%;--hk:-7deg}
.sfx-bot.p2.eng{--ty:calc(64% - 6px);--hk:-12deg}
/* Scan-kaart tilt bij hover 6px op: afsnijlijn gaat mee */
.sfx-bot{transition:clip-path .6s var(--ease,cubic-bezier(.22,1,.36,1))}
.sfx-routes:has(.sfx-route.main:hover) .sfx-bot{clip-path:inset(-80px -90px 6px -90px)}
.sfx-bot.p2.eng .sfx-bot-rig{transition-duration:.7s}
/* Chatknop-bot weg zolang hij gluurt (niet als de chat open is) */
html.sfx-gluurt .sf-chat-btn:not([aria-expanded="true"]){opacity:0;transform:scale(.8);pointer-events:none;transition:opacity .6s ease,transform .6s ease}
/* Zacht deinen tijdens het gluren */
.sfx-bot.p2 .sfx-bot-head{animation:sfxDein 3.6s ease-in-out infinite}
@keyframes sfxDein{50%{translate:0 -3px}}
/* Eén kolom: de kop loopt tot boven de Scan-kaart, dus ruimte maken voor de bot */
@media (max-width:900px){.sfx-routes{margin-top:84px}}
@media (max-width:600px){.sfx-bot{width:84px;left:14px}.sfx-routes{margin-top:72px}}
@media (prefers-reduced-motion:reduce){
  .sfx-bot-rig,.sfx-bot-head,.sfx-bot-eyes{transition:none}
  .sfx-bot.p2 .sfx-bot-head{animation:none}
}