/* JquanUI atomic-first residual CSS: visual, responsive and interaction-only. Demo V3.60 */
.road-page {--road-ink:#050c10;--road-blue:#124c69;--road-blue-hi:#5190b0;--road-silk:#edf0eb;--road-gilt:#b99a5b;--road-line:rgba(185,154,91,.44);background:var(--road-ink)}
.road-hero {background:#06131c}.road-hero>img {filter:brightness(.9) saturate(1) contrast(1.02)}.road-hero-shade {background:linear-gradient(180deg,rgba(3,9,15,.25),rgba(4,17,28,.03) 38%,rgba(4,13,20,.24) 82%,var(--road-ink)),linear-gradient(90deg,rgba(4,12,20,.25),transparent 60%)}.road-hero-cells {background-image:linear-gradient(30deg,transparent 47%,rgba(132,207,230,.8) 48% 49%,transparent 50%),linear-gradient(150deg,transparent 47%,rgba(132,207,230,.8) 48% 49%,transparent 50%);background-size:82px 142px;mix-blend-mode:screen;mask-image:linear-gradient(90deg,#000,transparent 73%)}.road-hero .kicker {color:#91bfd2}.road-hero h1 {color:var(--road-silk);font-family:var(--title);font-weight:300;line-height:.7;font-variant-numeric:tabular-nums;text-shadow:0 0 70px rgba(91,176,206,.17)}.road-title-en {color:var(--road-silk);font-family:var(--title);font-weight:400}.road-title-cn {color:#9fc8c8;font-family:"Noto Serif SC",serif;font-weight:300}.road-hero-facts {color:var(--road-silk)}.road-hero-facts i {background:var(--road-line)}.road-hero-facts .zh{font-family:"Noto Serif SC",serif;letter-spacing:.1em}.road-hero-facts small {color:rgba(237,240,235,.6);}.road-scroll-cue {color:rgba(237,240,235,.66);}.road-scroll-cue i {background:var(--road-gilt);transform-origin:right;transition:transform .3s}.road-scroll-cue:hover i{transform:scaleX(1.45)}
.thousand-story {background:#07131a}.thousand-story-copy>div>p {color:rgba(237,240,235,.78);font-family:var(--serif);font-weight:300}.thousand-story-copy .zh p{font-family:"Noto Serif SC",serif;letter-spacing:.07em}.thousand-story-copy strong {color:#a6ced2;}.thousand-story-copy .en p:first-child{max-width:38ch}.thousand-story-copy .en p:nth-child(2){max-width:43ch}.thousand-story-copy .en p:last-child{margin-top:2.1em}
.road-statement {background:#0c2b38;color:var(--road-silk);}.road-statement::before{content:"";position:absolute;inset:0;opacity:.23;background:radial-gradient(ellipse at center,rgba(97,179,204,.45),transparent 58%),repeating-linear-gradient(30deg,transparent 0 28px,rgba(155,211,226,.24) 29px 30px,transparent 31px 58px)}.road-statement h2 {font-family:var(--title);font-weight:300}.road-statement h2 .zh{font-family:"Noto Serif SC",serif;letter-spacing:.13em}.road-statement .kicker {color:#c0d8d1}.road-statement-rule {background:var(--road-line);transform:translateX(-50%)}.road-statement-rule:first-child{top:21%}.road-statement-rule:last-child{bottom:21%}
.road-timeline {background:var(--road-ink)}.road-timeline-head h2,.road-closing h2 {color:var(--road-silk);font-family:var(--title);font-weight:300;line-height:1.08}.road-timeline-head h2 .zh,.road-closing h2 .zh{font-family:"Noto Serif SC",serif;letter-spacing:.1em}.road-timeline-head>p {color:var(--muted);font:italic 14px/1.75 var(--serif)}.timeline-spine {background:rgba(237,240,235,.16);transform:translateX(-50%)}.timeline-spine i {background:var(--road-gilt);box-shadow:0 0 10px rgba(185,154,91,.6);transition:height .08s linear}.road-milestone time {color:rgba(237,240,235,.58);font-family:var(--title);font-weight:300;line-height:1}.road-node {border:1px solid var(--road-gilt);border-radius:50%;background:var(--road-ink);box-shadow:0 0 0 5px var(--road-ink);transition:.55s var(--ease)}.road-milestone-copy {transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.road-milestone.is-visible .road-milestone-copy {transform:none}.road-milestone.is-visible .road-node {background:var(--road-gilt);box-shadow:0 0 0 5px var(--road-ink),0 0 20px rgba(185,154,91,.36)}.road-milestone figure {background:#17333b}.road-milestone figure::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 55%,rgba(3,12,18,.68))}.road-milestone img {filter:saturate(.72) brightness(.78);transition:filter .5s}.road-milestone.is-visible img {filter:saturate(.95) brightness(.92)}.road-milestone h3 {color:var(--road-silk);font-family:var(--title);font-weight:400;line-height:1.25}.road-milestone h3 .zh{font-family:"Noto Serif SC",serif;letter-spacing:.08em}.road-milestone p {color:var(--muted);font:300 14px/1.8 var(--serif)}.road-milestone p .zh{font-family:"Noto Serif SC",serif;letter-spacing:.04em}.road-milestone--final .road-node {border-width:1px}.road-milestone--final .road-node::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--road-gilt)}.timeline-continues {color:#9fc8c8;}.timeline-continues span {font:300 42px/1 var(--serif)}.road-closing {background:#0d303b}.road-closing::after{content:"";position:absolute;right:-8%;bottom:-70%;width:70%;aspect-ratio:1;border:1px solid rgba(119,190,207,.22);border-radius:50%;box-shadow:0 0 0 55px rgba(119,190,207,.04),0 0 0 110px rgba(119,190,207,.035)}.road-closing .primary-btn {border:1px solid rgba(237,240,235,.34);background:transparent}.road-closing .primary-btn:hover{background:var(--road-silk);color:var(--road-ink)}.road-timeline .primary-btn:hover,.timeline-continues .primary-btn:hover{background:var(--road-silk);color:var(--road-ink)}
.road-page .global-nav.scrolled{border-bottom:1px solid rgba(185,154,91,.2)}
@media(max-width:760px){.road-hero-shade{background:linear-gradient(180deg,rgba(3,9,15,.22),rgba(4,17,28,.03) 37%,rgba(4,13,20,.26) 80%,var(--road-ink)),linear-gradient(90deg,rgba(4,12,20,.2),transparent)}}

@media(prefers-reduced-motion:reduce){.road-milestone-copy{opacity:1;transform:none;transition:none}.road-milestone .road-node{background:var(--road-gilt)}}

/* Milestone figures: right-side cards 280×280, left-side (reverse) cards 350×350 */
.road-milestone-copy > figure { width: 280px; height: 280px; aspect-ratio: auto; }
.road-milestone-copy > figure img { transform: none !important; }

@media (min-width: 761px) {
  /* Right-side cards: figure column 280px */
  .road-milestone-copy { grid-template-columns: minmax(0, 1fr) 280px !important; column-gap: 32px !important; row-gap: 24px !important; }
  /* Reverse (left-side): pin figure to the left column (350px) and text to the right column (auto).
       The text column is sized to its content so no empty band remains between image and text. */
    .road-milestone--reverse .road-milestone-copy { grid-template-columns: 350px auto !important; column-gap: 24px !important; }
    .road-milestone--reverse .road-milestone-copy > figure { grid-column: 1 !important; width: 350px !important; height: 350px !important; }
    .road-milestone--reverse .road-milestone-copy > div:nth-child(2) { grid-column: 2 !important; max-width: max-content; }
  .road-milestone-copy > figure { flex-shrink: 0; }
}


/* V3.72 road page black-gold system, reversed chronology and homepage-synced industry/footer bridge. Complex visual CSS only; HTML layout remains atomic-first. */
.road-page {
  --road-ink: #030303;
  --road-blue: #0b1515;
  --road-blue-hi: var(--green-hi);
  --road-silk: #f3ecda;
  --road-gilt: #b89865;
  --road-gilt-hi: #e1c990;
  --road-line: rgba(225, 201, 144, .28);
  background: #030303;
}

.road-page .global-nav.scrolled {
  border-bottom-color: rgba(225, 201, 144, .24);
}

.road-page .road-hero {
  background: #030303;
}

.road-page .road-hero>img {
  filter: brightness(.85) saturate(.92) contrast(1.04);
}

.road-page .road-hero-shade {
  background:
    radial-gradient(70% 62% at 76% 28%, rgba(184, 152, 101, .22), transparent 58%),
    radial-gradient(52% 42% at 20% 78%, rgba(143, 230, 212, .10), transparent 64%),
    linear-gradient(180deg, rgba(3, 3, 3, .20), rgba(3, 3, 3, .06) 32%, rgba(3, 3, 3, .42) 78%, #07131a),
    linear-gradient(90deg, rgba(3, 3, 3, .38), transparent 68%);
}

.road-page .road-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent, rgba(225, 201, 144, .22), transparent), repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), rgba(225, 201, 144, .10) 12.5%);
  opacity: .18;
}

.road-page .road-hero .kicker,
.road-page .thousand-story .kicker,
.road-page .road-timeline-head .kicker,
.road-page .road-statement .kicker {
  color: var(--road-gilt-hi);
}

.road-page .road-hero h1 {
  color: #fff8e4;
  text-shadow: 0 26px 70px rgba(0, 0, 0, .52), 0 0 34px rgba(225, 201, 144, .16);
}

.road-page .road-title-en {
  color: #fff8e4;
}

.road-page .road-title-cn,
.road-page .thousand-story-copy strong,
.road-page .timeline-continues {
  color: var(--green-hi);
}

.road-page .road-hero-facts {
  color: rgba(243, 236, 218, .88);
}

.road-page .road-hero-facts i,
.road-page .road-scroll-cue i {
  background: linear-gradient(90deg, var(--road-gilt), var(--green-hi));
}

.road-page .road-hero-facts small,
.road-page .road-scroll-cue {
  color: rgba(243, 236, 218, .66);
}

.road-page .thousand-story {
  background:
    radial-gradient(760px 440px at 12% 12%, rgba(143, 230, 212, .08), transparent 62%),
    linear-gradient(180deg, #030303, #090704 52%, #030303);
}

.road-page .thousand-story-copy>div>p {
  color: rgba(243, 236, 218, .78);
}

.road-page .road-timeline {
  background:
    radial-gradient(780px 520px at 82% 0%, rgba(184, 152, 101, .13), transparent 64%),
    repeating-linear-gradient(90deg, rgba(225, 201, 144, .035) 0 1px, transparent 1px 9px),
    #030303;
}

.road-page .road-timeline-head h2,
.road-page .road-statement h2 {
  color: #fff8e4;
  text-shadow: 0 20px 50px rgba(0, 0, 0, .34);
}

.road-page .road-timeline-head>p {
  color: rgba(243, 236, 218, .66);
}

.road-page .timeline-spine {
  background: rgba(225, 201, 144, .16);
}

.road-page .timeline-spine i {
  background: linear-gradient(180deg, var(--road-gilt-hi), var(--green-hi));
  box-shadow: 0 0 18px rgba(143, 230, 212, .25), 0 0 14px rgba(225, 201, 144, .32);
}

.road-page .road-milestone time {
  color: rgba(225, 201, 144, .70);
}

.road-page .road-node {
  border-color: var(--road-gilt-hi);
  background: #030303;
  box-shadow: 0 0 0 5px #030303, 0 0 0 6px rgba(225, 201, 144, .12);
}

.road-page .road-milestone.is-visible .road-node {
  background: var(--green-hi);
  border-color: var(--road-gilt-hi);
  box-shadow: 0 0 0 5px #030303, 0 0 20px rgba(143, 230, 212, .32), 0 0 32px rgba(225, 201, 144, .24);
}

.road-page .road-milestone--final .road-node::before {
  background: linear-gradient(180deg, var(--road-gilt-hi), var(--green-hi));
}

.road-page .road-milestone figure {
  background: #0b0906;
  border: 1px solid rgba(225, 201, 144, .22);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(255, 248, 228, .04);
}

.road-page .road-milestone figure::after {
  background: linear-gradient(135deg, transparent 42%, rgba(3, 3, 3, .72)), linear-gradient(0deg, rgba(3, 3, 3, .38), transparent 54%);
}

.road-page .road-milestone img {
  filter: saturate(.72) brightness(.70) contrast(1.06);
}

.road-page .road-milestone.is-visible img {
  filter: saturate(.92) brightness(.86) contrast(1.04);
}

.road-page .road-milestone h3 {
  background: linear-gradient(90deg, #fff8e4, var(--road-gilt-hi), var(--green-hi));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.road-page .road-milestone p {
  color: rgba(243, 236, 218, .66);
}

.road-page .road-timeline .primary-btn:hover,
.road-page .timeline-continues .primary-btn:hover {
  background: linear-gradient(180deg, var(--road-gilt-hi), var(--road-gilt));
  color: #030303;
}

.road-page .road-statement {
  background:
    radial-gradient(70% 62% at 50% 48%, rgba(225, 201, 144, .16), transparent 62%),
    linear-gradient(180deg, #030303, #0b0906 55%, #030303);
  color: var(--road-silk);
}

.road-page .road-statement::before {
  opacity: .20;
  background: radial-gradient(ellipse at center, rgba(143, 230, 212, .22), transparent 58%), repeating-linear-gradient(30deg, transparent 0 28px, rgba(225, 201, 144, .18) 29px 30px, transparent 31px 58px);
}

.road-page .road-statement-rule {
  background: linear-gradient(90deg, transparent, var(--road-gilt-hi), var(--green-hi), transparent);
}

.road-page .industry-links {
  border-block: 1px solid rgba(225, 201, 144, .24);
  background: #030303;
}

.road-page .industry-links a:hover,
.road-page .industry-links a:focus-visible {
  color: var(--road-gilt-hi);
  background: linear-gradient(90deg, rgba(184, 152, 101, .10), rgba(143, 230, 212, .06));
}

@media (max-width: 560px) {
  .road-page .industry-links a {
    padding-inline: 14px !important;
    font-size: 12px !important;
    letter-spacing: .08em !important;
  }
}


/* Demo V3.60 task3 art direction pass: road timeline museum-scroll refinement. */
.road-page .road-timeline-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(225, 201, 144, .72), rgba(143, 230, 212, .38), transparent 72%);
  opacity: .52;
}
.road-page .timeline-scroll::before {
  content: "";
  position: absolute;
  top: -34px;
  bottom: 34px;
  left: calc(50% - 46px);
  width: 92px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(225, 201, 144, .12), transparent 70%);
  opacity: .55;
}
.road-page .road-milestone-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -16px -18px;
  border: 1px solid rgba(225, 201, 144, .12);
  background:
    linear-gradient(135deg, rgba(225, 201, 144, .07), rgba(143, 230, 212, .025) 48%, rgba(3, 3, 3, .02)),
    rgba(3, 3, 3, .22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .20);
  opacity: 0;
  transform: scale(.985);
  transition: opacity 650ms var(--ease), transform 650ms var(--ease), border-color 650ms var(--ease);
}
.road-page .road-milestone.is-visible .road-milestone-copy::before,
.road-page .road-milestone:hover .road-milestone-copy::before {
  opacity: .92;
  transform: scale(1);
  border-color: rgba(225, 201, 144, .24);
}
.road-page .road-milestone time {
  background: linear-gradient(180deg, #fff8e4, #b89865 58%, rgba(143, 230, 212, .82));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.road-page .road-closing {
  background:
    radial-gradient(640px 420px at 74% 16%, rgba(225, 201, 144, .15), transparent 66%),
    linear-gradient(180deg, #030303, #0b0906 58%, #030303);
}
@media (max-width: 760px) {
  .road-page .timeline-scroll::before { left: -27px; width: 92px; opacity: .42; }
  .road-page .road-milestone-copy::before { inset: -12px -10px; opacity: .72; }
}

/* Demo V3.60 atomic road pass: timeline header position, milestone card anchors, figcaption skin, CTA base, and industry base colors moved to JquanUI atomic classes in road-to-1000.html. */