/*
 * Pull People — Hero V5 / P² Solar Orbit
 * Phase A: full compositional replacement.
 *
 * The P² becomes the solar core, copy is centered and the four capabilities
 * move to glass satellites on visible orbital paths.
 *
 * Reviewer condition respected:
 * - no new dependencies / WebGL / scheduler;
 * - Canvas2D renderer and JS motion amplitudes are not expanded in this phase;
 * - existing hero-hybrid.js remains the single motion owner.
 */

.hero--v5 {
  --hero-v5-ice: #e9f8ff;
  --hero-v5-blue: #3298ff;
  --hero-v5-blue-2: #0c68f5;
  --hero-v5-deep: #020711;
  --hero-v5-glass: rgba(9, 31, 61, 0.42);
  --hero-v5-core-x: 50%;
  --hero-v5-core-y: 65%;
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: min(57rem, calc(100svh - 4.75rem));
  padding: clamp(1rem, 2vw, 1.75rem) 0 clamp(1.2rem, 2.6vw, 2.25rem);
  background:
    radial-gradient(circle at 50% 63%, rgba(31, 123, 255, 0.17), transparent 24rem),
    radial-gradient(circle at 50% 42%, rgba(40, 145, 255, 0.075), transparent 31rem),
    linear-gradient(180deg, #020711 0%, #03101f 48%, #02070f 100%);
}

.hero--v5::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(77, 167, 255, 0.028) 1px, transparent 1px),
    linear-gradient(rgba(77, 167, 255, 0.022) 1px, transparent 1px);
  background-size: 4.6rem 4.6rem;
  -webkit-mask-image: radial-gradient(circle at 50% 62%, black 0 17%, rgba(0,0,0,.7) 38%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 62%, black 0 17%, rgba(0,0,0,.7) 38%, transparent 74%);
  opacity: 0.72;
}

.hero--v5::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 22% 12% 0;
  background:
    radial-gradient(circle at 50% 47%, rgba(219, 244, 255, 0.075), transparent 9%),
    radial-gradient(circle at 50% 58%, rgba(48, 143, 255, 0.08), transparent 31%);
  filter: blur(14px);
  pointer-events: none;
}

.hero--v5 .hero-v5__stage {
  position: relative;
  min-height: clamp(48rem, 84svh, 55rem);
}

/* ------------------------------------------------------------------ */
/* Centered editorial copy. One semantic H1, visually choreographed.  */
/* ------------------------------------------------------------------ */

.hero--v5 .hero-v5__copy {
  position: relative;
  z-index: 10;
  width: min(100%, 72rem);
  margin-inline: auto;
  padding-top: clamp(1.2rem, 3.3vh, 2.5rem);
  padding-inline: clamp(0rem, 1vw, 0.75rem);
  text-align: center;
  pointer-events: none;
}

.hero--v5 .hero-v5__copy > * {
  pointer-events: auto;
}

.hero--v5 .hero__content::before,
.hero--v5 .hero__content::after {
  display: none;
}

.hero--v5 .hero__eyebrow {
  width: max-content;
  max-width: 100%;
  margin: 0 auto clamp(0.85rem, 1.8vh, 1.2rem);
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(117, 202, 255, 0.12);
  border-radius: 999px;
  background: rgba(6, 24, 48, 0.22);
  color: #80c8ff;
  font-size: clamp(0.68rem, 0.62rem + 0.14vw, 0.8rem);
  font-weight: 780;
  letter-spacing: 0.105em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.hero--v5 .hero-v5__title {
  position: relative;
  z-index: 3;
  width: min(100%, 13.7ch);
  margin: 0 auto;
  color: #f7f9ff;
  font-size: clamp(3.45rem, 6.05vw, 6.45rem);
  font-weight: 770;
  line-height: 0.84;
  letter-spacing: -0.062em;
  text-align: center;
  text-wrap: balance;
  text-shadow:
    0 0 2.6rem rgba(3, 9, 25, 0.72),
    0 0 4.2rem rgba(21, 82, 189, 0.10);
}

.hero--v5 .hero-v5__title-line {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.hero--v5 .hero-v5__title-line--a {
  transform: translateX(clamp(-2.6rem, -3vw, -1rem));
}

.hero--v5 .hero-v5__title-line--b {
  transform: translateX(clamp(1rem, 2.2vw, 2.2rem));
  font-size: 0.91em;
}

.hero--v5 .hero-v5__title-line--c {
  transform: translateX(clamp(-1.2rem, -1.4vw, -0.35rem));
  font-size: 0.80em;
}

.hero--v5 .hero-v5__title-line--d {
  width: max-content;
  padding-inline: 0.18em;
  transform: translateX(clamp(2rem, 5.2vw, 5.4rem));
  color: #3298ff;
  font-size: 1.06em;
  text-shadow:
    0 0 1.35rem rgba(47, 151, 255, 0.30),
    0 0 4rem rgba(36, 95, 255, 0.18);
}

.hero--v5 .hero-v5__title-line--d::before,
.hero--v5 .hero-v5__title-line--d::after {
  content: "";
  position: absolute;
  top: 55%;
  width: clamp(1.5rem, 3vw, 3.3rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 214, 255, 0.88));
  box-shadow: 0 0 0.9rem rgba(63, 164, 255, 0.40);
}

.hero--v5 .hero-v5__title-line--d::before {
  right: 100%;
}

.hero--v5 .hero-v5__title-line--d::after {
  left: 100%;
  transform: scaleX(-1);
}

.hero--v5 .hero__lead {
  position: relative;
  z-index: 4;
  width: min(100%, 43rem);
  margin: clamp(1.1rem, 2.3vh, 1.65rem) auto 0;
  color: rgba(215, 229, 244, 0.86);
  font-size: clamp(0.94rem, 0.88rem + 0.16vw, 1.05rem);
  line-height: 1.66;
  text-align: center;
  text-wrap: pretty;
  text-shadow: 0 0 1.25rem rgba(1, 7, 19, 0.86);
}

/* ------------------------------------------------------------------ */
/* CTA console: one glass component, not two unrelated buttons.       */
/* ------------------------------------------------------------------ */

.hero--v5 .hero-v5__actions {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(12rem, auto) 1px minmax(10rem, auto);
  align-items: stretch;
  gap: 0.36rem;
  width: max-content;
  max-width: 100%;
  margin: clamp(1rem, 2.1vh, 1.45rem) auto 0;
  padding: 0.38rem;
  border: 1px solid rgba(152, 218, 255, 0.28);
  border-radius: 1.55rem;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.12), transparent 35%),
    linear-gradient(154deg, rgba(22, 68, 124, 0.34), rgba(3, 14, 31, 0.54) 56%, rgba(14, 53, 99, 0.28));
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.19),
    inset 0 -1px 0 rgba(83,181,255,.12),
    0 1rem 3rem rgba(0,0,0,.28),
    0 0 2rem rgba(53,149,255,.10);
}

.hero--v5 .hero-v5__actions::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border: 1px solid rgba(225, 246, 255, 0.06);
  border-radius: 1.35rem;
  pointer-events: none;
}

.hero--v5 .hero-v5__action-divider {
  align-self: center;
  width: 1px;
  height: 58%;
  background: linear-gradient(transparent, rgba(134, 205, 255, 0.26), transparent);
}

.hero--v5 .button {
  min-height: 3.18rem;
  border-radius: 1.15rem;
}

.hero--v5 .button--primary {
  border-color: rgba(200, 237, 255, 0.55);
  background:
    radial-gradient(circle at 26% 0%, rgba(255,255,255,.24), transparent 35%),
    linear-gradient(180deg, #37a1ff 0%, #176ff3 66%, #0a58dc 100%);
  box-shadow:
    0 0 2.1rem rgba(37, 121, 255, 0.27),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.hero--v5 .button--secondary {
  border-color: transparent;
  background: rgba(5, 20, 40, 0.16);
  box-shadow: none;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 220ms ease;
}

.hero--v5 .button--secondary:is(:hover, :focus-visible) {
  border-color: rgba(200, 237, 255, 0.55);
  background:
    radial-gradient(circle at 26% 0%, rgba(255,255,255,.24), transparent 35%),
    linear-gradient(180deg, #37a1ff 0%, #176ff3 66%, #0a58dc 100%);
  box-shadow:
    0 0 2.1rem rgba(37, 121, 255, 0.34),
    0 0 4.8rem rgba(35, 139, 255, 0.24),
    inset 0 1px 0 rgba(255,255,255,.34);
}

/* Capabilities remain semantic HTML but visually recede beneath the CTA. */
.hero--v5 .hero-v5__highlights {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.62rem clamp(1rem, 2.3vw, 2rem);
  width: min(100%, 42rem);
  margin: clamp(0.78rem, 1.6vh, 1.1rem) auto 0;
  padding: 0.72rem 1rem 0;
  border-top: 1px solid rgba(111, 194, 255, 0.10);
  color: rgba(198, 219, 239, 0.64);
}

.hero--v5 .hero-v5__highlights li {
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  font-size: 0.72rem;
  white-space: nowrap;
}

.hero--v5 .hero__highlight-icon {
  color: #47aaff;
  text-shadow: 0 0 0.9rem rgba(53, 155, 255, 0.30);
}

/* ------------------------------------------------------------------ */
/* Solar scene: centered core, no pedestal, satellites outside.       */
/* ------------------------------------------------------------------ */

.hero--v5 .hero-v5__scene {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  margin: 0;
  pointer-events: auto;
}

.hero--v5 .hero-v5__viewport {
  min-height: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  overflow: visible;
  perspective: 1280px;
  isolation: isolate;
}

.hero--v5 .hero-v5__viewport::before {
  content: "";
  position: absolute;
  left: var(--hero-v5-core-x);
  top: var(--hero-v5-core-y);
  z-index: -3;
  width: min(64vw, 48rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(115, 207, 255, 0.10) 0 8%, rgba(45, 141, 255, 0.11) 18%, rgba(27, 94, 222, 0.045) 38%, transparent 68%);
  filter: blur(12px);
  pointer-events: none;
}

.hero--v5 .hero-v5__viewport::after {
  content: "";
  position: absolute;
  left: var(--hero-v5-core-x);
  top: var(--hero-v5-core-y);
  z-index: 0;
  width: min(61vw, 45rem);
  aspect-ratio: 1.55;
  transform: translate(-50%, -50%) rotate(-8deg);
  border: 1px solid rgba(115, 202, 255, 0.11);
  border-radius: 50%;
  box-shadow:
    inset 0 0 4rem rgba(51, 144, 255, 0.025),
    0 0 2.7rem rgba(46, 134, 255, 0.04);
  pointer-events: none;
}

.hero--v5 .hero3d__atmosphere {
  inset: 24% 11% 0;
  border-radius: 50%;
  opacity: 0.92;
  filter: blur(22px);
}

.hero--v5 .hero3d__canvas {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.88;
  -webkit-mask-image: radial-gradient(ellipse at var(--hero-v5-core-x) var(--hero-v5-core-y), black 0 38%, rgba(0,0,0,.74) 58%, transparent 88%);
  mask-image: radial-gradient(ellipse at var(--hero-v5-core-x) var(--hero-v5-core-y), black 0 38%, rgba(0,0,0,.74) 58%, transparent 88%);
}

.hero--v5 .hero-v5__solar-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform:
    translate3d(
      calc(var(--pp-core-logo-x) * -0.08),
      calc(var(--pp-core-logo-y) * -0.08),
      -20px
    );
}

.hero--v5 .hero-v5__solar-ring {
  position: absolute;
  left: var(--hero-v5-core-x);
  top: var(--hero-v5-core-y);
  border: 1px solid rgba(91, 190, 255, 0.13);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 0 3rem rgba(43, 133, 255, 0.025),
    0 0 1.4rem rgba(58, 156, 255, 0.035);
}

.hero--v5 .hero-v5__solar-ring::before {
  content: "";
  position: absolute;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #9cd8ff;
  box-shadow:
    0 0 0.5rem rgba(175, 225, 255, 0.94),
    0 0 1.4rem rgba(55, 159, 255, 0.42);
}

.hero--v5 .hero-v5__solar-ring--one {
  width: min(44vw, 33rem);
  aspect-ratio: 1.75;
  rotate: -7deg;
}

.hero--v5 .hero-v5__solar-ring--one::before {
  left: 15%;
  top: 12%;
}

.hero--v5 .hero-v5__solar-ring--two {
  width: min(60vw, 45rem);
  aspect-ratio: 2.1;
  rotate: 11deg;
  border-color: rgba(78, 162, 255, 0.09);
}

.hero--v5 .hero-v5__solar-ring--two::before {
  right: 11%;
  bottom: 18%;
}

.hero--v5 .hero-v5__solar-ring--three {
  width: min(72vw, 54rem);
  aspect-ratio: 2.7;
  rotate: -15deg;
  border-color: rgba(61, 143, 255, 0.06);
}

.hero--v5 .hero-v5__solar-ring--three::before {
  left: 29%;
  bottom: 4%;
  width: 0.30rem;
  height: 0.30rem;
  opacity: 0.75;
}

.hero--v5 .hero-v5__solar-axis {
  position: absolute;
  left: var(--hero-v5-core-x);
  top: var(--hero-v5-core-y);
  width: min(66vw, 49rem);
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(87, 183, 255, 0.11), rgba(205, 240, 255, 0.16), rgba(87, 183, 255, 0.11), transparent);
  box-shadow: 0 0 1rem rgba(63, 161, 255, 0.07);
}

.hero--v5 .hero-v5__solar-axis--a {
  transform: translate(-50%, -50%) rotate(18deg);
}

.hero--v5 .hero-v5__solar-axis--b {
  transform: translate(-50%, -50%) rotate(-27deg);
  opacity: 0.55;
}

.hero--v5 .hero-v5__solar-flare {
  position: absolute;
  left: var(--hero-v5-core-x);
  top: var(--hero-v5-core-y);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero--v5 .hero-v5__solar-flare--a {
  width: min(37vw, 28rem);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(100, 196, 255, 0.12), rgba(31, 118, 255, 0.06) 28%, transparent 66%);
  filter: blur(14px);
}

.hero--v5 .hero-v5__solar-flare--b {
  width: min(54vw, 40rem);
  aspect-ratio: 1;
  border: 1px solid rgba(91, 187, 255, 0.055);
  box-shadow: 0 0 5rem rgba(41, 128, 255, 0.045);
}

/* The old device pedestal is intentionally absent in Hero V5. */
.hero--v5 .hero3d__pedestal {
  display: none !important;
}

/* P² becomes a round liquid-glass "sun". */
.hero--v5 .hero-v5__sun {
  left: var(--hero-v5-core-x);
  top: var(--hero-v5-core-y);
  width: clamp(18rem, 28vw, 25.5rem);
  aspect-ratio: 1;
  transform:
    translate(-50%, -50%)
    translateY(var(--pp-core-float))
    rotateX(calc(var(--pp-core-rx) + .45deg))
    rotateY(calc(var(--pp-core-ry) - .65deg));
}

.hero--v5 .hero3d-core__aura {
  inset: -8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 31%, rgba(220, 244, 255, .16), transparent 17%),
    radial-gradient(circle at 56% 50%, rgba(59, 156, 255, .22), rgba(24, 89, 215, .07) 43%, transparent 72%);
  filter: blur(29px);
  opacity: 0.92;
}

.hero--v5 .hero3d-core__backplate,
.hero--v5 .hero3d-core__rear-shell,
.hero--v5 .hero3d-core__depth-frame,
.hero--v5 .hero3d-core__shell,
.hero--v5 .hero3d-core__inner-glass,
.hero--v5 .hero3d-core__shell::before,
.hero--v5 .hero3d-core__shell::after {
  border-radius: 50%;
}

.hero--v5 .hero3d-core__backplate {
  inset: 8%;
  opacity: 0.42;
  background:
    radial-gradient(circle at 46% 41%, rgba(80, 173, 255, .20), transparent 32%),
    radial-gradient(circle, rgba(7, 35, 84, .72), rgba(0, 6, 18, .90) 68%);
  border-color: rgba(97, 191, 255, .17);
}

.hero--v5 .hero3d-core__rear-shell {
  inset: 3.4%;
  opacity: 0.70;
  border-color: rgba(132, 214, 255, .22);
}

.hero--v5 .hero3d-core__depth-frame {
  inset: 5.2%;
  border-color: rgba(174, 226, 255, .22);
}

.hero--v5 .hero3d-core__shell {
  overflow: hidden;
  border-color: rgba(228, 248, 255, .58);
  background:
    radial-gradient(circle at var(--pp-light-x) var(--pp-light-y), rgba(255,255,255,.36), transparent 11%),
    radial-gradient(circle at 50% 54%, rgba(38, 132, 255, .075), transparent 49%),
    conic-gradient(from 211deg, rgba(183,228,255,.12), rgba(10,42,103,.015) 20%, rgba(55,149,255,.08) 43%, rgba(2,11,31,.01) 62%, rgba(198,235,255,.10) 83%, rgba(183,228,255,.12));
  box-shadow:
    inset 3px 0 0 rgba(235, 249, 255, calc(var(--pp-rim-left) * .23)),
    inset -4px 0 0 rgba(87, 178, 255, calc(var(--pp-rim-right) * .20)),
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -4px 0 rgba(57,151,255,.15),
    inset 0 0 5rem rgba(64,153,255,.055),
    0 0 0 1px rgba(154,214,255,.12),
    0 0 3.1rem rgba(68,169,255,.18),
    0 2.2rem 5.2rem rgba(0,0,0,.34);
  -webkit-backdrop-filter: blur(2px) saturate(138%);
  backdrop-filter: blur(2px) saturate(138%);
}

.hero--v5 .hero3d-core__inner-glass {
  inset: 7%;
  border-color: rgba(194, 232, 255, .19);
}

.hero--v5 .hero3d-core__chamber {
  border-radius: 50%;
}

.hero--v5 .hero3d-core__logo-stack {
  width: 56%;
  height: 56%;
}

.hero--v5 .hero3d-core__logo--front {
  filter:
    brightness(1.08)
    saturate(1.10)
    drop-shadow(0 0 1.2rem rgba(68, 167, 255, .26));
}

.hero--v5 .hero3d-core__rim {
  border-radius: 50%;
}

/* ------------------------------------------------------------------ */
/* Glass satellites live on the outer orbits, not next to the logo.   */
/* ------------------------------------------------------------------ */

.hero--v5 .hero-v5__satellites {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.hero--v5 .hero-v5__satellite {
  position: absolute;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.58rem;
  width: clamp(10.5rem, 16.5vw, 13.25rem);
  min-height: 3.45rem;
  padding: 0.54rem 0.68rem 0.54rem 0.56rem;
  border: 1px solid rgba(177, 225, 255, 0.30);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(145deg, rgba(31, 88, 150, 0.30), rgba(3, 15, 34, 0.49) 56%, rgba(14, 55, 103, 0.28));
  -webkit-backdrop-filter: blur(20px) saturate(168%);
  backdrop-filter: blur(20px) saturate(168%);
  color: #eef8ff;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(78,178,255,.14),
    inset 1px 0 0 rgba(214,242,255,.09),
    0 1.1rem 2.8rem rgba(0,0,0,.32),
    0 0 1.6rem rgba(60,160,255,.12);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.74;
  transform-style: preserve-3d;
  transition:
    opacity 180ms ease,
    border-color 200ms ease,
    box-shadow 240ms ease,
    filter 220ms ease,
    transform 330ms cubic-bezier(.17,.77,.2,1);
}

.hero--v5 .hero-v5__satellite::before {
  inset: 1px;
  z-index: 0;
  border-radius: calc(1.15rem - 1px);
  background:
    linear-gradient(111deg, transparent 14%, rgba(255,255,255,.12) 38%, rgba(142,216,255,.035) 49%, transparent 66%);
  opacity: .72;
}

.hero--v5 .hero-v5__satellite::after {
  inset: 4px;
  z-index: -1;
  border-radius: calc(1.15rem - 4px);
  opacity: 0.32;
  transform: translate3d(4px, 5px, -15px);
  border-color: rgba(112, 205, 255, .30);
}

.hero--v5 .hero-v5__satellite-index {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(134, 211, 255, .37);
  border-radius: 0.72rem;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.10), transparent 36%),
    rgba(6, 33, 70, .44);
  color: #7fc9ff;
  font-size: 0.60rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.hero--v5 .hero-v5__satellite-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.12rem;
}

.hero--v5 .hero-v5__satellite-copy strong {
  color: rgba(242, 249, 255, 0.96);
  font-size: 0.82rem;
  line-height: 1.1;
}

