/* 关于我们首屏：产品页文字与卡片规范，右侧 SVG 参考原图位置单独校准。 */

body.about-experience-page .about-experience-hero {
  height: 620px;
  min-height: 620px;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--site-v10-hero-background);
}

body.about-experience-page .about-experience-hero .experience-hero-grid {
  display: none;
}

body.about-experience-page .about-product-hero-inner {
  position: relative;
  z-index: 2;
  height: 620px;
  display: flex;
  align-items: center;
  overflow: visible;
}

body.about-experience-page .about-product-hero-copy {
  position: relative;
  z-index: 3;
  top: -22px;
  width: 720px;
  max-width: none;
  padding: 0;
}

body.about-experience-page .about-product-hero-copy h1 {
  max-width: 720px;
  margin: 0 0 20px;
  color: #343e54;
  font-size: 42px;
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.28;
  white-space: nowrap;
}

body.about-experience-page .about-product-hero-copy > p:not(.experience-eyebrow) {
  width: 570px;
  max-width: none;
  margin: 0;
  color: #8d95a4;
  font-size: 15px;
  line-height: 1.85;
}

body.about-experience-page .about-product-hero-copy .experience-actions {
  margin-top: 34px;
}

body.about-experience-page .about-product-hero-copy .experience-button {
  min-width: 142px;
  height: 48px;
  padding-inline: 24px;
  font-size: 14px;
}

body.about-experience-page .about-hero-svg {
  position: absolute;
  z-index: 1;
  top: -38px;
  right: -300px;
  width: 1452px;
  height: 842px;
  margin: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
  transform: none;
}

body.about-experience-page .about-hero-svg::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 120px;
  bottom: 96px;
  width: 660px;
  height: 22px;
  border-radius: 50%;
  background: rgba(64, 76, 102, .08);
  filter: blur(18px);
}

body.about-experience-page .about-hero-svg img {
  width: 1452px;
  height: auto;
  max-width: none;
  display: block;
  object-fit: contain;
  object-position: right center;
  transform: none;
}


/* Seven data heads converge first. The packet then follows only the circuit
   traces already drawn in the illustration, pauses inside each device, and
   resumes from the device's opposite-side trace before fading at the cylinder. */
body.about-experience-page .about-hero-data-flow {
  position: absolute;
  z-index: 2;
  inset: 0 auto auto 0;
  display: block;
  width: 1452px;
  height: auto;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}

body.about-experience-page .about-data-packet {
  --packet-offset: 0s;
}

body.about-experience-page .about-server-entry-flow {
  pointer-events: none;
}

body.about-experience-page .about-server-entry-flow path {
  fill: none;
  stroke-linecap: round;
  opacity: 0;
}

body.about-experience-page .about-data-packet-b {
  --packet-offset: -3s;
}

body.about-experience-page .about-data-branch,
body.about-experience-page .about-data-route-segment {
  fill: none;
  stroke: url(#about-data-flow-coral);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#about-data-flow-glow);
  will-change: stroke-dashoffset, opacity;
}

body.about-experience-page .about-data-branch {
  stroke-width: 2.1;
  stroke-dasharray: 10 90;
  animation: about-data-branch-run 6s linear infinite;
  animation-delay: var(--packet-offset);
}

body.about-experience-page .about-data-route-segment {
  stroke-width: 3.2;
  stroke-dasharray: 16 84;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--packet-offset);
}

body.about-experience-page .about-data-route-entry {
  animation-name: about-data-route-entry-run;
}

body.about-experience-page .about-data-route-relay {
  animation-name: about-data-route-relay-run;
}

body.about-experience-page .about-data-route-cylinder {
  animation-name: about-data-route-cylinder-run;
}

