/* EML AI Team, variant "premium" (3/11/2026).
   Een rustige controlekamer: veel ruimte, weinig effecten, precieze details. Huisstijl K07: merkachtergrond #0B1526 en de
   ink-tinten, Archivo, het verloop blauw-cyaan-mint alleen als signaal (hoofdknop, Chief of Staff, de uitgelichte kolom),
   knoppen met hoeken van 12px, witte tekst en een blauw glasachtig verloop. Het monospace lettertype alleen in het productscherm.
   Eén productbeeld (het scherm in de hero); interfacefragmenten dragen data-ui. Geen 3D, geen klok, geen ticker. */

@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url(../fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url(../fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/jetbrainsmono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* taste-skill-ignore: mono alleen in het productscherm (data-ui) */

/* een terugvallettertype met de maten van Archivo, zodat er niets verspringt als Archivo binnenkomt (CLS 0) */
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('Helvetica'),local('Arimo');size-adjust:102%;ascent-override:86.1%;descent-override:20.6%;line-gap-override:0%}

:root{
  /* ---- kleurrollen (Martijn, 3/11/2026: "Onze hoofdkleuren zijn dat blauw en groen", plus een derde kleur die erbij past).
     Alle kleuren komen uit huisstijl K07. Elke kleur heeft één betekenis, overal op de site en in het scherm:
     - blauw  (--action): wat je aanklikt. Knoppen, de keuze "Goedkeuren", de onderlijn van tekstlinks.
     - groen  (--ok):     goedgekeurd, klaar, gekozen. "Mag zelf", wat in je pakket zit, de vinkjes, "In mijn team".
     - cyaan  (--live):   de derde kleur, het midden van het verloop. Wat nu gebeurt of waar je bent: een agent is bezig,
                          de actieve sectie in de menubalk en het menu, de focusrand, de afdeling die je leest. Spaarzaam.
     - verloop (--grad):  blauw, cyaan, groen samen. Alleen als signaal: de Chief of Staff, de bovenrand van de uitgelichte
                          kolom, van je opzet, van het scherm, het menu en het venster.
     - achtergrond: donkerblauw (--bg #0B1526) voor de hero, de brief en de kop; zwart (de ink-tinten) voor de andere
                          secties. Ze wisselen af voor het ritme, er zitten geen lijnen tussen de secties. */
  --bg:#0b1526;
  --ink0:#06080c; --ink1:#090d14; --ink2:#0c111a; --ink3:#111825;
  --lift:#0f1a2d; --lift2:#142038;    /* een stap lichter dan --bg: het productscherm, je opzet, de uitgelichte kolom */
  --t:#f3f6fa; --white:#fff; --hi:#eef4f6; --mid:#aab8c2; --dim:#7c8a97;
  --line:rgba(150,200,210,.12); --line-2:rgba(150,200,210,.22);
  --blue:#2f7bff; --cyan:#13c7e6; --mint:#2ff0a6;
  --action:var(--blue); --ok:var(--mint); --live:var(--cyan);
  --ok-soft:rgba(47,240,166,.1); --ok-line:rgba(47,240,166,.45); --live-soft:rgba(19,199,230,.12);
  --grad:linear-gradient(100deg,#2f7bff,#13c7e6 48%,#2ff0a6); /* taste-skill-ignore: huisstijl K07: het verloop, alleen als signaal gebruikt */
  --paper:#eef4f6; --paper-ink:#06080c;
  --font:'Archivo','Archivo Fallback',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace; /* taste-skill-ignore: mono alleen in het productscherm (data-ui) */
  /* maat */
  --maxw:1360px; --gut:clamp(16px,3vw,40px); --bar:64px; --sec:clamp(96px,11vw,168px);
  /* vijf tekstgroottes op de pagina (plus de kleine tekst in het scherm) */
  --fs-display:clamp(52px,8.6vw,140px);  /* alleen de slotvraag */
  --fs-h1:clamp(34px,4.3vw,64px);        /* h1 en alle h2 */
  --fs-sub:clamp(24px,2.36vw,34px);      /* afdelingen, prijzen, je pakket, de uitspraak, het antwoord */
  --fs-lead:clamp(18px,1.4vw,20px);
  --fs-body:17px;
  --fs-small:15px;
  --fs-micro:14px;                       /* wettelijke regel en tekst in het scherm */
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 24px);-webkit-text-size-adjust:100%}
html.menu-open{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--t);font-family:var(--font);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;overflow-x:clip}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
::selection{background:rgba(47,123,255,.4);color:#fff}
:focus-visible{outline:2px solid var(--live);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* taste-skill-ignore: schermlezertekst, geen lijn */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.nw{white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:#1a52c2;color:#fff;font-weight:600;padding:10px 16px;border-radius:12px;transition:top .2s ease}
.skip:focus{top:10px}
html:not(.js) .js-only{display:none!important}

/* ---------- tekst ---------- */
.h2{font-weight:650;font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.022em;color:var(--white);text-wrap:balance;max-width:20ch}
.lead{margin-top:24px;max-width:60ch;color:var(--mid);font-size:var(--fs-lead);line-height:1.6}
.cap{margin-top:28px;font-size:var(--fs-small);line-height:1.55;color:var(--dim);max-width:70ch}
.sec{position:relative;padding:var(--sec) 0}

/* ---------- knoppen: 12px hoeken, witte tekst, blauw glasachtig verloop (K07) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:12px;
  background:linear-gradient(180deg,#3a85ff 0%,#2669ea 52%,#1a52c2 100%);color:#fff;font-weight:600;font-size:var(--fs-body);line-height:1.2;white-space:nowrap; /* taste-skill-ignore: huisstijl K07: knop met blauw glasachtig verloop */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.2); /* taste-skill-ignore: huisstijl K07: glansrand van de knop */
  transition:filter .2s ease,transform .2s var(--ease),box-shadow .2s ease}
.btn::before{content:"";position:absolute;inset:1px 1px 50%;border-radius:11px 11px 4px 4px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));pointer-events:none} /* taste-skill-ignore: huisstijl K07: knop met blauw glasachtig verloop, 12px hoeken */
.btn svg{width:16px;height:16px;flex:none;transition:transform .2s var(--ease)}
.btn:hover{filter:brightness(1.08)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px);filter:brightness(.96)}
.btn--sm{min-height:40px;padding:0 16px;font-size:15px}
.btn--lg{min-height:56px;padding:0 28px}
.btn--line{background:transparent;box-shadow:inset 0 0 0 1px rgba(150,200,210,.3);color:var(--t)} /* taste-skill-ignore: huisstijl K07: knop met blauw glasachtig verloop, 12px hoeken */
.btn--line::before{display:none}
.btn--line:hover{filter:none;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(150,200,210,.5)} /* taste-skill-ignore: huisstijl K07: knop met blauw glasachtig verloop, 12px hoeken */

/* ---------- kop: bovenaan in de kleur van de hero, bij het scrollen een donkere balk met lichte blur en een fijne lijn ---------- */
.bar{position:sticky;top:0;z-index:50;background:var(--bg);transition:background-color .3s ease,box-shadow .3s ease}
.bar.is-scrolled{background:rgba(6,8,12,.74);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--line)} /* taste-skill-ignore: de gevraagde balk bij het scrollen (Martijn, 3/11): donker, lichte blur, fijne lijn */
.bar:has(.menu[open]),.bar.menu-is-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--ink0);box-shadow:none} /* taste-skill-ignore: zet de blur juist uit als het menu open is */
.bar-in{display:flex;align-items:center;gap:12px;height:var(--bar)}
.lock{display:flex;align-items:center;flex:none;margin-right:auto;border-radius:8px}
.lock-logo{width:auto;height:32px}
.bar-nav{display:flex;gap:32px;margin-right:28px}
.bar-nav a{position:relative;font-size:var(--fs-small);color:var(--mid);padding:10px 0;transition:color .2s ease}
.bar-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--live);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease),background-color .2s ease}
.bar-nav a:hover{color:var(--white)}
.bar-nav a:hover::after{transform:scaleX(1);background:rgba(243,246,250,.35)}
.bar-nav a[aria-current="true"]{color:var(--white)}
.bar-nav a[aria-current="true"]::after{transform:scaleX(1);background:var(--live)}
.bar:has(.menu[open]) .bar-nav,.bar:has(.menu[open]) .bar-cta,.bar.menu-is-open .bar-nav,.bar.menu-is-open .bar-cta{visibility:hidden}
/* de knop: drie streepjes die netjes een kruisje worden */
.menu{flex:none}
.menu-btn{position:relative;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--t);transition:background-color .2s ease,box-shadow .2s ease}
.menu-btn:hover{background:rgba(255,255,255,.06)}
.menu-ic{position:relative;display:block;width:20px;height:12px}
.menu-ic i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease),width .35s var(--ease)}
.menu-ic i:first-child{top:2px}
.menu-ic i:last-child{top:8px;width:14px;left:auto}
.menu-btn:hover .menu-ic i:last-child{width:20px}
.menu[open] .menu-ic i:first-child{top:5px;transform:rotate(45deg)}
.menu[open] .menu-ic i:last-child{top:5px;width:20px;transform:rotate(-45deg)}
/* het menu: over het volle scherm, alleen onder 900 px (gsm en tablet). Vanaf 900 px staan de vier links en de knop in de
   balk en is er geen hamburger (Martijn, 3/11). Binnen de kop, achter de balk zelf. */
