/* ai-en-automatisering: CSS van de secties op deze pagina (docs/prototype/ai-en-automatisering.html, inline <style>).
   De cases-carrousel staat in cases.css, de stappen en het kruimelpad in styles.css; de vragen gebruiken het gedeelde FAQ-blok. */
/* Alles in de laag 'components' van de Tailwind-build, zodat utilities (ook hs-*-varianten) blijven winnen. */
@layer components{
/* ---------- pagina: AI en automatisering ---------- */
body{overflow-x:hidden}
.hand{font-family:var(--font-hand);color:var(--color-accent);font-size:20px;line-height:1.25}
/* vensters, overgenomen uit diensten.html */
.win{position:absolute;background:#fff;border-radius:.7em;box-shadow:var(--shadow-soft);overflow:hidden}
.win .bar{display:flex;gap:.35em;align-items:center;padding:.55em .8em;background:#F2EEE6;font-family:var(--font-mono);font-size:.78em;color:var(--color-ink-3)}
.win .bar i{width:.6em;height:.6em;border-radius:50%;background:var(--color-rule)}
.win .bar span{margin-left:.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* hero: een bestelmail wordt een order die iemand goedkeurt (rijkere variant van rij F in diensten.html) */
.aih{position:relative;aspect-ratio:5/4;border-radius:22px;overflow:hidden;background:var(--color-paper-2);border:1px solid var(--color-rule);container-type:inline-size;box-shadow:var(--shadow-lift)}
.aih .sc{position:absolute;inset:0;font-size:2.55cqw}
.aih .mail{left:5%;top:7%;width:50%}
.aih .mail .from{padding:.7em .9em .1em;font-size:.78em;color:var(--color-ink-3)}
.aih .mail .subj{padding:0 .9em;font-weight:700;font-size:.9em}
.aih .mail .body{padding:.35em .9em .6em;font-size:.88em;line-height:1.6}
.aih .mail mark{color:inherit;background:transparent;border-radius:.25em;padding:0 .15em;transition:background-color .4s;transition-delay:var(--d)}
.aih .att{display:flex;align-items:center;gap:.5em;margin:0 .9em .9em;padding:.4em .6em;border:1px solid var(--color-rule);border-radius:.5em;font-size:.8em;transition:border-color .4s 1.1s,background-color .4s 1.1s}
.aih .att i{flex:none;width:1.7em;height:2.1em;border-radius:.2em;background:#C0392B;color:#fff;font-style:normal;font-size:.7em;font-weight:800;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.2em}
.aih .tag{position:absolute;left:36%;top:52%;z-index:3;padding:.3em .7em;border-radius:.4em;background:var(--color-blueprint);color:#fff;font-size:.8em;font-weight:700;opacity:0;transform:scale(.7);transition:opacity .3s .3s,transform .4s cubic-bezier(.3,1.5,.5,1) .3s}
.aih .rec{right:5%;top:17%;width:42%;z-index:2}
.aih .rec .bar b{margin-left:auto;font-family:var(--font-sans);font-weight:700;font-size:.9em;padding:.05em .55em;border-radius:1em;background:var(--color-postit);color:var(--color-ink);transition:background-color .3s 3.4s,color .3s 3.4s}
.aih .f{position:relative;display:grid;grid-template-columns:4.6em 1fr;gap:.5em;padding:.5em .9em;border-top:1px solid #F0ECE4;font-size:.85em}
.aih .f span{color:var(--color-ink-3)}
.aih .f b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateX(-.5em);transition:opacity .35s,transform .35s;transition-delay:var(--d)}
.aih .f.doubt{transition:background-color .4s 2.3s}
.aih .flag{position:absolute;right:-.2em;top:50%;translate:0 -50%;padding:.15em .45em;border-radius:.3em;background:var(--color-postit);font-family:var(--font-hand);font-size:1.05em;color:var(--color-ink);rotate:4deg;box-shadow:0 .3em .6em rgb(25 23 20 / .15);opacity:0;transform:scale(.6);transition:opacity .3s 2.3s,transform .4s cubic-bezier(.3,1.5,.5,1) 2.3s}
.aih .ok{position:relative;margin:.6em .9em .9em;padding:.45em;border-radius:2em;border:.12em solid var(--color-ink);text-align:center;font-size:.85em;font-weight:700;transition:background-color .3s 3.3s,color .3s 3.3s,border-color .3s 3.3s}
.aih .cursor{position:absolute;right:16%;top:84%;z-index:4;width:1.6em;height:1.6em;opacity:0;transform:translate(3em,3em);transition:opacity .3s 2.7s,transform .6s cubic-bezier(.2,.8,.2,1) 2.7s}
.aih .cursor svg{width:100%;height:100%}
.aih .sync{position:absolute;right:5%;bottom:6%;z-index:2;display:flex;align-items:center;gap:.5em;padding:.45em .9em;border-radius:2em;background:var(--color-ink);color:var(--color-paper);font-size:.82em;font-weight:600;opacity:0;transform:translateY(.8em);transition:opacity .4s 3.8s,transform .5s cubic-bezier(.2,.8,.2,1) 3.8s}
.aih .sync i{width:.6em;height:.6em;border-radius:50%;background:var(--color-ok)}
.aih .note-h{position:absolute;left:6%;bottom:8%;width:40%;font-family:var(--font-hand);font-size:1.25em;line-height:1.15;color:var(--color-ink-2);rotate:-3deg}
.aih.play .mail mark{background:var(--color-accent-soft)}
.aih.play .att{border-color:var(--color-accent);background:#FDF3EE}
.aih.play .tag{opacity:1;transform:none}
.aih.play .f b{opacity:1;transform:none}
.aih.play .f.doubt{background:#FFF8D9}
.aih.play .flag{opacity:1;transform:none}
.aih.play .cursor{opacity:1;transform:none}
.aih.play .ok{background:var(--color-ok);border-color:var(--color-ok);color:#fff}
.aih.play .rec .bar b{background:var(--color-ok-soft);color:var(--color-ok)}
.aih.play .sync{opacity:1;transform:none}
.aih-replay{margin-top:12px;font:inherit;font-size:13px;font-weight:600;color:var(--color-ink-3);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.aih-replay:hover{color:var(--color-ink)}
/* herkenning */
.pain-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.pain{padding:22px;border-radius:18px;background:var(--color-card);border:1px solid var(--color-rule)}
.pain .obj{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pain .obj > *{animation:bob 6s ease-in-out infinite}
.pain:nth-child(2) .obj > *{animation-delay:-1.5s}
.pain:nth-child(3) .obj > *{animation-delay:-3s}
.pain:nth-child(4) .obj > *{animation-delay:-4.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(.6deg)}}
.pain h3{font-size:21px;line-height:1.2}
.pain p{margin-top:8px;font-size:15px;color:var(--color-ink-2)}
.o-mail{width:100%;max-width:200px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgb(25 23 20 / .12);font-size:10.5px;padding:10px 12px;line-height:1.4;rotate:-3deg}
.o-mail .from{color:var(--color-ink-3)}
.o-mail .subj{font-weight:700;margin:2px 0 6px}
.o-pdf{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;border:1px solid var(--color-rule);border-radius:5px}
.o-pdf i{width:12px;height:15px;border-radius:2px;background:#C0392B}
.o-scrib{display:block;margin-top:5px;font-family:var(--font-hand);font-size:14px;color:var(--color-blueprint)}
.o-pile{position:relative;width:150px;height:100px}
.o-pile span{position:absolute;left:50%;top:50%;width:92px;height:62px;margin:-31px 0 0 -46px;padding:7px 8px;background:#fff;border-radius:4px;box-shadow:0 6px 16px rgb(25 23 20 / .12);font-family:var(--font-mono);font-size:9px;color:var(--color-ink-3);rotate:var(--r);translate:var(--x) var(--y)}
.o-pile span b{display:block;color:var(--color-ink);font-size:9.5px}
.o-pile .scr{position:absolute;right:-6px;bottom:-8px;z-index:2;font-family:var(--font-hand);font-size:15px;color:var(--color-blueprint);rotate:-4deg}
.o-faq{display:grid;gap:5px;width:100%;max-width:200px}
.o-faq span{display:block;padding:6px 9px;background:#fff;border-radius:6px;box-shadow:0 5px 14px rgb(25 23 20 / .1);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-faq span:nth-child(2){margin-left:10px}
.o-faq span:nth-child(3){margin-left:20px}
.o-sync{display:flex;align-items:center;gap:8px}
.o-sync .box{width:62px;padding:8px 6px;border-radius:8px;background:#fff;box-shadow:0 6px 16px rgb(25 23 20 / .12);text-align:center;font-size:10px;font-weight:700}
.o-sync .gap{position:relative;width:44px;border-top:2px dashed var(--color-ink-3)}
.o-sync .gap b{position:absolute;left:50%;top:-30px;translate:-50% 0;padding:3px 6px;background:var(--color-postit);font-family:var(--font-hand);font-weight:400;font-size:13px;white-space:nowrap;rotate:-5deg;box-shadow:0 4px 10px rgb(25 23 20 / .12)}
/* toepassingen */
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.app{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:22px;align-items:center;padding:22px;border-radius:20px;background:var(--color-card);border:1px solid var(--color-rule)}
.app h3{font-size:24px;line-height:1.15}
.app p{margin-top:8px;color:var(--color-ink-2);font-size:15.5px}
.app .mini{position:relative;aspect-ratio:4/3;border-radius:14px;background:var(--color-paper-2);container-type:inline-size;overflow:hidden}
.app .mini .sc{position:absolute;inset:0;font-size:5.2cqw}
/* 1 inlezen */
.m-read .pdf{left:7%;top:12%;width:40%;bottom:12%;padding:.6em}
.m-read .pdf i{display:block;height:.45em;margin-top:.45em;border-radius:.2em;background:#ECE6DA;transition:background-color .4s;transition-delay:var(--d)}
.m-read .pdf .h{height:.7em;width:60%;margin-top:0;background:#C0392B}
.m-read .form{right:7%;top:20%;width:40%;padding:.3em 0}
.m-read .form div{display:flex;align-items:center;gap:.3em;padding:.35em .5em;border-top:1px solid #F0ECE4;font-size:.7em}
.m-read .form div:first-child{border-top:0}
.m-read .form b{flex:1;height:.6em;border-radius:.2em;background:var(--color-blueprint);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d)}
.app.in .m-read .pdf i:not(.h){background:var(--color-accent-soft)}
.app.in .m-read .form b{transform:none}
/* 2 sorteren */
.m-sort .doc{position:absolute;left:50%;top:10%;width:22%;aspect-ratio:3/4;margin-left:-11%;border-radius:.3em;background:#fff;box-shadow:var(--shadow-soft);rotate:var(--r);transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d)}
.m-sort .doc::before{content:"";position:absolute;left:18%;right:18%;top:20%;height:.35em;border-radius:.2em;background:var(--c)}
.m-sort .bins{position:absolute;left:6%;right:6%;bottom:9%;display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.m-sort .bins span{padding:1.5em .2em .4em;border-radius:.4em;border:.1em solid var(--color-rule);border-top:.35em solid var(--c);background:#fff;text-align:center;font-size:.55em;font-weight:700;color:var(--color-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app.in .m-sort .doc{transform:translate(var(--tx),6em) scale(.62)}
/* 3 antwoorden */
.m-reply .q{left:7%;top:10%;width:64%;padding:.5em .6em;font-size:.62em;line-height:1.35}
.m-reply .a{right:7%;top:44%;width:66%;padding:.5em .6em;font-size:.62em;line-height:1.35;border:.15em dashed var(--color-blueprint);box-shadow:none;opacity:0;transform:translateY(.6em);transition:opacity .4s .5s,transform .5s cubic-bezier(.2,.8,.2,1) .5s}
.m-reply .a em{display:inline-block;margin-bottom:.3em;padding:0 .5em;border-radius:1em;background:var(--color-postit);font-style:normal;font-weight:700}
.m-reply .send{position:absolute;right:7%;bottom:8%;padding:.25em .8em;border-radius:2em;border:.12em solid var(--color-ink);background:#fff;font-size:.62em;font-weight:700;transition:background-color .3s 1.6s,color .3s 1.6s,border-color .3s 1.6s}
.app.in .m-reply .a{opacity:1;transform:none}
.app.in .m-reply .send{background:var(--color-ok);border-color:var(--color-ok);color:#fff}
/* 4 koppelen */
.m-link .pk{position:absolute;top:30%;width:34%;padding:.6em .4em;border-radius:.5em;background:#fff;box-shadow:var(--shadow-soft);text-align:center;font-size:.7em;font-weight:700}
.m-link .pk.l{left:6%}
.m-link .pk.r{right:6%}
.m-link svg{position:absolute;left:40%;right:40%;top:38%;width:20%;height:1.2em;overflow:visible}
.m-link line{stroke:var(--color-accent);stroke-width:2.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.app.in .m-link line{animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-16}}
.m-link .pkt{position:absolute;top:36%;left:40%;width:.9em;height:.9em;margin-top:-.1em;border-radius:.2em;background:var(--color-accent);opacity:0}
.app.in .m-link .pkt{animation:hop 2.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes hop{0%{left:40%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:57%;opacity:0}}
.m-link .lbl{position:absolute;left:0;right:0;bottom:12%;text-align:center;font-family:var(--font-hand);font-size:.85em;color:var(--color-ink-2)}
.always{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:36px;padding-top:28px;border-top:1px solid var(--color-rule)}
.always b{display:block;font-family:var(--font-serif);font-size:20px;font-weight:600}
.always p{margin-top:6px;font-size:15px;color:var(--color-ink-2)}
/* zo draait het: vier stappen onder elkaar, verbonden door een lijn; ze schuiven één voor één in beeld */
.daily{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:14px}
.daily::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--color-rule)}
.daily li{position:relative;display:flex;align-items:center;gap:16px;padding:14px 18px 14px 14px;border-radius:14px;background:var(--color-card);border:1px solid var(--color-rule);opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s}
.daily b{font-weight:600;font-size:16px;line-height:1.35;color:var(--color-ink)}
.d-ic{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:20px;height:20px;padding:8px;box-sizing:content-box;border-radius:50%;background:var(--color-paper-2);font-size:14px;font-weight:800;color:var(--color-ink)}
.d-ai{background:var(--color-accent-soft)!important;border-color:transparent!important}
.d-ai .d-ic{background:var(--color-accent);color:#fff;font-size:12px;letter-spacing:.04em}
.d-doubt{background:var(--color-postit)!important;border-color:transparent!important;rotate:-1deg}
.d-doubt .d-ic{background:#fff}
.d-ok .d-ic{background:var(--color-ok);color:#fff}
.daily.in li{opacity:1;transform:none}
.daily.in li:nth-child(2){transition-delay:.25s}
.daily.in li:nth-child(3){transition-delay:.5s}
.daily.in li:nth-child(4){transition-delay:.75s}
@media (prefers-reduced-motion:reduce){
.daily li{opacity:1;transform:none;transition:none}
}
/* afsluiter, zoals op software-op-maat.html */
/* responsief */
@media (max-width:1023px){
.pain-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.apps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
.pain-row,.always{grid-template-columns:minmax(0,1fr)}
.app{grid-template-columns:minmax(0,1fr)}
}
/* minder beweging: meteen het eindbeeld, niets wiegt of loopt */
@media (prefers-reduced-motion:reduce){
.aih *,.app *{transition:none!important;animation:none!important}
.pain .obj > *{animation:none}
.aih-replay{display:none}
}
}
/* gsm: tekst in de illustratie leesbaar houden */
@media (max-width:640px){
.aih{aspect-ratio:1/1}
.aih .sc{font-size:max(10.5px,2.55cqw)}
}
/* dienstpagina's: overal dezelfde ruimte rond de hero. Kruimelpad tot de eerste tekst 32px (gsm) en 48px (desktop),
   laatste regel van de hero tot de titel van het volgende blok 112px en 144px. De marges hieronder corrigeren de
   eigen opbouw van deze hero naar die maten; in Wagtail wordt het één gedeelde instelling op de heroblokken. */
/* tekst en beeld bovenaan uitlijnen, niet centreren: anders zakt de H1 mee met de hoogte van het beeld en verschilt de afstand per schermbreedte */
.svc-hero-cols,.svc-hero .sa-sticky,.svc-hero .wl-sticky{align-items:start}
/* hero: kleinere H1, zodat ze op desktop op 3 à 4 regels past en de knop boven de vouw blijft (buiten @layer, anders wint h-display) */
.ai-h1{font-size:clamp(36px,3.9vw,58px)}
/* pijnpunten: titels op één regel, ook in de smalle kolommen tussen 1024 en 1279px */
@media (min-width:1024px) and (max-width:1279px){
.pain-row{gap:20px}
.pain{padding:18px}
.pain h3{font-size:clamp(17px,1.62vw,21px)}
}
.svc-hero{margin-top:0px;margin-bottom:-32px}
@media (min-width:768px) and (max-width:1023px){
.svc-hero{margin-top:0px;margin-bottom:-32px}
}
@media (min-width:1024px){
.svc-hero{margin-top:0px;margin-bottom:-64px}
}
/* volgt er een blok met een gekleurde achtergrond, dan begint die achtergrond minstens 48/64px onder de hero; de titel van dat blok blijft op 112/144px door een kleinere bovenpadding */
.svc-next{padding-top:64px}
@media (min-width:768px) and (max-width:1023px){
.svc-next{padding-top:64px}
}
@media (min-width:1024px){
.svc-next{padding-top:80px}
}