/* How It Works: 3D hero visual and emergency pulse. */
.system-hero.with-visual{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:3vw;align-items:center;padding-bottom:40px}
.system-hero.with-visual h1{font-size:clamp(52px,5.4vw,86px)}
.hiw-visual{position:relative;margin:0;aspect-ratio:1/1;max-height:600px;width:100%;justify-self:center}
.hiw-visual canvas,.hiw-visual .hiw-poster{position:absolute;inset:0;width:100%;height:100%}
.hiw-visual canvas{opacity:0;transition:opacity 1.2s ease;cursor:grab}
.hiw-visual.is-live canvas{opacity:1}
.hiw-visual .hiw-poster{object-fit:contain;transition:opacity 1.2s ease}
.hiw-visual.is-live .hiw-poster{opacity:0}
.hiw-visual:before{content:'';position:absolute;left:12%;right:12%;top:18%;bottom:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(198,170,112,.16),rgba(198,170,112,0));pointer-events:none}
@media(max-width:900px){.system-hero.with-visual{grid-template-columns:1fr;gap:8px}.hiw-visual{max-width:440px;aspect-ratio:1.15/1}}
/* Emergency pulse row */
.system-additional .hiw-ecg{grid-column:1/-1;border-top:1px solid #b1976533;padding-top:8px;margin-top:-1vw}
.hiw-ecg .ecg-container{margin-top:24px;max-width:1000px}
.hiw-ecg .ecg-label-top .ecg-label{font-family:'Hanken Grotesk',sans-serif;font-weight:500;letter-spacing:.16em;color:#c6aa70}
.hiw-ecg .ecg-label-top .ecg-time{color:#f3eee3}
.hiw-ecg .ecg-desc{color:#aab1b3}
.hiw-ecg .ecg-labels-bottom{position:relative;display:block;height:64px;margin-top:14px}.hiw-ecg .ecg-label-bottom{position:absolute;left:var(--x);transform:translateX(-50%);white-space:nowrap}
.hiw-ecg .ecg-tagline{margin:44px auto 0;max-width:none;color:#d8c9a8}
@media(max-width:600px){.hiw-ecg .ecg-labels-bottom{display:flex;flex-direction:column;align-items:center;height:auto;gap:6px}.hiw-ecg .ecg-label-bottom{position:static;transform:none}.hiw-ecg .ecg-labels-top{gap:8px}.hiw-ecg .ecg-label-top .ecg-label{font-size:10px;letter-spacing:.1em}}
@media(prefers-reduced-motion:reduce){.hiw-ecg .ecg-label-top,.hiw-ecg .ecg-label-bottom,.hiw-ecg .ecg-tagline{opacity:1!important;transform:none!important;transition:none!important}}
/* Server & Cloud cards */
.srv-ill{height:150px;margin:-6px -6px 26px;display:grid;place-items:center;border:1px solid rgba(185,161,106,.16);background:radial-gradient(90% 120% at 50% 0%,#1a2422 0%,#121819 72%);overflow:hidden}
.srv-ill svg{width:100%;max-width:380px;height:100%;overflow:visible}
.srv-ill *{vector-effect:non-scaling-stroke}
.srv-hull{fill:#1b2427;stroke:#8d7a55;stroke-width:1.4}
.srv-sea{fill:none;stroke:#3c5257;stroke-width:1.4;animation:srvSea 6s linear infinite}
@keyframes srvSea{to{transform:translateX(-40px)}}
.srv-box{fill:#151c1e;stroke:#d9bd80;stroke-width:1.6}
.srv-slot{stroke:#5c6567;stroke-width:1.3;fill:none}
.srv-led{fill:#76c4a0;animation:srvLed 2.4s ease-in-out infinite}.srv-led.l2{animation-delay:.4s}.srv-led.l3{animation-delay:.8s}
@keyframes srvLed{0%,100%{opacity:.25}50%{opacity:1}}
.srv-wifi path{fill:none;stroke:#d9bd80;stroke-width:1.6;stroke-linecap:round;opacity:.15;animation:srvWifi 2.4s ease-in-out infinite}
.srv-wifi .w2{animation-delay:.25s}.srv-wifi .w3{animation-delay:.5s}
@keyframes srvWifi{0%,100%{opacity:.15}35%,60%{opacity:1}}
.srv-link{fill:none;stroke:#c6aa70;stroke-width:1.3;stroke-dasharray:3 5;animation:srvFlow 1.4s linear infinite;opacity:.8}
@keyframes srvFlow{to{stroke-dashoffset:-16}}
.srv-dev{fill:none;stroke:#cdbf9f;stroke-width:1.4}
.srv-nonet circle,.srv-nonet path{fill:none;stroke:#5c6567;stroke-width:1.3}
.srv-nonet .cut{stroke:#c8796a;stroke-width:1.6;stroke-linecap:round}
.cl-cloud{fill:#172022;stroke:#d9bd80;stroke-width:1.6}
.cl-core{fill:none;stroke:#e8cb8c;stroke-width:1.6}
.cl-core-p{fill:none;stroke:#e8cb8c;stroke-width:1.2;transform-origin:268px 44px;animation:clPulse 2.6s ease-out infinite}
@keyframes clPulse{from{transform:scale(1);opacity:.8}to{transform:scale(2.2);opacity:0}}
.cl-net circle,.cl-net path{fill:none;stroke:#8fa0a4;stroke-width:1.3}
.cl-dot{fill:#e8cb8c}.cl-dot.back{fill:#76c4a0}
@media(prefers-reduced-motion:reduce){.srv-ill *{animation:none!important}.cl-dot{display:none}}
/* Hero: one request travelling SmartButton -> Server/Cloud -> Crew and back to the guest. */
.hiw-map{position:relative;margin:0;width:100%;min-width:min(100%,440px);max-width:600px;justify-self:center;aspect-ratio:520/440}
.hiw-map svg{width:100%;height:100%;display:block;overflow:visible}
.hiw-map .hm-path{fill:none;stroke:rgba(201,169,98,.28);stroke-width:1.2}
.hiw-map .hm-return{fill:none;stroke:rgba(201,169,98,.22);stroke-width:1.2;stroke-dasharray:3 6}
.hiw-map .hm-node{fill:#141b1f;stroke:rgba(201,169,98,.55);stroke-width:1.2}
.hiw-map .hm-icon{fill:none;stroke:#d9bd80;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hiw-map .hm-halo{fill:none;stroke:#d9bd80;stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}
.hiw-map .hm-dot{fill:#f1d9a2}
.hiw-map text{font:500 16px 'Hanken Grotesk',sans-serif;letter-spacing:.04em;fill:#c9ced0;text-anchor:middle}
.hiw-map text.hm-sub{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;fill:#a88f5e}
.hiw-map .hm-a .hm-halo{animation:hmPulse 7s ease-out 0s infinite}
.hiw-map .hm-b .hm-halo{animation:hmPulse 7s ease-out 1.75s infinite}
.hiw-map .hm-c .hm-halo{animation:hmPulse 7s ease-out 3.5s infinite}
.hiw-map .hm-a .hm-halo.hm-back{animation:hmPulse 7s ease-out 5.6s infinite}
@keyframes hmPulse{0%{opacity:.9;transform:scale(1)}18%{opacity:0;transform:scale(1.55)}100%{opacity:0;transform:scale(1.55)}}
.hiw-map{opacity:0;animation:hmIn 1.6s cubic-bezier(.2,.7,.2,1) .2s forwards}
@keyframes hmIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.hiw-map{animation:none;opacity:1}.hiw-map .hm-dot{display:none}.hiw-map .hm-halo{animation:none!important}.hiw-map .hm-path,.hiw-map .hm-return{stroke:rgba(201,169,98,.55)}}
@media (max-width:800px){.hiw-map{max-width:420px;margin-top:8px}}

/* Emergency timeline heading: says what the gesture is before the timeline (Branko 18.10). */
.hiw-ecg .ecg-heading{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,2.6vw,36px);line-height:1.2;color:#f3eee3;text-align:center;margin:0 auto 28px;max-width:760px}