@media (min-width:900px){.menu{display:none}}
.menu:not([open]) .menu-panel{display:none}
.menu-panel{position:fixed;inset:0;z-index:-1;overflow-x:hidden;display:flex;flex-direction:column;background:var(--ink0);padding-top:var(--bar);overflow-y:auto;overscroll-behavior:contain}
.menu-panel::before{content:"";position:absolute;left:0;right:0;top:var(--bar);height:1px;background:var(--grad);opacity:.7} /* taste-skill-ignore: verloop als signaal: de bovenrand van het menu */
.menu-in{display:flex;flex-direction:column;flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(32px,7vh,72px) var(--gut) 28px}
.menu-nav{display:flex;flex-direction:column}
.menu-nav a{position:relative;display:flex;align-items:center;gap:16px;padding:10px 0;font-size:clamp(34px,8.6vw,48px);line-height:1.15;font-weight:650;letter-spacing:-.02em;color:var(--t);transition:color .2s ease}
.menu-nav a::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(150,200,210,.35);transition:background-color .2s ease,box-shadow .2s ease} /* taste-skill-ignore: legende: het bolletje toont de actieve sectie */
.menu-nav a:hover{color:var(--white)}
.menu-nav a:hover::before{box-shadow:inset 0 0 0 1.5px var(--t)} /* taste-skill-ignore: legende: het bolletje toont de actieve sectie */
.menu-nav a[aria-current="true"]::before{background:var(--live);box-shadow:none}
.menu-act{margin-top:clamp(32px,6vh,56px)}
.menu-act .btn{width:100%;max-width:420px}
.menu-foot{margin-top:auto;padding-top:40px;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-small);color:var(--mid)}
.menu-foot a{display:inline-flex;align-items:center;align-self:flex-start;min-height:40px;color:var(--t);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s ease}
.menu-foot a:hover{text-decoration-color:var(--action)}
.menu-foot a:last-child{color:var(--mid)}
/* binnenkomen: het paneel vervaagt in, de links schuiven gespreid omhoog; sluiten (site.js) vervaagt kort */
@keyframes menu-fade{from{opacity:0}to{opacity:1}}
@keyframes menu-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes menu-out{from{opacity:1}to{opacity:0}}
.menu[open] .menu-panel{animation:menu-fade .3s ease both}
.menu[open] .menu-nav a,.menu[open] .menu-act,.menu[open] .menu-foot{animation:menu-rise .55s var(--ease) both}
.menu[open] .menu-nav a:nth-child(1){animation-delay:.06s}
.menu[open] .menu-nav a:nth-child(2){animation-delay:.11s}
.menu[open] .menu-nav a:nth-child(3){animation-delay:.16s}
.menu[open] .menu-nav a:nth-child(4){animation-delay:.21s}
.menu[open] .menu-act{animation-delay:.28s}
.menu[open] .menu-foot{animation-delay:.34s}
.menu.is-closing .menu-panel{animation:menu-out .2s ease both}
/* minder beweging: alleen een korte fade */
@media (prefers-reduced-motion:reduce){
  .menu[open] .menu-panel{animation:menu-fade .2s ease both!important}
  .menu[open] .menu-nav a,.menu[open] .menu-act,.menu[open] .menu-foot{animation:none!important}
  .menu.is-closing .menu-panel{animation:menu-out .15s ease both!important}
  .menu-ic i{transition:none!important}
}

