/* Ikoon One, ikoonone.nl (08-11-2026). Inkt en papier als basis; kleur komt van de zes modules. Logo 3 = zes tegels, één blok. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
	--inkt: #12141B; --inkt-2: #1C1F29; --papier: #F6F7F9; --wit: #FFFFFF; --grijs: #5D6270; --licht: #A2A8B6; --lijn: #E1E4EA;
	/* Modulekleuren (logo: verdeling 2, gekozen 08-11-2026). -l = lichte achtergrond, -t = tekst op de kleur, -d = de kleur als tekst of icoon op wit.
	   Een andere kleurcombinatie later = alleen deze vier regels aanpassen. */
	--kobalt: #2F5BEA; --lagune: #0E9AA7; --violet: #7A5AF8; --mos: #4F9A3A; --abrikoos: #F5A04A; --framboos: #E0477A;
	--kobalt-l: #E6EDFD; --lagune-l: #DFF2F3; --violet-l: #EEEAFE; --mos-l: #E6F1E1; --abrikoos-l: #FEF0E0; --framboos-l: #FCE5ED;
	--kobalt-t: var(--wit); --lagune-t: var(--wit); --violet-t: var(--wit); --mos-t: var(--wit); --abrikoos-t: var(--wit); --framboos-t: var(--wit);
	--kobalt-d: var(--kobalt); --lagune-d: var(--lagune); --violet-d: var(--violet); --mos-d: var(--mos); --abrikoos-d: var(--abrikoos); --framboos-d: var(--framboos);
	--display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--tekst: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--r: 18px; --breed: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--papier); color: var(--inkt); font-family: var(--tekst); font-size: 17px; line-height: 1.6; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.4vw, 66px); font-weight: 800; }
h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 750; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--kobalt); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--inkt); color: var(--wit); padding: 10px 16px; border-radius: 99px; z-index: 100; }
.skip:focus { left: 16px; }

.wrap { width: 100%; max-width: var(--breed); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.wrap.smal { max-width: 860px; }
.twee { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.band { padding-block: clamp(44px, 5.5vw, 80px); }
.band.krap { padding-block: clamp(32px, 4vw, 56px); }
.band h2 + .lead, .band h2 + p { margin-top: 18px; }
.ey { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grijs); margin-bottom: 18px; }
.ey a { text-decoration: none; }
.ey a:hover { text-decoration: underline; }
.ey.licht { color: var(--licht); }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--grijs); max-width: 62ch; margin-top: 22px; }
.lead.smalle { max-width: 58ch; }
.klein-tekst { font-size: 14.5px; color: var(--grijs); margin-top: 16px; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 99px; background: var(--inkt); color: var(--wit); font: 600 16px/1 var(--tekst); text-decoration: none; cursor: pointer; transition: transform .15s, background .15s; white-space: nowrap; }
.knop:hover { background: #2A2E3B; transform: translateY(-1px); }
.knop.groot { min-height: 56px; padding: 0 30px; font-size: 17px; }
.knop.klein { min-height: 42px; padding: 0 20px; font-size: 15px; }
.knop.licht { background: var(--wit); color: var(--inkt); box-shadow: inset 0 0 0 1.5px var(--lijn); }
.knop.licht:hover { box-shadow: inset 0 0 0 1.5px var(--inkt); background: var(--wit); }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.pijl { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 600; text-decoration: none; }
.pijl::after { content: "→"; transition: transform .15s; }
.pijl:hover::after { transform: translateX(4px); }
.pijl.licht { color: var(--wit); }

/* Kop */
.kop { position: sticky; top: 0; z-index: 50; background: rgba(246, 247, 249, 0.88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.kop.scroll { border-bottom-color: var(--lijn); }
.kop-in { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 25px; letter-spacing: -0.035em; line-height: 1; flex: none; }
.logo .mk { width: 40px; height: 40px; margin: -4px; }
.logo .l1 { font-weight: 450; }
.logo b { font-weight: 800; }
.logo.licht { color: var(--wit); }
.menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.menu > a, .mm-knop { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 99px; background: none; font: 500 16px/1 var(--tekst); color: var(--inkt); text-decoration: none; cursor: pointer; }
.menu > a:hover, .mm-knop:hover, .menu > a.aan, .mm-knop.aan { background: rgba(18, 20, 27, 0.06); }
.mm-knop svg { width: 12px; height: 12px; transition: transform .2s; }
.mm-knop[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu .menu-cta { display: none; }
.kop-cta { margin-left: 8px; }
.mm { position: relative; }
.mm-paneel { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-38%); width: min(720px, 92vw); display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 14px; background: var(--wit); border-radius: 22px; box-shadow: 0 24px 60px rgba(18, 20, 27, 0.16), 0 0 0 1px var(--lijn); }
.mm-paneel.open { display: grid; }
.mm-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 14px; text-decoration: none; }
.mm-item:hover { background: var(--papier); }
.mm-item i { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--k); color: var(--kt, var(--wit)); display: grid; place-items: center; }
.mm-item i .ic { width: 22px; height: 22px; }
.mm-item b { display: block; font-size: 15.5px; }
.mm-item small { display: block; color: var(--grijs); font-size: 13.5px; line-height: 1.45; margin-top: 2px; }
.mm-alle { grid-column: 1 / -1; padding: 12px; border-top: 1px solid var(--lijn); margin-top: 4px; font-weight: 600; font-size: 15px; text-decoration: none; }
.mm-alle:hover { text-decoration: underline; }
.hamburger { display: none; width: 46px; height: 46px; border: 0; border-radius: 12px; background: var(--wit); box-shadow: inset 0 0 0 1.5px var(--lijn); cursor: pointer; padding: 0 12px; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; }
.hamburger span { display: block; height: 2px; background: var(--inkt); border-radius: 2px; transition: transform .2s, opacity .2s; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Held */
.held { padding-block: clamp(32px, 4.5vw, 64px) clamp(36px, 5vw, 72px); }
.held.klein { padding-block: clamp(32px, 4.5vw, 60px) clamp(8px, 1.5vw, 20px); }
.held-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.held h1 em { font-style: normal; display: block; background: linear-gradient(90deg, var(--kobalt), var(--violet) 45%, var(--framboos) 75%, var(--abrikoos)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.mozaiek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); }
.tegel { aspect-ratio: 1; max-width: 100%; border-radius: clamp(14px, 2vw, 24px); background: var(--k); color: var(--kt, var(--wit)); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(12px, 1.6vw, 20px); text-decoration: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset; }
.tegel .ic { width: clamp(24px, 2.6vw, 32px); height: clamp(24px, 2.6vw, 32px); }
.tegel b { font-family: var(--display); font-size: clamp(13px, 1.3vw, 18px); line-height: 1.12; letter-spacing: -0.015em; hyphens: manual; overflow-wrap: normal; }
.tegel:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(18, 20, 27, 0.2); }
.tegel:nth-child(5) { color: var(--inkt); }

/* Zo gaat het nu */
.nu { background: var(--wit); }
.chaos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.los { background: var(--papier); border: 1.5px dashed #C9CED8; border-radius: 16px; padding: 18px 20px; display: grid; gap: 4px; align-content: start; }
.los b { font-family: var(--display); font-size: 19px; }
.los span { color: var(--grijs); font-size: 15px; line-height: 1.45; }



.logo .l1 { transform: none; }
.gevolgen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.gevolgen div { border-top: 3px solid var(--framboos); padding-top: 14px; display: grid; gap: 4px; }
.gevolgen b { font-family: var(--display); font-size: 21px; }
.gevolgen span { color: var(--grijs); font-size: 15.5px; }

/* Oplossing en USP's */
.usps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.usps li { background: var(--wit); border-radius: var(--r); padding: 22px; display: grid; gap: 6px; box-shadow: 0 0 0 1px var(--lijn); }
.usps b { font-family: var(--display); font-size: 20px; }
.usps span { color: var(--grijs); font-size: 15.5px; line-height: 1.5; }
.usps.compact { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
.usps.compact li { padding: 16px 18px; }

/* Donkere banden en Assist */
.donker { background: var(--inkt); color: var(--wit); }
.donker .lead { color: #C3C8D3; }
.donker h2, .donker h1 { color: var(--wit); }
.as-mk { width: 54px; height: 54px; color: var(--inkt); flex: none; }
.as-mk.klein { width: 26px; height: 26px; }
.as-mk.groot { width: min(300px, 64vw); height: auto; aspect-ratio: 1; }
.licht-band { background: var(--wit); }
.assist-band { padding-block: clamp(44px, 5.5vw, 80px); }
.assist-held { padding-block: clamp(36px, 5vw, 72px); }
.assist-groot { display: grid; place-items: center; }
.stappen { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; counter-reset: s; }
.stappen li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; }
.stappen .nr { grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; background: var(--abrikoos); color: var(--inkt); display: grid; place-items: center; font: 800 17px/1 var(--display); }
.stappen b { font-family: var(--display); font-size: 18px; }
.stappen p { color: var(--grijs); font-size: 15px; line-height: 1.5; }
.band .stappen p { color: var(--grijs); }
.tel { justify-self: center; width: min(380px, 100%); background: var(--wit); border-radius: 36px; padding: 22px 18px 18px; box-shadow: 0 0 0 1px var(--lijn), 0 30px 60px rgba(18, 20, 27, 0.10); display: grid; gap: 12px; border-top: 6px solid var(--abrikoos); }
.tel-kop { display: flex; align-items: center; gap: 10px; padding: 0 6px 8px; border-bottom: 1px solid var(--lijn); }
.tel-kop b { font-family: var(--display); font-size: 17px; }
.tel-kop span { margin-left: auto; font-size: 12.5px; color: #9A5A12; border: 1px solid rgba(245, 160, 74, 0.6); padding: 3px 10px; border-radius: 99px; }
.bel { font-size: 15px; line-height: 1.5; padding: 12px 14px; border-radius: 18px; max-width: 92%; }
.bel.as { background: var(--papier); border-bottom-left-radius: 6px; }
.bel.jij { background: var(--abrikoos); color: var(--inkt); justify-self: end; border-bottom-right-radius: 6px; font-weight: 500; }
.tel-mic { justify-self: center; width: 64px; height: 64px; border-radius: 50%; background: var(--abrikoos); margin-top: 6px; position: relative; display: grid; place-items: center; animation: puls 2.4s ease-in-out infinite; }
.tel-mic svg { width: 30px; height: 30px; color: var(--inkt); }
@keyframes puls { 50% { box-shadow: 0 0 0 14px rgba(245, 160, 74, 0.12); } }
.tel-noot { text-align: center; color: var(--grijs); font-size: 12px; }

/* Modules */
.mk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.mk-kaart { background: var(--wit); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; box-shadow: 0 0 0 1px var(--lijn); position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.mk-kaart::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--k); }
.mk-kaart:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--lijn), 0 22px 44px rgba(18, 20, 27, 0.1); }
.mk-kop { display: flex; align-items: center; gap: 14px; }
.mk-kop i { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--kl); color: var(--kd, var(--k)); display: grid; place-items: center; }
.mk-kop .ic { width: 26px; height: 26px; }
.mk-kaart > p { color: var(--grijs); margin-top: 14px; font-size: 15.5px; }
.mk-kaart ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.mk-kaart li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.4; }
.mk-kaart li .vk { width: 18px; height: 18px; flex: none; color: var(--kd, var(--k)); margin-top: 2px; }
.mk-kaart li.meer { color: var(--grijs); padding-left: 28px; }
.mk-kaart .pijl { margin-top: auto; padding-top: 22px; color: var(--inkt); }

