body{margin:0;background:#F4F2EE}
a{color:#8A5A12}a:hover{color:#6B460E}
button{font-family:inherit;cursor:pointer}

/* ===== Base: the static, readable page (no JS, reduced motion, print). Scenes switch on with .sc.on ===== */
.eb{margin:0;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#8A5A12}
.eb-d{color:#E8A93A}
.h2{margin:0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:600;letter-spacing:-.8px}
.tm-head{position:relative;z-index:50;background:#14261F;color:#F2E9D3}
@media (min-width:768px){.tm-head{position:sticky;top:0}}
.tm-head::after{content:"";position:absolute;inset:0;box-shadow:0 12px 28px -14px rgba(0,0,0,.7);opacity:0;transition:opacity .3s ease;pointer-events:none}
.tm-head[data-scrolled]::after{opacity:1}
.tm-progress{display:none;position:absolute;left:0;right:0;bottom:0;height:2px;background:#E8A93A;transform-origin:left center;transform:scaleX(0);will-change:transform}
html.tm-motion .tm-progress{display:block}
section[id]{scroll-margin-top:72px}

.sc{position:relative}
.st{position:relative;box-sizing:border-box}

/* hero */
.sc-hero>.st{background:#14261F;color:#F2E9D3;padding:40px 24px 56px;overflow:hidden}
.hr-giant{display:block;margin:0 auto 32px;text-align:center;font-size:21vw;line-height:.82;font-weight:600;letter-spacing:-.055em;color:#233B31;white-space:nowrap;pointer-events:none;user-select:none}
.hr-deco{position:absolute;inset:0;pointer-events:none}
.hr-deco svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hr-wrap{position:relative;max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.hr-copy{flex:999 1 460px;display:flex;flex-direction:column;gap:24px}
.hr-card{flex:1 1 400px;min-width:0}
.hr-strip{position:relative;max-width:1200px;margin:56px auto 0;padding-top:20px;border-top:1px solid #2A4337;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-size:15px;color:#CBD3C8}
.hr-cue{display:none}

/* board */
.sc-board>.st{background:#F4F2EE;padding:96px 24px}
.bd-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
.bd-head{display:flex;flex-direction:column;gap:12px;max-width:760px}
.bd-caps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px 40px}
.bd-caps>li{display:flex;flex-direction:column;gap:8px}
.bd-num{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#8A5A12}
.bd-caps h3{margin:0;font-size:24px;line-height:1.15;font-weight:600;letter-spacing:-.4px}
.bd-caps p{margin:0;color:#55585F;max-width:620px}
.bd-cam{position:relative}
.bd-board{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.bd-col{height:200px;box-sizing:border-box;padding:12px;border-radius:14px;background:#F2E9D3;border:1px solid #E1DED7;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#55585F;transition:background-color .4s ease,border-color .4s ease,color .4s ease}
.bd-card{position:absolute;left:0;top:44px;width:calc((100% - 60px) / 6);box-sizing:border-box;padding:12px;border-radius:12px;background:#E8A93A;color:#14261F;display:flex;flex-direction:column;gap:6px;box-shadow:0 18px 36px -20px rgba(20,38,31,.6);transform-origin:50% 100%;transform:translateX(calc(var(--pos, 5) * (100% + 12px))) rotate(calc(var(--mv, 0) * -3deg));transition:background-color .4s ease,color .4s ease}
.bd-ttl{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-stat{display:grid;font-family:'IBM Plex Mono',monospace;font-size:11px}
.bd-stat>span{grid-area:1/1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .3s ease}
.bd-stat>span:last-child{opacity:1}
.bd-bar{height:4px;border-radius:2px;background:rgba(20,38,31,.25);overflow:hidden}
.bd-bar>span{display:block;height:100%;background:#14261F;transform-origin:left center;transform:scaleX(calc(var(--pos, 5) / 5))}
@media (max-width:767px){.sc-board:not(.on) .bd-cam{display:none}}

/* gate */
.sc-gate>.st{background:#14261F;color:#F2E9D3;padding:96px 24px}
.gt-in{position:relative;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.gt-labels{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.gt-labels>li{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid #3F5C4E;font-size:17px;font-weight:600}
.gt-labels svg{width:.7em;height:.7em;flex:none}
.gt-h{margin:0;font-size:clamp(40px,7vw,104px);line-height:1;font-weight:600;letter-spacing:-2px}
.gt-msg{margin:0;max-width:640px;font-size:20px;color:#CBD3C8}
.gt-after{margin:0;font-size:20px;font-weight:600;color:#E8A93A}
.gt-doors{display:none}

/* deploy */
.sc-deploy>.st{background:#14261F;color:#F2E9D3;padding:96px 24px}
.dp-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.dp-in>p:not(.eb){margin:0;max-width:560px;font-size:18px;color:#CBD3C8}
.dp-halves{max-width:1200px;margin:40px auto 0;display:grid;grid-template-columns:1fr 1fr;border-radius:16px;overflow:hidden;min-height:180px}
.dp-half{position:relative;display:flex;align-items:center;justify-content:center;padding:24px}
.dp-blue{background:#1F3D5C}
.dp-green{background:#1F5A40}
.dp-lab{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.dp-tag{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#CBD3C8}
.dp-ver{font-size:22px;font-weight:600;color:#F2E9D3}
.dp-live{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;padding:4px 10px;border-radius:999px;background:#8FD3A8;color:#14261F}
.dp-live-b{display:none}
.dp-steps{list-style:none;max-width:1000px;margin:48px auto 0;padding:0;position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;font-family:'IBM Plex Mono',monospace;font-size:15px;color:#F2E9D3}
.dp-steps::before{content:"";position:absolute;top:10px;left:16.66%;right:16.66%;height:2px;background:#E8A93A;transform-origin:left center}
.dp-steps>li{position:relative;padding-top:32px}
.dp-steps>li::before{content:"";position:absolute;top:4px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#E8A93A}

/* horizontal */
.sc-hz>.st{background:#F4F2EE;padding:96px 24px 48px}
.hz-row{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.hz-p{position:relative;overflow:hidden;border-radius:16px;padding:32px;box-sizing:border-box}
.hz-p1{padding:0 0 12px}
.hz-dark{background:#14261F;color:#F2E9D3}
.hz-light{background:#FBFAF7;border:1px solid #E1DED7}
.hz-sand{background:#F2E9D3}
.hz-big{display:none}
.hz-c{position:relative;display:flex;flex-direction:column;gap:12px;max-width:680px}
.hz-c h3{margin:0;font-size:26px;line-height:1.1;font-weight:600;letter-spacing:-.4px}
.hz-c p{margin:0}
.hz-lab{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#8A5A12}
.hz-dark .hz-lab{color:#E8A93A}
.hz-sp{max-width:1100px}
.hz-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding-top:8px}
.hz-cards>div{display:flex;flex-direction:column;gap:8px;padding:22px 24px;border-radius:14px;border:1px dashed #C9BE9F;background:#F4F2EE}
.hz-cards h4{margin:0;font-size:18px;font-weight:600}
.hz-cards p{margin:0;font-size:15px;color:#55585F}
.hz-bar{display:none}

/* cockpit */
.sc-ck>.st{background:#F2E9D3;padding:96px 24px}
.ck-in{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.ck-copy{flex:999 1 440px;display:flex;flex-direction:column;gap:20px}
.ck-dev{flex:1 1 520px;min-width:0}
.ck-tilt{display:flex;flex-wrap:wrap;justify-content:center;gap:32px}
.ck-scr{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.ck-scr figcaption{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#55585F}
.ck-wide{width:100%;max-width:600px}

/* ingebouwd */
.sc-ib>.st{background:#14261F;color:#F2E9D3;padding:96px 24px}
.ib-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
.ib-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.ib-t{background:#1B3129;border:1px solid #2A4337;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:8px}
.ib-t h3{margin:0;font-size:19px;font-weight:600}
.ib-t p{margin:0;color:#CBD3C8}

/* keys */
.sc-keys>.st{background:#F4F2EE;padding:96px 24px}
.ky-in{position:relative;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.ky-h{margin:0;font-size:clamp(36px,6vw,72px);line-height:1;font-weight:600;letter-spacing:-.03em}
.ky-w{display:inline-block}
.ky-em{color:#8A5A12}
.ky-dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px 40px}
.ky-dl>div{display:flex;flex-direction:column;gap:6px}
.ky-dl dt{font-weight:600;font-size:17px}
.ky-dl dt::after{content:"";display:block;width:32px;height:2px;margin-top:10px;border-radius:1px;background:#E8A93A;transform-origin:left center}
.ky-dl dd{margin:0;color:#55585F}

/* cta */
.sc-cta>.st{background:#14261F;color:#F2E9D3;padding:96px 24px;overflow:hidden}
.ct-deco{position:absolute;inset:0;pointer-events:none}
.ct-deco svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ct-in{position:relative;z-index:1;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.ct-mark{width:56px;height:56px;display:block}

/* ===== Scenes: each section is a tall scroll track, its .st a sticky 100vh stage scrubbed by --p (0..1) ===== */
/* Each track ends with a 60vh hold: the stage stays put at its final state while the next scene wipes in over it. */
.sc.on{height:calc((var(--len) + 60) * 1vh)}
.sc.on + .sc.on{margin-top:-160vh;scroll-margin-top:-60vh}
.sc.on>.st{--p:0;--e:0;--pos:0;--mv:0;--top:88px;position:sticky;top:0;height:100vh;overflow:hidden;padding:0}
.sc.on + .sc.on>.st{clip-path:var(--clip)}
@media (max-width:767px){.sc.on{height:calc((var(--len) * .7 + 60) * 1vh)}.sc.on>.st{--top:28px}}

/* 1 hero: giant type shrinks away, copy and cockpit card rise in */
.sc-hero.on>.st{--a:clamp(0, calc(var(--p) / .3), 1);--b:clamp(0, calc((var(--p) - .24) / .22), 1);--c:clamp(0, calc((var(--p) - .3) / .34), 1);--d:clamp(0, calc((var(--p) - .6) / .18), 1);--z:clamp(0, calc((var(--p) - .82) / .18), 1);--o:0}
.sc-hero.on .hr-giant{position:absolute;left:50%;top:50%;margin:0;color:#F2E9D3;opacity:calc(1 - var(--a));transform:translate(-50%, -50%) translate3d(0, calc(var(--a) * -30vh), 0) scale(calc(1 - var(--a) * .66));will-change:transform,opacity}
.sc-hero.on .hr-copy{gap:18px}
.sc-hero.on .hr-copy h1{font-size:clamp(34px,3.8vw,56px)!important}
.sc-hero.on .hr-copy>p:not(.eb){font-size:17px!important}
.sc-hero.on .hr-wrap{position:absolute;top:var(--top);bottom:84px;left:0;right:0;margin:0 auto;padding:0 24px;box-sizing:border-box;flex-wrap:nowrap}
.sc-hero.on .hr-copy{opacity:calc(var(--b) * (1 - var(--z) * .5) * (1 - var(--o)));transform:translate3d(0, calc((1 - var(--b)) * 12vh - var(--o) * 60vh), 0);will-change:transform,opacity}
.sc-hero.on .hr-copy:focus-within{opacity:1;transform:none}
.sc-hero.on .hr-card{transform:translate3d(0, calc((1 - var(--c)) * 85vh), 0) rotate(calc((1 - var(--c)) * -6deg)) scale(calc(1 + var(--z) * .1));will-change:transform}
.sc-hero.on .hr-strip{position:absolute;left:24px;right:24px;bottom:20px;max-width:1152px;margin:0 auto;opacity:var(--d);transform:translate3d(0, calc((1 - var(--d)) * 32px), 0)}
.sc-hero.on .hr-cue{display:flex;position:absolute;left:50%;bottom:28px;transform:translateX(-50%);flex-direction:column;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#A3AE9F;opacity:calc(1 - var(--a) * 3)}
.sc-hero.on .hr-cue::after{content:"";width:1px;height:40px;background:#E8A93A;transform-origin:top center;animation:tmCue 2.2s ease-in-out infinite}
/* short desktop windows: the feature strip takes the copy's place at the end instead of sharing the screen with it */
@media (min-width:768px) and (max-height:700px){
  .sc-hero.on>.st{--o:clamp(0, calc((var(--p) - .66) / .12), 1);--d:clamp(0, calc((var(--p) - .74) / .12), 1)}
  .sc-hero.on .hr-wrap{bottom:24px}
  .sc-hero.on .hr-strip{left:max(24px, calc(50% - 576px));right:auto;top:50%;bottom:auto;width:min(44%, 520px);margin:0;flex-direction:column;gap:14px;border-top:0;padding-top:0;font-size:clamp(17px,1.8vw,22px);color:#F2E9D3;transform:translate3d(0, calc(-50% + (1 - var(--d)) * 32px), 0)}
  .sc-hero.on .hr-card{scale:.9}
}
@keyframes tmCue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (max-width:767px){
  .hr-giant{font-size:22vw}
  .sc-hero.on>.st{--b:clamp(0, calc((var(--p) - .16) / .2), 1);--o:clamp(0, calc((var(--p) - .5) / .16), 1);--c:clamp(0, calc((var(--p) - .52) / .26), 1);--d:clamp(0, calc((var(--p) - .8) / .14), 1);--z:0}
  .sc-hero.on .hr-wrap{bottom:24px;display:block}
  .sc-hero.on .hr-copy{position:absolute;left:24px;right:24px;top:50%;translate:0 -50%}
  .sc-hero.on .hr-card{position:absolute;left:16px;right:16px;top:50%;translate:0 -62%}
  .sc-hero.on .hr-strip{bottom:20px;border-top:0;padding-top:0;gap:6px 16px;font-size:13px}
}

/* 2 board: a card is written, the camera follows it column by column, captions and tone change per stop */
.sc-board.on>.st{--clip:circle(calc(var(--e) * 150%) at 50% 78%);--w:clamp(0, calc((var(--p) - .005) / .045), 1);--f:calc(clamp(0, calc((var(--p) - .04) / .05), 1) - clamp(0, calc((var(--p) - .95) / .05), 1));--zk:.5;transition:background-color .7s ease}
.sc-board.on .bd-in{position:absolute;top:var(--top);bottom:32px;left:0;right:0;padding:0 24px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto minmax(0,1fr);column-gap:40px;row-gap:24px}
.sc-board.on .bd-head{grid-column:1;grid-row:1}
.sc-board.on .bd-head .h2{font-size:clamp(24px,2.4vw,34px)}
.sc-board.on .bd-caps{grid-column:1;grid-row:2;align-self:center;grid-template-columns:minmax(0,1fr);gap:0}
/* captions swap in sequence: the old one leaves quickly, then the new one enters, so two never overlap */
.sc-board.on .bd-caps>li{grid-area:1/1;opacity:0;translate:0 28px;transition:opacity .16s ease,translate .2s ease}
.sc-board.on .bd-caps h3{font-size:clamp(28px,3.4vw,52px);line-height:1.04;letter-spacing:-1px}
.sc-board.on .bd-caps p{font-size:18px}
.sc-board.on>[data-i="0"] .bd-caps>li:nth-child(1),.sc-board.on>[data-i="1"] .bd-caps>li:nth-child(2),.sc-board.on>[data-i="2"] .bd-caps>li:nth-child(3),.sc-board.on>[data-i="3"] .bd-caps>li:nth-child(4),.sc-board.on>[data-i="4"] .bd-caps>li:nth-child(5),.sc-board.on>[data-i="5"] .bd-caps>li:nth-child(6){opacity:1;translate:0 0;transition:opacity .4s ease .2s,translate .6s cubic-bezier(.2,.7,.2,1) .2s}
.sc-board.on>[data-i="1"]{background:#F2E9D3}
.sc-board.on>[data-i="2"]{background:#E6ECE8}
.sc-board.on>[data-i="3"]{background:#F3EBDA}
.sc-board.on>[data-i="4"]{background:#E5EEE7}
.sc-board.on>[data-i="5"]{background:#F6E6C8}
.sc-board.on .bd-cam{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;border-radius:20px}
.sc-board.on .bd-board{--bw:calc((min(100vw, 1200px) - 88px) * 7 / 12);--cs:calc((var(--bw) + 12px) / 6);--z:calc(1 + var(--zk) * var(--f));flex:none;width:var(--bw);transform:translate3d(calc((2.5 - var(--pos)) * var(--cs) * var(--f) * var(--z)), 0, 0) scale(var(--z));will-change:transform}
.sc-board.on .bd-col{height:min(300px, 42vh);background:rgba(251,250,247,.55)}
.sc-board.on .bd-card{background:#14261F;color:#F2E9D3;will-change:transform}
.sc-board.on .bd-ttl{clip-path:inset(0 calc((1 - var(--w)) * 100%) 0 0)}
.sc-board.on .bd-stat{color:#E8A93A}
.sc-board.on .bd-stat>span{white-space:normal;text-overflow:clip;line-height:1.3}
.sc-board.on .bd-cam{-webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)}
.sc-board.on .bd-stat>span:last-child{opacity:0}
.sc-board.on .bd-bar{background:#2A4337}
.sc-board.on .bd-bar>span{background:#E8A93A}
.sc-board.on>[data-i="0"] .bd-stat>span:nth-child(1),.sc-board.on>[data-i="1"] .bd-stat>span:nth-child(2),.sc-board.on>[data-i="2"] .bd-stat>span:nth-child(3),.sc-board.on>[data-i="3"] .bd-stat>span:nth-child(4),.sc-board.on>[data-i="4"] .bd-stat>span:nth-child(5),.sc-board.on>[data-i="5"] .bd-stat>span:nth-child(6){opacity:1}
.sc-board.on>[data-i="0"] .bd-col:nth-child(1),.sc-board.on>[data-i="1"] .bd-col:nth-child(2),.sc-board.on>[data-i="2"] .bd-col:nth-child(3),.sc-board.on>[data-i="3"] .bd-col:nth-child(4),.sc-board.on>[data-i="4"] .bd-col:nth-child(5),.sc-board.on>[data-i="5"] .bd-col:nth-child(6){background:#FBFAF7;border-color:#E8A93A;color:#1F2128}
.sc-board.on>[data-i="5"] .bd-card{background:#E8A93A;color:#14261F}
.sc-board.on>[data-i="5"] .bd-stat{color:#14261F}
.sc-board.on>[data-i="5"] .bd-bar>span{background:#14261F}
@media (max-width:767px){
  .sc-board.on>.st{--zk:1.1}
  .sc-board.on .bd-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);row-gap:16px}
  .sc-board.on .bd-caps{grid-row:2;align-self:start}
  .sc-board.on .bd-cam{grid-column:1;grid-row:3}
  .sc-board.on .bd-col{height:min(200px, 26vh)}
  .sc-board.on .bd-head .h2{font-size:24px}
  .sc-board.on .bd-caps h3{font-size:28px}
  .sc-board.on .bd-caps p{font-size:15px}
  .sc-board.on .bd-board{--bw:calc(100vw - 32px);gap:6px;--cs:calc((var(--bw) + 6px) / 6)}
  .sc-board.on .bd-col{padding:6px;font-size:8px;border-radius:8px}
  .sc-board.on .bd-card{top:24px;width:calc((100% - 30px) / 6);padding:5px;border-radius:6px;gap:4px;transform:translateX(calc(var(--pos) * (100% + 6px))) rotate(calc(var(--mv) * -3deg))}
  .sc-board.on .bd-ttl{font-size:8px}
  .sc-board.on .bd-stat{display:none}
}

/* 3 gate: the three human gates, the screen closes, approval fills, it opens again */
.sc-gate.on>.st{--clip:inset(calc((1 - var(--e)) * 100%) 0 0 0);--l:clamp(0, calc(var(--p) / .2), 1);--dc:calc(clamp(0, calc((var(--p) - .28) / .12), 1) - clamp(0, calc((var(--p) - .62) / .14), 1));--ok:clamp(0, calc((var(--p) - .42) / .12), 1);--op:clamp(0, calc((var(--p) - .54) / .04), 1);--sw:clamp(0, calc((var(--p) - .4) / .03), 1);--rv:clamp(0, calc((var(--p) - .62) / .14), 1)}
.sc-gate.on .gt-in{position:absolute;top:var(--top);bottom:32px;left:0;right:0;padding:0 24px;box-sizing:border-box;display:block}
.sc-gate.on .gt-in>.eb{position:absolute;top:0;left:24px;opacity:calc(1 - var(--sw))}
.sc-gate.on .gt-labels{position:absolute;left:24px;right:24px;top:50%;translate:0 -50%;flex-direction:column;gap:0;opacity:calc(1 - var(--sw))}
.sc-gate.on .gt-labels>li{--lk:clamp(0, calc(var(--l) * 3 - var(--k)), 1);border:0;padding:0;border-radius:0;gap:.25em;font-size:clamp(44px,8.5vw,128px);line-height:1.02;letter-spacing:-.04em;opacity:var(--lk);transform:translate3d(calc((1 - var(--lk)) * -8vw), 0, 0);will-change:transform,opacity}
.sc-gate.on .gt-h{position:absolute;left:24px;right:24px;top:50%;text-align:center;font-size:clamp(48px,10vw,160px);letter-spacing:-.045em;opacity:var(--sw);transform:translate3d(0, -60%, 0) scale(calc(.9 + var(--rv) * .1))}
.sc-gate.on .gt-after{position:absolute;left:24px;right:24px;top:50%;text-align:center;font-size:clamp(18px,2vw,26px);opacity:var(--rv);transform:translate3d(0, calc(6vw + 40px + (1 - var(--rv)) * 30px), 0)}
.sc-gate.on .gt-msg{position:absolute;left:50%;top:50%;z-index:3;width:min(640px, calc(100% - 48px));text-align:center;font-size:clamp(18px,2vw,24px);color:#F2E9D3;background:#0B1612;padding:14px 22px;border-radius:12px;box-sizing:border-box;transform:translate3d(-50%, -50%, 0);opacity:calc(clamp(0, calc((var(--p) - .36) / .05), 1) - clamp(0, calc((var(--p) - .58) / .04), 1))}
.sc-gate.on .gt-doors{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.gt-door{position:absolute;top:0;bottom:0;width:50.5%;background:#0B1612;will-change:transform}
.gt-dl{left:0;transform:translate3d(calc((1 - var(--dc)) * -101%), 0, 0);box-shadow:inset -2px 0 0 #E8A93A}
.gt-dr{right:0;transform:translate3d(calc((1 - var(--dc)) * 101%), 0, 0);box-shadow:inset 2px 0 0 #E8A93A}
.gt-lock{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-176px 0 0 -44px;box-sizing:border-box;border-radius:22px;background:#14261F;border:1.5px solid #3F5C4E;display:flex;align-items:center;justify-content:center;color:#E8A93A;opacity:clamp(0, calc((var(--dc) - .7) / .3), 1);transform:scale(calc(.7 + var(--dc) * .3))}
.gt-shackle{transform:translate3d(calc(var(--op) * 3px), calc(var(--op) * -4px), 0)}
.gt-ok{position:absolute;left:50%;top:50%;width:200px;height:48px;margin:88px 0 0 -100px;box-sizing:border-box;border-radius:999px;border:1.5px solid #E8A93A;overflow:hidden;opacity:clamp(0, calc((var(--dc) - .7) / .3), 1)}
.gt-ok>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;color:#F2E9D3}
.gt-ok>span+span{background:#E8A93A;color:#14261F;clip-path:inset(0 calc((1 - var(--ok)) * 100%) 0 0)}
@media (max-width:767px){
  .sc-gate.on .gt-labels>li{font-size:12vw}
  .sc-gate.on .gt-h{font-size:13vw}
  .sc-gate.on .gt-msg{font-size:17px}
}

/* 4 deploy: green grows beside blue, they swap, then dev → uat → prod draws */
.sc-deploy.on>.st{--clip:inset(0 calc((1 - var(--e)) * 50%));--g1:clamp(0, calc(var(--p) / .22), 1);--g2:clamp(0, calc((var(--p) - .34) / .2), 1);--r:clamp(0, calc((var(--p) - .58) / .26), 1)}
.sc-deploy.on .dp-in{position:absolute;top:var(--top);left:max(24px, calc(50% - 576px));right:24px;max-width:600px;margin:0}
.sc-deploy.on .dp-halves{position:absolute;inset:0;margin:0;max-width:none;border-radius:0;display:block}
.sc-deploy.on .dp-half{position:absolute;inset:0;padding:0}
.sc-deploy.on .dp-green{clip-path:inset(0 0 0 calc(100% - (var(--g1) + var(--g2)) * 50%))}
.sc-deploy.on .dp-lab{position:absolute;top:max(68%, 440px);left:25%;translate:-50% -50%;will-change:transform}
.sc-deploy.on .dp-blue .dp-lab{opacity:calc(1 - var(--g2));transform:translate3d(calc(var(--g2) * -30vw), 0, 0)}
.sc-deploy.on .dp-green .dp-lab{left:75%;opacity:var(--g1);transform:translate3d(calc(var(--g2) * -25vw), 0, 0)}
.sc-deploy.on .dp-ver{font-size:clamp(22px,3vw,40px)}
.sc-deploy.on .dp-live-b{display:inline-block;opacity:calc(1 - var(--g2))}
.sc-deploy.on .dp-live-g{opacity:var(--g2)}
.sc-deploy.on .dp-steps{position:absolute;left:24px;right:24px;bottom:48px;margin:0 auto}
.sc-deploy.on .dp-steps::before{transform:scaleX(var(--r))}
.sc-deploy.on .dp-steps>li{--sk:clamp(0, calc((var(--r) - var(--k) * .45) / .1), 1);opacity:var(--sk)}
.sc-deploy.on .dp-steps>li::before{transform:scale(var(--sk))}
@media (max-width:767px){
  .sc-deploy.on .dp-in>p:not(.eb){font-size:15px}
  .sc-deploy.on .dp-lab{top:62%}
  .sc-deploy.on .dp-ver{font-size:18px}
}

/* 5 horizontal: vertical scroll moves a row of panels sideways */
.sc-hz.on>.st{--clip:circle(calc(var(--e) * 150%) at 50% 100%);--h:calc(var(--pos) / 4)}
.sc-hz.on .hz-row{position:absolute;top:0;left:0;bottom:0;width:500%;max-width:none;margin:0;flex-direction:row;gap:0;transform:translate3d(calc(var(--h) * -80%), 0, 0);will-change:transform}
.sc-hz.on .hz-p{flex:none;width:20%;height:100%;border:0;border-radius:0;padding:calc(var(--top) + 16px) max(24px, 7vw) 72px;display:flex;align-items:center}
.sc-hz.on .hz-light{background:#F4F2EE}
.sc-hz.on .hz-big{display:block;position:absolute;left:4vw;bottom:-3vw;font-size:22vw;font-weight:600;letter-spacing:-.05em;line-height:.8;white-space:nowrap;color:#E6DFCC;pointer-events:none;transform:translate3d(calc((var(--h) * 4 - var(--i)) * -30vw), 0, 0);will-change:transform}
.sc-hz.on .hz-dark .hz-big{color:#1A2E26}
.sc-hz.on .hz-sand .hz-big{color:#E6DCC0}
.sc-hz.on .hz-c{max-width:760px;transform:translate3d(calc((var(--h) * 4 - var(--i)) * -10vw), 0, 0)}
.sc-hz.on .hz-c h3{font-size:clamp(36px,5vw,72px);line-height:1.02;letter-spacing:-1.2px}
.sc-hz.on .hz-c>p{font-size:20px}
.sc-hz.on .hz-p1 .h2{font-size:clamp(40px,6vw,96px);line-height:1;letter-spacing:-.03em}
.sc-hz.on .hz-sp{max-width:1100px}
.sc-hz.on .hz-sp h3{font-size:clamp(28px,3vw,44px)}
.sc-hz.on .hz-bar{display:block;position:absolute;left:24px;right:24px;bottom:32px;max-width:320px;margin:0 auto;height:2px;background:#C9BE9F}
.sc-hz.on .hz-bar>span{display:block;height:100%;background:#8A5A12;transform-origin:left center;transform:scaleX(var(--h))}

/* 6 cockpit: the device rises and tilts flat, scrolling swaps its four screens */
.sc-ck.on>.st{--clip:inset(0 0 0 calc((1 - var(--e)) * 100%));--a:clamp(0, calc(var(--p) / .16), 1)}
.sc-ck.on .ck-in{position:absolute;top:var(--top);bottom:32px;left:0;right:0;padding:0 24px;box-sizing:border-box;flex-wrap:nowrap}
.sc-ck.on .ck-dev{align-self:stretch;display:flex;align-items:center;perspective:1600px}
.sc-ck.on .ck-tilt{position:relative;display:block;width:100%;height:min(640px, 100%);transform-origin:50% 100%;transform:translate3d(0, calc((1 - var(--a)) * 40vh), 0) rotateX(calc((1 - var(--a)) * 18deg));will-change:transform}
.sc-ck.on .ck-scr{position:absolute;inset:0;justify-content:center;opacity:0;transform:scale(.94) translate3d(0, 24px, 0);transition:opacity .18s ease,transform .25s ease}
.sc-ck.on>[data-i="0"] .ck-scr:nth-child(1),.sc-ck.on>[data-i="1"] .ck-scr:nth-child(2),.sc-ck.on>[data-i="2"] .ck-scr:nth-child(3),.sc-ck.on>[data-i="3"] .ck-scr:nth-child(4){opacity:1;transform:none;transition:opacity .45s ease .2s,transform .7s cubic-bezier(.2,.7,.2,1) .2s}
@media (max-height:860px){.sc-ck.on .ck-ph{transform:scale(.82);margin:-50px 0}}
@media (max-height:740px){.sc-ck.on .ck-ph{transform:scale(.7);margin:-84px 0}}
.sc-ck.on .ck-copy li{--lk:clamp(0, calc((var(--p) - .06 - var(--k) * .18) / .08), 1);opacity:var(--lk);transform:translate3d(calc((1 - var(--lk)) * -24px), 0, 0)}

/* 7 ingebouwd: scattered tiles assemble into one grid */
.sc-ib.on>.st{--clip:circle(calc(var(--e) * 150%) at 50% 50%)}
.sc-ib.on .ib-in{position:absolute;top:var(--top);bottom:32px;left:0;right:0;padding:0 24px;box-sizing:border-box;justify-content:center}
.sc-ib.on .ib-head{position:relative;z-index:2;opacity:clamp(0, calc(var(--p) / .16), 1)}
.sc-ib.on .ib-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.sc-ib.on .ib-t{--ak:clamp(0, calc((var(--p) - .04 - var(--k) * .05) / .42), 1);opacity:calc(.15 + .85 * var(--ak));transform:translate3d(calc((1 - var(--ak)) * var(--tx)), calc((1 - var(--ak)) * var(--ty)), 0) rotate(calc((1 - var(--ak)) * var(--tr))) scale(calc(.85 + .15 * var(--ak)));will-change:transform,opacity}

/* 8 keys: the statement assembles word by word, then makes room for the four guarantees */
.sc-keys.on>.st{--clip:inset(0 0 calc((1 - var(--e)) * 100%) 0);--a:clamp(0, calc(var(--p) / .34), 1);--s:clamp(0, calc((var(--p) - .42) / .16), 1)}
.sc-keys.on .ky-in{position:absolute;top:var(--top);bottom:32px;left:0;right:0;padding:0 24px;box-sizing:border-box;display:block}
.sc-keys.on .ky-in>.eb{position:absolute;top:0;left:24px;opacity:calc(1 - var(--s))}
.sc-keys.on .ky-h{position:absolute;left:24px;right:24px;top:50%;font-size:clamp(48px,9.5vw,156px);line-height:.95;letter-spacing:-.045em;transform-origin:0 0;transform:translate3d(0, calc((1 - var(--s)) * -50% + var(--s) * (40px - (100vh - var(--top) - 32px) / 2)), 0) scale(calc(1 - var(--s) * .5))}
.sc-keys.on .ky-w{opacity:calc(.12 + .88 * var(--a));transform:translate3d(calc((1 - var(--a)) * var(--x)), calc((1 - var(--a)) * var(--y)), 0) rotate(calc((1 - var(--a)) * var(--r)));will-change:transform,opacity}
.sc-keys.on .ky-dl{position:absolute;left:24px;right:24px;bottom:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.sc-keys.on .ky-dl>div{--dk:clamp(0, calc((var(--p) - .5 - var(--k) * .07) / .12), 1);opacity:var(--dk);transform:translate3d(0, calc((1 - var(--dk)) * 60px), 0)}
.sc-keys.on .ky-dl dt::after{transform:scaleX(var(--dk))}
@media (max-width:1079px){.sc-keys.on .ky-dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .sc-keys.on>.st{--a:clamp(0, calc(var(--p) / .3), 1);--s:clamp(0, calc((var(--p) - .5) / .1), 1)}
  .sc-keys.on .ky-dl>div{--dk:clamp(0, calc((var(--p) - .58 - var(--k) * .07) / .1), 1)}
  .sc-keys.on .ky-h{font-size:13vw;opacity:calc(1 - var(--s))}
  .sc-keys.on .ky-dl{top:50%;bottom:auto;translate:0 -50%;grid-template-columns:minmax(0,1fr);gap:16px}
  .sc-keys.on .ky-dl dd{font-size:14px}
}

/* 9 cta: everything recedes into one mark, the swarm cells light up, calm end */
.sc-cta.on>.st{--clip:circle(calc(var(--e) * 150%) at 50% 50%);--m:clamp(0, calc(var(--p) / .42), 1);--t:clamp(0, calc((var(--p) - .36) / .24), 1);--ln:clamp(0, calc((var(--p) - .2) / .6), 1)}
.sc-cta.on .ct-in{position:absolute;left:24px;right:24px;top:50%;translate:0 -50%}
.sc-cta.on .ct-in>:not(.ct-mark){opacity:var(--t);transform:translate3d(0, calc((1 - var(--t)) * 40px), 0)}
.sc-cta.on .ct-in:focus-within>*{opacity:1;transform:none}
.sc-cta.on .ct-mark{transform:scale(calc(9 - 8 * var(--m)));will-change:transform}

/* ===== phone versions of the scenes that used to fall back to a stacked page ===== */
@media (max-width:767px){
  /* Altijd aan: panels slide up and replace each other, each holding while it fills the screen */
  .sc-hz.on .hz-row{width:100%;height:500%;flex-direction:column;transform:translate3d(0, calc(var(--h) * -80%), 0)}
  .sc-hz.on .hz-p{width:100%;height:20%;padding:calc(var(--top) + 8px) 20px 64px;align-items:center}
  .sc-hz.on .hz-c{max-width:none;transform:translate3d(0, calc((var(--h) * 4 - var(--i)) * -14vh), 0)}
  .sc-hz.on .hz-big{font-size:30vw;left:4vw;bottom:3vh;transform:translate3d(calc((var(--h) * 4 - var(--i)) * -40vw), 0, 0)}
  .sc-hz.on .hz-p1 .h2{font-size:36px}
  .sc-hz.on .hz-c h3{font-size:32px}
  .sc-hz.on .hz-c>p{font-size:16px}
  .sc-hz.on .hz-sp h3{font-size:22px}
  .sc-hz.on .hz-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:4px}
  .sc-hz.on .hz-cards>div{padding:12px;gap:4px;border-radius:10px}
  .sc-hz.on .hz-cards h4{font-size:15px}
  .sc-hz.on .hz-cards p{font-size:12.5px;line-height:1.4}
  .sc-hz.on .hz-cards .hz-lab{font-size:10px}
  .sc-hz.on .hz-bar{bottom:24px;max-width:200px}

  /* Cockpit: copy and bullets first, then the device takes that space and scroll switches its screens */
  .sc-ck.on>.st{--o:clamp(0, calc((var(--p) - .24) / .06), 1);--a:clamp(0, calc((var(--p) - .3) / .1), 1);--dv:clamp(0, calc((var(--p) - .3) / .05), 1)}
  .sc-ck.on .ck-in{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px;padding:0 20px}
  .sc-ck.on .ck-copy{flex:none;gap:12px}
  .sc-ck.on .ck-copy .h2{font-size:28px}
  .sc-ck.on .ck-copy>p:not(.eb),.sc-ck.on .ck-copy ul{opacity:calc(1 - var(--o));transform:translate3d(0, calc(var(--o) * -24px), 0)}
  .sc-ck.on .ck-copy>p:not(.eb){font-size:16px!important}
  .sc-ck.on .ck-copy li{--lk:clamp(0, calc((var(--p) - .02 - var(--k) * .05) / .05), 1)}
  .sc-ck.on .ck-dev{position:absolute;left:16px;right:16px;top:calc(var(--top) + 104px);bottom:16px;opacity:var(--dv);pointer-events:none}
  .sc-ck.on .ck-tilt{height:100%}
  .sc-ck.on .ck-ph{transform:scale(.72);margin:-78px 0}

  /* Ingebouwd: tiles assemble into two columns, heading stays on top */
  .sc-ib.on .ib-in{justify-content:flex-start;gap:20px;padding:0 16px}
  .sc-ib.on .ib-head .h2{font-size:26px}
  .sc-ib.on .ib-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sc-ib.on .ib-t{padding:14px;gap:6px;border-radius:12px}
  .sc-ib.on .ib-t h3{font-size:15px}
  .sc-ib.on .ib-t p{font-size:13px;line-height:1.4}
}

/* ===== the board, crafted: surfaces with depth, headers with icons and counts, a card with role, ring and trail ===== */
.bd-board{perspective:1200px}
.bd-col{display:flex;flex-direction:column;gap:6px;padding:10px;background:#FAF7EF;border:1px solid #E1DED7;box-shadow:inset 0 1px 0 #FFFFFF,0 1px 2px rgba(20,38,31,.05),0 12px 26px -20px rgba(20,38,31,.4)}
.bd-ch{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;color:#55585F;transition:color .3s ease}
.bd-ch svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bd-cnt{margin-left:auto;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:#F2E9D3;color:#55585F;font-size:10px;display:inline-flex;align-items:center;justify-content:center;transition:background-color .3s ease,color .3s ease}
.bd-ghost{display:block;margin-top:auto;height:28px;flex:none;border-radius:8px;background:#FBFAF7;border:1px solid #E6DFCC;box-shadow:0 1px 2px rgba(20,38,31,.06);position:relative}
.bd-ghost::before,.bd-ghost::after{content:"";position:absolute;left:8px;height:4px;border-radius:2px;background:#E1DED7}
.bd-ghost::before{top:8px;width:55%}
.bd-ghost::after{top:16px;width:32%}
.bd-ghost+.bd-ghost{margin-top:0}
.bd-trail{position:absolute;top:94px;left:calc(100% / 12);width:calc(100% * 10 / 12);height:3px;border-radius:2px;background:linear-gradient(90deg, rgba(232,169,58,0), #E8A93A);transform-origin:left center;transform:scaleX(calc(var(--pos, 5) / 5));opacity:.85;z-index:1;pointer-events:none}
.bd-card{top:46px;z-index:2;padding:10px 12px;gap:7px;transform-style:preserve-3d;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(20,38,31,.25),0 14px 28px -12px rgba(20,38,31,.55),0 0 34px rgba(232,169,58,calc(var(--mv, 0) * .6))}
.bd-top{display:flex;align-items:center;gap:8px}
.bd-role{display:grid;flex:none}
.bd-r{grid-area:1/1;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}
.bd-r svg{width:12px;height:12px;fill:none;stroke:#14261F;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bd-r:nth-child(1){background:#F2E9D3}.bd-r:nth-child(2){background:#4F7FB0}.bd-r:nth-child(3){background:#B07FD3}.bd-r:nth-child(4){background:#E8A93A}.bd-r:nth-child(5){background:#8FD3A8}.bd-r:nth-child(6){background:#F2E9D3}
.bd-r:last-child{opacity:1}
.bd-app{flex:1;min-width:0;font-family:'IBM Plex Mono',monospace;font-size:10px;color:#5A3A0A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-ring{width:22px;height:22px;flex:none;transform:rotate(-90deg)}
.bd-ring circle{fill:none;stroke-width:3}
.bd-ring-t{stroke:rgba(20,38,31,.25)}
.bd-ring-f{stroke:#14261F;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--pos, 5) / 5)}
.sc-board.on .bd-card{transform:translateX(calc(var(--pos) * (100% + 12px))) rotateX(calc(var(--mv) * 10deg)) rotateY(calc(var(--mv) * -16deg)) rotate(calc(var(--mv) * -3deg))}
.sc-board.on .bd-app{color:#A3AE9F}
.sc-board.on .bd-ring-t{stroke:#2A4337}
.sc-board.on .bd-ring-f{stroke:#E8A93A}
.sc-board.on .bd-r:last-child{opacity:0}
.sc-board.on>[data-i="0"] .bd-r:nth-child(1),.sc-board.on>[data-i="1"] .bd-r:nth-child(2),.sc-board.on>[data-i="2"] .bd-r:nth-child(3),.sc-board.on>[data-i="3"] .bd-r:nth-child(4),.sc-board.on>[data-i="4"] .bd-r:nth-child(5),.sc-board.on>[data-i="5"] .bd-r:nth-child(6){opacity:1}
.sc-board.on>[data-i="5"] .bd-app{color:#5A3A0A}
.sc-board.on>[data-i="5"] .bd-ring-t{stroke:rgba(20,38,31,.25)}
.sc-board.on>[data-i="5"] .bd-ring-f{stroke:#14261F}
.sc-board.on>[data-i="5"] .bd-r:nth-child(6){background:#14261F}
.sc-board.on>[data-i="5"] .bd-r:nth-child(6) svg{stroke:#E8A93A}
.sc-board.on .bd-col{background:#FAF7EF}
.sc-board.on>[data-i="0"] .bd-col:nth-child(1),.sc-board.on>[data-i="1"] .bd-col:nth-child(2),.sc-board.on>[data-i="2"] .bd-col:nth-child(3),.sc-board.on>[data-i="3"] .bd-col:nth-child(4),.sc-board.on>[data-i="4"] .bd-col:nth-child(5),.sc-board.on>[data-i="5"] .bd-col:nth-child(6){background:#FBFAF7;border-color:#E8A93A;box-shadow:inset 0 1px 0 #FFFFFF,0 0 0 3px rgba(232,169,58,.18),0 16px 30px -18px rgba(138,90,18,.5)}
.sc-board.on>[data-i="0"] .bd-col:nth-child(1) .bd-ch,.sc-board.on>[data-i="1"] .bd-col:nth-child(2) .bd-ch,.sc-board.on>[data-i="2"] .bd-col:nth-child(3) .bd-ch,.sc-board.on>[data-i="3"] .bd-col:nth-child(4) .bd-ch,.sc-board.on>[data-i="4"] .bd-col:nth-child(5) .bd-ch,.sc-board.on>[data-i="5"] .bd-col:nth-child(6) .bd-ch{color:#8A5A12}
.sc-board.on>[data-i="0"] .bd-col:nth-child(1) .bd-cnt,.sc-board.on>[data-i="1"] .bd-col:nth-child(2) .bd-cnt,.sc-board.on>[data-i="2"] .bd-col:nth-child(3) .bd-cnt,.sc-board.on>[data-i="3"] .bd-col:nth-child(4) .bd-cnt,.sc-board.on>[data-i="4"] .bd-col:nth-child(5) .bd-cnt,.sc-board.on>[data-i="5"] .bd-col:nth-child(6) .bd-cnt{background:#E8A93A;color:#14261F}
@media (max-width:767px){
  .sc-board.on .bd-card{top:30px;padding:5px;gap:4px;transform:translateX(calc(var(--pos) * (100% + 6px))) rotateY(calc(var(--mv) * -14deg)) rotate(calc(var(--mv) * -3deg))}
  .sc-board.on .bd-ch{font-size:8px;gap:3px}
  .sc-board.on .bd-ch svg{width:9px;height:9px}
  .sc-board.on .bd-cnt,.sc-board.on .bd-app,.sc-board.on .bd-ring,.sc-board.on .bd-g2{display:none}
  .sc-board.on .bd-r{width:14px;height:14px}
  .sc-board.on .bd-r svg{width:8px;height:8px}
  .sc-board.on .bd-ghost{height:18px;border-radius:5px}
  .sc-board.on .bd-ghost::before{top:5px;left:5px;height:3px}
  .sc-board.on .bd-ghost::after{top:10px;left:5px;height:3px}
  .sc-board.on .bd-trail{top:52px;height:2px}
}

/* ===== cockpit screens, rebuilt from the cockpit's own styles (forest/paper/honey, panels, rows, steps, lanes, drawer) ===== */
.cx{--cn:#14261F;--cn2:#233B31;--cn3:#2F4A3D;--civ:#F4F2EE;--civ2:#FAF8F3;--civ3:#EAE4D4;--cline:#DDD3BC;--cor:#E8A93A;--cord:#8A5A12;--cbl:#2F5D8A;--cblbg:#DCE6F0;--cblfg:#1F4466;--cgrbg:#DCEBDF;--cgrfg:#1F5B3A;--cambg:#F6E7C2;--camfg:#5C4300;--cfg:#1F2128;--cmut:#55585F;font-family:'IBM Plex Sans','Segoe UI',sans-serif;color:var(--cfg);font-size:10px;line-height:1.35;text-align:left}
.cx-shell{display:flex;height:360px;background:var(--civ);border-radius:6px 6px 0 0;overflow:hidden}
.cx-nav{width:116px;flex:none;background:var(--cn);color:#F2E9D3;padding:12px 8px;display:flex;flex-direction:column;gap:1px}
.cx-brand{display:flex;align-items:center;gap:6px;padding:0 4px 8px;font-weight:600;font-size:11px}
.cx-mark{width:16px;height:16px;border-radius:4px;background:var(--cor);color:var(--cn);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cx-grp{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px;text-transform:uppercase;color:#A3AE9F;padding:8px 6px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-it{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;border-radius:6px;color:#D6DCD2;font-size:9.5px}
.cx-it.on{background:var(--cn2);color:#F2E9D3;font-weight:600}
.cx-bdg{font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:600;padding:0 5px;border-radius:999px;background:var(--cor);color:var(--cn)}
.cx-main{flex:1;min-width:0;padding:12px 14px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.cx-eb{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1.2px;text-transform:uppercase;color:var(--cord)}
.cx-h1{font-size:14px;font-weight:600;line-height:1.2}
.cx-cols{display:flex;gap:8px;align-items:flex-start;min-height:0}
.cx-panel{background:var(--civ2);border:1px solid var(--cline);border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cx-wait{flex:3}.cx-now{flex:2}
.cx-h2{font-size:11px;font-weight:600}
.cx-ph2{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.cx-lnk{font-size:8px;color:var(--cord)}
.cx-row{display:flex;align-items:center;gap:6px;padding-top:6px;border-top:1px solid var(--civ3)}
.cx-tag{font-family:'IBM Plex Mono',monospace;font-size:6.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;padding:2px 4px;border-radius:4px;background:var(--cblbg);color:var(--cblfg);flex:none}
.cx-grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cx-tt{font-size:9.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-mu{color:var(--cmut);font-size:8.5px}
.cx-rep{font-size:8px}
.cx-btn{flex:none;font-size:8px;font-weight:600;padding:4px 7px;border-radius:6px;background:var(--cfg);color:var(--civ);align-self:center}
.cx-btn.pr{background:var(--cor);color:var(--cn)}
.cx-run{background:var(--civ);border-radius:8px;padding:7px;display:flex;flex-direction:column;gap:4px}
.cx-meta{font-family:'IBM Plex Mono',monospace;font-size:7px;color:var(--cmut)}
.cx-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px}
.cx-steps>span{display:flex;flex-direction:column;gap:3px;font-size:6.5px;color:#666A70;white-space:nowrap;overflow:hidden}
.cx-steps>span::before{content:"";height:4px;border-radius:2px;background:var(--cline)}
.cx-steps .d::before{background:var(--cbl)}.cx-steps .n::before{background:var(--cor)}
.cx-steps .d,.cx-steps .n{color:var(--cfg)}
.cx-chip{font-size:7px;padding:1px 5px;border-radius:4px;background:var(--cambg);color:var(--camfg);align-self:flex-start;white-space:nowrap}
.cx-chip.g{background:var(--cgrbg);color:var(--cgrfg)}.cx-chip.b{background:var(--cblbg);color:var(--cblfg)}
.cx-ok{color:var(--cgrfg);font-weight:600}
.cx-lanes{display:flex;gap:6px;min-height:0;flex:1}
.cx-lane{width:88px;flex:none;background:var(--civ3);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:5px}
.cx-lh{display:flex;justify-content:space-between;font-size:8px;font-weight:600;white-space:nowrap}
.cx-lh span{font-weight:400;color:var(--cmut)}
.cx-kc{background:var(--civ2);border:1px solid var(--cline);border-radius:6px;padding:5px;font-size:8px;line-height:1.3}
.cx-kc.sel{border-color:var(--cor);box-shadow:0 0 0 2px rgba(232,169,58,.25)}
.cx-drawer{position:absolute;top:0;right:0;bottom:0;width:60%;background:var(--civ2);border-left:1px solid var(--cline);box-shadow:-12px 0 24px -16px rgba(20,38,31,.35);padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.cx-top{display:flex;justify-content:space-between;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--cmut)}
.cx-trk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cx-trk>span{position:relative;padding-top:9px;display:flex;flex-direction:column;gap:2px;font-size:7.5px;font-weight:600;min-width:0;white-space:nowrap}
.cx-trk>span::before{content:"";height:4px;border-radius:2px;background:var(--cline);order:-1}
.cx-trk .d::before{background:var(--cbl)}.cx-trk .n::before{background:var(--cor)}
.cx-trk .t{color:var(--cmut);font-weight:500}
.cx-trk i{position:absolute;top:0;left:0;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:6px;color:var(--cord)}
.cx-trk small{font-family:'IBM Plex Mono',monospace;font-size:6.5px;font-weight:400;color:var(--cmut)}
.cx-trk .n small{color:var(--cord);font-weight:600}
.cx-tabs{display:flex;gap:3px;padding:3px;background:var(--civ3);border-radius:7px}
.cx-tabs span{flex:1;text-align:center;padding:3px 0;border-radius:5px;font-size:7.5px;font-weight:600;color:var(--cmut)}
.cx-tabs .on{background:var(--civ2);color:var(--cfg)}
.cx-log{font-family:'IBM Plex Mono',monospace;font-size:7.5px;line-height:1.55;color:var(--cmut);display:flex;flex-direction:column;background:var(--civ);border-radius:6px;padding:6px}
.cx-envs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.cx-env{background:var(--civ2);border:1px solid var(--cline);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cx-eh{display:flex;justify-content:space-between;align-items:baseline;gap:4px}
.cx-eh b{font-family:'IBM Plex Mono',monospace;font-size:11px}
.cx-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 6px;margin:0;font-size:8px}
.cx-dl dt{color:var(--cmut)}.cx-dl dd{margin:0;min-width:0}
.cx-ph{display:flex;flex-direction:column;height:100%;background:var(--cn);color:#F2E9D3;border-radius:30px;overflow:hidden;font-size:11px}
.cx-pb{flex:1;padding:22px 12px 10px;display:flex;flex-direction:column;gap:9px;min-height:0;overflow:hidden}
.cx-ph .cx-h1{font-size:16px}
.cx-ph .cx-panel{background:var(--cn2);border-color:var(--cn2);color:#F2E9D3}
.cx-ph .cx-row{border-top-color:var(--cn3)}
.cx-ph .cx-tt{font-size:11px}
.cx-ph .cx-mu,.cx-ph .cx-meta{color:#B9C2B6}
.cx-ph .cx-run{background:var(--cn3)}
.cx-ph .cx-steps>span{color:#B9C2B6}
.cx-ph .cx-steps .d,.cx-ph .cx-steps .n{color:#F2E9D3}
.cx-ph .cx-eb,.cx-ph .cx-lnk{color:var(--cor)}
.cx-tabbar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--cn3);padding:8px 4px 14px;font-size:9px;color:#B9C2B6;text-align:center}
.cx-tabbar .on{color:var(--cor);font-weight:600}
@media (max-width:767px){.cx-nav{display:none}.cx-drawer{width:68%}.cx-lane{width:78px}}

/* ===== blue/green with containers: green starts tile by tile, a health pulse, traffic switches, blue stops ===== */
.dp-dia{position:relative;z-index:2;max-width:640px;margin:40px auto 0;display:flex;flex-direction:column;font-family:'IBM Plex Mono',monospace;font-size:11px}
.dp-proxy{align-self:center;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid #3F5C4E;background:#1B3129;color:#F2E9D3}
.dp-pdot{width:8px;height:8px;border-radius:50%;background:#E8A93A}
.dp-wires{display:block;width:100%;height:44px;overflow:visible}
.dp-wires path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.dp-wb{stroke:#4F7FB0;opacity:calc(1 - var(--sw, 1))}
.dp-wg{stroke:#8FD3A8;opacity:var(--sw, 1)}
.dp-pk{stroke:#F2E9D3;stroke-dasharray:2 7;stroke-linecap:round;opacity:0}
.dp-wd{height:28px}
.dp-wd path{stroke:#3F5C4E;stroke-dasharray:3 4}
.dp-stacks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dp-stack{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;border:1px solid}
.dp-sb{background:#16263A;border-color:#2F5D8A;opacity:calc(1 - .45 * var(--so, 1))}
.dp-sg{background:#173A2B;border-color:#2E6B4C}
.dp-sg::after{content:"";position:absolute;inset:-4px;border-radius:17px;border:2px solid #8FD3A8;opacity:calc(var(--hc, 0) * (1 - var(--hc, 0)) * 3.2);transform:scale(calc(1 + var(--hc, 0) * .05));pointer-events:none}
.dp-sh{display:flex;justify-content:space-between;align-items:center;padding:0 2px 2px;color:#CBD3C8;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.dp-sb .dp-sh{color:#9DB8D6}.dp-sg .dp-sh{color:#8FD3A8}
.dp-lv{font-size:10px;letter-spacing:0;text-transform:none;font-weight:600;padding:3px 9px;border-radius:999px;background:#8FD3A8;color:#14261F}
.dp-lvb{opacity:calc(1 - var(--sw, 1))}
.dp-lvg{opacity:var(--sw, 1);transform:translate3d(calc((1 - var(--sw, 1)) * -14px), 0, 0)}
.dp-t{position:relative;display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#F2E9D3;min-width:0}
.dp-tn{opacity:calc(.35 + .65 * clamp(0, calc(var(--tk, 1) * 4), 1));transform:translate3d(0, calc((1 - clamp(0, calc(var(--tk, 1) * 4), 1)) * 10px), 0)}
.dp-to{opacity:calc(1 - .55 * var(--so, 1))}
.dp-dot{position:relative;width:8px;height:8px;flex:none;border-radius:50%;background:#3F5C4E}
.dp-dot::before,.dp-dot::after{content:"";position:absolute;inset:0;border-radius:50%}
.dp-dot::before{background:#F6C76B}
.dp-dot::after{background:#8FD3A8}
.dp-tn .dp-dot::before{opacity:calc(clamp(0, calc((var(--tk, 1) - .3) * 8), 1) - clamp(0, calc((var(--tk, 1) - .72) * 8), 1))}
.dp-tn .dp-dot::after{opacity:clamp(0, calc((var(--tk, 1) - .72) * 8), 1)}
.dp-to .dp-dot::before{opacity:0}
.dp-to .dp-dot::after{opacity:calc(1 - var(--so, 1))}
.dp-dot.on::before{opacity:0}.dp-dot.on::after{opacity:1}
.dp-nm{font-weight:600}
.dp-tv{color:#A3AE9F;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dp-ts{margin-left:auto;display:grid;flex:none;font-size:10px;color:#CBD3C8}
.dp-ts>span{grid-area:1/1;text-align:right;white-space:nowrap}
.dp-tn .dp-ts>:nth-child(1){opacity:clamp(0, calc(1 - (var(--tk, 1) - .3) * 8), 1)}
.dp-tn .dp-ts>:nth-child(2){opacity:calc(clamp(0, calc((var(--tk, 1) - .3) * 8), 1) - clamp(0, calc((var(--tk, 1) - .72) * 8), 1));color:#F6C76B}
.dp-tn .dp-ts>:nth-child(3){opacity:clamp(0, calc((var(--tk, 1) - .72) * 8), 1);color:#8FD3A8}
.dp-to .dp-ts>:nth-child(1){opacity:calc(1 - var(--so, 1));color:#8FD3A8}
.dp-to .dp-ts>:nth-child(2){opacity:var(--so, 1);color:#A3AE9F}
.dp-data{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:14px;background:#1B3129;border:1px solid #2A4337}
.dp-dl{width:100%;text-align:center;color:#A3AE9F;font-size:10px;letter-spacing:1px;text-transform:uppercase}
.dp-db{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#F2E9D3}
.sc-deploy.on>.st{--sw:clamp(0, calc((var(--p) - .42) / .1), 1);--hc:clamp(0, calc((var(--p) - .32) / .08), 1);--so:clamp(0, calc((var(--p) - .58) / .1), 1);--r:clamp(0, calc((var(--p) - .74) / .2), 1)}
.sc-deploy.on .dp-tn{--tk:clamp(0, calc((var(--p) - .02 - var(--k) * .08) / .12), 1)}
.sc-deploy.on .dp-in{max-width:min(520px, 40vw)}
.sc-deploy.on .dp-dia{position:absolute;margin:0;right:max(24px, calc(50% - 576px));top:calc(var(--top) + 8px);bottom:130px;width:min(560px, 48vw);justify-content:center}
.sc-deploy.on .dp-pkb{opacity:calc((1 - var(--sw)) * .9);animation:dpFlow 1.1s linear infinite}
.sc-deploy.on .dp-pkg{opacity:calc(var(--sw) * .9);animation:dpFlow 1.1s linear infinite}
@keyframes dpFlow{to{stroke-dashoffset:-18}}
@media (max-width:767px){
  .sc-deploy.on .dp-in{max-width:none}
  .sc-deploy.on .dp-dia{left:16px;right:16px;width:auto;top:calc(var(--top) + 178px);bottom:104px;font-size:10px}
  .sc-deploy.on .dp-tv{display:none}
  .sc-deploy.on .dp-stacks{gap:10px}
  .sc-deploy.on .dp-stack{padding:8px;gap:5px}
  .sc-deploy.on .dp-t{padding:5px 7px;gap:6px}
  .sc-deploy.on .dp-wires{height:30px}
  .sc-deploy.on .dp-wd{height:20px}
  .sc-deploy.on .dp-sh{font-size:9px}
  .sc-deploy.on .dp-db{padding:4px 8px}
}

/* ===== team panel illustrations, drawn as each panel slides in ===== */
.hz-vis{display:block;width:100%;max-width:320px;margin-top:20px;overflow:visible}
.hz-vis *{vector-effect:non-scaling-stroke}
.v-base{fill:none;stroke:#3F5C4E;stroke-width:3;stroke-linecap:round}
.hz-light .v-base,.hz-sand .v-base{stroke:#DDD3BC}
.v-dr{fill:none;stroke:#E8A93A;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - clamp(0, calc((var(--lv, 1) - var(--d, 0)) / .5), 1))}
.v-pop{transform-box:fill-box;transform-origin:center;transform:scale(clamp(0, calc((var(--lv, 1) - var(--d, 0)) * 5), 1))}
.v-on{opacity:clamp(0, calc((var(--lv, 1) - var(--d, 0)) * 6), 1)}
.v-node{fill:#14261F;stroke:#E8A93A;stroke-width:2.5}
.v-merge{fill:#8FD3A8;stroke:#14261F;stroke-width:2}
.v-box{fill:#1B3129;stroke:#3F5C4E;stroke-width:1.5}
.v-boxg{fill:#1F5A40;stroke:#8FD3A8;stroke-width:1.5}
.v-txt{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;fill:#F2E9D3}
.v-chk{stroke:#8FD3A8}
.v-page{fill:#FBFAF7;stroke:#C9BE9F;stroke-width:1.5}
.v-ln,.v-ln2{fill:none;stroke:#DDD3BC;stroke-width:6;stroke-linecap:round}
.v-ln2{stroke:#C9BE9F}
.v-cb{fill:#F4F2EE;stroke:#C9BE9F;stroke-width:1.5}
.hz-light .v-chk,.hz-sand .v-chk{stroke:#8A5A12}
.v-mag{transform:translate(calc((1 - var(--lv, 1)) * -70px), calc((1 - var(--lv, 1)) * 40px))}
.v-glass{fill:rgba(232,169,58,.08);stroke:#1F2128;stroke-width:5}
.v-handle{fill:none;stroke:#1F2128;stroke-width:8;stroke-linecap:round}
.v-ctr{fill:#FBFAF7;stroke:#C9BE9F;stroke-width:1.5}
.v-dot0{fill:#C9BE9F}
.v-dotg{fill:#1F5B3A}
.v-loop{fill:none;stroke:#8A5A12;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.v-spin{transform-box:fill-box;transform-origin:center;transform:rotate(calc(var(--lv, 1) * 360deg))}
.hz-ic{width:26px;height:26px;fill:none;stroke:#8A5A12;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;padding:6px;border-radius:9px;background:#F6E6C8;box-sizing:content-box}
.sc-hz.on .hz-p{--lv:clamp(0, calc(var(--h) * 4 - var(--i) + 1), 1)}
.sc-hz.on .hz-wv .hz-c{max-width:44vw}
.sc-hz.on .hz-vis{position:absolute;right:7vw;top:50%;margin:0;width:min(34vw, 420px);max-width:none;translate:0 -50%;transform:translate3d(calc((var(--h) * 4 - var(--i)) * -16vw), 0, 0)}
@media (max-width:767px){
  .sc-hz.on .hz-p{flex-direction:column;align-items:flex-start;justify-content:center}
  .sc-hz.on .hz-wv .hz-c{max-width:none}
  .sc-hz.on .hz-vis{position:relative;right:auto;top:auto;translate:none;transform:translate3d(0, calc((var(--h) * 4 - var(--i)) * -10vh), 0);width:100%;max-width:280px;margin-top:18px}
  .sc-hz.on .hz-ic{width:18px;height:18px;padding:4px}
}

/* ===== closing section: three small visuals ===== */
.ct-items{list-style:none;margin:6px 0 0;padding:0;width:100%;max-width:600px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ct-items li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#1B3129;border:1px solid #2A4337;font-size:14px;color:#CBD3C8;text-align:left}
.ct-items svg{width:24px;height:24px;flex:none;fill:none;stroke:#E8A93A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-items svg *{stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--ci, 1))}
.sc-cta.on .ct-items li{--ci:clamp(0, calc((var(--p) - .5 - var(--k) * .08) / .16), 1)}
@media (min-width:768px){.sc-cta.on .ct-in{top:calc(50% + 40px)}}
@media (max-width:767px){.ct-items{gap:6px}.ct-items li{flex-direction:column;align-items:flex-start;gap:6px;padding:10px;font-size:12.5px}}

/* fixes after the browser pass */
.bd-app{display:none}
.bd-top{justify-content:space-between}
.cx-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag btn" "grow btn";gap:3px 6px;align-items:center}
.cx-row>.cx-tag{grid-area:tag;justify-self:start}
.cx-row>.cx-grow{grid-area:grow}
.cx-row>.cx-btn{grid-area:btn}
.cx-envs~.cx-panel .cx-row{display:flex}
.cx-run .cx-tt{white-space:normal}

/* blue/green: the container diagram is the hero of the scene */
.sc-deploy.on .dp-in{max-width:min(340px, 26vw);gap:12px}
.sc-deploy.on .dp-in .h2{font-size:clamp(26px,2.5vw,38px)}
.sc-deploy.on .dp-in>p:not(.eb){font-size:16px}
.sc-deploy.on .dp-dia{max-width:none;left:auto;right:max(24px, calc(50% - 600px));top:calc(var(--top) - 4px);bottom:104px;width:min(820px, calc(100vw - 48px - min(340px, 26vw) - 48px));font-size:14px}
.sc-deploy.on .dp-proxy{padding:10px 20px;gap:10px}
.sc-deploy.on .dp-pdot{width:10px;height:10px}
.sc-deploy.on .dp-wires{height:clamp(40px, 9vh, 76px)}
.sc-deploy.on .dp-wires path{stroke-width:3}
.sc-deploy.on .dp-pk{stroke-width:4;stroke-dasharray:3 9}
.sc-deploy.on .dp-wd{height:clamp(24px, 5vh, 44px)}
.sc-deploy.on .dp-wd path{stroke-width:2}
.sc-deploy.on .dp-stacks{gap:32px}
.sc-deploy.on .dp-stack{padding:14px;gap:9px;border-radius:18px;border-width:1.5px}
.sc-deploy.on .dp-sh{font-size:13px;padding:0 2px 4px}
.sc-deploy.on .dp-lv{font-size:12px;padding:4px 12px}
.sc-deploy.on .dp-t{padding:clamp(7px, 1.3vh, 12px) 14px;gap:12px;border-radius:11px}
.sc-deploy.on .dp-dot{width:11px;height:11px}
.sc-deploy.on .dp-tv{font-size:12px}
.sc-deploy.on .dp-ts{font-size:12.5px}
.sc-deploy.on .dp-data{padding:14px;gap:12px;border-radius:18px}
.sc-deploy.on .dp-dl{font-size:12px}
.sc-deploy.on .dp-db{padding:8px 14px;gap:9px;border-radius:11px}
@media (max-width:767px){
  .sc-deploy.on .dp-in{max-width:none;gap:8px}
  .sc-deploy.on .dp-in .h2{font-size:24px}
  .sc-deploy.on .dp-in>p:not(.eb){font-size:14px}
  .sc-deploy.on .dp-dia{left:12px;right:12px;width:auto;top:calc(var(--top) + 150px);bottom:96px;font-size:11.5px}
  .sc-deploy.on .dp-stacks{gap:10px}
  .sc-deploy.on .dp-stack{padding:9px;gap:6px;border-radius:14px}
  .sc-deploy.on .dp-sh{font-size:10px}
  .sc-deploy.on .dp-lv{font-size:10px;padding:3px 8px}
  .sc-deploy.on .dp-t{padding:8px;gap:7px}
  .sc-deploy.on .dp-ts{font-size:10.5px}
  .sc-deploy.on .dp-proxy{padding:7px 14px}
  .sc-deploy.on .dp-db{padding:6px 9px}
}

/* ===== team panels: product-like UI diagrams, scrubbed by each panel's own progress --q ===== */
.ui{box-sizing:border-box;width:100%;max-width:520px;margin-top:20px;background:#14261F;color:#F2E9D3;border:1px solid #2A4337;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:9px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.35;text-align:left;box-shadow:0 26px 54px -30px rgba(20,38,31,.75)}
.hz-dark .ui{background:#182C24;border-color:#2F4A3D}
.ui-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#CBD3C8;min-width:0}
.ui-hd>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-hd b{color:#F2E9D3;font-weight:600}
.ui-chip{display:inline-block;font-size:11px;padding:3px 9px;border-radius:999px;background:#233B31;color:#CBD3C8;white-space:nowrap}
.ui-chip.or{background:#E8A93A;color:#14261F;font-weight:600}
.ui-chip.gr{background:#8FD3A8;color:#14261F;font-weight:600}
.ui-chip.rd{background:#F4D4CF;color:#7F1D1D;font-weight:600}
.ui-sw{display:grid;flex:none}
.ui-sw>*{grid-area:1/1;justify-self:end}
.ui-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);min-width:0}
.ui-mu{color:#A3AE9F}
.ui-dot{position:relative;width:10px;height:10px;flex:none;border-radius:50%;background:#8FD3A8}
/* build */
.ui-lane{--l:clamp(0, calc((var(--q, 1) - .04 - var(--k) * .06) / .26), 1);opacity:calc(.3 + .7 * clamp(0, calc(var(--l) * 4), 1))}
.ui-nm{font-weight:600;flex:none}
.ui-diff{flex:none;font-size:11px}.ui-diff em{font-style:normal;color:#8FD3A8}.ui-diff s{text-decoration:none;color:#F09A8A}
.ui-bar{flex:1;height:6px;min-width:30px;border-radius:3px;background:#2A4337;overflow:hidden}
.ui-bar>i{display:block;height:100%;background:#E8A93A;transform-origin:left center;transform:scaleX(var(--l))}
.ui-st{font-size:11px;min-width:64px}
.ui-run{color:#F6C76B;opacity:calc(1 - clamp(0, calc((var(--l) - .92) * 14), 1))}
.ui-ok{color:#8FD3A8;opacity:clamp(0, calc((var(--l) - .92) * 14), 1)}
.ui-merge{display:block;width:100%;height:22px;overflow:visible;opacity:clamp(0, calc((var(--q, 1) - .4) * 10), 1)}
.ui-merge path{fill:none;stroke:#3F5C4E;stroke-width:2;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.ui-pr{--pq:clamp(0, calc((var(--q, 1) - .45) / .08), 1);display:flex;flex-direction:column;gap:8px;padding:11px 12px;border-radius:12px;border:1.5px solid #E8A93A;background:#1B3129;opacity:var(--pq);transform:translate3d(0, calc((1 - var(--pq)) * 14px), 0)}
.ui-prs>:nth-child(1){opacity:clamp(0, calc(1 - (var(--q, 1) - .78) * 14), 1)}
.ui-prs>:nth-child(2){opacity:calc(clamp(0, calc((var(--q, 1) - .78) * 14), 1) - clamp(0, calc((var(--q, 1) - .9) * 14), 1))}
.ui-prs>:nth-child(3){opacity:clamp(0, calc((var(--q, 1) - .9) * 14), 1)}
.ui-checks{display:flex;gap:14px;flex-wrap:wrap}
.ui-ck{--ck:clamp(0, calc((var(--q, 1) - .56 - var(--c) * .07) / .05), 1);display:inline-flex;align-items:center;gap:7px}
.ui-box{position:relative;width:16px;height:16px;border-radius:5px;border:1.5px solid #3F5C4E;box-sizing:border-box}
.ui-box::after{content:"✓";position:absolute;inset:-1.5px;border-radius:5px;background:#8FD3A8;color:#14261F;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;opacity:var(--ck)}
/* research */
.ui-sec{--sv:clamp(0, calc((var(--q, 1) - .04 - var(--s) * .13) / .1), 1);display:flex;flex-direction:column;gap:5px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);opacity:var(--sv);transform:translate3d(0, calc((1 - var(--sv)) * 12px), 0)}
.ui-sl{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#E8A93A}
.ui-li{color:#CBD3C8}
.ui-q{--qa:clamp(0, calc((var(--q, 1) - .48 - var(--j) * .07) / .06), 1);display:flex;justify-content:space-between;gap:10px;color:#F2E9D3}
.ui-qa{color:#8FD3A8;opacity:var(--qa)}
.ui-join{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ui-join .ui-chip{--jv:clamp(0, calc((var(--q, 1) - .64 - var(--j) * .06) / .06), 1);opacity:var(--jv);transform:translate3d(calc((1 - var(--jv)) * -14px), 0, 0);background:#2F4A3D;color:#F2E9D3}
.ui-join .ui-mu{opacity:clamp(0, calc((var(--q, 1) - .7) * 10), 1)}
.ui-okc{--ov:clamp(0, calc((var(--q, 1) - .8) / .08), 1);display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1.5px solid #E8A93A;background:#1B3129;opacity:var(--ov);transform:translate3d(0, calc((1 - var(--ov)) * 12px), 0)}
/* ops */
.ui-ops{--iv:clamp(0, calc((var(--q, 1) - .34) * 12), 1);--fx:clamp(0, calc((var(--q, 1) - .72) * 12), 1)}
.ui-hs>:nth-child(1){opacity:calc(1 - var(--iv))}
.ui-hs>:nth-child(2){opacity:calc(var(--iv) - var(--fx))}
.ui-hs>:nth-child(3){opacity:var(--fx)}
.ui-ctrs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ui-ctr{justify-content:flex-start;padding:9px 10px}
.ui-dw::after{content:"";position:absolute;inset:0;border-radius:50%;background:#E8A93A;box-shadow:0 0 0 4px rgba(232,169,58,.25);opacity:calc(var(--iv) - var(--fx))}
.ui-spark{position:relative;padding:8px 10px 6px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.ui-spark svg{display:block;width:100%;height:54px}
.ui-spark polyline{fill:none;stroke:#4F7FB0;stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - clamp(0, calc(var(--q, 1) / .5), 1))}
.ui-spark .ui-mu{font-size:10.5px}
.ui-inc{opacity:var(--iv);transform:translate3d(0, calc((1 - var(--iv)) * 10px), 0);border-color:rgba(232,169,58,.45)}
.ui-inc .ui-sw>*{justify-self:start}
.ui-inc .ui-sw>:nth-child(1){opacity:calc(1 - var(--fx))}
.ui-inc .ui-sw>:nth-child(2){opacity:var(--fx)}
.ui-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ui-stp{--sp:clamp(0, calc((var(--q, 1) - .42 - var(--k) * .1) / .06), 1);text-align:center;padding:7px 4px;border-radius:9px;border:1px solid #2F4A3D;color:#A3AE9F;position:relative;overflow:hidden}
.ui-stp::before{content:"";position:absolute;inset:0;background:#E8A93A;opacity:calc(var(--sp) * .9)}
.ui-stp:last-child::before{background:#8FD3A8}
.ui-stp{isolation:isolate}
.ui-stp::before{z-index:-1}
.ui-stp{color:color-mix(in srgb, #14261F calc(var(--sp) * 100%), #A3AE9F)}
.ui-rep{font-size:11.5px;color:#CBD3C8;opacity:clamp(0, calc((var(--q, 1) - .8) * 10), 1)}
/* specialist results */
.sp-res{--rk:clamp(0, calc((var(--q, 1) - .12 - var(--k) * .12) / .14), 1);display:flex;flex-direction:column;gap:5px;margin-top:6px;padding:10px;border-radius:10px;background:#14261F;color:#F2E9D3;font-family:'IBM Plex Mono',monospace;font-size:11px;opacity:var(--rk);transform:translate3d(0, calc((1 - var(--rk)) * 16px), 0)}
.sp-h{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#E8A93A}
.sp-r{display:flex;justify-content:space-between;gap:8px;color:#CBD3C8}
.sp-r b{color:#F2E9D3;font-weight:600;text-align:right}
.sp-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#F2E9D3}
/* placement */
.sc-hz.on .hz-p{--q:clamp(0, calc(var(--p) * 4 - var(--i) + .7), 1)}
.sc-hz.on .hz-wv .hz-c{max-width:38vw}
.sc-hz.on .ui{width:min(42vw, 540px);max-width:none;margin:0}
@media (max-width:767px){
  .sc-hz.on .ui{width:100%;margin-top:16px;padding:12px;gap:7px;font-size:11px;border-radius:14px}
  .sc-hz.on .ui-chip{font-size:10px;padding:2px 7px}
  .sc-hz.on .ui-row{padding:6px 8px;gap:7px}
  .sc-hz.on .ui-diff{display:none}
  .sc-hz.on .ui-st{min-width:52px;font-size:10px}
  .sc-hz.on .ui-ctrs{gap:5px}
  .sc-hz.on .ui-ctr{padding:6px;gap:5px;font-size:10px}
  .sc-hz.on .ui-spark svg{height:36px}
  .sc-hz.on .ui-sec{padding:7px 9px;gap:3px}
  .sc-hz.on .ui-li:nth-child(4){display:none}
  .sc-hz.on .hz-c h3{font-size:26px}
  .sc-hz.on .hz-c>p{font-size:14px}
  .sc-hz.on .sp-res{padding:7px;font-size:10px;margin-top:4px}
  .sc-hz.on .hz-cards>div>p{display:none}
}

/* ===== closing section: three mini product scenes ===== */
.ct-items{list-style:none;margin:8px 0 0;padding:0;width:100%;max-width:640px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.ct-items li{display:flex;align-items:center;gap:16px;padding:10px;border-radius:16px;background:#1B3129;border:1px solid #2A4337;text-align:left}
.ct-items li{--ci:1}
.cm-tx{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:13px;color:#CBD3C8}
.cm-tx b{font-size:15px;color:#F2E9D3;font-weight:600}
.cm{box-sizing:border-box;width:230px;flex:none;display:flex;flex-direction:column;gap:5px;padding:9px;border-radius:12px;background:#14261F;border:1px solid #2A4337;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#F2E9D3}
.cm-hd{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#CBD3C8}
.cm .ui-chip{font-size:9.5px;padding:2px 7px}
.cm-lock{width:16px;height:16px;fill:none;stroke:#E8A93A;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cm-sh{transform:translateY(calc((1 - clamp(0, calc((var(--ci) - .72) * 6), 1)) * -4px))}
.cm-r{--rj:clamp(0, calc((var(--ci) - .08 - var(--j) * .18) / .15), 1);display:flex;align-items:center;gap:7px;padding:4px 7px;border-radius:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);opacity:var(--rj);transform:translate3d(0, calc((1 - var(--rj)) * 8px), 0)}
.cm-r em{margin-left:auto;font-style:normal;color:#A3AE9F}
.cm-d{width:7px;height:7px;flex:none;border-radius:50%;background:#8FD3A8}
.cm-mu{color:#A3AE9F}
.cm-gs>:nth-child(1){opacity:calc(1 - clamp(0, calc((var(--ci) - .74) * 10), 1))}
.cm-gs>:nth-child(2){opacity:clamp(0, calc((var(--ci) - .74) * 10), 1)}
.cm-btn{position:relative;display:block;text-align:center;padding:7px 0 9px;border-radius:9px;background:#E8A93A;color:#14261F;font-family:'IBM Plex Sans',sans-serif;font-size:12px;font-weight:600;overflow:hidden}
.cm-btn i{position:absolute;left:0;right:0;bottom:0;height:3px;background:#14261F;transform-origin:left center;transform:scaleX(clamp(0, calc((var(--ci) - .3) / .42), 1))}
.cm-traf{display:flex;align-items:center;gap:8px;color:#A3AE9F}
.cm-tt{flex:1;height:6px;border-radius:3px;background:#233B31;overflow:hidden}
.cm-tt i{display:block;width:50%;height:100%;border-radius:3px;background:#F2E9D3;transform:translateX(calc(clamp(0, calc((var(--ci) - .6) * 8), 1) * 100%))}
.cm-sts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cm-st{display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:8px;border:1px solid}
.cm-b{background:#16263A;border-color:#2F5D8A;opacity:calc(1 - .5 * clamp(0, calc((var(--ci) - .6) * 8), 1))}
.cm-g{background:#173A2B;border-color:#2E6B4C}
.cm-sl{display:flex;justify-content:space-between;align-items:center;font-size:9.5px;text-transform:uppercase;letter-spacing:1px}
.cm-b .cm-sl{color:#9DB8D6}.cm-g .cm-sl{color:#8FD3A8}
.cm-sl b{font-size:9px;text-transform:none;letter-spacing:0;padding:1px 6px;border-radius:999px;background:#8FD3A8;color:#14261F}
.cm-b .cm-sl b{opacity:calc(1 - clamp(0, calc((var(--ci) - .6) * 8), 1))}
.cm-g .cm-sl b{opacity:clamp(0, calc((var(--ci) - .6) * 8), 1)}
.cm-tl{display:flex;flex-direction:column;gap:3px}
.cm-tl i{display:block;height:7px;border-radius:3px;background:rgba(255,255,255,.14)}
.cm-b .cm-tl i{background:#4F7FB0}
.cm-g .cm-tl i{background:#8FD3A8;transform-origin:left center;transform:scaleX(clamp(0, calc((var(--ci) - .08 - var(--j) * .12) / .14), 1))}
.sc-cta.on .ct-items li{--ci:clamp(0, calc((var(--p) - .42 - var(--k) * .08) / .3), 1)}
@media (min-width:900px){
  .sc-cta.on .ct-in{max-width:1140px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);grid-auto-rows:auto;column-gap:56px;row-gap:16px;align-items:center;justify-items:start;text-align:left}
  .sc-cta.on .ct-in>*{grid-column:1}
  .sc-cta.on .ct-in>.ct-items{grid-column:2;grid-row:1 / span 6;margin:0;align-self:center}
  .sc-cta.on .ct-in>h2{font-size:clamp(32px,3.6vw,48px)!important}
  .sc-cta.on .ct-in form{max-width:520px}
  .sc-cta.on .ct-in{top:calc(50% + 40px)}
}
@media (max-width:767px){
  .ct-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ct-items li{flex-direction:column;align-items:stretch;gap:6px;padding:6px;border-radius:12px}
  .cm{width:100%;padding:6px;gap:4px;font-size:8.5px;border-radius:9px}
  .cm .ui-chip{font-size:8px;padding:1px 5px}
  .cm-hd{flex-wrap:wrap;gap:3px}
  .cm-r{padding:3px 5px;gap:4px}
  .cm-r em,.cm-traf span:first-child,.cm-mu,.cm-tx>span{display:none}
  .cm-btn{font-size:10px;padding:5px 0 7px}
  .cm-sl{font-size:8px}
  .cm-tx b{font-size:11.5px}
  .sc-cta.on .ct-mark{display:none}
}
.sc-hz.on .hz-sp{width:100%;max-width:1100px}
.sc-hz.on .sp-res{font-size:12px;padding:11px}

/* ===== closing section: the three scenes in a row on top, the call to action centred below ===== */
.ct-in>.ct-items{order:-1}
.ct-items{max-width:980px;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ct-items li{flex-direction:column;align-items:stretch;gap:9px;padding:10px}
.cm{width:100%}
.sc-cta.on .ct-items li{--ci:clamp(0, calc((var(--p) - .08 - var(--k) * .08) / .3), 1);opacity:clamp(0, calc(var(--ci) * 3), 1);transform:translate3d(0, calc((1 - var(--ci)) * 48px), 0)}
.sc-cta.on .ct-in>.ct-items{opacity:1;transform:none}
@media (min-width:768px){
  .sc-cta.on .ct-in{max-width:980px;display:flex;flex-direction:column;align-items:center;justify-items:center;text-align:center;gap:14px;top:calc(50% + 40px)}
  .sc-cta.on .ct-in>*{grid-column:auto}
  .sc-cta.on .ct-in>.ct-items{grid-row:auto;margin:0 0 18px;align-self:stretch}
  .sc-cta.on .ct-in>h2{font-size:clamp(30px,3.4vw,46px)!important}
  .sc-cta.on .ct-in form{max-width:520px}
  .sc-cta.on .ct-mark{width:44px;height:44px}
}
@media (max-width:767px){
  .ct-items li{gap:6px;padding:6px}
}

/* ===== board in the same product-UI language as the container diagram ===== */
.bd-cam{background:#14261F;border:1px solid #2A4337;border-radius:18px;padding:14px;box-shadow:0 26px 54px -30px rgba(20,38,31,.75)}
.sc-board.on .bd-cam{-webkit-mask-image:none;mask-image:none}
.bd-col,.sc-board.on .bd-col{background:#182C24;border:1px solid #2A4337;box-shadow:none;border-radius:14px}
.bd-ch{color:#CBD3C8}
.bd-cnt{background:#233B31;color:#CBD3C8}
.bd-ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);box-shadow:none}
.bd-ghost::before,.bd-ghost::after{background:rgba(255,255,255,.14)}
.bd-trail{background:linear-gradient(90deg, rgba(232,169,58,0), #E8A93A)}
.bd-card{border:1.5px solid #E8A93A}
.sc-board.on .bd-card{background:#233B31;color:#F2E9D3}
.sc-board.on .bd-ttl{font-family:'IBM Plex Mono',monospace;font-size:13px}
.sc-board.on .bd-stat{color:#F6C76B}
.sc-board.on .bd-ring-t{stroke:#3F5C4E}
.sc-board.on>[data-i="0"] .bd-col:nth-child(1),.sc-board.on>[data-i="1"] .bd-col:nth-child(2),.sc-board.on>[data-i="2"] .bd-col:nth-child(3),.sc-board.on>[data-i="3"] .bd-col:nth-child(4),.sc-board.on>[data-i="4"] .bd-col:nth-child(5),.sc-board.on>[data-i="5"] .bd-col:nth-child(6){background:#1B3129;border-color:#E8A93A;box-shadow:0 0 0 3px rgba(232,169,58,.22),0 18px 34px -20px rgba(232,169,58,.45)}
.sc-board.on>[data-i="0"] .bd-col:nth-child(1) .bd-ch,.sc-board.on>[data-i="1"] .bd-col:nth-child(2) .bd-ch,.sc-board.on>[data-i="2"] .bd-col:nth-child(3) .bd-ch,.sc-board.on>[data-i="3"] .bd-col:nth-child(4) .bd-ch,.sc-board.on>[data-i="4"] .bd-col:nth-child(5) .bd-ch,.sc-board.on>[data-i="5"] .bd-col:nth-child(6) .bd-ch{color:#E8A93A}
.sc-board.on>[data-i="0"] .bd-col:nth-child(1) .bd-cnt,.sc-board.on>[data-i="1"] .bd-col:nth-child(2) .bd-cnt,.sc-board.on>[data-i="2"] .bd-col:nth-child(3) .bd-cnt,.sc-board.on>[data-i="3"] .bd-col:nth-child(4) .bd-cnt,.sc-board.on>[data-i="4"] .bd-col:nth-child(5) .bd-cnt,.sc-board.on>[data-i="5"] .bd-col:nth-child(6) .bd-cnt{background:#E8A93A;color:#14261F}
.sc-board.on>[data-i="5"] .bd-card{background:#E8A93A;color:#14261F;border-color:#E8A93A}
.sc-board.on>[data-i="5"] .bd-stat{color:#14261F}
@media (max-width:767px){
  .bd-cam{padding:8px;border-radius:14px}
  .sc-board.on .bd-ttl{font-size:8px}
}

/* ===== Jij houdt de sleutels: each guarantee as a dark product card with its own scrubbed scene ===== */
.ky-dl>div.ky-card{padding:14px;border-radius:18px;background:#14261F;color:#F2E9D3;border:1px solid #2A4337;box-shadow:0 26px 54px -30px rgba(20,38,31,.75);gap:10px}
.ky-card dt{color:#F2E9D3}
.ky-card dt::after{display:none}
.ky-card dd{color:#CBD3C8;font-size:14px;display:flex;flex-direction:column;gap:10px}
.ky-ui{--u:1;display:flex;flex-direction:column;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#F2E9D3}
.ky-ui .ui-chip{font-size:10px;padding:2px 7px}
.ui-chip.am{background:#F6E7C2;color:#5C4300;font-weight:600}
.ky-gr,.ky-ev,.ky-m,.ky-q,.ky-ar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 9px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);min-width:0}
.ky-ev{flex-wrap:wrap;opacity:0}
.ky-tg{position:relative;width:28px;height:16px;flex:none;border-radius:8px;background:#2F4A3D}
.ky-tg::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#A3AE9F}
.ky-ap .ky-tg{background:color-mix(in srgb, #8FD3A8 calc(var(--on) * 100%), #2F4A3D)}
.ky-ap .ky-tg::after{background:#F2E9D3;transform:translateX(calc(var(--on) * 12px))}
.ky-gates{--on:clamp(0, calc((var(--u) - .68) * 10), 1)}
.ky-e1{opacity:clamp(0, calc((var(--u) - .3) * 8), 1)}
.ky-e2{opacity:var(--on)}
.ky-m{flex-direction:column;align-items:stretch;gap:5px}
.ky-m>span{display:flex;justify-content:space-between;gap:8px}
.ky-m b{font-weight:600}
.ky-bar{display:block;height:6px;border-radius:3px;background:#2A4337;overflow:hidden}
.ky-bar>i{display:block;height:100%;background:#E8A93A;transform-origin:left center;transform:scaleX(calc(var(--v) * clamp(0, calc(var(--u) / .6), 1)))}
.ky-al{opacity:clamp(0, calc((var(--u) - .75) * 8), 1)}
.ky-sv{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#E8A93A}
.ky-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ky-c{--cj:clamp(0, calc((var(--u) - .08 - var(--j) * .14) / .14), 1);display:flex;align-items:center;gap:6px;padding:8px;border-radius:9px;background:#173A2B;border:1px solid #2E6B4C;opacity:calc(.25 + .75 * var(--cj))}
.ky-c .ui-dot{width:8px;height:8px;opacity:var(--cj)}
.ky-ext{opacity:clamp(0, calc((var(--u) - .6) * 8), 1)}
.ky-ar{--aj:clamp(0, calc((var(--u) - .1 - var(--j) * .25) / .16), 1);justify-content:flex-start;opacity:var(--aj);transform:translate3d(0, calc((1 - var(--aj)) * 10px), 0)}
.ky-ar .ui-dot{width:8px;height:8px;background:#E8A93A}
.ky-ar:last-child .ui-dot{background:#8FD3A8}
.sc-keys.on .ky-card{--u:clamp(0, calc((var(--p) - .52 - var(--k) * .06) / .28), 1)}
.sc-keys.on>.st{--s:clamp(0, calc((var(--p) - .36) / .12), 1)}
.sc-keys.on .ky-h{transform:translate3d(0, calc((1 - var(--s)) * -50% + var(--s) * (24px - (100vh - var(--top) - 32px) / 2)), 0) scale(calc(1 - var(--s) * .58))}
.sc-keys.on .ky-dl{gap:14px}
.sc-keys.on .ky-dl dd{font-size:13px}
@media (max-width:1079px){.sc-keys.on .ky-dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .sc-keys.on .ky-dl{top:calc(var(--top) + 30px);bottom:auto;translate:none;grid-template-columns:minmax(0,1fr);gap:10px;transform:translate3d(0, calc(clamp(0, calc((var(--p) - .62) / .34), 1) * (-100% + 62vh)), 0)}
  .sc-keys.on .ky-dl>div.ky-card{padding:11px;gap:7px}
  .ky-ui{font-size:10.5px}
  .sc-keys.on .ky-dl dd{font-size:12.5px}
}

/* closing row: two scenes, centred */
.ct-items{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;margin-left:auto;margin-right:auto}
.sc-cta.on .ct-in>.ct-items{align-self:center;width:100%;max-width:720px}
@media (max-width:767px){.ct-items{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Ingebouwd: each tile gets a mini product scene that plays once the tiles have assembled ===== */
.ib-ui{--w:1;display:flex;flex-direction:column;gap:5px;margin:4px 0 2px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#F2E9D3}
.ib-r{--rj:clamp(0, calc((var(--w) - var(--j) * .28) / .2), 1);display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);min-width:0;opacity:calc(.25 + .75 * var(--rj))}
.ib-r>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#CBD3C8}
.ib-r .ui-chip{font-size:9.5px;padding:2px 7px;flex:none;opacity:var(--rj)}
.ib-mail .ib-r:last-child .ui-chip{opacity:clamp(0, calc((var(--w) - .6) * 6), 1)}
.sc-ib.on .ib-t{--w:clamp(0, calc((var(--p) - .5 - var(--k) * .05) / .28), 1)}
.sc-ib.on .ib-t{padding:18px;gap:7px}
.sc-ib.on .ib-t h3{font-size:17px}
.sc-ib.on .ib-t p{font-size:14px}
.sc-ib.on .ib-head .h2{font-size:clamp(26px,2.6vw,36px)}
@media (max-width:767px){
  .ib-ui{font-size:9px;gap:3px}
  .ib-r{padding:3px 6px;gap:4px}
  .ib-r .ui-chip{font-size:8px;padding:1px 5px}
  .sc-ib.on .ib-r:nth-child(3){display:none}
  .sc-ib.on .ib-t{padding:11px;gap:5px}
  .sc-ib.on .ib-t h3{font-size:13.5px}
  .sc-ib.on .ib-t p{font-size:11.5px}
  .sc-ib.on .ib-head .h2{font-size:22px}
}

/* closing section back to the original centred call to action */
.sc-cta.on .ct-in{max-width:760px;gap:20px;top:50%}
.sc-cta.on .ct-in>h2{font-size:clamp(32px, 5vw, 52px)!important}
.sc-cta.on .ct-mark{width:56px;height:56px}
@media (max-width:767px){.sc-cta.on .ct-mark{display:block}}

/* ===== Ergates: Sora for display and headings, the hex-E mark, the swarm cells that replaced the course line ===== */
h1,h2,h3,h4,.h2,.hr-giant,.gt-labels>li,.hz-big,.eg-word{font-family:'Sora','IBM Plex Sans',system-ui,sans-serif}
h1,h2,.h2{letter-spacing:-.02em}
.eg-word{font-weight:600;letter-spacing:-0.035em;line-height:1;white-space:nowrap;font-kerning:normal}
.eg-tld{font-weight:400;letter-spacing:-0.01em;margin-left:-0.02em;color:#E8A93A}
.eg-cell{animation:egWarm 9s ease-in-out infinite}
@keyframes egWarm{0%,30%,100%{fill:#F2E9D3;opacity:1}12%{fill:#F3D49A;opacity:1}20%{fill:#F2E9D3;opacity:.82}}
.eg-swarm{animation:egArrive 9s ease-in-out infinite}
@keyframes egArrive{0%{fill:#F2E9D3;opacity:.12}35%{fill:#F2E9D3;opacity:.4}60%{fill:#E8A93A;opacity:1}82%{fill:#E8A93A;opacity:1}100%{fill:#F2E9D3;opacity:.12}}
@media (prefers-reduced-motion: reduce){.eg-cell,.eg-swarm{animation:none}.eg-swarm{opacity:.4}}
.tm-hex{fill:none;stroke:#2A4337;stroke-width:1;opacity:.85}
.tm-lit{fill:#E8A93A;opacity:var(--o, .4)}
.sc-hero.on .tm-lit{opacity:calc(var(--o, .4) * clamp(0, calc((var(--a) * 1.12 - var(--k, 0)) * 7), 1))}
.sc-cta.on .tm-lit{opacity:calc(var(--o, .4) * clamp(0, calc((var(--ln) * 1.12 - var(--k, 0)) * 7), 1))}
.cx-mark{width:16px;height:16px;flex:none;display:block;border-radius:0;background:none}
.cx-brand .eg-word{font-size:12px;color:#F2E9D3}
.hr-giant{letter-spacing:-.045em}
.sc-hero.on .hr-copy h1{font-size:clamp(32px,3.3vw,48px)!important;letter-spacing:-.03em!important}