/* ---------- hero ---------- */
.hero{background:var(--bg);padding:clamp(32px,4.4vw,72px) 0 clamp(80px,9vw,140px)}
.hero-in{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:clamp(40px,5vw,80px);align-items:center}
.hero h1{font-weight:650;font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.024em;color:var(--white);text-wrap:balance}
.hero-lede{margin-top:28px;max-width:36ch;font-size:var(--fs-lead);line-height:1.6;color:var(--mid)}
.hero-act{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px}
.hero-fact{margin-top:24px;max-width:46ch;font-size:var(--fs-body);line-height:1.55;color:var(--mid)}
.hero-fact strong{color:var(--t);font-weight:600}
.ok{display:inline-flex;align-items:baseline;gap:8px;color:var(--t)}
.ok::before{content:"";flex:none;width:14px;height:14px;align-self:center;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2306080c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4'/%3E%3C/svg%3E") center/10px no-repeat}
.hero-fig{min-width:0}
.hero-cap{margin-top:16px;font-size:var(--fs-small);color:var(--dim)}

/* ---------- het productscherm (interfacefragment, data-ui) ---------- */
.app{position:relative;display:grid;grid-template-columns:172px minmax(0,1fr);grid-template-rows:48px auto;padding:0 8px 8px 0;border-radius:18px;background:var(--lift);
  box-shadow:0 0 0 1px rgba(150,200,210,.1),0 40px 90px -40px rgba(0,0,0,.7);font-size:14px;line-height:1.45} /* taste-skill-ignore: interfacefragment (data-ui): het scherm zweeft boven de pagina */
.app::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:var(--grad);opacity:.8} /* taste-skill-ignore: verloop als signaal: bovenrand van het scherm */
.app-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 10px 0 20px}
.app-title{font-size:14px;font-weight:600;color:var(--t)}
.app-now{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--mid);font-variant-numeric:tabular-nums} /* taste-skill-ignore: interfacefragment (data-ui) */
.app-dot{width:6px;height:6px;border-radius:50%;background:var(--mint)}
.app-side{padding:6px 14px 20px 14px}
.app-side-k{padding:0 10px 8px;font-size:13px;font-weight:600;color:var(--dim)}
.app-side li{display:flex;align-items:center;gap:9px;height:34px;padding:0 10px;border-radius:9px;font-size:14px;color:var(--mid);white-space:nowrap}
.app-side li.is-on{background:rgba(255,255,255,.06);color:var(--white);font-weight:600;box-shadow:inset 2px 0 0 var(--live)} /* taste-skill-ignore: interfacefragment (data-ui): de actieve afdeling */
.app-side .app-cos{margin-bottom:6px;color:var(--t)}
.app-side .app-cos::before{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(var(--lift),var(--lift)) padding-box,var(--grad) border-box;border:1.5px solid transparent;flex:none} /* taste-skill-ignore: interfacefragment (data-ui) */
.app-sheet{position:relative;display:flex;flex-direction:column;min-width:0;padding:20px 24px 0;border-radius:14px;background:var(--lift2);box-shadow:inset 0 0 0 1px rgba(150,200,210,.09)} /* taste-skill-ignore: interfacefragment (data-ui) */
.app-crumb{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;color:var(--dim);margin-bottom:20px}
.app-crumb span{color:var(--t);font-weight:600}
.app-crumb span::before{content:"/";margin-right:10px;color:var(--dim);font-weight:400}
.scr-feed{position:relative}
.scr-item{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding-bottom:22px}
.scr-item:not(:last-child)::before{content:"";position:absolute;left:15.5px;top:40px;bottom:6px;width:1px;background:rgba(150,200,210,.14)}
.scr-main{min-width:0}
.av{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#1d2b46;color:var(--t);font-size:13px;font-weight:650;letter-spacing:.02em}
.av--cos{background:linear-gradient(var(--lift2),var(--lift2)) padding-box,var(--grad) border-box;border:1.5px solid transparent} /* taste-skill-ignore: interfacefragment (data-ui) */
.scr-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#1d2b46;color:var(--mid)}
.scr-ic svg{width:17px;height:17px}
.scr-meta{display:flex;align-items:center;gap:10px;min-height:32px}
.scr-who{font-weight:600;color:var(--t);font-size:14px}
.scr-t{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums} /* taste-skill-ignore: interfacefragment (data-ui) */
.st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--mid)}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st--ok{color:var(--mint)}
.st--busy{color:var(--cyan)}
.st--new{color:#7fb0ff}
.scr-subj{margin-top:2px;font-weight:600;color:var(--t);font-size:15px}
.scr-prev{margin-top:2px;color:var(--mid);font-size:14px}
.scr-steps{margin-top:6px;display:grid;gap:5px}
.scr-steps li{position:relative;padding-left:24px;color:var(--mid);font-size:14px;transition:color .3s ease}
.scr-steps li::before{content:"";position:absolute;left:0;top:3.5px;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(150,200,210,.3);transition:background-color .3s ease,box-shadow .3s ease} /* taste-skill-ignore: interfacefragment (data-ui) */
.scr-steps li.is-on{color:var(--t)}
.scr-steps li.is-on::before{box-shadow:inset 0 0 0 1.5px var(--cyan)} /* taste-skill-ignore: interfacefragment (data-ui) */
.scr-steps li.is-done{color:var(--t)}
.scr-steps li.is-done::before{background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2306080c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:none} /* taste-skill-ignore: interfacefragment (data-ui) */
.file{display:inline-flex;align-items:center;gap:12px;margin-top:12px;padding:8px 14px 8px 8px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(150,200,210,.12);font-size:14px;color:var(--t);max-width:100%} /* taste-skill-ignore: interfacefragment (data-ui) */
.file small{display:block;color:var(--dim);font-size:13px}
.file-ic{display:grid;place-items:center;width:30px;height:36px;border-radius:4px;background:var(--paper);color:#1a52c2;flex:none}
.file-ic svg{width:16px;height:16px}
.scr-cos .scr-main{margin:-10px -12px 0;padding:10px 12px 14px;border-radius:12px;transition:background-color .35s ease,box-shadow .35s ease}
.scr.is-asking .scr-cos .scr-main{background:rgba(47,123,255,.07);box-shadow:inset 0 0 0 1px rgba(47,123,255,.28)} /* taste-skill-ignore: interfacefragment (data-ui) */
.scr-say{position:relative;min-height:66px}
.scr-q{color:var(--t);font-size:15px;line-height:1.45}
.dots{display:inline-flex;gap:4px;padding:10px 0}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--mid)}
.scr-dots{position:absolute;left:0;top:0;opacity:0}
.scr-act{margin-top:14px;display:grid;gap:10px}
.choice{display:flex;flex-wrap:wrap;gap:8px}
.ch{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:600;color:var(--t);box-shadow:inset 0 0 0 1px rgba(150,200,210,.3);transition:background-color .2s ease,box-shadow .2s ease,opacity .25s ease,transform .15s ease} /* taste-skill-ignore: interfacefragment (data-ui) */
.ch:hover{background:rgba(255,255,255,.06)}
.ch:active{transform:translateY(1px)}
.ch--yes{color:#fff;background:linear-gradient(180deg,#3a85ff,#2669ea 52%,#1a52c2);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.1)} /* taste-skill-ignore: huisstijl K07: knop met blauw glasachtig verloop, 12px hoeken */
.ch--yes:hover{background:linear-gradient(180deg,#4a90ff,#2f72f0 52%,#1d58cc)} /* taste-skill-ignore: huisstijl K07: knop met blauw glasachtig verloop, 12px hoeken */
.ch[aria-disabled="true"]{cursor:default;opacity:.4;pointer-events:none}
.ch.is-chosen{opacity:1}
.scr-reply{min-height:1.45em;font-size:14px;line-height:1.45;color:var(--mint)}
.scr.is-wait .scr-reply{color:var(--mid)}
.scr-log{display:flex;align-items:center;gap:12px;margin:auto -24px 0;padding:14px 24px;border-top:1px solid rgba(150,200,210,.1)} /* taste-skill-ignore: interfacefragment (data-ui) */
.scr-log-k{font-size:13px;font-weight:600;color:var(--dim)}
.scr-log-t{font-size:13px;color:var(--mid);min-width:0}
.scr-again{margin-left:auto;min-height:32px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--t);box-shadow:inset 0 0 0 1px rgba(150,200,210,.24);opacity:0;pointer-events:none;transition:opacity .3s ease,background-color .2s ease} /* taste-skill-ignore: tweede knop is een lijnknop (plan 04 §5.2) */
.scr-again:hover{background:rgba(255,255,255,.06)}
.scr.is-done .scr-again{opacity:1;pointer-events:auto}
.scr-empty{position:absolute;left:24px;right:24px;top:84px;text-align:center;font-size:13px;color:var(--dim);opacity:0;transition:opacity .3s ease;pointer-events:none}

/* afspelen (alleen met JavaScript: .is-live). Alles beweegt met opacity en transform op vaste plaatsen: CLS 0 */
.scr.is-live .scr-item{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.scr.is-live .scr-item.is-in{opacity:1;transform:none}
.scr.is-live.is-empty .scr-empty{opacity:1}
.scr.is-live .scr-q{opacity:0;transition:opacity .4s ease}
.scr.is-live.is-asking .scr-q{opacity:1}
.scr.is-live.is-typing .scr-dots{opacity:1}
.scr.is-live .choice{opacity:0;transition:opacity .35s ease}
.scr.is-live.is-asking .choice{opacity:1}
.scr.is-live .scr-file{opacity:0;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease}
.scr.is-live .scr-file.is-on{opacity:1;transform:none}
.scr.is-live .scr-item.is-hot .av:not(.av--cos){box-shadow:0 0 0 1.5px var(--cyan)} /* taste-skill-ignore: interfacefragment (data-ui) */
.scr.is-live .scr-agent .scr-t{transition:opacity .3s ease}
.scr.is-live .scr-agent:not(.is-done) .scr-t{opacity:0} /* taste-skill-ignore: interfacefragment (data-ui) */
@media (prefers-reduced-motion:no-preference){
  .scr.is-typing .dots i{animation:dot 1s infinite ease-in-out}
  .scr.is-typing .dots i:nth-child(2){animation-delay:.15s}
  .scr.is-typing .dots i:nth-child(3){animation-delay:.3s}
  .app-dot{animation:pulse 2.4s ease-in-out infinite}
}
@keyframes dot{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-2px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- zo werkt het: wat je doorgeeft en wat terugkomt ---------- */
.how{background:var(--ink1)}
.how-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.how-head{grid-column:1/-1}
.how-head,.plans-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.how-head .h2,.plans-head .h2{grid-column:1/span 6}
.how-head .lead,.plans-head .lead{grid-column:8/span 5;margin-top:0}
.how-list{grid-column:1/-1;margin-top:96px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:64px}
.how-step:nth-child(1){grid-column:1/span 6}
.how-step:nth-child(2){grid-column:4/span 6}
.how-step:nth-child(3){grid-column:7/span 6}
.how-cap{grid-column:7/span 6}
.statement{grid-column:1/span 10}
.how-say{font-size:20px;line-height:1.45;font-weight:500;color:var(--t);max-width:46ch}
.how-call{position:relative;margin-top:20px;padding:20px 22px;border-radius:14px;background:var(--ink3);font-size:15px;line-height:1.5}
.how-resp{margin:20px 0 0;padding:20px 22px;border-radius:14px;background:#0f1726;font-size:15px;line-height:1.5}
.how-resp--cos{background:var(--lift);box-shadow:inset 0 0 0 1px rgba(47,123,255,.24)} /* taste-skill-ignore: interfacefragment (data-ui) */
.how-text{color:var(--t);max-width:56ch}
.how-time{position:absolute;right:20px;bottom:18px;font-family:var(--mono);font-size:13px;color:var(--dim)} /* taste-skill-ignore: interfacefragment (data-ui) */
.how-who{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px;font-weight:600;color:var(--t)}
.how-who span:not(.av){font-weight:400;color:var(--dim)}
.how-who .av{width:30px;height:30px}
.how-resp--cos .av--cos{background:linear-gradient(var(--lift),var(--lift)) padding-box,var(--grad) border-box} /* taste-skill-ignore: interfacefragment (data-ui) */
.how-act{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-height:38px}
.how-reply{font-size:14px;color:var(--mint)}
.how-reply.is-wait{color:var(--mid)}
.voice{display:flex;align-items:center;gap:12px;margin-bottom:10px;color:var(--mid)}
.voice-play{width:28px;height:28px;padding:7px 6px 7px 8px;border-radius:50%;background:#22324f;fill:var(--t);flex:none}
.wave{display:flex;align-items:center;gap:3px;height:22px}
.wave i{display:block;width:3px;height:calc(var(--h) * 22px);border-radius:2px;background:rgba(170,184,194,.55)}
.voice-len{font-family:var(--mono);font-size:13px;color:var(--dim)} /* taste-skill-ignore: interfacefragment (data-ui) */
.how-cap{margin-top:24px}
.statement{margin-top:clamp(96px,10vw,152px)}
.statement p{font-size:var(--fs-sub);line-height:1.3;font-weight:500;letter-spacing:-.012em;color:var(--white);text-wrap:balance;max-width:44ch}

/* ---------- stel je team samen: links je opzet (blijft staan), rechts de afdelingen ---------- */
.team{background:var(--ink0)}
.team-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,104px);align-items:start}
.team-read{grid-column:2;grid-row:1;min-width:0}
.team-out{grid-column:1;grid-row:1;position:sticky;top:calc(var(--bar) + 32px);align-self:start}
.team-head{padding-bottom:24px}
.team-how{margin-top:16px;font-size:var(--fs-lead);color:var(--t)}
.dep{padding:72px 0 8px;scroll-margin-top:calc(var(--bar) + 24px)}
.dep-h{font-size:var(--fs-sub);line-height:1.15;font-weight:650;letter-spacing:-.015em;color:var(--white)}
.dep-agents{margin-top:10px;font-size:var(--fs-small);color:var(--mid)}
.dep-agents span,.dep-task span{color:var(--dim);font-weight:600;margin-right:6px}
.dep-task{margin-top:22px;font-size:var(--fs-lead);line-height:1.55;color:var(--t);max-width:52ch}
.dep-task span{display:block;font-size:var(--fs-small);margin-bottom:4px}
.mandate{margin-top:28px;display:grid;gap:14px}
.m{display:grid;grid-template-columns:200px minmax(0,1fr);gap:4px 24px;align-items:baseline}
.m dt{font-size:var(--fs-small);font-weight:600;color:var(--t)}
.m dt::before{content:"";display:inline-block;vertical-align:.05em;margin-right:10px;width:9px;height:9px;border-radius:50%}
.m--ok dt{color:var(--ok)}
.m--ok dt::before{background:var(--ok)}
.m--ask dt::before{box-shadow:inset 0 0 0 1.5px var(--mid)} /* taste-skill-ignore: bedieningselement of legende, geen kader rond inhoud */
.m--no dt::before{border-radius:2px;height:2px;width:9px;vertical-align:.3em;background:var(--dim)}
.m dd{font-size:var(--fs-body);line-height:1.55;color:var(--mid)}
.pick{margin-top:32px;display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 18px 0 12px;border-radius:12px;font-size:15px;font-weight:600;color:var(--t);box-shadow:inset 0 0 0 1px rgba(150,200,210,.26);transition:box-shadow .2s ease,background-color .2s ease} /* taste-skill-ignore: bedieningselement of legende, geen kader rond inhoud */
.pick:hover{box-shadow:inset 0 0 0 1px rgba(150,200,210,.5)} /* taste-skill-ignore: bedieningselement of legende, geen kader rond inhoud */
.pick-box{position:relative;width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1.5px rgba(150,200,210,.5);transition:background-color .2s ease,box-shadow .2s ease} /* taste-skill-ignore: bedieningselement of legende, geen kader rond inhoud */
.pick[aria-pressed="true"]{background:var(--ok-soft);box-shadow:inset 0 0 0 1px var(--ok-line)} /* taste-skill-ignore: bedieningselement of legende, geen kader rond inhoud */
.pick[aria-pressed="true"] .pick-box{background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2306080c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:none} /* taste-skill-ignore: bedieningselement of legende, geen kader rond inhoud */
.team-coda{margin-top:88px;font-size:var(--fs-lead);line-height:1.55;color:var(--mid);max-width:52ch}
.out{padding:36px 36px 32px;border-radius:20px;background:var(--bg);position:relative}
.out::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:var(--grad)} /* taste-skill-ignore: verloop als signaal: bovenrand van je opzet */
.out-pack{display:flex;flex-direction:column;gap:6px}
.out-sub{font-size:var(--fs-small);color:var(--mid)}
.b-name{font-size:var(--fs-sub);line-height:1.1;font-weight:650;letter-spacing:-.02em;color:var(--white)}
.b-price{margin-top:22px;font-size:var(--fs-lead);line-height:1.3;font-weight:600;color:var(--t);font-variant-numeric:tabular-nums}
.b-price span{display:block;font-weight:500;color:var(--mid);font-size:var(--fs-body)}
.b-note{margin-top:14px;font-size:var(--fs-small);line-height:1.55;color:var(--mid)}
.b-agents{margin-top:22px;display:grid;gap:10px}
.b-agents li{font-size:var(--fs-small);line-height:1.45;color:var(--mid);padding-left:14px;position:relative;transition:color .3s ease}
.b-agents li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ok);transition:background-color .3s ease,box-shadow .3s ease}
.b-agents li.is-cur{color:var(--t)}
.b-agents li.is-cur::before{background:var(--live);box-shadow:0 0 0 3px var(--live-soft)} /* taste-skill-ignore: legende: de afdeling die je nu leest */
.b-agents b{display:block;color:var(--t);font-weight:600}
.b-terms{margin-top:22px;font-size:var(--fs-small);line-height:1.55;color:var(--dim)}
.out .btn{margin-top:26px;width:100%}
@media (min-width:1100px) and (max-height:860px){.out{padding:28px 30px 26px}.b-note,.b-terms{display:none}.b-agents{margin-top:16px;gap:8px}}
.pick-out{display:none}

/* ---------- prijzen: vier pakketten als één grote tabel ---------- */
.plans{background:var(--ink1)}

.ptab{margin-top:72px;display:grid;grid-template-columns:minmax(0,.72fr) repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto 1fr auto;column-gap:8px}
.ptab-k,.plan{grid-row:1/span 5;display:grid;grid-template-rows:subgrid}
.ptab-k{grid-column:1;padding:28px 0}
.ptab-k span{font-size:var(--fs-small);color:var(--dim);font-weight:600;padding-top:6px}
.ptab-k span:nth-child(2){padding-top:18px}
.plan{position:relative;padding:28px 24px 28px;border-radius:18px}
.plan--hi{background:var(--lift)}
.plan--hi::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:var(--grad)} /* taste-skill-ignore: plan 04 §5.3.2: rand van 1px in het verloop bovenaan de uitgelichte kolom */
.plan-h{font-size:var(--fs-lead);font-weight:600;color:var(--t)}
.plan-fig{margin-top:14px;font-size:var(--fs-sub);line-height:1.05;font-weight:650;letter-spacing:-.02em;color:var(--white);font-variant-numeric:tabular-nums}
.plan-fig small{font-size:var(--fs-small);font-weight:500;letter-spacing:0;color:var(--mid);margin-right:2px}
.plan-fig span{display:block;margin-top:8px;font-size:var(--fs-small);font-weight:400;letter-spacing:0;color:var(--mid)}
.plan-mo{margin-top:14px;font-size:var(--fs-body);font-weight:600;color:var(--t);font-variant-numeric:tabular-nums;min-height:1.4em}
.plan-list{margin-top:26px;display:grid;gap:12px;align-content:start}
.plan-list li{position:relative;padding-left:18px;font-size:var(--fs-small);line-height:1.5;color:var(--mid)}
.plan-list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1.5px;background:var(--ok)}
.plan--hi .plan-list li{color:var(--hi)}
.plan--hi .plan-mo{color:var(--ok)}
.plan-go{margin-top:30px}
.plan-go .btn{width:100%;white-space:normal;text-align:center}
/* zwart op wit: het enige lichte vlak op de pagina */
.terms{margin-top:clamp(72px,8vw,112px);display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,72px);padding:clamp(28px,4.4vw,64px);border-radius:20px;background:var(--paper);color:var(--paper-ink)}
.terms-h{grid-column:1/-1;margin-bottom:28px;font-size:var(--fs-sub);font-weight:650;letter-spacing:-.015em;color:var(--paper-ink)}
.terms-list{display:grid;gap:16px;align-content:start}
.terms-list li{position:relative;padding-left:22px;font-size:var(--fs-body);line-height:1.55;color:#1b2531}
.terms-list li::before{content:"";position:absolute;left:0;top:.74em;width:9px;height:1.5px;background:#5b6b7a}

/* ---------- wij werken zelf zo: een brief ---------- */
.own{background:var(--bg)}
.own-in{max-width:calc(720px + 2 * var(--gut))}
.letter{margin-top:48px}
.letter p{font-size:var(--fs-lead);line-height:1.7;color:var(--hi)}
.letter p+p{margin-top:1.05em}
.letter strong{color:var(--white);font-weight:600}
.letter .sign{margin-top:44px;display:flex;flex-direction:column;gap:4px}
.sign-n{font-size:var(--fs-lead);font-weight:600;letter-spacing:-.01em;color:var(--white)}
.sign-r{font-size:var(--fs-small);color:var(--mid)}
.ask{margin-top:56px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;font-size:var(--fs-small);color:var(--mid)}
.ask a{color:var(--t);text-decoration:underline;text-decoration-color:var(--action);text-underline-offset:4px;transition:text-decoration-color .2s ease}
.ask a:hover{text-decoration-color:var(--t)}

/* ---------- vragen ---------- */
.faqs{background:var(--ink1)}
.faq{margin-top:56px;max-width:880px}
.q summary{position:relative;display:block;padding:22px 56px 22px 0;font-size:var(--fs-lead);line-height:1.4;font-weight:600;color:var(--t);border-radius:8px}
.q summary::before,.q summary::after{content:"";position:absolute;right:8px;top:50%;width:16px;height:1.5px;background:var(--mid);transition:transform .3s var(--ease)}
.q summary::after{transform:rotate(90deg)}
.q[open] summary::after{transform:rotate(0)}
.q summary:hover{color:var(--white)}
.a{padding:0 56px 26px 0}
.a p{font-size:var(--fs-body);line-height:1.65;color:var(--mid);max-width:62ch}
/* met JavaScript op een breed scherm: links de vragen, rechts het antwoord */
.faq.is-index{max-width:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.faq.is-index>details{display:none}
.faq:not(.is-index) .faq-ix,.faq:not(.is-index) .faq-pane{display:none}
.faq-ix{grid-column:1/span 5;display:grid;gap:4px;align-content:start}
.faq-ix button{position:relative;display:flex;align-items:baseline;gap:16px;width:100%;text-align:left;padding:12px 0;font-size:var(--fs-lead);line-height:1.4;color:var(--mid);border-radius:8px;transition:color .2s ease}
.faq-ix button::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:rgba(150,200,210,.3);transform:translateY(-2px);transition:background-color .2s ease}
.faq-ix button:hover{color:var(--t)}
.faq-ix button[aria-selected="true"]{color:var(--white);font-weight:600}
.faq-ix button[aria-selected="true"]::before{background:var(--live)}
.faq-pane{grid-column:7/span 6;position:sticky;top:calc(var(--bar) + 48px);align-self:start;padding-top:8px}
.faq-pane-q{font-size:var(--fs-sub);line-height:1.2;font-weight:650;letter-spacing:-.015em;color:var(--white);max-width:24ch}
.faq-pane-a{margin-top:16px;font-size:var(--fs-lead);line-height:1.65;color:var(--hi);max-width:48ch;transition:opacity .15s ease}
.faq-pane.is-swap .faq-pane-a{opacity:0}

/* ---------- slot ---------- */
.close{background:var(--ink0);padding:clamp(112px,13vw,200px) 0 clamp(104px,11vw,176px);text-align:center}
.close-h{font-size:var(--fs-display);line-height:.98;font-weight:700;letter-spacing:-.035em;color:var(--white)}
.close-h span{display:block;width:fit-content;margin:0 auto}
.close-q{margin:56px auto 0;font-size:var(--fs-lead);line-height:1.5;font-weight:500;color:var(--t);max-width:40ch}
.close-act{margin-top:36px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 24px}
.close-or{font-size:var(--fs-small);color:var(--dim)}
.close-lede{margin:40px auto 0;max-width:58ch;font-size:var(--fs-small);line-height:1.6;color:var(--mid)}
.close-facts{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-size:var(--fs-small);color:var(--mid)}
.close-facts li{display:inline-flex;align-items:center;gap:8px}
.close-facts li::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2306080c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4'/%3E%3C/svg%3E") center/10px no-repeat}

/* ---------- footer ---------- */
.foot{background:var(--ink1);padding:72px 0 40px}
.foot-top{display:flex;align-items:center;gap:28px}
.foot-lock{flex:none;border-radius:8px}
.foot-lock .lock-logo{height:40px}
.foot-tag{font-size:var(--fs-small);color:var(--mid);max-width:52ch}
.foot-tag a,.foot-contact a,.foot-nav a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s ease,color .2s ease}
.foot-tag a{color:var(--t)}
.foot-tag a:hover,.foot-contact a:hover,.foot-nav a:hover{text-decoration-color:var(--action)}
.foot-mid{margin-top:48px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 28px}
.foot-nav a{display:inline-flex;align-items:center;min-height:40px;font-size:var(--fs-small);color:var(--t)}
.foot-contact{display:flex;flex-wrap:wrap;gap:4px 24px;align-items:center;font-size:var(--fs-small);color:var(--mid)}
.foot-contact a{display:inline-flex;align-items:center;min-height:40px;color:var(--t)}
.foot-legal{margin-top:36px;font-size:var(--fs-micro);line-height:1.6;color:var(--dim)}

/* ---------- beweging: één keer bij het laden en bij het in beeld komen, alleen met JavaScript ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-load]{animation:rise .7s var(--ease) both;animation-delay:var(--d,0ms)}
  .js [data-reveal]:not(.is-in){opacity:0;transform:translateY(24px)}
  .js [data-reveal]{transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js .how-head[data-reveal]>*,.js .team-head[data-reveal]>*,.js .plans-head[data-reveal]>*{transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js .how-head[data-reveal]:not(.is-in)>*,.js .team-head[data-reveal]:not(.is-in)>*,.js .plans-head[data-reveal]:not(.is-in)>*{opacity:0;transform:translateY(18px)}
  .js [data-reveal]>:nth-child(2){transition-delay:80ms}
  .js [data-reveal]>:nth-child(3){transition-delay:160ms}
  .js .ptab[data-reveal]>.plan{transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js .ptab[data-reveal]:not(.is-in)>.plan{opacity:0;transform:translateY(20px)}
  .js .ptab[data-reveal]>.plan:nth-child(3){transition-delay:70ms}
  .js .ptab[data-reveal]>.plan:nth-child(4){transition-delay:140ms}
  .js .ptab[data-reveal]>.plan:nth-child(5){transition-delay:210ms}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ---------- tablet ---------- */
@media (max-width:1240px){
  .app{grid-template-columns:160px minmax(0,1fr)}
  .app-side{padding-left:10px;padding-right:10px}
  .app-side li{font-size:13px;padding:0 8px}
}
@media (max-width:1180px){
  .how-step:nth-child(1){grid-column:1/span 7}
  .how-step:nth-child(2){grid-column:3/span 7}
  .how-step:nth-child(3){grid-column:5/span 8}
  .how-cap{grid-column:5/span 8}
}
@media (max-width:1099px){
  :root{--fs-h1:clamp(34px,6.2vw,52px)}
  .btn--sm{min-height:44px}
  .hero-in{grid-template-columns:1fr;gap:56px}
  .hero-copy{max-width:640px}
  .team-in{grid-template-columns:1fr}
  .team-read,.team-out{grid-column:1;grid-row:auto}
  .team-out{position:static;margin-top:56px}
  .pick-out{display:block;margin-top:12px;font-size:var(--fs-small);color:var(--mid)}
  .how-head,.plans-head{display:block}
  .how-head .lead,.plans-head .lead{margin-top:24px}
  .ptab{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:16px}
  .ptab-k{display:none}
  .plan{grid-row:auto;display:flex;flex-direction:column;background:var(--ink2)}
  .plan--hi{background:var(--lift)}
  .plan-list{flex:1}
  .faq.is-index{display:block}
}
@media (max-width:899.98px){.bar-nav{display:none}}
@media (max-width:900px){
  .how-in,.how-list{display:block}
  .how-step+.how-step{margin-top:56px}
}

/* ---------- gsm ---------- */
@media (max-width:720px){
  :root{--bar:60px}
  .lock-logo{height:30px}
  .hero{padding-top:36px}
  .hero-lede{margin-top:20px}
  .hero-act{margin-top:28px}
  .app{grid-template-columns:1fr;grid-template-rows:44px auto;padding:0 6px 6px}
  .app-side{display:none}
  .app-top{padding:0 6px 0 12px}
  .app-sheet{padding:16px 16px 0}
  .scr-log{margin:auto -16px 0;padding:12px 16px}
  .scr-empty{left:16px;right:16px}
  .scr-item{grid-template-columns:28px minmax(0,1fr);gap:12px}
  .scr-item .av,.scr-ic{width:28px;height:28px}
  .scr-item:not(:last-child)::before{left:13.5px;top:36px}
  .scr-t{display:none}
  .how-list{margin-top:56px}
  .how-resp{margin-left:0}
  .how-say{font-size:var(--fs-lead)}
  .statement p{font-size:var(--fs-lead);line-height:1.45}
  .dep{padding-top:56px}
  .m{grid-template-columns:1fr}
  .ptab{grid-template-columns:1fr}
  .terms{grid-template-columns:1fr;row-gap:16px}
  .terms-h{margin-bottom:12px}
  .out{padding:28px 22px 24px}
  .q summary{padding-right:44px}
  .a{padding-right:0}
  .close-act{flex-direction:column;align-items:stretch;max-width:340px;margin-left:auto;margin-right:auto}
  .close-act .btn{width:100%}
  .foot-top{flex-direction:column;align-items:flex-start;gap:20px}
  .foot-mid{flex-direction:column}
}
/* 320 px: lange knopteksten mogen afbreken, zodat niets buiten het scherm valt */
@media (max-width:420px){
  .btn{white-space:normal;text-align:center}
  .bar .btn--sm{padding:0 14px;font-size:var(--fs-micro)}
  .file{padding-right:10px}
}

/* ================= ronde 3 (3/11/2026): kleur, glas en cyaan =================
   Martijn: "Verwerk er meer groen in met kleurrijke achtergronden en het cyaan moet meer opvallen en ik wil meer glass effecten."
   Huisstijl K07: "Donker, tech, glass-effect (half doorzichtige donkere vlakken)".
   - Kleurvelden: alleen CSS-verlopen (radiaal) op de donkere basis, per sectie een eigen compositie; groen deelt de hoofdrol met
     blauw. Geen afbeeldingen, geen filter: blur (de verlopen zijn al zacht). Alleen het slot beweegt heel traag (niet bij minder
     beweging). Een fijne korrel (kleine SVG) op de hero en het slot.
   - Glas: half doorzichtig, backdrop-filter blur en saturate, een lichte rand bovenaan en een zachte schaduw. Zonder
     backdrop-filter (@supports) een effen donker vlak. Op de gsm minder blur-lagen (alleen balk, menu, scherm, je opzet, Groei,
     venster), de rest is daar half doorzichtig zonder blur, zodat scrollen vloeiend blijft.
   - Cyaan valt op: korte labels boven de secties, één kernwoord per titel in het verloop, cyaan randen en gloed op het actieve
     scherm, de afdeling die je leest, de focus en de hover van de glasvlakken, en de iconen. Knoppen blijven blauw (K07). */
:root{
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02)),rgba(12,20,36,.52); /* taste-skill-ignore: glas (K07) */
  --glass-blur:blur(20px) saturate(1.5);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07);
  --glass-drop:0 30px 80px -32px rgba(0,0,0,.7);
  --glow-live:0 0 0 1px rgba(19,199,230,.5),0 0 48px -12px rgba(19,199,230,.55);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- labels boven de secties en het kernwoord in de titel ---- */
.kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;font-size:var(--fs-small);font-weight:600;line-height:1.3;color:var(--live)} /* taste-skill-ignore: cyaan label boven de sectie (Martijn, ronde 3) */
.kicker::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 4px rgba(19,199,230,.16),0 0 16px rgba(19,199,230,.9)} /* taste-skill-ignore: cyaan label (Martijn, ronde 3) */
.kicker--c{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
.how-head .kicker,.plans-head .kicker{grid-column:1/span 6;grid-row:1} /* taste-skill-ignore: cyaan label boven de sectie (Martijn, ronde 3) */
.how-head .h2,.plans-head .h2,.how-head .lead,.plans-head .lead{grid-row:2}
.kw{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone} /* taste-skill-ignore: kernwoord in het verloop (Martijn, ronde 3) */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.kw{background:none;color:var(--live)}} /* taste-skill-ignore: terugval voor het kernwoord */

/* ---- de kleurvelden per sectie ---- */
/* overflow: clip houdt de gloed binnen de sectie (geen zijwaarts scrollen) en laat position: sticky werken */
.hero,.how,.team,.plans,.own,.faqs{overflow:clip}
.hero{position:relative;isolation:isolate;background:linear-gradient(180deg,rgba(9,13,20,0) 0,rgba(9,13,20,0) calc(100% - 200px),var(--ink1) 100%),var(--grain),radial-gradient(48% 60% at 80% 44%,rgba(47,240,166,.24),rgba(47,240,166,0) 72%),radial-gradient(36% 48% at 97% 4%,rgba(19,199,230,.3),rgba(19,199,230,0) 72%),radial-gradient(42% 52% at 0% 100%,rgba(47,123,255,.2),rgba(47,123,255,0) 72%),var(--bg)} /* taste-skill-ignore: kleurveld (Martijn, ronde 3) */
html.js body:has(.hero) .bar:not(.is-scrolled):not(.menu-is-open){background:transparent}
html.js body:has(.hero) .hero{margin-top:calc(-1 * var(--bar));padding-top:calc(var(--bar) + clamp(32px,4.4vw,72px))}
.hero-fig{position:relative}
.hero-fig::before{content:"";position:absolute;inset:-20% -18% -14% -22%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side at 54% 50%,rgba(47,240,166,.3),rgba(19,199,230,.14) 58%,rgba(19,199,230,0))} /* taste-skill-ignore: gloed achter het scherm */
.how{background:linear-gradient(180deg,var(--ink1) 0,rgba(9,13,20,0) 180px,rgba(9,13,20,0) calc(100% - 180px),var(--ink1) 100%),radial-gradient(900px 640px at 8% 26%,rgba(47,123,255,.26),rgba(47,123,255,0) 72%),radial-gradient(820px 620px at 96% 58%,rgba(19,199,230,.16),rgba(19,199,230,0) 72%),radial-gradient(700px 420px at 55% 100%,rgba(47,240,166,.09),rgba(47,240,166,0) 72%),var(--ink1)} /* taste-skill-ignore: kleurveld */
.team{isolation:isolate;background:linear-gradient(180deg,var(--ink1) 0,rgba(9,13,20,0) 180px,rgba(9,13,20,0) calc(100% - 180px),var(--ink1) 100%),radial-gradient(760px 620px at 14% 10%,rgba(47,240,166,.18),rgba(47,240,166,0) 72%),radial-gradient(720px 620px at 94% 30%,rgba(47,240,166,.1),rgba(47,240,166,0) 72%),radial-gradient(720px 620px at 4% 64%,rgba(19,199,230,.1),rgba(19,199,230,0) 72%),radial-gradient(760px 700px at 100% 55%,rgba(19,199,230,.1),rgba(19,199,230,0) 72%),radial-gradient(760px 620px at 0% 100%,rgba(47,123,255,.13),rgba(47,123,255,0) 72%),var(--ink1)} /* taste-skill-ignore: kleurveld */
.team-out::before{content:"";position:absolute;inset:-14% -18%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side at 46% 44%,rgba(47,240,166,.26),rgba(19,199,230,.12) 60%,rgba(19,199,230,0))} /* taste-skill-ignore: gloed achter je opzet, reist mee */
.plans{isolation:isolate;background:linear-gradient(180deg,var(--ink1) 0,rgba(9,13,20,0) 180px,rgba(9,13,20,0) calc(100% - 180px),var(--ink1) 100%),radial-gradient(1000px 760px at 68% 66%,rgba(47,240,166,.22),rgba(47,240,166,0) 72%),radial-gradient(760px 560px at 100% 0%,rgba(19,199,230,.13),rgba(19,199,230,0) 72%),radial-gradient(860px 640px at 0% 92%,rgba(47,123,255,.14),rgba(47,123,255,0) 72%),var(--ink1)} /* taste-skill-ignore: kleurveld */
.ptab{position:relative}
.ptab::before{content:"";position:absolute;grid-column:4;grid-row:1/-1;inset:-90px -110px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(47,240,166,.44),rgba(19,199,230,.14) 62%,rgba(19,199,230,0))} /* taste-skill-ignore: groene gloed achter Groei */
.own{background:linear-gradient(180deg,var(--ink1) 0,rgba(11,21,38,0) 220px,rgba(11,21,38,0) calc(100% - 220px),var(--ink1) 100%),radial-gradient(800px 620px at 88% 16%,rgba(19,199,230,.15),rgba(19,199,230,0) 72%),radial-gradient(860px 700px at 6% 92%,rgba(47,240,166,.18),rgba(47,240,166,0) 72%),var(--bg)} /* taste-skill-ignore: kleurveld */
.faqs{background:linear-gradient(180deg,var(--ink1) 0,rgba(9,13,20,0) 180px,rgba(9,13,20,0) calc(100% - 180px),var(--ink1) 100%),radial-gradient(860px 640px at 82% 64%,rgba(19,199,230,.15),rgba(19,199,230,0) 72%),radial-gradient(700px 520px at 0% 0%,rgba(47,123,255,.13),rgba(47,123,255,0) 72%),radial-gradient(600px 400px at 30% 100%,rgba(47,240,166,.08),rgba(47,240,166,0) 72%),var(--ink1)} /* taste-skill-ignore: kleurveld */
/* het slot: het meest kleurrijke moment (een aurora die heel traag beweegt) */
.close{position:relative;isolation:isolate;overflow:hidden;background:var(--ink0)}
.close::before{content:"";position:absolute;inset:-20% -14%;z-index:-2;pointer-events:none;background:radial-gradient(32% 46% at 16% 40%,rgba(47,240,166,.48),rgba(47,240,166,0) 72%),radial-gradient(30% 46% at 86% 34%,rgba(19,199,230,.48),rgba(19,199,230,0) 72%),radial-gradient(30% 30% at 84% 6%,rgba(47,123,255,.4),rgba(47,123,255,0) 72%),radial-gradient(34% 34% at 8% 90%,rgba(47,123,255,.38),rgba(47,123,255,0) 72%),radial-gradient(34% 32% at 92% 92%,rgba(47,240,166,.36),rgba(47,240,166,0) 72%)} /* taste-skill-ignore: aurora van het slot */
.close::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--ink1) 0,rgba(9,13,20,0) 200px,rgba(6,8,12,0) calc(100% - 160px),var(--ink0) 100%),var(--grain),radial-gradient(36% 48% at 50% 52%,rgba(6,8,12,.62),rgba(6,8,12,0) 82%)} /* taste-skill-ignore: korrel en een donkere kern achter de tekst */
@media (prefers-reduced-motion:no-preference){
  .close::before{animation:aurora 36s ease-in-out infinite alternate;will-change:transform}
}
@keyframes aurora{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.06)}}
.close-q,.close-lede{color:var(--hi)}
.close-facts{color:var(--hi)}
.foot{background:radial-gradient(900px 260px at 50% 0%,rgba(19,199,230,.1),rgba(19,199,230,0) 72%),var(--ink0)} /* taste-skill-ignore: kleurveld */

