/* Voorstel 4: Op maat gebouwd. Donkere, zelfverzekerde kop met één groot productscherm en zwevende schermfragmenten (Ordio);
   daaronder grote schermen per onderwerp in een rustig, licht ritme (Employes). Huisstijl: steen, crème, terracotta, olijf. */
:root{--donker:#2b2924;--donker-2:#36332e;--donker-3:#423e38;--op-donker:#faf7f1;--op-donker-zacht:#cfc5b7;--lijn-donker:#4a453e}
body{background:var(--papier)}
h1,h2,h3{letter-spacing:-.025em}
.wrap-breed{width:min(1280px,100% - 40px);margin-inline:auto}
@media (max-width:600px){.wrap-breed{width:min(1280px,100% - 24px)}}

/* Kop: donker, blijft staan */
.site-header{background:color-mix(in srgb,var(--donker) 90%,transparent);border-bottom:1px solid var(--lijn-donker)}
.site-header .gg-wordmark{color:var(--op-donker)}
.site-header .nav a{color:var(--op-donker-zacht)}
.site-header .nav a:hover,.site-header .nav a[aria-current="page"]{color:var(--op-donker);background:var(--donker-3)}
.site-header .header-cta,.btn--terra{background:var(--terra-zacht);border-color:var(--terra-zacht);color:var(--donker)}
.site-header .header-cta:hover,.btn--terra:hover{background:var(--op-donker);border-color:var(--op-donker);color:var(--donker)}
.site-header .menu-btn{color:var(--op-donker);border-color:var(--lijn-donker)}
.mobile-menu{background:var(--donker);border-bottom-color:var(--lijn-donker)}
.mobile-menu a{color:var(--op-donker);border-bottom-color:var(--lijn-donker)}
.concept-strip{background:var(--donker-2);color:var(--op-donker-zacht)}
.btn--ghost{background:transparent;border-color:var(--lijn-donker);color:var(--op-donker)}
.btn--ghost:hover{background:var(--donker-3);border-color:var(--donker-3);color:var(--op-donker)}

/* Hero */
.hero{background:radial-gradient(1200px 600px at 50% -10%,var(--donker-3),var(--donker) 60%);color:var(--op-donker);padding:84px 0 0;overflow:hidden;position:relative}
.hero .pil{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid var(--lijn-donker);font-size:13.5px;color:var(--op-donker-zacht);margin-bottom:28px}
.hero .pil i{width:7px;height:7px;border-radius:50%;background:var(--terra-zacht);animation:p4puls 2s infinite}
@keyframes p4puls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.6}}
.hero h1{font-size:clamp(42px,6.6vw,92px);font-weight:800;line-height:1.02;margin:0 auto 24px;max-width:12em;text-align:center}
.hero h1 em{font-style:normal;color:var(--terra-zacht)}
.hero .lead{font-size:clamp(17px,1.5vw,21px);color:var(--op-donker-zacht);max-width:40em;margin:0 auto 32px;text-align:center}
.hero .acties{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:64px}
.hero .midden{text-align:center}
.hero .kop-tekst>*{opacity:0;transform:translateY(16px);animation:p4in .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero .kop-tekst>:nth-child(2){animation-delay:.1s}.hero .kop-tekst>:nth-child(3){animation-delay:.22s}.hero .kop-tekst>:nth-child(4){animation-delay:.34s}
@keyframes p4in{to{opacity:1;transform:none}}

/* Het podium: scherm met zwevende fragmenten */
.podium{position:relative;max-width:1180px;margin:0 auto;padding:0 20px}
.podium .app{opacity:0;transform:translateY(40px);animation:p4in .9s .35s cubic-bezier(.2,.7,.2,1) forwards;box-shadow:0 40px 90px -30px rgba(0,0,0,.55)}
.frag{position:absolute;z-index:3;background:var(--wit);color:var(--steen);border-radius:14px;padding:12px 14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.45);font-size:13.5px;max-width:260px;opacity:0;animation:p4frag .8s cubic-bezier(.2,.7,.2,1) forwards}
.frag b{display:block;color:var(--steen);font-weight:600}
.frag small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.frag .chip{margin-top:8px}
.frag.f1{left:-72px;top:150px;animation-delay:1.2s}
.frag.f2{right:-64px;top:110px;animation-delay:2s}
.frag.f3{left:-56px;bottom:110px;animation-delay:2.8s}
.frag.f4{right:-52px;bottom:60px;animation-delay:3.6s}
@keyframes p4frag{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.frag.zweef{animation:p4frag .8s cubic-bezier(.2,.7,.2,1) forwards,p4zweef 6s 2s ease-in-out infinite}
@keyframes p4zweef{0%,100%{translate:0 0}50%{translate:0 -8px}}
.frag.bubbel{background:var(--olijf);border-radius:16px 16px 16px 4px}
.frag.donker{background:var(--donker-3);color:var(--op-donker)}
.frag.donker b{color:var(--op-donker)}.frag.donker small{color:var(--op-donker-zacht)}
.frag .ws{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--groen-tekst);font-size:12px;margin-bottom:4px}
.frag .ws i{width:16px;height:16px;border-radius:50%;background:#5aa06a;display:inline-block}
@media (max-width:1240px){.frag.f1{left:8px}.frag.f2{right:8px}.frag.f3{left:8px}.frag.f4{right:8px}}
@media (max-width:860px){.frag{position:static;max-width:none;margin:10px 0 0;animation-delay:0s!important}.podium .fragmenten{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.frag.zweef{animation:p4frag .8s forwards}}
@media (max-width:520px){.podium .fragmenten{grid-template-columns:1fr}}
.hero-voet{text-align:center;color:var(--op-donker-zacht);font-size:13px;padding:22px 20px 26px}

/* De werkomgeving (het grote scherm) */
.app{background:var(--papier);border-radius:18px;overflow:hidden;color:var(--steen);font-size:13.5px;border:1px solid rgba(0,0,0,.06)}
.app-top{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--wit);border-bottom:1px solid var(--lijn)}
.app-top i{width:10px;height:10px;border-radius:50%;background:var(--lijn)}
.app-top .url{margin-left:10px;padding:5px 14px;border-radius:999px;background:var(--papier);border:1px solid var(--lijn);color:var(--muted);font-size:12px}
.app-top .rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--terra-licht);color:var(--terra-d);display:inline-grid;place-items:center;font-weight:700;font-size:11px;flex:none}
.avatar.g{background:var(--olijf);color:var(--groen-tekst)}
.avatar.s{background:var(--steen);color:var(--papier)}
.app-body{display:grid;grid-template-columns:208px minmax(0,1fr);min-height:520px}
.app-zij{background:var(--wit);border-right:1px solid var(--lijn);padding:18px 12px;display:flex;flex-direction:column;gap:2px}
.app-zij .merk{font-weight:800;letter-spacing:.02em;padding:4px 10px 14px;color:var(--steen);display:flex;align-items:center;gap:8px}
.app-zij .merk i{width:18px;height:18px;border-radius:4px;background:var(--terra-zacht);display:inline-block}
.app-zij .item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--steen-l);font-weight:500}
.app-zij .item svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-zij .item.actief{background:var(--olijf);color:var(--groen-tekst);font-weight:600}
.app-zij .item .tel{margin-left:auto;font-size:11px;background:var(--terra-licht);color:var(--terra-d);padding:1px 7px;border-radius:999px;font-weight:600}
.app-zij .onder{margin-top:auto;padding:10px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.app-main{padding:22px 24px;min-width:0}
.app-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.app-kop h4{font-size:20px;font-weight:700;margin:0;letter-spacing:-.01em}
.app-kop p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.app-kop .acties{display:flex;gap:8px;align-items:center}
.knopje{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:9px;background:var(--steen);color:var(--papier);font-weight:600;font-size:12.5px;white-space:nowrap}
.knopje.licht{background:var(--wit);border:1px solid var(--lijn);color:var(--steen)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:var(--creme);font-size:11.5px;font-weight:600;color:var(--steen-l);white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.chip.ok{background:var(--olijf);color:var(--groen-tekst)}
.chip.let{background:var(--terra-licht);color:var(--terra-d)}
.chip.nieuw{background:var(--steen);color:var(--papier)}
.chip.stil::before{display:none}
.tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.tegel{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:12px 14px}
.tegel small{display:block;color:var(--muted);font-size:11.5px;margin-bottom:4px}
.tegel b{font-size:26px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1.1}
.tegel span{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.twee{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px}
.paneel-kader{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:14px;min-width:0}
.paneel-kader h5{margin:0 0 10px;font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px}
.paneel-kader h5 a{font-weight:600;color:var(--terra-d);text-decoration:none;font-size:12px}
.lijst{display:flex;flex-direction:column;gap:6px}
.rij{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;background:var(--papier);border:1px solid var(--lijn)}
.rij .t{min-width:0;flex:1}
.rij b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rij small{display:block;color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rij.nieuw-rij{border-color:var(--terra-zacht);background:var(--terra-licht)}
.balk{height:8px;border-radius:4px;background:var(--creme);overflow:hidden;margin:6px 0 10px}
.balk i{display:block;height:100%;background:var(--olijf-d);border-radius:4px;transform-origin:left;transform:scaleX(var(--w,.6))}
.balk.t i{background:var(--terra-zacht)}
.lab{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.detail .regel{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--lijn);font-size:12.5px}
.detail .regel:first-of-type{border-top:0}
.detail .regel span:first-child{color:var(--muted)}
.week{display:grid;grid-template-columns:120px repeat(5,1fr);gap:5px;font-size:11.5px}
.week .kop{font-family:var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 0;font-size:11px}
.week .naam{display:flex;align-items:center;gap:8px;font-weight:600;padding:6px 4px;min-width:0}
.week .naam span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.week .vak{min-height:52px;border-radius:8px;background:var(--creme);position:relative}
.week .blok{position:absolute;inset:4px;border-radius:6px;background:var(--olijf-d);color:var(--groen-tekst);padding:5px 7px;font-weight:600;font-size:11px;line-height:1.25}
.week .blok small{display:block;font-weight:400;color:inherit;opacity:.8;font-size:10.5px}
.week .blok.voorstel{background:var(--terra-licht);color:var(--terra-d)}
.week .blok.ziek{background:var(--terra-licht);color:var(--terra-d)}
.week .blok.vrij{background:transparent;border:1.5px dashed var(--lijn);color:var(--muted);font-weight:500}
.keten{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.keten span{padding:10px 8px;border-radius:9px;border:1.5px solid var(--terra-zacht);background:var(--terra-licht);text-align:center;font-weight:600;font-size:12px;color:var(--terra-d)}
.keten span small{display:block;font-weight:400;color:var(--muted);font-size:10.5px;margin-top:2px}
.koppel{display:grid;grid-template-columns:1fr 54px 1fr 54px 1fr;align-items:center;gap:6px;margin:6px 0 14px}
.koppel .prog{padding:12px 8px;border:1.5px solid var(--lijn);border-radius:10px;text-align:center;font-weight:600;background:var(--wit);font-size:12.5px}
.koppel .prog small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.koppel .lijn{position:relative;height:2px;background:var(--lijn)}
.koppel .lijn i{position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;background:var(--terra-zacht)}
.tel{width:230px;margin:0 auto;border:2px solid var(--steen);border-radius:24px;padding:14px 12px;background:var(--wit)}
.tel .kop{font-weight:700;margin-bottom:8px;font-size:13.5px}
.tel .regel{display:flex;justify-content:space-between;gap:6px;padding:7px 0;border-top:1px solid var(--lijn);font-size:12px}
.tel .regel:first-of-type{border-top:0}
.chat{display:flex;flex-direction:column;gap:8px;max-width:420px}
.chat .b{padding:9px 12px;border-radius:14px 14px 14px 4px;background:var(--olijf);font-size:13px;max-width:85%}
.chat .b.r{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--terra-licht)}
.chat .b small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.formstap{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.formstap span{padding:7px 6px;border-radius:8px;font-size:11.5px;font-weight:600;text-align:center;background:var(--creme);color:var(--muted)}
.formstap span.k{background:var(--olijf);color:var(--groen-tekst)}
.formstap span.a{background:var(--steen);color:var(--papier)}
.veld{padding:9px 11px;border:1px solid var(--lijn);border-radius:8px;background:var(--wit);font-size:12.5px;color:var(--steen-l);margin-bottom:6px}
.veld b{color:var(--muted);font-weight:500;font-size:11px;display:block}
@media (max-width:760px){.app-body{grid-template-columns:1fr}.app-zij{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--lijn);padding:10px}.app-zij .merk,.app-zij .onder{display:none}.app-zij .item{white-space:nowrap}.app-main{padding:16px}.tegels{grid-template-columns:1fr 1fr}.twee{grid-template-columns:1fr}.week{grid-template-columns:70px repeat(5,1fr)}.week .vak{min-height:44px}.week .blok{padding:4px 5px;font-size:10px}.keten,.formstap{grid-template-columns:1fr 1fr}.koppel{grid-template-columns:1fr}.koppel .lijn{width:2px;height:22px;margin:0 auto}.koppel .lijn i{left:-3.5px}.app-top .url{display:none}}

/* Beweging in het scherm (alleen als het paneel speelt) */
.speelt .lijst .rij{animation:p4rij .5s both}
.speelt .lijst .rij:nth-child(2){animation-delay:.15s}.speelt .lijst .rij:nth-child(3){animation-delay:.3s}.speelt .lijst .rij:nth-child(4){animation-delay:.45s}.speelt .lijst .rij:nth-child(5){animation-delay:.6s}
@keyframes p4rij{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.speelt .balk i{animation:p4balk 1.2s .3s both}
@keyframes p4balk{from{transform:scaleX(0)}to{transform:scaleX(var(--w,.6))}}
.speelt .tegel b{animation:p4in .5s both}
.speelt .week .blok.voorstel{animation:p4voorstel 7s both}
@keyframes p4voorstel{0%,35%{opacity:0;transform:scale(.92)}45%,100%{opacity:1;transform:none}}
.speelt .week .blok.weg{animation:p4weg 7s both}
@keyframes p4weg{0%,28%{opacity:1}38%,100%{opacity:0}}
.speelt .keten span{animation:p4stap 7s both}
.speelt .keten span:nth-child(2){animation-delay:1.3s}.speelt .keten span:nth-child(3){animation-delay:2.6s}.speelt .keten span:nth-child(4){animation-delay:3.9s}
@keyframes p4stap{0%,12%{border-color:var(--lijn);background:transparent;color:var(--muted)}22%,100%{border-color:var(--terra-zacht);background:var(--terra-licht);color:var(--terra-d)}}
.speelt .koppel .lijn i{animation:p4bol 2s linear infinite}
.speelt .koppel .lijn:nth-of-type(2) i{animation-delay:1s}
@keyframes p4bol{from{left:-4px}to{left:calc(100% - 5px)}}
.speelt .chat .b{animation:p4rij .5s both}
.speelt .chat .b:nth-child(2){animation-delay:.9s}.speelt .chat .b:nth-child(3){animation-delay:1.8s}.speelt .chat .b:nth-child(4){animation-delay:2.7s}.speelt .chat .b:nth-child(5){animation-delay:3.6s}
.speelt .tel .regel{animation:p4rij .5s both}
.speelt .tel .regel:nth-child(3){animation-delay:.3s}.speelt .tel .regel:nth-child(4){animation-delay:.6s}.speelt .tel .regel:nth-child(5){animation-delay:.9s}
.speelt .melding{animation:p4melding 7s both}
@keyframes p4melding{0%,45%{opacity:0;transform:translateY(6px)}55%,100%{opacity:1;transform:none}}
.speelt .detail{animation:p4in .6s .5s both}

/* Lopende band met wat we bouwen */
.band{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);background:var(--wit);overflow:hidden;padding:18px 0;white-space:nowrap}
.band .spoor{display:inline-flex;gap:0;animation:p4band 40s linear infinite}
.band span{display:inline-flex;align-items:center;gap:18px;padding:0 18px;font-family:var(--label);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--steen-l)}
.band span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--terra-zacht)}
@keyframes p4band{to{transform:translateX(-50%)}}
html[data-beweging="uit"] .band{white-space:normal;text-align:center}
html[data-beweging="uit"] .band .spoor{display:inline;animation:none}
html[data-beweging="uit"] .band .spoor+.spoor{display:none}

/* Secties */
.sectie{padding:96px 0}
.sectie-kop{max-width:46em;margin:0 auto 48px;text-align:center}
.sectie-kop h2{font-size:clamp(32px,4.2vw,56px);font-weight:700;line-height:1.05}
.sectie-kop h2 em{font-style:normal;color:var(--terra)}
.sectie-kop p{font-size:19px;color:var(--steen-l);max-width:36em;margin:14px auto 0}
.sectie--donker{background:var(--donker);color:var(--op-donker)}
.sectie--donker .sectie-kop h2 em{color:var(--terra-zacht)}
.sectie--donker .sectie-kop p{color:var(--op-donker-zacht)}
.sectie--donker .eyebrow{color:var(--terra-zacht)}
.sectie--creme{background:var(--creme)}

/* Tabbladen met groot scherm */
.tabs{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;list-style:none;margin:0 0 28px;padding:0}
.tab{border:1.5px solid var(--lijn);background:var(--wit);border-radius:999px;padding:11px 20px;font-weight:600;font-size:15px;color:var(--steen-l);cursor:pointer;position:relative;overflow:hidden}
.tab:hover{border-color:var(--steen)}
.tab[aria-selected="true"]{background:var(--steen);border-color:var(--steen);color:var(--papier)}
.tab .vg{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--terra-zacht);transform-origin:left;transform:scaleX(0)}
.loopt .tab[aria-selected="true"] .vg{animation:p4vg 8s linear forwards}
@keyframes p4vg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tab-panelen{display:grid}
.tab-paneel{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s;transform:translateY(10px)}
.tab-paneel.actief{opacity:1;visibility:visible;transform:none;transition:opacity .45s,visibility 0s,transform .45s}
.tab-tekst{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin:0 0 20px}
.tab-tekst h3{font-size:clamp(24px,2.6vw,34px);margin:0 0 8px}
.tab-tekst p{margin:0;color:var(--steen-l);font-size:17px;max-width:44em}
.tab-tekst .vraag{font-weight:600;color:var(--terra-d);font-size:16px;max-width:22em;text-align:right}
.tab-paneel .app{box-shadow:0 30px 70px -40px rgba(54,51,46,.5)}
@media (max-width:900px){.tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-inline:-16px;padding-inline:16px;scrollbar-width:thin}.tab{white-space:nowrap}.tab-tekst{grid-template-columns:1fr}.tab-tekst .vraag{text-align:left}}
.tab-onder{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.tab-onder p{margin:0;font-size:13px;color:var(--muted)}

/* Drie manieren: grote illustraties, weinig tekst */
.manieren{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.manier{background:var(--wit);border:1px solid var(--lijn);border-radius:20px;padding:28px;min-height:360px;display:flex;flex-direction:column}
.manier .beeld{flex:1;display:grid;place-items:center;margin-bottom:22px;min-height:150px}
.manier h3{font-size:24px;margin:0 0 8px}
.manier p{margin:0;color:var(--steen-l);font-size:16px}
.manier svg{width:100%;max-width:260px;height:auto;overflow:visible}
.manier .m-lijn{stroke:var(--lijn);stroke-width:2;fill:none}
.manier .m-vlak{fill:var(--wit);stroke:var(--lijn);stroke-width:2}
.manier .m-vlak.t{fill:var(--terra-licht);stroke:var(--terra-zacht)}
.manier .m-vlak.o{fill:var(--olijf);stroke:var(--olijf-d)}
.manier .m-tekst{font-family:var(--label);font-size:11px;letter-spacing:.1em;fill:var(--muted)}
.manier .m-bol{fill:var(--terra-zacht)}
.scene.in-beeld .manier .m-bol.a{animation:p4mbol 2.4s linear infinite}
.scene.in-beeld .manier .m-bol.b{animation:p4mbol 2.4s 1.2s linear infinite}
@keyframes p4mbol{from{offset-distance:0%}to{offset-distance:100%}}
.scene.in-beeld .manier .m-stap{animation:p4mstap 4s infinite}
.scene.in-beeld .manier .m-stap:nth-of-type(2){animation-delay:1s}.scene.in-beeld .manier .m-stap:nth-of-type(3){animation-delay:2s}
@keyframes p4mstap{0%,10%{fill:var(--wit)}20%,70%{fill:var(--terra-licht)}85%,100%{fill:var(--wit)}}
.scene.in-beeld .manier .m-groei{transform-origin:center;animation:p4groei 5s ease-in-out infinite}
@keyframes p4groei{0%,100%{transform:scale(.96)}50%{transform:scale(1)}}
@media (max-width:900px){.manieren{grid-template-columns:1fr}.manier{min-height:0}}

/* Gesprek met de telefoonassistent (donker) */
.gesprek{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.gesprek h2{font-size:clamp(30px,3.8vw,50px);line-height:1.05;margin-bottom:16px}
.gesprek h2 em{font-style:normal;color:var(--terra-zacht)}
.gesprek p{color:var(--op-donker-zacht);font-size:17px;max-width:34em}
.gesprek ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.gesprek li{display:grid;grid-template-columns:22px 1fr;gap:12px;color:var(--op-donker-zacht)}
.gesprek li b{color:var(--op-donker);display:block;font-weight:600}
.gesprek li i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--terra-zacht);display:grid;place-items:center;font-style:normal;color:var(--terra-zacht);font-size:11px;margin-top:2px}
.telefoon{background:var(--donker-2);border:1px solid var(--lijn-donker);border-radius:24px;padding:22px;max-width:520px;margin-left:auto}
.telefoon .status{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--op-donker-zacht);margin-bottom:16px}
.telefoon .status b{color:var(--op-donker)}
.telefoon .regels{display:flex;flex-direction:column;gap:10px;min-height:290px}
.telefoon .r{max-width:88%;padding:11px 14px;border-radius:16px 16px 16px 4px;background:var(--donker-3);color:var(--op-donker);font-size:14px;opacity:0;transform:translateY(8px)}
.telefoon .r.k{align-self:flex-end;border-radius:16px 16px 4px 16px;background:var(--terra-licht);color:var(--steen)}
.telefoon .r.sys{align-self:center;background:transparent;border:1px dashed var(--lijn-donker);color:var(--op-donker-zacht);font-size:12.5px;max-width:100%;text-align:center}
.telefoon .r small{display:block;font-size:11.5px;opacity:.7;margin-top:3px}
.telefoon .r.zichtbaar{animation:p4in .5s forwards}
.telefoon .uitkomst{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.telefoon .uitkomst div{border-radius:12px;padding:10px 12px;font-size:12.5px;background:var(--donker-3);color:var(--op-donker-zacht)}
.telefoon .uitkomst div b{display:block;color:var(--op-donker);font-size:15px}
.telefoon .uitkomst div.goed{background:var(--terra-zacht);color:var(--donker)}
.telefoon .uitkomst div.goed b{color:var(--donker)}
.telefoon .herhaal{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size:12px;color:var(--op-donker-zacht)}
.telefoon .herhaal button{background:none;border:1px solid var(--lijn-donker);color:var(--op-donker);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:12.5px}
html[data-beweging="uit"] .telefoon .r{opacity:1;transform:none}
@media (max-width:900px){.gesprek{grid-template-columns:1fr;gap:28px}.telefoon{margin-left:0;max-width:none}}

/* Werkwijze: vijf stappen in een rij */
.stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative}
.stappen::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;background:var(--lijn)}
.stappen li{position:relative;padding-top:66px}
.stappen .nr{position:absolute;top:0;left:0;width:50px;height:50px;border-radius:50%;background:var(--wit);border:2px solid var(--lijn);display:grid;place-items:center;font-family:var(--label);font-size:16px;color:var(--steen)}
.stappen li:first-child .nr{background:var(--terra-zacht);border-color:var(--terra-zacht);color:var(--donker)}
.stappen h3{font-size:19px;margin:0 0 6px}
.stappen p{margin:0;color:var(--steen-l);font-size:15px}
.stappen-noot{margin:32px auto 0;text-align:center;color:var(--muted);font-size:15px;max-width:50em}
@media (max-width:900px){.stappen{grid-template-columns:1fr;gap:18px}.stappen::before{left:24px;right:auto;top:24px;bottom:24px;width:2px;height:auto}.stappen li{padding:6px 0 10px 70px}}

