/* Hero background — "the living organization" (owner 2026-10-20). Full screen behind
   the hero copy, in place of the hero3.mp4 video. See templates/_hero_anim.html and
   static/js/hero-anim.js. */
.hb { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 120% at 80% 0%, #10294a 0%, #0b1626 55%, #070d18 100%); }

/* Slow colour glows, like light moving behind frosted glass. */
.hb-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .7; will-change: transform; }
.hb-glow.g1 { width: 52vw; height: 52vw; right: -12vw; top: -18vw; background: #0c64ae; animation: hbDrift1 26s ease-in-out infinite alternate; }
.hb-glow.g2 { width: 40vw; height: 40vw; right: 8vw; bottom: -20vw; background: #0f766e; opacity: .45; animation: hbDrift2 32s ease-in-out infinite alternate; }
.hb-glow.g3 { width: 30vw; height: 30vw; left: 30vw; top: 20vh; background: #6d28d9; opacity: .28; animation: hbDrift3 38s ease-in-out infinite alternate; }
@keyframes hbDrift1 { to { transform: translate(-10vw, 12vh) scale(1.15); } }
@keyframes hbDrift2 { to { transform: translate(-14vw, -10vh) scale(.9); } }
@keyframes hbDrift3 { to { transform: translate(18vw, 14vh) scale(1.2); } }

.hb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* HR moments rising through the scene; depth = size, blur and opacity. */
.hb-cards { position: absolute; inset: 0; }
.hb-card { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px; width: 280px; padding: 12px 14px;
  border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font-size: .86rem; line-height: 1.3; text-shadow: none; will-change: transform, opacity; opacity: 0; }
.hb-card .hb-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--hb-c) 24%, transparent); color: var(--hb-c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hb-c) 45%, transparent); }
.hb-card .hb-ico svg { width: 20px; height: 20px; }
.hb-card b { display: block; font-weight: 700; }
.hb-card span.hb-sub { display: block; color: #b9cce0; font-size: .78rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 205px; }
.hb-card .hb-tick { margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--hb-c); color: #08121f; }
.hb-card .hb-tick svg { width: 13px; height: 13px; }

/* Keeps the headline readable: dark on the copy side, open on the scene side. */
.hb-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 13, 24, .88) 0%, rgba(7, 13, 24, .7) 32%, rgba(7, 13, 24, .2) 62%, rgba(7, 13, 24, 0) 80%),
              linear-gradient(0deg, rgba(7, 13, 24, .75) 0%, rgba(7, 13, 24, 0) 30%); }
@media (max-width: 820px) {
  .hb-shade { background: linear-gradient(180deg, rgba(7, 13, 24, .55) 0%, rgba(7, 13, 24, .78) 45%, rgba(7, 13, 24, .9) 100%); }
}
@media (prefers-reduced-motion: reduce) { .hb-glow { animation: none; } }