.hh-hero {
  --hh-bg: var(--platform-dark-bg, #0A0A0B);
  --hh-line: var(--platform-dark-border, #27272A);
  --hh-line-2: var(--platform-dark-border-strong, #3F3F46);
  --hh-text: var(--platform-dark-text, #FAFAFA);
  --hh-muted: var(--platform-dark-muted, #A1A1AA);
  --hh-blue: var(--platform-dark-accent, #50A2FF);
  --hh-blue-rgb: var(--platform-dark-accent-rgb, 80, 162, 255);
  position: relative;
  background: var(--hh-bg);
  color: var(--hh-text);
  padding-top: calc(var(--nav-h, 72px) + clamp(2rem, 5vw, 3.75rem));
  overflow: hidden;
}
.hh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.hh-hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-areas: "titles lede" "titles cta";
  column-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: end;
}
.hh-hero__titles { grid-area: titles; align-self: end; }
.hh-hero__lede { grid-area: lede; }
.hh-hero__cta { grid-area: cta; }
.hh-hero__eyebrow {
  margin: 0 0 1.125rem;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--hh-muted);
}
.hh-hero__title {
  margin: 0;
  max-width: 16em;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4.3vw, 4rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.025em;
  color: var(--hh-text);
  text-wrap: balance;
}
.hh-hero__lede {
  margin: 0;
  max-width: 34rem;
  font-size: var(--fs-lede, 1.0625rem); line-height: 1.6;
  color: var(--hh-muted);
  text-wrap: pretty;
}
.hh-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hh-hero__cta .btn { min-height: var(--tap-min, 44px); }

@media (prefers-reduced-motion: no-preference) {
  .hh-hero.is-js .hh-hero__titles, .hh-hero.is-js .hh-hero__lede, .hh-hero.is-js .hh-hero__cta, .hh-hero.is-js .hh-hero__bar {
    animation: hh-rise 700ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
  }
  .hh-hero.is-js .hh-hero__lede { animation-delay: 90ms; }
  .hh-hero.is-js .hh-hero__cta { animation-delay: 160ms; }
  .hh-hero.is-js .hh-hero__bar { animation-delay: 240ms; }
}
@keyframes hh-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hh-hero__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem;
}
.hh-modes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hh-mode {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--tap-min, 44px); padding: 0 1.125rem;
  border: 1px solid var(--hh-line-2); border-radius: 999px;
  background: rgba(20, 20, 23, 0.7);
  font-family: var(--font-heading); font-size: var(--fs-label, 0.875rem); font-weight: 500; line-height: 1;
  color: var(--hh-muted);
  cursor: pointer;
  transition: color var(--dur-fast, 160ms) ease, border-color var(--dur-fast, 160ms) ease, background-color var(--dur-fast, 160ms) ease;
}
.hh-mode:hover { color: var(--hh-text); border-color: rgba(var(--hh-blue-rgb), 0.55); }
.hh-mode[aria-pressed="true"] {
  color: var(--hh-text);
  border-color: var(--hh-blue);
  background: rgba(var(--hh-blue-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--hh-blue-rgb), 0.35);
}
.hh-mode:focus-visible, .hh-pause:focus-visible { outline: 2px solid var(--hh-blue); outline-offset: 2px; }
.hh-mode__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--pillar-accent);
  box-shadow: 0 0 0 3px rgba(var(--pillar-accent-rgb), 0.18);
}
.hh-hint {
  display: none; align-items: center; gap: 0.5rem; margin: 0;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--hh-muted);
}
.hh-hint::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid currentColor; }
.hh-hero.is-fine .hh-hint { display: inline-flex; }
.hh-hero:not(.is-js) .hh-modes { display: none; }