/* Oprichters met portretten */
.oprichters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.oprichters h2{font-size:clamp(30px,3.8vw,50px);line-height:1.05}
.oprichters p{color:var(--steen-l);font-size:17px;max-width:32em}
.portretten{display:flex;justify-content:center;gap:24px;align-items:flex-end}
.portret{text-align:center;width:min(46%,260px)}
.portret .beeld{border-radius:28px;background:var(--terra-licht);overflow:hidden;aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center}
.portret:nth-child(2) .beeld{background:var(--olijf)}
.portret img{width:92%;height:auto;display:block;transform-origin:bottom center;animation:p4adem 6s ease-in-out infinite}
.portret:nth-child(2) img{animation-delay:1.5s}
@keyframes p4adem{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.015) translateY(-2px)}}
.portret b{display:block;margin-top:12px;font-size:16px}
.portret small{display:block;color:var(--muted);font-size:13.5px}
@media (max-width:860px){.oprichters{grid-template-columns:1fr}}

/* Slot */
.slot{background:var(--donker);color:var(--op-donker);padding:110px 0;text-align:center}
.slot h2{font-size:clamp(34px,5vw,66px);line-height:1.02;max-width:14em;margin:0 auto 18px}
.slot h2 em{font-style:normal;color:var(--terra-zacht)}
.slot p{color:var(--op-donker-zacht);max-width:36em;margin:0 auto 28px;font-size:18px}
.slot small{display:block;margin-top:16px;color:var(--op-donker-zacht);font-size:14px}
.slot small a{color:var(--op-donker)}

