/* Effects shared by the homepage and the subpages: the electric border (electric.js)
   and the magic bento card effects (magic.js). */

/* Shine border: a thin ring with a highlight that travels around the button, plus a soft glow */
@property --shine-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.shine { position: relative; display: inline-flex; border-radius: 8px; padding: 2px; isolation: isolate; --shine-a: 0deg;
  background: conic-gradient(from var(--shine-a), rgba(255,255,255,.14) 0deg, rgba(255,255,255,.14) 230deg, #ffffff 290deg, #9db0ff 325deg, rgba(255,255,255,.14) 360deg);
  animation: shine-spin 3.6s linear infinite; }
/* the glow is a plain shadow: a blurred copy of the ring shows as a hard-edged box in Safari on iOS */
.shine { box-shadow: 0 4px 16px rgba(59, 91, 219, .22); }
.shine > .btn, .shine > a { border-radius: 6px; }
@keyframes shine-spin { to { --shine-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .shine { animation: none; } }

/* Magic bento */
.mb-card { position: relative; overflow: hidden; --glow-x: 50%; --glow-y: 50%; --glow-intensity: 0; --glow-radius: 220px; --mb-glow: 59, 91, 219; transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease; will-change: transform; }
.mb-card::after { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; pointer-events: none; z-index: 1; background: radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y), rgba(var(--mb-glow), calc(var(--glow-intensity) * .9)) 0%, rgba(var(--mb-glow), calc(var(--glow-intensity) * .45)) 30%, transparent 60%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.mb-card:hover { box-shadow: 0 8px 24px rgba(28, 28, 30, .08), 0 0 28px rgba(var(--mb-glow), .18); }
.mb-particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; pointer-events: none; z-index: 3; }
.mb-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: 2; }
.mb-spotlight { position: fixed; width: 800px; height: 800px; border-radius: 50%; pointer-events: none; z-index: 200; opacity: 0; transform: translate(-50%, -50%); mix-blend-mode: multiply; transition: opacity .25s ease; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .mb-card { transition: none; } }

/* Customer journey in 3D (journey3d.js) */
.journey { position: relative; border-radius: 16px; overflow: hidden; isolation: isolate; }
.journey-canvas { display: block; width: 100%; height: 380px; cursor: pointer; }
.journey-label { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 12px)); display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--inkt); color: var(--papier); border-radius: 8px; font: 500 13px/1.2 var(--font-sans); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-pop); z-index: 2; }
.journey-label .when { color: #b3c1ff; font-variant-numeric: tabular-nums; }
.journey-label::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--inkt); transform: translateX(-50%) rotate(45deg); }
.journey-steps { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; background: var(--papier); border-top: 1px solid var(--lijn-zacht); }
.journey-steps button { appearance: none; border: 1px solid var(--lijn); background: var(--papier); color: var(--grafiet); border-radius: 999px; padding: 7px 11px; font: 500 12px/1 var(--font-sans); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.journey-steps button:hover { border-color: var(--kobalt); color: var(--inkt); }
.journey-steps button.on { background: var(--kobalt); border-color: var(--kobalt); color: var(--papier); }
.journey-note { margin: 0; padding: 0 12px 12px; background: var(--papier); font: 400 12px/1.4 var(--font-sans); color: var(--grafiet); }
@media (max-width: 900px) { .journey-canvas { height: 300px; } }

/* The box with the logo (box3d.js): hover opens the lid, the systems float out */
.box3d { position: relative; border-radius: 16px; overflow: hidden; isolation: isolate; }
.box3d canvas { display: block; width: 100%; height: 380px; cursor: pointer; }
.box3d-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); padding: 6px 10px; border-radius: 999px; background: var(--papier); border: 1px solid var(--lijn); color: var(--inkt); font: 500 12px/1 var(--font-sans); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-pop); opacity: 0; }
.box3d-hint { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 6px; background: var(--papier); border: 1px solid var(--lijn); font: 400 12px/1.3 var(--font-sans); color: var(--grafiet); pointer-events: none; transition: opacity .3s ease; }
.box3d.is-open .box3d-hint { opacity: 0; }
@media (max-width: 900px) { .box3d canvas { height: 300px; } }