.hero--v5 .hero-v5__satellite-copy small {
  color: rgba(154, 197, 232, 0.62);
  font-size: 0.60rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero--v5 .hero-v5__satellite-node {
  position: relative;
  z-index: 2;
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 50%;
  background: rgba(110, 202, 255, .74);
  box-shadow:
    0 0 0 .28rem rgba(74, 173, 255, .05),
    0 0 1rem rgba(74, 178, 255, .52);
}

.hero--v5 .hero3d-card--strategy {
  top: 38%;
  left: 8%;
  right: auto;
  bottom: auto;
  transform:
    translate3d(
      calc(var(--pp-core-logo-x) * -0.18),
      calc(var(--pp-core-logo-y) * -0.10),
      18px
    )
    rotate(-5deg);
}

.hero--v5 .hero3d-card--design {
  top: 37%;
  right: 7%;
  left: auto;
  bottom: auto;
  transform:
    translate3d(
      calc(var(--pp-core-logo-x) * 0.20),
      calc(var(--pp-core-logo-y) * -0.12),
      26px
    )
    rotate(5deg);
}

.hero--v5 .hero3d-card--development {
  right: 8%;
  bottom: 4%;
  left: auto;
  top: auto;
  transform:
    translate3d(
      calc(var(--pp-core-logo-x) * 0.16),
      calc(var(--pp-core-logo-y) * 0.12),
      30px
    )
    rotate(-4deg);
}

.hero--v5 .hero3d-card--continuity {
  left: 7%;
  bottom: 5%;
  right: auto;
  top: auto;
  transform:
    translate3d(
      calc(var(--pp-core-logo-x) * -0.20),
      calc(var(--pp-core-logo-y) * 0.14),
      20px
    )
    rotate(4deg);
}

.hero--v5 .hero3d[data-active-card] .hero-v5__satellite {
  opacity: 0.30;
  filter: saturate(.65) brightness(.78);
}

.hero--v5 .hero3d[data-active-card="strategy"] .hero3d-card--strategy,
.hero--v5 .hero3d[data-active-card="design"] .hero3d-card--design,
.hero--v5 .hero3d[data-active-card="development"] .hero3d-card--development,
.hero--v5 .hero3d[data-active-card="continuity"] .hero3d-card--continuity,
.hero--v5 .hero-v5__satellite:is(:hover, :focus-visible) {
  opacity: 1;
  filter: none;
  border-color: rgba(220, 246, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(84,184,255,.20),
    0 1.25rem 3rem rgba(0,0,0,.34),
    0 0 2.1rem rgba(65,169,255,.27);
}

.hero--v5 .hero3d[data-active-card="strategy"] .hero3d-card--strategy,
.hero--v5 .hero3d-card--strategy:is(:hover, :focus-visible) {
  transform: translate3d(1.2rem, 0.65rem, 44px) rotate(-2.5deg) scale(1.035);
}

.hero--v5 .hero3d[data-active-card="design"] .hero3d-card--design,
.hero--v5 .hero3d-card--design:is(:hover, :focus-visible) {
  transform: translate3d(-1.2rem, 0.65rem, 44px) rotate(2.5deg) scale(1.035);
}

.hero--v5 .hero3d[data-active-card="development"] .hero3d-card--development,
.hero--v5 .hero3d-card--development:is(:hover, :focus-visible) {
  transform: translate3d(-1.2rem, -0.65rem, 44px) rotate(-2deg) scale(1.035);
}

.hero--v5 .hero3d[data-active-card="continuity"] .hero3d-card--continuity,
.hero--v5 .hero3d-card--continuity:is(:hover, :focus-visible) {
  transform: translate3d(1.2rem, -0.65rem, 44px) rotate(2deg) scale(1.035);
}

.hero--v5 .hero-v5__satellite:focus-visible {
  outline: 2px solid #79c9ff;
  outline-offset: 4px;
}

.hero--v5 .hero3d[data-active-card] .hero3d-core__aura {
  opacity: 1;
  filter: blur(25px) saturate(1.22);
}

.hero--v5 .hero3d[data-active-card] .hero3d-core__shell {
  border-color: rgba(232, 250, 255, 0.78);
  box-shadow:
    inset 3px 0 0 rgba(235,249,255,.22),
    inset -4px 0 0 rgba(87,178,255,.20),
    inset 0 2px 0 rgba(255,255,255,.30),
    inset 0 0 5.2rem rgba(67,160,255,.07),
    0 0 4rem rgba(79,187,255,.23),
    0 2.2rem 5.2rem rgba(0,0,0,.34);
}

.hero--v5 .hero-v5__connections {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.70;
}

.hero--v5 .hero3d__connection {
  stroke: rgba(84, 178, 255, 0.25);
  stroke-width: 0.85;
  stroke-dasharray: 3 14 36 25;
  opacity: 0.28;
}

.hero--v5 .hero3d__connection.is-active {
  stroke: rgba(228, 250, 255, 0.96);
  stroke-width: 1.35;
  opacity: 0.92 !important;
  filter:
    drop-shadow(0 0 2px rgba(236, 251, 255, .74))
    drop-shadow(0 0 8px rgba(68, 169, 255, .48));
}

.hero--v5 .hero-v5__hint {
  right: 1.5%;
  bottom: 1.2%;
  color: rgba(173, 209, 240, 0.28);
  font-size: 0.56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Intermediate viewports.                                            */
/* ------------------------------------------------------------------ */

@media (max-width: 72rem) {
  .hero--v5 {
    --hero-v5-core-y: 67%;
  }

  .hero--v5 .hero-v5__stage {
    min-height: 50rem;
  }

  .hero--v5 .hero-v5__title {
    font-size: clamp(3.25rem, 6.5vw, 5.45rem);
  }

  .hero--v5 .hero-v5__sun {
    width: clamp(17.5rem, 30vw, 23rem);
  }

  .hero--v5 .hero-v5__satellite {
    width: clamp(9.4rem, 17vw, 11.5rem);
  }

  .hero--v5 .hero3d-card--strategy {
    left: 4%;
  }

  .hero--v5 .hero3d-card--design {
    right: 4%;
  }

  .hero--v5 .hero3d-card--development {
    right: 4%;
  }

  .hero--v5 .hero3d-card--continuity {
    left: 4%;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile: same DOM, vertical reading first, compact solar scene.      */
/* ------------------------------------------------------------------ */

@media (max-width: 50rem) {
  .hero--v5 {
    --hero-v5-core-x: 50%;
    --hero-v5-core-y: 52%;
    min-height: auto;
    padding: 0.85rem 0 1.25rem;
  }

  .hero--v5::before {
    background-size: 3.5rem 3.5rem;
    -webkit-mask-image: radial-gradient(circle at 50% 76%, black 0 18%, transparent 74%);
    mask-image: radial-gradient(circle at 50% 76%, black 0 18%, transparent 74%);
  }

  .hero--v5 .hero-v5__stage {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .hero--v5 .hero-v5__copy {
    position: relative;
    width: 100%;
    padding-top: 1.15rem;
    padding-inline: 0;
    text-align: center;
  }

  .hero--v5 .hero__eyebrow {
    margin-bottom: 0.9rem;
    padding: 0.38rem 0.66rem;
    font-size: 0.66rem;
  }

  .hero--v5 .hero-v5__title {
    width: 100%;
    max-width: 11.8ch;
    font-size: clamp(2.55rem, 12vw, 4rem);
    line-height: 0.91;
    letter-spacing: -0.052em;
  }

  .hero--v5 .hero-v5__title-line,
  .hero--v5 .hero-v5__title-line--a,
  .hero--v5 .hero-v5__title-line--b,
  .hero--v5 .hero-v5__title-line--c,
  .hero--v5 .hero-v5__title-line--d {
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    transform: none;
    font-size: 1em;
  }

  .hero--v5 .hero-v5__title-line--d {
    display: inline-block;
  }

  .hero--v5 .hero-v5__title-line--d::before,
  .hero--v5 .hero-v5__title-line--d::after {
    display: none;
  }

  .hero--v5 .hero__lead {
    width: 100%;
    max-width: 34rem;
    margin-top: 1.1rem;
    font-size: 0.94rem;
    line-height: 1.60;
  }

  .hero--v5 .hero-v5__actions {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 0.36rem;
    margin-top: 1rem;
    padding: 0.34rem;
    border-radius: 1.4rem;
  }

  .hero--v5 .hero-v5__action-divider {
    display: none;
  }

  .hero--v5 .hero-v5__actions .button {
    width: 100%;
    justify-content: center;
    min-height: 3rem;
  }

  .hero--v5 .hero-v5__highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start;
    width: 100%;
    max-width: 28rem;
    gap: 0.68rem 0.9rem;
    margin-top: 0.88rem;
    padding: 0.72rem 0.35rem 0;
  }

  .hero--v5 .hero-v5__highlights li {
    min-width: 0;
    white-space: normal;
    font-size: 0.68rem;
  }

  .hero--v5 .hero-v5__scene {
    position: relative;
    inset: auto;
    order: 2;
    width: calc(100% + 0.8rem);
    margin: 0.35rem -0.4rem -0.4rem;
  }

  .hero--v5 .hero-v5__viewport {
    min-height: 27rem;
    height: auto;
    max-height: 30rem;
    aspect-ratio: 4 / 4.45;
    overflow: hidden;
    perspective: 900px;
  }

  .hero--v5 .hero-v5__viewport::before {
    width: 28rem;
  }

  .hero--v5 .hero-v5__viewport::after {
    width: 27rem;
    aspect-ratio: 1.45;
  }

  .hero--v5 .hero3d__atmosphere {
    inset: 8% 0 2%;
  }

  .hero--v5 .hero-v5__solar-ring--one {
    width: min(88vw, 23rem);
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: min(108vw, 28rem);
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: min(122vw, 32rem);
  }

  .hero--v5 .hero-v5__solar-axis {
    width: min(115vw, 30rem);
  }

  .hero--v5 .hero-v5__solar-flare--a {
    width: min(76vw, 19rem);
  }

  .hero--v5 .hero-v5__solar-flare--b {
    width: min(100vw, 25rem);
  }

  .hero--v5 .hero-v5__sun {
    width: min(59vw, 15.5rem);
  }

  .hero--v5 .hero3d-core__logo-stack {
    width: 57%;
    height: 57%;
  }

  .hero--v5 .hero-v5__satellite {
    width: auto;
    min-width: 7.5rem;
    min-height: 2.55rem;
    padding: 0.36rem 0.48rem 0.36rem 0.40rem;
    gap: 0.36rem;
    border-radius: 0.92rem;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }

  .hero--v5 .hero-v5__satellite-index {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.54rem;
    font-size: 0.50rem;
  }

  .hero--v5 .hero-v5__satellite-copy strong {
    font-size: 0.65rem;
  }

  .hero--v5 .hero-v5__satellite-copy small {
    display: none;
  }

  .hero--v5 .hero-v5__satellite-node {
    width: 0.34rem;
    height: 0.34rem;
  }

  .hero--v5 .hero3d-card--strategy {
    top: 8%;
    left: 3%;
  }

  .hero--v5 .hero3d-card--design {
    top: 9%;
    right: 3%;
  }

  .hero--v5 .hero3d-card--development {
    right: 2%;
    bottom: 7%;
  }

  .hero--v5 .hero3d-card--continuity {
    left: 2%;
    bottom: 8%;
  }

  .hero--v5 .hero3d[data-active-card="strategy"] .hero3d-card--strategy,
  .hero--v5 .hero3d-card--strategy:is(:hover, :focus-visible),
  .hero--v5 .hero3d[data-active-card="design"] .hero3d-card--design,
  .hero--v5 .hero3d-card--design:is(:hover, :focus-visible),
  .hero--v5 .hero3d[data-active-card="development"] .hero3d-card--development,
  .hero--v5 .hero3d-card--development:is(:hover, :focus-visible),
  .hero--v5 .hero3d[data-active-card="continuity"] .hero3d-card--continuity,
  .hero--v5 .hero3d-card--continuity:is(:hover, :focus-visible) {
    transform: translate3d(0, 0, 30px) scale(1.025);
  }

  .hero--v5 .hero-v5__hint {
    display: none;
  }
}

@media (max-width: 23.5rem) {
  .hero--v5 .hero-v5__title {
    font-size: clamp(2.35rem, 12vw, 3.1rem);
  }

  .hero--v5 .hero-v5__satellite {
    min-width: 6.8rem;
  }

  .hero--v5 .hero-v5__satellite-index {
    display: none;
  }
}

/* 200% zoom / constrained desktop: return to a readable vertical flow. */
@media (max-width: 64rem) and (min-resolution: 1.5dppx) {
  .hero--v5 .hero-v5__copy {
    width: min(100%, 54rem);
  }
}

/* Designed reduced-motion state: static solar system, no motion dependency. */
@media (prefers-reduced-motion: reduce) {
  .hero--v5 .hero-v5__title-line,
  .hero--v5 .hero-v5__satellite,
  .hero--v5 .hero-v5__solar-field,
  .hero--v5 .hero3d-core {
    animation: none !important;
    transition: none !important;
  }

  .hero--v5 .hero-v5__satellite {
    transform: none !important;
  }

  .hero--v5 .hero-v5__hint {
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hero--v5 .hero__eyebrow,
  .hero--v5 .hero-v5__actions,
  .hero--v5 .hero-v5__satellite {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(5, 18, 37, 0.96);
  }
}


/* ==================================================================
 * Hero V5 — Phase A v1.1 / hierarchy + solar emphasis refinement
 * Visual-only iteration:
 * - stronger sun/corona
 * - more legible orbital rails
 * - more optical satellite glass
 * - stronger centered editorial hierarchy
 * - more integrated CTA console
 * No JS/Canvas amplitude increase in this phase.
 * ================================================================== */

@media (min-width: 50.0625rem) {
  .hero--v5 {
    --hero-v5-core-y: 67.5%;
    min-height: min(59rem, calc(100svh - 4.75rem));
    background:
      radial-gradient(circle at 50% 66%, rgba(42, 141, 255, 0.25), transparent 20rem),
      radial-gradient(circle at 50% 48%, rgba(42, 140, 255, 0.085), transparent 31rem),
      radial-gradient(circle at 50% 10%, rgba(27, 81, 168, 0.08), transparent 28rem),
      linear-gradient(180deg, #020711 0%, #03101f 50%, #02070f 100%);
  }

  .hero--v5 .hero-v5__stage {
    min-height: clamp(50rem, 86svh, 57rem);
  }

  /* Give the arrival hierarchy a single centered focal corridor. */
  .hero--v5 .hero-v5__copy {
    width: min(100%, 78rem);
    padding-top: clamp(1.05rem, 2.6vh, 1.9rem);
  }

  .hero--v5 .hero__eyebrow {
    margin-bottom: clamp(0.72rem, 1.35vh, 0.95rem);
    border-color: rgba(128, 211, 255, 0.20);
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.07), transparent 64%),
      rgba(6, 24, 48, 0.30);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 0 1.6rem rgba(47,146,255,.06);
  }

  .hero--v5 .hero-v5__title {
    width: min(100%, 15ch);
    font-size: clamp(3.8rem, 6.45vw, 7.05rem);
    line-height: 0.80;
    letter-spacing: -0.066em;
    text-shadow:
      0 0 2.9rem rgba(2, 7, 20, 0.84),
      0 0 5rem rgba(20, 89, 206, 0.12);
  }

  .hero--v5 .hero-v5__title-line--a {
    transform: translateX(-0.35rem);
    font-size: 0.90em;
  }

  .hero--v5 .hero-v5__title-line--b {
    transform: translateX(1.1rem);
    font-size: 0.79em;
  }

  .hero--v5 .hero-v5__title-line--c {
    transform: translateX(-0.8rem);
    font-size: 0.72em;
    letter-spacing: -0.056em;
  }

  .hero--v5 .hero-v5__title-line--d {
    transform: translateX(0.9rem);
    margin-top: 0.06em;
    padding-inline: 0.2em;
    font-size: 1.26em;
    letter-spacing: -0.072em;
    text-shadow:
      0 0 1.5rem rgba(49, 151, 255, 0.36),
      0 0 4.6rem rgba(37, 102, 255, 0.20);
  }

  .hero--v5 .hero-v5__title-line--d::before,
  .hero--v5 .hero-v5__title-line--d::after {
    width: clamp(2.1rem, 4vw, 4.4rem);
    background: linear-gradient(90deg, transparent, rgba(157, 225, 255, 0.92));
    box-shadow:
      0 0 .9rem rgba(74, 177, 255, .52),
      0 0 1.8rem rgba(47, 137, 255, .22);
  }

  .hero--v5 .hero__lead {
    width: min(100%, 46rem);
    margin-top: clamp(0.92rem, 1.6vh, 1.18rem);
    padding-inline: 1rem;
    color: rgba(224, 236, 248, 0.88);
    font-size: clamp(0.96rem, 0.89rem + 0.18vw, 1.08rem);
    line-height: 1.58;
    text-shadow:
      0 0 1.2rem rgba(1, 7, 20, 0.94),
      0 0 2.4rem rgba(13, 55, 130, 0.18);
  }

  /* Stronger single-piece glass command console. */
  .hero--v5 .hero-v5__actions {
    margin-top: clamp(0.82rem, 1.45vh, 1.05rem);
    padding: 0.44rem;
    border-color: rgba(187, 232, 255, 0.40);
    border-radius: 1.7rem;
    background:
      radial-gradient(circle at 22% -15%, rgba(255,255,255,.18), transparent 35%),
      radial-gradient(circle at 78% 120%, rgba(55,162,255,.12), transparent 42%),
      linear-gradient(151deg, rgba(33, 91, 159, 0.38), rgba(2, 14, 32, 0.62) 56%, rgba(14, 62, 119, 0.34));
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -1px 0 rgba(84,184,255,.16),
      inset 1px 0 0 rgba(220,244,255,.09),
      0 1.25rem 3.2rem rgba(0,0,0,.34),
      0 0 2.8rem rgba(55,158,255,.15);
  }

  .hero--v5 .hero-v5__actions::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: 0.52rem;
    height: 0.52rem;
    translate: -50% -50%;
    border: 1px solid rgba(187, 232, 255, .58);
    border-radius: 50%;
    background: rgba(76, 179, 255, .38);
    box-shadow:
      0 0 0 .3rem rgba(74, 173, 255, .04),
      0 0 1.1rem rgba(73, 177, 255, .42);
    pointer-events: none;
  }

  .hero--v5 .hero-v5__action-divider {
    opacity: 0.55;
  }

  .hero--v5 .button {
    min-height: 3.34rem;
  }

  .hero--v5 .button--primary {
    box-shadow:
      0 0 2.5rem rgba(37, 121, 255, 0.34),
      inset 0 1px 0 rgba(255,255,255,.40);
  }

  .hero--v5 .button--secondary {
    background:
      radial-gradient(circle at 85% 0%, rgba(93,187,255,.055), transparent 42%),
      rgba(5, 20, 40, 0.20);
  }

  .hero--v5 .hero-v5__highlights {
    margin-top: 0.72rem;
    padding-top: 0.64rem;
    opacity: 0.72;
  }

  /* Pull the visual core forward so it reads as a sun, not a glass icon. */
  .hero--v5 .hero-v5__viewport::before {
    width: min(70vw, 52rem);
    background:
      radial-gradient(circle,
        rgba(225, 249, 255, 0.08) 0 6%,
        rgba(111, 210, 255, 0.16) 9%,
        rgba(44, 151, 255, 0.18) 19%,
        rgba(21, 93, 230, 0.07) 38%,
        transparent 67%);
    filter: blur(10px);
  }

  .hero--v5 .hero-v5__viewport::after {
    width: min(68vw, 51rem);
    border-color: rgba(133, 215, 255, 0.18);
    box-shadow:
      inset 0 0 5rem rgba(55, 155, 255, 0.035),
      0 0 2rem rgba(89, 190, 255, 0.08);
  }

  .hero--v5 .hero-v5__sun {
    width: clamp(20rem, 30.5vw, 27.5rem);
    filter:
      drop-shadow(0 0 1.2rem rgba(164, 225, 255, .08))
      drop-shadow(0 0 3.8rem rgba(49, 150, 255, .18));
  }

  .hero--v5 .hero3d-core__aura {
    inset: -18%;
    background:
      radial-gradient(circle at 39% 31%, rgba(235, 250, 255, .22), transparent 13%),
      radial-gradient(circle, rgba(119, 210, 255, .16) 0 18%, rgba(56, 161, 255, .18) 24%, rgba(22, 92, 223, .08) 43%, transparent 70%);
    filter: blur(34px);
    opacity: 1;
  }

  .hero--v5 .hero3d-core__backplate {
    inset: 6%;
    opacity: 0.56;
  }

  .hero--v5 .hero3d-core__rear-shell {
    inset: 2.5%;
    opacity: 0.84;
    border-color: rgba(153, 223, 255, .30);
    box-shadow:
      0 0 1.7rem rgba(66, 171, 255, .12),
      inset 0 1px 0 rgba(255,255,255,.10);
  }

  .hero--v5 .hero3d-core__depth-frame {
    border-color: rgba(193, 238, 255, .34);
  }

  .hero--v5 .hero3d-core__shell {
    border-color: rgba(238, 252, 255, .72);
    background:
      radial-gradient(circle at var(--pp-light-x) var(--pp-light-y), rgba(255,255,255,.44), transparent 10%),
      radial-gradient(circle at 50% 52%, rgba(58, 161, 255, .11), rgba(10, 51, 132, .035) 45%, transparent 63%),
      conic-gradient(from 211deg, rgba(203,239,255,.15), rgba(10,42,103,.015) 20%, rgba(61,161,255,.10) 43%, rgba(2,11,31,.01) 62%, rgba(213,242,255,.12) 83%, rgba(203,239,255,.15));
    box-shadow:
      inset 4px 0 0 rgba(240, 251, 255, calc(var(--pp-rim-left) * .28)),
      inset -5px 0 0 rgba(91, 184, 255, calc(var(--pp-rim-right) * .24)),
      inset 0 2px 0 rgba(255,255,255,.34),
      inset 0 -5px 0 rgba(62,158,255,.19),
      inset 0 0 6rem rgba(70,163,255,.07),
      0 0 0 1px rgba(182,226,255,.17),
      0 0 4rem rgba(85,190,255,.24),
      0 2.6rem 5.5rem rgba(0,0,0,.34);
  }

  .hero--v5 .hero3d-core__inner-glass {
    border-color: rgba(209, 241, 255, .25);
  }

  .hero--v5 .hero3d-core__logo-stack {
    width: 63%;
    height: 63%;
  }

  .hero--v5 .hero3d-core__logo--front {
    filter:
      brightness(1.15)
      saturate(1.14)
      drop-shadow(0 0 1.5rem rgba(76, 180, 255, .34));
  }

  /* Make the orbital rails readable at first glance. */
  .hero--v5 .hero-v5__solar-ring {
    border-color: rgba(122, 210, 255, 0.24);
    box-shadow:
      inset 0 0 3rem rgba(60, 161, 255, 0.045),
      0 0 1.2rem rgba(75, 174, 255, 0.07);
  }

  .hero--v5 .hero-v5__solar-ring--one {
    width: min(48vw, 36rem);
    border-color: rgba(153, 223, 255, 0.30);
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: min(64vw, 48rem);
    border-color: rgba(112, 202, 255, 0.20);
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: min(78vw, 59rem);
    border-color: rgba(89, 179, 255, 0.14);
  }

  .hero--v5 .hero-v5__solar-ring::before {
    width: .50rem;
    height: .50rem;
    background: #d7f4ff;
    box-shadow:
      0 0 .65rem rgba(219, 247, 255, .96),
      0 0 1.8rem rgba(64, 171, 255, .58);
  }

  .hero--v5 .hero-v5__solar-axis {
    width: min(74vw, 56rem);
    background: linear-gradient(
      90deg,
      transparent,
      rgba(96, 192, 255, .12),
      rgba(218, 247, 255, .24),
      rgba(96, 192, 255, .12),
      transparent
    );
    box-shadow: 0 0 1.2rem rgba(75, 176, 255, .09);
  }

  /* Satellites now read as glass objects instead of labels. */
  .hero--v5 .hero-v5__satellite {
    width: clamp(11.5rem, 17.5vw, 14.3rem);
    min-height: 3.8rem;
    padding: .62rem .78rem .62rem .64rem;
    border-color: rgba(201, 238, 255, .42);
    border-radius: 1.28rem;
    background:
      radial-gradient(circle at 17% -8%, rgba(255,255,255,.24), transparent 34%),
      radial-gradient(circle at 84% 112%, rgba(64,170,255,.11), transparent 42%),
      linear-gradient(145deg, rgba(40, 103, 174, .34), rgba(2, 14, 33, .50) 56%, rgba(15, 63, 118, .31));
    -webkit-backdrop-filter: blur(27px) saturate(180%);
    backdrop-filter: blur(27px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -1px 0 rgba(83,183,255,.17),
      inset 1px 0 0 rgba(223,245,255,.12),
      0 1.25rem 3rem rgba(0,0,0,.34),
      0 0 2.2rem rgba(65,166,255,.17);
    opacity: .90;
  }

  .hero--v5 .hero-v5__satellite::before {
    opacity: .90;
  }

  .hero--v5 .hero-v5__satellite::after {
    opacity: .48;
    transform: translate3d(5px, 7px, -17px);
    border-color: rgba(130, 215, 255, .38);
  }

  .hero--v5 .hero-v5__satellite-index {
    width: 2.15rem;
    height: 2.15rem;
    border-color: rgba(157, 222, 255, .49);
    background:
      radial-gradient(circle at 34% 25%, rgba(255,255,255,.17), transparent 32%),
      rgba(8, 38, 80, .48);
  }

  .hero--v5 .hero-v5__satellite-copy strong {
    font-size: .88rem;
  }

  .hero--v5 .hero-v5__satellite-copy small {
    color: rgba(176, 216, 244, .72);
  }

  .hero--v5 .hero-v5__satellite-node {
    width: .52rem;
    height: .52rem;
    background: rgba(171, 228, 255, .88);
    box-shadow:
      0 0 0 .3rem rgba(76, 177, 255, .055),
      0 0 1.3rem rgba(78, 188, 255, .68);
  }

  /* Place each card on a clearly different orbital quadrant. */
  .hero--v5 .hero3d-card--strategy {
    top: 43%;
    left: 2.5%;
    transform:
      translate3d(
        calc(var(--pp-core-logo-x) * -0.24),
        calc(var(--pp-core-logo-y) * -0.13),
        24px
      )
      rotate(-7deg);
  }

  .hero--v5 .hero3d-card--design {
    top: 41%;
    right: 2.5%;
    transform:
      translate3d(
        calc(var(--pp-core-logo-x) * .26),
        calc(var(--pp-core-logo-y) * -.14),
        34px
      )
      rotate(7deg);
  }

  .hero--v5 .hero3d-card--development {
    right: 3%;
    bottom: 1.5%;
    transform:
      translate3d(
        calc(var(--pp-core-logo-x) * .22),
        calc(var(--pp-core-logo-y) * .15),
        38px
      )
      rotate(-6deg);
  }

  .hero--v5 .hero3d-card--continuity {
    left: 3%;
    bottom: 2%;
    transform:
      translate3d(
        calc(var(--pp-core-logo-x) * -.25),
        calc(var(--pp-core-logo-y) * .16),
        26px
      )
      rotate(6deg);
  }

  .hero--v5 .hero-v5__connections {
    opacity: .88;
  }

  .hero--v5 .hero3d__connection {
    stroke: rgba(119, 208, 255, .36);
    stroke-width: 1;
    opacity: .34;
  }
}

/* Keep the already-approved mobile structure stable; only intensify material. */
@media (max-width: 50rem) {
  .hero--v5 .hero-v5__sun {
    width: min(63vw, 16.5rem);
    filter:
      drop-shadow(0 0 1rem rgba(167, 229, 255, .08))
      drop-shadow(0 0 2.5rem rgba(48, 153, 255, .16));
  }

  .hero--v5 .hero3d-core__aura {
    inset: -15%;
    opacity: 1;
  }

  .hero--v5 .hero3d-core__logo-stack {
    width: 62%;
    height: 62%;
  }

  .hero--v5 .hero-v5__solar-ring {
    border-color: rgba(116, 205, 255, .20);
  }

  .hero--v5 .hero-v5__satellite {
    border-color: rgba(190, 231, 255, .34);
    background:
      radial-gradient(circle at 18% 0%, rgba(255,255,255,.17), transparent 35%),
      linear-gradient(145deg, rgba(34, 94, 160, .30), rgba(3, 15, 34, .49) 56%, rgba(14, 55, 103, .30));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.27),
      inset 0 -1px 0 rgba(79,179,255,.14),
      0 .9rem 2.2rem rgba(0,0,0,.30),
      0 0 1.4rem rgba(63,162,255,.14);
    opacity: .86;
  }

  .hero--v5 .hero-v5__actions {
    border-color: rgba(176, 225, 255, .34);
    background:
      radial-gradient(circle at 20% 0%, rgba(255,255,255,.12), transparent 35%),
      linear-gradient(151deg, rgba(29, 82, 145, .34), rgba(2, 14, 32, .59) 56%, rgba(14, 62, 119, .30));
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
  }
}


/* ==================================================================
 * Hero V5 — Phase A v1.2
 * Clear vertical hierarchy:
 * H1 -> Solar Orbit -> support dock
 * Restores pinned orbit interaction without obscuring the P².
 * ================================================================== */

.hero--v5 {
  --hero-v5-core-x: 50%;
  --hero-v5-core-y: 48%;
  min-height: auto;
  padding-bottom: clamp(2.2rem, 4vw, 4rem);
}

.hero--v5 .hero-v5__stage {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hero--v5 .hero-v5__copy {
  position: relative;
  width: min(100%, 79rem);
  margin-inline: auto;
  padding-top: clamp(1.1rem, 2.6vh, 2rem);
  text-align: center;
}

/* Make the H1 a deliberate editorial composition, not a centered paragraph. */
.hero--v5 .hero-v5__title {
  width: min(100%, 14.6ch);
  font-size: clamp(3.9rem, 6.7vw, 7.45rem);
  line-height: 0.77;
  letter-spacing: -0.071em;
}

.hero--v5 .hero-v5__title-line--a {
  transform: translateX(-0.25rem);
  font-size: 0.91em;
}

.hero--v5 .hero-v5__title-line--b {
  transform: translateX(1.25rem);
  font-size: 0.75em;
}

.hero--v5 .hero-v5__title-line--c {
  transform: translateX(-1rem);
  font-size: 0.67em;
}

.hero--v5 .hero-v5__title-line--d {
  transform: translateX(0.85rem);
  margin-top: 0.02em;
  font-size: 1.43em;
  letter-spacing: -0.078em;
  text-shadow:
    0 0 1.75rem rgba(49, 151, 255, 0.42),
    0 0 5rem rgba(37, 102, 255, 0.22);
}

/* Solar scene now owns its own block and no longer sits behind lead/CTA. */
.hero--v5 .hero-v5__scene {
  position: relative;
  inset: auto;
  order: 2;
  width: min(100%, 78rem);
  height: clamp(31rem, 48vw, 39rem);
  margin: clamp(0.25rem, 1vh, 0.7rem) auto 0;
  pointer-events: auto;
}

.hero--v5 .hero-v5__viewport {
  min-height: 100%;
  height: 100%;
  max-height: none;
  overflow: visible;
}

.hero--v5 .hero-v5__sun {
  width: clamp(20rem, 31vw, 27rem);
}

.hero--v5 .hero3d-core__aura {
  inset: -24%;
  background:
    radial-gradient(circle at 39% 31%, rgba(238, 251, 255, .25), transparent 12%),
    radial-gradient(circle, rgba(145, 220, 255, .20) 0 15%, rgba(59, 168, 255, .23) 23%, rgba(24, 95, 229, .10) 43%, transparent 72%);
  filter: blur(39px);
  opacity: 1;
}

.hero--v5 .hero-v5__solar-flare--a {
  width: min(43vw, 31rem);
  background: radial-gradient(circle, rgba(130, 214, 255, 0.18), rgba(42, 145, 255, 0.09) 30%, transparent 68%);
  filter: blur(18px);
}

.hero--v5 .hero-v5__solar-flare--b {
  width: min(60vw, 44rem);
  border-color: rgba(116, 205, 255, 0.10);
  box-shadow:
    0 0 5.5rem rgba(44, 145, 255, 0.08),
    inset 0 0 5rem rgba(66, 165, 255, 0.035);
}

/* Satellites stay clearly outside the solar core. */
.hero--v5 .hero3d-card--strategy {
  top: 20%;
  left: 1.5%;
}

.hero--v5 .hero3d-card--design {
  top: 18%;
  right: 1.5%;
}

.hero--v5 .hero3d-card--continuity {
  left: 2%;
  bottom: 14%;
}

.hero--v5 .hero3d-card--development {
  right: 2%;
  bottom: 13%;
}

/* Non-redundant dynamic readout:
 * the satellite keeps the short label; the panel adds the longer approved line.
 */
.hero--v5 .hero-v5__signal-readout {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: 1.5%;
  width: min(92%, 31rem);
  min-height: 5.1rem;
  translate: -50% 0;
  pointer-events: none;
}

.hero--v5 .hero-v5__signal-panel {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 0.34rem;
  padding: 0.82rem 1rem 0.88rem;
  border: 1px solid rgba(189, 232, 255, 0.34);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 18% -10%, rgba(255,255,255,.20), transparent 36%),
    radial-gradient(circle at 88% 110%, rgba(63,169,255,.10), transparent 42%),
    linear-gradient(145deg, rgba(35, 94, 161, 0.31), rgba(3, 15, 35, 0.55) 58%, rgba(14, 58, 111, 0.30));
  -webkit-backdrop-filter: blur(28px) saturate(178%);
  backdrop-filter: blur(28px) saturate(178%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(84,183,255,.15),
    0 1.2rem 3rem rgba(0,0,0,.30),
    0 0 2.2rem rgba(59,162,255,.15);
  color: rgba(239, 248, 255, .96);
  opacity: 0;
  transform: translateY(.7rem) scale(.96);
  filter: blur(5px);
  visibility: hidden;
  transition:
    opacity 220ms ease,
    transform 280ms cubic-bezier(.18,.78,.2,1),
    filter 220ms ease,
    visibility 0s linear 280ms;
}

.hero--v5 .hero-v5__signal-panel::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(224, 245, 255, .07);
  border-radius: calc(1.25rem - 3px);
  background: linear-gradient(111deg, transparent 20%, rgba(255,255,255,.08) 44%, transparent 67%);
  pointer-events: none;
}

.hero--v5 .hero-v5__signal-meta {
  position: relative;
  z-index: 2;
  color: #7fcaff;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero--v5 .hero-v5__signal-panel p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(231, 244, 255, .91);
  font-size: clamp(.78rem, .74rem + .08vw, .86rem);
  line-height: 1.46;
  text-wrap: pretty;
}

.hero--v5 .hero3d[data-active-card="strategy"] .hero-v5__signal-panel--strategy,
.hero--v5 .hero3d[data-active-card="design"] .hero-v5__signal-panel--design,
.hero--v5 .hero3d[data-active-card="development"] .hero-v5__signal-panel--development,
.hero--v5 .hero3d[data-active-card="continuity"] .hero-v5__signal-panel--continuity {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  visibility: visible;
  transition-delay: 0s;
}

.hero--v5 .hero3d[data-pinned-card] .hero-v5__signal-readout {
  filter: drop-shadow(0 0 1.6rem rgba(61, 166, 255, .11));
}

/* Support dock is physically below the solar system. */
.hero--v5 .hero-v5__support {
  position: relative;
  z-index: 12;
  order: 3;
  width: min(100%, 54rem);
  margin: clamp(0.4rem, 1.4vh, 1rem) auto 0;
  padding: clamp(1rem, 1.8vw, 1.35rem);
  border: 1px solid rgba(173, 222, 255, 0.26);
  border-radius: 1.65rem;
  background:
    radial-gradient(circle at 50% -30%, rgba(255,255,255,.13), transparent 40%),
    radial-gradient(circle at 85% 120%, rgba(55,163,255,.10), transparent 42%),
    linear-gradient(151deg, rgba(24, 72, 132, .28), rgba(2, 13, 31, .55) 58%, rgba(13, 56, 108, .26));
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(78,178,255,.11),
    0 1.25rem 3.4rem rgba(0,0,0,.24),
    0 0 2.6rem rgba(57,158,255,.08);
}

.hero--v5 .hero-v5__support::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 1px solid rgba(223, 245, 255, .055);
  border-radius: calc(1.65rem - 3px);
  pointer-events: none;
}

.hero--v5 .hero-v5__support .hero__lead {
  width: min(100%, 43rem);
  margin: 0 auto;
  padding: 0;
  color: rgba(223, 235, 247, .89);
  font-size: clamp(.94rem, .88rem + .14vw, 1.05rem);
  line-height: 1.62;
  text-align: center;
}

.hero--v5 .hero-v5__support .hero-v5__actions {
  margin-top: .92rem;
}

.hero--v5 .hero-v5__support .hero-v5__highlights {
  margin-top: .82rem;
}

/* Pinning is visually stronger than transient hover/focus. */
.hero--v5 .hero3d[data-pinned-card] .hero-v5__satellite {
  opacity: .22;
  filter: saturate(.55) brightness(.68);
}

.hero--v5 .hero3d[data-pinned-card="strategy"] .hero3d-card--strategy,
.hero--v5 .hero3d[data-pinned-card="design"] .hero3d-card--design,
.hero--v5 .hero3d[data-pinned-card="development"] .hero3d-card--development,
.hero--v5 .hero3d[data-pinned-card="continuity"] .hero3d-card--continuity {
  opacity: 1;
  filter: none;
  border-color: rgba(229, 248, 255, .88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(90,190,255,.22),
    0 1.3rem 3.2rem rgba(0,0,0,.34),
    0 0 2.8rem rgba(71,178,255,.34);
}

/* Mobile: keep the same hierarchy, with readout between orbit and support. */
@media (max-width: 50rem) {
  .hero--v5 {
    --hero-v5-core-x: 50%;
    --hero-v5-core-y: 49%;
    padding-bottom: 1.4rem;
  }

  .hero--v5 .hero-v5__copy {
    padding-top: 1rem;
  }

  .hero--v5 .hero-v5__title {
    width: 100%;
    max-width: 11.6ch;
    font-size: clamp(2.55rem, 12vw, 4rem);
    line-height: .90;
    letter-spacing: -.054em;
  }

  .hero--v5 .hero-v5__title-line,
  .hero--v5 .hero-v5__title-line--a,
  .hero--v5 .hero-v5__title-line--b,
  .hero--v5 .hero-v5__title-line--c,
  .hero--v5 .hero-v5__title-line--d {
    width: auto;
    transform: none;
    font-size: 1em;
  }

  .hero--v5 .hero-v5__title-line--d {
    display: inline-block;
    font-size: 1.12em;
  }

  .hero--v5 .hero-v5__scene {
    width: calc(100% + .8rem);
    height: 29rem;
    margin: .2rem -.4rem 0;
  }

  .hero--v5 .hero-v5__viewport {
    overflow: hidden;
  }

  .hero--v5 .hero-v5__sun {
    width: min(65vw, 16.7rem);
  }

  .hero--v5 .hero3d-card--strategy {
    top: 7%;
    left: 2%;
  }

  .hero--v5 .hero3d-card--design {
    top: 8%;
    right: 2%;
  }

  .hero--v5 .hero3d-card--continuity {
    left: 2%;
    bottom: 18%;
  }

  .hero--v5 .hero3d-card--development {
    right: 2%;
    bottom: 17%;
  }

  .hero--v5 .hero-v5__signal-readout {
    bottom: 1.5%;
    width: min(88%, 19rem);
    min-height: 4.6rem;
  }

  .hero--v5 .hero-v5__signal-panel {
    padding: .72rem .82rem .76rem;
    border-radius: 1.05rem;
    -webkit-backdrop-filter: blur(22px) saturate(166%);
    backdrop-filter: blur(22px) saturate(166%);
  }

  .hero--v5 .hero-v5__support {
    width: 100%;
    margin-top: .55rem;
    padding: .9rem .72rem;
    border-radius: 1.35rem;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--v5 .hero-v5__signal-panel {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hero--v5 .hero-v5__signal-panel,
  .hero--v5 .hero-v5__support {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(5, 18, 37, .97);
  }
}


/* ==================================================================
 * Hero V5 — Phase A v1.3 / first-viewport commercial composition
 * Goal: on desktop, H1 + solar core + primary CTA are all visible on arrival.
 * Visual-only iteration: no new JS, Canvas work, dependencies or motion owner.
 * ================================================================== */

@media (min-width: 50.0625rem) {
  .hero--v5 {
    --hero-v5-core-y: 49%;
    min-height: calc(100svh - 5.25rem);
    padding-top: .35rem;
    padding-bottom: clamp(.9rem, 1.6vh, 1.25rem);
  }

  .hero--v5 .hero-v5__stage {
    min-height: calc(100svh - 6.5rem);
    max-width: 82rem;
    margin-inline: auto;
  }

  /* Eyebrow becomes an ambient system label and stops consuming vertical rhythm. */
  .hero--v5 .hero__eyebrow {
    position: absolute;
    z-index: 14;
    top: .15rem;
    left: 50%;
    translate: -50% 0;
    margin: 0;
    padding: .28rem .66rem;
    border-color: rgba(126, 207, 255, .13);
    background: rgba(4, 20, 42, .22);
    color: rgba(116, 197, 255, .74);
    font-size: .60rem;
    letter-spacing: .11em;
    opacity: .84;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .hero--v5 .hero-v5__copy {
    flex: 0 0 auto;
    width: min(100%, 76rem);
    padding-top: clamp(1.95rem, 3.6vh, 2.65rem);
  }

  /* Three visual rows instead of four: same semantic H1, less vertical height. */
  .hero--v5 .hero-v5__title {
    width: min(100%, 19ch);
    font-size: clamp(3.65rem, 5.75vw, 6.35rem);
    line-height: .82;
    letter-spacing: -.064em;
  }

  .hero--v5 .hero-v5__title-line--a {
    display: block;
    width: max-content;
    margin-inline: auto;
    transform: none;
    font-size: .90em;
  }

  .hero--v5 .hero-v5__title-line--b,
  .hero--v5 .hero-v5__title-line--c {
    display: inline-block;
    width: auto;
    max-width: none;
    margin: .04em 0 0;
    transform: none;
    font-size: .60em;
    letter-spacing: -.047em;
    vertical-align: baseline;
  }

  .hero--v5 .hero-v5__title-line--b {
    margin-right: .20em;
  }

  .hero--v5 .hero-v5__title-line--d {
    display: block;
    width: max-content;
    margin: -.03em auto 0;
    padding-inline: .16em;
    transform: none;
    font-size: 1.20em;
    letter-spacing: -.074em;
    line-height: .86;
    text-shadow:
      0 0 1.5rem rgba(49,151,255,.38),
      0 0 4.4rem rgba(37,102,255,.19);
  }

  .hero--v5 .hero-v5__title-line--d::before,
  .hero--v5 .hero-v5__title-line--d::after {
    width: clamp(1.7rem, 3vw, 3.4rem);
    opacity: .82;
  }

  /* Compact but still dominant solar scene. */
  .hero--v5 .hero-v5__scene {
    flex: 0 0 auto;
    width: min(100%, 76rem);
    height: clamp(21.5rem, 32vh, 25.5rem);
    margin: clamp(.05rem, .3vh, .25rem) auto 0;
  }

  .hero--v5 .hero-v5__sun {
    width: clamp(14.7rem, 20.5vw, 18.5rem);
  }

  .hero--v5 .hero3d-core__aura {
    inset: -34%;
    background:
      radial-gradient(circle at 39% 31%, rgba(241,252,255,.29), transparent 11%),
      radial-gradient(circle,
        rgba(175, 232, 255, .23) 0 13%,
        rgba(72, 181, 255, .26) 23%,
        rgba(28, 108, 240, .12) 43%,
        rgba(10, 51, 154, .035) 58%,
        transparent 73%);
    filter: blur(34px);
  }

  .hero--v5 .hero-v5__solar-flare--a {
    width: min(34vw, 24rem);
    background:
      radial-gradient(circle,
        rgba(177, 232, 255, .20),
        rgba(54, 158, 255, .10) 30%,
        rgba(29, 103, 229, .035) 49%,
        transparent 70%);
    filter: blur(14px);
  }

  .hero--v5 .hero-v5__solar-flare--b {
    width: min(49vw, 36rem);
    box-shadow:
      0 0 5rem rgba(51, 157, 255, .11),
      inset 0 0 4rem rgba(78, 180, 255, .045);
  }

  .hero--v5 .hero-v5__solar-ring--one {
    width: min(35vw, 26rem);
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: min(49vw, 36rem);
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: min(61vw, 46rem);
  }

  .hero--v5 .hero-v5__solar-axis {
    width: min(61vw, 46rem);
  }

  /* Satellites stay outside the sun but fit the viewport. */
  .hero--v5 .hero-v5__satellite {
    width: clamp(9.7rem, 14.5vw, 12rem);
    min-height: 3.15rem;
    padding: .46rem .62rem .46rem .50rem;
    border-radius: 1.08rem;
  }

  .hero--v5 .hero-v5__satellite-index {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: .64rem;
  }

  .hero--v5 .hero-v5__satellite-copy strong {
    font-size: .78rem;
  }

  .hero--v5 .hero-v5__satellite-copy small {
    font-size: .55rem;
  }

  .hero--v5 .hero3d-card--strategy {
    top: 17%;
    left: 3%;
  }

  .hero--v5 .hero3d-card--design {
    top: 16%;
    right: 3%;
  }

  .hero--v5 .hero3d-card--continuity {
    left: 3.5%;
    bottom: 8%;
  }

  .hero--v5 .hero3d-card--development {
    right: 3.5%;
    bottom: 7%;
  }

  /* Dynamic readout becomes a smaller optical HUD, never a large extra section. */
  .hero--v5 .hero-v5__signal-readout {
    left: 50%;
    bottom: -.3rem;
    width: min(86%, 25.5rem);
    min-height: 4.25rem;
  }

  .hero--v5 .hero-v5__signal-panel {
    padding: .66rem .86rem .72rem;
    border-radius: 1rem;
    border-color: rgba(204, 239, 255, .39);
    background:
      radial-gradient(circle at 18% -10%, rgba(255,255,255,.22), transparent 36%),
      radial-gradient(circle at 88% 115%, rgba(63,169,255,.12), transparent 42%),
      linear-gradient(145deg, rgba(39,101,170,.33), rgba(3,15,35,.48) 58%, rgba(14,58,111,.28));
    -webkit-backdrop-filter: blur(30px) saturate(184%);
    backdrop-filter: blur(30px) saturate(184%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -1px 0 rgba(84,183,255,.17),
      0 1rem 2.6rem rgba(0,0,0,.27),
      0 0 2.4rem rgba(66,171,255,.18);
  }

  .hero--v5 .hero-v5__signal-meta {
    font-size: .59rem;
  }

  .hero--v5 .hero-v5__signal-panel p {
    font-size: .76rem;
    line-height: 1.4;
  }

  /* Bottom commercial dock: shallow, wide, clearly 2.5D and visible on arrival. */
  .hero--v5 .hero-v5__support {
    flex: 0 0 auto;
    position: relative;
    width: min(100%, 63rem);
    margin: clamp(.35rem, .8vh, .65rem) auto 0;
    padding: .78rem .95rem .72rem;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(25rem, .9fr);
    grid-template-areas:
      "lead actions"
      "highlights highlights";
    align-items: center;
    gap: .62rem 1rem;
    border-color: rgba(195, 235, 255, .38);
    border-radius: 1.45rem;
    background:
      radial-gradient(circle at 17% -40%, rgba(255,255,255,.18), transparent 38%),
      radial-gradient(circle at 84% 120%, rgba(59,171,255,.14), transparent 42%),
      linear-gradient(154deg, rgba(31,86,151,.34), rgba(2,13,31,.52) 54%, rgba(13,59,113,.29));
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    backdrop-filter: blur(32px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -1px 0 rgba(79,179,255,.15),
      inset 1px 0 0 rgba(219,244,255,.08),
      0 1.05rem 2.8rem rgba(0,0,0,.28),
      0 0 2.6rem rgba(57,158,255,.12);
    transform-style: preserve-3d;
  }

  .hero--v5 .hero-v5__support::before {
    inset: 3px;
    z-index: 0;
    border-color: rgba(232, 249, 255, .08);
    border-radius: calc(1.45rem - 3px);
    background:
      linear-gradient(112deg, transparent 16%, rgba(255,255,255,.075) 43%, transparent 66%);
  }

  .hero--v5 .hero-v5__support::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 2.2%;
    right: 2.2%;
    bottom: -.45rem;
    height: 68%;
    border: 1px solid rgba(93, 186, 255, .14);
    border-radius: 1.35rem;
    background: rgba(7, 29, 60, .18);
    box-shadow:
      0 .8rem 2.6rem rgba(0,0,0,.30),
      0 0 1.8rem rgba(52,152,255,.07);
    transform: perspective(900px) rotateX(-7deg) translateZ(-18px);
    transform-origin: top center;
    pointer-events: none;
  }

  .hero--v5 .hero-v5__support .hero__lead {
    grid-area: lead;
    position: relative;
    z-index: 2;
    width: auto;
    margin: 0;
    padding: 0 .2rem;
    color: rgba(224,237,248,.88);
    font-size: clamp(.78rem, .73rem + .09vw, .86rem);
    line-height: 1.5;
    text-align: left;
    text-wrap: pretty;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions {
    grid-area: actions;
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    margin: 0;
    grid-template-columns: minmax(0, 1.05fr) 1px minmax(0, .95fr);
    padding: .30rem;
    border-radius: 1.25rem;
    border-color: rgba(209, 241, 255, .46);
    background:
      radial-gradient(circle at 20% -20%, rgba(255,255,255,.22), transparent 34%),
      radial-gradient(circle at 86% 120%, rgba(66,177,255,.14), transparent 40%),
      linear-gradient(152deg, rgba(39,102,170,.40), rgba(3,15,34,.58) 56%, rgba(15,66,124,.34));
    -webkit-backdrop-filter: blur(28px) saturate(184%);
    backdrop-filter: blur(28px) saturate(184%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -1px 0 rgba(88,187,255,.18),
      0 .85rem 2.2rem rgba(0,0,0,.25),
      0 0 2rem rgba(62,165,255,.16);
    transform: perspective(900px) rotateX(2.2deg) translateZ(12px);
    transform-origin: center bottom;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::before {
    border-color: rgba(235, 249, 255, .10);
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::after {
    width: .46rem;
    height: .46rem;
    background: rgba(142, 220, 255, .58);
    box-shadow:
      0 0 0 .26rem rgba(74,173,255,.05),
      0 0 1.2rem rgba(79,185,255,.52);
  }

  .hero--v5 .hero-v5__support .button {
    min-height: 2.85rem;
    padding-inline: .85rem;
    font-size: .82rem;
  }

  .hero--v5 .hero-v5__support .button--primary {
    background:
      radial-gradient(circle at 24% 0%, rgba(255,255,255,.29), transparent 34%),
      linear-gradient(180deg, #3da7ff 0%, #1773f5 66%, #0a59dc 100%);
    box-shadow:
      0 0 2rem rgba(42,133,255,.34),
      inset 0 1px 0 rgba(255,255,255,.44),
      inset 0 -1px 0 rgba(6,58,174,.42);
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights {
    grid-area: highlights;
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: .55rem .2rem 0;
    justify-content: center;
    gap: .45rem clamp(.85rem, 1.6vw, 1.4rem);
    border-top-color: rgba(129, 206, 255, .12);
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights li {
    font-size: .64rem;
  }

  /* At shorter laptop heights, compact one more step before anything falls below fold. */
  @media (max-height: 820px) {
    .hero--v5 .hero-v5__copy {
      padding-top: 1.7rem;
    }

    .hero--v5 .hero-v5__title {
      font-size: clamp(3.35rem, 5.25vw, 5.55rem);
    }

    .hero--v5 .hero-v5__scene {
      height: clamp(18.5rem, 29vh, 21.5rem);
    }

    .hero--v5 .hero-v5__sun {
      width: clamp(13rem, 18vw, 16rem);
    }

    .hero--v5 .hero-v5__support {
      padding-block: .66rem .58rem;
    }

    .hero--v5 .hero-v5__support .hero__lead {
      font-size: .75rem;
      line-height: 1.43;
    }

    .hero--v5 .hero-v5__support .button {
      min-height: 2.65rem;
    }
  }
}

/* Mobile stays on the approved vertical structure; only reclaim trivial space. */
@media (max-width: 50rem) {
  .hero--v5 .hero__eyebrow {
    display: none;
  }

  .hero--v5 .hero-v5__copy {
    padding-top: .65rem;
  }

  .hero--v5 .hero-v5__title {
    line-height: .89;
  }

  .hero--v5 .hero-v5__support {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(79,179,255,.14),
      0 .95rem 2.4rem rgba(0,0,0,.27),
      0 0 1.8rem rgba(57,158,255,.10);
  }

  .hero--v5 .hero-v5__support .hero-v5__actions {
    transform: none;
  }
}

/* ==================================================================
 * Hero V5 — Phase A v1.4 / CTA command deck + stronger solar read
 * Visual-only refinement.
 * ================================================================== */

.hero--v5 .hero__eyebrow {
  display: none !important;
}

@media (min-width: 50.0625rem) {
  .hero--v5 {
    --hero-v5-core-y: 49.5%;
    padding-top: .2rem;
    padding-bottom: .7rem;
  }

  .hero--v5 .hero-v5__stage {
    min-height: calc(100svh - 6.2rem);
  }

  .hero--v5 .hero-v5__copy {
    padding-top: clamp(.7rem, 1.5vh, 1.1rem);
  }

  .hero--v5 .hero-v5__title {
    width: min(100%, 18.5ch);
    font-size: clamp(3.65rem, 5.65vw, 6.25rem);
    line-height: .81;
  }

  .hero--v5 .hero-v5__title-line--a { font-size: .90em; }

  .hero--v5 .hero-v5__title-line--b,
  .hero--v5 .hero-v5__title-line--c { font-size: .60em; }

  .hero--v5 .hero-v5__title-line--d {
    position: relative;
    margin-top: -.02em;
    font-size: 1.33em;
    line-height: .83;
    color: #389dff;
    text-shadow:
      0 0 1.2rem rgba(92,191,255,.36),
      0 0 2.5rem rgba(55,148,255,.30),
      0 0 5rem rgba(29,93,255,.20);
  }

  .hero--v5 .hero-v5__title-line--d::before,
  .hero--v5 .hero-v5__title-line--d::after {
    width: clamp(2.3rem, 4vw, 4.6rem);
    opacity: .95;
    background: linear-gradient(90deg, transparent, rgba(183,236,255,.96));
    box-shadow:
      0 0 .8rem rgba(119,211,255,.55),
      0 0 1.6rem rgba(60,164,255,.24);
  }

  .hero--v5 .hero-v5__scene {
    height: clamp(22rem, 33.5vh, 26rem);
    margin-top: .05rem;
  }

  .hero--v5 .hero-v5__sun {
    width: clamp(15.8rem, 22.5vw, 20.2rem);
    filter:
      drop-shadow(0 0 1.1rem rgba(173,231,255,.10))
      drop-shadow(0 0 3rem rgba(58,167,255,.20))
      drop-shadow(0 0 5rem rgba(31,103,255,.11));
  }

  .hero--v5 .hero3d-core__aura {
    inset: -42%;
    background:
      radial-gradient(circle at 38% 30%, rgba(244,253,255,.34), transparent 10%),
      radial-gradient(circle,
        rgba(193,238,255,.26) 0 11%,
        rgba(91,200,255,.30) 20%,
        rgba(47,156,255,.22) 30%,
        rgba(28,104,236,.10) 48%,
        transparent 72%);
    filter: blur(36px);
  }

  .hero--v5 .hero-v5__solar-flare--a {
    width: min(39vw, 28rem);
    background:
      radial-gradient(circle,
        rgba(207,245,255,.18) 0 8%,
        rgba(112,211,255,.18) 18%,
        rgba(54,158,255,.12) 32%,
        transparent 69%);
    filter: blur(13px);
  }

  .hero--v5 .hero-v5__solar-flare--b {
    width: min(54vw, 40rem);
    border-color: rgba(126,214,255,.12);
    box-shadow:
      0 0 5.5rem rgba(61,169,255,.13),
      inset 0 0 5rem rgba(84,187,255,.05);
  }

  .hero--v5 .hero-v5__solar-ring {
    box-shadow:
      inset 0 0 2.6rem rgba(64,171,255,.05),
      0 0 1.3rem rgba(90,194,255,.09);
  }

  .hero--v5 .hero-v5__solar-ring--one {
    width: min(38vw, 28rem);
    border-color: rgba(173,229,255,.33);
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: min(53vw, 39rem);
    border-color: rgba(124,207,255,.23);
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: min(66vw, 49rem);
    border-color: rgba(95,186,255,.16);
  }

  .hero--v5 .hero-v5__solar-axis {
    width: min(66vw, 49rem);
    opacity: .86;
  }

  .hero--v5 .hero-v5__satellite {
    border-color: rgba(214,243,255,.46);
    background:
      radial-gradient(circle at 17% -8%, rgba(255,255,255,.26), transparent 34%),
      radial-gradient(circle at 84% 112%, rgba(71,179,255,.12), transparent 42%),
      linear-gradient(145deg, rgba(45,111,184,.36), rgba(3,15,34,.48) 56%, rgba(15,67,125,.33));
    -webkit-backdrop-filter: blur(28px) saturate(186%);
    backdrop-filter: blur(28px) saturate(186%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.38),
      inset 0 -1px 0 rgba(87,187,255,.18),
      inset 1px 0 0 rgba(228,247,255,.12),
      0 1rem 2.7rem rgba(0,0,0,.31),
      0 0 2rem rgba(68,173,255,.18);
  }

  .hero--v5 .hero-v5__signal-readout {
    bottom: -.15rem;
    width: min(86%, 27rem);
    min-height: 4.35rem;
  }

  .hero--v5 .hero-v5__signal-panel {
    padding: .68rem .9rem .74rem;
    border-color: rgba(222,246,255,.50);
    border-radius: 1.05rem;
    background:
      radial-gradient(circle at 16% -15%, rgba(255,255,255,.26), transparent 34%),
      radial-gradient(circle at 86% 116%, rgba(70,181,255,.14), transparent 42%),
      linear-gradient(145deg, rgba(45,107,178,.36), rgba(2,14,33,.45) 58%, rgba(15,62,118,.31));
    -webkit-backdrop-filter: blur(32px) saturate(188%);
    backdrop-filter: blur(32px) saturate(188%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.40),
      inset 0 -1px 0 rgba(89,188,255,.18),
      0 .95rem 2.5rem rgba(0,0,0,.25),
      0 0 2.5rem rgba(69,176,255,.22);
  }

  .hero--v5 .hero-v5__signal-panel::after {
    content: "";
    position: absolute;
    inset: 4px 12% auto 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216,244,255,.55), transparent);
    box-shadow: 0 0 .9rem rgba(115,211,255,.26);
    pointer-events: none;
  }

  .hero--v5 .hero-v5__signal-meta {
    color: #8ed2ff;
    text-shadow: 0 0 .8rem rgba(75,173,255,.25);
  }

  /* Rebuild the commercial zone: the CTA deck becomes the visual object. */
  .hero--v5 .hero-v5__support {
    width: min(100%, 63rem);
    margin-top: .42rem;
    padding: .56rem .65rem .58rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "lead"
      "actions"
      "highlights";
    gap: .48rem;
    border: 0;
    border-radius: 1.5rem;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    transform-style: preserve-3d;
  }

  .hero--v5 .hero-v5__support::before,
  .hero--v5 .hero-v5__support::after {
    display: none;
  }

  .hero--v5 .hero-v5__support .hero__lead {
    grid-area: lead;
    width: min(100%, 46rem);
    margin-inline: auto;
    padding: 0 .3rem;
    text-align: center;
    color: rgba(220,235,248,.83);
    font-size: clamp(.77rem, .72rem + .09vw, .84rem);
    line-height: 1.48;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions {
    grid-area: actions;
    position: relative;
    isolation: isolate;
    width: min(100%, 36rem);
    margin: 0 auto;
    padding: .38rem;
    grid-template-columns: minmax(0, 1.08fr) 1px minmax(0, .92fr);
    border: 1px solid rgba(207,240,255,.48);
    border-radius: 1.45rem;
    background:
      radial-gradient(circle at 18% -20%, rgba(255,255,255,.28), transparent 35%),
      radial-gradient(circle at 84% 124%, rgba(71,181,255,.16), transparent 40%),
      linear-gradient(150deg, rgba(44,109,181,.42), rgba(3,15,34,.62) 55%, rgba(15,67,127,.36));
    -webkit-backdrop-filter: blur(34px) saturate(190%);
    backdrop-filter: blur(34px) saturate(190%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.42),
      inset 0 -1px 0 rgba(92,191,255,.20),
      inset 1px 0 0 rgba(228,247,255,.10),
      0 1rem 2.6rem rgba(0,0,0,.30),
      0 0 2.4rem rgba(68,176,255,.21);
    transform: perspective(900px) rotateX(4deg) translateZ(18px);
    transform-origin: center bottom;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: auto 3.5% -.48rem;
    height: 72%;
    border: 1px solid rgba(92,184,255,.20);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(16,63,120,.24), rgba(4,19,43,.42));
    box-shadow:
      0 .8rem 2.4rem rgba(0,0,0,.32),
      0 0 1.8rem rgba(52,158,255,.08);
    transform: perspective(800px) rotateX(-9deg) translateZ(-22px);
    transform-origin: top center;
    pointer-events: none;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 2px 2px auto 2px;
    height: 42%;
    border-radius: 1.25rem 1.25rem .7rem .7rem;
    background: linear-gradient(112deg, rgba(255,255,255,.12), transparent 34%, rgba(111,205,255,.06) 60%, transparent);
    -webkit-mask-image: linear-gradient(#000, transparent);
    mask-image: linear-gradient(#000, transparent);
    pointer-events: none;
  }

  .hero--v5 .hero-v5__action-divider {
    position: relative;
    z-index: 5;
    width: 1px;
    height: 58%;
    background: linear-gradient(transparent, rgba(184,226,255,.35), transparent);
    box-shadow: 0 0 .8rem rgba(71,174,255,.16);
  }

  .hero--v5 .hero-v5__support .button {
    position: relative;
    z-index: 6;
    min-height: 3rem;
    border-radius: 1.08rem;
    font-size: .84rem;
    transform: translateZ(12px);
  }

  .hero--v5 .hero-v5__support .button--primary {
    border-color: rgba(221,247,255,.72);
    background:
      radial-gradient(circle at 25% -5%, rgba(255,255,255,.34), transparent 34%),
      linear-gradient(180deg, #45adff 0%, #1b78f6 63%, #0a5ade 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.48),
      inset 0 -1px 0 rgba(4,55,171,.46),
      0 0 1.8rem rgba(49,141,255,.42),
      0 .55rem 1.3rem rgba(0,0,0,.20);
  }

  .hero--v5 .hero-v5__support .button--primary::before {
    content: "";
    position: absolute;
    inset: 2px 12% auto 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.74), transparent);
    box-shadow: 0 0 .7rem rgba(255,255,255,.28);
    pointer-events: none;
  }

  .hero--v5 .hero-v5__support .button--secondary {
    border-color: rgba(144,208,255,.12);
    background:
      radial-gradient(circle at 85% -15%, rgba(109,205,255,.08), transparent 38%),
      rgba(5,22,44,.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  }

  .hero--v5 .hero-v5__support .button--secondary:is(:hover, :focus-visible) {
    border-color: rgba(180,226,255,.28);
    background:
      radial-gradient(circle at 80% -10%, rgba(113,207,255,.12), transparent 42%),
      rgba(16,52,92,.32);
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights {
    grid-area: highlights;
    width: min(100%, 36rem);
    margin: 0 auto;
    padding: .36rem .2rem 0;
    gap: .35rem clamp(.75rem, 1.3vw, 1.15rem);
    border-top-color: rgba(129,205,255,.10);
    opacity: .60;
  }

  @media (max-height: 820px) {
    .hero--v5 .hero-v5__copy { padding-top: .55rem; }
    .hero--v5 .hero-v5__title { font-size: clamp(3.25rem, 5vw, 5.25rem); }
    .hero--v5 .hero-v5__scene { height: clamp(18.8rem, 28.5vh, 21.5rem); }
    .hero--v5 .hero-v5__sun { width: clamp(13.4rem, 18.7vw, 16.5rem); }
    .hero--v5 .hero-v5__support { margin-top: .28rem; padding-block: .38rem .40rem; }
    .hero--v5 .hero-v5__support .hero__lead { font-size: .74rem; }
    .hero--v5 .hero-v5__support .button { min-height: 2.72rem; font-size: .80rem; }
  }
}

@media (max-width: 50rem) {
  .hero--v5 .hero-v5__title-line--d {
    color: #3aa0ff;
    text-shadow:
      0 0 1rem rgba(69,174,255,.34),
      0 0 2.4rem rgba(46,125,255,.22);
  }

  .hero--v5 .hero-v5__sun {
    width: min(67vw, 17.1rem);
  }

  .hero--v5 .hero3d-core__aura {
    inset: -24%;
    filter: blur(30px);
  }

  .hero--v5 .hero-v5__support {
    padding: .7rem .62rem .72rem;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .hero--v5 .hero-v5__support::before,
  .hero--v5 .hero-v5__support::after {
    display: none;
  }

  .hero--v5 .hero-v5__support .hero__lead {
    width: 100%;
    padding: .75rem .72rem;
    border: 1px solid rgba(173,221,255,.20);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(24,73,132,.22), rgba(3,15,34,.36));
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    font-size: .76rem;
    line-height: 1.48;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions {
    width: 100%;
    margin-top: .56rem;
    padding: .36rem;
    border-color: rgba(205,239,255,.42);
    border-radius: 1.28rem;
    background:
      radial-gradient(circle at 20% -20%, rgba(255,255,255,.22), transparent 34%),
      linear-gradient(150deg, rgba(39,101,170,.38), rgba(3,15,34,.60) 56%, rgba(15,65,123,.33));
    -webkit-backdrop-filter: blur(28px) saturate(182%);
    backdrop-filter: blur(28px) saturate(182%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.32),
      inset 0 -1px 0 rgba(88,185,255,.16),
      0 .9rem 2.3rem rgba(0,0,0,.28),
      0 0 1.8rem rgba(63,164,255,.17);
    transform: none;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 4% -.38rem;
    height: 58%;
    border: 1px solid rgba(87,176,255,.16);
    border-radius: 1.05rem;
    background: rgba(7,29,58,.28);
    box-shadow: 0 .7rem 2rem rgba(0,0,0,.28);
    transform: perspective(700px) rotateX(-8deg);
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 2px 2px auto;
    height: 38%;
    border-radius: 1.05rem 1.05rem .6rem .6rem;
    background: linear-gradient(112deg, rgba(255,255,255,.10), transparent 48%);
    pointer-events: none;
  }

  .hero--v5 .hero-v5__support .button {
    min-height: 2.9rem;
    border-radius: .98rem;
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights {
    margin-top: .52rem;
    opacity: .62;
  }

  .hero--v5 .hero-v5__signal-panel {
    border-color: rgba(209,240,255,.40);
    background:
      radial-gradient(circle at 16% -15%, rgba(255,255,255,.20), transparent 35%),
      linear-gradient(145deg, rgba(39,101,170,.31), rgba(3,15,34,.50) 58%, rgba(15,62,118,.29));
  }
}


/* ==================================================================
 * Hero V5 — Phase A v1.5 / hierarchy, orbital motion & command CTA
 * - stronger editorial title / P² solar presence
 * - slow orbital rails (paused offscreen by existing Hero runtime class)
 * - more expressive pinned-satellite state
 * - CTA becomes a liquid command bridge with hover lift
 * - capability labels become glass system chips
 * ================================================================== */

@media (min-width: 50.0625rem) {
  .hero--v5 .hero-v5__title {
    width: min(100%, 18.8ch);
    font-size: clamp(3.7rem, 5.8vw, 6.5rem);
    line-height: .79;
  }

  .hero--v5 .hero-v5__title-line--a {
    font-size: .94em;
    transform: translateX(-.55rem);
  }

  .hero--v5 .hero-v5__title-line--b,
  .hero--v5 .hero-v5__title-line--c {
    font-size: .59em;
  }

  .hero--v5 .hero-v5__title-line--b {
    transform: translateX(.8rem);
  }

  .hero--v5 .hero-v5__title-line--c {
    transform: translateX(-.45rem);
  }

  .hero--v5 .hero-v5__title-line--d {
    font-size: 1.47em;
    transform: translateX(.55rem);
    color: #3da4ff;
    text-shadow:
      0 0 1.1rem rgba(117, 211, 255, .34),
      0 0 2.8rem rgba(58, 154, 255, .34),
      0 0 5.4rem rgba(31, 91, 255, .22);
  }

  .hero--v5 .hero-v5__scene {
    height: clamp(22.5rem, 34.5vh, 27rem);
  }

  .hero--v5 .hero-v5__sun {
    width: clamp(17rem, 24vw, 22rem);
    filter:
      drop-shadow(0 0 1.25rem rgba(195, 239, 255, .12))
      drop-shadow(0 0 3.5rem rgba(72, 180, 255, .24))
      drop-shadow(0 0 6.2rem rgba(32, 103, 255, .15));
  }

  .hero--v5 .hero3d-core__aura {
    inset: -50%;
    background:
      radial-gradient(circle at 38% 30%, rgba(248,254,255,.36), transparent 9%),
      radial-gradient(circle,
        rgba(219, 247, 255, .28) 0 10%,
        rgba(117, 214, 255, .34) 18%,
        rgba(55, 168, 255, .26) 29%,
        rgba(28, 105, 238, .12) 47%,
        rgba(14, 61, 178, .04) 59%,
        transparent 73%);
    filter: blur(38px);
  }

  .hero--v5 .hero-v5__solar-flare--a {
    width: min(42vw, 31rem);
    opacity: .96;
  }

  .hero--v5 .hero-v5__solar-flare--b {
    width: min(59vw, 44rem);
    border-color: rgba(144, 222, 255, .15);
  }

  .hero--v5 .hero-v5__solar-ring--one {
    width: min(41vw, 30rem);
    border-color: rgba(188, 236, 255, .38);
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: min(56vw, 42rem);
    border-color: rgba(138, 216, 255, .28);
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: min(70vw, 52rem);
    border-color: rgba(105, 195, 255, .19);
  }

  .hero--v5 .hero-v5__solar-axis {
    width: min(70vw, 52rem);
    opacity: .93;
  }

  /* Pinned selection feels like locking onto an orbiting module. */
  .hero--v5 .hero3d[data-pinned-card] .hero-v5__satellite {
    opacity: .20;
    filter: saturate(.52) brightness(.66);
  }

  .hero--v5 .hero3d[data-pinned-card="strategy"] .hero3d-card--strategy,
  .hero--v5 .hero3d[data-pinned-card="design"] .hero3d-card--design,
  .hero--v5 .hero3d[data-pinned-card="development"] .hero3d-card--development,
  .hero--v5 .hero3d[data-pinned-card="continuity"] .hero3d-card--continuity {
    opacity: 1;
    filter: none;
    border-color: rgba(239, 251, 255, .92);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.52),
      inset 0 -1px 0 rgba(99,198,255,.25),
      0 1.35rem 3.3rem rgba(0,0,0,.34),
      0 0 1.2rem rgba(185,231,255,.18),
      0 0 3.2rem rgba(75,184,255,.39);
  }

  .hero--v5 .hero3d[data-pinned-card="strategy"] .hero3d-card--strategy .hero-v5__satellite-node,
  .hero--v5 .hero3d[data-pinned-card="design"] .hero3d-card--design .hero-v5__satellite-node,
  .hero--v5 .hero3d[data-pinned-card="development"] .hero3d-card--development .hero-v5__satellite-node,
  .hero--v5 .hero3d[data-pinned-card="continuity"] .hero3d-card--continuity .hero-v5__satellite-node {
    background: #e2f8ff;
    box-shadow:
      0 0 0 .32rem rgba(96, 195, 255, .08),
      0 0 1rem rgba(211, 246, 255, .82),
      0 0 2rem rgba(65, 174, 255, .72);
    animation: ppV5LockedNode 1.8s ease-in-out infinite;
  }

  /* Readout becomes a holographic slab connected to the selected system. */
  .hero--v5 .hero-v5__signal-panel {
    border-color: rgba(231, 249, 255, .56);
    background:
      radial-gradient(circle at 15% -18%, rgba(255,255,255,.29), transparent 35%),
      radial-gradient(circle at 86% 118%, rgba(77,188,255,.17), transparent 42%),
      linear-gradient(145deg, rgba(49,116,188,.39), rgba(2,14,33,.42) 58%, rgba(15,67,126,.32));
    -webkit-backdrop-filter: blur(34px) saturate(194%);
    backdrop-filter: blur(34px) saturate(194%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.46),
      inset 0 -1px 0 rgba(95,194,255,.20),
      0 1rem 2.6rem rgba(0,0,0,.25),
      0 0 1.2rem rgba(188,233,255,.08),
      0 0 2.8rem rgba(72,183,255,.26);
  }

  .hero--v5 .hero-v5__signal-panel::before {
    background:
      linear-gradient(111deg, transparent 14%, rgba(255,255,255,.15) 39%, rgba(137,218,255,.04) 50%, transparent 67%);
  }

  /* Commercial copy becomes a small manifesto rail, not a generic paragraph. */
  .hero--v5 .hero-v5__support .hero__lead {
    position: relative;
    width: min(100%, 49rem);
    padding: .48rem 2.8rem;
    border-top: 1px solid rgba(124, 207, 255, .10);
    border-bottom: 1px solid rgba(124, 207, 255, .10);
    color: rgba(226, 240, 250, .88);
    font-size: clamp(.79rem, .74rem + .09vw, .87rem);
    letter-spacing: .005em;
  }

  .hero--v5 .hero-v5__support .hero__lead::before,
  .hero--v5 .hero-v5__support .hero__lead::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1.7rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125, 213, 255, .55));
    box-shadow: 0 0 .8rem rgba(63, 170, 255, .18);
  }

  .hero--v5 .hero-v5__support .hero__lead::before {
    left: .35rem;
  }

  .hero--v5 .hero-v5__support .hero__lead::after {
    right: .35rem;
    transform: scaleX(-1);
  }

  /* CTA command bridge: curved lens + underplate + active hover lift. */
  .hero--v5 .hero-v5__support .hero-v5__actions {
    width: min(100%, 38rem);
    padding: .34rem;
    border-color: rgba(220, 246, 255, .58);
    border-radius: 999px;
    background:
      radial-gradient(circle at 19% -28%, rgba(255,255,255,.34), transparent 35%),
      radial-gradient(circle at 82% 132%, rgba(77,189,255,.20), transparent 42%),
      linear-gradient(150deg, rgba(49,119,195,.46), rgba(3,15,34,.64) 54%, rgba(15,72,134,.39));
    -webkit-backdrop-filter: blur(36px) saturate(198%);
    backdrop-filter: blur(36px) saturate(198%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.52),
      inset 0 -1px 0 rgba(98,198,255,.24),
      inset 1px 0 0 rgba(235,250,255,.12),
      0 1rem 2.8rem rgba(0,0,0,.32),
      0 0 1.4rem rgba(182,232,255,.08),
      0 0 3rem rgba(75,185,255,.24);
    transform: perspective(900px) rotateX(5deg) translateZ(22px);
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::before {
    inset: auto 5% -.58rem;
    height: 76%;
    border-color: rgba(107, 199, 255, .24);
    border-radius: 999px;
    background:
      radial-gradient(circle at 50% 0%, rgba(82,180,255,.08), transparent 58%),
      linear-gradient(180deg, rgba(18,70,134,.30), rgba(4,20,45,.48));
    box-shadow:
      0 .9rem 2.5rem rgba(0,0,0,.34),
      0 0 2rem rgba(56,166,255,.10);
    transform: perspective(820px) rotateX(-11deg) translateZ(-24px);
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::after {
    inset: 2px 4% auto;
    height: 45%;
    border-radius: 999px 999px 50% 50%;
    background:
      linear-gradient(108deg, rgba(255,255,255,.16), transparent 31%, rgba(127,217,255,.07) 60%, transparent);
  }

  .hero--v5 .hero-v5__support .button {
    min-height: 3.05rem;
    border-radius: 999px;
    transition:
      transform 220ms cubic-bezier(.18,.78,.2,1),
      border-color 180ms ease,
      background 220ms ease,
      box-shadow 220ms ease,
      filter 220ms ease;
  }

  .hero--v5 .hero-v5__support .button:is(:hover, :focus-visible) {
    transform: translate3d(0, -.18rem, 18px) scale(1.018);
    filter: saturate(1.08) brightness(1.04);
  }

  .hero--v5 .hero-v5__support .button--primary:is(:hover, :focus-visible) {
    border-color: rgba(244, 253, 255, .90);
    background:
      radial-gradient(circle at 25% -6%, rgba(255,255,255,.40), transparent 34%),
      linear-gradient(180deg, #58b8ff 0%, #2384fa 62%, #0c61e4 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.58),
      inset 0 -1px 0 rgba(5,63,181,.48),
      0 .8rem 1.8rem rgba(0,0,0,.18),
      0 0 2.5rem rgba(57,158,255,.58);
  }

  .hero--v5 .hero-v5__support .button--secondary:is(:hover, :focus-visible) {
    border-color: rgba(197, 235, 255, .34);
    background:
      radial-gradient(circle at 80% -10%, rgba(129,218,255,.16), transparent 42%),
      linear-gradient(180deg, rgba(31,86,145,.34), rgba(5,25,48,.38));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 .7rem 1.6rem rgba(0,0,0,.16),
      0 0 1.8rem rgba(67,173,255,.21);
  }

  /* Capability rail: four micro glass modules instead of weak text. */
  .hero--v5 .hero-v5__support .hero-v5__highlights {
    width: min(100%, 39rem);
    padding: .34rem 0 0;
    border-top: 0;
    gap: .42rem;
    opacity: 1;
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights li {
    min-height: 2rem;
    padding: .32rem .62rem;
    border: 1px solid rgba(143, 211, 255, .17);
    border-radius: 999px;
    background:
      radial-gradient(circle at 20% -10%, rgba(255,255,255,.10), transparent 38%),
      linear-gradient(145deg, rgba(21,72,126,.22), rgba(3,17,36,.28));
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
    color: rgba(210, 229, 245, .76);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 0 .9rem rgba(60,158,255,.04);
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights li:is(:hover, :focus-within) {
    border-color: rgba(165, 222, 255, .27);
    background:
      radial-gradient(circle at 20% -10%, rgba(255,255,255,.14), transparent 38%),
      linear-gradient(145deg, rgba(28,84,146,.29), rgba(4,21,43,.34));
  }

  @media (max-height: 820px) {
    .hero--v5 .hero-v5__sun {
      width: clamp(14.3rem, 19.8vw, 17.4rem);
    }

    .hero--v5 .hero-v5__support .hero__lead {
      padding-block: .36rem;
    }

    .hero--v5 .hero-v5__support .hero-v5__highlights li {
      min-height: 1.8rem;
      padding-block: .24rem;
    }
  }
}

/* Slow orbit animation only while the existing Hero runtime marks the scene active. */
.hero--v5.hero3d--scene-active .hero-v5__solar-ring--one {
  animation: ppV5OrbitOne 44s linear infinite;
}

.hero--v5.hero3d--scene-active .hero-v5__solar-ring--two {
  animation: ppV5OrbitTwo 62s linear infinite reverse;
}

.hero--v5.hero3d--scene-active .hero-v5__solar-ring--three {
  animation: ppV5OrbitThree 78s linear infinite;
}

.hero--v5.hero3d--scene-active .hero-v5__solar-axis--a {
  animation: ppV5AxisA 54s linear infinite;
}

.hero--v5.hero3d--scene-active .hero-v5__solar-axis--b {
  animation: ppV5AxisB 68s linear infinite reverse;
}

@keyframes ppV5OrbitOne {
  from { rotate: -7deg; }
  to { rotate: 353deg; }
}

@keyframes ppV5OrbitTwo {
  from { rotate: 11deg; }
  to { rotate: 371deg; }
}

@keyframes ppV5OrbitThree {
  from { rotate: -15deg; }
  to { rotate: 345deg; }
}

@keyframes ppV5AxisA {
  from { transform: translate(-50%, -50%) rotate(18deg); }
  to { transform: translate(-50%, -50%) rotate(378deg); }
}

@keyframes ppV5AxisB {
  from { transform: translate(-50%, -50%) rotate(-27deg); }
  to { transform: translate(-50%, -50%) rotate(333deg); }
}

@keyframes ppV5LockedNode {
  0%, 100% { scale: 1; opacity: .95; }
  50% { scale: 1.2; opacity: 1; }
}

@media (max-width: 50rem) {
  .hero--v5 .hero-v5__sun {
    width: min(70vw, 17.8rem);
  }

  .hero--v5 .hero3d-core__aura {
    inset: -30%;
  }

  .hero--v5 .hero-v5__support .hero__lead {
    padding: .72rem .82rem;
    border-color: rgba(188, 229, 255, .24);
    background:
      radial-gradient(circle at 50% -30%, rgba(255,255,255,.08), transparent 38%),
      linear-gradient(145deg, rgba(27,82,144,.24), rgba(3,16,35,.36));
  }

  .hero--v5 .hero-v5__support .hero-v5__actions {
    border-radius: 1.3rem;
  }

  .hero--v5 .hero-v5__support .button {
    transition:
      transform 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease;
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .42rem;
    width: 100%;
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights li {
    justify-content: center;
    min-height: 2rem;
    padding: .3rem .45rem;
    border: 1px solid rgba(143,211,255,.16);
    border-radius: .85rem;
    background: rgba(10,39,73,.22);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--v5 .hero-v5__solar-ring,
  .hero--v5 .hero-v5__solar-axis,
  .hero--v5 .hero-v5__satellite-node,
  .hero--v5 .hero-v5__support .button {
    animation: none !important;
    transition: none !important;
  }

  .hero--v5 .hero-v5__support .button {
    transform: none !important;
  }
}


/* ==================================================================
 * Hero V5 — Phase A v1.6
 * Fullscreen fit + stronger solar system + focus-mode satellites +
 * rebuilt liquid-glass CTA command bridge.
 * ================================================================== */

@media (min-width: 50.0625rem) {
  /* Guarantee the whole commercial hero fits in the desktop arrival viewport. */
  .hero--v5 {
    min-height: auto;
    padding-top: .12rem;
    padding-bottom: .36rem;
  }

  .hero--v5 .hero-v5__stage {
    display: grid;
    grid-template-rows: auto minmax(18rem, 1fr) auto;
    align-items: stretch;
    width: min(100%, 82rem);
    height: min(57rem, calc(100svh - 4.35rem));
    min-height: 42rem;
    margin-inline: auto;
  }

  .hero--v5 .hero-v5__copy {
    grid-row: 1;
    width: min(100%, 76rem);
    padding-top: clamp(.35rem, .8vh, .72rem);
  }

  .hero--v5 .hero-v5__title {
    width: min(100%, 18.8ch);
    font-size: clamp(3.55rem, 5.55vw, 6.2rem);
    line-height: .78;
  }

  .hero--v5 .hero-v5__title-line--a {
    font-size: .92em;
    transform: translateX(-.35rem);
  }

  .hero--v5 .hero-v5__title-line--b,
  .hero--v5 .hero-v5__title-line--c {
    font-size: .57em;
  }

  .hero--v5 .hero-v5__title-line--b {
    transform: translateX(.55rem);
  }

  .hero--v5 .hero-v5__title-line--c {
    transform: translateX(-.35rem);
  }

  .hero--v5 .hero-v5__title-line--d {
    font-size: 1.58em;
    transform: translateX(.3rem);
    line-height: .79;
    color: #43a9ff;
    text-shadow:
      0 0 .95rem rgba(198, 242, 255, .28),
      0 0 2rem rgba(91, 192, 255, .42),
      0 0 4rem rgba(49, 142, 255, .36),
      0 0 6.4rem rgba(30, 88, 255, .22);
  }

  .hero--v5 .hero-v5__scene {
    grid-row: 2;
    align-self: stretch;
    width: min(100%, 78rem);
    height: auto;
    min-height: 0;
    margin: -.15rem auto 0;
  }

  .hero--v5 .hero-v5__viewport {
    min-height: 100%;
    height: 100%;
  }

  .hero--v5 {
    --hero-v5-core-y: 50%;
  }

  .hero--v5 .hero-v5__sun {
    width: clamp(16.7rem, 23.6vw, 21.5rem);
    filter:
      drop-shadow(0 0 1.2rem rgba(218, 249, 255, .14))
      drop-shadow(0 0 3.8rem rgba(89, 195, 255, .30))
      drop-shadow(0 0 6.8rem rgba(39, 126, 255, .18));
  }

  .hero--v5 .hero3d-core__aura {
    inset: -58%;
    background:
      radial-gradient(circle at 38% 29%, rgba(250,255,255,.40), transparent 8%),
      radial-gradient(circle,
        rgba(232, 250, 255, .34) 0 9%,
        rgba(137, 222, 255, .40) 17%,
        rgba(67, 183, 255, .32) 28%,
        rgba(35, 128, 246, .17) 45%,
        rgba(18, 75, 200, .055) 58%,
        transparent 74%);
    filter: blur(41px);
    opacity: 1;
  }

  .hero--v5 .hero-v5__solar-flare--a {
    width: min(46vw, 34rem);
    opacity: 1;
  }

  .hero--v5 .hero-v5__solar-flare--b {
    width: min(63vw, 47rem);
    border-color: rgba(157, 226, 255, .18);
    box-shadow:
      0 0 6.3rem rgba(71, 184, 255, .17),
      inset 0 0 5.2rem rgba(93, 195, 255, .07);
  }

  .hero--v5 .hero-v5__solar-ring {
    border-width: 1.2px;
    box-shadow:
      inset 0 0 2.8rem rgba(77, 184, 255, .06),
      0 0 1.5rem rgba(102, 207, 255, .12);
  }

  .hero--v5 .hero-v5__solar-ring--one {
    width: min(43vw, 32rem);
    border-color: rgba(203, 242, 255, .44);
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: min(59vw, 44rem);
    border-color: rgba(151, 224, 255, .32);
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: min(73vw, 55rem);
    border-color: rgba(114, 201, 255, .22);
  }

  .hero--v5 .hero-v5__solar-axis {
    width: min(73vw, 55rem);
    opacity: .98;
  }

  /* Focus mode: one selected satellite becomes the active module. */
  .hero--v5 .hero3d[data-pinned-card] .hero-v5__satellite {
    opacity: .035;
    filter: saturate(.35) brightness(.48) blur(.35px);
    pointer-events: none;
    scale: .78;
  }

  .hero--v5 .hero3d[data-pinned-card="strategy"] .hero3d-card--strategy,
  .hero--v5 .hero3d[data-pinned-card="design"] .hero3d-card--design,
  .hero--v5 .hero3d[data-pinned-card="development"] .hero3d-card--development,
  .hero--v5 .hero3d[data-pinned-card="continuity"] .hero3d-card--continuity {
    opacity: 1;
    filter: none;
    pointer-events: auto;
    scale: 1.075;
    border-color: rgba(246, 254, 255, .96);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.62),
      inset 0 -1px 0 rgba(108,207,255,.28),
      0 1.4rem 3.5rem rgba(0,0,0,.33),
      0 0 1.3rem rgba(219,247,255,.22),
      0 0 3.8rem rgba(81,191,255,.48);
  }

  .hero--v5 .hero3d[data-pinned-card="strategy"] .hero3d-card--strategy {
    transform: translate3d(2rem, .6rem, 58px) rotate(-2deg) scale(1.075);
  }

  .hero--v5 .hero3d[data-pinned-card="design"] .hero3d-card--design {
    transform: translate3d(-2rem, .6rem, 58px) rotate(2deg) scale(1.075);
  }

  .hero--v5 .hero3d[data-pinned-card="development"] .hero3d-card--development {
    transform: translate3d(-2rem, -.7rem, 58px) rotate(-2deg) scale(1.075);
  }

  .hero--v5 .hero3d[data-pinned-card="continuity"] .hero3d-card--continuity {
    transform: translate3d(2rem, -.7rem, 58px) rotate(2deg) scale(1.075);
  }

  .hero--v5 .hero3d[data-pinned-card] .hero-v5__signal-readout {
    filter:
      drop-shadow(0 0 1.2rem rgba(207, 244, 255, .09))
      drop-shadow(0 0 2.8rem rgba(75, 184, 255, .20));
  }

  .hero--v5 .hero-v5__signal-readout {
    bottom: -.2rem;
    width: min(88%, 29rem);
    min-height: 4.55rem;
  }

  .hero--v5 .hero-v5__signal-panel {
    padding: .74rem 1rem .80rem;
    border-color: rgba(238, 251, 255, .62);
    border-radius: 1.15rem;
    background:
      radial-gradient(circle at 15% -18%, rgba(255,255,255,.34), transparent 34%),
      radial-gradient(circle at 87% 120%, rgba(84,194,255,.19), transparent 43%),
      linear-gradient(145deg, rgba(56,128,202,.43), rgba(2,14,33,.38) 58%, rgba(16,74,138,.34));
    -webkit-backdrop-filter: blur(38px) saturate(205%);
    backdrop-filter: blur(38px) saturate(205%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.56),
      inset 0 -1px 0 rgba(104,203,255,.24),
      0 1.1rem 2.8rem rgba(0,0,0,.25),
      0 0 1.4rem rgba(226,249,255,.10),
      0 0 3.1rem rgba(79,191,255,.31);
  }

  .hero--v5 .hero-v5__signal-panel::after {
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(239,251,255,.80), transparent);
  }

  /* Bottom block stays inside the grid, so CTA never falls below fullscreen. */
  .hero--v5 .hero-v5__support {
    grid-row: 3;
    align-self: end;
    width: min(100%, 61rem);
    margin: .15rem auto 0;
    padding: .24rem .55rem .28rem;
    gap: .30rem;
  }

  /* Manifesto becomes a luminous information rail. */
  .hero--v5 .hero-v5__support .hero__lead {
    width: min(100%, 47rem);
    padding: .42rem 2.6rem;
    border-top: 1px solid rgba(157, 222, 255, .16);
    border-bottom: 1px solid rgba(157, 222, 255, .16);
    background:
      linear-gradient(90deg, transparent, rgba(31, 100, 171, .10) 18%, rgba(40, 122, 204, .12) 50%, rgba(31, 100, 171, .10) 82%, transparent);
    color: rgba(232, 244, 252, .91);
    font-size: clamp(.77rem, .72rem + .08vw, .84rem);
    text-shadow: 0 0 1.2rem rgba(74, 174, 255, .08);
  }

  /* CTA command capsule: stronger glass, depth and hover. */
  .hero--v5 .hero-v5__support .hero-v5__actions {
    width: min(100%, 41rem);
    padding: .38rem;
    border: 1px solid rgba(232, 250, 255, .70);
    border-radius: 1.55rem;
    background:
      radial-gradient(circle at 18% -28%, rgba(255,255,255,.42), transparent 34%),
      radial-gradient(circle at 82% 130%, rgba(93,204,255,.23), transparent 42%),
      linear-gradient(150deg, rgba(57,132,210,.52), rgba(2,14,33,.66) 53%, rgba(17,80,147,.43));
    -webkit-backdrop-filter: blur(40px) saturate(212%);
    backdrop-filter: blur(40px) saturate(212%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.64),
      inset 0 -1px 0 rgba(111,211,255,.28),
      inset 1px 0 0 rgba(241,252,255,.16),
      0 1.1rem 2.9rem rgba(0,0,0,.33),
      0 0 1.5rem rgba(224,248,255,.10),
      0 0 3.5rem rgba(81,192,255,.31);
    transform: perspective(900px) rotateX(5.5deg) translateZ(24px);
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::before {
    inset: auto 4% -.66rem;
    height: 82%;
    border-color: rgba(122, 210, 255, .30);
    border-radius: 1.35rem;
    background:
      radial-gradient(circle at 50% 0%, rgba(102,201,255,.11), transparent 55%),
      linear-gradient(180deg, rgba(20,78,149,.36), rgba(4,20,45,.54));
    box-shadow:
      0 1rem 2.6rem rgba(0,0,0,.36),
      0 0 2.2rem rgba(66,178,255,.13);
    transform: perspective(820px) rotateX(-12deg) translateZ(-26px);
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::after {
    inset: 2px 3% auto;
    height: 48%;
    border-radius: 1.35rem 1.35rem .72rem .72rem;
    background:
      linear-gradient(106deg, rgba(255,255,255,.21), transparent 29%, rgba(148,225,255,.09) 61%, transparent);
  }

  .hero--v5 .hero-v5__support .button {
    min-height: 3.08rem;
    border-radius: 1.15rem;
    transition:
      transform 200ms cubic-bezier(.18,.78,.2,1),
      border-color 180ms ease,
      background 200ms ease,
      box-shadow 220ms ease,
      filter 200ms ease;
  }

  .hero--v5 .hero-v5__support .button:is(:hover, :focus-visible) {
    transform: translate3d(0, -.26rem, 24px) scale(1.025);
    filter: saturate(1.12) brightness(1.06);
  }

  .hero--v5 .hero-v5__support .button--primary:is(:hover, :focus-visible) {
    border-color: rgba(250, 255, 255, .98);
    background:
      radial-gradient(circle at 24% -6%, rgba(255,255,255,.48), transparent 33%),
      linear-gradient(180deg, #68c4ff 0%, #2b91fb 61%, #1069e8 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.70),
      inset 0 -1px 0 rgba(8,69,187,.50),
      0 .9rem 2rem rgba(0,0,0,.18),
      0 0 3rem rgba(64,172,255,.72);
  }

  .hero--v5 .hero-v5__support .button--secondary:is(:hover, :focus-visible) {
    border-color: rgba(221, 246, 255, .42);
    background:
      radial-gradient(circle at 80% -10%, rgba(154,229,255,.19), transparent 42%),
      linear-gradient(180deg, rgba(40,104,167,.42), rgba(6,28,54,.42));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 .8rem 1.8rem rgba(0,0,0,.17),
      0 0 2.2rem rgba(77,187,255,.30);
  }

  /* Capabilities get enough presence to read as part of the system. */
  .hero--v5 .hero-v5__support .hero-v5__highlights {
    width: min(100%, 42rem);
    gap: .36rem;
    padding-top: .28rem;
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights li {
    min-height: 2.05rem;
    padding: .34rem .68rem;
    border-color: rgba(174, 227, 255, .24);
    background:
      radial-gradient(circle at 20% -10%, rgba(255,255,255,.14), transparent 38%),
      linear-gradient(145deg, rgba(28,86,148,.27), rgba(4,20,42,.33));
    color: rgba(224, 238, 249, .84);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.13),
      0 0 1.1rem rgba(67,169,255,.07);
  }

  @media (max-height: 820px) {
    .hero--v5 .hero-v5__stage {
      min-height: 39rem;
      height: calc(100svh - 4.1rem);
    }

    .hero--v5 .hero-v5__title {
      font-size: clamp(3.05rem, 4.8vw, 5.05rem);
    }

    .hero--v5 .hero-v5__title-line--d {
      font-size: 1.46em;
    }

    .hero--v5 .hero-v5__sun {
      width: clamp(13.5rem, 19vw, 16.8rem);
    }

    .hero--v5 .hero-v5__support .hero__lead {
      padding-block: .28rem;
      font-size: .72rem;
    }

    .hero--v5 .hero-v5__support .button {
      min-height: 2.72rem;
    }

    .hero--v5 .hero-v5__support .hero-v5__highlights li {
      min-height: 1.74rem;
      padding-block: .22rem;
    }
  }
}

/* Fix v1.5 selector: scene-active lives on .hero3d, not the section. */
.hero--v5 .hero3d.hero3d--scene-active .hero-v5__solar-ring--one {
  animation: ppV5OrbitOne 24s linear infinite;
}

.hero--v5 .hero3d.hero3d--scene-active .hero-v5__solar-ring--two {
  animation: ppV5OrbitTwo 34s linear infinite reverse;
}

.hero--v5 .hero3d.hero3d--scene-active .hero-v5__solar-ring--three {
  animation: ppV5OrbitThree 46s linear infinite;
}

.hero--v5 .hero3d.hero3d--scene-active .hero-v5__solar-axis--a {
  animation: ppV5AxisA 31s linear infinite;
}

.hero--v5 .hero3d.hero3d--scene-active .hero-v5__solar-axis--b {
  animation: ppV5AxisB 42s linear infinite reverse;
}

/* Neutralize the incorrect old selectors from v1.5. */
.hero--v5.hero3d--scene-active .hero-v5__solar-ring,
.hero--v5.hero3d--scene-active .hero-v5__solar-axis {
  animation: none;
}

@media (max-width: 50rem) {
  .hero--v5 .hero-v5__sun {
    width: min(72vw, 18.2rem);
  }

  .hero--v5 .hero3d-core__aura {
    inset: -34%;
  }

  .hero--v5 .hero3d[data-pinned-card] .hero-v5__satellite {
    opacity: .06;
    filter: saturate(.42) brightness(.55);
  }

  .hero--v5 .hero3d[data-pinned-card="strategy"] .hero3d-card--strategy,
  .hero--v5 .hero3d[data-pinned-card="design"] .hero3d-card--design,
  .hero--v5 .hero3d[data-pinned-card="development"] .hero3d-card--development,
  .hero--v5 .hero3d[data-pinned-card="continuity"] .hero3d-card--continuity {
    opacity: 1;
    filter: none;
    scale: 1.035;
  }

  .hero--v5 .hero-v5__support {
    padding-bottom: .85rem;
  }

  .hero--v5 .hero-v5__support .hero__lead {
    color: rgba(231, 242, 251, .90);
    border-color: rgba(201, 237, 255, .29);
    background:
      radial-gradient(circle at 50% -30%, rgba(255,255,255,.10), transparent 38%),
      linear-gradient(145deg, rgba(34,94,159,.29), rgba(3,17,37,.40));
  }

  .hero--v5 .hero-v5__support .hero-v5__actions {
    border-color: rgba(220, 246, 255, .52);
    background:
      radial-gradient(circle at 20% -20%, rgba(255,255,255,.28), transparent 34%),
      linear-gradient(150deg, rgba(47,115,190,.45), rgba(3,15,34,.64) 56%, rgba(17,74,137,.38));
    -webkit-backdrop-filter: blur(32px) saturate(190%);
    backdrop-filter: blur(32px) saturate(190%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.41),
      inset 0 -1px 0 rgba(96,196,255,.20),
      0 1rem 2.5rem rgba(0,0,0,.30),
      0 0 2.2rem rgba(72,181,255,.23);
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights li {
    color: rgba(222, 237, 248, .82);
    border-color: rgba(172, 226, 255, .22);
    background: rgba(16, 54, 96, .28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--v5 .hero-v5__solar-ring,
  .hero--v5 .hero-v5__solar-axis,
  .hero--v5 .hero-v5__satellite,
  .hero--v5 .hero-v5__satellite-node,
  .hero--v5 .hero-v5__support .button {
    animation: none !important;
    transition: none !important;
  }
}


/* ==================================================================
 * Hero V5 — Phase A v1.7
 * - tighter orbital system around P²
 * - stronger corona
 * - more editorial H1 tension
 * - expressive focus/readout state
 * - rebuilt CTA glass/depth/hover
 * - cleaner mobile capabilities
 * ================================================================== */

@media (min-width: 50.0625rem) {
  /* Editorial tension without increasing total hero height. */
  .hero--v5 .hero-v5__title-line--a {
    transform: translateX(-1.4rem);
  }

  .hero--v5 .hero-v5__title-line--b {
    transform: translateX(2rem);
  }

  .hero--v5 .hero-v5__title-line--c {
    transform: translateX(-.9rem);
  }

  .hero--v5 .hero-v5__title-line--d {
    transform: translateX(1rem);
  }

  /* Corona: more solar emission, not more physical object size. */
  .hero--v5 .hero-v5__viewport::before {
    width: min(52vw, 39rem);
    background:
      radial-gradient(circle,
        rgba(240, 252, 255, .12) 0 7%,
        rgba(167, 230, 255, .20) 11%,
        rgba(89, 198, 255, .24) 20%,
        rgba(47, 152, 255, .15) 34%,
        rgba(24, 88, 220, .05) 52%,
        transparent 72%);
    filter: blur(12px);
    box-shadow:
      0 0 4rem rgba(89, 194, 255, .10),
      0 0 8rem rgba(44, 131, 255, .08);
  }

  .hero--v5 .hero3d-core__aura {
    inset: -68%;
    background:
      radial-gradient(circle at 38% 29%, rgba(252,255,255,.44), transparent 8%),
      radial-gradient(circle,
        rgba(239, 252, 255, .38) 0 9%,
        rgba(158, 230, 255, .45) 17%,
        rgba(78, 191, 255, .36) 28%,
        rgba(41, 137, 250, .20) 44%,
        rgba(19, 75, 204, .07) 58%,
        transparent 75%);
    filter: blur(43px);
  }

  .hero--v5 .hero3d.hero3d--scene-active .hero3d-core__aura {
    animation: ppV5CoronaBreath 4.8s ease-in-out infinite;
  }

  /* Orbits stay visibly centered around the P² instead of roaming the viewport. */
  .hero--v5 .hero-v5__solar-ring--one {
    width: min(31vw, 23rem);
    aspect-ratio: 1.58;
    border-color: rgba(211, 246, 255, .48);
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: min(42vw, 31rem);
    aspect-ratio: 1.78;
    border-color: rgba(161, 228, 255, .35);
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: min(52vw, 39rem);
    aspect-ratio: 2.05;
    border-color: rgba(121, 205, 255, .24);
  }

  .hero--v5 .hero-v5__solar-axis {
    width: min(51vw, 38rem);
  }

  .hero--v5 .hero-v5__solar-flare--a {
    width: min(35vw, 26rem);
  }

  .hero--v5 .hero-v5__solar-flare--b {
    width: min(47vw, 35rem);
  }

  /* Selected satellite feels like a locked module, not only a brighter card. */
  .hero--v5 .hero3d[data-pinned-card="strategy"] .hero3d-card--strategy::before,
  .hero--v5 .hero3d[data-pinned-card="design"] .hero3d-card--design::before,
  .hero--v5 .hero3d[data-pinned-card="development"] .hero3d-card--development::before,
  .hero--v5 .hero3d[data-pinned-card="continuity"] .hero3d-card--continuity::before {
    animation: ppV5SatelliteSweep 1.25s cubic-bezier(.16,.78,.2,1) both;
  }

  .hero--v5 .hero3d[data-active-card] .hero-v5__solar-ring {
    border-color: rgba(207, 244, 255, .46);
    box-shadow:
      inset 0 0 3rem rgba(75, 183, 255, .08),
      0 0 1.8rem rgba(102, 208, 255, .18);
  }

  .hero--v5 .hero3d[data-active-card] .hero3d-core__aura {
    filter: blur(40px) saturate(1.2);
  }

  /* Dynamic panel now behaves as a holographic "active signal" readout. */
  .hero--v5 .hero-v5__signal-readout {
    width: min(90%, 32rem);
    min-height: 5rem;
    bottom: -.30rem;
    transition: transform 320ms cubic-bezier(.18,.78,.2,1);
  }

  .hero--v5 .hero3d[data-pinned-card="strategy"] .hero-v5__signal-readout,
  .hero--v5 .hero3d[data-pinned-card="continuity"] .hero-v5__signal-readout {
    transform: translateX(-2.4rem);
  }

  .hero--v5 .hero3d[data-pinned-card="design"] .hero-v5__signal-readout,
  .hero--v5 .hero3d[data-pinned-card="development"] .hero-v5__signal-readout {
    transform: translateX(2.4rem);
  }

  .hero--v5 .hero-v5__signal-panel {
    min-height: 5rem;
    padding: .82rem 1.05rem .88rem 1.18rem;
    border: 1px solid rgba(241, 253, 255, .72);
    border-left-width: 2px;
    border-radius: 1.2rem;
    background:
      radial-gradient(circle at 14% -18%, rgba(255,255,255,.42), transparent 34%),
      radial-gradient(circle at 88% 122%, rgba(91,202,255,.22), transparent 43%),
      linear-gradient(145deg, rgba(62,139,216,.49), rgba(3,15,35,.42) 56%, rgba(17,80,147,.38));
    -webkit-backdrop-filter: blur(42px) saturate(215%);
    backdrop-filter: blur(42px) saturate(215%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.64),
      inset 0 -1px 0 rgba(111,211,255,.26),
      inset 2px 0 0 rgba(210,244,255,.16),
      0 1.15rem 3rem rgba(0,0,0,.27),
      0 0 1.6rem rgba(227,250,255,.12),
      0 0 3.5rem rgba(82,193,255,.38);
  }

  .hero--v5 .hero-v5__signal-panel--strategy,
  .hero--v5 .hero-v5__signal-panel--continuity {
    transform: translate(-1.3rem, .7rem) scale(.95) rotate(-.7deg);
  }

  .hero--v5 .hero-v5__signal-panel--design,
  .hero--v5 .hero-v5__signal-panel--development {
    transform: translate(1.3rem, .7rem) scale(.95) rotate(.7deg);
  }

  .hero--v5 .hero3d[data-active-card="strategy"] .hero-v5__signal-panel--strategy,
  .hero--v5 .hero3d[data-active-card="design"] .hero-v5__signal-panel--design,
  .hero--v5 .hero3d[data-active-card="development"] .hero-v5__signal-panel--development,
  .hero--v5 .hero3d[data-active-card="continuity"] .hero-v5__signal-panel--continuity {
    transform: translate(0,0) scale(1) rotate(0);
  }

  .hero--v5 .hero-v5__signal-meta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #a1dbff;
    font-size: .62rem;
    letter-spacing: .13em;
  }

  .hero--v5 .hero-v5__signal-meta::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: #dff7ff;
    box-shadow:
      0 0 .7rem rgba(220,247,255,.90),
      0 0 1.3rem rgba(77,183,255,.65);
    animation: ppV5ReadoutPulse 1.9s ease-in-out infinite;
  }

  .hero--v5 .hero-v5__signal-panel p {
    font-size: .82rem;
    line-height: 1.46;
  }

  /* CTA command bridge: more optical glass, more depth, more presence. */
  .hero--v5 .hero-v5__support .hero-v5__actions {
    width: min(100%, 43rem);
    padding: .42rem;
    border: 1px solid rgba(241, 253, 255, .80);
    border-radius: 1.65rem;
    background:
      radial-gradient(circle at 17% -35%, rgba(255,255,255,.50), transparent 34%),
      radial-gradient(circle at 82% 132%, rgba(104,215,255,.27), transparent 43%),
      linear-gradient(148deg, rgba(65,145,224,.58), rgba(3,14,33,.64) 52%, rgba(18,85,154,.48));
    -webkit-backdrop-filter: blur(46px) saturate(225%);
    backdrop-filter: blur(46px) saturate(225%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.76),
      inset 0 -1px 0 rgba(123,220,255,.32),
      inset 1px 0 0 rgba(246,254,255,.18),
      0 1.25rem 3.1rem rgba(0,0,0,.34),
      0 0 1.8rem rgba(230,251,255,.14),
      0 0 4rem rgba(86,198,255,.39);
    transform: perspective(900px) rotateX(6deg) translateZ(28px);
    transition:
      transform 240ms cubic-bezier(.18,.78,.2,1),
      box-shadow 240ms ease,
      border-color 220ms ease;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions:is(:hover, :focus-within) {
    transform: perspective(900px) rotateX(4deg) translateY(-.18rem) translateZ(34px);
    border-color: rgba(251, 255, 255, .94);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.84),
      inset 0 -1px 0 rgba(133,226,255,.36),
      0 1.45rem 3.4rem rgba(0,0,0,.34),
      0 0 2rem rgba(233,252,255,.18),
      0 0 4.7rem rgba(88,201,255,.50);
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::before {
    inset: auto 3.5% -.78rem;
    height: 88%;
    border-color: rgba(142, 221, 255, .38);
    border-radius: 1.45rem;
    background:
      radial-gradient(circle at 50% -5%, rgba(127,219,255,.15), transparent 55%),
      linear-gradient(180deg, rgba(25,91,169,.44), rgba(4,20,46,.61));
    box-shadow:
      0 1.15rem 2.9rem rgba(0,0,0,.38),
      0 0 2.7rem rgba(71,185,255,.17);
    transform: perspective(820px) rotateX(-13deg) translateZ(-30px);
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::after {
    inset: 2px 3% auto;
    height: 52%;
    border-radius: 1.45rem 1.45rem .76rem .76rem;
    background:
      linear-gradient(106deg, rgba(255,255,255,.27), transparent 28%, rgba(162,231,255,.11) 61%, transparent);
  }

  .hero--v5 .hero-v5__support .button {
    position: relative;
    overflow: hidden;
    min-height: 3.18rem;
    border-radius: 1.2rem;
  }

  .hero--v5 .hero-v5__support .button::after {
    content: "";
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: -42%;
    width: 34%;
    transform: skewX(-18deg);
    background:
      linear-gradient(90deg, transparent, rgba(255,255,255,.28), rgba(190,239,255,.48), transparent);
    opacity: 0;
    pointer-events: none;
  }

  .hero--v5 .hero-v5__support .button:is(:hover, :focus-visible)::after {
    animation: ppV5ButtonSheen .72s cubic-bezier(.18,.78,.2,1) both;
  }

  .hero--v5 .hero-v5__support .button:is(:hover, :focus-visible) {
    transform: translate3d(0, -.34rem, 30px) scale(1.035);
  }

  .hero--v5 .hero-v5__support .button--secondary:is(:hover, :focus-visible) {
    background:
      radial-gradient(circle at 80% -10%, rgba(181,238,255,.24), transparent 42%),
      linear-gradient(180deg, rgba(51,121,186,.50), rgba(7,32,60,.46));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      0 .85rem 2rem rgba(0,0,0,.18),
      0 0 2.8rem rgba(84,194,255,.42);
  }
}

/* Faster but still ambient orbital movement. */
.hero--v5 .hero3d.hero3d--scene-active .hero-v5__solar-ring--one {
  animation: ppV5OrbitOne 18s linear infinite;
}

.hero--v5 .hero3d.hero3d--scene-active .hero-v5__solar-ring--two {
  animation: ppV5OrbitTwo 27s linear infinite reverse;
}

.hero--v5 .hero3d.hero3d--scene-active .hero-v5__solar-ring--three {
  animation: ppV5OrbitThree 39s linear infinite;
}

.hero--v5 .hero3d.hero3d--scene-active .hero-v5__solar-axis--a {
  animation: ppV5AxisA 25s linear infinite;
}

.hero--v5 .hero3d.hero3d--scene-active .hero-v5__solar-axis--b {
  animation: ppV5AxisB 34s linear infinite reverse;
}

@keyframes ppV5CoronaBreath {
  0%, 100% { opacity: .92; scale: 1; }
  50% { opacity: 1; scale: 1.035; }
}

@keyframes ppV5SatelliteSweep {
  0% { opacity: .2; transform: translateX(-20%) skewX(-8deg); }
  55% { opacity: 1; }
  100% { opacity: .9; transform: translateX(12%) skewX(-8deg); }
}

@keyframes ppV5ReadoutPulse {
  0%, 100% { opacity: .75; scale: .92; }
  50% { opacity: 1; scale: 1.12; }
}

@keyframes ppV5ButtonSheen {
  0% { left: -42%; opacity: 0; }
  20% { opacity: .9; }
  100% { left: 118%; opacity: 0; }
}

/* Mobile: keep the approved hero but simplify the capabilities rail. */
@media (max-width: 50rem) {
  .hero--v5 .hero-v5__solar-ring--one {
    width: min(76vw, 19rem);
    aspect-ratio: 1.55;
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: min(94vw, 23.5rem);
    aspect-ratio: 1.75;
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: min(112vw, 28rem);
    aspect-ratio: 2;
  }

  .hero--v5 .hero-v5__solar-axis {
    width: min(108vw, 27rem);
  }

  .hero--v5 .hero-v5__signal-readout {
    width: min(88%, 19.5rem);
  }

  .hero--v5 .hero-v5__signal-panel {
    border-color: rgba(227,248,255,.52);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.40),
      0 .9rem 2.3rem rgba(0,0,0,.25),
      0 0 2rem rgba(73,181,255,.22);
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    width: 100%;
    gap: .2rem .5rem;
    padding: .45rem .2rem 0;
    border-top: 1px solid rgba(120, 203, 255, .10);
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights li {
    justify-content: flex-start;
    min-height: 0;
    padding: .28rem .38rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    color: rgba(208, 226, 242, .72);
    font-size: .64rem;
  }

  .hero--v5 .hero-v5__support .hero__highlight-icon {
    min-width: 1rem;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.48),
      inset 0 -1px 0 rgba(99,199,255,.22),
      0 1rem 2.5rem rgba(0,0,0,.30),
      0 0 2.5rem rgba(77,187,255,.27);
  }

  .hero--v5 .hero-v5__support .button::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--v5 .hero3d-core__aura,
  .hero--v5 .hero-v5__signal-meta::before,
  .hero--v5 .hero-v5__support .button::after {
    animation: none !important;
  }

  .hero--v5 .hero-v5__signal-readout,
  .hero--v5 .hero-v5__signal-panel,
  .hero--v5 .hero-v5__support .hero-v5__actions {
    transition: none !important;
  }
}


/* ==================================================================
 * Hero V5 — Phase A v1.8
 * - Saturn ring correction
 * - auto-attention carousel on desktop + mobile
 * - CTA ribbon treatment
 * - stronger active readout motion
 * - refined mobile capabilities chips
 * ================================================================== */

@media (min-width: 50.0625rem) {
  /* Keep orbital geometry tight around the P² mark. */
  .hero--v5 .hero-v5__solar-ring--one {
    width: min(24vw, 18rem);
    aspect-ratio: 1.58;
    border-color: rgba(219, 247, 255, .52);
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: min(31vw, 23rem);
    aspect-ratio: 1.76;
    border-color: rgba(168, 228, 255, .34);
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: min(38vw, 28rem);
    aspect-ratio: 1.98;
    border-color: rgba(121, 207, 255, .23);
  }

  .hero--v5 .hero-v5__solar-axis {
    width: min(36vw, 27rem);
    opacity: .62;
  }

  .hero--v5 .hero-v5__solar-flare--a {
    width: min(27vw, 20rem);
  }

  .hero--v5 .hero-v5__solar-flare--b {
    width: min(36vw, 26rem);
  }

  /* Readout behaves more like a carousel deck when cards rotate automatically. */
  .hero--v5 .hero-v5__signal-readout {
    width: min(92%, 31rem);
    min-height: 5.15rem;
    perspective: 900px;
  }

  .hero--v5 .hero-v5__signal-panel {
    position: absolute;
    overflow: hidden;
  }

  .hero--v5 .hero-v5__signal-panel::before {
    content: "";
    position: absolute;
    left: 1.05rem;
    right: 1.05rem;
    bottom: .62rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(225,249,255,.70), rgba(108,205,255,.82), rgba(225,249,255,.18));
    opacity: .0;
    transform: scaleX(.2);
    transform-origin: left center;
  }

  .hero--v5[data-active-card] .hero-v5__signal-panel::before {
    opacity: .52;
  }

  .hero--v5[data-active-source="auto"] .hero-v5__signal-readout {
    animation: ppV18ReadoutCarousel .8s cubic-bezier(.18,.78,.2,1);
  }

  .hero--v5[data-active-source="auto"] .hero-v5__signal-panel::before {
    animation: ppV18ReadoutProgress 2.8s linear both;
  }

  .hero--v5 .hero-v5__signal-panel--strategy,
  .hero--v5 .hero-v5__signal-panel--continuity {
    transform: translate(-2rem, .85rem) scale(.92) rotate(-1deg);
  }

  .hero--v5 .hero-v5__signal-panel--design,
  .hero--v5 .hero-v5__signal-panel--development {
    transform: translate(2rem, .85rem) scale(.92) rotate(1deg);
  }

  /* CTA evolves from box to translucent ribbon with stronger button presence. */
  .hero--v5 .hero-v5__support .hero-v5__actions {
    width: min(100%, 42rem);
    padding: .24rem;
    border: 1px solid rgba(228, 248, 255, .54);
    border-radius: 1.45rem;
    background:
      linear-gradient(90deg,
        rgba(9, 28, 56, .46) 0%,
        rgba(30, 88, 156, .22) 22%,
        rgba(54, 142, 220, .18) 50%,
        rgba(30, 88, 156, .22) 78%,
        rgba(9, 28, 56, .46) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(152%);
    backdrop-filter: blur(18px) saturate(152%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      inset 0 -1px 0 rgba(86,188,255,.15),
      0 .9rem 2.2rem rgba(0,0,0,.30),
      0 0 2.4rem rgba(71,178,255,.14);
    transform: none;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions:is(:hover, :focus-within) {
    transform: translateY(-.08rem);
    border-color: rgba(244, 252, 255, .74);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -1px 0 rgba(99,197,255,.20),
      0 1rem 2.5rem rgba(0,0,0,.30),
      0 0 2.8rem rgba(83,192,255,.20);
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::before {
    inset: auto 2.6% -.46rem;
    height: 46%;
    border: 0;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, rgba(71,185,255,.22), rgba(16,52,97,.10) 52%, transparent 80%);
    box-shadow: 0 .65rem 2rem rgba(0,0,0,.26);
    filter: blur(4px);
    transform: none;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::after {
    inset: 1px 1.2rem auto;
    height: 45%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), rgba(157,229,255,.17), transparent);
  }

  .hero--v5 .hero-v5__support .button {
    min-height: 3.22rem;
    border-radius: 1.1rem;
    transform: translateZ(0);
  }

  .hero--v5 .hero-v5__support .button--primary {
    background:
      radial-gradient(circle at 18% -12%, rgba(255,255,255,.34), transparent 34%),
      linear-gradient(180deg, rgba(86,171,255,.95), rgba(28,100,245,.88));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.65),
      inset 0 -1px 0 rgba(5,56,148,.32),
      0 .8rem 2rem rgba(7,69,170,.38),
      0 0 2.8rem rgba(82,186,255,.30);
  }

  .hero--v5 .hero-v5__support .button--secondary {
    background:
      radial-gradient(circle at 78% -10%, rgba(188,238,255,.10), transparent 36%),
      linear-gradient(180deg, rgba(22,57,98,.54), rgba(6,24,47,.64));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(98,193,255,.14),
      0 .6rem 1.5rem rgba(0,0,0,.20);
  }

  .hero--v5 .hero-v5__support .button:is(:hover, :focus-visible) {
    transform: translateY(-.26rem) scale(1.028);
  }

  .hero--v5 .hero-v5__support .button--primary:is(:hover, :focus-visible) {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.76),
      inset 0 -1px 0 rgba(5,56,148,.36),
      0 1rem 2.3rem rgba(7,69,170,.42),
      0 0 3.4rem rgba(97,202,255,.45);
  }

  .hero--v5 .hero-v5__support .button--secondary:is(:hover, :focus-visible) {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(112,208,255,.20),
      0 .8rem 2rem rgba(0,0,0,.22),
      0 0 2.2rem rgba(72,184,255,.26);
  }
}

@media (max-width: 50rem) {
  /* Keep the approved stacked mobile composition, but make lower capabilities clean and intentional. */
  .hero--v5 .hero-v5__solar-ring--one {
    width: min(58vw, 15rem);
    aspect-ratio: 1.54;
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: min(72vw, 18.2rem);
    aspect-ratio: 1.74;
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: min(86vw, 21.4rem);
    aspect-ratio: 1.98;
  }

  .hero--v5 .hero-v5__solar-axis {
    width: min(84vw, 20rem);
    opacity: .54;
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 18rem);
    gap: .42rem .44rem;
    padding: .2rem 0 0;
    margin: .1rem auto 0;
    border-top: 0;
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights li {
    justify-content: center;
    min-height: 2rem;
    padding: .4rem .5rem;
    border: 1px solid rgba(160, 219, 255, .22);
    border-radius: 999px;
    background:
      radial-gradient(circle at 18% -18%, rgba(255,255,255,.16), transparent 36%),
      linear-gradient(180deg, rgba(18, 48, 86, .52), rgba(7, 20, 40, .58));
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 .5rem 1.2rem rgba(0,0,0,.14);
    color: rgba(222, 235, 246, .84);
    font-size: .66rem;
    letter-spacing: .01em;
  }

  .hero--v5 .hero-v5__support .hero__highlight-icon {
    min-width: .95rem;
    margin-right: .18rem;
    opacity: .82;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions {
    padding: .18rem;
    border-radius: 1.25rem;
    background:
      linear-gradient(180deg, rgba(17,39,71,.38), rgba(15,35,63,.30));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }

  .hero--v5[data-active-source="auto"] .hero-v5__signal-readout {
    animation: ppV18ReadoutCarouselMobile .7s cubic-bezier(.18,.78,.2,1);
  }

  .hero--v5 .hero-v5__signal-panel::before {
    content: "";
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: .56rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(235,251,255,.72), rgba(96,197,255,.76), rgba(235,251,255,.14));
    opacity: 0;
    transform: scaleX(.2);
    transform-origin: left center;
  }

  .hero--v5[data-active-card] .hero-v5__signal-panel::before {
    opacity: .46;
  }

  .hero--v5[data-active-source="auto"] .hero-v5__signal-panel::before {
    animation: ppV18ReadoutProgress 2.8s linear both;
  }
}

@keyframes ppV18ReadoutCarousel {
  0% { opacity: .72; transform: translateY(.35rem) scale(.97) rotateX(12deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}

@keyframes ppV18ReadoutCarouselMobile {
  0% { opacity: .76; transform: translateY(.24rem) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ppV18ReadoutProgress {
  0% { opacity: .18; transform: scaleX(.12); }
  12% { opacity: .62; }
  100% { opacity: .42; transform: scaleX(1); }
}


/* ==================================================================
 * Hero V5 — Phase A v1.9
 * - Saturn orbit lock: CSS rings now hug the P² core
 * - visible sequential signal carousel
 * - stronger 2.5D CTA while preserving translucent ribbon concept
 * - mobile capabilities become one compact swipe rail
 * ================================================================== */

@media (min-width: 50.0625rem) {
  /* Saturn lock: decorative rails use the same visual radius as the Canvas runtime. */
  .hero--v5 .hero-v5__solar-ring--one {
    width: min(20vw, 15.5rem);
    aspect-ratio: 1.62;
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: min(26vw, 19.5rem);
    aspect-ratio: 1.82;
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: min(32vw, 24rem);
    aspect-ratio: 2.05;
  }

  .hero--v5 .hero-v5__solar-axis {
    width: min(31vw, 23rem);
    opacity: .50;
  }

  .hero--v5 .hero-v5__solar-flare--a {
    width: min(24vw, 18rem);
  }

  .hero--v5 .hero-v5__solar-flare--b {
    width: min(31vw, 23rem);
  }

  /* True carousel feel: every auto-activated panel gets its own entrance and progress pass. */
  .hero--v5 .hero3d[data-active-source="auto"][data-active-card="strategy"] .hero-v5__signal-panel--strategy,
  .hero--v5 .hero3d[data-active-source="auto"][data-active-card="design"] .hero-v5__signal-panel--design,
  .hero--v5 .hero3d[data-active-source="auto"][data-active-card="development"] .hero-v5__signal-panel--development,
  .hero--v5 .hero3d[data-active-source="auto"][data-active-card="continuity"] .hero-v5__signal-panel--continuity {
    animation: ppV19PanelIn .58s cubic-bezier(.16,.78,.2,1) both;
  }

  .hero--v5 .hero3d[data-active-source="auto"][data-active-card="strategy"] .hero-v5__signal-panel--strategy::before,
  .hero--v5 .hero3d[data-active-source="auto"][data-active-card="design"] .hero-v5__signal-panel--design::before,
  .hero--v5 .hero3d[data-active-source="auto"][data-active-card="development"] .hero-v5__signal-panel--development::before,
  .hero--v5 .hero3d[data-active-source="auto"][data-active-card="continuity"] .hero-v5__signal-panel--continuity::before {
    animation: ppV19PanelProgress 3s linear both;
  }

  .hero--v5 .hero-v5__signal-readout::after {
    position: absolute;
    z-index: 20;
    right: .9rem;
    top: .65rem;
    color: rgba(190, 228, 252, .58);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .12em;
    pointer-events: none;
  }

  .hero--v5 .hero3d[data-active-card="strategy"] .hero-v5__signal-readout::after { content: "01 / 04"; }
  .hero--v5 .hero3d[data-active-card="design"] .hero-v5__signal-readout::after { content: "02 / 04"; }
  .hero--v5 .hero3d[data-active-card="development"] .hero-v5__signal-readout::after { content: "03 / 04"; }
  .hero--v5 .hero3d[data-active-card="continuity"] .hero-v5__signal-readout::after { content: "04 / 04"; }

  /* CTA: keep the ribbon, but give the controls a real raised optical plate. */
  .hero--v5 .hero-v5__support .hero-v5__actions {
    width: min(100%, 44rem);
    perspective: 900px;
    transform: perspective(900px) rotateX(2.8deg) translateZ(8px);
    transform-style: preserve-3d;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -1px 0 rgba(91,191,255,.17),
      0 .95rem 2.35rem rgba(0,0,0,.31),
      0 0 3rem rgba(75,185,255,.18);
  }

  .hero--v5 .hero-v5__support .hero-v5__actions:is(:hover, :focus-within) {
    transform: perspective(900px) rotateX(1.8deg) translateY(-.10rem) translateZ(12px);
  }

  .hero--v5 .hero-v5__support .button {
    transform-style: preserve-3d;
    transform: translateZ(16px);
  }

  .hero--v5 .hero-v5__support .button--primary {
    transform: translateY(-.10rem) translateZ(20px) scale(1.012);
    font-weight: 820;
    border-color: rgba(236, 252, 255, .82);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      inset 0 -1px 0 rgba(5,56,148,.34),
      0 .26rem 0 rgba(5, 62, 163, .72),
      0 .85rem 2rem rgba(7,69,170,.40),
      0 0 3rem rgba(86,192,255,.34);
  }

  .hero--v5 .hero-v5__support .button--secondary {
    transform: translateZ(14px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 -1px 0 rgba(98,193,255,.16),
      0 .20rem 0 rgba(3, 25, 54, .78),
      0 .65rem 1.5rem rgba(0,0,0,.22);
  }

  .hero--v5 .hero-v5__support .button--primary:is(:hover, :focus-visible) {
    transform: translateY(-.34rem) translateZ(28px) scale(1.035);
  }

  .hero--v5 .hero-v5__support .button--secondary:is(:hover, :focus-visible) {
    transform: translateY(-.24rem) translateZ(22px) scale(1.025);
  }

  .hero--v5 .hero-v5__support .button:active {
    transform: translateY(.02rem) translateZ(8px) scale(.995);
  }
}

@media (max-width: 50rem) {
  /* Same Saturn correction on compact scene. */
  .hero--v5 .hero-v5__solar-ring--one {
    width: min(52vw, 13.5rem);
    aspect-ratio: 1.60;
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: min(64vw, 16.5rem);
    aspect-ratio: 1.80;
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: min(76vw, 19.5rem);
    aspect-ratio: 2.02;
  }

  .hero--v5 .hero-v5__solar-axis {
    width: min(73vw, 18rem);
    opacity: .46;
  }

  /* Compact one-line swipe rail: avoids the awkward clipped 2x2 block. */
  .hero--v5 .hero-v5__support .hero-v5__highlights {
    display: flex;
    width: calc(100% + .4rem);
    max-width: none;
    margin: .18rem -.2rem 0;
    padding: .18rem .2rem .16rem;
    gap: .38rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    border: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights::-webkit-scrollbar {
    display: none;
  }

  .hero--v5 .hero-v5__support .hero-v5__highlights li {
    flex: 0 0 auto;
    scroll-snap-align: start;
    justify-content: center;
    min-width: 6.7rem;
    min-height: 1.8rem;
    padding: .32rem .56rem;
    border: 1px solid rgba(159, 219, 255, .20);
    border-radius: 999px;
    background:
      radial-gradient(circle at 18% -18%, rgba(255,255,255,.14), transparent 36%),
      linear-gradient(180deg, rgba(17,47,84,.48), rgba(7,20,39,.54));
    -webkit-backdrop-filter: blur(12px) saturate(142%);
    backdrop-filter: blur(12px) saturate(142%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.11),
      0 .45rem 1rem rgba(0,0,0,.13);
    color: rgba(223, 236, 247, .84);
    font-size: .63rem;
    white-space: nowrap;
  }

  .hero--v5 .hero-v5__support .hero__highlight-icon {
    min-width: .9rem;
    margin-right: .14rem;
  }

  /* Carousel animation on mobile too. */
  .hero--v5 .hero3d[data-active-source="auto"][data-active-card="strategy"] .hero-v5__signal-panel--strategy,
  .hero--v5 .hero3d[data-active-source="auto"][data-active-card="design"] .hero-v5__signal-panel--design,
  .hero--v5 .hero3d[data-active-source="auto"][data-active-card="development"] .hero-v5__signal-panel--development,
  .hero--v5 .hero3d[data-active-source="auto"][data-active-card="continuity"] .hero-v5__signal-panel--continuity {
    animation: ppV19PanelInMobile .48s cubic-bezier(.16,.78,.2,1) both;
  }
}

@keyframes ppV19PanelIn {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(1.35rem, .6rem, -18px) scale(.94) rotateY(-4deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,0,0) scale(1) rotateY(0);
  }
}

@keyframes ppV19PanelInMobile {
  0% { opacity: 0; filter: blur(4px); transform: translateY(.45rem) scale(.96); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes ppV19PanelProgress {
  0% { opacity: .12; transform: scaleX(.08); }
  12% { opacity: .62; }
  100% { opacity: .38; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero--v5 .hero-v5__signal-panel {
    animation: none !important;
  }
}


/* ==================================================================
 * Hero V5 — Phase A v2.0
 * - manual panel deck replaces autonomous satellite carousel
 * - Saturn-like orbit field stays visually locked around the P² core
 * - CTA ribbon gains more depth and protagonism
 * ================================================================== */

.hero--v5 .hero-v5__signal-readout {
  pointer-events: none;
}

.hero--v5 .hero-v5__signal-deck {
  position: absolute;
  left: 50%;
  bottom: -1rem;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  padding: .32rem .44rem;
  border: 1px solid rgba(174, 226, 255, .18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% -18%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(18, 51, 87, .56), rgba(6, 21, 40, .60));
  -webkit-backdrop-filter: blur(15px) saturate(148%);
  backdrop-filter: blur(15px) saturate(148%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 .85rem 1.9rem rgba(0,0,0,.18),
    0 0 1.4rem rgba(82,193,255,.12);
  opacity: 0;
  transform: translate3d(-50%, .45rem, 0) scale(.96);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(.18,.78,.2,1),
    box-shadow 220ms ease;
  pointer-events: auto;
  z-index: 25;
}

.hero--v5 .hero3d[data-active-card] .hero-v5__signal-deck {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

.hero--v5 .hero-v5__signal-tabs {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
}

.hero--v5 .hero-v5__signal-nav,
.hero--v5 .hero-v5__signal-dot {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(234, 247, 255, .80);
  font: inherit;
  cursor: pointer;
}

.hero--v5 .hero-v5__signal-nav {
  width: 1.8rem;
  height: 1.8rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(178, 226, 255, .16);
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.15), transparent 48%),
    linear-gradient(180deg, rgba(20,49,84,.48), rgba(5,20,39,.60));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 .35rem .8rem rgba(0,0,0,.18);
  transition:
    transform 220ms cubic-bezier(.18,.78,.2,1),
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.hero--v5 .hero-v5__signal-nav span {
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-.02rem);
}

.hero--v5 .hero-v5__signal-dot {
  min-width: 2rem;
  height: 1.8rem;
  padding: 0 .54rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(178, 226, 255, .14);
  background:
    linear-gradient(180deg, rgba(19,44,72,.30), rgba(8,20,37,.40));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 .25rem .75rem rgba(0,0,0,.12);
  font-size: .62rem;
  font-weight: 780;
  letter-spacing: .12em;
  transition:
    transform 220ms cubic-bezier(.18,.78,.2,1),
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.hero--v5 .hero-v5__signal-dot.is-active,
.hero--v5 .hero-v5__signal-dot[aria-pressed="true"] {
  color: #f3fbff;
  border-color: rgba(223, 245, 255, .48);
  background:
    radial-gradient(circle at 50% -35%, rgba(255,255,255,.28), transparent 44%),
    linear-gradient(180deg, rgba(76,163,255,.50), rgba(23,91,189,.56));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    0 .42rem 1rem rgba(4,39,106,.28),
    0 0 1.2rem rgba(91,191,255,.22);
}

.hero--v5 .hero-v5__signal-nav:is(:hover, :focus-visible):not(:disabled),
.hero--v5 .hero-v5__signal-dot:is(:hover, :focus-visible) {
  transform: translateY(-.12rem);
  border-color: rgba(214, 242, 255, .36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 .5rem 1rem rgba(0,0,0,.18),
    0 0 1.4rem rgba(91,191,255,.18);
}

.hero--v5 .hero-v5__signal-nav:disabled {
  opacity: .42;
  cursor: default;
}

@media (min-width: 50.0625rem) {
  .hero--v5 .hero-v5__solar-field {
    clip-path: ellipse(24rem 17rem at var(--hero-v5-core-x) var(--hero-v5-core-y));
  }

  .hero--v5 .hero-v5__solar-ring {
    border-color: rgba(122, 206, 255, .18);
    box-shadow:
      inset 0 0 2rem rgba(43, 133, 255, 0.035),
      0 0 1.65rem rgba(78, 184, 255, 0.09);
  }

  .hero--v5 .hero-v5__solar-ring--one {
    width: 19rem;
    aspect-ratio: 1.62;
    opacity: .88;
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: 23rem;
    aspect-ratio: 1.86;
    opacity: .68;
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: 27rem;
    aspect-ratio: 2.08;
    opacity: .46;
  }

  .hero--v5 .hero-v5__solar-axis {
    width: 22rem;
    opacity: .44;
  }

  .hero--v5 .hero-v5__solar-flare--a {
    width: 16rem;
    opacity: .36;
  }

  .hero--v5 .hero-v5__solar-flare--b {
    width: 21rem;
    opacity: .28;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions {
    position: relative;
    width: min(100%, 45rem);
    padding: .36rem;
    border-color: rgba(187, 230, 255, .34);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -1px 0 rgba(91,191,255,.18),
      0 1.15rem 2.8rem rgba(0,0,0,.34),
      0 0 3.2rem rgba(75,185,255,.18);
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::before {
    content: "";
    position: absolute;
    inset: auto 7% -.72rem 7%;
    height: 1rem;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, rgba(79,186,255,.44), rgba(79,186,255,0) 72%);
    filter: blur(18px);
    opacity: .92;
    pointer-events: none;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions::after {
    content: "";
    position: absolute;
    inset: .26rem .45rem .24rem .45rem;
    border-radius: calc(var(--radius-xl) + .25rem);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
    pointer-events: none;
    mix-blend-mode: screen;
  }

  .hero--v5 .hero-v5__support .button--primary {
    min-height: 3.95rem;
    transform: translateY(-.12rem) translateZ(24px) scale(1.018);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.74),
      inset 0 -1px 0 rgba(5,56,148,.34),
      0 .34rem 0 rgba(5, 62, 163, .76),
      0 1rem 2.2rem rgba(7,69,170,.42),
      0 0 3.2rem rgba(86,192,255,.36);
  }

  .hero--v5 .hero-v5__support .button--secondary {
    min-height: 3.95rem;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -1px 0 rgba(98,193,255,.17),
      0 .24rem 0 rgba(3, 25, 54, .78),
      0 .75rem 1.65rem rgba(0,0,0,.24);
  }
}

@media (max-width: 50rem) {
  .hero--v5 .hero-v5__solar-field {
    clip-path: ellipse(11.4rem 9rem at var(--hero-v5-core-x) var(--hero-v5-core-y));
  }

  .hero--v5 .hero-v5__solar-ring {
    border-color: rgba(122, 206, 255, .16);
  }

  .hero--v5 .hero-v5__solar-ring--one {
    width: 13.2rem;
    aspect-ratio: 1.58;
  }

  .hero--v5 .hero-v5__solar-ring--two {
    width: 16rem;
    aspect-ratio: 1.82;
  }

  .hero--v5 .hero-v5__solar-ring--three {
    width: 18.7rem;
    aspect-ratio: 2.02;
  }

  .hero--v5 .hero-v5__signal-deck {
    bottom: -.86rem;
    scale: .96;
  }

  .hero--v5 .hero-v5__signal-dot {
    min-width: 1.74rem;
    height: 1.66rem;
    padding: 0 .42rem;
    font-size: .58rem;
  }

  .hero--v5 .hero-v5__signal-nav {
    width: 1.66rem;
    height: 1.66rem;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      0 .7rem 1.6rem rgba(0,0,0,.22),
      0 0 2rem rgba(75,185,255,.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--v5 .hero-v5__signal-deck,
  .hero--v5 .hero-v5__signal-nav,
  .hero--v5 .hero-v5__signal-dot {
    transition: none !important;
    animation: none !important;
  }
}


/* ==================================================================
 * Hero V5 — Phase A v2.1
 * Approved H1 + physical stacked signal deck.
 * Orbit geometry intentionally frozen from v2.0 for future refinement.
 * ================================================================== */

/* New approved H1: "Webs pensadas para crecer". */
.hero--v5 .hero-v5__title--growth {
  width: min(100%, 12.5ch);
  line-height: .83;
}

.hero--v5 .hero-v5__title--growth .hero-v5__title-line--a {
  font-size: .96em;
  transform: translateX(-1.1rem);
}

.hero--v5 .hero-v5__title--growth .hero-v5__title-line--b {
  margin-top: .08em;
  font-size: .72em;
  transform: translateX(1.15rem);
}

.hero--v5 .hero-v5__title--growth .hero-v5__title-line--d {
  margin-top: -.02em;
  font-size: 1.30em;
  transform: translateX(.55rem);
  color: #3da7ff;
  text-shadow:
    0 0 1rem rgba(187, 237, 255, .30),
    0 0 2.3rem rgba(79, 181, 255, .42),
    0 0 4.6rem rgba(41, 126, 255, .27);
}

/* Remove v2.0 pager UI completely. */
.hero--v5 .hero-v5__signal-deck,
.hero--v5 .hero-v5__signal-tabs,
.hero--v5 .hero-v5__signal-dot,
.hero--v5 .hero-v5__signal-nav {
  display: none !important;
}

/* The readout is now a physical deck: cards remain visible behind the active one. */
.hero--v5 .hero-v5__signal-readout {
  min-height: 6.15rem;
  perspective: 1050px;
  transform-style: preserve-3d;
  pointer-events: none;
}

.hero--v5 .hero-v5__signal-readout.has-selection {
  pointer-events: auto;
}

.hero--v5 .hero-v5__signal-panel {
  inset: auto 0 0;
  min-height: 5.05rem;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  pointer-events: none;
  transition:
    opacity 360ms ease,
    transform 520ms cubic-bezier(.16,.78,.2,1),
    filter 360ms ease,
    border-color 320ms ease,
    box-shadow 360ms ease,
    visibility 0s linear 0s;
}

.hero--v5 .hero-v5__signal-panel.is-deck-front {
  z-index: 14;
  opacity: 1;
  visibility: visible;
  filter: blur(0) saturate(1);
  transform: translate3d(0, 0, 56px) scale(1) rotateX(0);
  pointer-events: auto;
  border-color: rgba(232, 249, 255, .58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(90,190,255,.18),
    0 1.05rem 2.7rem rgba(0,0,0,.28),
    0 0 2.7rem rgba(76,181,255,.24);
}

.hero--v5 .hero-v5__signal-panel.is-deck-back-1 {
  z-index: 13;
  opacity: .64;
  visibility: visible;
  filter: blur(.35px) saturate(.86);
  transform: translate3d(.72rem, -.68rem, 18px) scale(.965) rotateZ(.55deg);
}

.hero--v5 .hero-v5__signal-panel.is-deck-back-2 {
  z-index: 12;
  opacity: .35;
  visibility: visible;
  filter: blur(.7px) saturate(.72);
  transform: translate3d(-.62rem, -1.12rem, -16px) scale(.925) rotateZ(-.65deg);
}

.hero--v5 .hero-v5__signal-panel.is-deck-back-3 {
  z-index: 11;
  opacity: .14;
  visibility: visible;
  filter: blur(1px) saturate(.55);
  transform: translate3d(.3rem, -1.42rem, -42px) scale(.89) rotateZ(.35deg);
}

/* When advancing, the next card visibly comes from the back to the front. */
.hero--v5 .hero3d[data-deck-direction="next"] .hero-v5__signal-panel.is-deck-front {
  animation: ppV21DeckFrontNext 520ms cubic-bezier(.16,.78,.2,1) both;
}

.hero--v5 .hero3d[data-deck-direction="prev"] .hero-v5__signal-panel.is-deck-front {
  animation: ppV21DeckFrontPrev 520ms cubic-bezier(.16,.78,.2,1) both;
}

/* Edge controls stay fixed; they are not a counter/pager. */
.hero--v5 .hero-v5__signal-controls {
  position: absolute;
  z-index: 30;
  inset: 50% -.8rem auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  translate: 0 -50%;
  pointer-events: none;
}

.hero--v5 .hero-v5__signal-edge {
  appearance: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(182, 228, 255, .18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 40% -20%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(180deg, rgba(18,52,88,.68), rgba(5,20,40,.76));
  color: rgba(239, 249, 255, .86);
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  backdrop-filter: blur(15px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 .5rem 1.25rem rgba(0,0,0,.22),
    0 0 1.25rem rgba(79,186,255,.12);
  opacity: 0;
  transform: scale(.88);
  transition:
    opacity 220ms ease,
    transform 220ms cubic-bezier(.18,.78,.2,1),
    border-color 180ms ease,
    box-shadow 180ms ease;
  pointer-events: auto;
  cursor: pointer;
}

.hero--v5 .hero-v5__signal-readout.has-selection .hero-v5__signal-edge {
  opacity: .78;
  transform: scale(1);
}

.hero--v5 .hero-v5__signal-edge:is(:hover, :focus-visible) {
  opacity: 1;
  transform: scale(1.08);
  border-color: rgba(225, 247, 255, .38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 .6rem 1.35rem rgba(0,0,0,.24),
    0 0 1.7rem rgba(88,195,255,.22);
}

.hero--v5 .hero-v5__signal-edge span {
  font-size: 1.12rem;
  line-height: 1;
}

/* Small final lift for the CTA ribbon without redesigning it again. */
@media (min-width: 50.0625rem) {
  .hero--v5 .hero-v5__support .hero-v5__actions {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.27),
      inset 0 -1px 0 rgba(95,195,255,.18),
      0 1.2rem 2.85rem rgba(0,0,0,.34),
      0 0 3.35rem rgba(78,188,255,.20);
  }

  .hero--v5 .hero-v5__support .button--primary {
    transform: translateY(-.15rem) translateZ(26px) scale(1.022);
  }
}

@media (max-width: 50rem) {
  .hero--v5 .hero-v5__title--growth {
    width: min(100%, 10.8ch);
    font-size: clamp(2.8rem, 13.2vw, 4.1rem);
    line-height: .84;
  }

  .hero--v5 .hero-v5__title--growth .hero-v5__title-line--a {
    transform: translateX(-.35rem);
  }

  .hero--v5 .hero-v5__title--growth .hero-v5__title-line--b {
    font-size: .72em;
    transform: translateX(.42rem);
  }

  .hero--v5 .hero-v5__title--growth .hero-v5__title-line--d {
    font-size: 1.20em;
    transform: translateX(.16rem);
  }

  .hero--v5 .hero-v5__signal-readout {
    min-height: 5.85rem;
    width: min(88%, 19.6rem);
  }

  .hero--v5 .hero-v5__signal-panel.is-deck-back-1 {
    transform: translate3d(.42rem, -.55rem, 14px) scale(.965) rotateZ(.45deg);
  }

  .hero--v5 .hero-v5__signal-panel.is-deck-back-2 {
    transform: translate3d(-.35rem, -.90rem, -12px) scale(.93) rotateZ(-.55deg);
  }

  .hero--v5 .hero-v5__signal-panel.is-deck-back-3 {
    transform: translate3d(.15rem, -1.16rem, -32px) scale(.90);
  }

  .hero--v5 .hero-v5__signal-controls {
    inset-inline: -.35rem;
  }

  .hero--v5 .hero-v5__signal-edge {
    width: 1.78rem;
    height: 1.78rem;
  }
}

@keyframes ppV21DeckFrontNext {
  0% {
    opacity: .34;
    filter: blur(.8px);
    transform: translate3d(1rem, -.7rem, -18px) scale(.95) rotateZ(.7deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,0,56px) scale(1) rotateZ(0);
  }
}

@keyframes ppV21DeckFrontPrev {
  0% {
    opacity: .34;
    filter: blur(.8px);
    transform: translate3d(-1rem, -.7rem, -18px) scale(.95) rotateZ(-.7deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,0,56px) scale(1) rotateZ(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--v5 .hero-v5__signal-panel,
  .hero--v5 .hero-v5__signal-edge {
    animation: none !important;
    transition: none !important;
  }
}


/* ==================================================================
 * Hero V5 — Phase A v2.2
 * Physical deck refinement:
 * - no arrows / no counter / no pager
 * - rear cards are the navigation
 * - stronger back-to-front travel
 * - mobile swipe target covers the whole deck
 * - outside click closes pinned state (JS)
 * ================================================================== */

/* Remove every visual remnant of the previous control layer. */
.hero--v5 .hero-v5__signal-controls,
.hero--v5 .hero-v5__signal-edge,
.hero--v5 .hero-v5__signal-deck,
.hero--v5 .hero-v5__signal-tabs,
.hero--v5 .hero-v5__signal-dot,
.hero--v5 .hero-v5__signal-nav {
  display: none !important;
}

/* Give the deck enough vertical room to reveal the cards behind it. */
.hero--v5 .hero-v5__signal-readout {
  min-height: 7.35rem;
  perspective: 1150px;
  transform-style: preserve-3d;
  touch-action: pan-y;
  cursor: default;
}

.hero--v5 .hero-v5__signal-readout.has-selection {
  pointer-events: auto;
  cursor: grab;
}

.hero--v5 .hero-v5__signal-readout.is-deck-dragging {
  cursor: grabbing;
}

.hero--v5 .hero-v5__signal-panel {
  inset: auto 0 0;
  min-height: 5.05rem;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transition:
    opacity 380ms ease,
    transform 560ms cubic-bezier(.16,.78,.2,1),
    filter 360ms ease,
    border-color 300ms ease,
    box-shadow 340ms ease;
}

/* Front card. */
.hero--v5 .hero-v5__signal-panel.is-deck-front {
  z-index: 40;
  opacity: 1;
  visibility: visible;
  filter: blur(0) saturate(1);
  transform: translate3d(0, 0, 70px) scale(1);
  pointer-events: auto;
  cursor: grab;
  border-color: rgba(238, 251, 255, .66);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(95,196,255,.20),
    0 1.15rem 2.9rem rgba(0,0,0,.29),
    0 0 3rem rgba(76,183,255,.27);
}

/* Rear cards visibly peek above and to the sides.
   They themselves become the navigation target. */
.hero--v5 .hero-v5__signal-panel.is-deck-back-1 {
  z-index: 30;
  opacity: .78;
  visibility: visible;
  filter: blur(.25px) saturate(.90);
  transform: translate3d(1.2rem, -1.25rem, 30px) scale(.972) rotateZ(.8deg);
  pointer-events: auto;
  cursor: pointer;
  border-color: rgba(196, 235, 255, .36);
}

.hero--v5 .hero-v5__signal-panel.is-deck-back-2 {
  z-index: 20;
  opacity: .50;
  visibility: visible;
  filter: blur(.55px) saturate(.78);
  transform: translate3d(-1.05rem, -2.18rem, -8px) scale(.94) rotateZ(-.9deg);
  pointer-events: auto;
  cursor: pointer;
  border-color: rgba(164, 219, 255, .25);
}

.hero--v5 .hero-v5__signal-panel.is-deck-back-3 {
  z-index: 10;
  opacity: .27;
  visibility: visible;
  filter: blur(.9px) saturate(.66);
  transform: translate3d(.45rem, -2.88rem, -38px) scale(.905) rotateZ(.45deg);
  pointer-events: auto;
  cursor: pointer;
  border-color: rgba(137, 204, 255, .17);
}

/* Rear cards become slightly more legible when the pointer discovers them. */
@media (hover: hover) and (pointer: fine) {
  .hero--v5 .hero-v5__signal-panel:is(.is-deck-back-1, .is-deck-back-2, .is-deck-back-3):hover {
    opacity: .90;
    filter: blur(0) saturate(1);
    border-color: rgba(222, 246, 255, .52);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      0 .8rem 2rem rgba(0,0,0,.23),
      0 0 2rem rgba(83,191,255,.22);
  }
}

/* Old front visibly leaves the deck. */
.hero--v5 .hero-v5__signal-panel.is-deck-exiting-next {
  z-index: 60 !important;
  animation: ppV22DeckExitNext 580ms cubic-bezier(.18,.72,.18,1) both !important;
}

.hero--v5 .hero-v5__signal-panel.is-deck-exiting-prev {
  z-index: 60 !important;
  animation: ppV22DeckExitPrev 580ms cubic-bezier(.18,.72,.18,1) both !important;
}

/* New card visibly comes from the stack to the front. */
.hero--v5 .hero-v5__signal-panel.is-deck-entering-next {
  z-index: 50 !important;
  animation: ppV22DeckEnterNext 580ms cubic-bezier(.16,.82,.2,1) both !important;
}

.hero--v5 .hero-v5__signal-panel.is-deck-entering-prev {
  z-index: 50 !important;
  animation: ppV22DeckEnterPrev 580ms cubic-bezier(.16,.82,.2,1) both !important;
}

@keyframes ppV22DeckExitNext {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,0,70px) scale(1) rotateZ(0);
  }
  52% {
    opacity: .82;
    transform: translate3d(-2.1rem,.4rem,84px) scale(1.015) rotateZ(-1.8deg);
  }
  100% {
    opacity: .24;
    filter: blur(1.1px);
    transform: translate3d(-1rem,-2.45rem,-24px) scale(.91) rotateZ(-1deg);
  }
}

@keyframes ppV22DeckExitPrev {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,0,70px) scale(1) rotateZ(0);
  }
  52% {
    opacity: .82;
    transform: translate3d(2.1rem,.4rem,84px) scale(1.015) rotateZ(1.8deg);
  }
  100% {
    opacity: .24;
    filter: blur(1.1px);
    transform: translate3d(1rem,-2.45rem,-24px) scale(.91) rotateZ(1deg);
  }
}

@keyframes ppV22DeckEnterNext {
  0% {
    opacity: .44;
    filter: blur(.75px);
    transform: translate3d(1.25rem,-1.6rem,18px) scale(.95) rotateZ(.9deg);
  }
  62% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(.15rem,.08rem,80px) scale(1.012) rotateZ(-.15deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,0,70px) scale(1) rotateZ(0);
  }
}

@keyframes ppV22DeckEnterPrev {
  0% {
    opacity: .44;
    filter: blur(.75px);
    transform: translate3d(-1.25rem,-1.6rem,18px) scale(.95) rotateZ(-.9deg);
  }
  62% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-.15rem,.08rem,80px) scale(1.012) rotateZ(.15deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,0,70px) scale(1) rotateZ(0);
  }
}

/* Mobile: more visible stack + a larger swipe/tap target without new controls. */
@media (max-width: 50rem) {
  .hero--v5 .hero-v5__signal-readout {
    width: min(90%, 20.5rem);
    min-height: 6.85rem;
    touch-action: pan-y;
  }

  .hero--v5 .hero-v5__signal-panel {
    min-height: 4.85rem;
  }

  .hero--v5 .hero-v5__signal-panel.is-deck-back-1 {
    opacity: .72;
    transform: translate3d(.68rem,-.92rem,22px) scale(.97) rotateZ(.65deg);
  }

  .hero--v5 .hero-v5__signal-panel.is-deck-back-2 {
    opacity: .44;
    transform: translate3d(-.58rem,-1.55rem,-8px) scale(.94) rotateZ(-.7deg);
  }

  .hero--v5 .hero-v5__signal-panel.is-deck-back-3 {
    opacity: .23;
    transform: translate3d(.22rem,-2.02rem,-30px) scale(.91) rotateZ(.35deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--v5 .hero-v5__signal-panel {
    animation: none !important;
    transition: none !important;
  }
}


/* ==================================================================
 * Hero V5 — Phase A v2.3
 * Readability + interaction hint refinement
 * ================================================================== */

/* Make the deck clearer as glass and improve legibility over the hero glow. */
.hero--v5 .hero-v5__signal-readout {
  overflow: visible;
}

.hero--v5 .hero-v5__signal-panel {
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(22, 73, 124, .42) 0%, rgba(12, 38, 72, .50) 100%),
    rgba(7, 20, 42, .34);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(111, 203, 255, .18),
    0 .95rem 2.5rem rgba(0, 0, 0, .24),
    0 0 2.35rem rgba(77, 187, 255, .18);
}

.hero--v5 .hero-v5__signal-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% -12%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 42%, rgba(19,84,143,.12));
  opacity: .98;
}

.hero--v5 .hero-v5__signal-panel::after {
  content: "";
  position: absolute;
  inset: .2rem;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01) 36%, rgba(0,0,0,.04)),
    radial-gradient(110% 74% at 50% 115%, rgba(93,188,255,.16), rgba(93,188,255,0) 58%);
  opacity: .9;
}

.hero--v5 .hero-v5__signal-panel-title,
.hero--v5 .hero-v5__signal-panel-text,
.hero--v5 .hero-v5__signal-panel-index,
.hero--v5 .hero-v5__signal-panel-step,
.hero--v5 .hero-v5__signal-panel-counter {
  text-shadow:
    0 1px 0 rgba(6, 13, 26, .65),
    0 0 .75rem rgba(9, 28, 53, .25);
}

.hero--v5 .hero-v5__signal-panel-title,
.hero--v5 .hero-v5__signal-panel-index {
  color: rgba(231, 244, 255, .96);
}

.hero--v5 .hero-v5__signal-panel-text {
  color: rgba(248, 252, 255, .94);
}

.hero--v5 .hero-v5__signal-panel.is-deck-back-1,
.hero--v5 .hero-v5__signal-panel.is-deck-back-2,
.hero--v5 .hero-v5__signal-panel.is-deck-back-3 {
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
}

/* Hint that the deck can be moved sideways. */
.hero--v5 .hero-v5__signal-swipe-hint {
  position: absolute;
  left: 50%;
  bottom: -1.55rem;
  transform: translateX(-50%) translateY(.2rem);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .28rem .68rem;
  border-radius: 999px;
  border: 1px solid rgba(167, 225, 255, .22);
  background: rgba(6, 18, 36, .42);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  color: rgba(215, 238, 255, .74);
  font-size: .66rem;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.hero--v5 .hero-v5__signal-swipe-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hero--v5 .hero-v5__signal-swipe-icon {
  display: inline-flex;
  font-size: .82rem;
  line-height: 1;
  opacity: .92;
}

/* Desktop click reliability on rear cards: keep upper exposed area easy to hit. */
.hero--v5 .hero-v5__signal-panel.is-deck-back-1 { padding-top: .22rem; }
.hero--v5 .hero-v5__signal-panel.is-deck-back-2 { padding-top: .18rem; }
.hero--v5 .hero-v5__signal-panel.is-deck-back-3 { padding-top: .14rem; }

@media (max-width: 50rem) {
  .hero--v5 .hero-v5__signal-swipe-hint {
    bottom: -1.42rem;
    font-size: .63rem;
    padding: .24rem .62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--v5 .hero-v5__signal-swipe-hint {
    transition: none;
  }
}


/* ==================================================================
 * Hero V5 — Phase A v2.4
 * Swipe hint placed inside active card + mobile overlap fix
 * ================================================================== */

.hero--v5 .hero-v5__signal-panel.is-deck-front {
  padding-bottom: 2.05rem;
}

.hero--v5 .hero-v5__signal-swipe-hint {
  position: absolute;
  left: 50%;
  bottom: .58rem;
  z-index: 6;
  transform: translateX(-50%) translateY(.14rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  width: max-content;
  max-width: calc(100% - 1.25rem);
  padding: .26rem .62rem;
  border-radius: 999px;
  border: 1px solid rgba(182, 230, 255, .20);
  background: rgba(4, 15, 31, .32);
  -webkit-backdrop-filter: blur(10px) saturate(128%);
  backdrop-filter: blur(10px) saturate(128%);
  color: rgba(225, 243, 255, .72);
  font-size: .62rem;
  line-height: 1;
  letter-spacing: .035em;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 .25rem .9rem rgba(0, 0, 0, .16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.hero--v5 .hero-v5__signal-swipe-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hero--v5 .hero-v5__signal-swipe-icon {
  font-size: .78rem;
  opacity: .86;
}

@media (max-width: 50rem) {
  .hero--v5 .hero-v5__signal-panel.is-deck-front {
    padding-bottom: 1.85rem;
  }

  .hero--v5 .hero-v5__signal-swipe-hint {
    bottom: .46rem;
    max-width: calc(100% - .9rem);
    padding: .22rem .52rem;
    font-size: .58rem;
    letter-spacing: .03em;
  }

  .hero--v5 .hero-v5__signal-swipe-icon {
    font-size: .72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--v5 .hero-v5__signal-swipe-hint {
    transition: none;
  }
}


/* ==================================================================
 * Hero V5 — Phase A v2.5 FINAL
 * Orbit visibility pass only.
 * Geometry, speed and interaction stay unchanged.
 * ================================================================== */

.hero--v5 .hero-v5__solar-field {
  opacity: 1;
}

.hero--v5 .hero-v5__solar-ring {
  border-width: 1.25px;
  border-style: solid;
  border-color: rgba(155, 222, 255, .40);
  box-shadow:
    inset 0 0 2.2rem rgba(66, 166, 255, .055),
    0 0 .8rem rgba(125, 210, 255, .20),
    0 0 2rem rgba(58, 163, 255, .10);
}

.hero--v5 .hero-v5__solar-ring::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border-top: 1px solid rgba(220, 246, 255, .54);
  border-bottom: 1px solid rgba(80, 182, 255, .22);
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  filter: drop-shadow(0 0 .42rem rgba(116, 210, 255, .24));
  opacity: .78;
  pointer-events: none;
}

.hero--v5 .hero-v5__solar-ring--one {
  opacity: .98;
  border-color: rgba(201, 239, 255, .58);
}

.hero--v5 .hero-v5__solar-ring--two {
  opacity: .84;
  border-color: rgba(143, 215, 255, .44);
}

.hero--v5 .hero-v5__solar-ring--three {
  opacity: .66;
  border-color: rgba(99, 188, 255, .32);
}

.hero--v5 .hero-v5__solar-axis {
  opacity: .58;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(95, 194, 255, .17),
    rgba(216, 246, 255, .25),
    rgba(95, 194, 255, .17),
    transparent
  );
  box-shadow: 0 0 1rem rgba(76, 177, 255, .12);
}

@media (max-width: 50rem) {
  .hero--v5 .hero-v5__solar-ring {
    border-width: 1px;
    box-shadow:
      inset 0 0 1.4rem rgba(66, 166, 255, .045),
      0 0 .65rem rgba(125, 210, 255, .17),
      0 0 1.4rem rgba(58, 163, 255, .08);
  }

  .hero--v5 .hero-v5__solar-ring--one {
    opacity: .96;
  }

  .hero--v5 .hero-v5__solar-ring--two {
    opacity: .78;
  }

  .hero--v5 .hero-v5__solar-ring--three {
    opacity: .56;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--v5 .hero-v5__solar-ring::after {
    filter: none;
  }
}


/* ==================================================================
 * Hero V5 — Phase A v3.0
 * ORBIT OWNERSHIP FIX
 * Canvas2D in hero-hybrid.js is now the ONLY visible orbit renderer.
 * The legacy CSS rings/axes were the source of the giant drifting loops.
 * ================================================================== */

.hero--v5 .hero-v5__solar-ring,
.hero--v5 .hero-v5__solar-axis,
.hero--v5 .hero-v5__solar-ring::before,
.hero--v5 .hero-v5__solar-ring::after {
  display: none !important;
  animation: none !important;
}

.hero--v5 .hero-v5__solar-field {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero--v5 .hero-v5__solar-ring,
  .hero--v5 .hero-v5__solar-axis {
    display: none !important;
  }
}

/* ==================================================================
 * Hero V5 — 0.9.89 desktop interaction regression guard
 * - keep CTA ribbon above every 3D/readout layer;
 * - preserve pointer interaction for the ribbon;
 * - make secondary CTA feedback explicit without changing mobile.
 * ================================================================== */
.hero--v5 .hero-v5__support {
  z-index: 80;
  isolation: isolate;
  pointer-events: auto;
}

.hero--v5 .hero-v5__support .hero-v5__actions,
.hero--v5 .hero-v5__support .button {
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .hero--v5 .hero-v5__support .button--secondary:is(:hover, :focus-visible) {
    border-color: rgba(199, 236, 255, .62);
    background:
      radial-gradient(circle at 24% 0%, rgba(255,255,255,.18), transparent 34%),
      linear-gradient(180deg, rgba(37, 112, 196, .72), rgba(10, 48, 96, .88));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.30),
      inset 0 -1px 0 rgba(74,174,255,.18),
      0 .9rem 2.2rem rgba(0,0,0,.24),
      0 0 2.4rem rgba(71,176,255,.24);
  }
}



/* ==================================================================
 * Hero V5 — 0.9.90 HERO-ONLY interaction ownership fix
 * - the 3D scene is visual by default on desktop and cannot cover CTA hit targets;
 * - satellites / pinned deck opt back into pointer interaction;
 * - hover/focus preview never exposes clickable rear deck cards.
 * ================================================================== */
@media (min-width: 50.0625rem) {
  .hero--v5 .hero-v5__scene,
  .hero--v5 .hero-v5__viewport {
    pointer-events: none;
  }

  .hero--v5 .hero-v5__satellite {
    pointer-events: auto;
  }

  .hero--v5 .hero-v5__signal-readout {
    pointer-events: none;
  }

  .hero--v5 .hero-v5__signal-readout.has-pinned-selection {
    pointer-events: auto;
  }

  .hero--v5 .hero-v5__signal-readout:not(.has-pinned-selection) .hero-v5__signal-panel {
    pointer-events: none;
  }

  .hero--v5 .hero-v5__support,
  .hero--v5 .hero-v5__support .hero-v5__actions,
  .hero--v5 .hero-v5__support .button {
    pointer-events: auto;
  }
}

/* ==================================================================
 * Hero V5 — 0.9.91 HERO CTA desktop hit-area simplification
 *
 * Root differential vs mobile: desktop CTA used nested 3D transforms
 * (perspective / rotateX / translateZ / preserve-3d). The interactive
 * layer is flattened so hit testing and the painted button share the
 * same plane. Visual depth remains in border/background/box-shadow.
 * Scope: Hero desktop CTA only.
 * ================================================================== */
@media (min-width: 50.0625rem) {
  .hero--v5 .hero-v5__support {
    position: relative;
    z-index: 100;
    isolation: isolate;
    pointer-events: auto !important;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions {
    position: relative;
    z-index: 110;
    isolation: isolate;
    perspective: none !important;
    transform: none !important;
    transform-style: flat !important;
    pointer-events: auto !important;
  }

  .hero--v5 .hero-v5__support .hero-v5__actions:is(:hover, :focus-within) {
    transform: none !important;
  }

  .hero--v5 .hero-v5__support .button {
    position: relative;
    z-index: 2;
    transform: none !important;
    transform-style: flat !important;
    backface-visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer;
  }

  .hero--v5 .hero-v5__support .button:is(:hover, :focus-visible),
  .hero--v5 .hero-v5__support .button--primary:is(:hover, :focus-visible),
  .hero--v5 .hero-v5__support .button--secondary:is(:hover, :focus-visible),
  .hero--v5 .hero-v5__support .button:active {
    transform: none !important;
  }

  .hero--v5 .hero-v5__support .button:is(:hover, :focus-visible) {
    filter: saturate(1.08) brightness(1.055);
  }
}