/* Hero — the HTML layer around the WebGL canvas: pinned stage, headline, three text panels, scroll hint. */
.hp { position: relative; width: 100%; height: 450dvh; min-height: 100dvh; background: #fff; }
.hp__pin { width: 100%; height: 100dvh; }
.hp__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100dvh; }
.hp__canvas { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1s ease-out; touch-action: none; }
.hp__canvas.is-ready { opacity: 1; }
.hp__canvas > canvas { position: absolute; inset: 0; width: 100%; height: 100dvh; display: block; }
/* black rounded placeholder shown until the video texture has a frame */
.hp__mask { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 1s ease-out; }
.hp__mask.is-hidden { opacity: 0; }
.hp__mask > div { position: absolute; top: var(--hero-top, 131px); bottom: var(--gut-x, 32px); left: var(--gut-x, 32px); right: var(--gut-x, 32px); border-radius: 16px; background: #000; overflow: hidden; }

.hp__heading { position: absolute; top: 0; left: 0; z-index: 10; display: flex; flex-direction: column; align-items: center;
  justify-content: center; width: 100%; min-height: 100dvh; padding: 64px; }
.hp__heading h1 { max-width: 72rem; width: 100%; margin: 0; text-align: center; color: #fff; font: 400 4rem/1.05 'Inter', Arial, sans-serif; letter-spacing: -0.01em; }

.hp__panel { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 0 24px; pointer-events: none; visibility: hidden; text-align: center; }
.hp__panel > div { display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(880px, 100%); }
.hp__cat { margin: 0; font: 400 11px/1.5 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: -0.01em; text-transform: uppercase; color: #929292; }
.hp__title { margin: 0; font: 400 32px/38px 'Inter', Arial, sans-serif; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.hp__body { margin: 0; font: 400 14px/1.43 'Inter', Arial, sans-serif; color: #c7c7c7; text-wrap: balance; }

.hp__logos { display: flex; gap: 16px; align-items: center; }
.hp__logos { flex-wrap: wrap; justify-content: center; gap: 8px; }
.hp__logos span { font: 400 11px/1 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .04em; color: #a9b0bc; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 10px; }
.hp__hint { position: absolute; bottom: 72px; right: 72px; z-index: 10; display: flex; align-items: center; gap: 16px; color: #fff; font: 500 14px/1 'Inter', Arial, sans-serif; letter-spacing: .02em; opacity: 0; visibility: hidden; }
.hp__hint i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #fff; border-radius: 2px; font-style: normal; }

/* 768–1449px ("tablet band") — what a 1440px-wide screen gets */
@media (min-width: 768px) and (max-width: 1449px) {
  .hp__heading { justify-content: flex-start; padding-top: 50dvh; }
  .hp__panel { justify-content: flex-start; padding-top: 50dvh; }
  .hp__hint { bottom: 54px; right: 54px; }
}
@media (min-width: 1450px) { .hp__panel[data-i="1"] { align-items: flex-start; padding-left: 8vw; text-align: left; }
  .hp__panel[data-i="2"] { align-items: flex-end; padding-right: 8vw; text-align: left; } }
@media (max-width: 767px) {
  .hp { height: 232dvh; }
  .hp__heading { justify-content: flex-start; padding: 45dvh 32px 64px; }
  .hp__heading h1 { font-size: 2rem; }
  .hp__panel { justify-content: flex-start; padding-top: 45dvh; }
  .hp__hint { bottom: 40px; right: 40px; } .hp__hint span { display: none; }
}