/* 产品介绍页：保留场景底图，全部网络、粒子与文字由网页绘制 */
.product-page { --product-hero-ratio: 2.55; --engine-icon-size: calc(48 * var(--u)); --product-accent: #0867ed; --engine-panel-background: linear-gradient(#ffffff0f, #ffffff0f), radial-gradient(ellipse at 50% 0, #1685bc77, transparent 60%), linear-gradient(135deg, #064577f5, #032f5df5 50%, #065884f5); --engine-panel-edge: #84dbff; }
.product-hero { position: relative; isolation: isolate; aspect-ratio: var(--product-hero-ratio); background-color: #e5f2ff; background-image: linear-gradient(100deg, #03446e10, #03446e30), linear-gradient(#043f6acc, #043f6acc), url("assets/product-hero-background.png"); background-position: center 52%; background-size: cover; background-repeat: no-repeat; background-blend-mode: multiply, color, normal; overflow: clip; }
.product-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, #f8fcffda, #f5faff7d 35%, transparent 63%); }
/* 与首页共用版心宽度，内部构图整体等比缩放，不拆分引擎行 */
.product-hero-content { position: absolute; inset: 0; width: var(--content-width); margin: 0 auto; }
.product-hero-inner { --u: calc(1440px / 954); --content-width: calc(848 * var(--u)); --engine-icon-size: calc(48 * var(--u)); --section-subtitle: calc(var(--type-copy-size) * var(--u)); position: absolute; left: 50%; top: 50%; width: var(--content-width); height: calc(1440px / var(--product-hero-ratio)); margin: 0; transform: translate(-50%, -50%) scale(var(--product-stage-scale, 1)); transform-origin: center; display: grid; grid-template-columns: 38% 62%; align-items: center; }
.product-hero-copy { position: relative; z-index: 2; padding-right: calc(12 * var(--u)); }
/* 与首页平台名称保持同一设计字号、常规字重和字距，不引用加粗的密序 TSP 样式 */
.product-eyebrow { color: var(--body-ink); font-family: var(--font); display: flex; align-items: center; gap: calc(15 * var(--u)); min-height: calc(24 * var(--u)); font-size: calc(var(--type-eyebrow-size) * var(--u)); font-weight: 400; line-height: normal; letter-spacing: .04em; }
.product-eyebrow strong { font-size: calc(18 * var(--u)); font-weight: 700; }
.product-eyebrow span { flex: 0 0 1px; width: 1px; height: calc(20 * var(--u)); margin: 0; background: #343f7080; }
.product-hero h1 { margin-top: calc(var(--space-eyebrow-title) * var(--u)); color: #070f49; font-size: calc(var(--type-hero-size) * var(--u)); font-weight: 700; line-height: var(--type-title-line); letter-spacing: var(--type-title-tracking); }
.product-intro { margin-top: calc(var(--space-title-copy) * var(--u)); color: var(--body-ink); font-size: var(--section-subtitle); line-height: var(--type-copy-line); }
.intro-line { display: block; white-space: nowrap; }
.product-actions { display: flex; align-items: flex-start; margin-top: calc(var(--space-copy-action) * var(--u)); }
.product-consult { margin-top: 0; color: white; border: 1px solid #066a9e; background: linear-gradient(105deg, #006b9a, #033a63); box-shadow: inset 0 1px 2px #ffffff2a, 0 2px 8px #00233a15; }
.product-hero .product-consult { width: calc(129 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(21 * var(--u)); font-size: calc(14 * var(--u)); border-radius: calc(5 * var(--u)); margin-top: 0; }
.product-consult:hover { background: linear-gradient(105deg, #0579a9, #034773); box-shadow: inset 0 1px 2px #ffffff2a, 0 3px 16px #091f4e30; }

.engine-diagram { position: relative; left: var(--diagram-offset, 0px); width: 100%; justify-self: end; aspect-ratio: 640 / 440; outline-offset: 5px; }
.engine-diagram:focus-visible { outline: 2px solid #467eaa; border-radius: calc(6 * var(--u)); }
.engine-universe { position: absolute; inset: 0; }
.engine-network { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.foundation-orbit { pointer-events: none; }
.foundation-orbit-track { stroke: #bbecff; stroke-width: 1; opacity: .42; }
.foundation-orbit-flow { stroke: #64c7ee; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 150 850; animation: foundation-orbit-flow 12s linear infinite; filter: drop-shadow(0 0 3px #8de3ff88); }
.foundation-orbit-dot { fill: #ebfcff; stroke: #66c7ed; stroke-width: 1; filter: drop-shadow(0 0 3px #a6edff); }
@keyframes foundation-orbit-flow { to { stroke-dashoffset: -1000; } }
.engine-route { stroke: #4eabe4; stroke-width: 1.25; opacity: .44; transition: opacity 450ms ease, stroke 450ms ease; }
.engine-route .flow-line { stroke: #d8faff; stroke-width: 2.2; stroke-dasharray: 10 32; animation: network-flow 2.4s linear infinite; }
.engine-route.is-active { opacity: 1; stroke: #247dab; filter: drop-shadow(0 0 4px #80c4e1); }
.engine-route.is-active .flow-line { stroke: white; stroke-width: 3; animation-duration: 1.25s; }
.network-packet { fill: #68bedf; stroke: #fff; stroke-width: 1; }
.packet-return { fill: #2678ab; }
.engine-node { --orb-size: var(--engine-icon-size); position: absolute; z-index: 3; left: var(--node-x); top: var(--node-y); translate: -50% 0; width: 15.8%; height: calc(124 * var(--u)); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(13 * var(--u)) calc(4.5 * var(--u)); border: 1px solid #c4dae7; border-radius: calc(7 * var(--u)); background: linear-gradient(145deg, #fffffffc, #f0f8fff5); box-shadow: inset 0 1px 0 white, 0 7px 20px #07569520; color: #07395e; font-family: var(--font); transition: transform 500ms cubic-bezier(.16,1,.3,1), box-shadow 450ms ease, background 400ms ease, border-color 400ms ease; }
.engine-node-orb { filter: none; box-shadow: none; display: grid; place-items: center; width: var(--orb-size); height: var(--orb-size); flex-shrink: 0; animation: node-float 5.4s ease-in-out var(--node-delay) infinite; }
.engine-node-orb::before, .engine-node-orb::after { content: none; display: none; filter: none; box-shadow: none; }
.engine-icon { width: 100%; height: 100%; fill: none; stroke: none; stroke-linecap: round; stroke-linejoin: round; filter: none; box-shadow: none; }
.engine-name { max-width: 100%; color: #123f60; font-size: calc(var(--type-label-size) * var(--u)); font-weight: 700; line-height: normal; white-space: nowrap; }
.engine-node:hover, .engine-node.is-active { transform: translateY(-5px); border-color: var(--engine-panel-edge); background: var(--engine-panel-background); box-shadow: inset 0 1px 0 #d9faff77, inset 0 -8px 22px #082a6a77, 0 0 0 3px #b8efff1a, 0 0 22px #00b9ff40, 0 12px 26px #02578644; --engine-face-fill: url(#engine-face-light); --engine-depth-fill: url(#engine-depth-light); --engine-glass-fill: url(#engine-glass-light); --engine-cyan-fill: url(#engine-cyan-light); }
.engine-node:hover .engine-name, .engine-node.is-active .engine-name { color: white; }
.engine-node:focus-visible { outline: 2px solid #407ca7; outline-offset: 4px; }
.validation-core { position: absolute; z-index: 2; top: 53%; left: 50%; translate: -50% 0; width: 90%; height: 32%; }
.core-energy-ring { position: absolute; inset: -5px; border: 1px solid #a6eaff91; border-radius: calc(9 * var(--u)); border-top-color: #d0f8ff; border-bottom-color: #267cab; animation: foundation-breathe 4s ease-in-out infinite; box-shadow: 0 0 12px #37b6ff44; }
.core-sphere { position: absolute; inset: 0; display: grid; grid-template-columns: calc(72 * var(--u)) minmax(0, 1fr) max-content minmax(0, 1fr) calc(72 * var(--u)); grid-template-rows: minmax(0, 1fr) auto; align-items: center; justify-items: center; column-gap: 0; row-gap: calc(3 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--engine-panel-edge); border-radius: calc(7 * var(--u)); background: var(--engine-panel-background); box-shadow: inset 0 1px 0 #d9faff77, inset 0 -8px 22px #082a6a77, 0 0 0 4px #b8efff1a, 0 0 25px #00b9ff55, 0 13px 35px #02578644; }
.strategy-layer { position: relative; width: max-content; height: auto; grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); text-align: center; }
.strategy-layer h2 { margin: 0; color: #f4fcff; font-size: calc(var(--type-small-title-size) * var(--u)); font-weight: 700; line-height: 1.4; white-space: nowrap; }
.strategy-layer p { margin: 0; color: #bedfee; font-size: var(--section-subtitle); line-height: var(--type-copy-line); white-space: nowrap; }
.trust-mechanism { position: relative; min-width: 0; width: max-content; height: auto; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; text-align: center; }
.trust-mechanism:focus-visible { outline: 1px solid #b8eaff; outline-offset: calc(4 * var(--u)); border-radius: calc(3 * var(--u)); }
/* Span the side track plus its adjacent gap; inset the content to center it between the frame edge and divider */
.trust-left { grid-column: 1 / 3; width: 100%; padding-right: calc(50% - 24 * var(--u) + 1px); }
.trust-right { grid-column: 4 / 6; width: 100%; padding-left: calc(50% - 24 * var(--u) + 1px); }
.hub-separator { grid-row: 1; align-self: center; justify-self: center; width: 1px; height: calc(36 * var(--u)); background: linear-gradient(180deg, transparent, #b8dfef55, transparent); pointer-events: none; }
.hub-separator-left { grid-column: 2; }
.hub-separator-right { grid-column: 4; }
.trust-icon { width: var(--engine-icon-size); height: var(--engine-icon-size); flex-shrink: 0; filter: none; box-shadow: none; --engine-face-fill: url(#engine-face-light); --engine-depth-fill: url(#engine-depth-light); --engine-glass-fill: url(#engine-glass-light); --engine-cyan-fill: url(#engine-cyan-light); animation: none; }
.trust-mechanism h3 { margin: 0; color: white; font-size: calc(var(--type-label-size) * var(--u)); font-weight: 700; line-height: normal; white-space: nowrap; }
.system-values { position: relative; grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); color: #b8eaff; font-size: var(--section-subtitle); line-height: var(--type-copy-line); font-weight: 400; white-space: nowrap; }
.value-separator { color: #84b4ce; font-weight: 400; }
.core-description { position: absolute; z-index: 3; isolation: isolate; top: 88%; left: 0; right: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 2em; color: #ffffff; font-size: var(--section-subtitle); line-height: var(--type-copy-line); text-align: center; text-shadow: none; }
.core-description::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -50%; width: calc(320 * var(--u)); max-width: 94%; height: calc(32 * var(--u)); background: radial-gradient(ellipse, #073f69bd 0%, #073f69ad 42%, #073f695c 72%, transparent 100%); filter: blur(calc(6 * var(--u))); pointer-events: none; }
.core-description span { display: block; min-width: 0; text-align: right; }
.core-description span + span { text-align: left; }
.core-description::before { content: "·"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 1em; text-align: center; line-height: 1; }

.engine-diagram.is-paused *, .engine-diagram.is-paused *::before, .engine-diagram.is-paused *::after { animation-play-state: paused !important; }
@keyframes network-flow { to { stroke-dashoffset: -84; } }
@keyframes node-float { 50% { transform: translateY(-5px); } }
@keyframes foundation-breathe { 50% { opacity: .4; scale: 1.025; } }
@media (prefers-reduced-motion: reduce) {
  .engine-diagram *, .engine-diagram *::before, .engine-diagram *::after { animation: none !important; }
  .engine-universe { transform: none !important; }
}

/* 产品页新增页脚在窄屏保持版权文字均衡换行 */
@media (max-width: 700px) { .product-page .copyright { text-wrap: balance; } }