/* Video */
.video-band { padding-block: 0 clamp(64px, 8vw, 110px); }
.video { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 28px; background: radial-gradient(120% 120% at 20% 10%, #23283A, var(--inkt) 60%); color: var(--wit); display: grid; place-items: center; align-content: center; gap: 18px; text-align: center; padding: 24px; }
.video-mk { width: clamp(80px, 12vw, 140px); height: auto; aspect-ratio: 1; }
.video p { display: grid; gap: 6px; }
.video b { font-family: var(--display); font-size: clamp(22px, 2.6vw, 32px); }
.video span { color: var(--licht); }

/* Koppelingen */
.koppel { background: var(--wit); }
.logos { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.logos li { padding: 12px 18px; border-radius: 99px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--lijn); font-weight: 500; font-size: 15.5px; }

/* Prijsbanner */
.prijsband { padding-block: clamp(32px, 4vw, 56px); }
.prijsband-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; background: var(--wit); border-radius: 24px; padding: clamp(24px, 3.4vw, 40px); box-shadow: 0 0 0 2px var(--kobalt); }
.prijsband p:not(.ey) { color: var(--grijs); max-width: 58ch; margin-top: 12px; }
.prijsband .ey { color: var(--kobalt); }
.prijsband .wrap { max-width: var(--breed); }

/* Vragen */
.vragen { margin-top: 32px; display: grid; gap: 10px; }
.vragen details { background: var(--wit); border-radius: 16px; box-shadow: 0 0 0 1px var(--lijn); }
.vragen summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-family: var(--display); font-size: 19px; font-weight: 650; position: relative; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--grijs); }
.vragen details[open] summary::after { content: "–"; }
.vragen details p { padding: 0 22px 22px; color: var(--grijs); }

/* Oproep */
.cta { background: var(--wit); color: var(--inkt); padding-block: clamp(44px, 5.5vw, 76px); border-top: 1px solid var(--lijn); }
.cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.cta h2 { color: var(--inkt); }
.cta p { color: var(--grijs); margin-top: 12px; max-width: 54ch; font-size: 18px; }
.cta-knop { display: grid; gap: 12px; justify-items: center; }
.cta .knop { background: var(--kobalt); color: var(--wit); }
.cta .knop:hover { background: #2549C4; }
.tel-link { color: var(--grijs); font-size: 15px; }

/* Modulepagina */
.held.module { background: var(--wit); border-top: 6px solid var(--k); }
.held.module .ey { color: var(--kd, var(--k)); }
.module-mk { position: relative; justify-self: center; width: min(360px, 80%); aspect-ratio: 1; display: grid; place-items: center; }
.module-mk .module-tegels { width: 100%; height: 100%; opacity: 0.22; }
.module-mk i { position: absolute; width: 38%; aspect-ratio: 1; border-radius: 28%; background: var(--k); color: var(--kt, var(--wit)); display: grid; place-items: center; box-shadow: 0 24px 50px rgba(18, 20, 27, 0.2); }
.module-mk i .ic { width: 48%; height: 48%; }
.functies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.functie { background: var(--wit); border-radius: var(--r); padding: 24px; box-shadow: 0 0 0 1px var(--lijn); }
.functie h3 { display: flex; gap: 10px; align-items: flex-start; }
.functie h3 .vk { width: 22px; height: 22px; flex: none; color: var(--kd, var(--k)); margin-top: 1px; }
.functie p { color: var(--grijs); margin-top: 10px; font-size: 16px; }
.praktijk { background: var(--wit); }
.praktijk blockquote { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; letter-spacing: -0.015em; font-weight: 550; border-left: 6px solid var(--k); padding-left: clamp(18px, 3vw, 32px); }
.andere-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.ander { display: grid; gap: 12px; padding: 18px; border-radius: 16px; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn); text-decoration: none; transition: transform .15s; }
.ander:hover { transform: translateY(-3px); }
.ander i { width: 40px; height: 40px; border-radius: 12px; background: var(--k); color: var(--kt, var(--wit)); display: grid; place-items: center; }
.ander i .ic { width: 22px; height: 22px; }
.ander b { font-size: 15.5px; line-height: 1.3; }

