/* Homepage PVG Technologies, opbouw naar voorbeeld van capisoft.nl (12-10-2026).
   Wit, Inter, zwarte knoppen, blauw accent; lichtgrijze en donkere secties. Animaties in home.js.
   Lettertype: Inter (SIL Open Font License, assets/fonts/OFL-inter.txt), zelf gehost. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter.woff2") format("woff2"); }

:root {
  --ink: #0e1215; --text: #11181c; --muted: #5d6874; --line: #e7eaee; --soft: #f5f6f7; --white: #fff;
  --blue: #1f6ff2; --blue-2: #5b9bff; --cyan: #33c6ee; --dark: #121517; --dark-2: #1b1f22;
  --radius: 16px; --ease: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, sans-serif; color: var(--text); background: var(--white); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); }
h2 em, h1 em { font-style: normal; color: var(--blue); }
h1, h2 { text-wrap: balance; }
p { margin: 0; }
::selection { background: #cfe0ff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; padding: 10px 16px; background: var(--white); border-radius: 10px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.center { text-align: center; margin-top: 36px; }
.text-link { color: var(--blue); font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* Knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 12px; border: 0; font: inherit; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; transition: transform .3s var(--ease), background .2s, box-shadow .3s; white-space: nowrap; }
.btn--dark { background: var(--blue); color: #fff; box-shadow: 0 8px 20px -10px rgba(31, 111, 242, .55); }
.btn--dark:hover { background: #1559d1; transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(31, 111, 242, .6); }
/* Rustige knop in de dienstkaarten: wit met blauwe tekst */
.btn--soft { background: var(--white); color: var(--blue); box-shadow: 0 0 0 1px rgba(31, 111, 242, .25); }
.btn--soft:hover { background: #f0f5ff; transform: translateY(-1px); }
.btn--sm { padding: 10px 18px; font-size: 15px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .6; cursor: wait; }

/* Voortgangsbalk en menubalk */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 120; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform-origin: 0 50%; transform: scaleX(0); }
.nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); transition: box-shadow .3s; }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.nav__inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.nav__logo img { height: 34px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 30px; margin: 0 auto; }
.nav__links a { text-decoration: none; color: #4b5560; font-size: 15px; font-weight: 500; transition: color .2s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__lang { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 13px !important; font-weight: 600 !important; }
.nav__cta-short { display: none; }
.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); place-content: center; gap: 6px; cursor: pointer; }
.nav__toggle span { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform .3s; }
.nav.is-open .nav__toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Scrollreveal (home.js voegt .is-in toe); zonder JavaScript is alles gewoon zichtbaar */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ============ Hero ============ */
.hero { padding: 48px 0 0; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 60vw; height: 60vw; background: radial-gradient(closest-side, rgba(31, 111, 242, .08), transparent); pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; position: relative; }
.hero__title { font-size: clamp(2.3rem, 4.2vw, 3.5rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; max-width: 16ch; }
.hero__title .w { display: inline-block; opacity: 0; transform: translateY(.5em); animation: word-in .8s var(--ease) forwards; animation-delay: calc(.1s + var(--i) * .05s); }
@keyframes word-in { to { opacity: 1; transform: none; } }
.hero__lead { margin-top: 20px; font-size: 19px; color: var(--muted); max-width: 46ch; }
.hero__arrow { display: block; width: 44px; height: 52px; margin: 6px 0 -8px min(52%, 330px); fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero__arrow path { stroke-dasharray: 120; stroke-dashoffset: 120; animation: draw 1.2s .9s var(--ease) forwards; }
.hero__arrow path + path { animation-delay: 1.6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Leadkaart met oplichtende rand */
.lead-card { position: relative; margin-top: 14px; padding: 30px; border-radius: 20px; background: var(--white); border: 1px solid rgba(51, 198, 238, .55); box-shadow: 0 0 0 4px rgba(51, 198, 238, .08), 0 24px 60px -24px rgba(31, 111, 242, .35); max-width: 520px; }
.lead-card h2 { font-size: 20px; letter-spacing: -.01em; line-height: 1.35; }
.scan-progress { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--blue); }
.lead-card fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.lead-card fieldset[hidden], .scan-result[hidden], .lead-card form[hidden] { display: none; }
.lead-card label { font-size: 14px; font-weight: 500; color: #3a434c; }
.lead-card select, .lead-card input[type=email], .lead-card input[type=tel] { width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid transparent; background: #f2f3f5; font: inherit; font-size: 16px; color: var(--text); transition: border-color .2s, background .2s; }
.lead-card select:focus, .lead-card input:focus { outline: none; border-color: var(--blue); background: var(--white); }
.lead-card .btn { margin-top: 6px; }
.scan-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px !important; font-weight: 400 !important; color: var(--muted) !important; line-height: 1.5; }
.scan-consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--blue); flex-shrink: 0; }
.scan-consent a { color: var(--blue); }
.scan-back { justify-self: start; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.scan-error { color: #b42318; font-size: 14px; margin-top: 8px; min-height: 0; }
.scan-result h3 { font-size: 20px; margin-top: 12px; }
.scan-advice { margin-top: 8px; color: var(--muted); }
.scan-small { margin-top: 10px; font-size: 13px; color: var(--muted); }
.lead-card__proof { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); line-height: 1.5; }
.lead-card__proof img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lead-card__proof strong { color: var(--ink); }

/* Bewegend productbeeld */
.hero__visual { position: relative; border-radius: 22px; padding: 34px 28px 44px; background: radial-gradient(120% 90% at 100% 0%, #dce9ff 0%, transparent 55%), radial-gradient(90% 80% at 0% 100%, #d9f4fb 0%, transparent 60%), linear-gradient(160deg, #f4f8ff, #eef3fb); min-height: 560px; overflow: hidden; }
.app { background: var(--white); border-radius: 16px; box-shadow: 0 30px 70px -30px rgba(17, 40, 80, .45), 0 0 0 1px rgba(17, 40, 80, .06); overflow: hidden; }
.app__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.app__bar > span { width: 9px; height: 9px; border-radius: 50%; background: #e2e5e9; }
.app__bar em { font-style: normal; font-weight: 600; margin-left: 10px; }
.app__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #128a57; background: #e6f7ef; padding: 3px 9px; border-radius: 999px; }
.app__live i { width: 6px; height: 6px; border-radius: 50%; background: #18b26f; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(24, 178, 111, .5); } 100% { box-shadow: 0 0 0 8px rgba(24, 178, 111, 0); } }
.app__body { padding: 18px; }
.app__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.app__stats div { background: var(--soft); border-radius: 12px; padding: 12px; }
.app__stats span { display: block; font-size: 11.5px; color: var(--muted); }
.app__stats strong { display: block; font-size: 26px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.app__stats small { font-size: 11px; color: #128a57; font-weight: 600; }
.app__chart { margin: 14px 0 6px; height: 110px; }
.app__chart svg { width: 100%; height: 100%; }
.app__line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.app__area { opacity: 0; transition: opacity 1.2s ease 1.2s; }
.hero__visual.is-in .app__line { animation: draw-norm 2s .4s var(--ease) forwards; }
.hero__visual.is-in .app__area { opacity: 1; }
@keyframes draw-norm { to { stroke-dashoffset: 0; } }
.app__feed { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; height: 186px; overflow: hidden; }
.app__feed li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; animation: feed-in .7s var(--ease) both; }
.app__feed li b { font-weight: 600; }
.app__feed li small { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.app__feed .ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.ico--blue { background: #e7f0ff; color: var(--blue); } .ico--green { background: #e6f7ef; color: #128a57; } .ico--violet { background: #f1ebff; color: #6b3fd6; } .ico--amber { background: #fff4e0; color: #b26b00; }
@keyframes feed-in { from { opacity: 0; transform: translateY(-14px) scale(.98); } to { opacity: 1; transform: none; } }
.float-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--white); font-size: 13.5px; font-weight: 600; box-shadow: 0 14px 30px -14px rgba(17, 40, 80, .4); animation: float 6s ease-in-out infinite; }
.float-chip i { font-style: normal; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; background: #e6f7ef; color: #128a57; }
.float-chip--a { left: -6px; top: 46%; }
.float-chip--b { right: 14px; bottom: 54px; animation-delay: -3s; }
.float-chip--b i { background: #e7f0ff; color: var(--blue); }
@keyframes float { 50% { transform: translateY(-8px); } }
.hero__note { position: absolute; left: 28px; bottom: 14px; font-size: 12px; color: #6c7884; }

/* Technologieband */
.logos { margin-top: 64px; padding: 26px 0 30px; border-top: 1px solid var(--line); }
.logos__title { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee__track { gap: 14px; padding: 4px 0; }
/* Merkpillen: logo in de eigen merkkleur plus naam, zoals bij capisoft.nl */
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 6px 16px -12px rgba(17, 40, 80, .35); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #1d2226; white-space: nowrap; }
.brand svg { width: 24px; height: 24px; flex-shrink: 0; }
.brand img { width: auto; height: 22px; flex-shrink: 0; }
.brand .brand__word { height: 19px; }
.brand--word { padding-inline: 24px; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============ Secties ============ */
.sec { padding: 110px 0; }
.sec--soft { background: var(--soft); }
.sec--tight { padding: 80px 0; }
.head { max-width: 760px; margin-bottom: 52px; }
.head--center { margin-inline: auto; text-align: center; }
.head h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.head p { margin-top: 16px; font-size: 18px; color: var(--muted); }

/* Kantelend dashboard */
.tilt { perspective: 1400px; }
.tilt > .dashboard-demo { transform-origin: 50% 0; transform: rotateX(var(--rx, 24deg)) scale(var(--sc, .92)); transition: transform .1s linear; box-shadow: 0 40px 90px -40px rgba(17, 40, 80, .45); }
.demo-note { text-align: center; }

/* Bento-diensten */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; min-height: 420px; background: var(--soft); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(17, 40, 80, .45); }
.tile--wide { grid-column: span 2; }
.tile--full { grid-column: 1 / -1; min-height: 300px; display: grid; grid-template-columns: 1fr 1.2fr; align-items: end; }
.tile--full .tile__text { padding-bottom: 30px; }
.tile__text { padding: 30px 30px 0; position: relative; z-index: 1; }
.tile__text h3 { font-size: 24px; }
.tile__text p { margin: 10px 0 18px; color: var(--muted); font-size: 16px; max-width: 46ch; }
.tile__text .btn { margin-bottom: 26px; }
.tile--blue { background: linear-gradient(160deg, #eaf2ff, #f7faff 60%); }
.tile--violet { background: linear-gradient(160deg, #f3eeff, #fbf9ff 60%); }
.tile--green { background: linear-gradient(160deg, #e9f8f0, #f8fdfa 60%); }
.tile--cyan { background: linear-gradient(160deg, #e5f7fc, #f7fcfe 60%); }
.tile--soft { background: linear-gradient(160deg, #f1f3f6, #fafbfc 60%); }
.tile__visual { margin-top: auto; position: relative; }
.tile__visual--shot { margin: auto 0 0 30px; border-radius: 14px 0 0 0; overflow: hidden; box-shadow: 0 -10px 40px -20px rgba(17, 40, 80, .4); }
.tile__visual--shot img { width: 100%; height: 260px; object-fit: cover; object-position: top left; transition: transform 1.2s var(--ease); }
.tile:hover .tile__visual--shot img { transform: scale(1.03); }
.chat { padding: 0 24px 28px; display: grid; gap: 10px; }
.chat p { padding: 12px 14px; border-radius: 14px; font-size: 14px; max-width: 88%; background: var(--white); box-shadow: 0 8px 20px -14px rgba(17, 40, 80, .35); }
.typing { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: #a3abb4; animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.js .tile .chat p { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .tile.is-in .chat p { opacity: 1; transform: none; }
.flow { list-style: none; margin: 0; padding: 0 24px 28px; display: grid; gap: 10px; counter-reset: f; }
.flow li { counter-increment: f; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--white); border-radius: 12px; font-size: 14px; box-shadow: 0 8px 20px -14px rgba(17, 40, 80, .35); }
.flow li::before { content: "✓"; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: #c9d1d9; transition: background .4s; }
.js .tile .flow li { opacity: 0; transform: translateX(-12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .tile.is-in .flow li { opacity: 1; transform: none; }
.js .tile.is-in .flow li:nth-child(2) { transition-delay: .35s; } .js .tile.is-in .flow li:nth-child(3) { transition-delay: .7s; }
.tile.is-in .flow li::before { background: #18b26f; }
.hub { height: 230px; margin: auto 24px 18px; }
.hub svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub__lines path { fill: none; stroke: #9fd7ea; stroke-width: 1.5; stroke-dasharray: 4 6; animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.hub__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 16px 34px -12px rgba(31, 111, 242, .6); }
.hub__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 7px 12px; border-radius: 10px; background: var(--white); font-size: 13px; font-weight: 600; box-shadow: 0 8px 20px -12px rgba(17, 40, 80, .4); white-space: nowrap; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding: 0 30px 30px; }
.bars i { flex: 1; height: var(--h); border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--blue-2), var(--blue)); transform-origin: bottom; transform: scaleY(.08); transition: transform 1s var(--ease); }
.tile.is-in .bars i { transform: none; }
.tile.is-in .bars i:nth-child(2) { transition-delay: .08s; } .tile.is-in .bars i:nth-child(3) { transition-delay: .16s; } .tile.is-in .bars i:nth-child(4) { transition-delay: .24s; } .tile.is-in .bars i:nth-child(5) { transition-delay: .32s; } .tile.is-in .bars i:nth-child(6) { transition-delay: .4s; } .tile.is-in .bars i:nth-child(7) { transition-delay: .48s; }

/* Oplichtende tekst en feiten */
.statement__text { font-size: clamp(1.7rem, 3.4vw, 2.75rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.3; max-width: 26ch; color: var(--ink); }
.statement__text .hw { color: #c9ced4; transition: color .25s; }
.statement__text .hw.on { color: var(--ink); }
.statement__text em { font-style: normal; }
.statement__text em .hw.on { color: var(--blue); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 80px; }
.fact { border-top: 1px solid var(--line); padding-top: 22px; }
.fact strong { display: block; font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 650; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--blue), var(--blue-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fact span { display: block; margin-top: 12px; color: var(--muted); font-size: 15px; max-width: 24ch; }

/* Projectencarrousel */
.projects { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.projects__track { display: flex; gap: 24px; width: max-content; padding: 6px 0 20px; animation: marquee 55s linear infinite; }
.projects:hover .projects__track { animation-play-state: paused; }
.project { width: 380px; flex-shrink: 0; background: var(--white); border-radius: 18px; overflow: hidden; text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); display: flex; flex-direction: column; }
.project:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 26px 50px -30px rgba(17, 40, 80, .45); }
.project__img { height: 220px; overflow: hidden; background: #eef2f7; }
.project__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.project__img--logo { display: grid; place-items: center; background: linear-gradient(160deg, #eef3fb, #f8fafd); }
.project__img--logo img { width: auto; height: auto; max-width: 62%; max-height: 64%; object-fit: contain; }
.project__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.project__tag { font-size: 13px; font-weight: 600; color: var(--blue); }
.project__body h3 { font-size: 21px; margin-top: 6px; }
.project__body p { margin: 8px 0 16px; color: var(--muted); font-size: 15px; }
.project__link { margin-top: auto; font-size: 14px; font-weight: 600; }

/* Werkwijze: stapelende kaarten */
.stack { list-style: none; margin: 0 auto; padding: 0 0 8vh; max-width: 820px; display: grid; gap: 26vh; }
.stack__card { position: sticky; top: calc(110px + var(--i) * 22px); display: flex; gap: 28px; align-items: flex-start; padding: 36px; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(17, 40, 80, .5); transform-origin: 50% 0; transform: scale(var(--s, 1)); }
.stack__num { flex-shrink: 0; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; font-weight: 650; color: var(--blue); background: #eaf2ff; }
.stack__card h3 { font-size: 24px; }
.stack__card p { margin-top: 8px; color: var(--muted); }

/* Over ons */
.split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: center; }
.split__media { border-radius: 22px; padding: 40px; background: linear-gradient(160deg, #e9f1ff, #f7faff); display: grid; justify-items: center; text-align: center; gap: 18px; }
.split__media img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; box-shadow: 0 20px 40px -20px rgba(17, 40, 80, .5); }
.split__media strong { display: block; font-size: 19px; }
.split__media span { display: block; color: var(--muted); font-size: 15px; margin: 2px 0 8px; }
.split__text h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.split__text p { margin-top: 16px; color: var(--muted); font-size: 18px; }
.split__text .btn { margin-top: 28px; }

/* Donkere sectie */
.sec--dark { background: var(--dark); color: #d6dbe0; }
.sec--dark h2, .sec--dark h3 { color: #fff; }
.sec--dark h2 em { color: var(--blue-2); }
.sec--dark .head p { color: #9aa4ae; }
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why__card { padding: 28px; border-radius: 18px; background: var(--dark-2); border: 1px solid #2a2f33; transition: border-color .4s, transform .5s var(--ease); }
.why__card:hover { border-color: #3f5d8f; transform: translateY(-3px); }
.why__card h3 { font-size: 20px; }
.why__card p { margin-top: 10px; color: #9aa4ae; font-size: 15px; }

/* Vragen */
.faq-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font-size: 18px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--muted); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 40px 22px 0; color: var(--muted); }
.faq details[open] p { animation: faq-open .5s var(--ease); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }

/* Afsluitende CTA */
.final-cta { max-width: 760px; margin: 0 auto; padding: 48px; border-radius: 22px; text-align: center; background: var(--white); border: 1px solid rgba(51, 198, 238, .55); box-shadow: 0 0 0 4px rgba(51, 198, 238, .08), 0 24px 60px -24px rgba(31, 111, 242, .35); }
.final-cta h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 26px; }
.final-cta__proof { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 14px; color: var(--muted); }
.final-cta__proof img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: start; }
.contact__text h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.contact__text p { margin-top: 16px; color: var(--muted); font-size: 18px; }
.contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 32px; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.contact__form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.contact__form .full { grid-column: 1 / -1; }
.contact__form input, .contact__form select, .contact__form textarea { width: 100%; padding: 13px 15px; border-radius: 10px; border: 1px solid transparent; background: #f2f3f5; font: inherit; font-size: 16px; color: var(--text); }
.contact__form input:focus, .contact__form select:focus, .contact__form textarea:focus { outline: none; border-color: var(--blue); background: var(--white); }
.contact__form textarea { resize: vertical; min-height: 120px; }
.hp { position: absolute !important; left: -9999px !important; }
.form-status { padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.form-status.is-ok { background: #e6f7ef; color: #0f6b44; }
.form-status.is-error { background: #fdecec; color: #8c1d18; }
.form-note { font-size: 13px; color: var(--muted); }
.form-note a { color: inherit; }

/* Footer */
.footer { padding: 64px 0 28px; border-top: 1px solid var(--line); font-size: 15px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer__logo { height: 34px; width: auto; margin-bottom: 14px; }
.footer p { color: var(--muted); max-width: 30ch; }
.footer nav, .footer__meta { display: grid; gap: 8px; align-content: start; }
.footer strong { color: var(--ink); margin-bottom: 4px; }
.footer nav a { color: var(--muted); text-decoration: none; }
.footer nav a:hover { color: var(--ink); }
.footer__meta span { color: var(--muted); }
.footer__copy { margin-top: 44px; font-size: 13px; color: var(--muted); }

/* ============ Responsief ============ */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__toggle { display: grid; }
  .nav__cta { margin-left: auto; }
  .nav.is-open .nav__links { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; position: absolute; top: 72px; left: 0; right: 0; padding: 22px 24px 28px; background: var(--white); box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .2); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { min-height: 0; }
  .bento { grid-template-columns: 1fr 1fr; }
  .tile--wide { grid-column: span 2; }
  .tile--full { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .faq-wrap, .contact, .split { grid-template-columns: 1fr; gap: 36px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .sec { padding: 72px 0; }
  .wrap { width: min(var(--wrap), 100% - 32px); }
  .nav__inner { gap: 10px; height: 64px; }
  .nav__logo img { height: 28px; }
  .nav.is-open .nav__links { top: 64px; }
  .nav__cta-long { display: none; } .nav__cta-short { display: inline; }
  .hero { padding-top: 28px; }
  .hero__lead { font-size: 17px; }
  .hero__arrow { margin-left: 60%; }
  .lead-card { padding: 22px; }
  .hero__visual { padding: 22px 14px 40px; }
  .app__stats strong { font-size: 20px; }
  .app__stats span { font-size: 10.5px; }
  .float-chip { display: none; }
  .bento { grid-template-columns: 1fr; }
  .tile--wide, .tile--full { grid-column: auto; }
  .stack { gap: 16vh; }
  .tile { min-height: 0; }
  .tile__visual--shot img { height: 200px; }
  .facts, .why { grid-template-columns: 1fr; }
  .project { width: 290px; }
  .project__img { height: 170px; }
  .stack__card { flex-direction: column; gap: 16px; padding: 26px; top: calc(84px + var(--i) * 14px); }
  .stack__num { width: 52px; height: 52px; font-size: 22px; }
  .final-cta { padding: 32px 22px; }
  .contact__form { grid-template-columns: 1fr; padding: 22px; }
  .footer__grid { grid-template-columns: 1fr; }
  .brand { font-size: 15px; padding: 10px 16px; }
  .brand svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .hero__title .w { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .hero__arrow path { animation: none; stroke-dashoffset: 0; }
  .marquee__track, .projects__track { animation: none; }
  .projects { overflow-x: auto; }
  .float-chip, .app__live i, .typing i, .hub__lines path { animation: none; }
  .app__line { stroke-dashoffset: 0; }
  .app__area { opacity: 1; }
  .tilt > .dashboard-demo { transform: none !important; }
  .js .tile .chat p, .js .tile .flow li, .bars i { opacity: 1 !important; transform: none !important; }
  .stack__card { transform: none !important; }
}

/* ============ Dashboard (overgenomen uit growth.css, 10-10-2026) ============ */
.dashboard-demo{border-radius:16px;background:#edf3fa;padding:20px;overflow:hidden}
.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 20px}
.demo-toolbar [role=tablist]{display:flex;gap:4px;background:#e0e9f3;padding:4px;border-radius:8px}
.dash-tab{padding:11px 20px;background:transparent;border:0;border-radius:6px;font:inherit;font-size:13px;font-weight:700;white-space:nowrap}
.dash-tab[aria-selected=true]{background:#fff;color:#2163cd;box-shadow:0 3px 8px -4px #8397ae}
.example-label{font-size:11px;color:#536375}
.dashboard-content{display:grid;grid-template-columns:185px 1fr;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 14px 35px -23px #577392}
.dash-sidebar{padding:25px 16px;background:#f9fafc;border-right:1px solid #e8edf4;font-size:12px;color:#586778;display:flex;flex-direction:column;gap:8px}
.dash-sidebar img{width:132px;height:auto;object-fit:contain;margin:0 8px 24px}
.dash-sidebar>div{padding:12px;border-radius:6px}
.sidebar-active{background:#e6effc;color:#2163cd;font-weight:700}
.dash-sidebar small{font-size:10px;line-height:1.8;margin:40px 12px 8px}
.dash-main{padding:28px;min-width:0}
.dash-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:28px}
.dash-heading h3{font-size:23px;line-height:1.2;margin:0 0 6px}
.dash-heading p{font-size:11px;color:#647181;margin:0}
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:24px;border-bottom:1px solid #edf0f4}
.dash-stat span{font-size:11px;display:block;color:#526173}
.dash-stat strong{font-size:32px;line-height:1.4;display:block;font-variant-numeric:tabular-nums}
.dash-stat small{font-size:9px;color:#647181}
.dash-workspace{display:grid;grid-template-columns:1.35fr 1fr;gap:32px;padding-top:22px}
.dash-workspace h4{font-size:12px;margin:0 0 20px}
.dash-chart svg{width:100%;height:auto;overflow:visible}
.chart-grid{stroke:#e5ebf2;fill:none;stroke-dasharray:3 5}
.dash-chart text{font-size:12px;fill:#647181}
.pipeline-step{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid #edf0f4;color:#697789;transition:color .3s}
.pipeline-dot{width:7px;height:7px;border-radius:50%;background:#b8c5d5;flex-shrink:0}
.pipeline-label{font-size:11px;display:block}
.pipeline-step small{display:block;font-size:9px;color:#697789;margin-top:2px}
.pipeline-step svg{margin-left:auto;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.pipeline-step.is-current{color:#2163cd}
.pipeline-step.is-current .pipeline-dot{background:#2163cd;animation:signal 2.2s ease-out infinite}
.motion-paused .pipeline-dot{animation-play-state:paused!important}
#dash-pause{font:inherit;font-size:10px;color:#536375;border:0;background:none;text-decoration:underline;padding:12px 0 0}
@keyframes signal{0%{box-shadow:0 0 0 0 #2163cd40}100%{box-shadow:0 0 0 8px #2163cd00}}
@media(max-width:1100px){.dash-sidebar{display:none}.dashboard-content{grid-template-columns:1fr}}
@media(max-width:760px){.dashboard-demo{padding:12px}.demo-toolbar{align-items:flex-start;flex-direction:column;gap:12px}.demo-toolbar [role=tablist]{width:100%}.dash-tab{flex:1;padding:11px 6px;font-size:11px}.example-label{padding:0 4px;font-size:10px}.dash-main{padding:20px 16px}.dash-heading h3{font-size:20px}.dash-heading{gap:8px}.dash-stats{gap:10px}.dash-stat strong{font-size:29px}.dash-stat span{font-size:10px;min-height:30px}.dash-stat small{display:none}.dash-workspace{grid-template-columns:1fr;gap:24px}.dash-pipeline{border-top:1px solid #edf0f4;padding-top:20px}.pipeline-label{font-size:12px}.pipeline-step small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.pipeline-step{transition:none}}

/* ============ Productfilm, overgangen naar de Capisoft-video (analyse 12-10-2026, 6 beelden per seconde) ============
   Geen standaard kruisvervaging: elk shot heeft een eigen in- en uitgang (3D wegdraaien + witte flits, pannen,
   achterover kantelen, uitzoomen, vervagen). Tekst verschijnt woord voor woord (.wd, gemaakt in home.js). */
.scene { position: relative; aspect-ratio: 1100 / 640; border-radius: 28px; overflow: hidden; isolation: isolate; background: #eef2fd; box-shadow: 0 30px 70px -40px rgba(30, 50, 140, .45); }
.scene__stage { position: absolute; left: 0; top: 0; width: 1100px; height: 640px; transform-origin: 0 0; transform: scale(var(--k, .5)); font-size: 13px; color: #1d2433; overflow: hidden; }
.shot { position: absolute; inset: 0; overflow: hidden; visibility: hidden; z-index: 1; perspective: 1400px; }
.shot.on { visibility: visible; z-index: 2; }
.shot.leave { visibility: visible; z-index: 3; }
.scene.paused .shot *, .scene.paused .shot *::before, .scene.paused .shot *::after, .scene.paused .shot { animation-play-state: paused !important; }
/* Algemene overgangen */
.shot.pan-in { animation: pan-in .85s cubic-bezier(.7, 0, .25, 1) both; }
.shot.pan-out { animation: pan-out .85s cubic-bezier(.7, 0, .25, 1) both; }
@keyframes pan-in { from { transform: translateX(100%); } }
@keyframes pan-out { to { transform: translateX(-100%); } }
.shot.blur-in { animation: blur-in .8s ease both; }
.shot.blur-out { animation: blur-out .7s ease both; }
@keyframes blur-in { from { opacity: 0; filter: blur(18px); transform: scale(1.05); } }
@keyframes blur-out { to { opacity: 0; filter: blur(18px); transform: scale(.97); } }
.flash { position: absolute; inset: 0; z-index: 10; background: #fff; opacity: 0; pointer-events: none; }
.scene.flashing .flash { animation: flash .55s ease-out; }
@keyframes flash { 0% { opacity: 0; } 28% { opacity: 1; } 100% { opacity: 0; } }
/* Woord voor woord */
.wd { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(8px); }
.shot.on .wd { animation: wd-in .6s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--start, .3s) + var(--w) * var(--step, .12s)); }
@keyframes wd-in { to { opacity: 1; filter: none; transform: none; } }
.wd.grey { opacity: 1; filter: none; transform: none; color: #cbd2de; }
.shot.on .wd.grey { animation: wd-grey .5s ease forwards; animation-delay: calc(var(--start, .3s) + var(--w) * var(--step, .12s)); }
@keyframes wd-grey { to { color: var(--to, #1d2433); } }

/* Achtergronden */
.bg { position: absolute; inset: 0; overflow: hidden; }
.bg--pastel { background: linear-gradient(180deg, #f3f6ff, #eef1fd); }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .8; animation: blob 12s ease-in-out infinite alternate; }
.blob--a { width: 46%; height: 70%; left: -10%; top: 5%; background: #c6d6ff; }
.blob--b { width: 40%; height: 60%; right: -8%; top: -10%; background: #e1d9ff; animation-delay: -5s; }
.blob--c { width: 50%; height: 50%; left: 30%; bottom: -25%; background: #d6ebff; animation-delay: -9s; }
@keyframes blob { to { transform: translate(8%, -6%) scale(1.1); } }
.bg--blue { background: radial-gradient(55% 75% at 80% 15%, #fff 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #6a8fe6 0%, #a1bbf2 42%, #dbe5fb 68%, #84a1ec 100%); }
.bg--blue::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(40% 40% at 30% 70%, rgba(255, 255, 255, .5), transparent 70%); animation: glow-drift 7s ease-in-out infinite alternate; }
@keyframes glow-drift { to { transform: translate(20%, -14%); } }
.bg--whiteblue { background: radial-gradient(70% 80% at 0% 0%, #b4caf6 0%, rgba(180, 202, 246, 0) 60%), radial-gradient(60% 60% at 100% 100%, #c4d4fa 0%, rgba(196, 212, 250, 0) 60%), #f8faff; }
.bg--right { background: radial-gradient(55% 90% at 100% 60%, #6f8fe4 0%, rgba(111, 143, 228, 0) 65%), radial-gradient(60% 80% at 0% 100%, #c2d3fb 0%, rgba(194, 211, 251, 0) 60%), #f6f8ff; }
.bg--shift { animation: bg-shift 4s ease-in-out both; } @keyframes bg-shift { from { filter: hue-rotate(-12deg) brightness(1.05); } }
.bg--grid::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000, transparent); mask-image: radial-gradient(75% 75% at 50% 50%, #000, transparent); }
.bg--white { background: #fff; }

/* 1. Dashboard */
.cam--dash { position: absolute; left: 80px; top: 44px; width: 940px; height: 552px; perspective: 1800px; transform-origin: 46% 58%; }
.shot--dash.on .cam--dash { animation: cam-dash 7s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes cam-dash { 0%, 26% { transform: none; } 42% { transform: scale(1.55) translate(4%, -6%); } 58% { transform: scale(1.6) translate(-6%, -6%); } 76% { transform: none; } 100% { transform: scale(.98) rotateY(-6deg); } }
.shot--dash.leave .cam--dash { animation: whip-away .55s cubic-bezier(.6, 0, .9, .4) forwards; }
@keyframes whip-away { to { transform: rotateY(-70deg) translateX(30%) scale(.7); opacity: 0; } }
.db { position: relative; width: 100%; height: 100%; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(40, 60, 150, .45);
  opacity: 0; transform: rotateX(32deg) rotateY(-20deg) rotateZ(7deg) scale(.8) translateY(60px); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }
.shot--dash.on .db { opacity: 1; transform: none; }
.db__head { position: absolute; inset: 0 0 auto; height: 170px; padding: 30px 40px; display: flex; justify-content: space-between; align-items: flex-start;
  background: radial-gradient(60% 140% at 62% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(115deg, #4f6fe0 0%, #8ea6f2 38%, #dfe6fb 58%, #9fb3f2 82%, #6f8be8 100%);
  opacity: 0; transition: opacity .9s ease 1s; }
.shot--dash.on .db__head { opacity: 1; }
.db__hello strong { display: block; font-size: 22px; font-weight: 650; color: #fff; letter-spacing: -.01em; text-shadow: 0 1px 8px rgba(30, 50, 140, .25); }
.db__search { display: inline-block; margin-top: 12px; width: 280px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .9); font-size: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.db__icons { display: flex; gap: 14px; }
.db__icons i { position: relative; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 6px 16px -8px rgba(30, 50, 140, .5); }
.db__icons i.dot::after { content: ""; position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; border-radius: 3px; background: #e5355d; }
.db__grid { position: absolute; inset: 104px 24px 24px; display: grid; grid-template-columns: 1.2fr 1fr .92fr; grid-template-rows: 1.22fr .78fr; gap: 16px;
  grid-template-areas: "welcome list side" "chart donut side"; }
.pnl { position: relative; background: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: 0 0 0 1px rgba(30, 50, 140, .06), 0 18px 34px -22px rgba(30, 50, 140, .45);
  opacity: 0; transform: translateY(34px) scale(.96); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(1.5s + var(--o) * .28s); min-width: 0; overflow: hidden; }
.shot--dash.on .pnl { opacity: 1; transform: none; }
.pnl h4 { margin: 0; font-size: 15px; font-weight: 650; color: #1d2433; }
.pnl__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pill { font-size: 11px; color: #7a8399; padding: 4px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px #e4e7f0; }
.link { font-size: 12px; color: #4f62ec; font-weight: 600; }
.pnl--welcome { grid-area: welcome; align-self: end; margin-bottom: 0; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pnl__eyebrow { font-size: 12px; color: #6d7790; font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.kpis div { background: #f5f7fd; border-radius: 12px; padding: 12px; }
.kpis b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpis span { display: block; font-size: 11.5px; color: #6d7790; }
.kpis em { font-style: normal; font-size: 11px; font-weight: 700; color: #17a06a; }
.pnl--chart { grid-area: chart; display: flex; flex-direction: column; }
.pnl--chart .area { flex: 1; min-height: 0; height: auto; }
.area { width: 100%; height: 118px; overflow: visible; }
.area__line { fill: none; stroke: #7c6cf2; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.area__fill { opacity: 0; transition: opacity 1s ease 3.4s; }
.shot--dash.on .area__line { animation: draw-norm 1.6s cubic-bezier(.4, 0, .2, 1) 2.4s forwards; }
.shot--dash.on .area__fill { opacity: 1; }
.area__tip { position: absolute; right: 26px; top: 46px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #6a5cf0; color: #fff; font-size: 11.5px; font-weight: 600;
  box-shadow: 0 10px 20px -10px rgba(106, 92, 240, .8); opacity: 0; transform: translateY(8px) scale(.9); transition: all .6s cubic-bezier(.34, 1.56, .64, 1) 3.6s; }
.area__tip i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .25); display: grid; place-items: center; font-size: 10px; }
.shot--dash.on .area__tip { opacity: 1; transform: none; }
.months { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #9aa2b6; text-transform: lowercase; }
.months .on { color: #4f62ec; font-weight: 700; }
.pnl--list { grid-area: list; display: flex; flex-direction: column; }
.tabs { display: flex; gap: 14px; font-size: 12px; color: #8a93a8; margin-bottom: 6px; }
.tabs .on { color: #4f62ec; font-weight: 600; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rows li { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid #f0f2f7; opacity: 0; transform: translateX(-12px); transition: all .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(2.5s + var(--r) * .2s); }
.shot--dash.on .rows li { opacity: 1; transform: none; }
.rows b { display: block; font-size: 13px; font-weight: 600; }
.rows span { display: block; font-size: 11px; color: #8a93a8; }
.rows em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: #4f62ec; white-space: nowrap; }
.sq { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; }
.sq--blue { background: linear-gradient(135deg, #dbe4ff, #b9c8ff); } .sq--violet { background: linear-gradient(135deg, #ece5ff, #d3c6ff); } .sq--green { background: linear-gradient(135deg, #dcf6ec, #b4ebd5); } .sq--amber { background: linear-gradient(135deg, #fff1d6, #ffdca1); }
.db__btn { display: block; margin-top: auto; padding: 8px; border-radius: 8px; background: #4f62ec; color: #fff; text-align: center; font-size: 12px; font-weight: 600; }
.db__btn--sm { margin: 8px 0 10px; padding: 7px; }
.pnl--donut { grid-area: donut; }
.donut-wrap { display: flex; align-items: center; gap: 14px; }
.donut { width: 100px; height: 100px; flex-shrink: 0; transform: rotate(-90deg); }
.donut__track { fill: none; stroke: #f0f2f8; stroke-width: 5; }
.seg { fill: none; stroke: var(--c); stroke-width: 5; stroke-dasharray: 0 100; stroke-dashoffset: calc(0 - var(--off)); transition: stroke-dasharray 1s cubic-bezier(.4, 0, .2, 1); }
.shot--dash.on .seg { stroke-dasharray: var(--len) calc(100 - var(--len)); }
.shot--dash.on .seg:nth-of-type(2) { transition-delay: 2.9s; } .shot--dash.on .seg:nth-of-type(3) { transition-delay: 3.3s; } .shot--dash.on .seg:nth-of-type(4) { transition-delay: 3.6s; } .shot--dash.on .seg:nth-of-type(5) { transition-delay: 3.85s; }
.donut text { transform: rotate(90deg); transform-origin: 21px 21px; text-anchor: middle; fill: #1d2433; }
.donut__big { font-size: 7px; font-weight: 700; } .donut__small { font-size: 3.2px; fill: #8a93a8 !important; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 12px; flex: 1; }
.legend li { display: flex; align-items: center; gap: 7px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.legend b { margin-left: auto; font-weight: 600; }
.pnl--side { grid-area: side; display: flex; flex-direction: column; }
.assist { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #f0f2f7; }
.assist__avatar { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); flex-shrink: 0; }
.assist b { display: block; font-size: 14px; } .assist div span { font-size: 11.5px; color: #17a06a; font-weight: 600; }
.assist__avatar { font-size: 15px; letter-spacing: .02em; }
.facts-mini { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: 12px; color: #4b5470; }
.facts-mini i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c7d0ff; margin-right: 8px; }
.side__title { margin-top: 14px !important; }
.msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; overflow: hidden; }
.msgs li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; animation: msg-in .6s cubic-bezier(.2, .8, .2, 1) both; }
.msgs li:first-child { background: #f3f5ff; box-shadow: inset 0 0 0 1px #e0e5ff; }
.msgs .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.msgs b { display: block; font-size: 12.5px; } .msgs span { display: block; font-size: 11px; color: #8a93a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.msgs small { margin-left: auto; font-size: 10.5px; color: #9aa2b6; white-space: nowrap; }
@keyframes msg-in { from { opacity: 0; transform: translateY(-10px); } }


/* 2. Glazen panelen */
.ftitle { position: absolute; top: 104px; left: 0; right: 0; margin: 0; text-align: center; font-size: 46px; font-weight: 650; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 20px rgba(30, 60, 160, .25); }
.ftitle .soft { color: rgba(255, 255, 255, .72); }
.glassrow { position: absolute; left: 50%; top: 360px; display: flex; gap: 26px; transform-style: preserve-3d; transform: translate(-50%, -50%); }
.glassrow i { display: block; width: 110px; height: 240px; border-radius: 18px; background: linear-gradient(140deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .16)); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 30px 50px -30px rgba(30, 50, 140, .6), inset 0 0 30px rgba(255, 255, 255, .35); opacity: 0; transform: translateX(620px) rotateY(-86deg); }
.shot--glass.on .glassrow i { animation: glass-in 1.7s cubic-bezier(.2, .7, .2, 1) forwards, glass-split .9s cubic-bezier(.5, 0, .2, 1) 2.9s forwards; animation-delay: calc(var(--n) * .1s), 2.9s; }
.shot--glass.on .glassrow i:nth-child(even) { animation-name: glass-in, glass-split-down; }
@keyframes glass-in { 55% { opacity: 1; transform: translateX(80px) rotateY(-55deg); } to { opacity: 1; transform: rotateY(-38deg); } }
@keyframes glass-split { to { translate: -30px -64px; } }
@keyframes glass-split-down { to { translate: 30px 64px; } }
.shot--glass.on .glassrow { animation: row-drift 5.2s linear both; }
@keyframes row-drift { from { transform: translate(-44%, -50%); } to { transform: translate(-56%, -50%); } }
.beam { position: absolute; left: 0; right: 0; top: 360px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95) 40%, rgba(255, 255, 255, .95) 60%, transparent); transform: scaleX(0); }
.beam i { position: absolute; top: -6px; left: 4%; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 6px rgba(255, 255, 255, .9), 0 0 40px 12px rgba(120, 170, 255, .7); opacity: 0; }
.shot--glass.on .beam { animation: beam-in 1.1s cubic-bezier(.6, 0, .2, 1) 1.2s forwards; }
.shot--glass.on .beam i { animation: travel 2.8s cubic-bezier(.4, 0, .2, 1) 1.5s forwards; }
@keyframes beam-in { to { transform: scaleX(1); } }
@keyframes travel { 0% { left: 4%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 95%; opacity: 0; } }

/* 3. Kaarten: camera pant, kaarten klappen open */
.ctrack { position: absolute; left: 0; top: 0; height: 100%; width: 3400px; }
.shot--cards.on .ctrack { animation: ctrack 7.8s cubic-bezier(.7, 0, .25, 1) both; }
@keyframes ctrack { 0% { transform: translateX(720px); } 11%, 37% { transform: none; } 47%, 70% { transform: translateX(-720px); } 80%, 100% { transform: translateX(-1440px); } }
.fcard { position: absolute; top: 50%; width: 400px; margin-top: -160px; text-align: center; left: calc(350px + var(--k) * 720px); perspective: 1000px; }
.flabel { margin: 0 0 20px; font-size: 32px; font-weight: 650; letter-spacing: -.01em; color: #6a8be2; }
.gcard { position: relative; height: 220px; border-radius: 24px; background: linear-gradient(150deg, rgba(255, 255, 255, .96), rgba(210, 225, 255, .55)); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 40px 70px -40px rgba(40, 70, 160, .6), inset 0 0 40px rgba(255, 255, 255, .5); display: grid; align-content: center; gap: 12px; padding: 28px; transform: rotateY(84deg) scale(.9); opacity: .9; }
.gcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .8) 48%, transparent 62%); background-size: 260% 100%; background-position: 120% 0; }
.shot--cards.on .gcard { animation: flip-open 1s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(.35s + var(--k) * 2.6s); }
.shot--cards.on .gcard::after { animation: sheen 1.2s ease forwards; animation-delay: calc(.9s + var(--k) * 2.6s); }
@keyframes flip-open { to { transform: none; opacity: 1; } }
@keyframes sheen { to { background-position: -40% 0; } }
.fcard { --k: 0; }
.bub { height: 30px; border-radius: 12px; background: linear-gradient(90deg, #cfdcff, #e6edff); opacity: 0; }
.bub--q { width: 62%; justify-self: end; background: linear-gradient(90deg, #6f90e4, #9db4f2); }
.bub--a { width: 74%; } .bub--a2 { width: 48%; }
.shot--cards.on .bub { animation: pop-in .6s cubic-bezier(.34, 1.56, .64, 1) 1.2s forwards; }
.shot--cards.on .bub--a { animation-delay: 1.7s; } .shot--cards.on .bub--a2 { animation-delay: 2s; }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
.gcard--check { grid-template-columns: auto 1fr; align-items: center; column-gap: 18px; }
.chk { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 34px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #6f90e4, #9db4f2); }
.bar { height: 22px; border-radius: 999px; background: #e3eaff; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #6f90e4, #a8bff5); }
.shot--cards.on .bar i { animation: fill-bar 1.2s cubic-bezier(.2, .8, .2, 1) 4s forwards; }
@keyframes fill-bar { to { width: 100%; } }
.cells { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cells i { height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px #e1e8fb; }
.calgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.calgrid i { height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px #e1e8fb; }
.calgrid .hit { background: linear-gradient(135deg, #6f90e4, #9db4f2); box-shadow: 0 10px 20px -10px rgba(80, 110, 220, .8); }
.shot--cards.on .calgrid .hit { animation: hit 1s ease-in-out 6.6s 1; }
@keyframes hit { 50% { transform: scale(1.14); } }
.orb { position: absolute; left: 50%; bottom: 70px; width: 46px; height: 22px; margin-left: -23px; border-radius: 50% 50% 46% 46%; background: linear-gradient(135deg, #e9f0ff, #7f9de8); box-shadow: 0 8px 16px -8px rgba(60, 90, 200, .6); }
.shot--cards.on .orb { animation: orb 2.6s ease-in-out infinite; }
@keyframes orb { 50% { transform: translateY(-10px) rotate(-18deg); } }
.shot--cards.leave .ctrack { animation: none; transform: translateX(-1440px); }
.shot--cards.leave .fcard { animation: tilt-back .7s cubic-bezier(.6, 0, .9, .4) forwards; }
@keyframes tilt-back { to { transform: perspective(900px) rotateX(70deg) scale(.6); opacity: 0; } }

/* 4. Stroomschema */
.flowcam { position: absolute; inset: 0; transform-origin: 50% 46%; }
.shot--flow.on .flowcam { animation: flow-cam 6.4s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes flow-cam { 0% { transform: scale(1.4); } 34% { transform: none; } 58% { transform: none; } 74%, 100% { transform: scale(.6) translateY(4%); } }
.flowsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow__lines path { fill: none; stroke: rgba(255, 255, 255, .88); stroke-width: 2.5; stroke-dasharray: 260; stroke-dashoffset: 260; }
.shot--flow.on .flow__lines path { animation: flow-draw .9s cubic-bezier(.4, 0, .2, 1) .5s forwards; }
.shot--flow.on .flow__lines path:nth-child(n+2) { animation-delay: .75s; }
.shot--flow.on .flow__lines path:nth-child(n+5) { animation-delay: 1.25s; }
.shot--flow.on .flow__lines path:nth-child(n+8) { animation-delay: 1.6s; }
@keyframes flow-draw { to { stroke-dashoffset: 0; } }
.fdot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .3), 0 0 30px 8px rgba(255, 255, 255, .7); }
.fnode, .fcore { position: absolute; transform: translate(-50%, -50%) scale(.6); opacity: 0; }
.fnode { padding: 12px 20px; border-radius: 14px; font-size: 17px; font-weight: 650; color: #2a3a78; background: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5)); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 18px 30px -18px rgba(30, 50, 140, .6); white-space: nowrap; }
.fcore { width: 86px; height: 86px; border-radius: 24px; display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #1f6ff2, #33c6ee); box-shadow: 0 20px 40px -14px rgba(31, 111, 242, .8), 0 0 0 8px rgba(255, 255, 255, .25); }
.shot--flow.on .fnode { animation: node-in .6s cubic-bezier(.34, 1.56, .64, 1) var(--d) forwards; }
.shot--flow.on .fcore { animation: node-in .7s cubic-bezier(.34, 1.56, .64, 1) 1.1s forwards, core-pulse 1.6s ease-in-out 2s infinite; }
@keyframes node-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes core-pulse { 50% { box-shadow: 0 20px 40px -14px rgba(31, 111, 242, .8), 0 0 0 16px rgba(255, 255, 255, .12); } }
.monitor { position: absolute; inset: 0; pointer-events: none; }
.monitor__frame { position: absolute; inset: -6px; border-radius: 28px; border: 22px solid rgba(255, 255, 255, .55); box-shadow: 0 50px 90px -40px rgba(30, 50, 140, .7), inset 0 0 0 1px rgba(255, 255, 255, .8); opacity: 0; }
.monitor__base { position: absolute; left: 6%; top: 104%; width: 46%; height: 150px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .15)); opacity: 0; }
.monitor__base--b { left: 48%; width: 40%; height: 210px; top: 96%; }
.shot--flow.on .monitor__frame, .shot--flow.on .monitor__base { animation: appear .8s ease 3.8s forwards; }
@keyframes appear { to { opacity: 1; } }
.tag { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); padding: 10px 18px; border-radius: 12px; font-size: 22px; font-weight: 650; color: #fff; background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .7); white-space: nowrap; opacity: 0; }
.shot--flow.on .tag { animation: appear .5s ease 4.3s forwards; }
.fg { position: absolute; border-radius: 34px; background: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .45)); filter: blur(6px); box-shadow: 0 40px 60px -30px rgba(30, 50, 140, .5); }
.fg--a { width: 260px; height: 180px; left: -40px; top: -40px; } .fg--b { width: 220px; height: 220px; right: -30px; top: -50px; } .fg--c { width: 240px; height: 200px; left: -50px; bottom: -60px; } .fg--d { width: 260px; height: 220px; right: -40px; bottom: -70px; }
.shot--flow.on .fg { animation: fg-fly 1.6s cubic-bezier(.4, 0, .2, 1) forwards; }
.shot--flow.on .fg--b { --tx: 40%; --ty: -50%; } .shot--flow.on .fg--a { --tx: -50%; --ty: -50%; } .shot--flow.on .fg--c { --tx: -50%; --ty: 50%; } .shot--flow.on .fg--d { --tx: 50%; --ty: 50%; }
@keyframes fg-fly { from { transform: scale(1.3); } to { transform: translate(var(--tx), var(--ty)) scale(1.9); opacity: 0; } }

/* 5. Banners */
.cols { position: absolute; left: 140px; right: 140px; bottom: 0; height: 420px; display: flex; align-items: flex-end; justify-content: space-between; filter: blur(3px); }
.cols i { width: 70px; height: var(--h); border-radius: 12px 12px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .1)); transform-origin: bottom; transform: scaleY(0); }
.shot--banners.on .cols i { animation: col-up 1.2s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(.2s + var(--c) * .08s); }
@keyframes col-up { to { transform: none; } }
.ring { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; border: 70px dashed rgba(255, 255, 255, .25); opacity: 0; transform: scale(.7); }
.shot--banners.on .ring { animation: ring-in .9s ease 4s forwards, spin 14s linear 4s infinite; }
@keyframes ring-in { to { opacity: 1; transform: none; } }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.bwrap { position: absolute; inset: 0; perspective: 900px; }
.banner { position: absolute; left: 50%; top: 50%; width: 660px; height: 150px; margin: -75px 0 0 -330px; padding-bottom: 26px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .35)); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 30px 60px -30px rgba(30, 50, 140, .6); opacity: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform-origin: 50% 50%; }
.banner strong { font-size: 52px; font-weight: 650; letter-spacing: -.02em; color: #1d2433; }
.banner svg { position: absolute; left: 50%; bottom: 16px; width: 320px; height: 26px; margin-left: -160px; overflow: visible; opacity: .8; }
.banner path { fill: none; stroke: #3d63d8; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.shot--banners.on .banner[style*="--b:0"] { animation: b0 6.6s linear both; }
.shot--banners.on .banner[style*="--b:1"] { animation: b1 6.6s linear both; }
.shot--banners.on .banner[style*="--b:2"] { animation: b2 6.6s linear both; }
@keyframes b0 { 0% { opacity: 0; transform: scaleX(0); transform-origin: 0 50%; } 3% { opacity: 1; } 13% { opacity: 1; transform: scaleX(1); } 29% { opacity: 1; transform: rotateX(0); } 33%, 100% { opacity: 0; transform: rotateX(90deg); } }
@keyframes b1 { 0%, 31% { opacity: 0; transform: rotateX(-90deg); } 36%, 59% { opacity: 1; transform: rotateX(0); } 63%, 100% { opacity: 0; transform: rotateX(90deg); } }
@keyframes b2 { 0%, 60% { opacity: 0; transform: rotateX(-90deg); } 65%, 90% { opacity: 1; transform: rotateX(0) scaleY(1); } 97%, 100% { opacity: 0; transform: scaleY(0); } }
.shot--banners.on .banner path { animation: draw-norm 1s cubic-bezier(.4, 0, .2, 1) forwards; }
.shot--banners.on .banner[style*="--b:0"] path { animation-delay: .9s; } .shot--banners.on .banner[style*="--b:1"] path { animation-delay: 2.6s; } .shot--banners.on .banner[style*="--b:2"] path { animation-delay: 4.6s; }

/* 6. Drie schermen */
.cam--multi { position: absolute; inset: 0; perspective: 1100px; }
.shot--multi.on .cam--multi { animation: pull-back 5.2s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes pull-back { 0%, 30% { transform: scale(1.5) translateY(3%); } 62%, 100% { transform: none; } }
.mini { position: absolute; left: 50%; top: 50%; border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -30px rgba(30, 50, 140, .5); overflow: hidden; padding: 0 0 14px; }
.mini--c { width: 470px; height: 300px; margin: -150px 0 0 -235px; z-index: 2; transform: rotateX(32deg) scale(.82); opacity: 0; }
.shot--multi.on .mini--c { animation: trapezoid 1.3s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
@keyframes trapezoid { 15% { opacity: 1; } to { opacity: 1; transform: none; } }
.mini--l, .mini--r { width: 330px; height: 250px; margin: -125px 0 0 -165px; z-index: 1; opacity: 0; }
.shot--multi.on .mini--l { animation: side-l 1.3s cubic-bezier(.2, .8, .2, 1) 2.3s forwards; }
.shot--multi.on .mini--r { animation: side-r 1.3s cubic-bezier(.2, .8, .2, 1) 2.4s forwards; }
@keyframes side-l { from { opacity: 0; transform: none; } to { opacity: 1; transform: translateX(-330px) rotateY(18deg); } }
@keyframes side-r { from { opacity: 0; transform: none; } to { opacity: 1; transform: translateX(330px) rotateY(-18deg); } }
.mini__head { padding: 14px 18px; font-size: 14px; font-weight: 650; border-bottom: 1px solid #eef0f6; }
.mini__head--grad { height: 74px; color: #fff; font-size: 17px; background: radial-gradient(60% 140% at 62% 0%, #fff 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(115deg, #4f6fe0 0%, #8ea6f2 38%, #dfe6fb 58%, #9fb3f2 82%, #6f8be8 100%); border: 0; }
.mini__kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 16px 0; }
.mini__kpi b { background: #f5f7fd; border-radius: 10px; padding: 10px; font-size: 20px; }
.mini__chart { margin: 10px 16px 0; height: 70px; } .mini__chart svg { width: 100%; height: 100%; }
.mini__chart path { fill: none; stroke: #7c6cf2; stroke-width: 3; }
.mini__rows { display: grid; gap: 8px; padding: 10px 16px 0; } .mini__rows i { height: 14px; border-radius: 6px; background: #eef1f8; }
.mini__rows--tall i { height: 18px; }
.mini__cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px 16px 0; } .mini__cal i { height: 26px; border-radius: 7px; background: #f1f4fb; } .mini__cal .on { background: linear-gradient(135deg, #6f90e4, #9db4f2); }
.mini__bars { display: flex; align-items: flex-end; gap: 10px; height: 60px; padding: 10px 16px 0; } .mini__bars i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #9db4f2, #5b7ae6); }

/* 7. Figuur met voordelen */
.pcam { position: absolute; inset: 0; }
.person { position: absolute; left: 50%; bottom: 0; width: 300px; height: 330px; margin-left: -150px; opacity: 0; }
.shot--person.on .person { animation: rise 1.1s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
.perk { position: absolute; display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 600; color: #6a8ae0; white-space: nowrap; }
.perk > i { font-style: normal; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; color: #fff; background: linear-gradient(135deg, #6f90e4, #9db4f2); box-shadow: 0 10px 20px -10px rgba(80, 110, 220, .8); transform: scale(0); }
.shot--person.on .perk > i { animation: pop .5s cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: calc(.75s + var(--p) * 1s); }
@keyframes pop { to { transform: none; } }
.shot--person.leave .pcam { animation: zoom-away .7s cubic-bezier(.6, 0, .9, .4) forwards; }
@keyframes zoom-away { to { transform: scale(.5); opacity: 0; filter: blur(8px); } }

/* 8. Claim */
.claim { position: absolute; left: 0; right: 0; top: 50%; margin: -40px 0 0; text-align: center; font-size: 58px; font-weight: 650; letter-spacing: -.03em; --to: #1d2433; }
.claim .hl { --to: #3d63d8; }
.shot--claim.on .claim { animation: claim-cam 4s linear both; }
@keyframes claim-cam { from { transform: scale(.97); } to { transform: scale(1.03); } }

/* 9. Lichtstralen en logo */
.bloom { position: absolute; left: 50%; bottom: -60%; width: 120%; height: 100%; margin-left: -60%; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 150, 240, .55), transparent); opacity: 0; }
.shot--logo.on .bloom { animation: bloom 3s ease 1.2s forwards; }
@keyframes bloom { to { opacity: 1; transform: translateY(-12%); } }
.streaks { position: absolute; inset: 0; }
.streaks i { position: absolute; top: -10%; bottom: -10%; width: 200px; left: -30%; background: linear-gradient(90deg, rgba(51, 198, 238, 0), rgba(51, 198, 238, .5) 40%, rgba(255, 255, 255, .95) 50%, rgba(140, 230, 200, .45) 60%, rgba(51, 198, 238, 0)); filter: blur(10px); }
.shot--logo.on .streaks i { animation: streak 1.9s cubic-bezier(.5, 0, .3, 1) forwards; }
.shot--logo.on .streaks i:nth-child(2) { width: 110px; animation-delay: .15s; animation-duration: 2.2s; }
.shot--logo.on .streaks i:nth-child(3) { width: 60px; animation-delay: .3s; }
.shot--logo.on .streaks i:nth-child(4) { width: 260px; animation-delay: .05s; animation-duration: 2.5s; opacity: .6; }
@keyframes streak { to { left: 130%; } }
.flogo { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 10px; }
.flogo img { width: 150px; height: auto; filter: drop-shadow(0 0 30px rgba(51, 198, 238, .6)); opacity: 0; }
.flogo strong { font-size: 40px; font-weight: 700; letter-spacing: -.02em; color: #1d2433; opacity: 0; }
.flogo > span { font-size: 22px; font-weight: 500; color: #3d63d8; }
.shot--logo.on .flogo img { animation: logo-in 1.1s cubic-bezier(.2, .8, .2, 1) .8s forwards; }
.shot--logo.on .flogo strong { animation: logo-in 1s cubic-bezier(.2, .8, .2, 1) 1.4s forwards; }
@keyframes logo-in { from { opacity: 0; filter: blur(12px); transform: scale(.92); } to { opacity: 1; filter: none; transform: none; } }

/* Pauzeknop en voortgang */
.film__toggle { position: absolute; right: 14px; bottom: 14px; z-index: 12; padding: 7px 12px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600; color: #1d2433; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 16px -10px rgba(30, 50, 140, .5); cursor: pointer; }
.film__progress { position: absolute; left: 18px; right: 150px; bottom: 25px; z-index: 12; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .5); overflow: hidden; }
.film__progress i { display: block; height: 100%; width: 0; background: rgba(31, 111, 242, .7); }

@media (prefers-reduced-motion: reduce) {
  .shot *, .shot *::before, .shot *::after, .shot { animation: none !important; transition: none !important; }
  .shot--dash .db, .shot--dash .db__head, .shot--dash .pnl, .shot--dash .rows li, .shot--dash .area__tip { opacity: 1 !important; transform: none !important; }
  .shot--dash .area__line { stroke-dashoffset: 0; } .shot--dash .area__fill { opacity: 1; }
  .shot--dash .seg { stroke-dasharray: var(--len) calc(100 - var(--len)); }
  .film__toggle, .film__progress { display: none; }
}

/* ============ AI-chip in de dienstkaart (naar voorbeeld van capisoft.nl, 12-10-2026) ============
   Witte kaart met een zachte regenboogrand die langzaam rondloopt, grijze printplaatlijnen met lichtpulsen
   die naar de chip lopen, en een chip met een bewegend oranje-roze-paars kleurverloop. */
@property --rb { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.tile--rainbow { background: #fff; isolation: isolate; }
.tile--rainbow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--rb), #ffd8b0, #d6f5c4, #b4e6ff, #d9ccff, #ffc9f0, #ffd0d8, #ffd8b0);
  -webkit-mask: radial-gradient(62% 64% at 50% 50%, transparent 58%, #000 96%); mask: radial-gradient(62% 64% at 50% 50%, transparent 58%, #000 96%);
  filter: blur(18px); opacity: .9; animation: rb-spin 12s linear infinite; }
@keyframes rb-spin { to { --rb: 360deg; } }
.chip { position: relative; height: 270px; margin: auto 0 0; }
.chip__traces { position: absolute; inset: 0; width: 100%; height: 100%; }
.chip__lines path { fill: none; stroke: #ececf0; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.chip__pulses path { fill: none; stroke: #b9a4ff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 10 90; stroke-dashoffset: 10; opacity: 0; filter: drop-shadow(0 0 6px rgba(185, 130, 255, .9)); }
.tile.is-in .chip__pulses path { animation: pulse-run 2.6s cubic-bezier(.4, 0, .6, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes pulse-run { 0% { stroke-dashoffset: 10; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: -90; opacity: 0; } }
.chip__core { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 30px; overflow: hidden; display: grid; place-items: center;
  background: #e07ad8; box-shadow: 0 24px 50px -20px rgba(190, 80, 200, .6), 0 0 0 6px rgba(255, 255, 255, .6); }
.chip__core i { position: absolute; width: 110%; height: 110%; border-radius: 50%; filter: blur(22px); }
.chip__core .b1 { left: -35%; top: -40%; background: #ffbe3d; animation: chip-b1 6s ease-in-out infinite alternate; }
.chip__core .b2 { right: -45%; top: -20%; background: #ff6fa8; animation: chip-b2 7s ease-in-out infinite alternate; }
.chip__core .b3 { left: -10%; bottom: -55%; background: #a78bff; animation: chip-b3 5s ease-in-out infinite alternate; }
@keyframes chip-b1 { to { transform: translate(30%, 25%) scale(.9); } }
@keyframes chip-b2 { to { transform: translate(-25%, 30%) scale(1.1); } }
@keyframes chip-b3 { to { transform: translate(15%, -30%); } }
.chip__core span { position: relative; z-index: 1; font-size: 54px; font-weight: 800; letter-spacing: -.02em; color: #fff; text-shadow: 0 4px 20px rgba(120, 30, 120, .35); }
.tile.is-in .chip__core { animation: chip-breathe 4s ease-in-out infinite; }
@keyframes chip-breathe { 50% { transform: scale(1.04); box-shadow: 0 30px 60px -20px rgba(190, 80, 200, .7), 0 0 0 10px rgba(255, 255, 255, .5); } }
@media (prefers-reduced-motion: reduce) { .tile--rainbow::before, .chip__core i, .chip__core, .chip__pulses path { animation: none !important; } }

/* ============ Oplichtende tekst met horizontale scroll (naar voorbeeld van capisoft.nl, 12-10-2026) ============ */
.hscroll { position: relative; height: 330vh; background: var(--white); }
.hscroll__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.hscroll__track { display: flex; align-items: center; gap: 9vw; padding: 0 max(20px, calc((100vw - var(--wrap)) / 2)); will-change: transform; }
.hpanel--intro { flex: 0 0 min(var(--wrap), calc(100vw - 40px)); display: grid; grid-template-columns: 290px 1fr; gap: 72px; align-items: center; }
.hstats { margin: 0; display: grid; gap: 26px; }
.hstats dt { font-size: 17px; color: var(--ink); }
.hstats dd { margin: 6px 0 0; font-size: 25px; font-weight: 650; letter-spacing: -.01em; color: var(--blue); }
.htext { font-size: clamp(1.9rem, 3.1vw, 3rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.26; color: var(--ink); }
.htext em { font-style: normal; }
.htext .lw { color: #cfd4da; transition: color .3s ease; }
.htext .lw.on { color: var(--ink); }
.htext em .lw.on { color: var(--blue); }
.hpanel--num { flex: 0 0 auto; width: min(460px, 80vw); }
.hpanel--num strong { display: block; font-size: clamp(5rem, 11vw, 9.5rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #0c3a8f 0%, #1559d1 38%, #1f6ff2 70%, #1d92e6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hpanel--num span { display: block; margin-top: 18px; font-size: 19px; color: var(--muted); max-width: 30ch; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .hscroll { height: auto; padding: 72px 0; }
  .hscroll__sticky { position: static; height: auto; display: block; }
  .hscroll__track { flex-direction: column; align-items: stretch; gap: 56px; transform: none !important; padding: 0 16px; }
  .hpanel--intro { flex: none; width: auto; grid-template-columns: 1fr; gap: 36px; }
  .hpanel--intro .htext { order: -1; }
  .hpanel--num { width: auto; }
  .htext .lw { color: var(--ink); } .htext em .lw { color: var(--blue); }
}

/* ============ Chatgesprek in de dienstkaart: vraag, typen, antwoord, doorlopend (home.js) ============ */
.chat { height: 250px; padding: 0 24px 26px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%); mask-image: linear-gradient(180deg, transparent, #000 22%); }
.chat__list { display: flex; flex-direction: column; gap: 10px; transition: opacity .5s ease, transform .5s ease; }
.chat__list.out { opacity: 0; transform: translateY(-14px); }
.chat .msg { margin: 0; max-width: 86%; padding: 11px 15px; border-radius: 16px; font-size: 14px; line-height: 1.45; animation: msg-pop .45s cubic-bezier(.34, 1.4, .64, 1) both; }
.chat .msg--in { align-self: flex-end; color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-2)); border-bottom-right-radius: 5px; box-shadow: 0 10px 22px -12px rgba(31, 111, 242, .7); }
.chat .msg--ai { align-self: flex-start; background: var(--white); border-bottom-left-radius: 5px; box-shadow: 0 8px 20px -14px rgba(17, 40, 80, .4); }
.chat .msg--note { align-self: center; max-width: none; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #128a57; background: #e6f7ef; }
.chat .msg--typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.chat .msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: #a9b1bb; animation: typing 1s infinite; }
.chat .msg--typing i:nth-child(2) { animation-delay: .15s; } .chat .msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes msg-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .msg, .chat .msg--typing i { animation: none; } }

/* ============ AI op maat: glazen knop op donkere kaart (naar voorbeeld capisoft.nl) ============ */
.split--ai { grid-template-columns: 1fr 1.05fr; }
.aicard { position: relative; aspect-ratio: 1.08 / 1; border-radius: 24px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(180deg, #0c1230 0%, #111a3c 42%, #24397a 74%, #4865ab 100%); box-shadow: 0 40px 80px -40px rgba(17, 30, 80, .55); }
.aicard__horizon { position: absolute; left: -10%; right: -10%; top: 50%; height: 46%;
  background: radial-gradient(60% 40% at 50% 12%, rgba(120, 160, 255, .38), transparent 70%); filter: blur(6px); }
.aipill { position: relative; width: min(64%, 400px); aspect-ratio: 3.3 / 1; display: grid; place-items: center; transform: translateY(-4%); }
.aipill__halo { position: absolute; inset: -38% -6% 20%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 55%, rgba(120, 170, 255, .75), rgba(80, 120, 255, .18) 55%, transparent 74%); filter: blur(14px); opacity: .7; }
.aipill__glass { position: absolute; inset: 0; border-radius: 999px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(232, 238, 255, .82) 34%, rgba(178, 196, 250, .55) 72%, rgba(150, 175, 245, .5) 100%);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .95), inset 0 -10px 22px rgba(70, 110, 230, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .7), 0 22px 40px -18px rgba(5, 10, 40, .8); }
.lb { position: absolute; width: 44%; height: 110%; top: 48%; border-radius: 50%; filter: blur(18px); mix-blend-mode: multiply; opacity: .55; }
.lb--a { left: -8%; background: #b49cff; }
.lb--b { left: 30%; background: #6d8dff; top: 58%; }
.lb--c { left: 62%; background: #5fd2ff; }
.aipill__edge { position: absolute; left: 18%; right: 18%; bottom: 4%; height: 7%; border-radius: 50%; background: #fff; filter: blur(3px); opacity: .9; box-shadow: 0 0 18px 6px rgba(140, 200, 255, .7); }
.sp { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .9); opacity: 0; }
.aipill__label { position: relative; font-size: clamp(20px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.01em; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(30, 50, 130, .55), 0 0 18px rgba(90, 130, 255, .55); }
.aipill__ring { position: absolute; inset: 0; border-radius: 999px; border: 2px solid rgba(170, 205, 255, .8); opacity: 0; }
.aicursor { position: absolute; left: 66%; top: 52%; width: 30px; height: 30px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); opacity: 0; transform-origin: 4px 3px; }

/* Eén lus van 6,4 s: licht drijft, pijl komt binnen, klik (knop veert in, ring), pijl gaat weg */
.aicard .lb--a { animation: lb-a 6.4s ease-in-out infinite alternate; }
.aicard .lb--b { animation: lb-b 6.4s ease-in-out infinite alternate; }
.aicard .lb--c { animation: lb-c 6.4s ease-in-out infinite alternate; }
.aicard .aipill__edge { animation: ai-edge 3.2s ease-in-out infinite alternate; }
.aicard .sp { animation: ai-spark 3.2s ease-in-out var(--d) infinite; }
.aicard .aipill__halo { animation: ai-halo 6.4s ease-in-out infinite; }
.aicard .aipill { animation: ai-press 6.4s ease-in-out infinite; }
.aicard .aipill__ring { animation: ai-ring 6.4s ease-out infinite; }
.aicard .aicursor { animation: ai-cursor 6.4s cubic-bezier(.45, 0, .2, 1) infinite; }
.aicard * , .aicard .aipill { animation-play-state: paused; }
.aicard.is-live *, .aicard.is-live .aipill { animation-play-state: running; }
@keyframes lb-a { to { transform: translate(38%, -18%) scale(1.15); } }
@keyframes lb-b { from { transform: translate(-20%, 0); } to { transform: translate(26%, -22%) scale(.9); } }
@keyframes lb-c { to { transform: translate(-46%, -10%) scale(1.2); } }
@keyframes ai-edge { from { transform: scaleX(.75) translateX(-12%); opacity: .55; } to { transform: scaleX(1.05) translateX(10%); opacity: 1; } }
@keyframes ai-spark { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .95; transform: scale(1); } }
@keyframes ai-halo { 0%, 22% { opacity: .55; transform: scale(.95); } 38%, 62% { opacity: 1; transform: scale(1.08); } 85%, 100% { opacity: .55; transform: scale(.95); } }
@keyframes ai-press { 0%, 40% { transform: translateY(-4%) scale(1); } 44% { transform: translateY(-4%) scale(.965); } 50%, 100% { transform: translateY(-4%) scale(1); } }
@keyframes ai-ring { 0%, 42% { opacity: 0; transform: scale(1); } 44% { opacity: .9; transform: scale(1); } 62%, 100% { opacity: 0; transform: scale(1.18, 1.5); } }
@keyframes ai-cursor {
  0%, 8% { opacity: 0; transform: translate(150%, 260%); }
  14% { opacity: 1; }
  34% { opacity: 1; transform: translate(0, 0); }
  41% { transform: translate(0, 0) scale(1); }
  44% { transform: translate(0, 0) scale(.82); }
  48%, 66% { opacity: 1; transform: translate(0, 0) scale(1); }
  84% { opacity: 0; transform: translate(-260%, 220%); }
  100% { opacity: 0; transform: translate(-260%, 220%); }
}
@media (max-width: 900px) { .split--ai { grid-template-columns: 1fr; } .aipill { width: 72%; } }
@media (prefers-reduced-motion: reduce) {
  .aicard *, .aicard .aipill { animation: none !important; }
  .aicard .aicursor { opacity: 1; transform: none; }
  .aicard .aipill__halo { opacity: 1; }
}

/* AI-chiptegel compacter (12-10-2026): tekst en chip naast elkaar, kleinere chip */
.tile--rainbow { min-height: 0; }
.tile--rainbow .chip { height: 200px; }
.tile--rainbow .chip__core { width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 22px; }
.tile--rainbow .chip__core span { font-size: 36px; }
@media (min-width: 901px) {
  .tile--rainbow { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; }
  .tile--rainbow .tile__text { padding: 30px; }
  .tile--rainbow .tile__text .btn { margin-bottom: 0; }
  .tile--rainbow .chip { height: 240px; margin: 0; }
  .tile--rainbow .chip__core { width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 24px; }
  .tile--rainbow .chip__core span { font-size: 40px; }
}

/* Dashboards naast Automatisering (span 2), AI-chiptegel op een eigen lage rij over de volle breedte */
.tile--split { display: grid; grid-template-columns: 1fr 1.1fr; align-items: end; }
.tile--split .tile__text { padding-bottom: 30px; }
@media (min-width: 901px) {
  .tile--full.tile--rainbow { min-height: 0; grid-template-columns: 1fr 1.25fr; }
  .tile--full.tile--rainbow .tile__text { padding: 34px; }
  .tile--full.tile--rainbow .chip { height: 220px; }
}
@media (max-width: 900px) { .tile--split { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .tile--rainbow .chip { height: 160px; } .tile--rainbow .chip__core { width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 19px; } .tile--rainbow .chip__core span { font-size: 30px; } }

/* ============ Onderzoek: doorlopende slider met cijferkaarten (naar voorbeeld capisoft.nl, 12-10-2026) ============
   Grafieken lopen in een lus van 10 s; home.js zet per element de voortgang (--p) en de getallen. */
.research__head { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.research__head > div:first-child { max-width: 640px; }
.research__nav { display: flex; gap: 10px; flex-shrink: 0; margin-left: auto; }
.research__btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); font-size: 18px; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.research__btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.research { overflow: hidden; padding: 4px 0 28px; cursor: grab; touch-action: pan-y; user-select: none; }
.research.is-drag { cursor: grabbing; }
.research__track { display: flex; gap: 24px; width: max-content; padding-left: max(24px, calc((100vw - var(--wrap)) / 2 + 24px)); will-change: transform; }
.rcard { width: 400px; flex: 0 0 auto; display: flex; flex-direction: column; padding: 24px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 24px 50px -40px rgba(17, 40, 80, .35); }
.rcard a { -webkit-user-drag: none; }
.rcard__vis { position: relative; height: 352px; border-radius: 14px; background: #ececec; padding: 34px 26px 22px; display: flex; flex-direction: column; overflow: hidden; }
.rv__cap { margin: 0; text-align: center; font-size: 15px; font-weight: 600; color: #11181c; line-height: 1.35; }
.rv__cap span { display: block; font-size: 12.5px; font-weight: 500; color: #8a9097; margin-bottom: 3px; }
.rv__foot { margin: 10px 0 0; text-align: center; font-size: 12px; color: #8a9097; }
.rcard__claim { margin: 26px 0 0; font-size: 22px; line-height: 1.5; font-style: italic; color: #11181c; }
.rcard__src { margin: auto 0 0; padding-top: 20px; font-size: 14px; line-height: 1.5; font-style: italic; color: var(--muted); }
.rcard__src a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* Glazen staven: grijs glas, lichtblauw loopt van onderen vol, percentage telt mee */
.gbars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 22px 8px 0; }
.gbar { display: grid; grid-template-rows: 1fr auto; gap: 8px; justify-items: center; min-height: 0; }
.gbar__glass { position: relative; width: 100%; max-width: 54px; border-radius: 14px; overflow: hidden; display: block;
  background: linear-gradient(180deg, #d4d4d6 0%, #b9babd 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 10px 20px -14px rgba(0, 0, 0, .35); }
.gbar__glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(255, 255, 255, .28), transparent 35%, transparent 70%, rgba(255, 255, 255, .18)); pointer-events: none; }
.gbar__fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h, 0) * 1%); border-radius: 12px 12px 14px 14px;
  background: linear-gradient(180deg, #b9e1fb 0%, #7cc4f5 55%, #57adf0 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 0 18px rgba(87, 173, 240, .45); }
.gbar__fill em { position: absolute; left: 0; right: 0; top: 7px; text-align: center; font-style: normal; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .95); font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(30, 90, 160, .4); }
.gbar small { font-size: 11.5px; color: #6d737a; white-space: nowrap; }
.gbars--stack { margin-top: 18px; }
.rlegend { margin: 12px 0 0; display: flex; justify-content: center; gap: 18px; font-size: 12px; color: #6d737a; }
.rlegend span { display: inline-flex; align-items: center; gap: 6px; }
.rlegend i { width: 11px; height: 11px; border-radius: 50%; }
.rlegend .t { background: #b9babd; } .rlegend .n { background: #7cc4f5; }

/* Gloeiende pillen: schuiven open, tekst wordt scherp, blauwe gloed */
.gpills { flex: 1; display: grid; align-content: center; gap: 18px; }
.gpill { position: relative; height: 54px; width: calc(var(--w, 20) * 1%); min-width: 74px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(90deg, #020814 0%, #071a4a 40%, #0b4fd6 78%, #1d8bff 100%); box-shadow: 0 14px 30px -12px rgba(11, 79, 214, .75), inset 0 1px 0 rgba(255, 255, 255, .18); }
.gpill--hl { background: linear-gradient(90deg, #020814 0%, #0a2a7a 35%, #1466ff 70%, #38c8ff 100%); box-shadow: 0 16px 36px -10px rgba(29, 139, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.gpill__glow { position: absolute; top: -40%; bottom: -40%; width: 40%; left: calc(var(--g, 0) * 1%); background: radial-gradient(closest-side, rgba(120, 200, 255, .65), transparent); filter: blur(6px); }
.gpill__txt { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 16px; gap: 12px; color: #fff; white-space: nowrap;
  filter: blur(calc(var(--b, 0) * 1px)); opacity: var(--o, 1); }
.gpill__txt b { font-size: 15px; font-weight: 500; }
.gpill__txt em { font-style: normal; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Twee blokken met schuine hoek: het blauwe blok groeit, de teller loopt mee (verhouding 1 : 1,5) */
.gblocks { flex: 1; display: grid; grid-template-columns: 1fr 76px 1fr; align-items: end; gap: 10px; margin-top: 16px; }
.gblock { position: relative; height: var(--bh, 90px); clip-path: polygon(0 0, 72% 0, 100% 22px, 100% 100%, 0 100%); }
.gblock i { position: absolute; inset: 0; clip-path: inherit; }
.gblock--peer { background: #5d6268; }
.gblock--peer i { inset: 3px 0 0; clip-path: polygon(0 0, 72% 0, 100% 22px, 100% 100%, 0 100%); background: linear-gradient(180deg, #a9acb0, #dcdcdd 75%, #ececec); }
.gblock--top { background: var(--blue); }
.gblock--top i { inset: 4px 0 0; clip-path: polygon(0 0, 72% 0, 100% 22px, 100% 100%, 0 100%); background: linear-gradient(180deg, #a9c8f7, #d6e5fb 70%, #eef3fb); }
.gblock small { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 11.5px; font-weight: 600; color: #4b5259; }
.gmeasure { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.gmeasure b { font-size: 40px; font-weight: 400; letter-spacing: -.02em; color: #11181c; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.gmeasure__bar { width: 1.5px; height: var(--mh, 0px); background: repeating-linear-gradient(180deg, #8a9097 0 3px, transparent 3px 6px); position: relative; margin-bottom: 116px; }
.gmeasure__bar::before, .gmeasure__bar::after { content: ""; position: absolute; left: -5px; width: 11px; height: 1.5px; background: #8a9097; }
.gmeasure__bar::before { top: 0; } .gmeasure__bar::after { bottom: 0; }

@media (max-width: 700px) {
  .research__nav { display: none; }
  .rcard { width: min(340px, 84vw); padding: 16px; }
  .rcard__vis { height: 300px; padding: 26px 16px 16px; }
  .rcard__claim { font-size: 19px; }
  .research__track { padding-left: 16px; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .research { overflow-x: auto; cursor: auto; }
  .research__track { padding-right: 24px; }
}

/* ============ Hero-beeld compact en levendig (12-10-2026): staand, zoals capisoft.nl, steeds iets in beweging ============ */
.hero__visual { width: 100%; max-width: 440px; justify-self: end; min-height: 0; padding: 26px 22px 40px; }
.live { background: var(--white); border-radius: 18px; box-shadow: 0 30px 70px -30px rgba(17, 40, 80, .45), 0 0 0 1px rgba(17, 40, 80, .06); padding: 16px; }
.live__head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.live__ava { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--blue), #7c6cf2); }
.live__head b { display: block; font-size: 14px; }
.live__head div span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #128a57; font-weight: 600; }
.live__head div span i { width: 6px; height: 6px; border-radius: 50%; background: #18b26f; animation: pulse 1.8s ease-out infinite; }
.live__clock { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; padding: 4px 9px; border-radius: 8px; background: var(--soft); }
.live__kpis { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; margin: 14px 0; }
.live__kpi { position: relative; background: var(--soft); border-radius: 12px; padding: 11px 12px; overflow: hidden; }
.live__kpi span { display: block; font-size: 11.5px; color: var(--muted); }
.live__kpi strong { display: inline-block; font-size: 26px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; transform-origin: left center; }
.live__kpi strong.bump { animation: kpi-bump .6s cubic-bezier(.34, 1.6, .64, 1); color: var(--blue); }
.live__kpi small { display: block; font-size: 11px; color: #128a57; font-weight: 600; }
@keyframes kpi-bump { 40% { transform: scale(1.18); } }
.live__spark { position: absolute; right: 10px; bottom: 12px; width: 46%; height: 30px; overflow: visible; }
.live__spark-line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: d .6s var(--ease); }
.live__spark-fill { fill: rgba(31, 111, 242, .14); transition: d .6s var(--ease); }
.live__feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; height: 300px; overflow: hidden; align-content: start;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.live__feed li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; background: var(--white);
  animation: live-in .55s cubic-bezier(.2, .9, .3, 1.15) both; }
.live__feed li.is-new { border-color: #cfe0fd; box-shadow: 0 10px 24px -16px rgba(31, 111, 242, .6); }
@keyframes live-in { from { opacity: 0; transform: translateY(-14px) scale(.97); max-height: 0; padding-top: 0; padding-bottom: 0; } to { max-height: 90px; } }
.live__ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.live__ico svg { width: 17px; height: 17px; }
.live__ico--wa { background: #e5f8ed; color: #1fa855; } .live__ico--web { background: #e7f0ff; color: var(--blue); } .live__ico--mail { background: #fff3e0; color: #c77700; }
.live__ico--eur { background: #e6f7ef; color: #128a57; } .live__ico--cal { background: #f0ecff; color: #6a4fe0; } .live__ico--rem { background: #fff3e0; color: #c77700; }
.live__txt { min-width: 0; }
.live__txt b { display: block; font-weight: 600; font-size: 13px; color: var(--muted); }
.live__txt p { margin: 1px 0 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live__status { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12px; color: var(--muted); }
.live__bar { flex: 1; height: 5px; border-radius: 99px; background: #edf0f4; overflow: hidden; }
.live__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #7c6cf2); transform: scaleX(0); transform-origin: left; animation: live-bar 1.7s ease-in-out forwards; }
@keyframes live-bar { to { transform: none; } }
.live__ok { color: #128a57; font-weight: 600; animation: live-pop .4s ease both; }
@keyframes live-pop { from { opacity: 0; transform: translateY(4px); } }
.live__days { display: flex; gap: 4px; margin-top: 7px; }
.live__days span { padding: 3px 7px; border-radius: 6px; background: var(--soft); font-size: 11.5px; color: var(--muted); transition: background .3s, color .3s; }
.live__days span.on { background: #6a4fe0; color: #fff; font-weight: 600; }
.live__amt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .hero__visual { justify-self: stretch; max-width: 520px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .live__feed li, .live__bar i, .live__ok, .live__kpi strong.bump { animation: none; } .live__bar i { transform: none; } }

/* ============ Websitetegel: reeks van eenvoudig naar uitgebreid (12-10-2026) ============ */
.tile--range .tile__text p { max-width: 54ch; }
.range { padding: 0 30px 0; display: grid; gap: 16px; }
.range__steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.range__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; text-align: left; transition: color .3s; }
.range__step i { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: var(--white); color: var(--muted); box-shadow: 0 0 0 1.5px var(--line); transition: background .3s, color .3s, box-shadow .3s; }
.range__step.is-on, .range__step.is-done { color: var(--ink); }
.range__step.is-on i, .range__step.is-done i { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px rgba(31, 111, 242, .15); }
.range__step:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.range__line { position: absolute; left: 13px; width: calc((100% - 16px) * 2 / 3 + 16px); top: 12px; height: 2px; background: var(--line); }
.range__line b { display: block; height: 100%; width: calc(var(--rp, 0) * 100%); background: var(--blue); transition: width .7s var(--ease); }
.range__step:not(:first-child) { padding-left: 0; }
.range__deck { position: relative; height: 250px; margin-top: 4px; }
.range__card { position: absolute; inset: 22px 0 0; margin: 0; border-radius: 14px 14px 0 0; overflow: hidden; background: #0d1117;
  box-shadow: 0 -10px 40px -20px rgba(17, 40, 80, .45); transform: translateY(26px) scale(.94); opacity: 0; transition: transform .8s var(--ease), opacity .6s ease; }
.range__card img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.range__card figcaption { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 9px 13px; border-radius: 10px; background: rgba(255, 255, 255, .94);
  font-size: 13px; color: var(--muted); box-shadow: 0 10px 24px -12px rgba(17, 40, 80, .5); backdrop-filter: blur(6px); }
.range__card figcaption b { display: block; color: var(--ink); font-size: 13.5px; }
.range__card.is-on { transform: none; opacity: 1; z-index: 3; }
.range__card.is-prev { transform: translateY(-14px) scale(.96); opacity: .55; z-index: 2; }
.range__card.is-prev2 { transform: translateY(-26px) scale(.92); opacity: .3; z-index: 1; }
@media (max-width: 700px) {
  .range { padding: 0 18px; }
  .range__step { font-size: 12px; }
  .range__deck { height: 210px; }
}
@media (prefers-reduced-motion: reduce) { .range__card, .range__line b { transition: none; } }

/* ============ AI-chiptegel verfijnd naar capisoft.nl (12-10-2026): smalle regenboogrand, dunne lijnen die
   zich uittekenen en terugtrekken, glanzende chip met zachte gloed. Overschrijft de eerdere chipregels. ============ */
.tile--rainbow::before { inset: 0; -webkit-mask: none; mask: none; filter: blur(16px); opacity: .85; z-index: -2;
  background: conic-gradient(from var(--rb), #ffe1a8, #bfe9ff, #d8ccff, #ffc6ec, #ffd9c2, #c9f0ff, #ffe1a8); }
.tile--rainbow::after { content: ""; position: absolute; inset: 16px; z-index: -1; border-radius: 16px; background: #fff; filter: blur(14px); pointer-events: none; }
.chip__lines path { stroke: #e4e4e9; stroke-width: 6; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.tile.is-in .chip__lines path { animation: trace-draw 9s cubic-bezier(.6, 0, .3, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes trace-draw { 0% { stroke-dashoffset: 100; } 28%, 64% { stroke-dashoffset: 0; } 92%, 100% { stroke-dashoffset: -100; } }
.chip__core { border-radius: 26% !important; background: linear-gradient(135deg, #ffa24a 0%, #ff5fa8 42%, #a46bff 72%, #7fa0ff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 2px 14px rgba(255, 255, 255, .45), 0 18px 40px -10px rgba(164, 107, 255, .55), 0 -8px 34px -12px rgba(255, 140, 70, .45), 0 0 0 0 transparent; }
.chip__core::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient(70% 55% at 28% 18%, rgba(255, 255, 255, .45), transparent 60%); pointer-events: none; }
.chip__core i { filter: blur(16px); opacity: .9; mix-blend-mode: normal; }
.chip__core .b1 { background: #ffb347; } .chip__core .b2 { background: #ff4fa3; } .chip__core .b3 { background: #9b5cff; }
.chip__core .b4 { right: -40%; bottom: -45%; opacity: .55; background: #7fb2ff; animation: chip-b4 8s ease-in-out infinite alternate; }
@keyframes chip-b4 { to { transform: translate(-30%, -20%) scale(1.15); } }
.chip__core span { z-index: 2; font-weight: 700; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(110, 40, 140, .35); }
.tile.is-in .chip__core { animation: chip-breathe2 5s ease-in-out infinite; }
@keyframes chip-breathe2 { 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .chip__lines path { stroke-dashoffset: 0; animation: none !important; } .chip__core .b4 { animation: none; } }

/* ============ Waarom: donkere bento naar capisoft.nl (12-10-2026). Grote vervaagde kleurenwaaier achter de kaarten,
   dunne verlooprand per kaart en een lichtrand die de muis volgt (home.js zet --cx/--cy). ============ */
.why2 { position: relative; overflow: hidden; background: #151718; isolation: isolate; }
.why2__glow { position: absolute; inset: 0; z-index: -1; filter: blur(150px); transform: translateZ(0); pointer-events: none; }
.why2__glow i { position: absolute; left: 50%; top: 52%; width: min(980px, 90vw); height: 70%; translate: -50% -50%; border-radius: 50%; opacity: .38;
  background: conic-gradient(from 180deg, #0aefff -69deg, #0f83ff 32deg, #b056e7 120deg, #ff9966 204deg, #0aefff 291deg, #0f83ff 392deg); animation: why-spin 28s linear infinite; }
@keyframes why-spin { to { rotate: 360deg; } }
.why2 .head { margin-left: auto; margin-right: auto; text-align: center; }
.bx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bx { position: relative; border-radius: 14px; padding: 1px; background: linear-gradient(135deg, rgba(223, 239, 254, .22), rgba(223, 239, 254, .06)); }
.bx::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .4s; pointer-events: none;
  background: radial-gradient(420px circle at var(--cx, 50%) var(--cy, 50%), rgba(255, 255, 255, .55), transparent 40%); }
.bx-grid:hover .bx::before { opacity: 1; }
.bx__in { position: relative; z-index: 1; height: 100%; border-radius: 13px; background: #151718; padding: 36px; overflow: hidden; }
.bx__in::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--cx, 50%) var(--cy, 50%), rgba(255, 255, 255, .07), transparent 60%); }
.bx:hover .bx__in::after { opacity: 1; }
.bx--wide { grid-column: 1 / -1; }
.bx h3 { font-size: 24px; line-height: 1.3; color: #fff; }
.bx p { margin-top: 12px; color: #9aa4ae; font-size: 16px; line-height: 1.6; }
.bx__stat { display: grid; place-content: center; text-align: center; padding: 30px 18px; min-height: 172px; }
.bx__stat strong { font-size: 48px; font-weight: 500; letter-spacing: -.02em; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.bx__stat sup { font-size: 18px; font-weight: 500; margin-left: 3px; vertical-align: super; color: #c9d2db; }
.bx__stat span { display: block; margin-top: 10px; font-size: 14px; color: #9aa4ae; }
.bx__split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
.bx__split .bx__text p { max-width: 46ch; }

/* Podium met eigen platformen (naar het blauwe 3D-beeld in het voorbeeld) */
.bx__stage { position: relative; height: 380px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 30%, #3d7bff 0%, #1f5be0 45%, #1440b8 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.stage__floor { position: absolute; left: 12%; right: 12%; bottom: 54px; height: 38px; border-radius: 50%; background: radial-gradient(closest-side, rgba(8, 20, 70, .55), transparent); }
.stage__tile { position: absolute; display: grid; place-items: center; width: 150px; height: 150px; border-radius: 30px; background: linear-gradient(160deg, #fff, #e8eefc);
  box-shadow: 0 30px 50px -20px rgba(5, 15, 60, .65), inset 0 2px 0 #fff; animation: stage-float 6s ease-in-out infinite; }
.stage__tile img { width: 76%; height: auto; }
.stage__tile--a { left: 22%; top: 30%; rotate: -8deg; }
.stage__tile--b { right: 20%; top: 22%; rotate: 7deg; animation-delay: -3s; }
.stage__chip { position: absolute; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(8px); box-shadow: 0 12px 24px -12px rgba(5, 15, 60, .6); animation: stage-float 7s ease-in-out infinite; }
.stage__chip--1 { left: 6%; top: 12%; animation-delay: -1s; } .stage__chip--2 { right: 6%; top: 64%; animation-delay: -4s; }
.stage__chip--3 { left: 10%; bottom: 16%; animation-delay: -2.5s; } .stage__chip--4 { right: 12%; top: 8%; animation-delay: -5.5s; }
@keyframes stage-float { 50% { translate: 0 -12px; } }

/* Codevenster */
.bx__media { display: flex; flex-direction: column; }
.code { margin: 26px -36px -36px 0; padding: 22px 24px; border-radius: 12px 0 13px 0; background: #1d2023; border: 1px solid #2a2f33; border-right: 0; border-bottom: 0;
  font: 14.5px/1.85 ui-monospace, SFMono-Regular, Menlo, monospace; color: #d6dbe0; overflow: hidden; white-space: pre; counter-reset: ln; }
.code .k { color: #7fb2ff; } .code .s { color: #f3b37a; } .code .b { color: #c792ea; } .code .ln { color: #fff; }
.js .why2 .code code { display: inline-block; clip-path: inset(0 100% 0 0); }
.js .why2 .bx.is-in .code code { animation: code-type 2.4s steps(40, end) .4s forwards; }
@keyframes code-type { to { clip-path: inset(0 0 0 0); } }

/* Maanden wordt Weken */
.swap { flex: 1; display: grid; place-content: center; justify-items: center; min-height: 190px; gap: 2px; margin-top: 10px; }
.swap span { font-size: 54px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.swap__old { position: relative; color: #6d757d; }
.swap__old::after { content: ""; position: absolute; left: -4%; right: -4%; top: 54%; height: 4px; border-radius: 2px; background: #9aa4ae; transform: scaleX(0); transform-origin: left; }
.swap__new { background: linear-gradient(90deg, #5b9bff, #b056e7 55%, #ff9966); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(14px); }
.bx.is-in .swap__old::after { animation: swap-strike .6s var(--ease) 1s forwards; }
.bx.is-in .swap__new { animation: swap-in .7s var(--ease) 1.5s forwards; }
@keyframes swap-strike { to { transform: none; } }
@keyframes swap-in { to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .bx-grid, .bx__split { grid-template-columns: 1fr; }
  .bx__in { padding: 26px; }
  .bx__stage { height: 300px; }
  .stage__tile { width: 110px; height: 110px; border-radius: 24px; }
  .code { margin-right: -26px; margin-bottom: -26px; font-size: 12.5px; }
}
@media (max-width: 480px) { .bx-stats { gap: 12px; } .bx__stat strong { font-size: 38px; } .stage__chip { font-size: 11.5px; padding: 7px 11px; } }
@media (prefers-reduced-motion: reduce) {
  .why2__glow i, .stage__tile, .stage__chip { animation: none; }
  .js .why2 .code code { clip-path: none; animation: none; }
  .swap__old::after { transform: none; } .swap__new { opacity: 1; transform: none; animation: none !important; }
}

/* Hero rustiger (12-10-2026): geen tellers en grafiek meer, drie meldingen, meer lucht */
.live { padding: 18px; }
.live__head { padding-bottom: 16px; margin-bottom: 16px; }
.live__feed { gap: 10px; height: auto; -webkit-mask-image: none; mask-image: none; }
.live__feed li { padding: 14px; }
.live__feed li.is-new { border-color: var(--line); box-shadow: none; }
.hero__visual { background: linear-gradient(160deg, #f2f6fd, #eef3fa); padding: 34px 26px 44px; align-self: center; }

/* ============ AI bovenop je systemen: eigen ontwerp in PVG-kleuren (12-10-2026) ============
   Noorderlicht in blauw, cyaan en mint langs de randen, stippenraster, je eigen systemen links en rechts,
   lichtpuntjes van en naar een glazen AI-kern. */
.tile--aurora { background: #fbfdff; isolation: isolate; min-height: 0; }
.tile--aurora::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(40% 70% at 0% 0%, rgba(51, 198, 238, .22), transparent 70%), radial-gradient(45% 80% at 100% 100%, rgba(46, 211, 165, .2), transparent 70%),
    radial-gradient(50% 70% at 85% 0%, rgba(31, 111, 242, .18), transparent 70%), radial-gradient(40% 60% at 20% 100%, rgba(91, 155, 255, .14), transparent 70%);
  background-size: 140% 140%; animation: aurora-drift 18s ease-in-out infinite alternate; }
.tile--aurora::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(31, 111, 242, .22) 1px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(60% 80% at 72% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 80% at 72% 50%, #000 20%, transparent 75%); }
@keyframes aurora-drift { to { background-position: 100% 100%; } }
.tile--aurora .tile__text { position: relative; }
.hubx { margin: 0; padding: 18px 26px; }
.hubx__stage { position: relative; width: 100%; aspect-ratio: 640 / 240; }
.hubx__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hubx__lines path { fill: none; stroke: #cfe0f6; stroke-width: 2.5; stroke-linecap: round; }
.hubx__pulses circle { fill: #33c6ee; filter: drop-shadow(0 0 5px rgba(51, 198, 238, .9)); opacity: 0; }
.hubx__tool { position: absolute; left: var(--x); top: var(--y); width: 8.4%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 26%;
  background: #fff; box-shadow: 0 10px 22px -12px rgba(17, 40, 80, .45), 0 0 0 1px rgba(17, 40, 80, .06); animation: hubx-bob 6s ease-in-out infinite; }
.hubx__tool:nth-of-type(2n) { animation-delay: -2s; } .hubx__tool:nth-of-type(3n) { animation-delay: -4s; }
.hubx__tool svg, .hubx__tool img { width: 52%; height: 52%; object-fit: contain; }
@keyframes hubx-bob { 50% { translate: -50% calc(-50% - 4px); } }
.hubx__core { position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; }
.hubx__glass { position: relative; width: 100%; height: 100%; display: grid; place-items: center; border-radius: 28%; color: #fff; font-weight: 750; font-size: clamp(18px, 2.6vw, 34px); letter-spacing: -.01em;
  background: linear-gradient(140deg, #0b1d52 0%, #1450d6 45%, #1f6ff2 65%, #33c6ee 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -10px 24px rgba(51, 198, 238, .35), 0 20px 40px -14px rgba(20, 80, 214, .7), 0 0 0 6px rgba(255, 255, 255, .7);
  animation: hubx-glow 2.8s ease-in-out infinite; }
.hubx__glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(65% 50% at 30% 18%, rgba(255, 255, 255, .45), transparent 65%); }
.hubx__ring { position: absolute; inset: -22%; border-radius: 50%; border: 1.5px dashed rgba(31, 111, 242, .35); animation: hubx-spin 22s linear infinite; }
.hubx__ring::after { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #2ed3a5; box-shadow: 0 0 8px #2ed3a5; }
@keyframes hubx-spin { to { rotate: 360deg; } }
@keyframes hubx-glow { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -10px 24px rgba(51, 198, 238, .5), 0 22px 46px -12px rgba(51, 198, 238, .75), 0 0 0 6px rgba(255, 255, 255, .7); } }
@media (min-width: 901px) {
  .tile--aurora { display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; }
  .tile--aurora .tile__text { padding: 34px; }
  .tile--aurora .tile__text .btn { margin-bottom: 0; }
  .hubx { padding: 22px 30px 22px 0; }
}
@media (max-width: 900px) { .hubx { padding: 8px 18px 22px; } .hubx__tool { width: 10%; } .hubx__core { width: 17%; } }
@media (prefers-reduced-motion: reduce) { .tile--aurora::before, .hubx__tool, .hubx__glass, .hubx__ring { animation: none; } .hubx__pulses { display: none; } }
@media (max-width: 900px) { .tile--aurora { display: flex; flex-direction: column; } .tile--aurora .hubx { margin-top: 0; } }

/* Maanden, dan Weken, dan Dagen: elk woord wordt doorgestreept en het volgende verschijnt. Lus van 9 s. */
.swap { gap: 0; }
.swap .sw { position: relative; font-size: 46px; font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
.sw::after { content: ""; position: absolute; left: -4%; right: -4%; top: 54%; height: 4px; border-radius: 2px; background: #9aa4ae; transform: scaleX(0); transform-origin: left; }
.sw--1 { color: #6d757d; }
.sw--2 { color: #6d757d; opacity: 0; transform: translateY(12px); }
.sw--3 { background: linear-gradient(90deg, #5b9bff, #b056e7 55%, #ff9966); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(12px); }
.sw--3 { font-size: 58px !important; }
.bx.is-in .swap { animation: sw-all 9s ease-in-out infinite; }
.bx.is-in .sw--1::after { animation: sw-strike1 9s var(--ease) infinite; }
.bx.is-in .sw--2 { animation: sw-in2 9s var(--ease) infinite; }
.bx.is-in .sw--2::after { animation: sw-strike2 9s var(--ease) infinite; }
.bx.is-in .sw--3 { animation: sw-in3 9s var(--ease) infinite; }
@keyframes sw-all { 0% { opacity: 0; } 4%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sw-strike1 { 0%, 9% { transform: scaleX(0); } 15%, 100% { transform: none; } }
@keyframes sw-in2 { 0%, 17% { opacity: 0; transform: translateY(12px); } 24%, 100% { opacity: 1; transform: none; } }
@keyframes sw-strike2 { 0%, 44% { transform: scaleX(0); } 50%, 100% { transform: none; } }
@keyframes sw-in3 { 0%, 52% { opacity: 0; transform: translateY(12px) scale(.96); } 60%, 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bx.is-in .swap, .bx.is-in .sw, .bx.is-in .sw::after { animation: none !important; }
  .sw--1::after, .sw--2::after { transform: none; } .sw--2 { opacity: 1; transform: none; } .sw--3 { opacity: 1; transform: none; }
}

/* Maanden, Weken, Dagen gekoppeld aan het scrollen (home.js zet --s1, --o2, --s2, --o3 tussen 0 en 1). Vervangt de tijdlus. */
.js .bx .swap { animation: none !important; opacity: 1; }
.js .bx .sw--1::after { animation: none !important; transform: scaleX(var(--s1, 0)); }
.js .bx .sw--2 { animation: none !important; opacity: var(--o2, 0); transform: translateY(calc((1 - var(--o2, 0)) * 12px)); }
.js .bx .sw--2::after { animation: none !important; transform: scaleX(var(--s2, 0)); }
.js .bx .sw--3 { animation: none !important; opacity: var(--o3, 0); transform: translateY(calc((1 - var(--o3, 0)) * 14px)) scale(calc(.94 + var(--o3, 0) * .06)); }

/* EU-vlag naast de kop "Veilig en in de EU" */
.h3-flag { display: flex; align-items: center; gap: 12px; }
.euflag { width: 36px; height: auto; flex-shrink: 0; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 14px -6px rgba(0, 0, 0, .6); }

/* Dashboardkop: echte icoonknoppen in plaats van losse rondjes met rode vlakjes */
.db__icons { gap: 10px; align-items: center; }
.dbi { position: relative; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 18px -10px rgba(30, 50, 140, .55), inset 0 0 0 1px rgba(255, 255, 255, .8); backdrop-filter: blur(6px); }
.dbi svg { width: 18px; height: 18px; fill: none; stroke: #24305e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dbi b { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #1f6ff2; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.dbi .dbi__dot { min-width: 0; width: 9px; height: 9px; padding: 0; top: -2px; right: -2px; background: #2ed3a5; }
.dbi--me { border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(140deg, #0b1d52, #1f6ff2 60%, #33c6ee); }

/* ============ Film verfijnd (12-10-2026): meer detail per shot en zwiepen in plaats van harde knippen ============ */
/* Overgang "whip": snelle camerabeweging met bewegingsonscherpte */
.shot.whip-out { animation: whip-out .5s cubic-bezier(.7, 0, .3, 1) both; }
.shot.whip-in { animation: whip-in .65s cubic-bezier(.2, .75, .2, 1) both; }
@keyframes whip-out { to { transform: translateX(-38%) scale(1.05); filter: blur(18px); opacity: 0; } }
@keyframes whip-in { from { transform: translateX(38%) scale(1.05); filter: blur(18px); opacity: 0; } }

/* Dashboard: lijst past in het paneel (geen half afgesneden regel) */
.shot--dash .rows li:nth-child(n+3) { display: none; }

/* Shot 2: glazen panelen met een mini-app erin, buitenste panelen onscherp (scherptediepte) */
.glassrow i {
  background:
    radial-gradient(circle at 24px 26px, rgba(111, 144, 228, .85) 8px, transparent 9px),
    linear-gradient(rgba(150, 175, 240, .75), rgba(150, 175, 240, .75)) 40px 20px / 46px 6px no-repeat,
    linear-gradient(rgba(190, 208, 250, .8), rgba(190, 208, 250, .8)) 40px 31px / 30px 5px no-repeat,
    linear-gradient(90deg, rgba(111, 144, 228, .7), rgba(51, 198, 238, .6)) 14px 58px / 82px 30px no-repeat,
    linear-gradient(rgba(200, 215, 250, .8), rgba(200, 215, 250, .8)) 14px 100px / 70px 6px no-repeat,
    linear-gradient(rgba(200, 215, 250, .8), rgba(200, 215, 250, .8)) 14px 113px / 56px 6px no-repeat,
    linear-gradient(rgba(200, 215, 250, .8), rgba(200, 215, 250, .8)) 14px 126px / 64px 6px no-repeat,
    linear-gradient(rgba(111, 144, 228, .5), rgba(111, 144, 228, .5)) 16px 196px / 13px 26px no-repeat,
    linear-gradient(rgba(111, 144, 228, .55), rgba(111, 144, 228, .55)) 35px 182px / 13px 40px no-repeat,
    linear-gradient(rgba(111, 144, 228, .5), rgba(111, 144, 228, .5)) 54px 190px / 13px 32px no-repeat,
    linear-gradient(rgba(51, 198, 238, .7), rgba(51, 198, 238, .7)) 73px 168px / 13px 54px no-repeat,
    linear-gradient(140deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .2));
}
.glassrow i:nth-child(1), .glassrow i:nth-child(7) { filter: blur(3px); }
.glassrow i:nth-child(2), .glassrow i:nth-child(6) { filter: blur(1.2px); }

/* Shot 3: kaarten met echte inhoud */
.gcard { text-align: left; }
.bub { height: auto; padding: 9px 13px; font-size: 14.5px; line-height: 1.35; color: #24305e; background: #fff; box-shadow: 0 8px 18px -12px rgba(40, 70, 160, .5); max-width: 82%; }
.bub--q { width: auto; color: #fff; background: linear-gradient(135deg, #1f6ff2, #5b9bff); border-bottom-right-radius: 4px; }
.bub--a, .bub--a2 { width: auto; justify-self: start; border-bottom-left-radius: 4px; }
.bub--a2 { color: #128a57; background: #e6f7ef; font-weight: 600; }
.gcard--offer { align-content: center; gap: 18px; }
.offer__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.offer__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #18b26f, #2ed3a5); }
.offer__top b { display: block; font-size: 16px; color: #24305e; }
.offer__top small { font-size: 13px; color: #6b7690; }
.offer__top strong { font-size: 20px; color: #0e1a3d; font-variant-numeric: tabular-nums; }
.offer__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.offer__steps li { position: relative; padding: 9px 8px 9px 26px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #8a94ad; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px #e1e8fb; transition: none; }
.offer__steps li::before { content: ""; position: absolute; left: 9px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #d3dbef; }
.shot--cards.on .offer__steps li { animation: step-on .4s ease forwards; }
.shot--cards.on .offer__steps li:nth-child(1) { animation-delay: 3.7s; } .shot--cards.on .offer__steps li:nth-child(2) { animation-delay: 4.3s; } .shot--cards.on .offer__steps li:nth-child(3) { animation-delay: 4.9s; }
@keyframes step-on { to { color: #128a57; background: #e6f7ef; box-shadow: inset 0 0 0 1px #bfe9d3; } }
.shot--cards.on .offer__steps li::before { animation: step-dot .4s ease forwards; animation-delay: inherit; }
@keyframes step-dot { to { background: #18b26f; box-shadow: 0 0 0 3px rgba(24, 178, 111, .2); } }
.gcard--cal2 { align-content: center; gap: 8px; }
.cal2__days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; font-size: 12.5px; font-weight: 600; color: #6b7690; text-align: center; }
.cal2__grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-flow: column; grid-template-rows: repeat(3, 34px); gap: 6px; }
.cal2__grid i { border-radius: 8px; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px #e1e8fb; font-style: normal; }
.cal2__grid .busy { background: repeating-linear-gradient(135deg, #eef2fb 0 5px, #e3e9f8 5px 10px); box-shadow: none; }
.cal2__grid .slot { display: grid; align-content: center; padding: 0 6px; font-size: 10.5px; line-height: 1.15; color: #fff; background: linear-gradient(135deg, #1f6ff2, #5b9bff); box-shadow: 0 10px 20px -10px rgba(31, 111, 242, .9); transform: scale(0); }
.cal2__grid .slot b { font-size: 11.5px; }
.shot--cards.on .cal2__grid .slot { animation: pop .55s cubic-bezier(.34, 1.56, .64, 1) 6.5s forwards; }

/* Shot 4: icoontjes in de knooppunten en lichtpuntjes over de lijnen */
.fnode { display: inline-flex; align-items: center; gap: 9px; }
.fi { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #1f6ff2, #5b9bff); }
.fi svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flow__pulses circle { fill: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .95)) drop-shadow(0 0 12px rgba(51, 198, 238, .8)); }
.flow__pulses { opacity: 0; }
.shot--flow.on .flow__pulses { animation: appear .5s ease 2s forwards; }

/* Shot 7: voordelen als glazen kaartjes, zachte gloed achter de figuur */
.perk { padding: 12px 18px 12px 12px; border-radius: 16px; font-size: 22px; color: #24305e; background: rgba(255, 255, 255, .92);
  box-shadow: 0 20px 40px -22px rgba(30, 50, 140, .6), inset 0 0 0 1px rgba(255, 255, 255, .9); backdrop-filter: blur(8px); opacity: 0; transform: translateY(14px) scale(.96); }
.shot--person.on .perk { animation: perk-in .6s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(.6s + var(--p) * 1s); }
@keyframes perk-in { to { opacity: 1; transform: none; } }
.perk > i { background: linear-gradient(135deg, #18b26f, #2ed3a5); box-shadow: 0 10px 20px -10px rgba(24, 178, 111, .8); }
.pcam::before { content: ""; position: absolute; left: 50%; bottom: -60px; width: 520px; height: 420px; margin-left: -260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(31, 111, 242, .28), transparent); }
@media (prefers-reduced-motion: reduce) { .perk { opacity: 1; transform: none; } .cal2__grid .slot { transform: none; } .flow__pulses { display: none; } }

/* ============ PVG-logo terug in de site (12-10-2026): kleurverloop navy, groen, cyaan en het driehoekige raster ============ */
:root { --pvg-navy: #0c3064; --pvg-teal: #0d8765; --pvg-green: #27c88c; --pvg-cyan: #0bb8cf; --pvg-glow: #03f6fb;
  --pvg-grad: linear-gradient(120deg, #0c3064 0%, #0d8765 42%, #27c88c 64%, #0bb8cf 88%, #03f6fb 100%); }
.pvg-mesh { position: absolute; pointer-events: none; }
.pvg-mesh svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pvg-mesh line { stroke-width: 1.1; vector-effect: non-scaling-stroke; transition: stroke-width .4s ease, opacity .4s ease; opacity: .55; }
.pvg-mesh line.hot { stroke-width: 2; opacity: 1; }
.pvg-mesh .node { fill: #27c88c; opacity: .55; }
.pvg-mesh .pulse { fill: #03f6fb; filter: drop-shadow(0 0 5px rgba(3, 246, 251, .9)) drop-shadow(0 0 10px rgba(39, 200, 140, .7)); }
/* Hero: rechtsboven achter het beeld, zacht naar de randen vervagend */
.pvg-mesh--hero { top: -40px; right: -80px; width: 62%; height: 120%; z-index: 0; opacity: .28;
  -webkit-mask-image: radial-gradient(60% 55% at 60% 42%, #000 15%, transparent 72%); mask-image: radial-gradient(60% 55% at 60% 42%, #000 15%, transparent 72%); }
.hero > .wrap, .hero__grid, .hero .logos { position: relative; z-index: 1; }
/* Donker blok: raster over de gloed */
.pvg-mesh--dark { inset: 0; z-index: -1; opacity: .16;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 55%, #000 10%, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 55%, #000 10%, transparent 75%); }
/* Gloed in het donkere blok in logokleuren in plaats van cyaan-paars-oranje */
.why2__glow i { background: conic-gradient(from 180deg, #03f6fb -60deg, #1f6ff2 40deg, #0d8765 130deg, #27c88c 210deg, #0bb8cf 290deg, #1f6ff2 400deg); opacity: .42; }
/* "Dagen" in het logoverloop */
.sw--3 { background: linear-gradient(90deg, #03f6fb, #27c88c 55%, #5b9bff); -webkit-background-clip: text; background-clip: text; }
/* AI-kern, avatars en voortgangsbalken in logokleuren */
.hubx__glass { background: linear-gradient(140deg, #0c3064 0%, #0d5f86 38%, #0d8765 62%, #27c88c 84%, #0bb8cf 100%); }
.hubx__pulses circle:nth-child(odd) { fill: #27c88c; filter: drop-shadow(0 0 5px rgba(39, 200, 140, .9)); }
.hubx__ring { border-color: rgba(13, 135, 101, .4); }
.live__ava, .dbi--me { background: linear-gradient(140deg, #0c3064, #0d8765 55%, #27c88c 80%, #0bb8cf); }
.film__progress i { background: linear-gradient(90deg, #0c3064, #0d8765, #27c88c, #0bb8cf); }
.progress { background: linear-gradient(90deg, #0c3064, #0d8765 35%, #27c88c 65%, #0bb8cf); }
.flow__pulses circle { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .95)) drop-shadow(0 0 12px rgba(39, 200, 140, .9)); }
/* AI-tegel: het logoraster in plaats van het stippenraster */
.tile--aurora::after { background-image: url("/assets/mesh.svg"); background-size: 760px auto; background-position: 70% 50%; opacity: .22; }
@media (prefers-reduced-motion: reduce) { .pvg-mesh .pulse { display: none; } }
.pvg-mesh--hero { opacity: .5; }
.hero__visual { background: linear-gradient(160deg, rgba(242, 246, 253, .72), rgba(238, 243, 250, .6)); backdrop-filter: blur(2px); }

/* ============ Slot: het PVG-logo bouwt zich op uit zijn eigen raster (12-10-2026) ============
   1. het raster tekent zich vanuit het midden; 2. het lint komt met kleur tevoorschijn; 3. "PVG" en "Technologies".
   Daarna blijft het raster zacht zichtbaar met lichtpulsen (main.js), zweeft het logo licht en gaat er af en toe
   een glans over. Lichte kaart met zacht noorderlicht in de logokleuren. */
.night__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.nightcta { position: relative; aspect-ratio: 1.08 / 1; border-radius: 24px; overflow: hidden; isolation: isolate; display: grid; place-items: center;
  background: linear-gradient(180deg, #eef4fb 0%, #f7fafd 55%, #ffffff 100%); box-shadow: 0 40px 80px -44px rgba(12, 48, 100, .45), inset 0 0 0 1px rgba(12, 48, 100, .06); }
.nightcta__aura { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; }
.nightcta__aura--a { width: 60%; height: 50%; left: -10%; top: 40%; background: #0bb8cf; animation: aura-a 16s ease-in-out infinite alternate; }
.nightcta__aura--b { width: 55%; height: 45%; right: -12%; top: 50%; background: #27c88c; animation: aura-b 19s ease-in-out infinite alternate; }
.nightcta__aura--c { width: 50%; height: 40%; left: 25%; bottom: -18%; background: #1f6ff2; opacity: .35; animation: aura-a 22s ease-in-out infinite alternate-reverse; }
@keyframes aura-a { to { transform: translate(22%, -14%) scale(1.15); } }
@keyframes aura-b { to { transform: translate(-20%, -18%) scale(.9); } }
.nightcta__logo { width: 82%; translate: 0 -6%; }
.nightcta.is-in .nightcta__logo { animation: logo-float 7s ease-in-out 3.2s infinite; }
@keyframes logo-float { 50% { translate: 0 calc(-6% - 8px); } }
.nightcta .pvg-anim { position: relative; width: 100%; aspect-ratio: 2375 / 620; }
.pvg-anim img { display: block; position: absolute; height: auto; max-width: none; }
.pvg-anim__mark { position: absolute; left: 0; top: 0; width: 39.284%; height: 100%; }
.pvg-anim__ribbon { inset: 0; width: 100%; opacity: 0; filter: saturate(1.6) brightness(1.15); }
.pvg-anim__wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pvg-anim__lines line { fill: none; stroke: url(#pvgWire); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px rgba(25, 211, 230, .7)); }
.pvg-anim__nodes circle { r: 6; fill: #eafffb; stroke: #19d3e6; stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transform: scale(0); filter: drop-shadow(0 0 4px rgba(25, 211, 230, .9)); }
.pvg-anim__pulses circle { fill: #e6fffd; filter: drop-shadow(0 0 5px rgba(25, 211, 230, 1)) drop-shadow(0 0 10px rgba(39, 200, 140, .8)); }
.pvg-anim__pvg { left: 43.874%; top: 12.742%; width: 34.863%; clip-path: inset(0 100% 0 0); }
.pvg-anim__tech { left: 43.874%; top: 60.968%; width: 56.126%; opacity: 0; transform: translateY(30%); filter: blur(6px); }
/* Opbouw start pas als de kaart in beeld komt */
.nightcta.is-in .pvg-anim__lines line { animation: pvg-draw var(--l) cubic-bezier(.4, 0, .2, 1) calc(var(--t) + .3s) forwards; }
.nightcta.is-in .pvg-anim__nodes circle { animation: pvg-node .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--t) + .3s) forwards; }
.nightcta.is-in .pvg-anim__lines, .nightcta.is-in .pvg-anim__nodes { animation: pvg-dim 1s ease 2.6s forwards; }
.nightcta.is-in .pvg-anim__ribbon { animation: pvg-ribbon 1s ease 1.65s forwards; }
.nightcta.is-in .pvg-anim__pvg { animation: pvg-wipe .8s cubic-bezier(.65, 0, .35, 1) 2.2s forwards; }
.nightcta.is-in .pvg-anim__tech { animation: pvg-tech .9s var(--ease) 2.5s forwards; }
@keyframes pvg-draw { to { stroke-dashoffset: 0; } }
@keyframes pvg-node { to { transform: scale(1); } }
@keyframes pvg-dim { to { opacity: .4; } }
@keyframes pvg-ribbon { to { opacity: 1; filter: none; } }
@keyframes pvg-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes pvg-tech { to { opacity: 1; transform: none; filter: none; } }
/* Glans die af en toe over het lint gaat (alleen binnen de vorm van het lint) */
.pvg-anim__mark::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%); background-size: 300% 100%; background-position: 130% 0;
  -webkit-mask: url("/assets/logo-anim/mark.webp") center / 100% 100% no-repeat; mask: url("/assets/logo-anim/mark.webp") center / 100% 100% no-repeat; mix-blend-mode: soft-light; }
.nightcta.is-in .pvg-anim__mark::after { animation: ribbon-sheen 6s ease-in-out 3.4s infinite; }
@keyframes ribbon-sheen { 0% { background-position: 130% 0; } 35%, 100% { background-position: -30% 0; } }
.nightcta__clock { position: absolute; right: 18px; top: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #24305e; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(12, 48, 100, .08), 0 8px 20px -12px rgba(12, 48, 100, .35); backdrop-filter: blur(8px); }
.nightcta__clock i { width: 7px; height: 7px; border-radius: 50%; background: #27c88c; box-shadow: 0 0 8px #27c88c; animation: pulse 1.8s ease-out infinite; }
.nightcta__toast { position: absolute; left: 50%; bottom: 9%; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: #0e1a3d; background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 18px 40px -18px rgba(12, 48, 100, .45);
  backdrop-filter: blur(10px); translate: -50% 0; transition: opacity .6s ease, transform .6s ease; }
.nightcta__toast b { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; color: #fff; background: linear-gradient(135deg, #0d8765, #27c88c); }
.nightcta__toast.out { opacity: 0; transform: translateY(8px); }
.night__text h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.night__text p { margin-top: 16px; color: var(--muted); font-size: 18px; }
.night__text .btn { margin-top: 28px; }
.night__text .final-cta__proof { display: flex; }
@media (max-width: 900px) { .night__grid { grid-template-columns: 1fr; gap: 36px; } .nightcta__toast { font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) {
  .nightcta__aura, .nightcta__logo, .pvg-anim__mark::after { animation: none !important; }
  .pvg-anim__ribbon, .pvg-anim__pvg, .pvg-anim__tech { opacity: 1; clip-path: none; transform: none; filter: none; animation: none !important; }
  .pvg-anim__wire { display: none; }
}

/* ============ Werkwijze als tijdlijn (12-10-2026, naar capisoft.nl/onze-werkwijze) ============
   De lijn vult zich mee met scrollen (home.js zet --tp), de stap waar je bent licht op. */
.flow2 { display: grid; grid-template-columns: .9fr 1.2fr; gap: 80px; align-items: start; }
.flow2__head { position: sticky; top: 130px; max-width: 460px; }
.flow2__head h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.flow2__head p { margin-top: 16px; color: var(--muted); font-size: 18px; }
.flow2__head .btn { margin-top: 28px; }
.tl { position: relative; list-style: none; margin: 0; padding: 6px 0 0 64px; }
.tl__rail { position: absolute; left: 21px; top: 26px; bottom: 120px; width: 2px; border-radius: 2px; background: var(--line); }
.tl__fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--tp, 0) * 100%); border-radius: inherit; background: linear-gradient(180deg, #1f6ff2, #0bb8cf 70%, #27c88c); }
.tl__dot { position: absolute; left: 50%; top: calc(var(--tp, 0) * 100%); width: 18px; height: 18px; border-radius: 50%; translate: -50% -50%;
  background: #fff; border: 3px solid #1f6ff2; box-shadow: 0 0 0 6px rgba(31, 111, 242, .14), 0 6px 14px -4px rgba(31, 111, 242, .5); }
.tl__step { position: relative; padding: 0 0 88px; opacity: .32; transition: opacity .5s ease; }
.tl__step.on { opacity: 1; }
.tl__step:last-child { padding-bottom: 20px; }
.tl__ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px; color: #1f6ff2; background: #eaf2ff; transition: background .4s ease, color .4s ease, box-shadow .4s ease; }
.tl__step.on .tl__ico { color: #fff; background: linear-gradient(135deg, #1f6ff2, #0bb8cf); box-shadow: 0 12px 24px -12px rgba(31, 111, 242, .7); }
.tl__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tl__step small { display: block; font-size: 14px; font-weight: 600; color: #1f6ff2; }
.tl__step h3 { margin-top: 6px; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.01em; }
.tl__step p { margin-top: 12px; max-width: 52ch; font-size: 17.5px; color: var(--muted); }
@media (max-width: 900px) {
  .flow2 { grid-template-columns: 1fr; gap: 44px; }
  .flow2__head { position: static; }
  .tl { padding-left: 52px; } .tl__rail { left: 15px; } .tl__step { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) { .tl__step { opacity: 1; transition: none; } .tl__fill { height: 100%; } .tl__dot { display: none; } }

/* ============ Glazen knop "AI op maat" verfijnd naar capisoft.nl (12-10-2026) ============
   Zilverwit glas bovenin, glanslaag als een lens, dunne heldere rand, subtiel kleurlicht onderin,
   een smalle witte lichtlijn langs de onderrand en lichtere letters. */
.aipill__glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(244, 247, 255, .9) 30%, rgba(214, 224, 250, .62) 62%, rgba(186, 204, 246, .48) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(255, 255, 255, .85), inset 0 -14px 26px -10px rgba(90, 130, 235, .45),
    0 1px 0 rgba(255, 255, 255, .35), 0 26px 46px -20px rgba(4, 10, 40, .85);
}
.aipill__glass::before { content: ""; position: absolute; left: 7%; right: 7%; top: 5%; height: 42%; border-radius: 999px; z-index: 2;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); opacity: .7; }
.aipill__glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none;
  background: radial-gradient(60% 90% at 50% 120%, rgba(120, 170, 255, .35), transparent 70%); }
.lb { filter: blur(20px); opacity: .42; mix-blend-mode: multiply; top: 55%; height: 95%; }
.lb--a { background: #a99cff; } .lb--b { background: #7aa2ff; } .lb--c { background: #58c9f2; }
.aipill__edge { left: 26%; right: 26%; bottom: 3%; height: 4%; filter: blur(1.5px); opacity: 1; background: #fff;
  box-shadow: 0 0 10px 3px rgba(150, 205, 255, .9), 0 0 26px 8px rgba(90, 150, 255, .55); }
.aipill__label { z-index: 3; font-weight: 500; letter-spacing: .005em; color: rgba(255, 255, 255, .97);
  text-shadow: 0 1px 1px rgba(40, 60, 140, .35), 0 2px 14px rgba(70, 110, 230, .55), 0 0 2px rgba(80, 110, 220, .4); }
.sp { z-index: 3; width: 2.5px; height: 2.5px; }
.aipill__halo { inset: -55% -4% 30%; background: radial-gradient(50% 50% at 50% 62%, rgba(140, 190, 255, .8), rgba(80, 130, 255, .22) 50%, transparent 72%); filter: blur(16px); }
.aipill__glass { background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(232, 238, 253, .88) 26%, rgba(196, 211, 249, .7) 58%, rgba(172, 193, 244, .58) 100%); }
.aipill__label { text-shadow: 0 1px 1px rgba(30, 50, 130, .45), 0 2px 16px rgba(60, 100, 220, .65), 0 0 3px rgba(70, 100, 210, .45); }

/* ============ Over ons: profielkaart in logokleuren met het logoraster (12-10-2026) ============ */
.profile { position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 48px 36px 40px; border-radius: 24px;
  background: radial-gradient(90% 70% at 50% 0%, #0d5f86 0%, #0c3064 55%, #081d40 100%); box-shadow: 0 40px 80px -44px rgba(12, 48, 100, .7); color: #fff; }
.profile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; background: url("/assets/mesh.svg") center / 640px auto;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 80%); }
.profile::after { content: ""; position: absolute; left: 50%; top: -30%; z-index: -1; width: 80%; height: 70%; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(39, 200, 140, .35), transparent); filter: blur(10px); }
.profile__ring { width: 184px; height: 184px; padding: 4px; border-radius: 50%; margin-bottom: 18px;
  background: linear-gradient(140deg, #03f6fb, #27c88c 45%, #1f6ff2); box-shadow: 0 0 0 8px rgba(255, 255, 255, .06), 0 24px 50px -20px rgba(3, 246, 251, .45); }
.profile__ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #0c3064; }
.profile__name { font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.profile__role { font-size: 15px; color: rgba(214, 228, 255, .75); }
.profile__facts { list-style: none; margin: 18px 0 4px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.profile__facts li { padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #e6fbff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.profile__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 16px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: #0c3064; background: #fff; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.profile__link:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(3, 246, 251, .6); }
.profile__link svg { width: 16px; height: 16px; color: #0a66c2; }

/* Langere labels op het podium: niet over de rand, maximaal twee regels */
.stage__chip { white-space: normal; max-width: 46%; line-height: 1.3; text-align: center; }
.stage__chip--1 { left: 5%; top: 7%; } .stage__chip--4 { right: 5%; top: 7%; }

/* ============ Slot: nachtklok als datakunst (12-10-2026) ============ */
.nightcta--clock { background: radial-gradient(90% 80% at 50% 45%, #0d2c5c 0%, #081a3a 60%, #050f25 100%); box-shadow: 0 40px 80px -40px rgba(5, 15, 37, .8); }
.nightcta--clock::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12; background: url("/assets/mesh.svg") center / 720px auto;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, transparent 35%, #000 70%); mask-image: radial-gradient(60% 60% at 50% 50%, transparent 35%, #000 70%); }
.nclock { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nclock .ring-bg { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 10; }
.nclock .night-arc { fill: none; stroke: url(#ncNight); stroke-width: 10; stroke-linecap: round; opacity: .9; }
.nclock .night-arc--glow { stroke-width: 22; opacity: .18; filter: blur(6px); }
.nclock .ticks line { stroke: rgba(214, 228, 255, .28); stroke-width: 1.5; stroke-linecap: round; }
.nclock .ticks line.maj { stroke: rgba(214, 228, 255, .6); stroke-width: 2; }
.nclock .labels text { fill: rgba(214, 228, 255, .55); font: 600 13px/1 Inter, system-ui, sans-serif; text-anchor: middle; font-variant-numeric: tabular-nums; }
.nclock .moon path { fill: #cfe9ff; filter: drop-shadow(0 0 8px rgba(3, 246, 251, .6)); }
.nclock .sun circle { fill: #ffd27a; } .nclock .sun path { stroke: #ffd27a; stroke-width: 2; stroke-linecap: round; }
.nclock .sun { opacity: .55; }
.nclock .dots circle { fill: #e6fffd; filter: drop-shadow(0 0 4px rgba(3, 246, 251, 1)) drop-shadow(0 0 9px rgba(39, 200, 140, .8)); animation: nc-dot .7s cubic-bezier(.34, 1.56, .64, 1) both; transform-box: fill-box; transform-origin: center; }
@keyframes nc-dot { from { transform: scale(0); opacity: 0; } }
.nclock .hand line { stroke: rgba(230, 251, 255, .85); stroke-width: 2.5; stroke-linecap: round; }
.nclock .hand .tip { fill: #03f6fb; }
.nclock .hand .hub { fill: #0c3064; stroke: #03f6fb; stroke-width: 3; }
.nclock__center { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; display: grid; justify-items: center; text-align: center; pointer-events: none; margin-top: 30px; }
.nclock__center small { font-size: 13px; font-weight: 600; color: #7fe3c4; }
.nclock__center strong { font-size: clamp(44px, 5.4vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff, #bdf3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nclock__center span { font-size: 12.5px; color: rgba(214, 228, 255, .6); max-width: 16ch; }
.nightcta--clock .nightcta__toast { color: #fff; background: rgba(9, 25, 56, .75); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 40px -16px rgba(0, 0, 0, .7); bottom: 5%; }

.nclock .inner { fill: none; stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.nightcta--clock .nightcta__toast { left: 18px; top: 18px; bottom: auto; translate: none; font-size: 13px; }
.nclock__center { margin-top: 0; }

/* ============ Dienstentegels op mobiel duidelijker (12-10-2026, naar capisoft.nl) ============ */
/* AI-tegel: altijd de volle breedte (Safari maakte het beeld 0 breed door align-items: end van tile--full) */
.tile--aurora { align-items: stretch; }
.hubx { width: 100%; box-sizing: border-box; }
.hubx__stage--m { display: none; aspect-ratio: 360 / 320; }
@media (max-width: 900px) {
  .hubx__stage--d { display: none; }
  .hubx__stage--m { display: block; }
  .hubx__stage--m .hubx__tool { width: 15%; }
  .hubx__stage--m .hubx__core { width: 24%; }
  .hubx { padding: 4px 22px 26px; }
}

/* Dashboard-tegel: mini-dashboard dat rechts uit de kaart loopt, zoals het productbeeld bij Capisoft */
.tile--split { align-items: stretch; }
.mdash { position: relative; align-self: end; margin: 26px 0 0 26px; height: 300px; overflow: hidden; border-radius: 14px 0 0 0; }
.mdash__win { position: absolute; left: 0; top: 0; width: 640px; height: 340px; display: grid; grid-template-columns: 150px 1fr; border-radius: 14px 0 0 0;
  background: #fff; box-shadow: 0 0 0 1px rgba(17, 40, 80, .07), 0 -14px 40px -22px rgba(17, 40, 80, .45); font-size: 12px; color: #24305e; }
.mdash__side { background: linear-gradient(180deg, #0c3064, #0a2752); color: rgba(255, 255, 255, .78); padding: 14px 10px; border-radius: 14px 0 0 0; }
.mdash__side strong { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 13px; margin: 0 4px 14px; }
.mdash__side strong img { width: 24px; height: auto; }
.mdash__side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.mdash__side li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-weight: 500; }
.mdash__side li i { width: 12px; height: 12px; border-radius: 4px; background: rgba(255, 255, 255, .25); }
.mdash__side li.on { background: rgba(255, 255, 255, .12); color: #fff; }
.mdash__side li.on i { background: #27c88c; }
.mdash__main { padding: 14px 16px; }
.mdash__top { display: flex; align-items: center; gap: 10px; }
.mdash__top h4 { margin: 0; font-size: 16px; color: #0e1a3d; }
.mdash__tag { padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: #1f6ff2; background: #eaf2ff; }
.mdash__pills { display: flex; gap: 6px; margin: 10px 0 12px; }
.mdash__pills span { padding: 5px 9px; border-radius: 7px; font-size: 11px; color: #5d6874; box-shadow: inset 0 0 0 1px #e1e6ee; }
.mdash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mdash__kpis div { padding: 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px #e7ebf2; }
.mdash__kpis span { display: block; font-size: 10.5px; color: #6b7690; }
.mdash__kpis b { display: block; font-size: 22px; font-weight: 700; color: #0e1a3d; font-variant-numeric: tabular-nums; }
.mdash__kpis em { font-style: normal; font-size: 10.5px; font-weight: 600; color: #128a57; }
.mdash__src { margin-top: 12px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px #e7ebf2; }
.mdash__src p { margin: 0 0 8px; font-weight: 600; font-size: 11.5px; color: #0e1a3d; }
.mdash__src ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mdash__src li { display: grid; grid-template-columns: 64px 1fr 34px; align-items: center; gap: 8px; font-size: 11px; color: #5d6874; }
.mdash__src li i { height: 8px; border-radius: 99px; background: #eef1f6; position: relative; overflow: hidden; }
.mdash__src li i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, #1f6ff2, #0bb8cf); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.tile.is-in .mdash__src li i::after { transform: none; }
.tile.is-in .mdash__src li:nth-child(2) i::after { transition-delay: .1s; } .tile.is-in .mdash__src li:nth-child(3) i::after { transition-delay: .2s; } .tile.is-in .mdash__src li:nth-child(4) i::after { transition-delay: .3s; }
.mdash__src li b { font-weight: 600; color: #0e1a3d; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .tile--split { display: flex; flex-direction: column; }
  .mdash { align-self: stretch; margin: 6px 0 0 22px; height: 280px; }
}
@media (prefers-reduced-motion: reduce) { .mdash__src li i::after { transform: none; transition: none; } }

/* Mobiel: grote tekst kleiner en rustiger (zoals capisoft.nl, 24 tot 28px halfvet), maar mét beweging:
   woorden lichten op tijdens het scrollen en de feiten en cijfers schuiven één voor één in beeld (home.js) */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .htext { font-size: clamp(1.55rem, 6.6vw, 1.85rem); font-weight: 600; line-height: 1.34; letter-spacing: -.015em; }
  .htext .lw { color: #cfd4da; transition: color .35s ease; }
  .htext .lw.on { color: var(--ink); }
  .htext em .lw { color: #c9dafb; }
  .htext em .lw.on { color: var(--blue); }
  .hscroll .m-pre { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s var(--ease); }
  .hscroll .m-pre.m-in { opacity: 1; transform: none; }
  .hstats dd.m-pre { transition-delay: .12s; }
}

/* ============ Glazen knop: pijl komt naar de knop, klikt zodra je er bent en blijft staan (12-10-2026) ============
   De animaties staan stil tot de kaart in beeld komt (.is-live), dus de pijl komt aan op het moment dat de bezoeker
   er is. Daarna blijft hij op de knop en klikt hij af en toe opnieuw. */
.aicard .aicursor { animation: ai-cursor-in 1.4s cubic-bezier(.3, .7, .25, 1) .3s both, ai-cursor-tap 5s ease-in-out 1.7s infinite; }
.aicard .aipill { animation: ai-press2 5s ease-in-out 1.7s infinite; }
.aicard .aipill__ring { animation: ai-ring2 5s ease-out 1.7s infinite; }
.aicard .aipill__halo { animation: ai-halo2 5s ease-in-out 1.7s infinite; }
@keyframes ai-cursor-in { from { opacity: 0; transform: translate(170%, 230%); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes ai-cursor-tap { 0%, 4% { scale: 1; } 8% { scale: .8; } 13%, 100% { scale: 1; } }
@keyframes ai-press2 { 0%, 5% { transform: translateY(-4%) scale(1); } 9% { transform: translateY(-4%) scale(.965); } 15%, 100% { transform: translateY(-4%) scale(1); } }
@keyframes ai-ring2 { 0%, 7% { opacity: 0; transform: scale(1); } 9% { opacity: .9; transform: scale(1); } 32%, 100% { opacity: 0; transform: scale(1.16, 1.5); } }
@keyframes ai-halo2 { 0%, 6% { opacity: .75; transform: scale(1); } 12%, 40% { opacity: 1; transform: scale(1.1); } 70%, 100% { opacity: .75; transform: scale(1); } }
/* Glanslaag zonder harde onderrand (Safari tekende die als lijn door de tekst) */
.aipill__glass::before { left: 0; right: 0; top: 0; height: 60%; border-radius: 0;
  background: radial-gradient(ellipse 46% 80% at 50% 0%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 100%); opacity: .75; }
@media (prefers-reduced-motion: reduce) { .aicard .aicursor { animation: none; opacity: 1; transform: none; } }
.aicard:not(.is-live) .aicursor, .aicard:not(.is-live) .aipill, .aicard:not(.is-live) .aipill__ring, .aicard:not(.is-live) .aipill__halo { animation-play-state: paused; }

/* ============ Projecten op mobiel: zelf vegen, kaart klikt op zijn plek, stipjes laten zien waar je bent ============ */
.projects__nav { display: none; }
@media (max-width: 900px) {
  .projects { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding: 0 16px; }
  .projects::-webkit-scrollbar { display: none; }
  .projects__track { animation: none; gap: 14px; padding: 6px 16px 20px; }
  .project[aria-hidden="true"] { display: none; }
  .project { width: 80vw; max-width: 340px; scroll-snap-align: start; }
  .projects__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 16px 0; font-size: 13px; font-weight: 600; color: var(--muted); }
  .projects__dots { display: flex; gap: 7px; }
  .projects__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #cfd6e0; cursor: pointer; transition: width .3s ease, background .3s ease; }
  .projects__dots button.on { width: 22px; background: var(--blue); }
}

/* "Dagen": ruimte voor de staart van de g (het kleurverloop wordt alleen binnen de eigen box getekend) */
.swap .sw--3 { display: inline-block; line-height: 1.2; padding: 0 .04em .14em; margin-bottom: -.1em; }

/* ============ Mini-dashboard levend: cijfers tellen op, nieuwe aanvragen komen binnen (home.js) ============ */
.mdash__main { position: relative; }
.mdash__live { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 10.5px; font-weight: 600; color: #128a57; }
.mdash__live i { width: 6px; height: 6px; border-radius: 50%; background: #18b26f; animation: pulse 1.8s ease-out infinite; }
.mdash__kpis div { position: relative; transition: box-shadow .4s ease, background .4s ease; }
.mdash__kpis div.bump { background: #f1fbf6; box-shadow: inset 0 0 0 1px #bfe9d3; }
.mdash__kpis div.bump b { color: #128a57; }
.mdash__kpis b { transition: color .4s ease; }
.mdash__plus { position: absolute; right: 8px; top: 8px; font-size: 11px; font-weight: 700; color: #128a57; animation: mdash-plus 1.2s ease forwards; }
@keyframes mdash-plus { from { opacity: 0; transform: translateY(6px); } 25% { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }
.mdash__src li i::after { transition: transform 1s var(--ease), width .8s var(--ease); }
.mdash__toast { position: absolute; left: 12px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; max-width: 250px; padding: 8px 12px 8px 8px; border-radius: 12px;
  font-size: 11.5px; font-weight: 600; color: #0e1a3d; background: #fff; box-shadow: 0 14px 30px -12px rgba(5, 15, 40, .55), 0 0 0 1px rgba(17, 40, 80, .06);
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .9, .3, 1.2); }
.mdash__toast.on { opacity: 1; transform: none; }
.mdash__toast b { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; font-size: 11px; color: #fff; background: linear-gradient(135deg, #1f6ff2, #0bb8cf); }
@media (prefers-reduced-motion: reduce) { .mdash__toast, .mdash__plus { display: none; } }

/* ============ Voorbeeldtegel duidelijker (feedback klant 12-10-2026): tabbladen in plaats van genummerde stappen,
   kaarten zijn links naar de echte websites ============ */
.range__line { display: none; }
.range__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.range__label { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-right: 4px; }
.range__step { flex-direction: row; align-items: center; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #3b4652;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, color .25s, box-shadow .25s; }
.range__step.is-done { color: #3b4652; }
.range__step.is-on { color: #fff; background: var(--blue); box-shadow: 0 8px 18px -10px rgba(31, 111, 242, .7); }
.range__step:hover:not(.is-on) { box-shadow: inset 0 0 0 1px #b9cdf3; color: var(--blue); }
.range__card { display: block; text-decoration: none; color: inherit; pointer-events: none; }
.range__card.is-on { pointer-events: auto; cursor: pointer; }
.range__card img { transition: transform 1.2s var(--ease); }
.range__card.is-on:hover img { transform: scale(1.02); }
.range__cap { position: absolute; left: 14px; right: 14px; bottom: 14px; max-width: 420px; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, .95);
  font-size: 13px; line-height: 1.45; color: var(--muted); box-shadow: 0 12px 28px -14px rgba(17, 40, 80, .55); backdrop-filter: blur(6px); }
.range__cap small { display: block; font-size: 11.5px; font-weight: 600; color: var(--blue); margin-bottom: 2px; }
.range__cap b { display: block; color: var(--ink); font-size: 14px; }
.range__go { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(31, 111, 242, .5); }
.range__card.is-on:hover .range__go { color: var(--blue); }
@media (max-width: 700px) {
  .range__step { padding: 7px 11px; font-size: 12.5px; }
  .range__label { width: 100%; }
  .range__deck { height: 240px; }
}
.range__steps .range__step { padding: 8px 14px; }
.range__go { display: block; width: fit-content; }
@media (max-width: 700px) { .range__steps .range__step { padding: 7px 11px; } .range__deck { height: 270px; } }

/* ============ Werkwijze als kaartenstapel (12-10-2026, naar capisoft.nl): de sectie blijft staan, elke volgende
   stapkaart schuift van onderen over de vorige. home.js zet per kaart --t (0 = nog onder, 1 = op zijn plek). ============ */
.flow2--stack { align-items: center; }
.wstack { position: relative; }
.wstack__deck { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.wstack__card { position: relative; padding: 46px 40px 50px; border-radius: 14px; background: #fff; box-shadow: 0 0 40px 20px rgba(17, 24, 28, .06), 0 0 0 1px rgba(17, 24, 28, .04); }
.wstack__num { position: absolute; right: 0; top: 0; width: 56px; height: 48px; display: grid; place-items: center; border-radius: 0 14px 0 14px;
  background: #f5f7fa; font-size: 18px; font-weight: 500; color: #7e868c; font-variant-numeric: tabular-nums; }
.wstack__card small { display: block; font-size: 14px; font-weight: 600; color: var(--blue); }
.wstack__card h3 { margin-top: 6px; font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.wstack__card p { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
/* Met beweging: de sectie wordt een vaste plek waarbinnen de kaarten over elkaar schuiven */
.js .wstack.is-pinned { height: calc(100vh + var(--n, 4) * 55vh); }
.js .wstack.is-pinned .wstack__stage { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; }
.js .wstack.is-pinned .wstack__deck { display: block; position: relative; height: 420px; }
.js .wstack.is-pinned .wstack__card { position: absolute; inset: 0 0 auto; min-height: 360px; will-change: transform, opacity;
  transform: translateY(calc((1 - var(--t, 0)) * 115%)) scale(calc(1 - var(--b, 0) * .06)); opacity: calc(min(1, var(--t, 0) * 1.6) * (1 - var(--b, 0) * .45)); transform-origin: 50% 0; }
.js .wstack.is-pinned .wstack__card:first-child { --t: 1; }
@media (min-width: 901px) {
  .flow2--stack { grid-template-columns: .85fr 1.15fr; align-items: start; }
  .flow2--stack .flow2__head { position: sticky; top: calc(50vh - 120px); }
}
@media (max-width: 900px) {
  .js .wstack.is-pinned .wstack__stage { align-items: start; padding-top: 96px; }
  .js .wstack.is-pinned .wstack__deck { height: 440px; }
  .wstack__card { padding: 40px 26px 44px; }
}
/* Vorige kaarten: iets kleiner en omhoog als rand van de stapel, tekst vervaagt (geen tekst door elkaar) */
.js .wstack.is-pinned .wstack__card { opacity: min(1, calc(var(--t, 0) * 1.6));
  transform: translateY(calc((1 - var(--t, 0)) * 115% - var(--b, 0) * 18px)) scale(calc(1 - var(--b, 0) * .05)); }
.js .wstack.is-pinned .wstack__card > * { opacity: calc(1 - var(--b, 0)); transition: none; }
.js .wstack.is-pinned .wstack__card { box-shadow: 0 0 40px 10px rgba(17, 24, 28, .06), 0 0 0 1px rgba(17, 24, 28, .05); }

/* ============ Websitetegel zoals capisoft.nl: echt browservenster dat rechts uit de kaart loopt, met gloed,
   wisselt vanzelf tussen drie projecten, adres typt mee, klein zwevend label (12-10-2026) ============ */
.tile--range .tile__text { position: relative; z-index: 2; }
.sitesx { position: relative; margin: 8px 0 0 30px; padding-top: 34px; min-height: 340px; }
.sitesx__glow { position: absolute; left: 6%; right: -10%; top: 10px; height: 120px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(31, 111, 242, .45), rgba(11, 184, 207, .18) 55%, transparent 75%); filter: blur(18px); }
.sitesx__glow::after { content: ""; position: absolute; left: 10%; right: 10%; top: 48%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #9cc4ff 30%, #fff 50%, #8de3f2 70%, transparent); filter: blur(.5px); opacity: .9; }
.sitesx__dots { position: absolute; left: 2px; top: 6px; display: flex; gap: 7px; z-index: 3; }
.sitesx__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #c9d4e4; cursor: pointer; transition: width .35s ease, background .35s ease; }
.sitesx__dots button.on { width: 24px; background: var(--blue); }
.sitesx__win { position: relative; z-index: 1; display: block; height: 320px; border-radius: 14px 0 0 0; overflow: hidden; text-decoration: none;
  background: #fff; box-shadow: 0 0 0 1px rgba(17, 40, 80, .08), 0 -18px 50px -24px rgba(31, 111, 242, .55), 0 30px 60px -36px rgba(17, 40, 80, .5); }
.sitesx__bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #f4f6f9; border-bottom: 1px solid #e6eaf0; }
.sitesx__bar > i { width: 9px; height: 9px; border-radius: 50%; background: #dfe3e9; }
.sitesx__bar > i:nth-child(1) { background: #ff6159; } .sitesx__bar > i:nth-child(2) { background: #ffbd2e; } .sitesx__bar > i:nth-child(3) { background: #28c941; }
.sitesx__url { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 4px 12px; min-width: 52%; border-radius: 8px; background: #fff;
  font-size: 12px; color: #3b4652; box-shadow: inset 0 0 0 1px #e6eaf0; white-space: nowrap; overflow: hidden; }
.sitesx__url svg { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: #18a05f; stroke-width: 2.2; stroke-linecap: round; }
.sitesx__url b { font-weight: 500; }
.sitesx__url b::after { content: ""; display: inline-block; width: 1px; height: 12px; margin-left: 1px; vertical-align: -2px; background: #3b4652; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.sitesx__shots { position: relative; display: block; height: calc(100% - 36px); overflow: hidden; }
.sitesx__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left;
  opacity: 0; transform: translateY(18px) scale(1.02); transition: opacity .8s ease, transform 1.2s var(--ease); }
.sitesx__shot.on { opacity: 1; transform: none; }
.sitesx__shot.out { opacity: 0; transform: translateY(-14px) scale(.99); }
.sitesx__win:hover .sitesx__shot.on { transform: translateY(-6px); }
.sitesx__chip { position: absolute; z-index: 2; left: -12px; bottom: 22px; display: grid; gap: 1px; padding: 10px 14px; border-radius: 12px; text-decoration: none;
  background: rgba(255, 255, 255, .96); box-shadow: 0 16px 34px -14px rgba(17, 40, 80, .5), 0 0 0 1px rgba(17, 40, 80, .06); backdrop-filter: blur(8px);
  transition: opacity .35s ease, transform .45s var(--ease); }
.sitesx__chip small { font-size: 11px; font-weight: 600; color: var(--blue); }
.sitesx__chip b { font-size: 14px; font-weight: 650; color: var(--ink); }
.sitesx__chip.swap { opacity: 0; transform: translateY(8px); }
@media (max-width: 900px) {
  .sitesx { margin: 4px 0 0 22px; min-height: 290px; }
  .sitesx__win { height: 270px; }
  .sitesx__url { min-width: 0; }
  .sitesx__chip { left: -8px; bottom: 16px; padding: 8px 12px; }
  .sitesx__chip b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .sitesx__shot { transition: none; } .sitesx__url b::after { animation: none; } }
/* Hero-kop: de tweede zin ("Met AI die gewoon werkt.") op de computer altijd op een eigen regel */
@media (min-width: 901px) { .hero__title em { display: block; } }
.hero__title .hb { display: none; }
@media (min-width: 901px) { .hero__title { max-width: none; font-size: clamp(2.3rem, 3.8vw, 3.05rem); } .hero__title .hb { display: inline; } }

/* ============ Hero-beeld (13-10-2026): echte projecten in een laptop en telefoon op een donkere merkkaart met het
   PVG-raster. Alles schaalt mee met de kaart (procenten), zodat het van 900 tot 1440 px en op mobiel klopt. ============ */
.hero__visual.hd { width: 100%; max-width: 560px; aspect-ratio: 560 / 540; height: auto; min-height: 0; padding: 0; align-self: start; justify-self: end;
  border-radius: 22px; overflow: hidden; backdrop-filter: none; isolation: isolate;
  background: radial-gradient(70% 55% at 90% 0%, rgba(11, 184, 207, .42), transparent 62%), radial-gradient(65% 55% at 0% 100%, rgba(39, 200, 140, .3), transparent 62%),
    linear-gradient(155deg, #0e3570 0%, #0a2550 55%, #081c3e 100%);
  box-shadow: 0 40px 80px -40px rgba(8, 28, 62, .6); }
.hd::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/mesh.svg") 60% 40% / 900px auto no-repeat; opacity: .4; pointer-events: none; }
.hd__glow { position: absolute; left: 10%; right: 10%; top: 12%; height: 22%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(3, 246, 251, .38), rgba(31, 111, 242, .2) 55%, transparent 75%); filter: blur(18px); }
.hd .hero__note { left: 4.5%; top: 5.5%; bottom: auto; right: 30%; color: rgba(255, 255, 255, .66); }
.hd__dots { position: absolute; z-index: 3; right: 4.5%; top: 5.5%; display: flex; gap: 7px; padding-top: 4px; }
.hd__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .35); cursor: pointer; transition: width .35s ease, background .35s ease; }
.hd__dots button.on { width: 24px; background: #fff; }
/* Laptop */
.hd__laptop { position: absolute; z-index: 1; left: 4.5%; top: 18%; width: 81%; display: block; text-decoration: none; }
.hd__screen { display: block; padding: 2.2%; border-radius: 14px; background: #0b0f17;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 -14px 44px -20px rgba(3, 246, 251, .55), 0 30px 60px -30px rgba(0, 0, 0, .7); }
.hd__view { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #fff; }
.hd__base { position: relative; display: block; height: 14px; margin: 0 -7%; border-radius: 0 0 16px 16px / 0 0 12px 12px;
  background: linear-gradient(180deg, #e3e7ee, #aab3c0 70%, #8d97a6); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .6); }
.hd__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 5px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: #9aa3b1; }
/* Telefoon */
.hd__phone { position: absolute; z-index: 2; right: 4.5%; bottom: 7%; width: 27.5%; display: block; padding: 4px; border-radius: 24px; background: #0b0f17;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 30px 50px -18px rgba(0, 0, 0, .75); animation: hd-float 7s ease-in-out infinite; }
.hd__pview { position: relative; display: block; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 20px; background: #fff; }
.hd__pview::after { content: ""; position: absolute; z-index: 2; left: 50%; top: 1.6%; width: 28%; height: 2.8%; transform: translateX(-50%); border-radius: 99px; background: #0b0f17; }
@keyframes hd-float { 50% { transform: translateY(-6px); } }
/* Wisselende beelden */
.hd__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transform: scale(1.04); transition: opacity .8s ease, transform 1.4s var(--ease); }
.hd__shot.on { opacity: 1; transform: none; }
.hd__pview .hd__shot { transition-delay: .12s; }
.hd__laptop:hover .hd__shot.on { transform: scale(1.015); }
/* Label */
.hd__chip { position: absolute; z-index: 3; left: 4.5%; bottom: 5%; max-width: 58%; display: grid; gap: 1px; padding: 10px 14px; border-radius: 12px; text-decoration: none;
  background: rgba(255, 255, 255, .97); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .55); transition: opacity .3s ease, transform .4s var(--ease); }
.hd__chip small { font-size: 11.5px; font-weight: 600; color: var(--blue); }
.hd__chip b { font-size: 14.5px; font-weight: 650; color: var(--ink); white-space: nowrap; }
.hd__chip.swap { opacity: 0; transform: translateY(8px); }
@media (max-width: 900px) {
  .hero__visual.hd { justify-self: stretch; max-width: 520px; margin: 0 auto; aspect-ratio: 6 / 7; }
  .hd .hero__note { font-size: 11.5px; }
  .hd__laptop { top: 17%; width: 84%; }
  .hd__screen { border-radius: 10px; }
  .hd__base { height: 10px; }
  .hd__phone { width: 29%; bottom: 13%; padding: 3px; border-radius: 17px; }
  .hd__pview { border-radius: 14px; }
  .hd__chip { padding: 8px 12px; bottom: 4.5%; }
  .hd__chip b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .hd__phone { animation: none; } .hd__shot { transition: none; } }

/* ============ Mobiel breder (13-10-2026, wens eigenaar "meer tegen de randen aan"): smallere zijmarge (12 px) en
   minder binnenruimte in tegels en kaarten, zodat de inhoud de schermbreedte beter benut. ============ */
@media (max-width: 600px) {
  .wrap { width: min(var(--wrap), 100% - 24px); }
  .tile .tile__text, .tile.tile--full .tile__text, .tile.tile--rainbow .tile__text, .tile.tile--aurora .tile__text { padding-top: 24px; padding-left: 20px; padding-right: 20px; }
  .bx-stats { gap: 10px; }
  .bx__in { padding: 22px 18px; }
  .lead-card { padding: 20px 18px; }
  .wstack__card { padding: 34px 20px 38px; }
  .final-cta { padding: 28px 18px; }
  .contact__form { padding: 18px; }
  .profile { padding: 40px 20px 32px; }
  .hscroll__track { padding: 0 12px; }
  .projects { scroll-padding: 0 12px; }
  .projects__track { padding: 6px 12px 20px; }
  .projects__nav { padding: 4px 12px 0; }
  .research__track { padding-left: 12px; }
}
/* Hero-kop ook op mobiel in drie vaste regels: "Meer klanten," / "minder handmatig werk." / "Met AI die gewoon werkt."
   De lettergrootte volgt de schermbreedte zodat de langste regel net past. */
@media (max-width: 900px) {
  .hero__title { max-width: none; font-size: min(2.6rem, calc((100vw - 24px) / 11.7)); }
  .hero__title .hb { display: inline; }
  .hero__title em { display: block; }
}

/* Hero-kaart in beweging (13-10-2026): de MacBook staat gewoon open (besluit eigenaar: geen openklap-animatie).
   Het raster leeft: het drijft langzaam en er lopen lichtpulsen alle kanten op. */
.hd::before { display: none; }
.pvg-mesh--card { inset: -8%; z-index: -1; opacity: .5; }
.pvg-mesh--card svg { animation: hd-drift 26s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes hd-drift { 0% { transform: translate(0, 0) scale(1.04) rotate(0deg); } 50% { transform: translate(-3%, 2%) scale(1.09) rotate(1.2deg); } 100% { transform: translate(2.5%, -2%) scale(1.06) rotate(-1deg); } }
.hd__glow { animation: hd-glow 9s ease-in-out infinite alternate; }
@keyframes hd-glow { 0% { opacity: .75; transform: translateX(-6%); } 100% { opacity: 1; transform: translateX(6%); } }
@media (prefers-reduced-motion: reduce) { .pvg-mesh--card svg, .hd__glow { animation: none; } }

/* Gemini-logo als bestand (officiële ster in de Google-kleuren, juli 2025, via Wikimedia Commons), even groot als de andere iconen */
.brand img.brand__icon { width: 24px; height: 24px; }
@media (max-width: 900px) { .brand img.brand__icon { width: 20px; height: 20px; } }