/* Voet donker */
.site-footer{background:var(--donker);border-top:1px solid var(--lijn-donker);color:var(--op-donker-zacht)}
.site-footer .gg-wordmark{color:var(--op-donker)}
.site-footer h4{color:var(--op-donker)}
.site-footer a:hover{color:var(--op-donker)}
.site-footer .onder{border-top-color:var(--lijn-donker)}
.site-footer .beweging-knop{background:transparent;border-color:var(--lijn-donker);color:var(--op-donker)}

/* Onthullen */
[data-onthul]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
[data-onthul].onthuld{opacity:1;transform:none}
html:not(.js) [data-onthul],html[data-beweging="uit"] [data-onthul]{opacity:1;transform:none}
html[data-beweging="uit"] .hero .kop-tekst>*,html[data-beweging="uit"] .podium .app,html[data-beweging="uit"] .frag{opacity:1;transform:none}
/* Vangnet: als animaties niet lopen (verborgen tabblad, oude browser) staat de kop na ruim een seconde toch in beeld. */
html.kop-klaar .hero .kop-tekst>*,html.kop-klaar .podium .app{opacity:1;transform:none;animation:none}
html.frag-klaar .frag{opacity:1}

/* Onze software: afwisselende blokken met groot scherm */
.hero--klein{padding:72px 0 64px}
.hero--klein h1{font-size:clamp(36px,5.2vw,72px)}
.subnav{position:sticky;top:69px;z-index:10;background:color-mix(in srgb,var(--papier) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
.subnav ul{list-style:none;margin:0;padding:10px 0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin}
.subnav a{display:inline-block;padding:8px 14px;border-radius:999px;border:1.5px solid transparent;text-decoration:none;font-weight:600;font-size:14px;color:var(--steen-l);white-space:nowrap}
.subnav a:hover,.subnav a.actief{border-color:var(--steen);color:var(--steen)}
.blok{padding:88px 0;border-top:1px solid var(--lijn);scroll-margin-top:130px}
.blok:first-of-type{border-top:0}
.blok .wrap-breed{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.blok.omgekeerd .wrap-breed>.tekst{order:2}
.blok h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08}
.blok .tekst p{color:var(--steen-l);font-size:17px}
.blok ul.punten{list-style:none;margin:18px 0;padding:0;display:grid;gap:10px}
.blok ul.punten li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--steen-l);font-size:16px}
.blok ul.punten li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--olijf);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5d3f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat;margin-top:1px}
.blok .vraag{font-weight:600;color:var(--terra-d);font-size:17px;margin:0}
.blok .app{box-shadow:0 30px 70px -40px rgba(54,51,46,.5)}
.blok .app-zij{display:none}
.blok .app-body{grid-template-columns:1fr;min-height:0}
.blok .week{grid-template-columns:96px repeat(5,1fr)}
.blok .tegels{grid-template-columns:repeat(2,1fr)}
.blok .noot{font-size:13px;color:var(--muted);margin:12px 0 0}
@media (max-width:980px){.blok .wrap-breed{grid-template-columns:1fr;gap:28px}.blok.omgekeerd .wrap-breed>.tekst{order:0}.blok{padding:56px 0}}