/* ---- glas ---- */
.app,.out,.plan,.how-call,.how-resp,.faq-pane,.faq:not(.is-index){background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge),var(--glass-drop)} /* taste-skill-ignore: glas (K07, Martijn ronde 3) */
.app{transition:box-shadow .6s ease}
.app.is-asking{box-shadow:var(--glass-edge),var(--glass-drop),0 0 0 1px rgba(19,199,230,.42),0 0 90px -24px rgba(19,199,230,.5)} /* taste-skill-ignore: cyaan gloed op het actieve scherm */
.app-sheet{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)),rgba(14,24,43,.74);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(150,200,210,.08)} /* taste-skill-ignore: interfacefragment (data-ui) */
.scr-ic{background:rgba(19,199,230,.14);color:var(--live)}
/* kleine tekst in het scherm en het bijschrift: een tint lichter, want het glas laat de gloed door */
.app-crumb,.scr-t,.file small,.app-side-k,.scr-log-k,.hero-cap,.how-time,.voice-len,.dep-agents span,.dep-task span,.b-terms,.how-who span:not(.av),.cap{color:var(--mid)}
.file-ic{background:rgba(19,199,230,.16);color:var(--live)}
.voice-play{background:rgba(19,199,230,.18);fill:var(--live)}
.scr.is-asking .scr-cos .scr-main{background:rgba(19,199,230,.07);box-shadow:inset 0 0 0 1px rgba(19,199,230,.38)} /* taste-skill-ignore: interfacefragment (data-ui) */