/* Pakketten en prijzen */
.pakketten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.pakket { background: var(--wit); border-radius: 22px; padding: 26px; box-shadow: 0 0 0 1px var(--lijn); display: grid; gap: 8px; align-content: start; }
.pakket .bedrag, .prijs .bedrag { font-family: var(--display); font-size: 40px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pakket p:not(.bedrag) { color: var(--grijs); font-size: 15.5px; }
.pakket small { color: var(--grijs); font-size: 13px; }
.pakket .normaal { color: var(--grijs); font-size: 14px; margin-top: -4px; }
.pakket .normaal s { text-decoration-thickness: 1.5px; }
.pakket ul { margin-bottom: 4px; }
.extra-item { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.extra-kop { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pakket .extra-kop b { font-family: var(--display); font-size: 18px; color: var(--inkt); }
.pakket .extra-kop span { font-weight: 600; color: var(--kd, var(--inkt)); white-space: nowrap; }
.pakket ul, .prijs ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.pakket li, .prijs li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.4; }
.pakket li .vk, .prijs li .vk { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--mos-d); }
.prijzen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.prijs { background: var(--wit); border-radius: 24px; padding: 30px; box-shadow: 0 0 0 1px var(--lijn); }
.prijs h2 { font-size: 26px; }
.prijs .per { color: var(--grijs); font-size: 14.5px; margin-bottom: 16px; }
.prijs.licentie { background: var(--inkt); color: var(--wit); box-shadow: none; }
.prijs.licentie h2 { color: var(--wit); }
.prijs.licentie .per, .prijs.licentie .klein-tekst { color: var(--licht); }
.staffel li { justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.staffel b { font-family: var(--display); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Assist-voorbeelden */
.voorbeelden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.vb { background: var(--wit); border-radius: var(--r); padding: 22px; box-shadow: 0 0 0 1px var(--lijn); border-top: 5px solid var(--abrikoos); }
.vb p { color: var(--grijs); margin-top: 10px; font-size: 15.5px; }

/* Formulieren en contact */
.form { background: var(--wit); border-radius: 24px; padding: clamp(22px, 3vw, 34px); box-shadow: 0 0 0 1px var(--lijn), 0 30px 60px rgba(18, 20, 27, 0.06); display: grid; gap: 16px; }
.velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 14.5px; font-weight: 600; }
.form input:not([type=radio]):not([type=checkbox]), .form select, .form textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--lijn); border-radius: 12px; font: 400 16px/1.4 var(--tekst); color: var(--inkt); background: var(--wit); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--kobalt); box-shadow: 0 0 0 3px var(--kobalt-l); }
.form .knop { justify-self: start; }
.keus { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.keus legend { font-size: 14.5px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.keus label { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--lijn); font-weight: 500; cursor: pointer; }
.keus label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--k, var(--inkt)); background: var(--papier); }
.keus input { accent-color: var(--inkt); width: 18px; height: 18px; }
.hp { position: absolute; left: -9999px; }
.privacy { font-size: 13.5px; color: var(--grijs); }
.melding { padding: 14px 16px; border-radius: 12px; font-size: 15px; }
.melding.ok { background: var(--mos-l); color: #24521A; }
.melding.fout { background: var(--framboos-l); color: #8A1E44; }
.contact-kaarten { display: grid; gap: 12px; margin-top: 30px; }
.ck { display: grid; gap: 2px; padding: 18px 22px; border-radius: 16px; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn); text-decoration: none; }
.ck small { color: var(--grijs); font-size: 13px; }
.ck b { font-family: var(--display); font-size: 22px; overflow-wrap: anywhere; }
.ck:hover { box-shadow: 0 0 0 2px var(--inkt); }
.tekst h1 { margin-bottom: 24px; }
.tekst p { margin: 0 0 16px; }

/* Voet */
.voet { background: var(--wit); color: var(--grijs); padding-block: 52px 24px; font-size: 15.5px; border-top: 1px solid var(--lijn); }
.voet-in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.voet h2 { font-family: var(--tekst); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #8A909C; margin-bottom: 14px; font-weight: 600; }
.voet nav, .voet-in > div:last-child { display: grid; gap: 8px; align-content: start; }
.voet a { text-decoration: none; }
.voet a:hover { color: var(--inkt); }
.voet nav i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 10px; }
.voet-merk p { margin-top: 16px; max-width: 34ch; }
.voet .slogan { color: #8A909C; font-style: italic; }
.voet .vm { margin-top: 12px; color: #8A909C; }
.voet .vm a { text-decoration: underline; }
.voet-onder { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--lijn); font-size: 13.5px; color: #8A909C; }

/* Tablet en telefoon */
@media (max-width: 1080px) {
	.mk-grid, .pakketten, .prijzen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.voorbeelden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.andere-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.chaos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.blok-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.uv-delen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.hamburger { display: flex; }
	.kop-cta { display: none; }
	.menu { position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px max(20px, env(safe-area-inset-right, 0px)) 24px max(20px, env(safe-area-inset-left, 0px)); background: var(--papier); border-bottom: 1px solid var(--lijn); box-shadow: 0 30px 50px rgba(18, 20, 27, 0.12); max-height: calc(100vh - 76px); overflow-y: auto; display: none; }
	.menu.open { display: flex; }
	.menu > a, .mm-knop { min-height: 52px; font-size: 18px; justify-content: space-between; width: 100%; padding: 0 14px; }
	.menu .menu-cta { display: inline-flex; margin-top: 12px; justify-content: center; color: var(--wit); }
	.menu .menu-cta:hover { background: #2A2E3B; }
	.mm-paneel { position: static; transform: none; width: 100%; box-shadow: none; padding: 4px 0 8px; grid-template-columns: minmax(0, 1fr); background: none; }
	.mm-item small { display: none; }
	.held-in, .twee { grid-template-columns: minmax(0, 1fr); }
	.mozaiek { max-width: 520px; }
	.gevolgen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.voet-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.voet-merk { grid-column: 1 / -1; }
	.module-mk { width: min(240px, 60%); }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.mk-grid, .pakketten, .prijzen, .voorbeelden, .functies, .usps, .stappen, .velden { grid-template-columns: minmax(0, 1fr); }
	.chaos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.andere-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gevolgen { grid-template-columns: minmax(0, 1fr); }
	.knoppen .knop { flex: 1 1 100%; }
	.voet-in { grid-template-columns: minmax(0, 1fr); }
	.voet-onder { flex-direction: column; }
	.logo { font-size: 22px; }
	.logo .mk { width: 34px; height: 34px; }
	.kop-in { min-height: 68px; }
	.menu { inset: 68px 0 auto 0; max-height: calc(100vh - 68px); }
}

/* Prijzen en opzeg-rekensom (08-11-2026): € 125 per maand + € 9,95 per gebruiker, startersregeling, overzethulp. */
.prijzen.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.prijs .wit { color: var(--wit); }
.prijs.starters { background: var(--abrikoos-l); box-shadow: none; }
.prijs.starters .staffel li { border-bottom: 1px solid rgba(18, 20, 27, 0.12); }
.prijs.starters .staffel b { font-size: 22px; }
.rekensom { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 28px; }
.rs-invoer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rs-invoer label:first-child { grid-column: 1 / -1; }
.rs-euro { position: relative; display: block; }
.rs-euro::before { content: "€"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--grijs); font-weight: 600; pointer-events: none; }
.form .rs-euro input:not([type=radio]) { padding-left: 32px; }
.rs-uitkomst { background: var(--wit); color: var(--inkt); border-radius: 20px; padding: clamp(20px, 2.6vw, 28px); display: grid; gap: 12px; position: sticky; top: 96px; box-shadow: 0 0 0 2px var(--kobalt); }
.rs-uitkomst > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--lijn); }
.rs-uitkomst span { color: var(--grijs); font-size: 14.5px; }
.rs-uitkomst b { font-family: var(--display); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-uitkomst .rs-verschil b { color: var(--kobalt); font-size: 30px; }
.rs-uitkomst .klein-tekst { color: var(--grijs); margin-top: 0; }
@media (max-width: 900px) { .rekensom { grid-template-columns: minmax(0, 1fr); } .rs-uitkomst { position: static; } }
@media (max-width: 640px) { .rs-invoer, .prijzen.twee { grid-template-columns: minmax(0, 1fr); } }
/* ===== 09-11-2026: pay-off = het doel, film-intro, blokken met onderdelen, nieuwe prijzenpagina, uitlegpagina.
   Regels van de gebruiker: geen zwarte of gekleurde vlakken (wit + één modulekleur), nooit schuine blokken, compact. ===== */

/* Algemeen: kaart met accentstreep, koprij */
.accent { position: relative; overflow: hidden; }
.accent::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--k); }
.kop-rij { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 16px clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(24px, 3vw, 36px); }
.kop-rij > p, .kop-rij > div > p:not(.ey) { color: var(--grijs); font-size: 17px; max-width: 54ch; }
.kop-rij .ey { margin-bottom: 12px; }
.kop-rij .pijl { margin-top: 12px; }
.kop-rij h2 em, .oplossing h2 em, .prijs-held h1 em { font-style: normal; background: linear-gradient(90deg, var(--kobalt), var(--violet) 45%, var(--framboos) 75%, var(--abrikoos)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oplossing h2 em, .kop-rij h2 em { display: block; }

/* Held: het doel, met de film */
.held-doel .held-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.held-doel h1 { font-size: clamp(38px, 5vw, 62px); }
.held-doel .lead { margin-top: 18px; }
.held-doel .knoppen { margin-top: 28px; }
.film-kaart { position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 24px; overflow: hidden; cursor: pointer; background: var(--lijn); box-shadow: 0 24px 60px rgba(18, 20, 27, 0.16); }
.film-kaart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.film-kaart:hover img { transform: scale(1.03); }
.film-kaart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18, 20, 27, 0.55), rgba(18, 20, 27, 0) 55%); }
.film-play { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--wit); color: var(--inkt); box-shadow: 0 10px 30px rgba(18, 20, 27, 0.25); transition: transform .2s; flex: none; }
.film-play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; }
.film-kaart .film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
.film-kaart:hover .film-play { transform: translate(-50%, -50%) scale(1.06); }
.film-tekst { position: absolute; left: 22px; bottom: 18px; z-index: 1; display: grid; text-align: left; color: var(--wit); }
.film-tekst b { font: 700 clamp(18px, 1.8vw, 22px)/1.2 var(--display); }
.film-tekst small { font-size: 14px; opacity: 0.85; }
.doelen { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.doelen li { background: var(--wit); border-radius: var(--r); padding: 20px 20px 18px; display: grid; gap: 6px; box-shadow: 0 0 0 1px var(--lijn); border-top: 5px solid var(--k); }
.doelen b { font-family: var(--display); font-size: 20px; }
.doelen span { color: var(--grijs); font-size: 15px; line-height: 1.5; }

/* Binnenkomen na de intro */
@keyframes binnen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
html.io-binnen .held-doel .held-tekst > * { animation: binnen .7s cubic-bezier(.2, .8, .2, 1) both; }
html.io-binnen .held-doel .held-tekst > :nth-child(2) { animation-delay: .08s; }
html.io-binnen .held-doel .held-tekst > :nth-child(3) { animation-delay: .16s; }
html.io-binnen .held-doel .held-tekst > :nth-child(4) { animation-delay: .24s; }
html.io-binnen .held-doel .film-kaart { animation: binnen .8s .2s cubic-bezier(.2, .8, .2, 1) both; }
html.io-binnen .held-doel .doelen li { animation: binnen .7s cubic-bezier(.2, .8, .2, 1) both; }
html.io-binnen .held-doel .doelen li:nth-child(2) { animation-delay: .34s; }
html.io-binnen .held-doel .doelen li:nth-child(3) { animation-delay: .42s; }
html.io-binnen .held-doel .doelen li:nth-child(1) { animation-delay: .26s; }
html.io-binnen .held-doel .doelen li:nth-child(4) { animation-delay: .5s; }

/* Hoe het werkt: zes grote blokken met de onderdelen */
.blok-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.blok { display: flex; flex-direction: column; gap: 16px; min-height: 280px; padding: clamp(20px, 2.2vw, 28px); border-radius: 24px; background: var(--k); color: var(--wit); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.blok:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(18, 20, 27, 0.16); }
.blok.k-abrikoos { color: var(--inkt); }
.blok-kop { display: flex; align-items: center; gap: 14px; }
.blok-kop i { flex: none; width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, 0.2); display: grid; place-items: center; }
.blok-kop .ic { width: 26px; height: 26px; }
.blok-kop b { font: 750 clamp(21px, 1.9vw, 26px)/1.15 var(--display); letter-spacing: -0.02em; hyphens: manual; overflow-wrap: normal; }
.blok-delen { display: flex; flex-wrap: wrap; gap: 6px; }
.blok-delen span { padding: 6px 11px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); font-size: 14px; font-weight: 500; line-height: 1.3; }
.blok.k-abrikoos .blok-delen span, .blok.k-abrikoos .blok-kop i { background: rgba(18, 20, 27, 0.08); }
.blok-meer { margin-top: auto; font-weight: 600; font-size: 15px; display: inline-flex; gap: 8px; }
.blok-meer::after { content: "→"; transition: transform .15s; }
.blok:hover .blok-meer::after { transform: translateX(4px); }

