/* One rail and one viewport budget for logo, headline, servers and actions. */
.hero-terminal-shell.hero-unified {
  display: grid;
  grid-template-rows: minmax(0, 42%) minmax(0, 58%);
  height: calc(100svh - 6.25rem);
  min-height: 0;
  padding-bottom: clamp(.75rem, 1.6svh, 1.5rem);
  overflow: hidden;
}
.hero-unified > .section-shell {
  width: min(100%, var(--max-width));
  max-width: none;
  margin-inline: auto;
  padding-inline: max(clamp(1rem, 4vw, 4.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
}
.hero-unified .wordmark-hero {
  display: flex;
  height: 100%;
  min-height: 0;
  justify-content: center;
  gap: clamp(.3rem, .85svh, .7rem);
  padding-top: clamp(.45rem, 1.4svh, 1.2rem);
  padding-bottom: 0;
}
.hero-unified .hero-wordmark-stage {
  position: relative;
  flex: none;
  width: min(100%, calc(22svh * 4.8));
  min-width: 0;
  aspect-ratio: 4.8 / 1;
  padding: 0;
  margin: 0;
  transform: none;
}
.hero-unified .hero-wordmark-stage reality-forge-logo {
  /* The logo component sets an inline relative position for its standalone use. */
  position: absolute !important;
  top: 50%;
  left: var(--hero-wordmark-offset, 0px);
  width: var(--hero-wordmark-width, 100%);
  max-width: none;
  transform: translateY(-50%);
}
.hero-unified .hero-main-title {
  width: 100%;
  max-width: 100%;
  margin-top: clamp(.35rem, 1svh, .85rem);
  transform: none;
  font-size: clamp(1.7rem, 4.8vw, 4.6rem);
  line-height: 1.08;
  white-space: normal;
  text-wrap: balance;
}
.hero-unified .hero {
  height: 100%;
  min-height: 0;
  padding-top: clamp(.35rem, 1.2svh, 1rem);
  padding-bottom: 0;
}
.hero-unified .hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
}

/* The page reserves its final geometry immediately. During the wordmark run,
   the lower stage joins it through one soft, overlapping hand-off. */
.hero-unified .hero-main-title,
.hero-server-rack,
.hero-system-screen .monitor-services,
.hero-unified .hero-copy .hero-actions {
  transition:
    opacity 900ms ease,
    transform 980ms cubic-bezier(.2, .78, .2, 1),
    filter 760ms ease;
}
.hero-sequence-pending .hero-unified .hero-main-title,
.hero-sequence-pending .hero-server-rack,
.hero-sequence-pending .hero-system-screen .monitor-services,
.hero-sequence-pending .hero-unified .hero-copy .hero-actions {
  opacity: 0;
  filter: blur(.18rem);
}
.hero-sequence-pending .hero-unified .hero-main-title,
.hero-sequence-pending .hero-system-screen .monitor-services,
.hero-sequence-pending .hero-unified .hero-copy .hero-actions {
  transform: translateY(.35rem);
}
.hero-sequence-pending .hero-server-rack-left { transform: translateX(-.4rem); }
.hero-sequence-pending .hero-server-rack-right { transform: translateX(.4rem); }
.hero-sequence-pending .hero-unified .hero-copy .hero-actions { pointer-events: none; }
.hero-sequence-ready .hero-unified .hero-main-title { transition-delay: 0ms; }
.hero-sequence-ready .hero-server-rack { transition-delay: 90ms; }
.hero-sequence-ready .hero-system-screen .monitor-services { transition-delay: 150ms; }
.hero-sequence-ready .hero-unified .hero-copy .hero-actions { transition-delay: 230ms; }

.hero-server-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: minmax(0, 13%) minmax(0, 1fr) minmax(0, 13%);
  align-items: center;
  column-gap: clamp(.75rem, 1.6vw, 1.5rem);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.hero-server-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8% -3%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(10, 8, 15, .94) 22%, rgba(10, 8, 15, .65) 52%, transparent 73%),
    radial-gradient(ellipse at 50% 58%, rgba(159, 66, 220, .10), transparent 70%);
}
.hero-server-rack {
  /* Preserve the approved layout slots, now holding complete standalone racks. */
  position: relative;
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: min(100%, clamp(14rem, 34svh, 28rem));
  aspect-ratio: 344 / 941;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
.hero-server-rack::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5% -18%;
  background: radial-gradient(ellipse at 50% 50%, rgba(170, 67, 255, .15), transparent 68%);
  filter: blur(1rem);
  opacity: .72;
  pointer-events: none;
}
.hero-server-rack img {
  /* One photographic cutout, mirrored on the right: identical optics and
     proportions. Genuine alpha replaces the old hand-traced silhouette. */
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: auto;
  max-width: none;
  height: 98%;
  transform: translate(-50%, -50%);
  filter: brightness(.53) contrast(1.08) saturate(.82);
}
.hero-server-image-light { opacity: 0; }
.hero-server-rack::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 1% 0;
  background: linear-gradient(112deg, rgba(211, 140, 255, .34), rgba(170, 67, 255, .12) 34%, transparent 66%, rgba(170, 67, 255, .08));
  -webkit-mask: url("assets/hero-server-matched-v3.png") center / auto 98% no-repeat;
  mask: url("assets/hero-server-matched-v3.png") center / auto 98% no-repeat;
  mix-blend-mode: screen;
  opacity: .44;
  pointer-events: none;
}
.hero-server-rack-left { grid-column: 1; grid-row: 1; }
.hero-server-rack-right { grid-column: 3; grid-row: 1; }
.hero-server-rack-right img { transform: translate(-50%, -50%) scaleX(-1); }
.hero-server-rack-right::after { transform: scaleX(-1); }
.hero-system-screen {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: clamp(.4rem, 1.2svh, 1rem) 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #f4f1f8;
}
.hero-unified .hero-copy .hero-actions {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: clamp(.4rem, 1.2svh, 1rem) auto 0;
  gap: .75rem;
  transform: none;
}
.hero-unified .hero-copy .hero-actions > a {
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 3.25rem;
  white-space: normal;
  text-align: center;
}
@media (min-width: 761px) {
  .hero-unified .hero-main-title:not(.hero-title-wrap) { white-space: nowrap; }
}
@media (min-width: 62.001rem) {
  .hero-system-screen { min-height: 0; }
}
@media (max-width: 760px) {
  .hero-terminal-shell.hero-unified {
    grid-template-rows: minmax(0, 38%) minmax(0, 62%);
    height: calc(100svh - var(--mobile-site-header-height));
    min-height: 0;
    padding-bottom: clamp(.45rem, 1.2svh, .8rem);
  }
  .hero-unified .wordmark-hero {
    padding-top: clamp(.25rem, .8svh, .55rem);
    gap: clamp(.2rem, .6svh, .4rem);
  }
  .hero-unified .hero-wordmark-stage { width: min(100%, calc(18svh * 4.8)); }
  .hero-unified .hero-main-title { margin-top: .2rem; }
  .hero-unified .hero { padding-top: clamp(.2rem, .7svh, .45rem); }
  /* Decorative hardware gives way to full-width, readable copy on phones. */
  .hero-server-stage { display: block; height: 100%; }
  .hero-server-rack { display: none; }
  .hero-system-screen { height: 100%; padding: clamp(.3rem, .8svh, .65rem) 0; }
  .hero-unified .hero-main-title { font-size: clamp(1.6rem, 5.7vw, 2.5rem); }
  .hero-unified .hero-copy .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }
  .hero-unified .hero-copy .hero-actions > a { min-height: 2.5rem; padding: .55rem .5rem; font-size: .72rem; }
}
@media (min-width: 761px) and (max-height: 750px) {
  .hero-terminal-shell.hero-unified { grid-template-rows: minmax(0, 43%) minmax(0, 57%); }
  .hero-unified .hero-wordmark-stage { width: min(100%, calc(19svh * 4.8)); }
  .hero-unified .hero-main-title { margin-top: .15rem; }
  .hero-server-rack { height: min(100%, 31svh); }
  .monitor-services .monitor-services-label { margin-bottom: .65rem; }
  .hero-system-screen .monitor-service-list { gap: .65rem; }
  .monitor-service-list svg { width: 1.35rem; height: 1.35rem; }
  .monitor-service-list h2 { font-size: clamp(.9rem, 1.55vw, 1.2rem); }
  .hero-unified .hero-copy .hero-actions > a { min-height: 2.35rem; padding-block: .45rem; }
}
@media (max-width: 760px) and (max-height: 650px) {
  .hero-terminal-shell.hero-unified { grid-template-rows: minmax(0, 35%) minmax(0, 65%); }
  .hero-unified .hero-wordmark-stage { width: min(92%, calc(15svh * 4.8)); }
  .hero-unified .hero-main-title { font-size: clamp(1rem, 4.7vw, 1.35rem); }
  .monitor-services .monitor-services-label { margin-bottom: .4rem; font-size: .58rem; }
  .hero-system-screen .monitor-service-list { gap: .42rem; }
  .monitor-service-list svg { width: 1rem; height: 1rem; }
  .monitor-service-list h2 { font-size: clamp(.72rem, 3.45vw, .9rem); }
  .hero-unified .hero-copy .hero-actions { margin-top: .3rem; }
  .hero-unified .hero-copy .hero-actions > a { min-height: 2.2rem; padding: .35rem .3rem; font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-unified .hero-main-title,
  .hero-server-rack,
  .hero-system-screen .monitor-services,
  .hero-unified .hero-copy .hero-actions {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}