/* Helios VMS — site styles. index.html is plain HTML; this file is all its CSS.
   The base rules are the final state: anything that animates is hidden or reset only
   under a class assets/site.js adds (html.js, .iv-armed, .hw-armed, inline styles). */

/* Fonts: self-hosted Google Fonts files, latin + latin-ext (same ranges Google serves).
   Geist and Geist Mono are variable, so one file covers every weight. */
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/geist-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/geist-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/geist-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/geist-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Page */
body{margin:0;background:#FAFAF8;color:#141615;font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#141615;text-decoration:none}a:hover{color:#C4501A}
h1,h2,h3,h4,h5,p{margin:0}ul{margin:0;padding:0;list-style:none}
@keyframes hpulse{0%,100%{opacity:1}50%{opacity:.35}}
.dealers-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media (min-width:1024px){.dealers-grid{grid-template-columns:5fr 7fr;gap:56px}}
@keyframes tdbar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.td-bars i{display:block;width:2px;height:100%;border-radius:2px;background:#E8641E;transform-origin:50% 100%;animation:tdbar .9s ease-in-out infinite}
.td-bars i:nth-child(2){animation-delay:.15s}.td-bars i:nth-child(3){animation-delay:.3s}.td-bars i:nth-child(4){animation-delay:.45s}.td-bars i:nth-child(5){animation-delay:.6s}
@media (prefers-reduced-motion:reduce){.td-bars i{animation:none;transform:scaleY(.6)}}
@media (max-width:640px){.td-cards{position:static!important;width:auto!important;margin-top:8px}.td-cards>div{transform:none!important;opacity:1!important;transition:none!important}}
/* Hardware grid: self-bordered tiles, centered rows (4+3 desktop, 2 per row below), no filler cells */
.hw-grid{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:40px;overflow:hidden;border-radius:14px}
.hw-tile{position:relative;box-sizing:border-box;flex:0 0 calc(50% - 4px);background:#1A1D1C;border:1px solid #2A2E2C;border-radius:10px;padding:28px 16px;text-align:center;font-size:17px;font-weight:600;letter-spacing:-.01em;color:#DADDDA}
@media (min-width:1024px){.hw-tile{flex-basis:calc(25% - 6px)}}
.hw-tile::before{content:"";position:absolute;top:10px;right:10px;width:6px;height:6px;border-radius:50%;background:#3FB950}
.hw-tile span{display:block;opacity:1}
.hw-grid::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.14) 50%,rgba(255,255,255,0))}
/* Armed (JS + motion allowed): start hidden/gray/dim, then play once on .hw-on */
.hw-grid.hw-armed .hw-tile{opacity:0;transform:translateY(14px)}
.hw-grid.hw-armed .hw-tile::before{background:#4A4F4C}
.hw-grid.hw-armed .hw-tile span{opacity:.7}
.hw-tile:nth-child(1){--i:0;--d:1s}.hw-tile:nth-child(2){--i:1;--d:1.3s}.hw-tile:nth-child(3){--i:2;--d:1.6s}.hw-tile:nth-child(4){--i:3;--d:1.9s}.hw-tile:nth-child(5){--i:4;--d:1.2s}.hw-tile:nth-child(6){--i:5;--d:1.5s}.hw-tile:nth-child(7){--i:6;--d:1.8s}.hw-tile:nth-child(n+8){--i:7;--d:2s}
.hw-grid.hw-on .hw-tile{animation:hwRise .45s cubic-bezier(.2,.7,.2,1) calc(var(--i)*60ms) both}
.hw-grid.hw-on::after{animation:hwSweep 1.2s ease-in-out .9s both}
.hw-grid.hw-on .hw-tile::before{animation:hwDot .7s ease-out var(--d) both}
.hw-grid.hw-on .hw-tile span{animation:hwName .4s ease-out var(--d) both}
@keyframes hwRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hwSweep{from{opacity:1;transform:translateX(0)}to{opacity:1;transform:translateX(350%)}}
@keyframes hwDot{0%{background:#4A4F4C;box-shadow:0 0 0 0 rgba(63,185,80,0)}30%{background:#3FB950;box-shadow:0 0 0 5px rgba(63,185,80,.35)}100%{background:#3FB950;box-shadow:0 0 0 0 rgba(63,185,80,0)}}
@keyframes hwName{from{opacity:.7}to{opacity:1}}
/* In-view motion (setupInView): JS + motion allowed adds .iv-armed; the observer adds .iv-on (once)
   or toggles .iv-live (data-iv="loop"). Unarmed = no JS or reduced motion = the base rules = final state. */
[data-iv=loop]:not(.iv-live) *{animation-play-state:paused!important}
/* Stats strip: tabular figures, $0 odometer (CSS), counts + type-in (JS), once */
.stat-v{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.stat-p{color:#5A5F5C;font-size:15px;line-height:1.45;margin-top:6px;text-wrap:balance}
.stat-odo{display:inline-block;height:1.1em;overflow:hidden;vertical-align:top}
.stat-odo>span,.stat-odo>span>span{display:block}
.stat-n{display:inline-grid;justify-items:end}
.stat-n::before{content:attr(data-stat-count);grid-area:1/1;visibility:hidden}
.stat-n>span{grid-area:1/1}
.stats-grid.iv-armed:not(.iv-on) .stat-v{opacity:0}
.stats-grid.iv-armed .stat-odo>span{transform:translateY(-90%)}
.stats-grid.iv-on .stat-v{animation:statIn .25s ease-out both}
.stats-grid.iv-on .stat-odo>span{animation:statOdo .9s cubic-bezier(.33,1,.68,1) both}
.stats-grid.iv-on [data-stat-type]::after{content:"";display:inline-block;width:3px;height:.78em;margin-left:4px;background:#E8641E;vertical-align:-.04em;animation:statCaret 1.3s steps(1,end) both}
@keyframes statIn{from{opacity:0}}
@keyframes statOdo{from{transform:translateY(-90%)}to{transform:none}}
@keyframes statCaret{to{opacity:0}}
/* Feature blocks are link targets from the platform cards; clear the sticky header */
[id^=feature-]{scroll-margin-top:104px}
/* Platform cards: 3 / 2 / 1 columns, self-bordered, staggered rise once, hover lift + icon motion + "See it" */
.pf-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:48px}
@media (min-width:640px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.pf-grid{grid-template-columns:repeat(3,1fr)}}
.pf-card{position:relative;background:#FAFAF8;border:1px solid #E7E7E2;border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:12px}
.pf-card.iv-armed:not(.iv-on){opacity:0;transform:translateY(14px)}
.pf-card.iv-on{animation:hwRise .45s cubic-bezier(.2,.7,.2,1) calc(var(--k,0)*60ms) both}
.pf-ico{display:block;width:24px;height:24px;margin-bottom:4px;overflow:visible;fill:none;stroke:#141615;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pf-ico .o{stroke:#E8641E}
.pf-ico .of{fill:#E8641E;stroke:none}
.pf-ico .pf-spark,.pf-ico .pf-lock,.pf-ico .pf-ping{transform-box:fill-box;transform-origin:center}
.pf-ico .pf-ping{opacity:0}
.pf-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.pf-tags span{font-family:'Geist Mono',monospace;font-size:11px;padding:4px 9px;border-radius:999px;background:#EFEFEA;color:#474B49}
.pf-see{position:absolute;top:32px;right:32px;font-size:13px;font-weight:500;line-height:24px;color:#C4501A}
@media (hover:hover){
.pf-card:hover{background:#fff;border-color:#DCDCD5;box-shadow:0 16px 40px -24px rgba(20,22,21,.35)}
.pf-see{opacity:0}
.pf-card:hover .pf-see,.pf-card:focus-within .pf-see{opacity:1}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.pf-card{transition:translate .25s cubic-bezier(.2,.7,.2,1),background-color .25s,border-color .25s,box-shadow .25s}
.pf-card:hover{translate:0 -2px}
.pf-see{transform:translateX(-4px);transition:opacity .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
.pf-card:hover .pf-see,.pf-card:focus-within .pf-see{transform:none}
.pf-card:hover .pf-hop{animation:pfHop 1.4s ease-in-out}
.pf-card:hover .pf-spark{animation:pfSpark .6s ease-in-out}
.pf-card:hover .pf-rays{animation:pfFlash .8s linear}
.pf-card:hover .pf-head{animation:pfScrub .9s ease-in-out}
.pf-card:hover .pf-lock{animation:pfLock .5s ease-out}
.pf-card:hover .pf-ping{animation:pfPing .9s ease-out}
}
@keyframes pfHop{18%,25%{transform:translate(0,8.5px)}43%,50%{transform:translate(-10px,8.5px)}68%,75%{transform:translate(-10px,0)}93%{transform:none}}
@keyframes pfSpark{50%{transform:scale(1.4) rotate(45deg)}to{transform:rotate(90deg)}}
@keyframes pfFlash{25%,75%{opacity:.15}50%{opacity:1}}
@keyframes pfScrub{50%{transform:translateX(7px)}}
@keyframes pfLock{from{opacity:.2;transform:scale(1.25)}60%{opacity:1;transform:scale(.94)}}
@keyframes pfPing{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}
/* Setup: the three rules fill 01 → 02 → 03 as one progress line; each step's copy rises as its rule completes */
.setup-rule{height:2px;background:#E7E7E2;margin-bottom:24px;overflow:hidden}
.setup-rule i{display:block;height:100%;background:#141615;transform-origin:0 50%}
.setup-step:nth-child(2){--s:1}.setup-step:nth-child(3){--s:2}
.setup-step>:nth-child(3){--j:1}.setup-step>:nth-child(4){--j:2}
.setup-steps.iv-armed .setup-rule i{transform:scaleX(0)}
.setup-steps.iv-armed .setup-step>:not(.setup-rule){opacity:0;transform:translateY(14px)}
.setup-steps.iv-on .setup-rule i{animation:setupFill .7s cubic-bezier(.65,0,.35,1) calc(var(--s,0)*.7s) both}
.setup-steps.iv-on .setup-step>:not(.setup-rule){animation:hwRise .5s cubic-bezier(.2,.7,.2,1) calc(var(--s,0)*.7s + .55s + var(--j,0)*70ms) both}
@keyframes setupFill{from{transform:scaleX(0)}to{transform:none}}
.setup-rec{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid #E7E7E2;border-radius:999px;background:#fff;font-family:'Geist Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.08em;color:#141615;white-space:nowrap}
.setup-rec i{width:7px;height:7px;border-radius:50%;background:#FF4D3A}
.setup-rec.iv-armed i{animation:hpulse 1.6s ease-in-out infinite}
/* Edge cards: 240x120 line illustrations, ink + one orange accent; loops run only while on screen */
.edge-art{display:block;flex-shrink:0;width:240px;max-width:100%;height:auto;aspect-ratio:2/1;margin-top:20px;fill:none;stroke:#141615;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.edge-art .o{stroke:#E8641E}
.edge-art .f{fill:#141615;stroke:none}
.edge-art .of{fill:#E8641E;stroke:none}
.edge-art text{fill:#141615;stroke:none;font-family:'Geist Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.06em}
.edge-art .ea-rays,.edge-art .ea-chk{transform-box:fill-box;transform-origin:center}
.edge-art .ea-bars rect{transform-box:fill-box;transform-origin:0 50%}
.edge-art .ea-flow{stroke-dasharray:12 200;stroke-dashoffset:-44}
.edge-art .ea-sel,.edge-art .ea-chk{opacity:0}
.edge-art .ea-p0{opacity:1}
.ea-bars rect:nth-child(2){--i:1}.ea-bars rect:nth-child(3){--i:2}.ea-bars rect:nth-child(4){--i:3}
.ea-leds circle:nth-child(2){--d:-.8s;--t:2.3s}.ea-leds circle:nth-child(3){--d:-1.5s;--t:1.9s}
.ea-flows path:nth-child(2){--d:-.75s}.ea-flows path:nth-child(3){--d:-1.5s}
.ea-p1{--p:1}.ea-p2{--p:2}
.edge-art.iv-armed .ea-rays{animation:eaRays 3.6s ease-in-out infinite}
.edge-art.iv-armed .ea-bars rect{animation:eaBar .4s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--i,0)*.45s) both}
.edge-art.iv-armed .ea-leds circle{animation:eaLed var(--t,1.6s) ease-in-out var(--d,0s) infinite}
.edge-art.iv-armed .ea-flow{animation:eaFlow 2.25s linear var(--d,0s) infinite}
.edge-art.iv-armed .ea-scan{animation:eaScan 3.5s cubic-bezier(.45,0,.35,1) infinite}
.edge-art.iv-armed .ea-sel{animation:eaSel 10.5s ease calc(var(--p,0)*3.5s) infinite both}
.edge-art.iv-armed .ea-chk{animation:eaChk 10.5s ease calc(var(--p,0)*3.5s) infinite both}
@keyframes eaRays{50%{opacity:.35;transform:scale(.86)}}
@keyframes eaBar{from{opacity:0;transform:scaleX(.2)}}
@keyframes eaLed{50%{opacity:.2}}
@keyframes eaFlow{0%{stroke-dashoffset:12}70%,100%{stroke-dashoffset:-100}}
@keyframes eaScan{0%{transform:translateX(0)}32%,100%{transform:translateX(280px)}}
@keyframes eaSel{0%,11%{opacity:0}14%,30%{opacity:1}33%,100%{opacity:0}}
@keyframes eaChk{0%,11%{opacity:0;transform:scale(.4)}14%{opacity:1;transform:scale(1.12)}16%,30%{opacity:1;transform:none}33%,100%{opacity:0;transform:none}}

/* Button hovers (were style-hover="" attributes). !important beats the inline background. */
.hover-orange:hover{background:#E8641E!important;color:#fff!important}
.hover-rust:hover{background:#C4501A!important;color:#fff!important}
.hover-black:hover{background:#000!important;color:#fff!important}
/* Video overlays without JS: the clips never play, so every overlay shows on the poster in its
   finished state (full fill, last segment lit).
   site.js adds html.js, which hands these back to the inline styles and the cue clock. */
html:not(.js) [data-cue]{opacity:1!important;transform:none!important}
html:not(.js) [data-fill]{transform:none!important}
html:not(.js) [data-seg$=",99"]{background:#141615;color:#fff!important}
/* Print: settle every animation on its last frame */
@media print{
@page{margin:.5cm}
figure,table{break-inside:avoid}
*,*::before,*::after{print-color-adjust:exact;-webkit-print-color-adjust:exact;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;animation-delay:-99s!important;animation-duration:.001s!important;animation-iteration-count:1!important;animation-fill-mode:both!important;animation-play-state:running!important;transition-duration:0s!important}
}

/* Helios VMS — closing call-to-action (section#demo). Every selector is scoped to .hcta. */
.hcta{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;min-height:520px;display:flex;align-items:center;
  color:#fff;background:linear-gradient(115deg,#E5601C 0%,#E8641E 46%,#E0591B 72%,#C9521B 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 40px 90px -46px rgba(196,80,26,.75)}
.hcta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hcta-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,76%) var(--my,50%),rgba(255,210,160,.38),rgba(255,210,160,0) 62%)}

/* copy column */
.hcta-copy{position:relative;z-index:2;flex:0 0 auto;box-sizing:border-box;width:min(620px,52%);padding:72px 0 72px 72px}
.hcta-kicker{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 13px 0 11px;border-radius:999px;
  background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#141615;
  font:500 12px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
.hcta-dot{width:7px;height:7px;border-radius:50%;background:#141615;animation:hcta-live 1.8s ease-out infinite}
.hcta-h{margin:22px 0 0;color:#fff;font:600 clamp(40px,4.5vw,60px)/1.02 Geist,system-ui,sans-serif;letter-spacing:-.04em}
.hcta-h span{display:block;color:#141615}
.hcta-p{margin:20px 0 0;max-width:470px;color:#141615;font:400 18px/1.5 Geist,system-ui,sans-serif}

/* "ask anything" bar: illustrative, types the product's own example searches */
.hcta-ask{margin-top:30px;display:flex;align-items:center;gap:10px;height:58px;max-width:470px;box-sizing:border-box;padding:0 9px 0 18px;
  border-radius:18px;background:rgba(14,16,15,.93);color:#F4F4F0;font:500 16px/1 Geist,system-ui,sans-serif;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 22px 44px -22px rgba(20,22,21,.7)}
.hcta-spark{flex:0 0 auto}
.hcta-q{white-space:nowrap;overflow:hidden}
.hcta-caret{flex:0 0 auto;width:2px;height:20px;margin-left:-8px;border-radius:1px;background:#F59A5E;animation:hcta-blink 1.05s steps(2,start) infinite}
.hcta-found{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 13px;border-radius:12px;
  background:rgba(61,220,132,.14);color:#3DDC84;font:500 12px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;
  opacity:0;transform:translateX(8px);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.9,.25,1.2)}
.hcta-ask.is-found .hcta-found{opacity:1;transform:none}

/* buttons */
.hcta-btns{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.hcta-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;box-sizing:border-box;border-radius:999px;
  font:500 16px/1 Geist,system-ui,sans-serif;text-decoration:none;white-space:nowrap;
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.hcta-btn svg{transition:transform .2s ease}
.hcta-btn--ink{background:#141615;color:#fff;box-shadow:0 14px 30px -16px rgba(20,22,21,.8)}
.hcta-btn--ink:hover{background:#000;color:#fff;transform:translateY(-2px);box-shadow:0 20px 36px -16px rgba(20,22,21,.85)}
.hcta-btn--ink:hover svg{transform:translateX(4px)}
.hcta-btn--light{background:#fff;color:#141615}
.hcta-btn--light:hover{background:#FAFAF8;color:#141615;transform:translateY(-2px)}
.hcta-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* orbit beacon: the logo's rings become the site, features orbit it */
.hcta-artwrap{position:absolute;z-index:1;top:0;right:0;bottom:0;width:48%;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hcta-art{position:relative;flex:0 0 auto;width:460px;height:460px}
.hcta-tracks{position:absolute;inset:0;width:100%;height:100%}
.hcta-sweep{position:absolute;inset:18px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 250deg,rgba(255,255,255,.18) 359deg,rgba(255,255,255,0) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 0 23%,#000 24% 99%,transparent 100%);mask:radial-gradient(circle,transparent 0 23%,#000 24% 99%,transparent 100%);
  animation:hcta-spin 7s linear infinite}
.hcta-ripple,.hcta-ping{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6);opacity:0;animation:hcta-ripple 4.2s cubic-bezier(.2,.6,.3,1) infinite}
.hcta-ripple--2{animation-delay:2.1s}
.hcta-ping{border:2px solid #fff;animation:none}
.hcta-art.is-ping .hcta-ping{animation:hcta-ripple 1.1s cubic-bezier(.2,.6,.3,1) 1}
.hcta-track{position:absolute;inset:0;animation:hcta-spin var(--t) linear infinite}
.hcta-k1{--t:38s;--r:108px}
.hcta-k2{--t:70s;--r:160px;animation-direction:reverse}
.hcta-k3{--t:110s;--r:212px}
.hcta-node,.hcta-chip{position:absolute;left:50%;top:50%;transform:rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1)) translate(-50%,-50%)}
.hcta-node{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.2)}
.n1{--a:30deg}.n2{--a:150deg}.n3{--a:270deg}
.c1{--a:20deg}.c2{--a:140deg}.c3{--a:260deg}.c4{--a:78deg}.c5{--a:198deg}.c6{--a:318deg}
.hcta-chip>span{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:rgba(14,16,15,.9);color:#F4F4F0;
  font:500 11.5px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 12px 24px -12px rgba(20,22,21,.6);animation:hcta-spin var(--t) linear infinite}
.hcta-k2 .hcta-chip>span{animation-direction:normal}
.hcta-k1 .hcta-chip>span,.hcta-k3 .hcta-chip>span{animation-direction:reverse}
.hcta-chip i{width:6px;height:6px;border-radius:50%;background:#F59A5E}
.hcta-chip i.hcta-live{background:#3DDC84;box-shadow:0 0 0 3px rgba(61,220,132,.22)}
.hcta-core{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.34),rgba(255,255,255,0) 70%)}
.hcta-core svg{display:block;width:100%;height:100%}
.hcta-ring{transform-box:view-box;transform-origin:50% 50%;animation:hcta-spin 14s linear infinite}
.hcta-art.is-ping .hcta-core{animation:hcta-pop .6s cubic-bezier(.2,.9,.25,1.3) 1}

@keyframes hcta-spin{to{transform:rotate(360deg)}}
@keyframes hcta-ripple{0%{transform:scale(.6);opacity:.75}100%{transform:scale(3);opacity:0}}
@keyframes hcta-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes hcta-blink{to{visibility:hidden}}
@keyframes hcta-live{0%{box-shadow:0 0 0 0 rgba(20,22,21,.45)}100%{box-shadow:0 0 0 8px rgba(20,22,21,0)}}

/* script-driven states (added by cta.js only; without JS the section shows its final state) */
.hcta.hcta--js:not(.is-live) *,.hcta.hcta--js:not(.is-live) *::before,.hcta.hcta--js:not(.is-live) *::after{animation-play-state:paused!important}
.hcta.hcta--pre .hcta-copy>*{opacity:0;transform:translateY(22px)}
.hcta.hcta--pre .hcta-art{opacity:0;transform:scale(.86) rotate(-12deg)}
.hcta.is-in .hcta-copy>*{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.hcta.is-in .hcta-copy>:nth-child(2){transition-delay:.08s}
.hcta.is-in .hcta-copy>:nth-child(3){transition-delay:.16s}
.hcta.is-in .hcta-copy>:nth-child(4){transition-delay:.24s}
.hcta.is-in .hcta-copy>:nth-child(5){transition-delay:.32s}
.hcta.is-in .hcta-art{transition:opacity 1s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)}

/* narrow desktop: shrink the beacon so orbiting chips never pass under the copy */
@media (min-width:960px) and (max-width:1199px){.hcta-art{transform:scale(.82)}.hcta.hcta--pre .hcta-art{transform:scale(.7) rotate(-12deg)}}
/* tablet + phone: beacon on top, copy below */
@media (max-width:959px){
  .hcta{flex-direction:column;align-items:stretch;min-height:0}
  .hcta-artwrap{position:relative;width:auto;height:390px;order:-1}
  .hcta-art{transform:scale(.8)}
  .hcta.hcta--pre .hcta-art{transform:scale(.68) rotate(-12deg)}
  .hcta-copy{width:auto;padding:4px 32px 40px}
  .hcta-glow{background:radial-gradient(420px circle at var(--mx,50%) var(--my,22%),rgba(255,210,160,.38),rgba(255,210,160,0) 62%)}
}
@media (max-width:479px){
  .hcta-copy{padding:0 22px 30px}
  .hcta-artwrap{height:300px}
  .hcta-art{transform:scale(.58)}
  .hcta.hcta--pre .hcta-art{transform:scale(.48) rotate(-12deg)}
  .hcta-chip>span{height:40px;padding:0 15px;gap:9px;font-size:16px}
  .hcta-chip i{width:8px;height:8px}
  .hcta-h{font-size:34px}
  .hcta-p{font-size:16.5px}
  .hcta-ask{height:52px;padding-left:14px;font-size:15px}
  .hcta-found{height:34px;padding:0 10px}
  .hcta-btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .hcta *,.hcta *::before,.hcta *::after{animation:none!important;transition:none!important}
  .hcta-ripple,.hcta-ping,.hcta-sweep{display:none}
}

/* Helios VMS — PTZ controller section (section#controller). Every selector is scoped to .hpad / .hp-. */
.hpad{--pad-a:#2B2F32;--pad-b:#0D0E0F;--pad-hi:#3A3F43;--pad-bump:#1C1F21;--pad-bump-edge:#3A3F42;color:#141615}
.hpad.hpad--red{--pad-a:#D62B22;--pad-b:#7A120D;--pad-hi:#E8483D;--pad-bump:#AE221B;--pad-bump-edge:#E0473C}
.hpad-head{max-width:820px}
.hpad-kicker{font:400 13px/1.4 'Geist Mono',ui-monospace,monospace;color:#C4501A;letter-spacing:.04em}
.hpad-h{margin:16px 0 0;font:600 clamp(34px,4.4vw,56px)/1.05 Geist,system-ui,sans-serif;letter-spacing:-.035em;color:#141615}
.hpad-p{margin:18px 0 0;max-width:620px;font:400 18px/1.5 Geist,system-ui,sans-serif;color:#5A5F5C}

.hpad-stage{margin-top:48px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px;align-items:center}

/* camera view: same dark frame + warm glow as the site's other video blocks */
.hpad-viewwrap{position:relative;min-width:0}
.hpad-glow{position:absolute;inset:-9% -3% -18% 6%;background:radial-gradient(closest-side,rgba(232,100,30,.28),rgba(232,100,30,0));filter:blur(30px);pointer-events:none}
.hpad-view{position:relative;background:#0B0D0C;border-radius:20px;padding:8px;border:1px solid #232725;box-shadow:0 40px 80px -30px rgba(20,22,21,.5)}
.hpad-screen{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0A0F12}
/* the camera: a real frame, moved by transform (pan/tilt = translate, zoom = scale) */
.hpad-lens{position:absolute;inset:0;overflow:hidden}
.hpad-lens.is-focus{animation:hpad-focus .8s ease-out 1}
.hpad-world{position:absolute;left:0;top:0;width:100%;height:0;padding-bottom:71.373%;transform-origin:0 0;
  background:#161C1F url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAiADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDJj0N7qYXiXy+Ux3qGU/dPYjPHFWn0BY+TdRKTyMjGf1qL+1/K3Jb20awnpkcke9SSarJdbVkKIFORtj/xoJGWumR3cqWz3qQDzSGkB44X/wCvTGs/JLRfaRNsYgOR2rV0xIHkcEo7MMgyIOD7fkKy72MW9y67AwDbhsHQ0xle10wwby8/mbwP4TWtp3hefU4phCyZQZyazkjijcSNK6EsCRu+U88/StuwvLmxkdre9by2DZBQHjPrTTQMwnt0XfGuMqflOaZHHFISFlJK9fl/xqaQmOUoInZV53AcAfWoY4JxcGYIiR7jhncKDWcm7aDS7k8bLFEpkyCpboPpipYrhGfAYq3+1yD/AFFLHbSXlzBb2oD54GDnLd6u6lp9rBEIH3xalEf3i5yD6FT3H+eKpaoQQyIfkmRcNxyAQasz2cTQkjMZxjg1kWsoI2uDkdcVaNzJAhEbh0I6HtQBWJIt5uT99h+HNZs4G5uB2/8AQRRRS6jLFo7x2MLozKy8gg4IOetWNRkd79mZ2Zt6nJOTRRTEVs4lf6mpSSYWyaKKYj//2Q==") 0 0/100% 100% no-repeat}
.hpad-world picture{position:absolute;inset:0;display:block}
.hpad-img{display:block;width:100%;height:100%;object-fit:cover}
.hpad.hpad--js .hpad-img{opacity:0;transition:opacity .7s ease}
.hpad.hpad--js .hpad-img.is-loaded{opacity:1}
.hpad-light,.hpad-glint{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:screen}
.hpad-light{aspect-ratio:1;background:radial-gradient(closest-side,rgba(255,246,232,.42),rgba(255,236,214,.14) 45%,rgba(255,236,214,0));animation:hpad-flicker 6.4s linear infinite}
.hpad-light--b{animation-duration:7.9s;animation-delay:-2.3s}
.hpad-light--c{background:radial-gradient(closest-side,rgba(214,230,255,.7),rgba(214,230,255,0));animation:hpad-twinkle 3.2s ease-in-out infinite}
.hpad-glint{aspect-ratio:2/1;transform:translate(-50%,-50%) rotate(-30deg);background:radial-gradient(closest-side,rgba(255,250,240,.34),rgba(255,250,240,0));animation:hpad-flicker 6.4s linear infinite}
.hpad-grain{position:absolute;inset:-48px;pointer-events:none;opacity:.2;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.6 .6 .6 0 -.4 .6 .6 .6 0 -.4 .6 .6 .6 0 -.4 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/200px 200px;
  animation:hpad-grain .8s steps(1,end) infinite}
.hpad-scan{position:absolute;inset:0;pointer-events:none;background:radial-gradient(125% 95% at 50% 50%,rgba(0,0,0,0) 56%,rgba(0,0,0,.42) 100%)}
.hpad-hud{position:absolute;inset:0;pointer-events:none;color:#F4F4F0;font:500 12px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.hpad-tl,.hpad-tr,.hpad-bl,.hpad-br{position:absolute;display:flex;align-items:center;gap:8px;height:28px;padding:0 11px;border-radius:8px;background:rgba(0,0,0,.55)}
.hpad-tl{left:14px;top:14px;font:500 13px/1 Geist,system-ui,sans-serif;letter-spacing:0}
.hpad-tr{right:14px;top:14px}
.hpad-bl{left:14px;bottom:14px;gap:16px;color:#B9BCB8}
.hpad-br{right:14px;bottom:14px;color:#B9BCB8}
.hpad-bl b,.hpad-br b{color:#F4F4F0;font-weight:500}
.hpad-rec{width:7px;height:7px;border-radius:50%;background:#FF4D3A;animation:hpad-pulse 1.6s ease-in-out infinite}
.hpad-cross{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:1.5px solid rgba(244,244,240,.75);box-sizing:border-box}
.hpad-cross::before,.hpad-cross::after{content:"";position:absolute;background:linear-gradient(90deg,rgba(244,244,240,.75) 0 14px,rgba(244,244,240,0) 14px calc(100% - 14px),rgba(244,244,240,.75) calc(100% - 14px))}
.hpad-cross::before{left:-22px;right:-22px;top:50%;height:1.5px;margin-top:-.75px}
.hpad-cross::after{top:-22px;bottom:-22px;left:50%;width:1.5px;margin-left:-.75px;background:linear-gradient(180deg,rgba(244,244,240,.75) 0 14px,rgba(244,244,240,0) 14px calc(100% - 14px),rgba(244,244,240,.75) calc(100% - 14px))}
.hpad-zoom{position:absolute;right:20px;top:50%;width:4px;height:112px;margin-top:-56px;border-radius:2px;background:rgba(244,244,240,.22)}
.hpad-zoom span{position:absolute;left:-4px;width:12px;height:12px;border-radius:50%;background:#F4F4F0;transform:translateY(50%);box-shadow:0 0 0 3px rgba(0,0,0,.35)}
.hpad-toast{position:absolute;left:50%;top:14px;display:flex;align-items:center;gap:10px;height:30px;padding:0 14px;border-radius:999px;white-space:nowrap;
  background:rgba(14,16,15,.88);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font:600 13px/1 Geist,system-ui,sans-serif;letter-spacing:0;opacity:0;transform:translate(-50%,-8px);transition:opacity .25s ease,transform .35s cubic-bezier(.2,.9,.25,1.2)}
.hpad-toast span:first-child{font:500 11px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.08em;color:#F59A5E}
.hpad-toast.is-on{opacity:1;transform:translate(-50%,0)}
.hpad-flash{position:absolute;inset:0;background:#fff;opacity:0}
.hpad-flash.is-on{animation:hpad-flash .5s ease-out 1}

/* controller column */
.hpad-side{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.hpad-status{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;background:#F0F0EB;color:#474B49;font:500 13px/1 Geist,system-ui,sans-serif;white-space:nowrap}
.hpad-sdot{width:8px;height:8px;border-radius:50%;background:#8A8F8C}
.hpad-status.is-demo .hpad-sdot{background:#E8641E;animation:hpad-pulse 1.4s ease-in-out infinite}
.hpad-status.is-live{background:rgba(22,163,74,.1);color:#15632F}
.hpad-status.is-live .hpad-sdot{background:#16A34A}
.hpad-padwrap{position:relative;width:100%;max-width:470px;padding-top:6px}
.hpad-padglow{position:absolute;left:12%;right:12%;top:14%;bottom:24%;background:radial-gradient(closest-side,rgba(232,100,30,.2),rgba(232,100,30,0));filter:blur(26px);pointer-events:none}
.hpad--red .hpad-padglow{background:radial-gradient(closest-side,rgba(199,50,42,.22),rgba(199,50,42,0))}
.hpad-pad{position:relative;aspect-ratio:600/420;animation:hpad-float 6s ease-in-out infinite;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hpad-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 22px rgba(20,22,21,.3))}
.hpad-shadow{width:64%;height:20px;margin:0 auto;border-radius:50%;background:radial-gradient(closest-side,rgba(20,22,21,.3),rgba(20,22,21,0));animation:hpad-shadow 6s ease-in-out infinite}
.hpad-note{margin:4px 0 0;max-width:360px;text-align:center;font:400 13.5px/1.45 Geist,system-ui,sans-serif;color:#5A5F5C}

/* controller artwork (original design) */
.hp-trig{fill:#1A1C1E;stroke:#2F3336;stroke-width:1.5}
.hp-bump{fill:var(--pad-bump);stroke:var(--pad-bump-edge);stroke-width:1.2}
.hp-lbl{font:600 11px 'Geist Mono',ui-monospace,monospace;fill:#8A8F8C;text-anchor:middle}
.hp-lbl-s{font-size:9px;fill:rgba(255,255,255,.5);dominant-baseline:central}
.hp-face{fill:#17191B;stroke:#2C3033;stroke-width:2}
.hp-let{font:600 16px Geist,system-ui,sans-serif;fill:#C9CCC9;text-anchor:middle;dominant-baseline:central}
.hp-mark{fill:#6A6F6C}
.hp-glyph{fill:none;stroke:#8A8F8C;stroke-width:1.3}
.hp-lines{fill:none;stroke:#8A8F8C;stroke-width:1.4;stroke-linecap:round}
.hp-led{fill:none;stroke:#5A5F5C;stroke-width:2.2}
.hp-ring{stroke:rgba(232,100,30,0);stroke-width:3}
.hp-btn{transition:filter .15s ease}
.hp-btn[data-b="lt"],.hp-btn[data-b="rt"]{transition:transform .12s ease,filter .15s ease}
.hp-btn.is-on .hp-face,.hp-btn.is-on .hp-trig,.hp-btn.is-on .hp-bump{fill:#E8641E;stroke:#FFB27A}
.hp-btn.is-on .hp-let,.hp-btn.is-on .hp-lbl,.hp-btn.is-on .hp-mark{fill:#141615}
.hp-btn.is-on .hp-glyph,.hp-btn.is-on .hp-lines{stroke:#141615}
.hp-btn.is-on{filter:drop-shadow(0 0 9px rgba(232,100,30,.85))}
.hp-btn[data-b="lt"].is-on,.hp-btn[data-b="rt"].is-on{transform:translateY(4px)}
.hp-stickwrap.is-on .hp-ring{stroke:#E8641E}
.hp-btn.is-hint .hp-face,.hp-btn.is-hint .hp-trig,.hp-btn.is-hint .hp-bump{stroke:#E8641E;stroke-width:3}
.hp-stickwrap.is-hint .hp-ring{stroke:#E8641E;stroke-dasharray:5 4}
.hp-btn.is-paired .hp-led{stroke:#F4F4F0}

/* invisible hit targets over the artwork (real buttons: keyboard + screen readers) */
.hpad-hit{position:absolute;margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hpad-hit[data-hit="lt"],.hpad-hit[data-hit="rt"],.hpad-hit[data-hit="lb"],.hpad-hit[data-hit="rb"],.hpad-hit[data-hit="view"],.hpad-hit[data-hit="menu"]{border-radius:12px}
.hpad-hit[data-hit="ls"]{cursor:grab;touch-action:none}
.hpad-hit[data-hit="ls"]:active{cursor:grabbing}
.hpad-hit:focus-visible{outline:2px solid #E8641E;outline-offset:2px}

/* legend */
.hpad-legend{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hpad-legend li{margin:0;padding:0}
.hpad-row{width:100%;height:100%;display:flex;align-items:center;gap:12px;min-height:62px;box-sizing:border-box;padding:10px 14px;border-radius:14px;border:1px solid #E1E1DB;background:#fff;
  color:#141615;text-align:left;font:inherit;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.hpad-row:hover,.hpad-row.is-on{border-color:#141615;box-shadow:0 12px 28px -18px rgba(20,22,21,.45);transform:translateY(-1px)}
.hpad-row:focus-visible{outline:2px solid #E8641E;outline-offset:2px}
.hpad-key{flex:0 0 auto;min-width:42px;height:32px;padding:0 9px;box-sizing:border-box;border-radius:9px;background:#141615;color:#F4F4F0;display:flex;align-items:center;justify-content:center;
  font:600 12px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.04em;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.hpad-row.is-on .hpad-key{background:#E8641E;color:#141615}
.hpad-key svg{display:block}
.hpad-rt{display:flex;flex-direction:column;gap:3px;min-width:0}
.hpad-rn{font:600 14.5px/1.2 Geist,system-ui,sans-serif}
.hpad-rd{font:400 13px/1.3 Geist,system-ui,sans-serif;color:#5A5F5C}

@keyframes hpad-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes hpad-focus{0%{filter:blur(0)}20%{filter:blur(2.6px)}45%{filter:blur(.6px)}65%{filter:blur(1.3px)}100%{filter:blur(0)}}
@keyframes hpad-flicker{0%,100%{opacity:.86}8%{opacity:.96}9%{opacity:.62}10%{opacity:.93}46%{opacity:.82}47%{opacity:1}48%{opacity:.72}49%{opacity:.95}78%{opacity:.9}}
@keyframes hpad-twinkle{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes hpad-grain{0%{transform:translate(0,0)}10%{transform:translate(-23px,17px)}20%{transform:translate(31px,-9px)}30%{transform:translate(-12px,-28px)}40%{transform:translate(19px,26px)}50%{transform:translate(-35px,4px)}60%{transform:translate(8px,-37px)}70%{transform:translate(27px,11px)}80%{transform:translate(-6px,33px)}90%{transform:translate(-29px,-19px)}}
@keyframes hpad-flash{0%{opacity:.85}100%{opacity:0}}
@keyframes hpad-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes hpad-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.9);opacity:.7}}

/* one-time entrance (script adds hpad--pre only when the section starts below the fold) */
.hpad.hpad--pre .hpad-head,.hpad.hpad--pre .hpad-viewwrap,.hpad.hpad--pre .hpad-side,.hpad.hpad--pre .hpad-legend{opacity:0;transform:translateY(28px)}
.hpad.is-in .hpad-head,.hpad.is-in .hpad-viewwrap,.hpad.is-in .hpad-side,.hpad.is-in .hpad-legend{transition:opacity .8s ease,transform 1s cubic-bezier(.16,.84,.24,1)}
.hpad.is-in .hpad-viewwrap{transition-delay:.12s}
.hpad.is-in .hpad-side{transition-delay:.24s}
.hpad.is-in .hpad-legend{transition-delay:.36s}

/* script-driven: animations pause while the section is off screen */
.hpad.hpad--js:not(.is-live) *,.hpad.hpad--js:not(.is-live) *::before,.hpad.hpad--js:not(.is-live) *::after{animation-play-state:paused!important}

@media (max-width:1023px){
  .hpad-stage{grid-template-columns:minmax(0,1fr);gap:32px}
  .hpad-padwrap{max-width:440px}
  .hpad-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .hpad-hud{font-size:10.5px}
  .hpad-tl,.hpad-tr,.hpad-bl,.hpad-br{height:24px;padding:0 8px;border-radius:7px}
  .hpad-tl,.hpad-tr{top:10px}.hpad-tl,.hpad-bl{left:10px}.hpad-tr,.hpad-br{right:10px}.hpad-bl,.hpad-br{bottom:10px}
  .hpad-tl{font-size:11.5px}
  .hpad-bl{gap:10px}
  .hpad-br,.hpad-zoom{display:none}
  .hpad-toast{top:44px;height:26px;font-size:12px}
  .hpad-row{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .hpad-rn{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .hpad *,.hpad *::before,.hpad *::after{animation:none!important;transition:none!important}
}
/* Helios VMS — Inspect & Track showcase (the large video spot). Every selector is scoped to .htr. */
.htr{color:#141615;margin-top:12px}
.htr-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 56px;align-items:end}
.htr-kicker{font:400 13px/1.4 'Geist Mono',ui-monospace,monospace;color:#C4501A;letter-spacing:.04em}
.htr-h{margin:12px 0 0;font:600 clamp(28px,3vw,40px)/1.1 Geist,system-ui,sans-serif;letter-spacing:-.03em}
.htr-p{margin:16px 0 0;font:400 17px/1.55 Geist,system-ui,sans-serif;color:#5A5F5C}
.htr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font:400 15px/1.4 Geist,system-ui,sans-serif}
.htr-list li{position:relative;margin:0;padding-left:24px}
.htr-list li::before{content:"●";position:absolute;left:0;top:0;color:#E8641E}

.htr-frame{position:relative;margin-top:36px;padding:8px;border-radius:20px;background:#0B0D0C;border:1px solid #232725;box-shadow:0 40px 80px -30px rgba(20,22,21,.55)}
.htr-frame::before{content:"";position:absolute;inset:6% 8% -6% 8%;z-index:-1;background:radial-gradient(closest-side,rgba(232,100,30,.24),rgba(232,100,30,0));filter:blur(34px);pointer-events:none}
.htr-screen{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#101312}
.htr-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 50%;transition:transform 1.3s cubic-bezier(.3,.1,.2,1),transform-origin 1.3s cubic-bezier(.3,.1,.2,1)}

.htr-notes{position:absolute;inset:0;pointer-events:none}
.htr-box{position:absolute;border:2px solid #E8641E;border-radius:8px;box-shadow:0 0 0 4px rgba(232,100,30,.16),0 0 24px rgba(232,100,30,.25);opacity:0;transform:scale(1.02);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.9,.25,1.2)}
.htr-box em{position:absolute;left:-2px;padding:5px 9px;border-radius:7px;background:#E8641E;color:#141615;font:600 12.5px/1 Geist,system-ui,sans-serif;font-style:normal;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.htr-box--in em{top:6px;left:6px}.htr-box--above em{bottom:calc(100% + 6px)}.htr-box--below em{top:calc(100% + 6px)}
.htr[data-ch="1"] [data-for="1"],.htr[data-ch="2"] [data-for="2"],.htr[data-ch="3"] [data-for="3"],.htr[data-ch="4"] [data-for="4"]{opacity:1;transform:none}
.htr-box:nth-child(2n){transition-delay:.35s}
.htr-rail button:focus-visible{outline:2px solid #E8641E;outline-offset:2px}

.htr-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px}
.htr-rail button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:0 0 4px;border:0;background:none;text-align:left;cursor:pointer;color:#141615;font:inherit}
.htr-rail i{display:block;width:100%;height:3px;margin-bottom:8px;border-radius:2px;background:#E1E1DB;overflow:hidden}
.htr-rail s{display:block;height:100%;width:0;background:#E8641E;border-radius:2px}
.htr-rail b{font:600 14px/1.2 Geist,system-ui,sans-serif;color:#8A8F8C;transition:color .25s ease}
.htr-rail span{font:400 12.5px/1.2 Geist,system-ui,sans-serif;color:#8A8F8C}
.htr-rail button.is-on b{color:#141615}
.htr-rail button.is-done s{width:100%}


/* phones and small tablets: boxes only on the video, their labels move to one line under it */
.htr-cap{display:none}
@media (max-width:700px){
  .htr-box{border-width:1.5px;border-radius:5px;box-shadow:0 0 0 2px rgba(232,100,30,.18)}
  .htr-box em{display:none}
  .htr-cap{display:block;min-height:2.6em;margin:12px 0 0;font:500 14px/1.3 Geist,system-ui,sans-serif;color:#141615}
  .htr-cap b{display:inline-block;margin-right:8px;padding:2px 7px;border-radius:6px;background:#E8641E;color:#141615;font:600 12px/1.3 'Geist Mono',ui-monospace,monospace}
}
@media (max-width:900px){
  .htr-head{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .htr-frame{padding:6px;border-radius:16px}
  .htr-box em{font-size:10.5px;padding:3px 6px}
  .htr-box--in em{top:3px;left:3px}
  .htr-rail{gap:6px}
  .htr-rail span{display:none}
  .htr-rail b{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .htr *{animation:none!important;transition:none!important}
}