/* Uitleg-teaser op de homepage */
.uitleg-teaser { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(14px, 1.6vw, 20px); padding-right: clamp(20px, 4vw, 52px); background: var(--wit); border-radius: 28px; box-shadow: 0 0 0 2px var(--kobalt); text-decoration: none; }
.ut-beeld { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--lijn); max-width: 100%; }
.ut-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ut-beeld .film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ut-tekst { display: grid; gap: 12px; justify-items: start; }
.ut-tekst .ey { margin: 0; color: var(--kobalt); }
.ut-kop { font: 750 clamp(28px, 3vw, 40px)/1.08 var(--display); letter-spacing: -0.025em; }
.ut-lead { color: var(--grijs); font-size: 17px; }
.ut-tekst .knop { margin-top: 8px; background: var(--kobalt); }
.uitleg-teaser:hover .knop { background: #2549C4; }

/* Prijzen */
.prijs-boven { align-items: center; }
.prijs-held h1 { font-size: clamp(36px, 4.6vw, 58px); }
.prijs-held h1 em { display: block; }
.prijs-pluspunten { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.prijs-pluspunten li { display: flex; gap: 10px; font-weight: 500; }
.prijs-pluspunten .vk { width: 20px; height: 20px; flex: none; color: var(--mos); margin-top: 3px; }
.prijs-hoofd { background: var(--wit); border-radius: 28px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 0 0 2px var(--kobalt), 0 30px 60px rgba(47, 91, 234, 0.10); display: grid; gap: 14px; }
.ph-label { display: flex; align-items: center; gap: 10px; font: 700 18px var(--display); }
.ph-label .mk { width: 34px; height: 34px; margin: -4px; }
.ph-prijs { display: flex; align-items: baseline; gap: 10px; }
.ph-prijs b { font: 800 clamp(48px, 5vw, 64px)/1 var(--display); letter-spacing: -0.035em; color: var(--kobalt); font-variant-numeric: tabular-nums; }
.ph-prijs span { color: var(--grijs); font-size: 17px; }
.ph-per { font-size: 18px; margin-top: -6px; }
.ph-per b { font-family: var(--display); font-weight: 800; }
.ph-reken { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--papier); }
.ph-reken label { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; }
.ph-reken output { font: 800 18px var(--display); color: var(--kobalt); font-variant-numeric: tabular-nums; }
.ph-reken input[type=range] { width: 100%; accent-color: var(--kobalt); }
.ph-totaal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--lijn); padding-top: 10px; }
.ph-totaal span { color: var(--grijs); font-size: 15px; }
.ph-totaal b { font: 800 26px var(--display); font-variant-numeric: tabular-nums; }
.prijs-hoofd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prijs-hoofd li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.4; }
.prijs-hoofd li .vk { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--kobalt); }
.prijs-hoofd .knop { background: var(--kobalt); justify-self: start; }
.prijs-hoofd .knop:hover { background: #2549C4; }
.kaarten-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kaart { background: var(--wit); border-radius: 22px; padding: 28px 26px 24px; box-shadow: 0 0 0 1px var(--lijn); display: grid; gap: 14px; align-content: start; }
.kaart-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.kaart-kop h3 { font-size: 24px; }
.kaart .bedrag { font: 800 32px/1 var(--display); letter-spacing: -0.03em; color: var(--kd, var(--inkt)); text-align: right; font-variant-numeric: tabular-nums; }
.kaart .bedrag small { display: block; font: 500 13.5px var(--tekst); color: var(--grijs); letter-spacing: 0; margin-top: 6px; }
.kaart-sub { color: var(--grijs); font-size: 15px; width: 100%; }
.kaart > p { color: var(--grijs); font-size: 15.5px; }
.kaart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kaart li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.4; }
.kaart li .vk { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--kd, var(--k)); }
.kaart .staffel li { display: flex; }
.kaart .klein-tekst { margin-top: 0; }
.pakketten { margin-top: 0; }
.pakket .bedrag { color: var(--framboos); }
.pakket.extra { gap: 14px; }