/* Zo werken we: vijf stappen als brede blokken met een kaart */
.wstap{padding:72px 0;border-top:1px solid var(--lijn)}
.wstap:first-of-type{border-top:0}
.wstap .wrap-breed{display:grid;grid-template-columns:110px minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center}
.wstap.omgekeerd .wrap-breed>.tekst{order:3}
.wstap .nr-groot{font-family:var(--label);font-size:76px;color:var(--terra-zacht);line-height:1;align-self:start}
.wstap h2{font-size:clamp(26px,3.2vw,42px);line-height:1.08}
.wstap .tekst p{color:var(--steen-l);font-size:17px}
.wstap .tekst p.extra{font-weight:600;color:var(--steen)}
.kaart-groot{background:var(--wit);border:1px solid var(--lijn);border-radius:20px;padding:22px 24px;box-shadow:0 30px 70px -40px rgba(54,51,46,.45);font-size:13.5px;color:var(--steen-l)}
.kaart-groot .kaart-kop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.kaart-groot .kaart-kop b{font-size:16px;color:var(--steen)}
.kaart-groot .kolommen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kaart-groot .kolom{background:var(--papier);border:1px solid var(--lijn);border-radius:12px;padding:12px}
.kaart-groot .kolom b{display:block;color:var(--steen);margin-bottom:8px;font-size:13px}
.kaart-groot .kolom span{display:block;padding:4px 0;border-top:1px solid var(--lijn)}
.kaart-groot .kolom span:first-of-type{border-top:0}
.kaart-groot .doc{border-left:3px solid var(--terra-zacht);padding-left:14px;margin:0 0 12px}
.kaart-groot .doc b{display:block;color:var(--steen);font-size:13.5px}
.kaart-groot .doc p{margin:2px 0 0}
.speelt .doc{animation:p4rij .5s both}
.speelt .doc:nth-of-type(2){animation-delay:.3s}.speelt .doc:nth-of-type(3){animation-delay:.6s}.speelt .doc:nth-of-type(4){animation-delay:.9s}
.speelt .kolom{animation:p4in .6s both}
.speelt .kolom:nth-child(2){animation-delay:.25s}.speelt .kolom:nth-child(3){animation-delay:.5s}
@media (max-width:980px){.wstap{padding:56px 0}.wstap .wrap-breed{grid-template-columns:1fr;gap:20px}.wstap.omgekeerd .wrap-breed>.tekst{order:0}.wstap .nr-groot{font-size:48px}.kaart-groot .kolommen{grid-template-columns:1fr}}

