/* 三版本展示，继承现有官网的白色基调、版心及文字层级 */
.versions-section { --version-lift: calc(-5 * var(--u)); --version-selected-lift: calc(-8 * var(--u)); position: relative; isolation: isolate; overflow: clip; padding: calc(48 * var(--u)) 0 calc(48 * var(--u)); border-top: 1px solid #edf3f7; background: #fff; font-family: var(--font); }
.versions-section::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(28deg, transparent 27%, #d7ebfa99 27%, #e4f3fc80 46%, transparent 46%); opacity: .42; pointer-events: none; }
.versions-section::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(154deg, transparent 78%, #ddf0fc99 78%, #edf8fe66 93%, transparent 93%); opacity: .32; pointer-events: none; }
.version-nowrap { display: inline-block; white-space: nowrap; }
.versions-inner { width: var(--content-width); margin: 0 auto; }
.versions-section .section-heading h2 { letter-spacing: 0; }
.versions-section .section-heading p { text-wrap: balance; max-width: 54em; margin-left: auto; margin-right: auto; }
.versions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14 * var(--u)); margin-top: var(--heading-content-gap); align-items: stretch; }
.version-card { cursor: pointer; --version-accent: #629fbd; --version-halo: #dceff9ad; --version-float-duration: 7.2s; --version-float-delay: -.6s; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: calc(320 * var(--u)); padding: calc(18 * var(--u)); border: 1px solid #d4e4ee; border-radius: calc(11 * var(--u)); background: radial-gradient(ellipse at 95% 0, var(--version-halo), transparent 54%), linear-gradient(154deg, #ffffff 24%, #f9fcff 77%, #ffffff); box-shadow: inset 0 1px 0 white, inset 0 0 0 1px #ffffff80, 0 2px 4px #123f5904, 0 calc(11 * var(--u)) calc(23 * var(--u)) calc(-15 * var(--u)) #1d567e24, 0 calc(26 * var(--u)) calc(43 * var(--u)) calc(-26 * var(--u)) #154b7130; transition: translate 750ms cubic-bezier(.16,1,.3,1), border-color 550ms ease, box-shadow 750ms cubic-bezier(.16,1,.3,1); }
.version-card::before { content: ""; position: absolute; z-index: 0; top: 0; left: calc(18 * var(--u)); right: calc(18 * var(--u)); height: max(2px, calc(2 * var(--u))); border-radius: 0 0 4px 4px; background: linear-gradient(90deg, transparent, var(--version-accent) 30%, #c6e4f3 70%, transparent); opacity: .7; pointer-events: none; }
.version-card--standard { --version-accent: #0c668b; --version-halo: #d5eaf8ad; --version-float-duration: 8s; --version-float-delay: -2.8s; }
.version-card:nth-child(3) { --version-accent: #3f7b9d; --version-halo: #d8e8f6b3; --version-float-duration: 8.8s; --version-float-delay: -5.4s; }
.version-card-top { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); min-height: calc(23 * var(--u)); }
.version-brand { color: #618098; font-size: calc(11 * var(--u)); line-height: 1.5; font-weight: 500; white-space: nowrap; letter-spacing: .015em; }
.version-benefits { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: calc(4 * var(--u)); }
.version-audience { display: inline-block; padding: calc(4 * var(--u)) calc(7 * var(--u)); border: 1px solid #d6e7f1; border-radius: calc(5 * var(--u)); background: linear-gradient(145deg, #fffffff2, #eef7fcde); box-shadow: inset 0 1px 0 white, 0 2px 4px #184c6f04; color: #5b7d94; font-size: calc(10 * var(--u)); line-height: 1.4; white-space: nowrap; transition: color 350ms ease, border-color 350ms ease, background 350ms ease; }
.version-name-row { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); min-height: calc(34 * var(--u)); }
.version-name { display: flex; align-items: center; flex-wrap: wrap; gap: calc(7 * var(--u)); min-width: 0; }
.version-name h3 { color: var(--blue-900); background: linear-gradient(110deg, #07567d, #032f52); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: calc(24 * var(--u)); font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.version-art-stage { position: absolute; z-index: -1; top: calc(-18 * var(--u)); right: calc(-22 * var(--u)); display: block; width: calc(140 * var(--u)); height: calc(140 * var(--u)); opacity: .11; pointer-events: none; transition: opacity 650ms ease; }
.version-art { display: block; width: 100%; height: 100%; fill: none; stroke: #397e9f; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: none; animation: version-icon-float var(--version-float-duration) ease-in-out var(--version-float-delay) infinite; animation-play-state: paused; }
.version-card.is-in-view .version-art { animation-play-state: running; }
.version-art .art-back { fill: url(#versions-icon-depth); stroke: #9ec7dc; }
.version-art .art-front { fill: url(#versions-icon-glass); stroke: #6ba4c1; }
.version-art .art-fill { fill: url(#versions-icon-accent); stroke: #0c5e86; }
.version-summary { min-height: 2lh; margin-top: calc(8 * var(--u)); color: var(--body-ink); font-size: var(--regulation-body-size); line-height: 1.7; font-weight: 400; text-wrap: pretty; }
.version-capabilities { position: relative; display: flex; flex: 1; margin-top: calc(12 * var(--u)); padding-top: calc(14 * var(--u)); border-top: 1px solid transparent; }
.version-capabilities::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, #bdd7e6, #dcecf5 68%, #e6f1f800); }
.version-features { display: flex; flex-direction: column; justify-content: flex-start; flex: 1; gap: calc(10 * var(--u)); padding: 0; margin: 0; list-style: none; }
.version-features li { display: flex; align-items: flex-start; gap: calc(9 * var(--u)); color: var(--body-ink); font-size: var(--regulation-body-size); line-height: 1.7; font-weight: 400; }
.version-feature-check { flex: 0 0 auto; width: 1.1em; height: 1.1em; margin-top: .3em; fill: none; stroke: #397f9f; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.version-card.is-selected .version-feature-check { stroke: #09638b; }
.version-features li > span { min-width: 0; }
.version-features .version-feature--cloud { color: #087d80; }
.version-feature--cloud > span { padding: 0 .4em; margin-left: -.4em; border-radius: .25em; background: linear-gradient(110deg, #dff3f0cc, #edf9f766); font-weight: 500; }
.version-card .version-feature--cloud .version-feature-check { stroke: #087d80; }
.version-features sup { position: relative; top: -.45em; font-size: .6em; line-height: 0; vertical-align: baseline; }
.version-action { display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); width: calc(112 * var(--u)); max-width: 100%; align-self: center; min-height: calc(34 * var(--u)); margin-top: calc(16 * var(--u)); padding: calc(7 * var(--u)) calc(10 * var(--u)); border: 1px solid #c5dce9; border-radius: calc(5 * var(--u)); background: linear-gradient(155deg, #ffffff, #f5faff); box-shadow: inset 0 1px 0 white, 0 calc(3 * var(--u)) calc(7 * var(--u)) calc(-4 * var(--u)) #154b711a; color: var(--blue-900); font-family: var(--font); font-size: var(--regulation-body-size); line-height: 1.5; font-weight: 500; text-align: left; transition: background 450ms ease, border-color 450ms ease, box-shadow 450ms ease; }
.version-action svg { flex-shrink: 0; width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: translate 400ms cubic-bezier(.16,1,.3,1); }
.version-card.is-selected .version-action { color: white; border-color: #15587b; background: linear-gradient(112deg, #09648c, #043b63); box-shadow: inset 0 1px 0 #ffffff29, 0 calc(5 * var(--u)) calc(11 * var(--u)) calc(-6 * var(--u)) #0b416e52; }
.version-action:hover { background: linear-gradient(155deg, #ffffff, #eaf5fc); border-color: #a5cadd; box-shadow: inset 0 1px 0 white, 0 calc(5 * var(--u)) calc(10 * var(--u)) calc(-5 * var(--u)) #154b7129; }
.version-card.is-selected .version-action:hover { background: linear-gradient(112deg, #0c7199, #07466c); border-color: #296e91; box-shadow: inset 0 1px 0 #ffffff33, 0 calc(6 * var(--u)) calc(13 * var(--u)) calc(-5 * var(--u)) #0b416e57; }
.version-action:hover svg { translate: 3px 0; }
.version-action:focus-visible { outline: 2px solid #4f99bd; outline-offset: 3px; }
.version-card .version-action:disabled,
.version-card.is-selected .version-action:disabled { justify-content: center; cursor: not-allowed; opacity: 1; color: #8a949d; border-color: #d6dde3; background: linear-gradient(145deg, #f3f5f7, #e9edf0); box-shadow: inset 0 1px 0 #ffffffb3; }
@media (hover: hover) and (pointer: fine) {
  .version-card:is(:hover, :focus-within) { translate: 0 var(--version-lift); border-color: #9fc7dc; box-shadow: inset 0 1px 0 white, inset 0 0 0 1px #ffffffb3, 0 2px 5px #123f5908, 0 calc(16 * var(--u)) calc(30 * var(--u)) calc(-16 * var(--u)) #1d567e33, 0 calc(32 * var(--u)) calc(52 * var(--u)) calc(-25 * var(--u)) #154b7138; }
}
.version-card.is-selected { z-index: 1; translate: 0 var(--version-selected-lift); border-color: #c4dce8; background: radial-gradient(ellipse at 100% 0, #e4f3facc, transparent 50%), linear-gradient(154deg, #ffffff 24%, #f9fcff 77%, #ffffff); box-shadow: inset 0 1px 0 white, 0 calc(6 * var(--u)) calc(12 * var(--u)) calc(-7 * var(--u)) #1a547e22, 0 calc(21 * var(--u)) calc(36 * var(--u)) calc(-17 * var(--u)) #17527633, 0 calc(39 * var(--u)) calc(60 * var(--u)) calc(-27 * var(--u)) #11466829; }
.version-card.is-selected::before { opacity: 0; }
.version-card.is-selected .version-audience { color: #f4fbff; border-color: #216488; background: linear-gradient(112deg, #0b638a, #043f6a); box-shadow: inset 0 1px 0 #ffffff29; }
.version-card.is-selected .version-brand { color: #3d6f8b; }
.version-card.is-selected .version-art-stage { opacity: .13; }
.version-edge-light { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; opacity: 0; transition: opacity 650ms ease; }
.version-card.is-selected .version-edge-light { opacity: 1; }
.version-edge-aura { stroke: #428eaf; stroke-width: calc(7 * var(--u)); opacity: .4; filter: blur(calc(3.2 * var(--u))); }
.version-edge-rim { stroke-width: calc(.85 * var(--u)); opacity: 1; }
.version-edge-flow { stroke-dasharray: .16 1.16; stroke-dashoffset: .16; stroke-linecap: round; opacity: 0; }
.version-edge-flow--halo { stroke: #4ba9d1; stroke-width: calc(3.8 * var(--u)); filter: blur(calc(1.8 * var(--u))); }
.version-edge-flow--core { stroke: #edfaff; stroke-width: calc(1.2 * var(--u)); }
.version-card.is-selected.is-in-view .version-edge-flow { animation: version-edge-travel 1000ms linear both; }
@keyframes version-edge-travel { 0% { stroke-dashoffset: .16; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }
.version-card:focus-visible { outline: 2px solid #2d779b; outline-offset: 4px; }
@keyframes version-icon-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-2 * var(--u))); } }
@media (max-width: 700px) {
  .versions-section { --version-selected-lift: -4px; padding: 40px 0 43px; }
  .versions-inner { width: calc(100% - 44px); }
  .versions-section .section-heading h2 { max-width: 14em; margin-left: auto; margin-right: auto; }
  .versions-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .version-card { min-height: 0; padding: 20px; border-radius: 11px; }
  .version-brand { font-size: 11px; }
  .version-audience { padding: 4px 7px; font-size: 10px; }
  .version-benefits { gap: 4px; }
  .version-name-row { margin-top: 6px; min-height: 35px; }
  .version-name h3 { font-size: 25px; }
  .version-art-stage { width: 130px; height: 130px; top: -16px; right: -18px; }
  .version-summary { min-height: 0; margin-top: 8px; }
  .version-capabilities { margin-top: 14px; padding-top: 14px; }
  .version-features { gap: 10px; }
  .version-action { min-height: 38px; margin-top: 16px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .version-card, .version-art-stage, .version-action, .version-action svg, .version-edge-light, .version-audience { transition: none; }
  .version-card:is(:hover, :focus-within), .version-card.is-selected, .version-action:hover svg { translate: none; }
  .version-art { animation: none; }
  .version-card.is-selected.is-in-view .version-edge-flow { animation: none; opacity: 0; }
}