/* Intro: alleen de film, dan het logo, dan de site */
.intro { display: none; }
html.io-intro, html.io-intro body { overflow: hidden; }
html.io-intro .intro, .intro.aan { display: block; position: fixed; inset: 0; z-index: 200; background: #11141B; color: var(--wit); outline: none; }
html.io-intro .kop .logo, html.io-vlucht .kop .logo { visibility: hidden; }
.intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #11141B; transition: opacity .5s; }
.intro-laden { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity .3s; }
.intro-laden .intro-mk { width: 72px; height: 72px; animation: puls-mk 1.4s ease-in-out infinite; }
@keyframes puls-mk { 50% { opacity: .45; transform: scale(.94); } }
.intro.speelt .intro-laden { opacity: 0; pointer-events: none; }
.intro-ot { position: absolute; left: 50%; bottom: max(7vh, 28px); transform: translateX(-50%); width: min(92vw, 860px); margin: 0; text-align: center; z-index: 2; pointer-events: none; }
.intro-ot span { display: inline; padding: 6px 14px; border-radius: 10px; background: rgba(17, 20, 27, 0.62); font: 600 clamp(17px, 2.1vw, 28px)/1.5 var(--tekst); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.intro-knoppen { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); display: flex; gap: 8px; z-index: 3; transition: opacity .3s; }
.intro-knop { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, 0.14); color: var(--wit); font: 600 15px var(--tekst); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.intro-knop:hover { background: rgba(255, 255, 255, 0.24); }
.intro-knop svg { width: 18px; height: 18px; fill: currentColor; }
.intro-knop[data-over] svg { fill: none; }
.intro-knop:focus-visible, .intro-start:focus-visible { outline: 3px solid var(--abrikoos); outline-offset: 2px; }
.intro-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 10px; border: 0; border-radius: 99px; background: var(--wit); color: var(--inkt); font: 700 18px var(--display); cursor: pointer; z-index: 3; }
.intro-start .film-play { width: 52px; height: 52px; background: var(--kobalt); color: var(--wit); box-shadow: none; }
.intro-start .film-play svg { width: 22px; height: 22px; }
.intro-balk { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.12); z-index: 3; transition: opacity .3s; }
.intro-balk i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--lagune), var(--kobalt), var(--violet), var(--framboos), var(--abrikoos), var(--mos)); }
.intro-logo { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 4; }
.il-tegels, .il-woord { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.il-woord { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; color: var(--wit); }
.il-woord b { font-weight: 800; }
.intro.slot .intro-knoppen, .intro.slot .intro-ot, .intro.slot .intro-balk, .intro.slot .intro-start, .intro.slot .intro-laden { opacity: 0; pointer-events: none; }

/* Uitlegpagina: speler met hoofdstukken, knop voor een online meeting eronder */
.uitleg-kop { margin-bottom: 0; }
.uv-band { padding-block: clamp(8px, 1.5vw, 16px) clamp(32px, 4vw, 56px); }
.uv { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 30px 70px rgba(18, 20, 27, 0.18); color: var(--wit); }
.uv video { display: block; width: 100%; height: 100%; }
.uv-vlak { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; padding: 0; cursor: pointer; }
.uv-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 10px; border: 0; border-radius: 99px; background: var(--wit); color: var(--inkt); cursor: pointer; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); text-align: left; }
.uv-start .film-play { width: 56px; height: 56px; background: var(--kobalt); color: var(--wit); box-shadow: none; }
.uv-start .film-play svg { width: 24px; height: 24px; }
.uv-start-t { display: grid; }
.uv-start-t b { font: 700 19px/1.2 var(--display); }
.uv-start-t small { color: var(--grijs); font-size: 14px; }
.uv-balk { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 12px; background: linear-gradient(0deg, rgba(17, 20, 27, 0.92) 40%, rgba(17, 20, 27, 0)); transition: opacity .25s; }
.uv.stil .uv-balk { opacity: 0; pointer-events: none; }
.uv.nieuw .uv-balk { display: none; }
.uv-lijn { position: relative; display: flex; gap: 3px; height: 20px; align-items: center; cursor: pointer; touch-action: none; }
.uv-deelbalk { position: relative; flex: 1 1 0; height: 6px; background: rgba(255, 255, 255, 0.24); overflow: hidden; border-radius: 2px; transition: height .12s; }
.uv-lijn:hover .uv-deelbalk { height: 9px; }
.uv-deelbalk i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--k); }
.uv-tip { position: absolute; bottom: 26px; transform: translateX(-50%); padding: 5px 10px; border-radius: 8px; background: var(--wit); color: var(--inkt); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; }
.uv-rij { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.uv-k { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: var(--wit); cursor: pointer; flex: none; }
.uv-k:hover { background: rgba(255, 255, 255, 0.22); }
.uv-k svg { width: 18px; height: 18px; fill: currentColor; }
.uv-tijd { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uv-nu { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #C3C8D3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uv-eind { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(17, 20, 27, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-align: center; }
.uv-eind-in { display: grid; gap: 6px; justify-items: center; }
.uv-ey { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #C3C8D3; }
.uv-eind-kop { font: 800 clamp(22px, 3vw, 38px)/1.15 var(--display); letter-spacing: -0.02em; margin-bottom: 14px; }
.uv-keuzes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.uv-keuzes .knop { min-height: 46px; }
.uv-keuzes .knop.licht { background: rgba(255, 255, 255, 0.14); color: var(--wit); box-shadow: none; }
.uv-keuzes .knop.kobalt { background: var(--kobalt); }
.uv :focus-visible { outline: 3px solid var(--abrikoos); outline-offset: 2px; }
.uv-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: 16px; padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px); background: var(--wit); border-radius: 22px; box-shadow: 0 0 0 2px var(--kobalt); }
.uv-cta b { display: block; font: 750 clamp(20px, 2.2vw, 28px)/1.2 var(--display); }
.uv-cta span { display: block; margin-top: 4px; color: var(--grijs); }
.uv-cta .knop { background: var(--kobalt); }
.uv-cta .knop:hover { background: #2549C4; }
.uv-contact { width: 100%; font-size: 14.5px; color: var(--grijs); }
.uv-delen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.uv-deel { background: var(--wit); border-radius: 20px; box-shadow: 0 0 0 1px var(--lijn); overflow: hidden; border-top: 5px solid var(--k); }
.uv-deel-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 16px 18px 10px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--inkt); }
.uv-deel-kop b { font: 700 17px/1.25 var(--display); }
.uv-deel-kop small, .uv-deel li small { color: var(--grijs); font-size: 13px; font-variant-numeric: tabular-nums; }
.uv-deel ol { list-style: none; margin: 0; padding: 0 8px 10px; }
.uv-deel li button { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px; background: none; text-align: left; font: 500 15px/1.35 var(--tekst); color: var(--inkt); cursor: pointer; }
.uv-deel li button:hover, .uv-deel-kop:hover b { color: var(--k); }
.uv-deel li button:hover { background: var(--papier); }
.uv-deel li button.nu { background: var(--papier); font-weight: 700; }
.uv-deel li button.nu span::before { content: "▶ "; font-size: 11px; color: var(--k); }

@media (max-width: 1080px) {
	.doelen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.held-doel .held-in, .kop-rij, .uitleg-teaser, .kaarten-2 { grid-template-columns: minmax(0, 1fr); }
	.uitleg-teaser { padding-right: clamp(14px, 1.6vw, 20px); }
	.ut-tekst { padding: 4px 8px 12px; }
	.blok { min-height: 0; }
}
@media (max-width: 760px) {
	.uv { aspect-ratio: auto; background: var(--wit); color: var(--inkt); box-shadow: 0 0 0 1px var(--lijn); border-radius: 18px; }
	.uv video { height: auto; aspect-ratio: 16 / 9; background: #000; }
	.uv-vlak, .uv-eind { bottom: auto; height: auto; aspect-ratio: 16 / 9; }
	.uv-start { top: calc((100vw - 40px) * 9 / 32); padding-right: 18px; }
	.uv-start .film-play { width: 46px; height: 46px; }
	.uv-balk, .uv.stil .uv-balk { position: static; padding: 8px 12px 12px; background: none; opacity: 1; pointer-events: auto; }
	.uv-deelbalk { background: var(--lijn); }
	.uv-k { background: var(--papier); color: var(--inkt); }
	.uv-nu { color: var(--inkt); order: 5; flex: 1 1 100%; white-space: normal; }
	.uv-rij { flex-wrap: wrap; }
	.uv-tip { background: var(--inkt); color: var(--wit); }
}
@media (max-width: 640px) {
	.doelen, .blok-grid, .uv-delen { grid-template-columns: minmax(0, 1fr); }
	.chaos { grid-template-columns: minmax(0, 1fr); }
	.film-play { width: 60px; height: 60px; }
	.intro-knop { min-height: 38px; padding: 0 12px; font-size: 14px; }
	.intro-knop[data-geluid] span { display: none; }
	.intro-ot { bottom: max(4vh, 20px); }
	.kaart-kop { display: grid; }
	.kaart .bedrag { text-align: left; }
}
/* 09-11-2026: "maakt er één van." zwart, alleen "Ikoon One" in kleur (gebruiker). */
.kop-rij h2 .regel { display: block; }
.kop-rij h2 .regel em { display: inline; }

/* Voorbeeld rustige moduleblokken (?ontwerp=rustig), gebruiker 09-11: "te druk, rommelig, de kleuren leiden af"; "geen kleurvlakken:
   alles z/w en de kleur als steunkleur". Wit, donkere tekst, kleur alleen in het icoon, een dun lijntje en de pijl. */
.blok-grid.rustig .blok { background: var(--wit); color: var(--inkt); box-shadow: 0 0 0 1px var(--lijn); border-top: 3px solid var(--k); border-radius: 20px; min-height: 0; gap: 12px; }
.blok-grid.rustig .blok:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--lijn), 0 16px 36px rgba(18, 20, 27, 0.08); }
.blok-grid.rustig .blok-kop i { background: var(--papier); color: var(--kd, var(--k)); width: 44px; height: 44px; border-radius: 12px; }
.blok-grid.rustig .blok-kop b { font-size: clamp(20px, 1.7vw, 23px); }
.blok-grid.rustig .blok-delen { display: block; color: var(--grijs); font-size: 15px; line-height: 1.7; }
.blok-grid.rustig .blok-delen span, .blok-grid.rustig.k-abrikoos .blok-delen span, .blok-grid.rustig .blok.k-abrikoos .blok-delen span { display: inline; padding: 0; background: none; border-radius: 0; font-size: inherit; font-weight: 400; }
.blok-grid.rustig .blok-delen span + span::before { content: " · "; color: #B8BDC8; }
.blok-grid.rustig .blok.k-abrikoos .blok-kop i { background: var(--papier); }
.blok-grid.rustig .blok-meer { color: var(--inkt); }
.blok-grid.rustig .blok-meer::after { color: var(--kd, var(--k)); }
/* 09-11-2026: geen titel op de video in de held (gebruiker), dus ook geen donkere verloop eronder. */
.film-kaart::after { content: none; }

/* 09-11-2026: hero over het hele scherm met de tekst op de foto, zoals op ikoonmedia.nl (gebruiker). Na de intro verschijnt deze
   hero; de foto is het slotbeeld uit de film. Sfeerfoto: bijsnijden mag. */
.held-vol { position: relative; min-height: calc(100svh - 76px); display: grid; align-items: end; overflow: hidden; color: var(--wit); background: #2A2E3A; }
.hv-beeld { position: absolute; inset: 0; }
.hv-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; transform-origin: 55% 35%; animation: hv-zoom 14s cubic-bezier(.2, .6, .2, 1) both; }
@keyframes hv-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.held-vol::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(17, 20, 27, 0.82) 0%, rgba(17, 20, 27, 0.55) 34%, rgba(17, 20, 27, 0.08) 66%, rgba(17, 20, 27, 0) 100%), linear-gradient(90deg, rgba(17, 20, 27, 0.45), rgba(17, 20, 27, 0) 60%); pointer-events: none; }
.hv-in { position: relative; z-index: 1; padding-block: clamp(40px, 6vh, 80px) clamp(44px, 8vh, 96px); }
.held-vol .ey { color: rgba(255, 255, 255, 0.82); }
.held-vol h1 { color: var(--wit); font-size: clamp(40px, 5.6vw, 76px); max-width: 15ch; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); }
.held-vol h1 em { font-style: normal; display: block; background: linear-gradient(90deg, #9DB8FF, #C9BDFE 40%, #F7AFCB 72%, #FBCB94); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.held-vol .lead { color: rgba(255, 255, 255, 0.9); max-width: 56ch; margin-top: 18px; }
.held-vol .knoppen { margin-top: 28px; }
.knop.wit { background: var(--wit); color: var(--inkt); }
.knop.wit:hover { background: #E8EBF1; }
.knop.glas { background: rgba(255, 255, 255, 0.16); color: var(--wit); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--tekst); }
.knop.glas:hover { background: rgba(255, 255, 255, 0.26); }
.knop.glas svg { width: 18px; height: 18px; fill: currentColor; }
.doelen-band .doelen { margin-top: 0; }
html.io-binnen .held-vol .hv-in > * { animation: binnen .8s cubic-bezier(.2, .8, .2, 1) both; }
html.io-binnen .held-vol .hv-in > :nth-child(1) { animation-delay: .25s; }
html.io-binnen .held-vol .hv-in > :nth-child(2) { animation-delay: .35s; }
html.io-binnen .held-vol .hv-in > :nth-child(3) { animation-delay: .5s; }
html.io-binnen .held-vol .hv-in > :nth-child(4) { animation-delay: .62s; }
@media (prefers-reduced-motion: reduce) { .hv-beeld img { animation: none; } }
@media (max-width: 640px) {
	.held-vol { min-height: calc(100svh - 68px); }
	.hv-beeld img { object-position: 50% 25%; }
	.held-vol::after { background: linear-gradient(0deg, rgba(17, 20, 27, 0.88) 0%, rgba(17, 20, 27, 0.62) 45%, rgba(17, 20, 27, 0.05) 78%); }
	.held-vol h1 { font-size: clamp(34px, 9.5vw, 46px); }
}
/* 09-11-2026: tekst breder en lager, zodat de gezichten van Mark en Linda vrij blijven. */
.held-vol h1 { max-width: 22ch; font-size: clamp(38px, 4.8vw, 70px); }
.held-vol .lead { max-width: 70ch; }
.hv-beeld img { object-position: 55% 18%; }
.hv-in { padding-block: clamp(24px, 4vh, 56px) clamp(32px, 6vh, 72px); }
@media (max-width: 900px) { .held-vol h1 { max-width: 15ch; } }
/* 09-11-2026: hero = stille, doorlopende video uit de Ikoon One-film (gebruiker: "hero Ikoon One video"); de foto blijft als eerste beeld. */
.hv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity 1.2s ease; z-index: 1; }
.hv-video.speelt { opacity: 1; }
.intro.wacht .intro-laden { opacity: 0; }
/* 09-11-2026: bovenaan elke hoofdstukkaart een knop "Bekijk video CRM" met video-icoon (gebruiker). */
.uv-deel-nr { margin: 0; padding: 14px 18px 0; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }
.uv-deel-kop { align-items: center; padding: 8px 14px 12px 18px; }
.uv-deel-play { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--k); color: var(--wit); transition: transform .15s; }
.uv-deel-play svg { width: 15px; height: 15px; fill: currentColor; margin-left: 2px; }
.uv-deel-kop b { flex: 1; min-width: 0; }
.uv-deel-kop:hover .uv-deel-play { transform: scale(1.08); }
.uv-deel-kop:hover b { color: var(--inkt); text-decoration: underline; text-underline-offset: 3px; }
.uv-deel ol { border-top: 1px solid var(--lijn); padding-top: 8px; }
/* 09-11-2026: knoppen van de intro rechtsonder; achter "Bekijk de film" het openingsbeeld uit de film (gebruiker). */
.intro-knoppen { top: auto; bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 16px)); right: max(22px, env(safe-area-inset-right, 0px)); }
.intro-achter { position: absolute; inset: 0; background-size: cover; background-position: center 35%; opacity: 0; transition: opacity .4s; z-index: 1; }
.intro-achter::after { content: ""; position: absolute; inset: 0; background: rgba(17, 20, 27, 0.35); }
.intro.wacht .intro-achter { opacity: 1; }
.intro-start { z-index: 3; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
/* 09-11-2026: "Zo gaat het nu" opnieuw (gebruiker: "ander design"): links de kop en de gevolgen, rechts een bureaublad met losse,
   grijze app-tegels met meldingsbolletjes. Recht, wit, rood alleen als steunkleur. */
.nu-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.nu-tekst .lead { margin-top: 16px; }
.gevolgen-lijst { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.gevolgen-lijst li { display: flex; gap: 14px; align-items: flex-start; }
.gevolgen-lijst li > span:last-child { color: var(--grijs); font-size: 16px; line-height: 1.5; }
.gevolgen-lijst b { display: block; color: var(--inkt); font-family: var(--display); font-size: 19px; }
.gv-x { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--framboos); color: var(--framboos); margin-top: 2px; }
.gv-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: clamp(16px, 2vw, 24px); border-radius: 28px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--lijn); }
.app { display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: 18px; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), 0 6px 16px rgba(18, 20, 27, 0.04); }
.app-ic { position: relative; width: 46px; height: 46px; border-radius: 13px; background: #EEF0F3; color: #6B7180; display: grid; place-items: center; margin-bottom: 8px; }
.app-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-badge { position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--framboos); color: var(--wit); font: 700 11.5px/20px var(--tekst); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--wit); }
.app b { font-family: var(--display); font-size: 16px; line-height: 1.25; }
.app-pijn { color: var(--grijs); font-size: 13.5px; line-height: 1.4; }
@media (max-width: 1080px) { .nu-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 10px; } .app { padding: 12px; } .app-pijn { font-size: 13px; } }
/* Zo gaat het nu als rommelig bureaublad (09-11-2026, gebruiker: "het lijkt of dit onze modules zijn"). Geen tegels, geen schuine vlakken. */
.nu-scherm{min-width:0}
.scherm{border:1px solid #E1E4EA;border-radius:14px;background:#fff;box-shadow:0 22px 50px rgba(18,20,27,.08);overflow:hidden}
.scherm-balk{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#F7F8FA;border-bottom:1px solid #ECEEF2;font-size:12px;color:#6B7080}
.scherm-balk i{width:10px;height:10px;border-radius:50%;background:#D5D8DF}
.scherm-balk span{margin-left:8px}
.scherm-in{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;padding:24px 22px;background:#F1F2F5}
.iconen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 10px;align-content:start}
.ico{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.ico-c{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fff;border:1px solid #DFE2E8}
.ico-c svg{width:24px;height:24px;fill:none;stroke:#5C6070;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-badge{position:absolute;top:-5px;right:-7px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#E5484D;color:#fff;font-size:11px;font-style:normal;font-weight:700;line-height:1}
.ico small{max-width:96px;font-size:12px;line-height:1.25;color:#3D4150}
.meldingen{display:flex;flex-direction:column;gap:10px}
.melding{padding:10px 12px;background:#fff;border:1px solid #E1E4EA;border-left:3px solid #E5484D;border-radius:8px;box-shadow:0 6px 16px rgba(18,20,27,.06);font-size:12.5px;line-height:1.35;color:#2A2D38}
.melding b{display:block;margin-bottom:2px;font-size:11px;font-weight:600;color:#6B7080}
.scherm-sub{margin:12px 2px 0;font-size:14px;color:#6B7080}
@media (max-width:900px){.scherm-in{grid-template-columns:minmax(0,1fr)}.meldingen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.meldingen{grid-template-columns:minmax(0,1fr)}.scherm-in{padding:18px 14px}}

/* Nieuwe hero met het dashboard (10-11-2026) */
.held-app{position:relative;overflow:hidden;background:linear-gradient(180deg,#F6F7FA 0%,#FFFFFF 100%);padding-block:clamp(36px,6vh,72px) clamp(44px,7vh,92px)}
.ha-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.ha-tekst{min-width:0}
.held-app h1{margin:10px 0 0;max-width:14ch;font-size:clamp(38px,4.4vw,64px);line-height:1.04}
.held-app h1 em{display:block;font-style:normal;background:linear-gradient(90deg,#2F5BEA,#7A5AF8 45%,#E0477A 78%,#F5A04A);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.held-app .lead{margin-top:18px;max-width:52ch}
.held-app .knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ha-film{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-weight:600;color:var(--inkt);text-decoration:none}
.ha-film small{font-weight:500;color:var(--grijs)}
.ha-play{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#2F5BEA;color:#fff;transition:background .15s}
.ha-play svg{width:16px;height:16px;margin-left:2px;fill:currentColor}
.ha-film:hover .ha-play{background:#244BD0}
.ha-beeld{position:relative;min-width:0}
.ha-venster{overflow:hidden;background:#fff;border:1px solid #E1E4EA;border-radius:14px;box-shadow:0 30px 70px rgba(18,20,27,.14),0 6px 18px rgba(18,20,27,.06)}
.ha-balk{display:flex;align-items:center;gap:6px;padding:9px 14px;background:#F7F8FA;border-bottom:1px solid #ECEEF2;font-size:12px;color:#6B7080}
.ha-balk i{width:10px;height:10px;border-radius:50%;background:#D5D8DF}
.ha-balk span{margin-left:8px}
.ha-venster img{display:block;width:100%;height:auto}
.ha-chip{position:absolute;display:flex;flex-direction:column;gap:2px;padding:12px 16px;background:#fff;border:1px solid #E1E4EA;border-radius:12px;box-shadow:0 14px 34px rgba(18,20,27,.12);font-size:13px;line-height:1.3;color:#5C6070}
.ha-chip b{font-size:14px;color:var(--inkt)}
.ha-chip.c1{left:-22px;bottom:16%;border-left:4px solid #0E9AA7}
.ha-chip.c2{right:-14px;top:-18px;border-left:4px solid #2F5BEA}
html.io-binnen .held-app .ha-tekst > *{animation:binnen .8s cubic-bezier(.2,.8,.2,1) both}
html.io-binnen .held-app .ha-tekst > :nth-child(2){animation-delay:.1s}
html.io-binnen .held-app .ha-tekst > :nth-child(3){animation-delay:.2s}
html.io-binnen .held-app .ha-tekst > :nth-child(4){animation-delay:.3s}
html.io-binnen .held-app .ha-beeld{animation:binnen 1s .25s cubic-bezier(.2,.8,.2,1) both}
@media (max-width:1000px){.ha-in{grid-template-columns:minmax(0,1fr)}.held-app h1{max-width:18ch}.ha-chip.c1{left:10px}.ha-chip.c2{right:10px}}
@media (max-width:600px){.ha-chip{display:none}.held-app .knoppen .knop{flex:1 1 100%}}

/* De film in een eigen blok (10-11-2026) */
.fb-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
.fb-tekst{min-width:0}
.fb-poster{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;overflow:hidden;background:#E8EAF0;border:0;border-radius:16px;box-shadow:0 24px 60px rgba(18,20,27,.12);cursor:pointer}
.fb-poster img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.fb-poster:hover img{transform:scale(1.03)}
.fb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;padding:14px 22px;background:#fff;border-radius:99px;box-shadow:0 10px 30px rgba(0,0,0,.2);color:var(--inkt);font:600 16px/1 var(--tekst);white-space:nowrap}
.fb-play svg{width:18px;height:18px;fill:#2F5BEA}
@media (max-width:900px){.fb-in{grid-template-columns:minmax(0,1fr)}}
/* Hero: grotere schermafbeelding, compactere kop (10-11-2026) */
.held-app h1{max-width:16ch;font-size:clamp(36px,3.7vw,58px)}
@media (min-width:1001px){.ha-in{grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr)}.ha-beeld{margin-right:calc(-1 * clamp(0px, 5vw, 110px))}}
@media (max-width:1000px){.ha-in{grid-template-columns:minmax(0,1fr)}.held-app h1{max-width:none}.held-app .lead{max-width:62ch}}
/* Smartphone (10-11-2026, gebruiker: "tekst in de breedte, niet 3 woorden onder elkaar, screenshot onleesbaar"):
   tekst over de volle breedte, en de app zoals hij op de telefoon is, in een wit toestel. */
@media (max-width:700px){
.held-app{padding-block:28px 44px}
.ha-in{gap:30px}
.held-app .ey{font-size:11.5px;letter-spacing:.07em}
.held-app h1{font-size:clamp(30px,8.6vw,40px);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.held-app .lead{margin-top:14px;font-size:17px;line-height:1.55}
.held-app .knoppen{margin-top:22px;gap:10px}
.held-app .knoppen .knop{flex:1 1 100%;justify-content:center;text-align:center}
.ha-film{margin-top:16px}
.ha-venster{width:min(300px,82vw);margin:0 auto;padding:7px;border-radius:36px;border:1px solid #E1E4EA;box-shadow:0 24px 50px rgba(18,20,27,.14),0 4px 12px rgba(18,20,27,.06)}
.ha-balk{display:none}
.ha-venster img{border-radius:29px}
}

/* Zes blokken met echte uitleg (10-11-2026) */
.blok-grid.rustig .blok{gap:14px}
.blok-uitleg{font-size:15.5px;line-height:1.55;color:#3D4150}
.blok-punten{display:flex;flex-direction:column;gap:9px;padding-top:12px;border-top:1px solid #EEF0F4}
.blok-punten span{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:#5C6070}
.blok-punten span::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;border-radius:3px;background:var(--k)}
.blok-punten b{color:var(--inkt);font-weight:650}

/* Uitleg: nieuwe hero en de delen als rustige blokken onder elkaar (10-11-2026) */
.uh-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.uitleg-held h1{max-width:16ch;font-size:clamp(38px,4.6vw,66px);line-height:1.04;margin-top:10px}
.uitleg-held .lead{margin-top:18px;max-width:56ch}
.uitleg-held .knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.uh-feiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.uh-feiten li{padding:18px 18px 16px;background:#fff;border:1px solid #E1E4EA;border-top:3px solid var(--k);border-radius:14px}
.uh-feiten b{display:block;font:750 clamp(22px,2vw,28px)/1.1 var(--display);letter-spacing:-.02em;color:var(--inkt)}
.uh-feiten span{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:#5C6070}
.uv-delen.uv-rijen{display:flex;flex-direction:column;gap:16px}
.uv-rij{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,48px);padding:clamp(20px,2.6vw,32px);background:#fff;border:1px solid #E1E4EA;border-left:4px solid var(--k);border-radius:16px}
.uv-rij-l{min-width:0}
.uv-rij .uv-deel-nr{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--k)}
.uv-rij h3{margin:4px 0 8px;font-size:clamp(22px,2vw,28px)}
.uv-rij-tekst{margin:0 0 16px;font-size:15px;line-height:1.55;color:#5C6070}
.uv-rij-knop{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 8px;background:#fff;border:1.5px solid #E1E4EA;border-radius:99px;font:600 15px/1 var(--tekst);color:var(--inkt);cursor:pointer}
.uv-rij-knop:hover{border-color:var(--k)}
.uv-rij-knop small{font-weight:500;color:#6B7080}
.uv-rij-knop .uv-deel-play{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--k);color:#fff}
.uv-rij-knop .uv-deel-play svg{width:14px;height:14px;margin-left:2px;fill:currentColor}
.uv-rij-h{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 24px;align-content:start;margin:0;padding:0;list-style:none}
.uv-rij-h li button{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:10px 4px;background:none;border:0;border-bottom:1px solid #EEF0F4;font:500 15px/1.3 var(--tekst);color:var(--inkt);text-align:left;cursor:pointer}
.uv-rij-h li button:hover span{color:var(--k)}
.uv-rij-h li button small{flex:none;color:#8A8F9C}
.uv-rij-h li button.nu span{color:var(--k);font-weight:650}
@media (max-width:900px){.uh-in,.uv-rij{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.uh-feiten,.uv-rij-h{grid-template-columns:minmax(0,1fr)}}
/* Film-poster: alleen een grijs start-icoon, geen tekst (10-11-2026) */
.fb-play{display:grid;place-items:center;width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);padding:0;gap:0;border-radius:50%;background:rgba(92,96,112,.82);box-shadow:0 10px 30px rgba(0,0,0,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .2s,background .2s}
.fb-play svg{width:42%;height:42%;margin-left:6%;fill:#fff}
.fb-poster:hover .fb-play{transform:translate(-50%,-50%) scale(1.06);background:rgba(92,96,112,.92)}
/* Zes blokken: twee naast elkaar (10-11-2026, gebruiker) */
.blok-grid.rustig{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.blok-grid.rustig .blok{padding:clamp(22px,2.4vw,32px)}
@media (max-width:760px){.blok-grid.rustig{grid-template-columns:minmax(0,1fr)}}
/* Assist zonder oranje: kobalt, net als de knoppen (10-11-2026, gebruiker) */
.stappen .nr{background:var(--kobalt-l);color:var(--kobalt)}
.tel{border-top:0}
.tel-kop span{color:var(--kobalt);border-color:rgba(47,91,234,.4)}
.bel.jij{background:var(--kobalt);color:var(--wit)}
.tel-mic{background:var(--kobalt);animation-name:puls-k}
.tel-mic svg{color:var(--wit)}
@keyframes puls-k{50%{box-shadow:0 0 0 14px rgba(47,91,234,.12)}}
.vb{border-top-color:var(--kobalt)}
/* Veelgestelde vragen: compact, twee kolommen, lijnen in plaats van kaarten */
.vragen-band{padding-block:clamp(40px,4.5vw,64px)}
.vragen-band .vragen{margin-top:24px;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;row-gap:0;align-items:start;border-top:1px solid var(--lijn)}
.vragen-band .vragen details{background:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--lijn)}
.vragen-band .vragen summary{font-size:16.5px;padding:15px 36px 15px 0}
.vragen-band .vragen summary::after{right:4px;font-size:22px}
.vragen-band .vragen summary:hover{color:var(--kobalt)}
.vragen-band .vragen details p{padding:0 36px 16px 0;font-size:15.5px}
@media (max-width:760px){.vragen-band .vragen{grid-template-columns:minmax(0,1fr)}}
/* Uitlegspeler: zwart startscherm met het logo en de knop Start video (gebruiker 10-11) */
.uv-scherm{position:absolute;inset:0;z-index:2;display:none;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,2.6vw,28px);padding:20px;background:#0B0C10;pointer-events:none;text-align:center}
.uv.nieuw .uv-scherm{display:flex}
.uv-merk{display:inline-flex;align-items:center;gap:clamp(10px,1.4vw,18px);font-family:var(--display);font-size:clamp(34px,5.2vw,68px);letter-spacing:-0.035em;line-height:1;color:var(--wit)}
.uv-merk .mk{width:1.55em;height:1.55em;margin:-.14em}
.uv-merk .l1{font-weight:450}
.uv-merk b{font-weight:800}
.uv .uv-scherm .uv-start{position:static;transform:none;pointer-events:auto;display:inline-flex;align-items:center;gap:12px;padding:8px 26px 8px 8px;border-radius:99px;background:var(--wit);color:var(--inkt);font:700 clamp(17px,1.6vw,20px)/1 var(--display);box-shadow:none;transition:transform .15s,background .15s}
.uv .uv-scherm .uv-start:hover{transform:scale(1.04)}
.uv .uv-scherm .uv-start .film-play{width:clamp(42px,4.2vw,52px);height:clamp(42px,4.2vw,52px);background:var(--kobalt);color:var(--wit)}
.uv-scherm-t{font-size:14px;font-weight:500;color:#9BA1AE}
@media (max-width:760px){.uv-scherm{bottom:auto;height:auto;aspect-ratio:16/9;gap:12px;border-radius:18px 18px 0 0}.uv-merk{font-size:clamp(26px,8vw,40px)}.uv .uv-scherm .uv-start{font-size:16px;padding-right:20px}.uv-scherm-t{font-size:12.5px}}
@media (max-width:380px){.uv-scherm-t{display:none}}
/* Zes modules om en om: tekst en een scherm uit het CRM (gebruiker 10-11) */
.mod-rijen{display:grid;gap:clamp(64px,8vw,120px);margin-top:clamp(44px,5vw,76px)}
.mod-rij{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,84px);align-items:center}
.mod-rij.om{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.mod-rij.om .mr-tekst{order:2}
.mr-tekst{min-width:0}
.mr-kop{display:flex;align-items:center;gap:14px;margin:0;font:750 clamp(26px,2.4vw,34px)/1.12 var(--display);letter-spacing:-.02em}
.mr-kop i{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--kl);color:var(--kd,var(--k))}
.mr-kop .ic{width:26px;height:26px}
.mr-uitleg{margin-top:18px;font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:#3D4150;max-width:46ch}
.mr-punten{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid #E8EAEF;display:grid;gap:11px}
.mr-punten li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.55;color:#5C6070}
.mr-punten li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:10px;border-radius:3px;background:var(--k)}
.mr-punten b{color:var(--inkt);font-weight:650}
.mr-tekst .pijl{color:var(--inkt)}
.mr-tekst .pijl::after{color:var(--kd,var(--k))}
.mr-beeld{position:relative;isolation:isolate;margin:0;min-width:0;padding:clamp(18px,2.6vw,36px)}
.mr-beeld::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:28px;background:var(--kl)}
.mr-venster{display:block;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(18,20,27,.07),0 24px 54px rgba(18,20,27,.14)}
.mr-balk{display:flex;gap:6px;padding:9px 13px;background:#F6F7F9;border-bottom:1px solid #ECEEF2}
.mr-balk i{width:9px;height:9px;border-radius:50%;background:#D5D8DF}
.mr-venster img{display:block;width:100%;height:auto}
.mr-beeld.tel{display:flex;justify-content:center;width:100%}
.mr-toestel{display:block;width:270px;max-width:62%;padding:9px;border-radius:42px;background:#12141B;box-shadow:0 26px 60px rgba(18,20,27,.25)}
.mr-toestel img{display:block;width:100%;height:auto;border-radius:33px}
@media (max-width:900px){
	.mod-rij,.mod-rij.om{grid-template-columns:minmax(0,1fr);gap:28px}
	.mod-rij.om .mr-tekst{order:0}
	.mr-beeld{padding:16px}
	.mr-beeld::before{border-radius:22px}
	.mr-toestel{width:240px;max-width:64%}
}

/* Hero met sfeerbeeld uit de film, volle breedte, tekst op het beeld (gebruiker 10-11) */
.held-sfeer{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(540px,calc(100vh - 78px),820px);background:#1B1612;color:#fff}
.hs-beeld,.hs-beeld img{position:absolute;inset:0;width:100%;height:100%}
.hs-beeld img{display:block;object-fit:cover;object-position:60% 28%}
.held-sfeer::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(18,14,10,.84) 0%,rgba(18,14,10,.66) 30%,rgba(18,14,10,.22) 56%,rgba(18,14,10,0) 70%),linear-gradient(0deg,rgba(18,14,10,.32) 0%,rgba(18,14,10,0) 28%)}
.hs-in{position:relative;z-index:2;padding-block:clamp(56px,9vh,110px)}
.hs-tekst{max-width:660px}
.held-sfeer .ey{color:rgba(255,255,255,.76)}
.held-sfeer h1{margin:0;max-width:17ch;color:#fff;font-size:clamp(38px,4.3vw,64px);line-height:1.05;text-wrap:balance}
.held-sfeer h1 em{display:block;font-style:normal;background:linear-gradient(90deg,#B3C4FF,#D2C3FF 50%,#FFB8CE);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.held-sfeer .lead{margin-top:20px;max-width:38ch;color:rgba(255,255,255,.86)}
.held-sfeer .ha-film{margin-top:30px;color:#fff}
.held-sfeer .ha-film small{color:rgba(255,255,255,.68)}
.held-sfeer .ha-play{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.held-sfeer .ha-film:hover .ha-play{background:rgba(255,255,255,.28)}
@media (max-width:700px){
	.held-sfeer{align-items:flex-end;min-height:max(560px,calc(100svh - 72px))}
	.hs-beeld img{object-position:50% 12%}
	.held-sfeer::before{background:linear-gradient(0deg,rgba(18,14,10,.92) 0%,rgba(18,14,10,.78) 36%,rgba(18,14,10,.2) 62%,rgba(18,14,10,0) 76%)}
	.hs-in{padding-block:40px 34px}
	.held-sfeer .ey{font-size:11.5px;letter-spacing:.07em;margin-bottom:12px}
	.held-sfeer h1{font-size:clamp(32px,9vw,42px);line-height:1.07;max-width:none}
	.held-sfeer .lead{margin-top:14px;font-size:17px;line-height:1.5}
	.held-sfeer .ha-film{margin-top:22px}
}

/* Visualiseren op de homepage (11-11-2026): alleen de AI-foto, groot, zonder inzet en zonder label. */
.mr-foto{position:relative;display:block;overflow:hidden;border-radius:16px;background:#E9E4DD;box-shadow:0 0 0 1px rgba(18,20,27,.06),0 24px 54px rgba(18,20,27,.16)}
.mr-foto img{display:block;width:100%;height:auto}

/* Uitleg op de homepage (10-11-2026): zwart startbeeld met logo en "Start video", zoals op /uitleg/. */
.ut-zwart{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,1.8vw,22px);padding:16px;background:#0B0C10;text-align:center}
.ut-zwart .uv-merk{font-size:clamp(28px,3.4vw,50px)}
.ut-start{display:inline-flex;align-items:center;gap:12px;padding:7px 22px 7px 7px;border-radius:99px;background:var(--wit);color:var(--inkt);font:700 clamp(15px,1.3vw,18px)/1 var(--display);transition:transform .15s}
.ut-zwart .ut-start .film-play{position:static;transform:none;width:clamp(38px,3.4vw,46px);height:clamp(38px,3.4vw,46px);background:var(--kobalt);color:var(--wit);box-shadow:none}
.ut-zwart .ut-start .film-play svg{width:20px;height:20px;margin-left:3px}
.uitleg-teaser:hover .ut-start{transform:scale(1.04)}
@media (max-width:760px){.ut-zwart .uv-merk{font-size:clamp(26px,8vw,40px)}.ut-zwart .uv-scherm-t{font-size:12.5px}}

/* Koppelingen-animatie (12-11-2026, io_koppel_animatie): leveranciers ↔ Ikoon One ↔ boekhoudpakket. Rustig: de lijnen tekenen zich één keer,
   daarna glijdt er langzaam een lichtje over in de richting van de data. Geen gloed, geen gestuiter (gebruiker: "geen kermis"). */
.kp-lead { max-width: 68ch; }
.kp-anim { margin-top: clamp(28px, 4vw, 52px); }
.kp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.kp-svg-m { display: none; max-width: 420px; margin: 0 auto; }
@media (max-width: 760px) { .kp-svg-d { display: none; } .kp-svg-m { display: block; } }
.kp-svg text { font-family: var(--tekst); }
.kp-svg .kp-t { font-family: var(--display); font-size: 22px; font-weight: 750; fill: var(--inkt); }
.kp-vlak { fill: var(--wit); stroke: var(--lijn); stroke-width: 1.5; }
.kp-hub .kp-vlak { fill: var(--papier); }
.kp-k { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; }
.kp-r { font-size: 15px; fill: var(--grijs); }
.kp-l { font-size: 13px; font-weight: 600; fill: var(--grijs); }
.kp-mid { text-anchor: middle; }
.kp-eind { text-anchor: end; }
.kp-pil { fill: var(--kobalt-l); }
.kp-pt { font-size: 14.5px; font-weight: 600; fill: var(--inkt); }
.kp-lagune-t, .kp-lagune-f { fill: var(--lagune); }
.kp-kobalt-t { fill: var(--kobalt); }
.kp-basis { fill: none; stroke: #CDD2DB; stroke-width: 2; stroke-linecap: round; }
.kp-puls { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 190; stroke-dashoffset: 10; opacity: 0; }
.kp-puls.kp-lagune { stroke: var(--lagune); }
.kp-puls.kp-kobalt { stroke: var(--kobalt); }
.kp-pijl { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kp-pijl.kp-lagune { stroke: var(--lagune); }
.kp-pijl.kp-kobalt { stroke: var(--kobalt); }
.kp-anim .kp-kaart { opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease calc(var(--n) * 0.15s), transform 0.6s ease calc(var(--n) * 0.15s); }
.kp-anim .kp-basis { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s ease calc(0.4s + var(--n) * 0.12s); }
.kp-anim .kp-pijl { opacity: 0; transition: opacity 0.4s ease 1.5s; }
.kp-anim.aan .kp-kaart { opacity: 1; transform: none; }
.kp-anim.aan .kp-basis { stroke-dashoffset: 0; }
.kp-anim.aan .kp-pijl { opacity: 1; }
.kp-anim.aan .kp-puls { animation: kp-stroom 3.6s linear calc(1.6s + var(--n) * 0.9s) infinite; }
@keyframes kp-stroom { 0% { stroke-dashoffset: 10; opacity: 0; } 8% { opacity: 0.95; } 85% { opacity: 0.95; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.kp-anim .kp-kaart, .kp-anim .kp-basis, .kp-anim .kp-pijl { transition: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
	.kp-anim .kp-puls { display: none; }
}