/* Homepage hero film: "One building, seven systems" (2026-10-29).
   Loaded only by the homepage. Everything is scoped under .hb-hero; keyframe names and every
   percentage, duration and delay are the approved mockup's. Differences from the mockup, on
   purpose: no CSS filter inside the SVG (Safari on iPhone): glows use the SVG filter #hf-glow and
   light pools use radial gradients; the system buttons are .hf-chip (main.js binds .chip);
   focus mode lifts opacity with !important instead of animation:none, so no animation restarts
   and the shared clock stays in sync; .waiting (first view on phones) and .hf-off (off screen)
   pause the stage like .paused. Only transform, opacity and stroke-dashoffset animate. */

/* hero layout: wider art column than the old drawing */
.hb-hero .hb-hero-row{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:48px}
@media (max-width:1100px){.hb-hero .hb-hero-row{grid-template-columns:minmax(0,1fr)}}

/* stage */
.hb-hero .stage{position:relative;min-width:0;border:1px solid rgba(120,170,255,.2);border-radius:8px;background:radial-gradient(120% 70% at 78% 8%,rgba(77,158,255,.16),transparent 55%),linear-gradient(#08111f,#050810 72%);overflow:hidden;box-shadow:0 40px 120px -40px rgba(29,123,255,.35),inset 0 1px 0 rgba(255,255,255,.04)}
.hb-hero .st-h{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
.hb-hero .st-pp{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;margin-left:auto;border:1px solid rgba(120,170,255,.28);border-radius:999px;background:rgba(5,8,16,.75);color:#c9d2e0;font:600 12px Inter,system-ui,sans-serif;cursor:pointer;transition:border-color .2s,color .2s}
.hb-hero .st-pp:hover{border-color:#4d9eff;color:#fff}
.hb-hero .st-pp:focus-visible{border-color:#4d9eff;color:#fff;outline:2px solid #4d9eff;outline-offset:2px}
.hb-hero .st-pp svg{width:10px;height:10px}
.hb-hero .st-pp .i-play{display:none}
.hb-hero .stage.paused .st-pp .i-play{display:inline}
.hb-hero .stage.paused .st-pp .i-pause{display:none}
html:not(.js) .hb-hero .st-pp{display:none}
.hb-hero .sv{position:relative}
.hb-hero .scene{display:block;width:100%;height:auto;aspect-ratio:680/600}
.hb-hero .sky-par{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.hb-hero .sky-far{transform:translate(calc(var(--px,0) * -14px),calc(var(--py,0) * -6px))}
.hb-hero .sky-near{transform:translate(calc(var(--px,0) * -24px),calc(var(--py,0) * -10px))}
.hb-hero .st-foot{position:relative;border-top:1px solid rgba(120,170,255,.14);background:rgba(4,7,13,.78);padding:16px 16px 18px;display:flex;flex-direction:column;gap:14px}
.hb-hero .caps{position:relative;height:44px;transition:opacity .3s}
.hb-hero .cap{position:absolute;inset:0;margin:0;display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:600;color:#e8edf5;line-height:1.35}
.hb-hero .cap b{flex:none;font:600 10.5px var(--mono);letter-spacing:.14em;color:#6f86a8}
.hb-hero .hf-chips{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.hb-hero .hf-chip{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-height:58px;padding:10px 10px 9px;border:1px solid rgba(120,170,255,.16);border-radius:6px;background:rgba(9,14,24,.7);color:#aab6c8;font:600 12px/1.2 Inter,system-ui,sans-serif;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .2s,color .2s,background-color .2s}
.hb-hero .hf-chip:hover{color:#fff;border-color:rgba(120,170,255,.45)}
.hb-hero .hf-chip:focus-visible{color:#fff;border-color:rgba(120,170,255,.45);outline:2px solid #4d9eff;outline-offset:2px}
.hb-hero .hf-chip:disabled{cursor:default;opacity:1;color:#aab6c8}
.hb-hero .hf-chip .dot{position:relative;z-index:1;width:8px;height:8px;border-radius:50%}
.hb-hero .hf-chip .cl{position:relative;z-index:1}
.hb-hero .hf-chip .cg{position:absolute;inset:0;border-radius:6px;opacity:0}
.hb-hero .hf-chip.sel{color:#fff;border-color:#e8edf5;background:rgba(20,30,50,.9)}
.hb-hero .stage:not(.focus) .fcards{margin-bottom:-14px}
.hb-hero .fcard{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:2px 0 4px}
.hb-hero .fcard[hidden]{display:none}
.hb-hero .stage.focus .hf-chip .cg{opacity:0!important}
.hb-hero .stage.focus .hf-chip.sel .cg{opacity:1!important}
.hb-hero .fcard .ft{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px}
.hb-hero .fcard .fn{font-size:19px;font-weight:800;letter-spacing:-.015em;display:flex;align-items:center;gap:10px}
.hb-hero .fcard .fn i{width:10px;height:10px;border-radius:50%;display:inline-block}
.hb-hero .fcard .fl{margin:0;font-size:14px;line-height:1.55;color:#a3adbd}
.hb-hero .fcard .fa{display:flex;flex-wrap:wrap;gap:8px}
.hb-hero a.fbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:6px;font-weight:700;font-size:14px;border:1px solid rgba(120,170,255,.3);color:#e8edf5;background:rgba(9,14,24,.8)}
.hb-hero a.fbtn:hover{color:#fff;border-color:#4d9eff}
.hb-hero a.fbtn.rep{border-color:rgba(245,158,11,.45);color:#fbd38d}
.hb-hero a.fbtn.rep:hover{border-color:#f59e0b;color:#fff}

/* svg drawing */
.hb-hero .ln{fill:none;stroke:rgba(139,188,255,.62);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.hb-hero .dim{fill:none;stroke:rgba(120,170,255,.24);stroke-width:1}
.hb-hero .wall{fill:#0c1628;stroke:rgba(139,188,255,.55);stroke-width:1.2;stroke-linejoin:round}
.hb-hero .wall2{fill:#0a1323;stroke:rgba(139,188,255,.5);stroke-width:1.2;stroke-linejoin:round}
.hb-hero .ext{fill:#0e1a31;stroke:rgba(139,188,255,.6);stroke-width:1.2;stroke-linejoin:round}
.hb-hero .slab{fill:#13203a;stroke:rgba(139,188,255,.55);stroke-width:1.1;stroke-linejoin:round}
.hb-hero .slabf{fill:#1b2b4b;stroke:rgba(139,188,255,.7);stroke-width:1.1}
.hb-hero .obj{fill:#0f1a2f;stroke:rgba(139,188,255,.6);stroke-width:1.1;stroke-linejoin:round}
.hb-hero .ppl{fill:#cdd8ea}
.hb-hero .tgb{fill:rgba(4,8,16,.92);stroke-width:1}
.hb-hero .tgt{font:600 10.5px Inter,system-ui,sans-serif;fill:#e8edf5;letter-spacing:.01em}
.hb-hero .ind{font:700 11px 'JetBrains Mono',monospace;fill:#f5c46b}
.hb-hero .flow{fill:none;stroke:#a78bfa;stroke-width:1.4;stroke-dasharray:3 7;opacity:.55;animation:flow 1.1s linear infinite}
.hb-hero .cab{fill:none;stroke:rgba(167,139,250,.32);stroke-width:1.3;stroke-linejoin:round}
.hb-hero .pulse{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* intro: the blueprint draws itself, then fills */
.hb-hero .df{stroke-dasharray:2400;stroke-dashoffset:2400;animation:df 2.3s cubic-bezier(.55,0,.25,1) .1s both}
@keyframes df{0%{stroke-dashoffset:2400;fill-opacity:0}62%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:1}}
.hb-hero .fi{animation:fi .9s ease 1.5s both}
@keyframes fi{from{opacity:0}to{opacity:1}}

/* ambient loops */
@keyframes flow{to{stroke-dashoffset:-20}}
.hb-hero .blk{animation:blk 1.4s steps(2,jump-none) infinite}
@keyframes blk{0%{opacity:1}100%{opacity:.15}}
.hb-hero .apr{transform-origin:250px 126px;animation:apr 1.8s ease-out infinite}
@keyframes apr{0%{transform:scale(.4);opacity:.95}100%{transform:scale(2.6);opacity:0}}
.hb-hero .rsw{transform-origin:462px 102px;animation:rsw 7s ease-in-out infinite alternate}
@keyframes rsw{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
.hb-hero .twk{animation:twk 3.2s ease-in-out infinite alternate}
@keyframes twk{from{opacity:.25}to{opacity:.9}}

/* the film: one 16 s timeline, starts after the intro */
.hb-hero .f{animation-duration:16s;animation-delay:2.4s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:ease-in-out}
.hb-hero .kint{animation-name:kint}.hb-hero .kacc{animation-name:kacc}.hb-hero .kcam{animation-name:kcam}.hb-hero .kelv{animation-name:kelv}.hb-hero .knet{animation-name:knet}.hb-hero .kav{animation-name:kav}.hb-hero .kcab{animation-name:kcab}
@keyframes kint{0%,13%{opacity:0}15%,34%{opacity:1}37%,89%{opacity:0}91%,97%{opacity:1}100%{opacity:0}}
@keyframes kacc{0%,30%{opacity:0}32%,44%{opacity:1}47%,89%{opacity:0}91%,97%{opacity:1}100%{opacity:0}}
@keyframes kcam{0%,36%{opacity:0}38%,56%{opacity:1}59%,89%{opacity:0}91%,97%{opacity:1}100%{opacity:0}}
@keyframes kelv{0%,49%{opacity:0}51%,70%{opacity:1}73%,89%{opacity:0}91%,97%{opacity:1}100%{opacity:0}}
@keyframes knet{0%,68%{opacity:0}70%,97%{opacity:1}100%{opacity:0}}
@keyframes kav{0%,74%{opacity:0}76%,97%{opacity:1}100%{opacity:0}}
@keyframes kcab{0%,82%{opacity:0}84%,97%{opacity:1}100%{opacity:0}}
.hb-hero .kledr{animation-name:kledr}
@keyframes kledr{0%,30%{opacity:1}32%,44%{opacity:0}47%,89%{opacity:1}91%,97%{opacity:0}100%{opacity:1}}
.hb-hero .klamp{animation-name:klamp}
@keyframes klamp{0%,40%{opacity:0}45%,97%{opacity:1}100%{opacity:0}}

.hb-hero .ti1{animation-name:ti1}.hb-hero .ti2{animation-name:ti2}.hb-hero .tac{animation-name:tac}.hb-hero .tca{animation-name:tca}.hb-hero .tel{animation-name:tel}.hb-hero .tne{animation-name:tne}.hb-hero .tav{animation-name:tav}.hb-hero .tcb{animation-name:tcb}
@keyframes ti1{0%,13%{opacity:0}15%,25%{opacity:1}28%,100%{opacity:0}}
@keyframes ti2{0%,22%{opacity:0}24%,34%{opacity:1}37%,100%{opacity:0}}
@keyframes tac{0%,30%{opacity:0}32%,43%{opacity:1}46%,100%{opacity:0}}
@keyframes tca{0%,37%{opacity:0}39%,54%{opacity:1}57%,100%{opacity:0}}
@keyframes tel{0%,51%{opacity:0}53%,68%{opacity:1}71%,100%{opacity:0}}
@keyframes tne{0%,69%{opacity:0}71%,80%{opacity:1}83%,100%{opacity:0}}
@keyframes tav{0%,76%{opacity:0}78%,88%{opacity:1}91%,100%{opacity:0}}
@keyframes tcb{0%,84%{opacity:0}86%,92%{opacity:1}95%,100%{opacity:0}}

.hb-hero .pint{stroke-dasharray:40 719;animation-name:pint}
.hb-hero .pacc{stroke-dasharray:40 380;animation-name:pacc}
.hb-hero .pcam{stroke-dasharray:40 210;animation-name:pcam}
.hb-hero .pelv{stroke-dasharray:40 400;animation-name:pelv}
.hb-hero .pnet{stroke-dasharray:40 450;animation-name:pnet}
.hb-hero .pav{stroke-dasharray:40 524;animation-name:pav}
@keyframes pint{0%,14%{stroke-dashoffset:40;opacity:0}15%{opacity:1}23%{stroke-dashoffset:-679;opacity:1}24%,100%{stroke-dashoffset:-679;opacity:0}}
@keyframes pacc{0%,29%{stroke-dashoffset:40;opacity:0}30%{opacity:1}33%{stroke-dashoffset:-340;opacity:1}34%,100%{stroke-dashoffset:-340;opacity:0}}
@keyframes pcam{0%,35%{stroke-dashoffset:40;opacity:0}36%{opacity:1}38.5%{stroke-dashoffset:-170;opacity:1}39.5%,100%{stroke-dashoffset:-170;opacity:0}}
@keyframes pelv{0%,49%{stroke-dashoffset:40;opacity:0}50%{opacity:1}54%{stroke-dashoffset:-360;opacity:1}55%,100%{stroke-dashoffset:-360;opacity:0}}
@keyframes pnet{0%,68%{stroke-dashoffset:40;opacity:0}69%{opacity:1}73%{stroke-dashoffset:-410;opacity:1}74%,100%{stroke-dashoffset:-410;opacity:0}}
@keyframes pav{0%,74%{stroke-dashoffset:40;opacity:0}75%{opacity:1}79%{stroke-dashoffset:-484;opacity:1}80%,100%{stroke-dashoffset:-484;opacity:0}}

.hb-hero .vo{animation-name:vo}
@keyframes vo{0%,1%{transform:translateX(-210px);opacity:0}3%{transform:translateX(-190px);opacity:1}12%{transform:translateX(0px);opacity:1}31%{transform:translateX(0px);opacity:1}34%{transform:translateX(-62px);opacity:1}36%,100%{transform:translateX(-62px);opacity:0}}
.hb-hero .vi{animation-name:vi}
@keyframes vi{0%,34%{transform:translate(0px,0px) scale(1);opacity:0}37%,41%{transform:translate(0px,0px) scale(1);opacity:1}52%{transform:translate(300px,-30px) scale(.86);opacity:1}54%,100%{transform:translate(300px,-30px) scale(.86);opacity:0}}
.hb-hero .occ{animation-name:occ}
@keyframes occ{0%,52%{opacity:0}54%,67%{opacity:1}69%,100%{opacity:0}}
.hb-hero .car{animation-name:car}
@keyframes car{0%,55%{transform:translateY(0px)}67%,96%{transform:translateY(-230px)}99%,100%{transform:translateY(0px)}}
.hb-hero .dl1{animation-name:dl1}.hb-hero .dr1{animation-name:dr1}.hb-hero .dl3{animation-name:dl3}.hb-hero .dr3{animation-name:dr3}
@keyframes dl1{0%,48%{transform:translateX(0px)}51%,55%{transform:translateX(-22px)}58%,100%{transform:translateX(0px)}}
@keyframes dr1{0%,48%{transform:translateX(0px)}51%,55%{transform:translateX(22px)}58%,100%{transform:translateX(0px)}}
@keyframes dl3{0%,66%{transform:translateX(0px)}68%,72%{transform:translateX(-22px)}75%,100%{transform:translateX(0px)}}
@keyframes dr3{0%,66%{transform:translateX(0px)}68%,72%{transform:translateX(22px)}75%,100%{transform:translateX(0px)}}
.hb-hero .v3{animation-name:v3}
@keyframes v3{0%,68%{transform:translate(0px,0px) scale(.86);opacity:0}70%{transform:translate(0px,0px) scale(.86);opacity:1}78%,96%{transform:translate(-56px,30px) scale(1);opacity:1}98%,100%{transform:translate(-56px,30px) scale(1);opacity:0}}
.hb-hero .leaf{animation-name:leaf}
@keyframes leaf{0%,32%{transform:translateX(0px)}35%,43%{transform:translateX(-24px)}46%,100%{transform:translateX(0px)}}
.hb-hero .cone{transform-origin:230px 346px;animation-name:cone}
@keyframes cone{0%,37%{transform:rotate(0deg)}52%,58%{transform:rotate(-118deg)}72%,100%{transform:rotate(0deg)}}
.hb-hero .i1{animation-name:i1}.hb-hero .i2{animation-name:i2}.hb-hero .i3{animation-name:i3}
@keyframes i1{0%,59%{opacity:1}60%,98%{opacity:0}99%,100%{opacity:1}}
@keyframes i2{0%,59%{opacity:0}60%,63%{opacity:1}64%,100%{opacity:0}}
@keyframes i3{0%,63%{opacity:0}64%,97%{opacity:1}99%,100%{opacity:0}}

.hb-hero .c0{animation-name:c0}.hb-hero .c1{animation-name:c1}.hb-hero .c2{animation-name:c2}.hb-hero .c3{animation-name:c3}.hb-hero .c4{animation-name:c4}.hb-hero .c5{animation-name:c5}.hb-hero .c6{animation-name:c6}.hb-hero .c7{animation-name:c7}.hb-hero .c8{animation-name:c8}
@keyframes c0{0%,10%{opacity:1}12%,98%{opacity:0}100%{opacity:1}}
@keyframes c1{0%,11%{opacity:0}13%,29%{opacity:1}31%,100%{opacity:0}}
@keyframes c2{0%,30%{opacity:0}32%,41%{opacity:1}43%,100%{opacity:0}}
@keyframes c3{0%,42%{opacity:0}44%,51%{opacity:1}53%,100%{opacity:0}}
@keyframes c4{0%,52%{opacity:0}54%,66%{opacity:1}68%,100%{opacity:0}}
@keyframes c5{0%,67%{opacity:0}69%,74%{opacity:1}76%,100%{opacity:0}}
@keyframes c6{0%,75%{opacity:0}77%,82%{opacity:1}84%,100%{opacity:0}}
@keyframes c7{0%,83%{opacity:0}85%,89%{opacity:1}91%,100%{opacity:0}}
@keyframes c8{0%,90%{opacity:0}92%,97%{opacity:1}99%,100%{opacity:0}}

/* pause, wait for first view, off screen; focus on one system */
.hb-hero .stage.paused *,.hb-hero .stage.hf-off *,html.js .hb-hero .stage.waiting *{animation-play-state:paused!important}
.hb-hero .sys,.hb-hero .vis{transition:opacity .45s}
.hb-hero .stage.focus .sys{opacity:.13}
.hb-hero .stage.focus .vis{opacity:.22}
.hb-hero .stage.focus .caps{visibility:hidden;height:0;overflow:hidden}
.hb-hero .stage.f-int .s-int,.hb-hero .stage.f-acc .s-acc,.hb-hero .stage.f-cam .s-cam,.hb-hero .stage.f-elv .s-elv,.hb-hero .stage.f-net .s-net,.hb-hero .stage.f-av .s-av,.hb-hero .stage.f-cab .s-cab{opacity:1}
.hb-hero .stage.f-int .s-int .f,.hb-hero .stage.f-acc .s-acc .f,.hb-hero .stage.f-cam .s-cam .f,.hb-hero .stage.f-elv .s-elv .f,.hb-hero .stage.f-net .s-net .f,.hb-hero .stage.f-av .s-av .f,.hb-hero .stage.f-cab .s-cab .f{opacity:1!important}
.hb-hero .stage.f-int .s-int .pulse,.hb-hero .stage.f-acc .s-acc .pulse,.hb-hero .stage.f-cam .s-cam .pulse,.hb-hero .stage.f-elv .s-elv .pulse,.hb-hero .stage.f-net .s-net .pulse,.hb-hero .stage.f-av .s-av .pulse{stroke-dasharray:none;stroke-width:2}
.hb-hero .stage.f-acc .s-acc .kledr{opacity:0!important}
.hb-hero .stage.f-cab .s-cab .cab{stroke:#a78bfa}

@media (max-width:1100px){.hb-hero .hf-chips{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.hb-hero .hf-chips{grid-template-columns:repeat(2,minmax(0,1fr))}.hb-hero .hf-chip{min-height:46px;flex-direction:row;align-items:center}.hb-hero .caps{height:62px}.hb-hero .cap{font-size:14.5px}.hb-hero .st-h .hb-n{display:none}.hb-hero .tg{display:none}.hb-hero .hf-chip:last-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){
.hb-hero .stage *{animation:none!important;transition:none!important}
.hb-hero .df{stroke-dashoffset:0}
.hb-hero .kint,.hb-hero .kacc,.hb-hero .kcam,.hb-hero .kelv,.hb-hero .knet,.hb-hero .kav,.hb-hero .kcab,.hb-hero .klamp{opacity:1}
.hb-hero .kledr,.hb-hero .pint,.hb-hero .pacc,.hb-hero .pcam,.hb-hero .pelv,.hb-hero .pnet,.hb-hero .pav,.hb-hero .vi,.hb-hero .v3,.hb-hero .occ,.hb-hero .i2,.hb-hero .i3,.hb-hero .cap,.hb-hero .ti1,.hb-hero .ti2,.hb-hero .tac,.hb-hero .tca,.hb-hero .tel,.hb-hero .tne,.hb-hero .tav,.hb-hero .tcb{opacity:0}
.hb-hero .cap.c8{opacity:1}
.hb-hero .tg{display:none}
.hb-hero .st-pp{display:none}
}

/* "Where do you start?": seven rows with a colour dot */
.hb .hb-where a.hb-sys{grid-template-columns:40px 12px minmax(0,1fr) 20px}
.hb-where .hb-sys .sd{width:8px;height:8px;border-radius:50%}