/* Kinetic grid host (kinetic.js): the canvas sits under everything else in the host */
.kinetic { position: relative; isolation: isolate; }
.kinetic--dark { background: var(--inkt); }
.kinetic > .kinetic-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.kinetic > :where(:not(.kinetic-canvas)) { position: relative; z-index: 1; }
.journey.kinetic > canvas.journey-canvas, .box3d.kinetic > canvas:not(.kinetic-canvas) { position: relative; z-index: 1; }
.journey > .journey-label { position: absolute; z-index: 2; }

/* Dot pattern (port of the React DotPattern): 16px cells, 1px dots in lijn-sterk, fading out radially */
.dotpattern { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27%3E%3Ccircle cx=%271%27 cy=%271%27 r=%271%27 fill=%27%23b8b8bf%27/%3E%3C/svg%3E"); background-size: 16px 16px; opacity: .85; -webkit-mask-image: radial-gradient(ellipse 55% 65% at 50% 50%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 55% 65% at 50% 50%, #000 25%, transparent 100%); }

/* Journey caption under the canvas: step number, step, timing */
.journey-caption { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--lijn-zacht); background: var(--papier); font: 500 14px/1.3 var(--font-sans); color: var(--inkt); min-height: 48px; }
.journey-caption .n { color: var(--grafiet); font-variant-numeric: tabular-nums; }
.journey-caption .when { margin-left: auto; color: var(--kobalt); font-variant-numeric: tabular-nums; }

/* Pills on the homepage (roll points and the promise): a tinted chip with a cobalt bar, folding open one
   after another when the item is in front (the roll) or in view (the promise, data-pills) */
.pill-list .pill { position: relative; display: block; padding: 8px 12px 8px 16px; border-radius: 10px; background: var(--kobalt-tint); color: var(--inkt); font: 400 14px/1.4 var(--font-sans); text-wrap: pretty; transform-origin: 50% 0; opacity: 0; transform: perspective(500px) rotateX(-60deg) translateY(6px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.pill-list .pill::before { content: ""; position: absolute; left: 6px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--kobalt); }
.pill-list--paper .pill { background: var(--papier); }
.is-front .pill, .pill-list.is-front .pill { opacity: 1; transform: none; }
.pill-list .pill:nth-child(1) { transition-delay: .12s; } .pill-list .pill:nth-child(2) { transition-delay: .24s; } .pill-list .pill:nth-child(3) { transition-delay: .36s; } .pill-list .pill:nth-child(n+4) { transition-delay: .48s; }
@media (prefers-reduced-motion: reduce) { .pill-list .pill { opacity: 1; transform: none; transition: none; } }

/* Integration map on the homepage (orbitmap.js): label chips that follow the nodes */
.map-chip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 7px; border-radius: 999px; background: var(--papier); border: 1px solid var(--lijn); color: var(--inkt); font: 500 12px/1 var(--font-sans); white-space: nowrap; box-shadow: 0 4px 14px rgba(28,28,30,.1); transition: opacity .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease; will-change: transform; }
.map-chip svg { width: 13px; height: 13px; color: var(--kobalt); }
.map-chip.on { background: var(--kobalt); border-color: var(--kobalt); color: var(--papier); font-size: 13px; box-shadow: 0 8px 22px rgba(59,91,219,.35); }
.map-chip.on svg { color: var(--papier); }
.map-chip.back { opacity: .45; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-lines line { stroke: #c9cbd6; stroke-width: 1; }
.map-lines line.on { stroke: var(--kobalt); stroke-width: 1.5; }
[data-rollmap] .dotpattern { border-radius: 50%; }

/* Scroll scene "Tienduizend gesprekken" (calls3d.js): the section is tall, the frame sticks, the dark stage
   holds the points, the big captions and the text column. [data-beat] elements show per phase of the scroll. */
.calls { position: relative; z-index: 7; background: var(--papier); height: 560vh; }
.calls-frame { position: sticky; top: 72px; height: calc(100vh - 72px); height: calc(100dvh - 72px); padding: 6px 4vw 4vw; box-sizing: border-box; }
.calls-stage { position: relative; height: 100%; border-radius: 24px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 80% 70% at 55% 45%, #22368f 0%, #141a3b 45%, #0d0f1e 100%); color: var(--papier); }
.calls-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.calls-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 95% 95% at 50% 50%, transparent 58%, rgba(8,10,22,.6) 100%); z-index: 1; }
.calls-text { position: absolute; left: clamp(24px, 5%, 72px); top: 50%; transform: translateY(-50%); width: min(34rem, 42%); z-index: 3; }
.calls-text::before { content: ""; position: absolute; inset: -56px -96px -56px -140px; background: radial-gradient(ellipse at 42% 50%, rgba(10,12,28,.8), transparent 70%); z-index: -1; pointer-events: none; }
.calls-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 13px/1.25 var(--font-sans); letter-spacing: .01em; color: rgba(255,255,255,.78); }
.calls-eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--papier); flex: none; }
.calls-text h2 { margin: 0 0 18px; font: 600 clamp(28px, 3.4vw, 44px)/1.08 var(--font-sans); letter-spacing: -.025em; text-wrap: pretty; color: var(--papier); }
.calls-text p { margin: 0 0 12px; font: 400 17px/1.55 var(--font-sans); color: rgba(255,255,255,.82); text-wrap: pretty; }
.calls-swap { display: grid; }
.calls-swap > * { grid-area: 1 / 1; }
.calls-text [data-beat] { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease-out); }
.calls-text [data-beat].on { opacity: 1; transform: none; }
.calls-text [data-beat="click"] { color: var(--papier); font-weight: 500; }
.calls-beat { position: absolute; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .55s var(--ease), transform .9s var(--ease-out), filter .7s var(--ease); }
.calls-beat.on { opacity: 1; }
.calls-beat--big { left: 64%; top: 50%; transform: translate(-50%, -50%) scale(1.12); filter: blur(10px); font: 600 clamp(44px, 7vw, 104px)/1 var(--font-sans); letter-spacing: -.035em; white-space: nowrap; text-shadow: 0 0 44px rgba(59,91,219,.6); }
.calls-beat--big.on { transform: translate(-50%, -50%) scale(1); filter: blur(0); }
.calls-sent { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 10px; border-radius: 999px; background: var(--papier); color: var(--inkt); font: 500 13px/1 var(--font-sans); white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.35); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.calls-sent svg { color: var(--kobalt); }
.calls-sent.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .calls { height: auto; } .calls-frame { position: static; height: 72vh; min-height: 520px; } .calls-beat, .calls-text [data-beat], .calls-sent { transition: none; } }