.how-call,.how-resp,.plan{transition:box-shadow .3s ease}
.how-call:hover,.how-resp:hover,.plan:hover,.faq-pane:hover{box-shadow:var(--glass-edge),var(--glass-drop),var(--glow-live)} /* taste-skill-ignore: cyaan rand bij hover van het glas */
.how-resp--cos{box-shadow:var(--glass-edge),var(--glass-drop),0 0 0 1px rgba(19,199,230,.36),0 0 60px -22px rgba(19,199,230,.5)} /* taste-skill-ignore: cyaan rand op de vraag van de Chief of Staff */
.how-resp--cos .av--cos{background:linear-gradient(#13203a,#13203a) padding-box,var(--grad) border-box} /* taste-skill-ignore: interfacefragment (data-ui) */
.plan{padding:28px 24px}
.plan--hi{background:linear-gradient(180deg,rgba(47,240,166,.13),rgba(47,240,166,.03)),rgba(10,24,32,.5);box-shadow:var(--glass-edge),0 0 0 1px rgba(47,240,166,.34),0 30px 90px -30px rgba(47,240,166,.4)} /* taste-skill-ignore: Groei als groen glas */
.plan--hi:hover{box-shadow:var(--glass-edge),0 0 0 1px rgba(47,240,166,.5),0 30px 90px -26px rgba(47,240,166,.5)} /* taste-skill-ignore: Groei als groen glas */
.faq-pane{padding:32px 36px;border-radius:20px}
.faq:not(.is-index){padding:4px 28px;border-radius:20px}
.q summary::before,.q summary::after{background:var(--live)}
/* de afdeling die je leest: een cyaan lijn met gloed */
.dep{position:relative}
.dep::before{content:"";position:absolute;left:-28px;top:76px;bottom:12px;width:2px;border-radius:2px;background:var(--live);box-shadow:0 0 16px rgba(19,199,230,.8);opacity:0;transition:opacity .45s ease} /* taste-skill-ignore: cyaan markering van de afdeling die je leest */
.dep.is-cur::before{opacity:1}
/* zwart op wit wordt licht glas: de kleur schemert erdoor */
.terms{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(238,244,246,.86));-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 1px 0 #fff,0 40px 110px -40px rgba(47,240,166,.45)} /* taste-skill-ignore: licht glasvlak (Martijn, ronde 3) */
/* de menubalk bij het scrollen en het menu: glas */
.bar.is-scrolled{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),rgba(8,12,20,.56);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 -1px 0 rgba(150,200,210,.14),0 10px 30px -18px rgba(0,0,0,.6)} /* taste-skill-ignore: glas van de menubalk */
.menu-panel{background:radial-gradient(620px 520px at 100% 100%,rgba(47,240,166,.26),rgba(47,240,166,0) 72%),radial-gradient(540px 420px at 0% 12%,rgba(19,199,230,.2),rgba(19,199,230,0) 72%),rgba(6,8,12,.76);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5)} /* taste-skill-ignore: glas van het menu */
.bar:has(.menu[open]),.bar.menu-is-open,.bar.is-scrolled.menu-is-open{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none} /* taste-skill-ignore: blur uit als het menu open is */