.hh-stagewrap { position: relative; }
.hh-stage {
  --hh-ratio: 1.7778; --hh-fx: 0.5; --hh-fy: 0.4;
  position: relative; overflow: hidden;
  container-type: size;
  height: min(calc(100vw / var(--hh-ratio)), max(28rem, calc(100vh - 7rem)));
  background: #070709;
}
@supports (height: 100svh) {
  .hh-stage { height: min(calc(100vw / var(--hh-ratio)), max(28rem, calc(100svh - 7rem))); }
}
.hh-plate {
  --hh-pw: max(100cqw, calc(100cqh * var(--hh-ratio)));
  --hh-ph: max(100cqh, calc(100cqw / var(--hh-ratio)));
  position: absolute;
  width: var(--hh-pw); height: var(--hh-ph);
  left: calc((100cqw - var(--hh-pw)) * var(--hh-fx));
  top: calc((100cqh - var(--hh-ph)) * var(--hh-fy));
  background-size: 100% 100%; background-repeat: no-repeat;
}
.hh-stage::before, .hh-stage::after { content: ""; position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.hh-stage::before { top: 0; height: 56px; background: linear-gradient(180deg, var(--hh-bg), rgba(10, 10, 11, 0)); }
.hh-stage::after { bottom: 0; height: 96px; background: linear-gradient(0deg, var(--hh-bg), rgba(10, 10, 11, 0)); }

.hh-layer {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  --lx: -999px; --ly: -999px; --lr: 0px;
  -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 calc(var(--lr) - 1px), transparent var(--lr));
          mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 calc(var(--lr) - 1px), transparent var(--lr));
}
.hh-lut, .hh-reveal, .hh-tint, .hh-glow, .hh-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.hh-reveal { background-size: 100% 100%; background-repeat: no-repeat; }
.hh-tint { background: rgba(var(--pillar-accent-rgb), 0.16); mix-blend-mode: screen; }
.hh-glow { mix-blend-mode: screen; display: none; }
.hh-layer[data-mode="heat"] .hh-lut { filter: url(#hh-lut) saturate(1.15); }
.hh-layer[data-mode="heat"] .hh-reveal { filter: brightness(1.05) contrast(1.05); }
.hh-layer[data-mode="heat"] .hh-glow { display: block; }
.hh-layer[data-mode="heat"] .hh-tint { display: none; }
.hh-layer[data-mode="air"] .hh-reveal { filter: brightness(1.55) contrast(1.1) saturate(0.35); }
.hh-layer[data-mode="equipment"] .hh-reveal { filter: brightness(1.5) contrast(1.2) saturate(0.25); }
.hh-layer[data-mode="board"] .hh-reveal { filter: brightness(1.35) contrast(1.1) saturate(0.55); }
.hh-layer[data-mode="board"] .hh-tint { background: rgba(var(--pillar-accent-rgb), 0.1); }

.hh-board { position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 0 0; pointer-events: none; display: none; }
.hh-hero.is-js .hh-board { display: block; }
.hh-board canvas { display: block; width: 100%; height: 100%; }
.hh-board .led { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0.2em 0.4em; font-size: 0.6875rem; }
.hh-board.is-led .led { display: none; }
.hh-board:not(.is-led) canvas { display: none; }

.hh-pin {
  position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none;
  left: calc(var(--x, 0.5) * 100%); top: calc(var(--y, 0.5) * 100%);
}
.hh-pin::before {
  content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--pillar-accent);
  box-shadow: 0 0 0 3px rgba(var(--pillar-accent-rgb), 0.25), 0 0 14px rgba(var(--pillar-accent-rgb), 0.7);
}
.hh-pin::after {
  content: ""; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(var(--pillar-accent-rgb), 0.6); opacity: 0;
}
.hh-pin__label {
  position: absolute; left: 14px; top: 0; transform: translateY(-50%);
  display: none; width: max-content; max-width: min(30rem, calc(100cqw - 24px));
  padding: 0.3125rem 0.5625rem; border-radius: 6px;
  background: rgba(10, 10, 11, 0.82); border: 1px solid var(--hh-line-2);
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.35; color: var(--hh-text);
}
.hh-pin__label b { font-weight: 500; }
.hh-pin__label em { font-style: normal; margin-left: 0.375rem; }
.hh-pin.is-left .hh-pin__label { left: auto; right: 14px; }
.hh-pin[data-sev="adv"] em { color: var(--sev-adv); }
.hh-pin[data-sev="warn"] em { color: var(--sev-warn); }
.hh-pin[data-sev="crit"] em { color: var(--sev-crit); }
.hh-pin[data-sev="normal"] em { color: var(--hh-muted); }
.hh-hero:not(.is-js) .hh-pin[data-primary] .hh-pin__label { display: block; }
.hh-hero.is-js .hh-pin { opacity: 0; transition: opacity 320ms ease; }
.hh-hero.is-js .hh-pin.is-current { opacity: 1; }
.hh-hero.is-static .hh-pin.is-current .hh-pin__label, .hh-hero.is-tagged .hh-pin.is-current .hh-pin__label { display: block; }
.hh-hero.is-js .hh-pin.is-out .hh-pin__label { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hh-hero.is-js .hh-pin.is-current::after { animation: hh-ping 3.2s var(--ease-out, ease-out) infinite; }
  .hh-hero.is-paused .hh-pin.is-current::after { animation-play-state: paused; }
}
@keyframes hh-ping { 0% { transform: scale(0.4); opacity: 0.9; } 70%, 100% { transform: scale(1.6); opacity: 0; } }

.hh-loupe { position: absolute; left: 0; top: 0; z-index: 4; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 220ms ease-out; }
.hh-loupe.is-on { opacity: 1; }
.hh-loupe__ring {
  position: absolute; left: calc(var(--hh-r, 84px) * -1); top: calc(var(--hh-r, 84px) * -1);
  width: calc(var(--hh-r, 84px) * 2); height: calc(var(--hh-r, 84px) * 2); border-radius: 50%;
  border: 1px solid rgba(250, 250, 250, 0.72);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 26px rgba(var(--pillar-accent-rgb), 0.42), inset 0 0 18px rgba(var(--pillar-accent-rgb), 0.18);
}
.hh-loupe__ring::before, .hh-loupe__ring::after { content: ""; position: absolute; background: rgba(250, 250, 250, 0.8); }
.hh-loupe__ring::before { left: 50%; top: -8px; width: 1px; height: 14px; }
.hh-loupe__ring::after { top: 50%; left: -8px; width: 14px; height: 1px; }
.hh-loupe__read {
  position: absolute; left: 0; top: 0; width: max-content; max-width: min(26rem, calc(100cqw - 16px));
  display: flex; flex-direction: column; gap: 0.125rem;
  padding: 0.4375rem 0.6875rem; border-radius: 6px;
  background: rgba(10, 10, 11, 0.84); border: 1px solid var(--hh-line-2);
  font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.35; color: var(--hh-text);
}
.hh-loupe__val { font-size: 0.9375rem; font-weight: 500; color: var(--hh-text); }
.hh-loupe__state { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; letter-spacing: 0.06em; }
.hh-loupe__state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hh-loupe__state[data-sev="normal"] { color: var(--hh-text); }
.hh-loupe__state[data-sev="normal"]::before { width: 12px; height: 2px; border-radius: 1px; background: var(--pillar-accent); }
.hh-loupe__state[data-sev="adv"] { color: var(--sev-adv); }
.hh-loupe__state[data-sev="warn"] { color: var(--sev-warn); }
.hh-loupe__state[data-sev="adv"]::before, .hh-loupe__state[data-sev="warn"]::before {
  width: 0; height: 0; border-radius: 0; background: none;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid currentColor;
}
.hh-loupe__state[data-sev="crit"] { color: var(--sev-crit); }
.hh-loupe__state[data-sev="crit"]::before { border-radius: 1px; transform: rotate(45deg) scale(0.85); }
.hh-loupe__tag { display: block; font-size: 0.6875rem; letter-spacing: 0.05em; color: var(--hh-muted); }
.hh-hero.is-fine .hh-stage { cursor: crosshair; }

.hh-pause {
  position: absolute; z-index: 5;
  right: max(var(--gutter, 2rem), calc((100% - var(--max-width, 1280px)) / 2 + var(--gutter, 2rem)));
  bottom: 1.25rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 36px; padding: 0 0.875rem 0 0.75rem;
  border: 1px solid var(--hh-line-2); border-radius: 999px;
  background: rgba(10, 10, 11, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 500; color: var(--hh-text);
  cursor: pointer;
}
.hh-pause[hidden] { display: none; }
.hh-pause:hover { border-color: rgba(var(--hh-blue-rgb), 0.6); }
.hh-pause__icon { position: relative; width: 10px; height: 12px; }
.hh-pause__icon::before, .hh-pause__icon::after { content: ""; position: absolute; top: 0; width: 3px; height: 12px; background: currentColor; border-radius: 1px; }
.hh-pause__icon::before { left: 1px; }
.hh-pause__icon::after { right: 1px; }
.hh-pause[data-state="paused"] .hh-pause__icon::before {
  left: 1px; width: 0; height: 0; background: none; border-radius: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid currentColor;
}
.hh-pause[data-state="paused"] .hh-pause__icon::after { display: none; }

.hh-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (max-width: 1023.98px) {
  .hh-hero__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titles" "lede" "cta"; }
  .hh-hero__title { max-width: 15em; }
  .hh-hero__lede { margin-top: 1.25rem; max-width: 40rem; }
}

@media (max-width: 767.98px) {
  .hh-hero { display: flex; flex-direction: column; padding-top: calc(var(--nav-h, 72px) + 1.5rem); padding-bottom: 2.75rem; }
  .hh-hero__head { display: contents; }
  .hh-hero__titles, .hh-hero__cta, .hh-hero__lede { padding-inline: var(--gutter, 1.25rem); }
  .hh-hero__titles { order: 1; }
  .hh-hero__cta { order: 2; margin-top: 1.25rem; }
  .hh-hero__bar { order: 3; margin-top: 1.5rem; margin-bottom: 0.75rem; }
  .hh-stagewrap { order: 4; }
  .hh-hero__lede { order: 5; margin-top: 1.25rem; }
  .hh-hero__eyebrow { margin-bottom: 0.75rem; font-size: 0.75rem; }
  .hh-hero__title { font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1.08; }
  .hh-hero__cta .btn { flex: 1 1 100%; justify-content: center; }
  .hh-modes { width: 100%; display: grid; grid-template-columns: repeat(4, auto); gap: 0.375rem; }
  .hh-mode { padding: 0 0.625rem; gap: 0.375rem; }
  .hh-hero:not(.is-js) .hh-modes { display: none; }
  .hh-hero:not(.is-js) .hh-stage { height: calc(100vw / var(--hh-ratio)); }
  .hh-hero:not(.is-js) .hh-pin__label { display: none !important; }
  .hh-hint { display: none !important; }
  .hh-stage { height: clamp(22rem, 58svh, 32rem); }
  .hh-stage::before { height: 28px; }
  .hh-stage::after { height: 56px; }
  .hh-pause { right: var(--gutter, 1.25rem); bottom: 0.75rem; }
  .hh-pin__label { font-size: 0.6875rem; }
  .hh-loupe__read { font-size: 0.75rem; padding: 0.375rem 0.5625rem; }
  .hh-loupe__val { font-size: 0.8125rem; }
}
@media (max-width: 359.98px) {
  .hh-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .hh-loupe { transition: none; }
  .hh-hero.is-js .hh-pin { transition: none; }
}
@media (forced-colors: active) {
  .hh-mode[aria-pressed="true"] { outline: 2px solid ButtonText; }
  .hh-stage::before, .hh-stage::after { display: none; }
}