/* Solutions: choose a running mode, check the hardware, ask for a proposal. */
.solutions-page { --surface: #1c1c1e; --line: rgba(255,255,255,.09); --blue: #0a84ff; }
.solutions-page main h1, .solutions-page main h2, .solutions-page main h3 { font-family: "Noto Sans CJK SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; font-weight: 600; }
.solutions-page .button.blue { background: var(--blue); border-color: var(--blue); }
.solutions-page .button.blue:hover { background: #0071e3; }
.solutions-page .solution-hero { padding: 56px 0 32px; }
.solutions-page .solution-intro { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.solutions-page .solution-intro h1 { font-size: clamp(33px,3.7vw,53px); line-height: 1.2; }
.solutions-page .solution-intro .lead { max-width: 580px; font-size: 16px; line-height: 1.8; margin-top: 22px; color: var(--body); }
.solutions-page .compute-note { max-width: 620px; margin-top: 14px; font-size: 12px; line-height: 1.9; color: var(--muted); }
.compute-note a { color: var(--blue); }
.hero-scenarios { min-width: 0; margin: 0; }
.hero-scenario-media { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #172536; box-shadow: 0 14px 30px rgba(26, 55, 88, .1); }
.hero-scenario-slides { position: relative; aspect-ratio: 16 / 9; }
.hero-scenario-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.hero-scenario-slides img.is-active { opacity: 1; }
.hero-scenario-arrow { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.48); border-radius: 50%; background: rgba(12, 30, 50, .56); color: #fff; font-family: Arial, sans-serif; font-size: 28px; line-height: 1; transform: translateY(-50%); transition: background .2s, border-color .2s; }
.hero-scenario-arrow:hover { background: rgba(0, 102, 204, .9); border-color: #fff; }
.hero-scenario-prev { left: 14px; }
.hero-scenario-next { right: 14px; }
.hero-scenario-count { position: absolute; right: 16px; bottom: 14px; padding: 4px 8px; border-radius: 5px; background: rgba(12, 30, 50, .7); color: #fff; font-size: 11px; letter-spacing: .08em; }
.solution-directory { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding-block: 18px; border-top: 1px solid var(--line); }
.solution-directory a { display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: 14px; }
.solution-directory a:hover { color: var(--blue); }
.solution-directory a span { font-size: 11px; color: var(--muted); }
.solutions-page .section { padding-block: 64px; border: 0; }
.solutions-page .section-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 30px; }
.solutions-page .section-head .kicker { font-size: 12px; margin-bottom: 14px; }
.solutions-page .section-head h2 { font-size: clamp(26px,2.82vw,39px); line-height: 1.25; }
.solutions-page .section-head > p { font-size: 15px; line-height: 1.8; color: var(--body); margin: 0; }
.solutions-page .section-head > .text-link { flex-shrink: 0; font-size: 14px; }
.approach-section, .requirements-section { background: #0b0b0c; }
.solution-orientation { display: grid; grid-template-columns: minmax(0,1fr) minmax(170px,.34fr) auto; gap: 30px; align-items: center; padding: 20px 0; border-block: 1px solid var(--line); }
.orientation-copy h3 { font-size: 21px; line-height: 1.45; margin-top: 6px; }
.orientation-copy p { max-width: 700px; color: var(--body); font-size: 13px; line-height: 1.8; margin-top: 7px; }
.orientation-capacity { padding-left: 24px; border-left: 1px solid var(--line); }
.orientation-capacity span, .orientation-capacity small { display: block; color: var(--muted); font-size: 11px; line-height: 1.7; }
.orientation-capacity strong { display: block; color: var(--text); font-size: 24px; line-height: 1.3; margin: 3px 0; }
.orientation-capacity small { max-width: 190px; }
.orientation-link { color: var(--blue); font-size: 12px; white-space: nowrap; }
.baseline-route { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--body); font-size: 13px; }
.baseline-route strong { color: var(--text); font-weight: 600; }
.baseline-route i { color: var(--blue); font-style: normal; }
.baseline-route .baseline-status { padding: 5px 8px; background: var(--blue-surface); color: var(--blue); font-size: 11px; }
.baseline-route .text-link { margin-left: auto; font-size: 12px; white-space: nowrap; }
.decision-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.decision-path { min-width: 0; padding: 22px; border: 1px solid var(--line); border-top: 2px solid var(--blue); border-radius: 10px; background: var(--surface); }
.decision-heading { display: flex; align-items: flex-start; gap: 13px; }
.decision-number { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; background: var(--blue-surface); color: var(--blue); font-size: 11px; }
.decision-condition { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; }
.decision-heading h3 { font-size: 24px; line-height: 1.35; margin-top: 3px; }
.decision-visual { display: flex; align-items: center; gap: 7px; min-height: 92px; margin: 22px 0 16px; padding: 13px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.decision-visual > i, .decision-visual-cluster > i { flex: 0 0 auto; color: var(--blue); font-style: normal; }
.visual-node { display: grid; place-items: center; min-width: 66px; min-height: 39px; padding: 6px 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 11px; line-height: 1.35; text-align: center; }
.visual-node small { display: block; color: var(--muted); font-size: 10px; }
.visual-gateway { border-color: var(--blue-line); background: var(--blue-surface); color: var(--blue); }
.visual-pool { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); flex: 1 1 auto; gap: 6px; min-width: 0; }
.visual-more { min-width: 40px; color: var(--blue); }
.decision-visual-cluster { justify-content: space-between; }
.visual-cluster { flex: 1 1 auto; min-width: 0; padding: 8px; border: 1px solid var(--blue-line); background: var(--blue-surface); color: var(--blue); font-size: 11px; text-align: center; }
.visual-cluster > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-top: 7px; }
.visual-cluster > div span { padding: 6px 3px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--body); font-size: 10px; }
.decision-path > p { min-height: 50px; color: var(--body); font-size: 13px; line-height: 1.8; }
.decision-path > .text-link { display: inline-block; margin-top: 14px; font-size: 12px; }
.solution-cases { margin-top: 56px; }
.cases-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.6fr); gap: 30px; align-items: end; margin-bottom: 10px; }
.cases-heading h3 { font-size: 24px; line-height: 1.4; margin-top: 8px; }
.cases-heading p { color: var(--body); font-size: 13px; line-height: 1.8; margin: 0; }
.solution-case { padding: 24px 0 28px; border-top: 1px solid var(--line); }
.solution-case:last-child { border-bottom: 1px solid var(--line); }
.case-heading > span { color: var(--blue); font-size: 12px; }
.case-heading h3 { font-size: clamp(20px,2.1vw,27px); line-height: 1.4; margin-top: 7px; }
.case-layout { display: grid; grid-template-columns: minmax(135px,.48fr) minmax(0,1.65fr) minmax(220px,.7fr); gap: 24px; align-items: stretch; margin-top: 20px; }
.case-baseline { padding: 3px 18px 0 0; border-right: 1px solid var(--line); }
.case-label, .case-visual-title { display: block; color: var(--muted); font-size: 11px; line-height: 1.7; }
.case-stat { display: flex; align-items: baseline; gap: 7px; margin-top: 8px; }
.case-stat strong { color: var(--text); font-size: 32px; line-height: 1; font-weight: 600; }
.case-stat span { color: var(--body); font-size: 12px; }
.case-baseline p { color: var(--body); font-size: 12px; line-height: 1.7; margin-top: 13px; }
.case-visual { min-width: 0; padding: 14px; border: 1px solid var(--line); background: var(--panel); }
.topology-node { display: grid; place-items: center; min-height: 42px; padding: 5px 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 11px; line-height: 1.3; text-align: center; }
.topology-node b { font-weight: 600; }
.topology-node small { display: block; color: var(--muted); font-size: 10px; line-height: 1.4; }
.topology-entry { min-width: 42px; }
.topology-gateway { border-color: var(--blue-line); background: var(--blue-surface); color: var(--blue); white-space: nowrap; }
.case-topology, .cluster-topology { display: flex; align-items: center; gap: 7px; min-height: 78px; margin-top: 8px; }
.case-topology > i, .cluster-topology > i { flex: 0 0 auto; color: var(--blue); font-style: normal; }
.topology-pool { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); flex: 1 1 auto; gap: 6px; min-width: 0; }
.topology-more { border-style: dashed; color: var(--blue); }
.case-visual > p { color: var(--muted); font-size: 11px; line-height: 1.7; margin-top: 10px; }
.cluster-pool { display: grid; grid-template-columns: minmax(0,1fr) 42px minmax(0,1fr); align-items: center; flex: 1 1 auto; gap: 7px; min-width: 0; }
.cluster-group { min-width: 0; padding: 7px; border: 1px solid var(--blue-line); background: var(--blue-surface); text-align: center; }
.cluster-group > span { display: block; color: var(--blue); font-size: 10px; }
.cluster-group > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; margin-top: 6px; }
.cluster-group b { padding: 5px 2px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--body); font-size: 10px; font-weight: 500; }
.cluster-group small { display: block; color: var(--muted); font-size: 9px; line-height: 1.4; margin-top: 5px; }
.cluster-group-secondary { border-color: var(--line-strong); background: var(--surface); }
.cluster-group-secondary > span { color: var(--body); }
.cluster-expansion { display: grid; justify-items: center; gap: 2px; min-width: 0; color: var(--blue); text-align: center; }
.cluster-expansion strong { font-size: 22px; line-height: 1; font-weight: 400; }
.cluster-expansion small { font-size: 9px; line-height: 1.35; white-space: nowrap; }
.case-recommendation { padding: 3px 0 0 20px; border-left: 1px solid var(--line); }
.case-recommendation > strong { display: block; color: var(--text); font-size: 15px; line-height: 1.5; margin-top: 7px; }
.case-recommendation > p { color: var(--body); font-size: 12px; line-height: 1.8; margin-top: 9px; }
.case-recommendation .text-link { display: inline-block; margin-top: 12px; font-size: 12px; }
.solution-note, .configuration-note { color: var(--muted); font-size: 12px; line-height: 1.9; margin-top: 20px; }
.solutions-page .configurations { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.solutions-page .plan-card { display: flex; flex-direction: column; min-width: 0; padding: 25px; background: var(--surface); border: 0; border-radius: 20px; }
.plan-heading .eyebrow { color: var(--muted); font-size: 12px; }
.solutions-page .plan-heading h3 { font-size: 29px; line-height: 1.3; margin: 10px 0 20px; }
.configuration-diagram { display: block; width: 100%; height: auto; }
.accessory-shelf { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.solutions-page .accessory-shelf-title { margin: 0 0 12px; color: var(--muted); font-size: 11px; }
.solutions-page .accessory-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; list-style: none; padding: 0; margin: 0; }
.solutions-page .accessory-row-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.solutions-page .accessory-row-five { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
.solutions-page .accessory-row li { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; padding: 0; border: 0; }
.accessory-photo { display: flex; justify-content: center; align-items: center; width: 100%; height: 68px; margin-bottom: 8px; }
.accessory-photo img, .accessory-photo svg { display: block; width: 60px; max-width: 100%; height: 60px; object-fit: contain; }
.accessory-name { font-size: 11px; line-height: 1.7; color: var(--body); white-space: nowrap; }
.accessory-quantity { font-size: 11px; line-height: 1.7; color: var(--muted); margin-top: 4px; }
.solutions-page .plan-visual > p { min-height: 46px; margin: 18px 0; font-size: 12px; line-height: 1.9; color: var(--body); text-align: center; }
.solutions-page .plan-card .config-actions { display: flex; flex-wrap: wrap; gap: 0 16px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: auto; }
.solutions-page .config-actions .text-link { font-size: 12px; }
.switch-guide { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; margin-top: 20px; padding: 28px; background: var(--surface); border-radius: 20px; }
.switch-recommendation .eyebrow { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
.switch-recommendation h3 { font-size: 22px; line-height: 1.4; }
.switch-recommendation > p:not(.eyebrow) { margin: 8px 0 10px; font-size: 13px; color: var(--body); }
.switch-recommendation .text-link { font-size: 12px; }
.switch-requirements { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 0; }
.switch-requirements dt { font-size: 14px; font-weight: 500; }
.switch-requirements dd { margin: 8px 0 0; color: var(--body); font-size: 13px; line-height: 1.8; }
.switch-example { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.8; }
.requirements-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.requirement { padding: 20px 0; border-top: 1px solid var(--line); }
.requirement > span { font-size: 11px; color: var(--blue); }
.requirement h3 { font-size: 22px; line-height: 1.4; margin-top: 12px; }
.requirement p { color: var(--body); font-size: 14px; line-height: 1.8; margin-top: 10px; }
.preparation-actions { display: flex; align-items: center; justify-content: space-between; gap: 32px; background: var(--surface); padding: 28px 30px; margin-top: 20px; border-radius: 18px; }
.preparation-actions h3 { font-size: 24px; line-height: 1.4; }
.preparation-actions p { color: var(--body); font-size: 14px; line-height: 1.8; margin-top: 8px; }
.preparation-actions .actions { margin: 0; flex-shrink: 0; gap: 20px; }
.preparation-actions .text-link { font-size: 13px; }
.scenario-shortcuts { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; padding-top: 22px; font-size: 12px; color: var(--muted); }
.scenario-shortcuts a { display: inline-flex; align-items: center; min-height: 36px; color: var(--body); }
.scenario-shortcuts a:hover { color: var(--blue); }
.solutions-page :is(section,article,[id]) { scroll-margin-top: 80px; }
@media(max-width:1100px) {
  .solution-orientation { grid-template-columns: minmax(0,1fr) minmax(160px,.4fr); gap: 22px; }
  .orientation-link { grid-column: 1 / -1; justify-self: end; margin-top: -12px; }
  .decision-path { padding: 20px; }
  .decision-visual { flex-wrap: wrap; }
  .decision-visual > i { flex: 0 0 auto; }
  .visual-pool { flex-basis: 100%; }
  .case-layout { grid-template-columns: minmax(120px,.45fr) minmax(0,1.55fr) minmax(195px,.7fr); gap: 17px; }
  .case-topology, .cluster-topology { flex-wrap: wrap; }
  .topology-pool, .cluster-pool { flex-basis: 100%; }
  .solutions-page .plan-card { padding: 22px; }
  .solutions-page .plan-heading h3 { font-size: 26px; }
  .preparation-actions { align-items: start; flex-direction: column; gap: 20px; }
}
@media(max-width:900px) {
  .switch-guide { grid-template-columns: 1fr; gap: 24px; }
  .solutions-page .solution-intro { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; }
  .solutions-page .section-head { flex-direction: column; align-items: start; gap: 18px; }
  .decision-grid { grid-template-columns: 1fr; }
  .case-layout { grid-template-columns: minmax(130px,.45fr) minmax(0,1.55fr); }
  .case-recommendation { grid-column: 1 / -1; padding: 17px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .solutions-page .configurations { grid-template-columns: 1fr; }
  .solutions-page .plan-card { display: grid; grid-template-columns: .65fr 1.35fr; gap: 0 28px; }
  .solutions-page .plan-card .plan-heading { grid-column: 1; grid-row: 1; }
  .solutions-page .plan-card .plan-visual { grid-column: 2; grid-row: 1 / 3; }
  .solutions-page .plan-card .config-actions { grid-column: 1; grid-row: 2; align-self: end; }
  .requirements-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .switch-guide { padding: 24px 20px; }
  .switch-requirements { grid-template-columns: 1fr; gap: 16px; }
  .switch-requirements dd { margin-top: 4px; }
  .solutions-page .solution-hero { padding: 36px 0 24px; }
  .solutions-page .solution-intro { grid-template-columns: 1fr; gap: 24px; }
  .solutions-page .solution-intro .lead { font-size: 16px; margin-top: 18px; }
  .solution-directory { gap: 12px; padding-block: 10px; }
  .solution-directory a { font-size: 12px; gap: 6px; }
  .solution-directory a span { display: none; }
  .solutions-page .section { padding-block: 44px; }
  .solution-orientation { grid-template-columns: 1fr; gap: 14px; padding-block: 18px; }
  .orientation-capacity { padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .orientation-capacity small { max-width: none; }
  .orientation-link { grid-column: auto; justify-self: start; margin-top: 0; }
  .baseline-route { flex-wrap: wrap; gap: 8px 10px; }
  .baseline-route .text-link { flex-basis: 100%; margin-left: 0; margin-top: 3px; }
  .decision-path { padding: 18px; }
  .decision-heading h3 { font-size: 22px; }
  .decision-visual { margin-block: 18px 14px; }
  .cases-heading { grid-template-columns: 1fr; gap: 8px; }
  .solution-cases { margin-top: 44px; }
  .case-layout { grid-template-columns: 1fr; gap: 16px; }
  .case-baseline { display: flex; align-items: center; flex-wrap: wrap; gap: 0 18px; padding: 0 0 15px; border-right: 0; border-bottom: 1px solid var(--line); }
  .case-baseline .case-label { flex-basis: 100%; }
  .case-stat { margin-top: 7px; }
  .case-baseline p { width: 100%; margin-top: 7px; }
  .case-recommendation { padding-top: 16px; }
  .case-topology, .cluster-topology { align-items: stretch; }
  .topology-pool, .cluster-pool { width: 100%; }
  .cluster-pool { grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr); gap: 5px; }
  .solutions-page .plan-card { display: flex; padding: 24px 20px; gap: 0; }
  .solutions-page .plan-card .config-actions { width: 100%; align-self: stretch; }
  .solutions-page .plan-heading h3 { font-size: 28px; margin-bottom: 12px; }
  .requirement h3 { font-size: 19px; }
  .requirement p { font-size: 13px; }
  .requirements-grid { gap: 12px 20px; }
  .preparation-actions { padding: 24px 20px; }
  .preparation-actions h3 { font-size: 22px; }
  .preparation-actions .actions { flex-direction: column-reverse; align-items: stretch; width: 100%; gap: 10px; }
  .preparation-actions .text-link { text-align: center; }
  .scenario-shortcuts { gap: 4px 20px; }
  .scenario-shortcuts > span:first-child { flex-basis: 100%; }
}