body.about-experience-page .about-data-source-rings circle {
  fill: rgba(255, 111, 104, .2);
  stroke: #ff6f68;
  stroke-width: 1.5;
  filter: url(#about-data-flow-glow);
  transform-box: fill-box;
  transform-origin: center;
  animation: about-data-source-pulse 6s ease-out infinite;
  animation-delay: calc(var(--packet-offset) + var(--source-delay, 0s));
}

body.about-experience-page .about-data-merge,
body.about-experience-page .about-data-processing,
body.about-experience-page .about-data-cylinder-hit {
  fill: rgba(255, 111, 104, .18);
  stroke: #ff6f68;
  stroke-width: 1.5;
  opacity: 0;
  filter: url(#about-data-flow-glow);
  transform-box: fill-box;
  transform-origin: center;
}

body.about-experience-page .about-data-merge {
  animation: about-data-merge-pulse 6s ease-out infinite;
  animation-delay: var(--packet-offset);
}

body.about-experience-page .about-data-processing-small {
  animation: about-data-small-process 6s ease-in-out infinite;
  animation-delay: var(--packet-offset);
}

body.about-experience-page .about-data-processing-cpu {
  animation: about-data-cpu-process 6s ease-in-out infinite;
  animation-delay: var(--packet-offset);
}

body.about-experience-page .about-data-processing-module {
  animation: about-data-module-process 6s ease-in-out infinite;
  animation-delay: var(--packet-offset);
}

body.about-experience-page .about-data-cylinder-hit {
  animation: about-data-cylinder-fade 6s ease-out infinite;
  animation-delay: var(--packet-offset);
}

@keyframes about-data-branch-run {
  0% { opacity: 0; stroke-dashoffset: 0; }
  2% { opacity: 1; }
  16% { opacity: 1; stroke-dashoffset: -90; }
  19%, 100% { opacity: 0; stroke-dashoffset: -100; }
}

@keyframes about-data-route-entry-run {
  0%, 15% { opacity: 0; stroke-dashoffset: 0; }
  18% { opacity: 1; }
  31% { opacity: 1; stroke-dashoffset: -92; }
  34%, 100% { opacity: 0; stroke-dashoffset: -100; }
}

@keyframes about-data-route-relay-run {
  0%, 46% { opacity: 0; stroke-dashoffset: 0; }
  49% { opacity: 1; }
  63% { opacity: 1; stroke-dashoffset: -92; }
  66%, 100% { opacity: 0; stroke-dashoffset: -100; }
}

@keyframes about-data-route-cylinder-run {
  0%, 69% { opacity: 0; stroke-dashoffset: 0; }
  72% { opacity: 1; }
  92% { opacity: 1; stroke-dashoffset: -92; }
  95%, 100% { opacity: 0; stroke-dashoffset: -100; }
}

@keyframes about-data-source-pulse {
  0% { opacity: 0; transform: scale(.45); }
  2% { opacity: 1; transform: scale(1); }
  7% { opacity: .28; transform: scale(1.85); }
  12%, 100% { opacity: 0; transform: scale(2.15); }
}

@keyframes about-data-merge-pulse {
  0%, 14% { opacity: 0; transform: scale(.55); }
  16% { opacity: 1; transform: scale(1); }
  21% { opacity: .25; transform: scale(2); }
  25%, 100% { opacity: 0; transform: scale(2.35); }
}

@keyframes about-data-small-process {
  0%, 29% { opacity: 0; transform: scale(.5); }
  32% { opacity: .95; transform: scale(1); }
  36% { opacity: .7; transform: scale(1.18); }
  41%, 100% { opacity: 0; transform: scale(1.75); }
}

@keyframes about-data-cpu-process {
  0%, 38% { opacity: 0; transform: scale(.45); }
  41% { opacity: .9; transform: scale(1); }
  45% { opacity: .62; transform: scale(1.16); }
  49%, 100% { opacity: 0; transform: scale(1.7); }
}

@keyframes about-data-module-process {
  0%, 61% { opacity: 0; transform: scale(.48); }
  64% { opacity: .9; transform: scale(1); }
  68% { opacity: .62; transform: scale(1.16); }
  73%, 100% { opacity: 0; transform: scale(1.72); }
}

@keyframes about-data-cylinder-fade {
  0%, 90% { opacity: 0; transform: scale(.5); }
  93% { opacity: .9; transform: scale(1); }
  97% { opacity: .22; transform: scale(2.2); }
  100% { opacity: 0; transform: scale(2.55); }
}

body.about-experience-page .about-experience-hero .experience-hero-index {
  display: none;
}

.about-hero-highlights {
  position: relative;
  z-index: 4;
  margin-top: -110px;
  padding: 0;
  background: transparent;
}

.about-hero-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.about-hero-card {
  min-width: 0;
  min-height: 132px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(49, 59, 78, .11);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.about-hero-card::after {
  content: none;
}

.about-hero-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(49, 59, 78, .15);
}

.about-hero-card-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: #fff;
  background: #ff6868;
  box-shadow: 0 8px 16px rgba(255, 104, 104, .22);
}

.about-hero-card-icon svg {
  width: 37px;
  height: 37px;
  overflow: visible;
}

.about-hero-card-icon svg rect,
.about-hero-card-icon svg path,
.about-hero-card-icon svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-hero-card h2 {
  margin: 0 0 10px;
  color: #404b60;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
}

.about-hero-card p {
  margin: 0;
  color: #99a1ae;
  font-size: 14px;
  line-height: 1.55;
  white-space: nowrap;
}

.about-hero-highlights + .company-story {
  padding-top: 120px;
}

/* 伙伴板块的卡片下方保留完整收口，再进入招聘板块。总节奏不额外增高。 */
body.about-experience-page .partner-ecosystem {
  padding-bottom: 64px;
}

body.about-experience-page .careers-section {
  padding-top: 48px;
}

/* The numbered journey list already communicates progress on this page. */
body.about-experience-page .about-depth-scene .depth-progress {
  display: none;
}

/* 发展历程进入视差场景时，首段空场由约 240px 收紧至约 120px。 */
@media (min-width: 901px) {
  body.about-experience-page .about-depth-scene .depth-sticky {
    top: 64px;
    height: calc(100vh - 64px);
    min-height: 0;
  }

  body.about-experience-page .about-depth-layout {
    top: clamp(-204px, calc(107px - 34vh), -140px);
  }
}

/* Keep the short desktop opening airy without changing the left copy or the
   depth values that drive the card animation. */
@media (min-width: 901px) and (max-height: 1200px) {
  body.about-experience-page .about-depth-layout {
    top: clamp(-164px, calc(147px - 34vh), -100px);
  }

  body.about-experience-page .about-depth-layout .depth-copy {
    top: var(--journey-copy-offset, 80px);
  }

  body.about-experience-page .journey-stage {
    top: var(--journey-stage-offset, 80px);
  }
}

/* Between the compact 631px layout and the full 1080px frame, keep the
   opening eyebrow out of the sticky mask's transparent top edge. The card
   stack keeps its existing opening offset; only the copy needs more room. */
@media (min-width: 901px) and (min-height: 701px) and (max-height: 900px) {
  body.about-experience-page .about-depth-layout .depth-copy {
    top: max(var(--journey-copy-offset, 80px), 140px);
  }
}

/* On short desktop windows the fixed header must remain outside the sticky
   timeline viewport. Removing the shared 820px floor also prevents the scene
   from being taller than the visible area and hiding its opening copy. */
@media (min-width: 901px) and (max-height: 700px) {
  body.about-experience-page .about-depth-scene .depth-sticky {
    top: 64px;
    height: calc(100vh - 64px);
    min-height: 0;
  }

  body.about-experience-page .about-depth-layout {
    top: 0;
  }

  body.about-experience-page .about-depth-layout .depth-copy > p {
    margin-bottom: 10px;
  }

  body.about-experience-page .about-depth-layout .depth-copy {
    align-self: start;
    margin-top: 14px;
  }

  body.about-experience-page .about-depth-layout .depth-copy > span {
    margin-top: 16px;
    line-height: 1.7;
  }

  body.about-experience-page .about-depth-layout .depth-copy ol {
    margin-top: 20px;
    gap: 2px;
  }

  body.about-experience-page .about-depth-layout .depth-copy li {
    min-height: 36px;
  }

  body.about-experience-page .journey-card-one {
    top: 20px;
  }

  body.about-experience-page .journey-card-two {
    top: 95px;
  }

  body.about-experience-page .journey-card-three {
    top: 180px;
  }

  body.about-experience-page .journey-card-four {
    top: 265px;
  }

  body.about-experience-page .journey-card-five {
    top: 350px;
  }
}

@media (min-width: 901px) and (min-height: 620px) and (max-height: 700px) {
  body.about-experience-page .about-depth-layout .depth-copy {
    top: max(var(--journey-copy-offset, 80px), 100px);
  }
}

@media (max-width: 1480px) {
  body.about-experience-page .about-hero-svg {
    right: clamp(-370px, calc(-10vw - 150px), -270px);
  }

  body.about-experience-page .about-product-hero-copy {
    width: min(52vw, 720px);
  }

  body.about-experience-page .about-product-hero-copy > p:not(.experience-eyebrow) {
    width: min(43vw, 570px);
  }

  .about-hero-card-grid {
    gap: 20px;
  }

  .about-hero-card {
    padding-inline: 24px;
  }
}

@media (max-width: 1120px) {
  body.about-experience-page .about-hero-svg {
    top: -4px;
    right: -410px;
    width: 1258px;
    height: 729px;
  }

  body.about-experience-page .about-hero-svg img {
    width: 1258px;
  }

  body.about-experience-page .about-hero-data-flow {
    width: 1258px;
  }

  .about-hero-card {
    gap: 16px;
  }

  .about-hero-card p {
    white-space: normal;
  }
}

@media (max-width: 900px) {
  body.about-experience-page .about-experience-hero {
    height: auto;
    min-height: 840px;
  }

  body.about-experience-page .about-product-hero-inner {
    height: auto;
    min-height: 840px;
    padding: 104px 0 46px;
    display: block;
  }

  body.about-experience-page .about-product-hero-copy {
    top: 0;
    width: 100%;
    max-width: 650px;
  }

  body.about-experience-page .about-product-hero-copy h1 {
    font-size: 40px;
    white-space: normal;
  }

  body.about-experience-page .about-product-hero-copy > p:not(.experience-eyebrow) {
    width: 100%;
    max-width: 600px;
  }

  body.about-experience-page .about-hero-svg {
    position: relative;
    top: 12px;
    right: auto;
    width: min(720px, 112vw);
    height: auto;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  body.about-experience-page .about-hero-svg::before {
    right: 12%;
    bottom: 11%;
    width: 62%;
  }

  body.about-experience-page .about-hero-svg img {
    width: 100%;
  }

  body.about-experience-page .about-hero-data-flow {
    width: 100%;
  }

  .about-hero-highlights {
    margin-top: 0;
    padding: 24px 0 56px;
    background: #f7f8fb;
  }

  .about-hero-card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .about-hero-card {
    min-height: 126px;
  }

  body.about-experience-page .partner-ecosystem {
    padding-bottom: 48px;
  }

  body.about-experience-page .careers-section {
    padding-top: 48px;
  }
}

@media (max-width: 560px) {
  body.about-experience-page .about-experience-hero {
    min-height: 760px;
  }

  body.about-experience-page .about-product-hero-inner {
    min-height: 760px;
    padding-top: 88px;
  }

  body.about-experience-page .about-product-hero-copy h1 {
    font-size: 34px;
  }

  body.about-experience-page .about-product-hero-copy .experience-actions {
    gap: 10px;
  }

  body.about-experience-page .about-product-hero-copy .experience-button {
    min-width: 128px;
    padding-inline: 18px;
  }

  body.about-experience-page .about-hero-svg {
    width: 124vw;
    margin-top: 16px;
  }

  .about-hero-card {
    padding: 24px 20px;
  }

  .about-hero-highlights + .company-story {
    padding-top: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.about-experience-page .about-hero-data-flow {
    display: none;
  }

}

/* About page typography palette — homepage / V10 design-system tokens. */
body.about-experience-page {
  --about-text-display: #202840;
  --about-text-heading: #354056;
  --about-text-primary: #465166;
  --about-text-secondary: #737c8d;
  --about-text-muted: #969eab;
  --about-text-accent: #ff6868;
}

body.about-experience-page .about-product-hero-copy h1,
body.about-experience-page .company-story-lead h2,
body.about-experience-page .careers-copy h2 {
  color: var(--about-text-display);
}

body.about-experience-page .section-title-v10 > h2,
body.about-experience-page .depth-copy h2 {
  color: var(--about-text-heading);
}

body.about-experience-page .company-metrics strong {
  color: var(--about-text-display);
}

body.about-experience-page .about-product-hero-copy > p:not(.experience-eyebrow),
body.about-experience-page .company-story-copy p,
body.about-experience-page .about-hero-card p,
body.about-experience-page .company-value-grid p,
body.about-experience-page .depth-copy > span,
body.about-experience-page .journey-card span,
body.about-experience-page .partner-outcome-grid p,
body.about-experience-page .careers-copy > span {
  color: var(--about-text-secondary);
}

body.about-experience-page .about-hero-card h2,
body.about-experience-page .company-value-grid h3,
body.about-experience-page .journey-card strong,
body.about-experience-page .partner-outcome-grid h3,
body.about-experience-page .partner-cta strong,
body.about-experience-page .career-role-row strong,
body.about-experience-page .career-benefits strong {
  color: var(--about-text-heading);
}

body.about-experience-page .company-metrics p,
body.about-experience-page .depth-copy li,
body.about-experience-page .partner-cta > span,
body.about-experience-page .section-title-v10 > p:last-child,
body.about-experience-page .career-role-row small,
body.about-experience-page .career-benefits span {
  color: var(--about-text-muted);
}

body.about-experience-page .depth-copy li.is-active {
  color: var(--about-text-heading);
}

body.about-experience-page .partner-brand-row span {
  color: var(--about-text-primary);
}

body.about-experience-page .company-story-copy a,
body.about-experience-page .journey-card time,
body.about-experience-page .partner-outcome-grid article > span,
body.about-experience-page .career-role-row > span,
body.about-experience-page .careers-copy > a,
body.about-experience-page .partner-cta > i {
  color: var(--about-text-accent);
}

body.about-experience-page .partner-cta > span {
  opacity: 1;
}

body.about-experience-page .partner-brand-row span {
  font-weight: 600;
}