/* gsm en tablet: minder blur-lagen; Groei houdt zijn gloed zonder de tabel */
@media (max-width:1099px){
  .ptab::before{display:none}
  .plan{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(12,20,36,.62)} /* taste-skill-ignore: glas zonder blur op kleine schermen */
  .plan--hi{background:linear-gradient(180deg,rgba(47,240,166,.14),rgba(47,240,166,.04)),rgba(10,24,32,.62)} /* taste-skill-ignore: Groei als groen glas */
  .dep::before{left:-12px}
}
@media (max-width:720px){
  .plan:not(.plan--hi),.how-call,.how-resp,.faq:not(.is-index),.terms{-webkit-backdrop-filter:none;backdrop-filter:none} /* taste-skill-ignore: zet de blur juist uit op de gsm */
  .how-call,.how-resp,.faq:not(.is-index){background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(14,22,38,.72)} /* taste-skill-ignore: glas zonder blur op de gsm */
  .faq:not(.is-index){padding:2px 18px}
  .terms{background:linear-gradient(180deg,#fff,#eef4f6)} /* taste-skill-ignore: licht vlak zonder blur op de gsm */
  .hero-fig::before{inset:-10% -20% -6% -20%}
  /* gsm: de aurora van het slot naar de hoeken, zodat de titel leesbaar blijft */
  .close::before{inset:-10% -30%;background:radial-gradient(40% 30% at 18% 6%,rgba(47,240,166,.44),rgba(47,240,166,0) 72%),radial-gradient(40% 30% at 86% 14%,rgba(19,199,230,.44),rgba(19,199,230,0) 72%),radial-gradient(44% 30% at 10% 96%,rgba(47,123,255,.4),rgba(47,123,255,0) 72%),radial-gradient(44% 30% at 90% 92%,rgba(47,240,166,.36),rgba(47,240,166,0) 72%)} /* taste-skill-ignore: aurora van het slot */
}
/* zonder blur-ondersteuning: effen donkere vlakken die leesbaar blijven */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ /* taste-skill-ignore: terugval zonder blur */
  .app,.out,.plan,.how-call,.how-resp,.faq-pane,.faq:not(.is-index){background:#0f1a2d}
  .plan--hi{background:#0f2028}
  .bar.is-scrolled{background:#0a0f18}
  .menu-panel{background:#06080c}
  .terms{background:var(--paper)}
}

/* ================= ronde 4 (3/11/2026): motion op de hero, "Het hele team werkt mee" =================
   Martijn: "Kan je mss iets met motion graphics op de hero doen". Het scherm blijft de hoofdrol spelen; eromheen werken andere
   afdelingen mee (kaartjes in twee lagen, de verste onscherp), lichtpulsen lopen langs de zijbalk naar de Chief of Staff, bij de
   vraag ademt een cyaan gloed rond het scherm, na de keuze gaat er een puls naar buiten. Bewegingskarakter: premium (traag,
   cubic-bezier(.4,0,.2,1), geen overshoot). Alleen transform en opacity; de shimmer op "AI-team" is een eenmalige uitzondering
   (background-position, één woord, 1,6 s). Pauzeert als de hero uit beeld is of het tabblad verborgen. Minder beweging: stil. */
:root{--ease-p:cubic-bezier(.4,0,.2,1)}
.hero-fig .app{z-index:1}
.app.is-asking{box-shadow:var(--glass-edge),var(--glass-drop)} /* taste-skill-ignore: de gloed zit nu in .hs-halo (opacity) */
.hs{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.hs-back{z-index:0}
.hs-front{z-index:2}
/* ademende kleurvelden achter het scherm */
.hs-blob{position:absolute;display:block;border-radius:50%;will-change:transform}
.hs-blob--a{left:-12%;top:18%;width:70%;height:70%;background:radial-gradient(closest-side,rgba(47,240,166,.26),rgba(47,240,166,0))} /* taste-skill-ignore: ademend kleurveld */
.hs-blob--b{right:-6%;top:-16%;width:62%;height:62%;background:radial-gradient(closest-side,rgba(19,199,230,.3),rgba(19,199,230,0))} /* taste-skill-ignore: ademend kleurveld */
.hs-blob i{display:block}
/* de gloed rond het scherm op het moment van de vraag */
.hs-halo{position:absolute;left:0;top:0;width:100%;height:var(--app-h,100%);border-radius:18px;box-shadow:0 0 0 1px rgba(19,199,230,.55),0 0 90px -8px rgba(19,199,230,.55),0 0 160px 10px rgba(47,240,166,.16);opacity:0;transition:opacity .9s var(--ease-p)} /* taste-skill-ignore: gloed rond het scherm (opacity) */
.hs-halo.is-on{opacity:.85}
/* de puls naar buiten na de keuze */
.hs-ring{position:absolute;left:0;top:0;width:100%;height:var(--app-h,100%);border-radius:18px;opacity:0;box-shadow:0 0 0 1.5px var(--ring,rgba(47,240,166,.9)),0 0 50px var(--ring-g,rgba(47,240,166,.5))} /* taste-skill-ignore: puls na de keuze (transform en opacity) */
/* de kaartjes van de andere afdelingen */
.hs-card{position:absolute;width:150px;padding:10px 12px 11px;border-radius:12px;font-size:13px;line-height:1.4;color:var(--t);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03)),rgba(13,23,41,.84);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08),0 18px 44px -18px rgba(0,0,0,.75);transition:opacity .6s var(--ease-p),transform .6s var(--ease-p)} /* taste-skill-ignore: zwevend glazen kaartje (decoratie) */
.hs-card.is-out{opacity:0;transform:translate3d(0,12px,0)}
@media (prefers-reduced-motion:no-preference){.js .hs-card:not([data-task]){opacity:0;transform:translate3d(0,12px,0)}}
.hs-c1{display:flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
.hs-c2{margin-top:2px;padding-left:18px;color:var(--mid);white-space:nowrap}
.hs-st{position:relative;flex:none;width:10px;height:10px;border-radius:50%}
.hs-card.is-busy .hs-st{background:var(--live)}
.hs-card.is-busy .hs-st::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(19,199,230,.6);opacity:0} /* taste-skill-ignore: bezig-teken */
.hs-card.is-done .hs-st{background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2306080c' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4'/%3E%3C/svg%3E") center/8px no-repeat}
.hs-card--far{width:150px;filter:blur(1.4px);opacity:.62}
.hs-card--far.is-out{opacity:0}
/* plaatsen (desktop en tablet): dichtbij over het lege deel van de zijbalk, veraf achter het scherm, boven en rechtsonder */
.hs-card[data-slot="n1"]{left:var(--n-x,40px);top:var(--n1,322px)}
.hs-card[data-slot="n2"]{left:var(--n-x,40px);top:var(--n2,408px)}
/* veraf: boven het scherm, er maar een paar pixels achter (alleen op desktop, zie hieronder) */
.hs-card[data-slot="f1"]{right:96px;top:-54px}
.hs-card[data-slot="f2"]{left:28px;top:-54px}
/* de lijn langs de zijbalk en de puls */
.hs-lines{position:absolute;left:0;top:0;overflow:visible}
.hs-lines path{fill:none;stroke-width:1.2;stroke-linecap:round}
.hs-pulse{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#bff8ff;box-shadow:0 0 0 2px rgba(19,199,230,.5),0 0 14px 2px rgba(19,199,230,.9);opacity:0;will-change:transform,opacity} /* taste-skill-ignore: lichtpuls (transform en opacity) */
/* de bolletjes in de zijbalk: bezig = cyaan, klaar = groen, de Chief of Staff met de verlooprand */
.app-side .app-cos::before{display:none}
.sd{position:relative;flex:none;width:6px;height:6px;margin:0 2px;border-radius:50%;background:rgba(150,200,210,.35);transition:background-color .5s var(--ease-p)}
.app-cos .sd{width:10px;height:10px;margin:0;background:linear-gradient(var(--lift),var(--lift)) padding-box,var(--grad) border-box;border:1.5px solid transparent} /* taste-skill-ignore: interfacefragment (data-ui) */
.sd::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(closest-side,rgba(19,199,230,.9),rgba(19,199,230,0));opacity:0;transition:opacity .5s var(--ease-p)} /* taste-skill-ignore: interfacefragment (data-ui) */
.sd.is-busy{background:var(--live)}
.sd.is-done{background:var(--ok)}
.sd.is-hit::after{opacity:1;transition-duration:.15s}
.app-side li.is-on .sd:not(.is-busy):not(.is-done){background:rgba(243,246,250,.7)}
/* eenmalige shimmer op het kernwoord van de kop */
@media (prefers-reduced-motion:no-preference){
  .js .hero h1 .kw{background-image:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 30%,rgba(236,255,250,.85) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%),var(--grad);background-size:45% 100%,100% 100%;background-repeat:no-repeat;background-position:-100% 0,0 0;animation:kw-shine 1.7s var(--ease-p) .75s 1 both} /* taste-skill-ignore: eenmalige shimmer (Martijn, ronde 4) */
  .hs-blob--a{animation:hs-breathe-a 15s ease-in-out infinite alternate}
  .hs-blob--b{animation:hs-breathe-b 19s ease-in-out infinite alternate}
  .hs-card.is-busy .hs-st::after{animation:hs-busy 1.6s var(--ease-p) infinite}
  .hs-halo.is-on{animation:hs-halo 3.4s ease-in-out infinite}
  .hero-fig.hs-paused .hs-blob,.hero-fig.hs-paused .hs-st::after,.hero-fig.hs-paused .hs-halo{animation-play-state:paused}
}
@keyframes kw-shine{to{background-position:220% 0,0 0}}
@keyframes hs-breathe-a{from{transform:translate3d(0,0,0) scale(1);opacity:.85}to{transform:translate3d(4%,-3%,0) scale(1.08);opacity:1}}
@keyframes hs-breathe-b{from{transform:translate3d(0,0,0) scale(1.04);opacity:1}to{transform:translate3d(-5%,4%,0) scale(.96);opacity:.8}}
@keyframes hs-busy{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
@keyframes hs-halo{0%,100%{opacity:.5}50%{opacity:.95}}
/* onder 1280 px geen kaartjes veraf: boven het scherm is daar te weinig ruimte (dan hangen ze tegen de menubalk of half achter de rand) */
@media (max-width:1279px){.hs-card--far{display:none}}
/* smallere zijbalk (1240 px en minder): smallere kaartjes, zodat ze niet over het blad met de taak schuiven */
@media (max-width:1240px){.hs-card{width:134px;padding:9px 10px 10px}.hs-c2{padding-left:0}}
@media (max-width:1099px){.hs-blob--a{left:-3%}.hs-blob--b{right:-3%}}
/* tijden in het scherm: vaste breedte, zodat het monospace lettertype bij het laden niets doet verspringen (CLS 0) */
.scr-t{flex:none;width:42px;text-align:right}
.scr-now{display:inline-block;width:42px;text-align:right}
/* gsm: geen zijbalk, dus geen lijn en geen kaartjes; wel de gloed, de pulsen na de keuze en de shimmer, geen kanteling */
@media (max-width:720px){
  .hs-card,.hs-lines,.hs-pulse{display:none}
  .hs-blob--a{left:-4%;width:80%}
  .hs-blob--b{right:-4%}
}
/* zonder JavaScript of met minder beweging: een stil beeld (kaartjes op klaar, geen lijn, geen puls) */
html:not(.js) .hs-lines,html:not(.js) .hs-pulse{display:none}

/* ---------- gratis analyse: venster met het formulier en de agenda uit ons platform (2/11/2026, stijl premium 3/11) ---------- */
html.ga-open{overflow:hidden}
.ga{width:min(720px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:20px;background:transparent;color:var(--t);overflow:visible}
.ga::backdrop{background:rgba(4,7,12,.62);-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2)} /* taste-skill-ignore: overlay van het venster */
.ga-panel{position:relative;display:flex;flex-direction:column;max-height:calc(100dvh - 32px);border-radius:20px;overflow:hidden;background:radial-gradient(520px 360px at 100% 0%,rgba(19,199,230,.14),rgba(19,199,230,0) 72%),radial-gradient(520px 420px at 0% 100%,rgba(47,240,166,.1),rgba(47,240,166,0) 72%),rgba(12,21,37,.8);-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(150,200,210,.16),0 40px 120px rgba(0,0,0,.6)} /* taste-skill-ignore: glas van het venster */ /* taste-skill-ignore: overlay (menu, venster, vaste balk) */
.ga-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--grad)} /* taste-skill-ignore: overlay (menu, venster, vaste balk) */
.ga-head{position:relative;padding:28px 72px 20px 28px;box-shadow:0 1px 0 var(--line)} /* taste-skill-ignore: overlay (menu, venster, vaste balk) */
.ga-title{font-weight:650;font-size:clamp(24px,3vw,30px);line-height:1.1;letter-spacing:-.02em;color:var(--white);outline:0}
.ga-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ga-steps li{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;font-size:14px;font-weight:600;color:var(--mid);background:rgba(255,255,255,.04)}
.ga-steps li span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:650;color:var(--mid);background:rgba(255,255,255,.07)}
.ga-steps li.is-on{color:var(--white);background:rgba(47,123,255,.14)}
.ga-steps li.is-on span{background:var(--blue);color:#fff}
.ga-steps li.is-done{color:var(--t)}
.ga-steps li.is-done span{background:rgba(47,240,166,.18);color:var(--mint)}
.ga-close{position:absolute;right:16px;top:18px;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--t);transition:background-color .2s ease}
.ga-close:hover{background:rgba(255,255,255,.08)}
.ga-close svg{width:16px;height:16px}
.ga-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 28px 26px;scrollbar-width:thin;scrollbar-color:rgba(150,200,210,.3) transparent}
.ga-lede{color:var(--mid);font-size:16px;line-height:1.55;max-width:60ch}
.ga-lede b{color:var(--white);font-weight:600}
.ga-frame{position:relative;margin-top:20px;min-height:560px}
.ga-frame--agenda{min-height:640px}
.ga-frame iframe{display:block;width:100%;min-height:560px;border:0;background:transparent;color-scheme:normal;opacity:0;transition:opacity .35s ease}
.ga-frame--agenda iframe{min-height:640px;border-radius:14px}
.ga-frame.is-ready iframe{opacity:1}
.ga-frame.is-ready .ga-skel,.ga-frame.is-ready .ga-load{display:none}
.ga-skel{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;align-content:start;pointer-events:none}
.ga-skel span{display:block;height:68px;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.065),rgba(255,255,255,.03)) 0 0/200% 100%} /* taste-skill-ignore: overlay (menu, venster, vaste balk) */
.ga-skel .ga-skel-big{grid-column:1/-1;height:120px}
.ga-skel .ga-skel-btn{grid-column:1/-1;height:52px;background:rgba(47,123,255,.16)}
.ga-frame--agenda .ga-skel .ga-skel-big{height:320px}
.ga-load{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font-size:14px;color:var(--dim)}
@media (prefers-reduced-motion:no-preference){.ga-skel span{animation:ga-shim 1.4s linear infinite}}
@keyframes ga-shim{to{background-position:-200% 0}}
.ga-note{margin-top:16px;font-size:14px;line-height:1.55;color:var(--dim)}
.ga-note a{color:var(--t);text-decoration:underline;text-decoration-color:rgba(243,246,250,.35);text-underline-offset:3px}
.ga-note a:hover{text-decoration-color:var(--t)}
@media (prefers-reduced-motion:no-preference){
  .ga[open]{animation:ga-in .28s var(--ease) both}
  .ga[open]::backdrop{animation:ga-fade .28s ease both}
}
@keyframes ga-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ga-fade{from{opacity:0}to{opacity:1}}
@media (max-width:720px){
  .ga{width:100vw;max-height:100dvh;height:100dvh;margin:0;border-radius:0}
  .ga-panel{max-height:100dvh;height:100dvh;border-radius:0}
  .ga-head{padding:18px 64px 14px 16px}
  .ga-steps{gap:6px;margin-right:-48px}
  .ga-steps li{font-size:13px;padding:4px 10px 4px 4px;gap:7px}
  .ga-steps li span{width:22px;height:22px}
  .ga-close{right:10px;top:12px}
  .ga-body{padding:16px 16px 28px}
  .ga-skel{grid-template-columns:1fr}
  .ga-frame,.ga-frame iframe{min-height:640px}
}