/* Center each metric value and its caption on the same vertical axis. */
.hero--cinematic .hero-metrics > div {
  align-items: center;
  text-align: center;
}
.hero--cinematic .hero-metric-value { justify-content: center; }

/* Match the first-screen actions to the assistant and product navigation. */
.hero--cinematic .hero-cinematic-actions .hero-needs-link,
.hero--cinematic .hero-cinematic-explore {
  gap: 10px; border-radius: 10px;
}
.hero--cinematic .hero-cinematic-actions .icon {
  width: 18px; height: 18px; flex: 0 0 18px;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.hero--cinematic .hero-cinematic-actions .hero-needs-link .icon { color: #2764bc; }
@media (max-width: 480px) {
  .hero--cinematic .hero-cinematic-actions .hero-needs-link,
  .hero--cinematic .hero-cinematic-explore { gap: 8px; }
}

/* A question stays in place; its response joins only when the other robot speaks.
   Each turn is a chat bubble: the asker sits left with its tail pointing at the
   gray hoodie robot, the responder sits right with its tail pointing at the orange
   one, so the side alone tells you who is talking. */
.hero--cinematic [data-fixed-dialogue] > .hero-conversation {
  position: absolute; z-index: 4;
  /* 聊天式分栏：左侧灰机器人（蓝气泡）固定靠左、右侧橙机器人（黄气泡）固定靠右，
     容器横跨两台机器人头顶，尾巴各自指向说话的机器人。 */
  left: 59%; right: 15%;
  top: clamp(90px, 10svh, 112px); bottom: auto;
  display: grid; grid-template-rows: repeat(2, minmax(78px, auto));
  align-content: start; gap: 24px;
  width: auto; max-width: 440px;
  height: auto; min-height: 180px;
  margin: 0; padding: 0; border: 0; box-sizing: border-box;
  translate: none;
  pointer-events: none; transform: none; animation: none;
}
.hero--cinematic [data-fixed-dialogue] .hero-conversation > .hero-scene-bubble {
  position: relative; inset: auto;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  justify-self: start; order: initial;
  width: calc(100% - 24px); max-width: none; height: auto; min-height: 78px;
  margin: 0; padding: 10px 15px 12px;
  border: 1px solid #e0ecf5; border-radius: 17px 17px 17px 6px;
  box-sizing: border-box; background: #f6fafdF5;
  box-shadow: 0 6px 20px #142c3b0b;
  color: #314b5f; opacity: 1; visibility: visible; filter: none;
  backdrop-filter: none; transform: none; translate: none;
  transition: opacity .22s, background .22s, border-color .22s;
}
.hero--cinematic [data-fixed-dialogue] .hero-conversation > .hero-scene-bubble[data-speaker="gray"] {
  justify-self: start; --speaker-accent: #526f86; --speaker-dot: #688db0;
  background: #f6fafdf5; border-color: #dce9f3;
  border-radius: 17px 17px 17px 6px;
}
.hero--cinematic [data-fixed-dialogue] .hero-conversation > .hero-scene-bubble[data-speaker="orange"] {
  justify-self: end; --speaker-accent: #875725; --speaker-dot: #cf933c;
  background: #fff5e9f7; border-color: #efdbbd;
  border-radius: 17px 17px 6px 17px;
}
/* A floating tail: the box's own borders cannot be reused, because the bubble
   also animates the Web Animations transform that a pseudo-element would inherit. */
.hero--cinematic [data-fixed-dialogue] .hero-conversation > .hero-scene-bubble::after {
  content: ""; position: absolute; top: -5px;
  width: 12px; height: 12px;
  border: 1px solid transparent; border-bottom: 0; border-right: 0;
  background: inherit;
  transform: rotate(45deg);
}
.hero--cinematic [data-fixed-dialogue] .hero-conversation > .hero-scene-bubble[data-speaker="gray"]::after {
  left: 18px; border-color: #dce9f3; border-left-color: transparent; border-bottom-color: transparent;
}
.hero--cinematic [data-fixed-dialogue] .hero-conversation > .hero-scene-bubble[data-speaker="orange"]::after {
  right: 18px; border-color: #efdbbd; border-left-color: transparent; border-bottom-color: transparent;
}
.hero--cinematic [data-fixed-dialogue] .hero-conversation .hero-turn-speaker {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 4px; padding: 0; color: var(--speaker-accent);
  font-size: 12px; line-height: 1.5; font-weight: 500;
}
.hero-turn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--speaker-dot); }
.hero-turn-voice { display: flex; align-items: center; gap: 2px; height: 12px; margin-left: auto; opacity: 0; }
.hero-turn-voice i { display: block; width: 2px; height: 5px; border-radius: 2px; background: var(--speaker-dot); }
.hero-turn-voice i:nth-child(2) { height: 10px; }
.is-speaking .hero-turn-voice { opacity: .85; }
.hero-stage[data-playing="true"] .is-speaking .hero-turn-voice i { animation: hero-voice .8s ease-in-out infinite alternate; }
.hero-turn-voice i:nth-child(2) { animation-delay: -.2s !important; }
.hero-turn-voice i:nth-child(3) { animation-delay: -.4s !important; }
.hero--cinematic [data-fixed-dialogue] .hero-conversation .hero-scene-bubble-text {
  margin: 0; padding: 0; font-size: 14px; font-weight: 400; line-height: 1.6;
  letter-spacing: 0; color: #314b5f; overflow-wrap: anywhere;
}
.hero--cinematic [data-fixed-dialogue] .hero-conversation .hero-scene-bubble-title,
.hero--cinematic [data-fixed-dialogue] .hero-conversation > .hero-scene-bubble::before { display: none; }
.hero--cinematic [data-fixed-dialogue] .hero-conversation > .hero-scene-bubble.is-settled { opacity: .82; }
.hero--cinematic [data-fixed-dialogue] .hero-conversation > .hero-scene-bubble.is-empty { opacity: 0; visibility: hidden; }
.hero--cinematic [data-fixed-dialogue] .hero-conversation > .hero-scene-bubble.is-pending { width: 150px; min-height: 65px; justify-self: start; }
.hero-topic-interlude {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 18px 24px; border-left: 2px solid #aac6dc;
  color: #314b5f; opacity: 0; visibility: hidden;
  transform: translateY(5px); pointer-events: none;
  transition: opacity .28s, transform .28s, visibility 0s .28s;
}
.hero-topic-interlude > p { margin: 0; font-size: 12px; line-height: 1.5; letter-spacing: .08em; }
.hero-topic-interlude > strong { font-size: 18px; line-height: 1.6; font-weight: 500; }
.hero-topic-interlude.is-visible {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: .24s, .24s, 0s;
}
.hero--cinematic [data-fixed-dialogue][data-topic-phase="interlude"] .hero-conversation > .hero-scene-bubble {
  opacity: 0; visibility: hidden;
  transition: opacity .24s, visibility 0s .24s;
}
@media (min-width: 901px) {
  .hero-topic-interlude {
    background: #f6fafdf0; border: 1px solid #e0ecf5;
    border-radius: 17px; box-shadow: 0 6px 20px #142c3b0b;
    inset: 12px 0 12px 24px;
  }
}
@media (max-width: 900px) {
  .hero-topic-interlude { color: #e9f2fa; border-color: #7395b0; padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-topic-interlude, .hero-topic-interlude.is-visible { transition: none; transform: none; }
}
.hero--cinematic [data-fixed-dialogue] .hero-conversation > .is-pending .hero-scene-bubble-text {
  color: var(--speaker-accent); letter-spacing: .15em; font-weight: 600;
}
.hero-stage[data-playing="true"] .is-pending .hero-scene-bubble-text { animation: hero-thinking .65s ease-in-out infinite alternate; }
@keyframes hero-voice { to { transform: scaleY(.45); } }
@keyframes hero-thinking { to { opacity: .35; } }
@media (min-width: 901px) and (max-width: 1100px) {
  .hero--cinematic [data-fixed-dialogue] > .hero-conversation { top: 82px; max-width: 340px; }
}
@media (max-width: 900px) {
  .hero--cinematic [data-fixed-dialogue] > .hero-conversation {
    position: relative; inset: auto; order: 1; align-self: stretch;
    width: auto; max-width: none; height: auto; min-height: 180px;
    margin: 0 36px 16px; flex-shrink: 0;
  }
  /* Below 900px the pair loses its fixed height, so a long bubble grows the row
     and would collide with its neighbour; keep both rows in step instead. */
  .hero--cinematic [data-fixed-dialogue] > .hero-conversation { grid-auto-rows: 1fr; }
}
@media (max-width: 480px) {
  .hero--cinematic [data-fixed-dialogue] > .hero-conversation { margin-inline: 20px; }
}
@media (min-width: 481px) and (max-width: 640px) {
  .hero--cinematic [data-fixed-dialogue] > .hero-conversation { margin-inline: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--cinematic [data-fixed-dialogue] .hero-conversation > .hero-scene-bubble { transition: none; }
  .hero-turn-voice i, .hero-scene-bubble-text { animation: none !important; }
}

/* Unblurred vector eyes use the same xMaxYMid cover projection as the film. */
.hero--cinematic .hero-stage-viewer{background-image:url("assets/hero-v9-poster.webp")}
.hero-duo-eyes{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:3;pointer-events:none;transform:none;filter:none}
/* Leave a little floor visible below both robots in the narrow desktop panel. */
@media(min-width:481px) and (max-width:640px){.hero--cinematic .hero-cinematic-copy{padding:78px 24px 14px}}

/* Leave room for the business figures within a typical desktop first screen. */
@media(min-width:901px) and (max-width:1899px) {
  .hero--cinematic .hero-stage { height: min(860px, calc(100svh - 88px)); min-height: 620px; }
}
@media(min-width:641px) and (max-width:900px) {
  .hero--cinematic .hero-stage-viewer { aspect-ratio: 16 / 10; }
}

/* One shared backdrop joins navigation and hero; captions stay above the haze. */
.site-header--integrated {
  --header-solid: 0;
  isolation: isolate;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header--integrated::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #f7fafff5;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 5px 22px #244c7f09;
  opacity: var(--header-solid);
}
.hero--cinematic .hero-stage::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 176px;
  pointer-events: none;
  background: linear-gradient(180deg,
    #f3f7fcfc 0%, #f3f7fcf5 24%, #f3f7fcd9 40%,
    #f3f7fc94 58%, #f3f7fc38 79%, #f3f7fc00 100%);
}
@media (max-width: 900px) {
  .hero--cinematic .hero-stage::before {
    height: 104px;
    background: linear-gradient(180deg, #f3f7fcfc 0%, #f3f7fcf5 40%, #f3f7fcd9 58%, #f3f7fc66 78%, #f3f7fc00 100%);
  }
}
@media (max-width: 640px) {
  .hero--cinematic .hero-stage::before { height: 92px; }
  .hero--cinematic .hero-cinematic-copy { padding-top: calc(var(--header-height) + 28px); }
}