/* Over ons */
.hero--oprichters .portretten{margin:48px auto 0;max-width:720px}
.hero--oprichters .portret .beeld{background:var(--donker-3)}
.hero--oprichters .portret:nth-child(2) .beeld{background:var(--donker-2);border:1px solid var(--lijn-donker)}
.hero--oprichters .portret b{color:var(--op-donker)}
.hero--oprichters .portret small{color:var(--op-donker-zacht)}
.hero--oprichters .portret{opacity:0;transform:translateY(20px);animation:p4in .8s .5s forwards}
.hero--oprichters .portret:nth-child(2){animation-delay:.7s}
html.kop-klaar .hero--oprichters .portret{opacity:1;transform:none;animation:none}
.verhaal{padding:88px 0;border-top:1px solid var(--lijn)}
.verhaal .wrap-breed{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;align-items:start}
.verhaal h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08}
.verhaal h2 em{font-style:normal;color:var(--terra)}
.verhaal p{font-size:18px;color:var(--steen-l);max-width:36em}
.verhaal .handtekening{font-family:var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--terra);font-size:14px;margin-top:20px}
.verhaal .kaart-groot{max-width:520px}
.maken{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.maken a{display:block;padding:26px;border-radius:18px;background:var(--wit);border:1px solid var(--lijn);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.maken a:hover{border-color:var(--steen);transform:translateY(-2px)}
.maken h3{font-size:21px;margin:0 0 6px}
.maken p{margin:0;color:var(--steen-l);font-size:16px}
.maken span{display:inline-block;margin-top:14px;font-weight:600;color:var(--terra-d)}
@media (max-width:900px){.verhaal .wrap-breed{grid-template-columns:1fr;gap:20px}.maken{grid-template-columns:1fr}.hero--oprichters .portretten{gap:12px}}

/* Kennismaking: stapsgewijs formulier (ontwerp, verstuurt niets) */
.kennis-lay{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start;padding:72px 0 96px}
.formulier{background:var(--wit);border:1px solid var(--lijn);border-radius:20px;padding:28px;box-shadow:0 30px 70px -40px rgba(54,51,46,.45)}
.voortgang{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 24px;padding:0;list-style:none}
.voortgang li{padding:9px 10px;border-radius:9px;background:var(--creme);font-size:13px;font-weight:600;color:var(--muted);display:flex;gap:8px;align-items:center}
.voortgang li i{font-style:normal;font-family:var(--label);font-size:12px;opacity:.8}
.voortgang li.klaar{background:var(--olijf);color:var(--groen-tekst)}
.voortgang li.actief{background:var(--steen);color:var(--papier)}
.formulier fieldset{border:0;padding:0;margin:0;min-width:0}
.formulier fieldset[hidden]{display:none}
.formulier legend,.formulier h2{font-size:26px;font-weight:700;margin:0 0 6px;letter-spacing:-.02em}
.formulier .uitleg{color:var(--steen-l);margin:0 0 18px}
.formulier label.veld-label{display:block;font-weight:600;margin:16px 0 6px;font-size:15px}
.formulier label.veld-label small{font-weight:400;color:var(--muted)}
.formulier input[type="text"],.formulier input[type="email"],.formulier input[type="tel"],.formulier textarea,.formulier select{width:100%;padding:12px 14px;border:1.5px solid var(--lijn);border-radius:10px;font:inherit;background:var(--papier);color:var(--steen)}
.formulier textarea{min-height:120px;resize:vertical}
.formulier input:focus,.formulier textarea:focus,.formulier select:focus{outline:3px solid var(--terra-licht);border-color:var(--terra)}
.formulier .ongeldig{border-color:var(--terra-d)!important}
.keuzes-rij{display:flex;flex-wrap:wrap;gap:8px}
.keuze{position:relative}
.keuze input{position:absolute;opacity:0;width:1px;height:1px}
.keuze span{display:inline-block;padding:9px 14px;border-radius:999px;border:1.5px solid var(--lijn);font-weight:600;font-size:14.5px;cursor:pointer;background:var(--papier);color:var(--steen-l)}
.keuze input:checked+span{background:var(--steen);border-color:var(--steen);color:var(--papier)}
.keuze input:focus-visible+span{outline:3px solid var(--terra);outline-offset:2px}
.radio-rij{display:flex;flex-wrap:wrap;gap:16px;margin-top:6px}
.radio-rij label{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.form-acties{display:flex;justify-content:space-between;gap:12px;margin-top:26px;flex-wrap:wrap}
.formulier [hidden],.klaar-paneel[hidden],.form-acties .btn[hidden]{display:none!important}
.formulier legend:focus{outline:none}
.form-acties .btn--licht{background:transparent;color:var(--steen);border-color:var(--lijn)}
.form-acties .btn--licht:hover{border-color:var(--steen);background:transparent;color:var(--steen)}
.fout{color:var(--terra-d);font-size:14px;margin:8px 0 0;font-weight:600}
.samenvatting dl{display:grid;grid-template-columns:150px 1fr;gap:10px 16px;margin:0 0 18px;font-size:15.5px}
.samenvatting dt{color:var(--muted)}
.samenvatting dd{margin:0}
.samenvatting .wijzig{font-size:13.5px;margin-left:8px}
.samenvatting .groep{border-top:1px solid var(--lijn);padding-top:14px;margin-top:4px}
.samenvatting .groep b{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.klaar-paneel{background:var(--olijf);border-radius:20px;padding:28px}
.klaar-paneel h2{font-size:26px;margin:0 0 8px}
.klaar-paneel p{color:var(--steen-l)}
.zijkaart{position:sticky;top:96px;background:var(--creme);border-radius:18px;padding:26px}
.zijkaart h3{font-size:19px;margin:0 0 10px}
.zijkaart ol{padding-left:20px;color:var(--steen-l);margin:0 0 18px}
.zijkaart li{margin-bottom:8px}
.zijkaart li b{color:var(--steen)}
.zijkaart p{color:var(--steen-l);font-size:15px}
.zijkaart .ontwerp{font-size:13px;color:var(--muted);border-top:1px solid var(--lijn-donker);border-color:var(--creme-d);padding-top:12px;margin:0}
@media (max-width:900px){.kennis-lay{grid-template-columns:1fr;gap:24px;padding:40px 0 64px}.zijkaart{position:static}.voortgang{grid-template-columns:1fr 1fr}.samenvatting dl{grid-template-columns:1fr}.formulier{padding:20px}}
/* Houd de bestaande tabrij binnen de 12px mobiele paginamarge. */
@media(max-width:600px){.tabs{margin-inline:-12px;padding-inline:12px}}
/* Publieke introductie: betekenisvolle beweging zonder productinterface. */
.public-flow{max-width:1180px;margin:0 auto;padding:42px 32px 52px;display:grid;grid-template-columns:1fr 80px 210px 80px 1fr;gap:16px;align-items:center;text-align:center;border-top:1px solid var(--lijn-donker)}
.public-flow .flow-end>span{font-size:11px;letter-spacing:.12em;color:var(--op-donker-zacht)}
.public-flow .flow-end h2{font-size:clamp(19px,2.1vw,28px);line-height:1.55;font-weight:500;margin:16px 0 0}
.flow-center{border:1px solid var(--terra-zacht);border-radius:25px;padding:30px 15px;background:var(--donker-3);animation:public-breathe 5s ease-in-out infinite}
.flow-center>span{font-weight:800;letter-spacing:.06em;color:var(--terra-zacht)}
.flow-center p{font-size:17px;line-height:1.8;margin:12px 0 0}
.flow-path{height:1px;background:var(--lijn-donker);position:relative}
.flow-path i{position:absolute;width:7px;height:7px;background:var(--terra-zacht);border-radius:50%;left:0;top:-3px;animation:public-pass 4.8s linear infinite}
.flow-path i:nth-child(2){animation-delay:-1.6s}.flow-path i:nth-child(3){animation-delay:-3.2s}
@keyframes public-pass{0%{left:0;opacity:0}15%,85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes public-breathe{50%{box-shadow:0 0 35px -15px var(--terra-zacht);transform:translateY(-4px)}}
.public-offers article{display:grid;grid-template-columns:200px 1fr 1.2fr;column-gap:34px;border-top:1px solid var(--lijn);padding:32px 0;align-items:start}
.public-offers article>span{font-size:12px;letter-spacing:.08em;color:var(--terra);padding-top:5px;font-weight:600}
.public-offers h3{font-size:25px;line-height:1.25;margin:0}.public-offers p{margin:0;color:var(--muted)}
.public-offers small{grid-column:3;color:var(--terra);margin-top:12px;font-size:12px}
.public-question{text-align:center;font-size:20px;max-width:650px;margin:38px auto 0;color:var(--steen)}
.public-software .blok .wrap-breed{grid-template-columns:1fr;max-width:900px}.public-software .blok.omgekeerd .wrap-breed>.tekst{order:0}
.public-software .blok .noot{display:none}
html[data-beweging="uit"] .public-flow *{animation:none!important}
@media(max-width:850px){.public-flow{grid-template-columns:1fr 30px 160px 30px 1fr;gap:8px;padding-inline:20px}.public-offers article{grid-template-columns:1fr 1.5fr;gap:12px 28px}.public-offers article>span{grid-column:1/-1}.public-offers small{grid-column:2}}
@media(max-width:600px){.public-flow{grid-template-columns:1fr;gap:24px}.public-flow .flow-end h2 br{display:none}.public-flow .flow-end h2{font-size:20px}.public-flow .flow-end h2 br:after{content:' '}.flow-path{width:1px;height:35px;justify-self:center}.flow-path i{top:0;left:-3px;animation-name:public-down}.flow-center{width:100%;max-width:290px;justify-self:center;padding:20px}.flow-center p br{display:none}.flow-center p{word-spacing:5px}.public-offers article{display:block}.public-offers h3{margin:12px 0}.public-offers small{display:block}.public-question{font-size:18px}}
@keyframes public-down{0%{top:0;opacity:0}15%,85%{opacity:1}100%{top:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){html:not([data-explicit-motion="aan"]) .public-flow *{animation:none!important}}
@media(max-width:600px){.public-flow .flow-end h2 br,.flow-center p br{display:initial}}
/* Grote redactionele illustraties; geen productinterface of functiedetails. */
.hero-art{max-width:1140px;margin:0 auto;position:relative;padding:24px 42px 30px;border-top:1px solid var(--lijn-donker);background:radial-gradient(ellipse at center,rgba(222,153,122,.10),transparent 65%)}
.hero-art svg{display:block;width:100%;height:360px;overflow:visible}.hero-art-labels{display:flex;justify-content:space-between;color:var(--op-donker-zacht);font-size:13px;gap:20px;text-align:center}.hero-art-labels span{flex:1}
.hero-art-note{display:flex;align-items:center;justify-content:center;gap:16px;font-size:14px;color:var(--op-donker-zacht)}.hero-art-note i{width:4px;height:4px;border-radius:50%;background:var(--terra-zacht)}
.visual-offer{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);align-items:center;gap:70px;padding:55px 0;border-top:1px solid var(--lijn)}
.visual-offer:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,4fr)}.visual-offer:nth-child(even) .visual-copy{order:2}
.visual-copy h3{font-size:clamp(29px,3vw,42px);line-height:1.15;letter-spacing:-.035em;margin:0 0 22px}.visual-copy>p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.8}.visual-copy small{display:block;color:var(--terra);font-size:12px;line-height:1.8;margin-top:20px}
.editorial-art{border-radius:24px;background:var(--creme);overflow:hidden;min-height:340px;display:grid;place-items:center}.editorial-art svg{display:block;width:100%;height:auto;overflow:visible}.art-connect{background:var(--olijf)}.art-idea{background:#eee6df}
.art-shadow{fill:#36332e;opacity:.06}.art-orbit{fill:none;stroke:#b4a797;stroke-width:1;stroke-dasharray:3 9;opacity:.55}.art-route{stroke:#b4a797;stroke-width:2;fill:none}
.art-light{fill:#faf7f1;stroke:#d9cec0;stroke-width:1}.art-peach{fill:#de997a}.art-sage{fill:#c8d2bb}.art-ink{fill:#36332e}.art-line{fill:none;stroke:#665448;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.art-white-line{fill:none;stroke:#faf7f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.hero-art .art-route{stroke:#75675b}.hero-art .art-ink{fill:#de997a}.hero-art .art-white-line{stroke:#36332e}.hero-art .art-shadow{fill:#de997a;opacity:.06}
.piece{stroke:#faf7f1;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:piece-fit 9s cubic-bezier(.45,0,.2,1) infinite;--dx:0px;--dy:0px;--turn:0deg}
.piece-a{fill:#de997a;--dx:-48px;--dy:-25px;--turn:-12deg}.piece-b{fill:#c8d2bb;--dx:48px;--dy:-15px;--turn:10deg}.piece-c{fill:#f4eee5;--dx:-36px;--dy:20px;--turn:8deg}.piece-d{fill:#36332e;--dx:42px;--dy:30px;--turn:-9deg}
@keyframes piece-fit{0%,100%{transform:translate(var(--dx),var(--dy)) rotate(var(--turn))}35%,72%{transform:translate(0,0) rotate(0deg)}}
.join-dot{fill:#aa6749;animation:join-glow 9s ease-in-out infinite}@keyframes join-glow{0%,100%{opacity:0;transform:scale(.98)}40%,65%{opacity:1}}
.satellite,.idea-tile{animation:editorial-float 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.delay{animation-delay:-3.5s}.tile-two{animation-delay:-2s}.tile-three{animation-delay:-4s}.tile-four{animation-delay:-5.5s}
@keyframes editorial-float{0%,100%{transform:translateY(-7px) rotate(-3deg)}50%{transform:translateY(9px) rotate(3deg)}}
.art-particle{fill:#aa6749;offset-distance:50%;animation:editorial-travel 6s cubic-bezier(.45,0,.55,1) infinite}.hero-art .art-particle{fill:#f5eadd}
@keyframes editorial-travel{0%{offset-distance:0%;opacity:0}12%,88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.core,.idea-center{transform-box:fill-box;transform-origin:center;animation:editorial-core 6s ease-in-out infinite}@keyframes editorial-core{0%,100%{transform:scale(.97)}50%{transform:scale(1.04)}}
html[data-beweging="uit"] .editorial-art *,html[data-beweging="uit"] .hero-art *{animation-play-state:paused!important}
@media(max-width:850px){.visual-offer,.visual-offer:nth-child(even){grid-template-columns:1fr;gap:25px;padding:40px 0}.visual-offer:nth-child(even) .visual-copy{order:0}.visual-copy{max-width:650px}.editorial-art{min-height:0}.hero-art{padding-inline:20px}.hero-art svg{height:300px}.hero-art-labels{font-size:12px;gap:10px}}
@media(max-width:480px){.hero-art-labels{font-size:11px;line-height:1.5}.hero-art svg{height:auto;min-height:220px}.hero-art-note{font-size:12px;gap:10px}.editorial-art{border-radius:16px}.visual-copy h3{font-size:30px}}
@media(prefers-reduced-motion:reduce){html:not([data-explicit-motion="aan"]) .editorial-art *,html:not([data-explicit-motion="aan"]) .hero-art *{animation:none!important}}
/* Eén illustratiestijl op alle publieke voorbeeldpagina’s. */
.public-software .blok .wrap-breed{grid-template-columns:minmax(0,4fr) minmax(0,6fr);max-width:1280px;gap:60px}
.public-software .blok.omgekeerd .wrap-breed>.tekst{order:2}.public-software .blok .vraag{margin-top:25px}
.wstap .wrap-breed{grid-template-columns:65px minmax(0,4fr) minmax(0,6fr);gap:35px}
.wstap.omgekeerd .wrap-breed>.tekst{order:0}.wstap .editorial-art{min-height:300px}
.about-motion{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:65px;align-items:center}.about-motion h2{font-size:clamp(30px,3.5vw,48px)}.about-motion h2 em{color:var(--terra);font-style:normal}
.contact-art{min-height:0;margin-bottom:25px;background:var(--creme)}.contact-art svg{max-height:235px}
.manier .editorial-art{min-height:0;margin-bottom:24px}.manier .editorial-art svg{max-width:none;width:100%;height:auto}
.art-talk{background:var(--terra-licht)}.art-team,.art-focus{background:var(--olijf)}.art-path{background:var(--creme)}
.talk-left,.talk-right{transform-box:fill-box;transform-origin:center;animation:conversation-sway 6s ease-in-out infinite}.talk-right{animation-delay:-3s}.talk-dot{fill:#975334;animation:conversation-dot 2.8s ease-in-out infinite}
@keyframes conversation-sway{0%,100%{transform:translateY(-5px) rotate(-2deg)}50%{transform:translateY(7px) rotate(2deg)}}
@keyframes conversation-dot{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(-7px)}}
.team-person{animation:team-together 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes team-together{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.focus-lens{animation:focus-look 8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.focus-marks{animation:editorial-core 8s ease-in-out infinite;transform-origin:280px 165px}
@keyframes focus-look{0%,100%{transform:translate(-14px,-5px) rotate(-6deg)}50%{transform:translate(14px,5px) rotate(5deg)}}
html[data-page-hidden] *{animation-play-state:paused!important}
.editorial-art[data-art-visible="false"] *, .hero-art[data-art-visible="false"] *{animation-play-state:paused!important}
html[data-beweging="uit"] .editorial-art *,html[data-beweging="uit"] .hero-art *{animation-play-state:paused!important}
@media(max-width:980px){.public-software .blok .wrap-breed,.wstap .wrap-breed,.about-motion{grid-template-columns:1fr;gap:26px}.public-software .blok.omgekeerd .wrap-breed>.tekst{order:0}.wstap .nr-groot{font-size:38px;margin:0}.wstap .editorial-art{min-height:0}}
@media(prefers-reduced-motion:reduce){html:not([data-explicit-motion="aan"]) .editorial-art *,html:not([data-explicit-motion="aan"]) .hero-art *,html:not([data-explicit-motion="aan"]) .portret img{animation:none!important;transition:none!important}}