/* Floating call to action (bottom right; a full-width dock on a phone, see mobile.css): a cobalt pill with a
   calendar chip, an arrow that nudges on hover and a light band that sweeps across every few seconds.
   The show and hide logic (site.js floatCta, the homepage script) keeps it away from the footer. */
.fab { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 8px; border-radius: 999px; background: var(--kobalt); color: var(--papier); font: 500 16px/1 var(--font-sans); text-decoration: none; white-space: nowrap; overflow: hidden; isolation: isolate; box-shadow: 0 12px 28px rgba(59, 91, 219, .34), 0 2px 6px rgba(28, 28, 30, .16), inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .2s var(--ease-out), box-shadow .2s ease, background-color .15s ease; -webkit-tap-highlight-color: transparent; }
.fab:hover { color: var(--papier); background: var(--kobalt-hover); text-decoration: none; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(59, 91, 219, .42), 0 3px 8px rgba(28, 28, 30, .18), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.fab:active { transform: translateY(0) scale(.98); background: var(--kobalt-active); }
.fab:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
.fab svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fab-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.fab-ic svg { width: 18px; height: 18px; }
.fab-arrow { flex: none; width: 16px; height: 16px; transition: transform .2s var(--ease-out); }
.fab:hover .fab-arrow { transform: translateX(3px); }
.fab::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46%; z-index: -1; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .26) 50%, transparent 100%); transform: translateX(-130%); animation: fab-sheen 6s ease-in-out infinite; pointer-events: none; }
@keyframes fab-sheen { 0%, 60% { transform: translateX(-130%); } 100% { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .fab::after { animation: none; } .fab, .fab-arrow { transition: none; } }