.hx-sol01 {
  --hx-orange: #eb6120;
  --hx-ink: #17252d;
  --hx-dark: #22292e;
  --hx-muted: #617078;
  --hx-paper: #f4f6f7;
  --hx-line: #dfe5e8;
  --hx-blue: #00afec;
  width: 100%;
  overflow: hidden;
  color: var(--hx-ink);
  background: var(--hx-paper);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  line-height: 1.7;
}
.hx-sol01, .hx-sol01 * { box-sizing: border-box; }
.hx-sol01 a { color: inherit; text-decoration: none; }
.hx-sol01 img { display: block; max-width: 100%; }
.hx-sol01 p, .hx-sol01 h1, .hx-sol01 h2, .hx-sol01 h3, .hx-sol01 dl, .hx-sol01 figure { margin-top: 0; }
.hx-sol01__shell { width: min(1200px, calc(100% - 32px)); margin: 0 auto; }
.hx-sol01__section { position: relative; padding: clamp(88px, 9vw, 124px) 0; }
.hx-sol01__section--paper { background: #fff; }
.hx-sol01__section--light { background: #edf1f3; }
.hx-sol01__section-index { margin: 0 0 18px; color: var(--hx-orange); font: 600 12px/1.2 "DIN Alternate", "Bahnschrift", "Microsoft YaHei", sans-serif; letter-spacing: .16em; }

.hx-sol01__hero { position: relative; min-height: 760px; overflow: hidden; color: var(--hx-ink); background: #f3f6f7; }
.hx-sol01__hero::before { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(23,37,45,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(23,37,45,.035) 1px, transparent 1px); background-size: 56px 56px; content: ""; pointer-events: none; }
.hx-sol01__hero-image, .hx-sol01__hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-sol01__hero-image { object-fit: cover; object-position: 64% center; }
.hx-sol01__hero-shade { background: linear-gradient(90deg, rgba(246,248,249,.99) 0%, rgba(246,248,249,.96) 34%, rgba(246,248,249,.62) 55%, rgba(246,248,249,.08) 80%), linear-gradient(0deg, rgba(246,248,249,.2), rgba(246,248,249,.2)); }
.hx-sol01__hero-content { position: relative; z-index: 2; padding-top: clamp(174px, 22vh, 230px); padding-bottom: 120px; }
.hx-sol01__eyebrow { margin: 0 0 20px; color: var(--hx-orange); font: 600 13px/1.2 "DIN Alternate", "Bahnschrift", "Microsoft YaHei", sans-serif; letter-spacing: .16em; }
.hx-sol01__hero h1 { max-width: 720px; margin: 0; color: var(--hx-ink); font: 600 clamp(58px, 6vw, 86px)/1.06 "DIN Alternate", "Bahnschrift", "Microsoft YaHei", sans-serif; letter-spacing: -.055em; }
.hx-sol01__hero-lead { max-width: 610px; margin: 30px 0 0; color: var(--hx-muted); font-size: 18px; line-height: 1.9; }
.hx-sol01__primary-link { display: inline-flex; align-items: center; justify-content: space-between; min-width: 218px; padding: 14px 18px; margin-top: 36px; border: 1px solid var(--hx-orange); color: var(--hx-orange) !important; background: rgba(255,255,255,.78); font-size: 14px; transition: color .2s ease, background-color .2s ease; }
.hx-sol01__primary-link:hover, .hx-sol01__primary-link:focus-visible { color: #fff !important; background: var(--hx-orange); outline: none; }
.hx-sol01__primary-link span { margin-left: 36px; }

.hx-sol01__heading { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .62fr); gap: 70px; align-items: end; margin-bottom: 58px; }
.hx-sol01__heading > h2, .hx-sol01__heading > div { grid-column: 1; }
.hx-sol01__heading h2 { margin: 0; color: inherit; font: 600 clamp(40px, 4.4vw, 62px)/1.1 "DIN Alternate", "Bahnschrift", "Microsoft YaHei", sans-serif; letter-spacing: -.045em; }
.hx-sol01__heading > p:last-child { grid-column: 2; margin: 0 0 5px; color: var(--hx-muted); font-size: 16px; line-height: 1.9; }
.hx-sol01__heading > .hx-sol01__section-index { grid-column: 1 / -1; margin-bottom: -52px; align-self: start; }
.hx-sol01__heading--split { grid-template-columns: minmax(0, 1.05fr) minmax(280px, .62fr); }

.hx-sol01__section--architecture { overflow: hidden; background: #f4f6f7; }
.hx-sol01__section--architecture::before { position: absolute; inset: 0; background: radial-gradient(circle at 90% 8%, rgba(0,175,236,.09), transparent 24%), radial-gradient(circle at 8% 92%, rgba(235,97,32,.08), transparent 26%); content: ""; pointer-events: none; }
.hx-sol01__section--architecture .hx-sol01__shell { position: relative; }
.hx-sol01__section--architecture .hx-sol01__heading { grid-template-columns: minmax(0, 1.2fr) minmax(270px, .5fr); }
.hx-sol01__section--architecture .hx-sol01__heading h2 { font-size: clamp(40px, 3.8vw, 54px); }
.hx-sol01__architecture-map { border-top: 1px solid var(--hx-line); color: var(--hx-ink); background: #fff; box-shadow: 0 22px 60px rgba(23,37,45,.08); }
.hx-sol01__tier { display: grid; grid-template-columns: 210px 1fr; min-height: 270px; border-right: 1px solid var(--hx-line); border-bottom: 1px solid var(--hx-line); border-left: 1px solid var(--hx-line); }
.hx-sol01__tier-mark { position: relative; display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; padding: 36px 34px; overflow: hidden; border-right: 1px solid var(--hx-line); background: #edf1f3; }
.hx-sol01__tier-mark::after { position: absolute; right: 0; bottom: 0; width: 5px; height: 42%; background: var(--hx-orange); content: ""; }
.hx-sol01__tier:nth-child(2) .hx-sol01__tier-mark::after { height: 58%; background: var(--hx-blue); }
.hx-sol01__tier-mark b { color: var(--hx-orange); font: 600 78px/.9 "Microsoft YaHei", sans-serif; letter-spacing: -.08em; }
.hx-sol01__tier:nth-child(2) .hx-sol01__tier-mark b { color: var(--hx-ink); }
.hx-sol01__tier-mark span { color: var(--hx-muted); font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.hx-sol01__tier-content, .hx-sol01__front-devices { padding: 38px 42px 42px; background: #fff; }
.hx-sol01__tier-banner { padding: 0 0 22px; border-bottom: 1px solid var(--hx-line); color: var(--hx-ink); background: transparent; font: 600 24px/1.35 "DIN Alternate", "Bahnschrift", "Microsoft YaHei", sans-serif; letter-spacing: -.02em; text-align: left; }
.hx-sol01__capabilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 26px; background: var(--hx-line); }
.hx-sol01__capabilities article { min-height: 154px; padding: 24px; background: #f7f9fa; }
.hx-sol01__capabilities h3 { margin: 0 0 18px; color: var(--hx-ink); font-size: 17px; font-weight: 600; }
.hx-sol01__capabilities article div { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.hx-sol01__capabilities span { position: relative; padding-left: 12px; color: var(--hx-muted); font-size: 12px; }
.hx-sol01__capabilities span::before { position: absolute; top: .7em; left: 0; width: 4px; height: 4px; background: var(--hx-orange); content: ""; }
.hx-sol01__tier--stable { min-height: 248px; }
.hx-sol01__stable-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 38px 42px; background: var(--hx-line); }
.hx-sol01__stable-stack p { display: flex; align-items: flex-start; flex-direction: column; gap: 24px; min-width: 0; margin: 0; padding: 28px; background: #fff; }
.hx-sol01__stable-stack i { color: var(--hx-orange); font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.hx-sol01__stable-stack strong { color: var(--hx-ink); font-size: 16px; font-weight: 600; line-height: 1.8; text-align: left; }
.hx-sol01__device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 26px; background: var(--hx-line); }
.hx-sol01__device-grid figure { display: grid; grid-template-rows: 220px auto; min-width: 0; margin: 0; overflow: hidden; background: #f7f9fa; }
.hx-sol01__device-grid img { width: 100%; height: 220px; padding: 28px; object-fit: contain; }
.hx-sol01__device-grid figcaption { display: flex; align-items: center; min-height: 58px; padding: 16px 20px; border-top: 1px solid var(--hx-line); color: var(--hx-ink); background: #fff; font-size: 14px; font-weight: 600; }
.hx-sol01__device-grid .hx-sol01__device--label { grid-template-rows: auto; }
.hx-sol01__device--label::before { display: none; content: none; }
.hx-sol01__device-note { margin: 15px 0 0; color: var(--hx-muted); font-size: 11px; text-align: right; }

.hx-sol01__section--light::before { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 13%, rgba(23,37,45,.045) 13% 13.06%, transparent 13.06% 100%); content: ""; pointer-events: none; }
.hx-sol01__section--light .hx-sol01__shell { position: relative; }
.hx-sol01__scene-grid { display: grid; gap: 28px; }
.hx-sol01__scene { position: relative; display: grid; grid-template-columns: 1.06fr .94fr; min-height: 470px; overflow: hidden; border: 1px solid var(--hx-line); color: var(--hx-ink); background: #fff; box-shadow: 0 18px 50px rgba(23,37,45,.07); }
.hx-sol01__scene-media { position: relative; grid-row: 1; grid-column: 1; min-height: 470px; overflow: hidden; background: radial-gradient(circle at 24% 80%, rgba(235,97,32,.1), transparent 28%), linear-gradient(rgba(23,37,45,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(23,37,45,.04) 1px, transparent 1px), #edf1f3; background-size: auto, 56px 56px, 56px 56px, auto; }
.hx-sol01__scene-media::after { position: absolute; right: 8%; bottom: 16%; left: 8%; height: 1px; background: linear-gradient(90deg, #aab7bc 0 58%, var(--hx-orange) 58% 76%, #aab7bc 76%); content: ""; }
.hx-sol01__scene-media img { width: 100%; height: 100%; object-fit: cover; }
.hx-sol01__scene-shade { display: none; }
.hx-sol01__scene-number { position: absolute; top: 30px; left: 30px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(23,37,45,.26); color: var(--hx-orange); background: rgba(255,255,255,.82); font: 600 11px/1 "DIN Alternate", "Bahnschrift", sans-serif; }
.hx-sol01__scene-body { position: relative; z-index: 1; grid-row: 1; grid-column: 2; align-self: center; padding: 54px 58px; }
.hx-sol01__scene-tag { margin: 0; color: var(--hx-orange); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.hx-sol01__scene h3 { margin: 15px 0 18px; color: var(--hx-ink); font: 600 clamp(32px, 3.2vw, 46px)/1.1 "DIN Alternate", "Bahnschrift", "Microsoft YaHei", sans-serif; letter-spacing: -.04em; }
.hx-sol01__scene-fit { margin: 0; color: var(--hx-muted); font-size: 14px; line-height: 1.8; }
.hx-sol01__scene dl { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 20px 0; margin: 26px 0 0; border-top: 1px solid var(--hx-line); border-bottom: 1px solid var(--hx-line); }
.hx-sol01__scene dt { color: var(--hx-orange); font-size: 11px; font-weight: 600; }
.hx-sol01__scene dd { margin: 0; color: var(--hx-muted); font-size: 13px; line-height: 1.75; }
.hx-sol01__scene-value { margin: 20px 0 0; color: var(--hx-ink); font-size: 14px; font-weight: 600; line-height: 1.8; }
.hx-sol01__scene:nth-child(even) { grid-template-columns: .94fr 1.06fr; }
.hx-sol01__scene:nth-child(even) .hx-sol01__scene-media { grid-column: 2; }
.hx-sol01__scene:nth-child(even) .hx-sol01__scene-body { grid-column: 1; }
.hx-sol01__scene:nth-child(even) .hx-sol01__scene-number { right: 30px; left: auto; }

/* SOL-04 keeps wide source artwork intact; the uncovered bands inherit the product-detail technology field. */
.hx-sol01--sol04 .hx-sol01__scene-media { display: grid; place-items: center; background: radial-gradient(circle at 12% 86%, rgba(235,97,32,.08), transparent 27%), linear-gradient(90deg, transparent 0 14%, rgba(41,61,70,.045) 14% 14.08%, transparent 14.08% 100%), linear-gradient(rgba(23,37,45,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(23,37,45,.035) 1px, transparent 1px), #edf1f3; background-size: auto, auto, 56px 56px, 56px 56px, auto; }
.hx-sol01--sol04 .hx-sol01__scene-media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center; }

.hx-sol01__product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hx-line); border: 1px solid var(--hx-line); }
.hx-sol01__product { display: block; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.hx-sol01__product:hover, .hx-sol01__product:focus-visible { position: relative; z-index: 2; transform: translateY(-5px); box-shadow: 0 22px 52px rgba(23,37,45,.15); outline: none; }
.hx-sol01__product-image { position: relative; display: flex; align-items: center; justify-content: center; height: 320px; padding: 36px; overflow: hidden; background: radial-gradient(circle at 50% 72%, rgba(0,175,236,.08), transparent 30%), #edf1f3; }
.hx-sol01__product-image::after { position: absolute; right: 9%; bottom: 24px; left: 9%; height: 1px; background: linear-gradient(90deg, #aab7bc 0 64%, var(--hx-orange) 64% 82%, #aab7bc 82%); content: ""; }
.hx-sol01__product-image img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.hx-sol01__product-copy { min-height: 258px; padding: 32px; border-top: 1px solid var(--hx-line); }
.hx-sol01__product-copy small { color: var(--hx-orange); font: 600 10px/1.2 "DIN Alternate", "Bahnschrift", sans-serif; letter-spacing: .14em; }
.hx-sol01__product-copy h3 { min-height: 62px; margin: 15px 0 12px; color: var(--hx-ink); font: 600 24px/1.3 "DIN Alternate", "Bahnschrift", "Microsoft YaHei", sans-serif; letter-spacing: -.025em; }
.hx-sol01__product-copy p { min-height: 50px; margin: 0; color: var(--hx-muted); font-size: 13px; line-height: 1.75; }
.hx-sol01__product-copy span { display: flex; justify-content: space-between; padding-top: 18px; margin-top: 24px; border-top: 1px solid var(--hx-line); font-size: 12px; font-weight: 600; }
.hx-sol01__product-copy b { color: var(--hx-orange); font-weight: 400; }
.hx-sol01__product-grid--single { grid-template-columns: minmax(0, 430px); border: 0; background: transparent; }
.hx-sol01--sol02 .hx-sol01__hero-image { object-position: center; }
.hx-sol01--sol03 .hx-sol01__hero-image { object-position: center; }
.hx-sol01--sol04 .hx-sol01__hero-image { object-position: center; transform: translateX(24%); }

/* SOL-02: a responsive parking journey, replacing the former industry-combination cards. */
.hx-sol01--sol02 .hx-sol02__journey { position: relative; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 20px; isolation: isolate; }
.hx-sol01--sol02 .hx-sol02__journey::before { position: absolute; top: 123px; right: 6%; left: 6%; z-index: -1; height: calc(100% - 246px); border: 1px solid rgba(235,97,32,.28); border-right-width: 3px; border-left-width: 3px; content: ""; }
.hx-sol01--sol02 .hx-sol02__journey-step { position: relative; min-width: 0; min-height: 248px; padding: 32px 30px 28px; overflow: hidden; border: 1px solid var(--hx-line); background: rgba(255,255,255,.98); box-shadow: 0 16px 38px rgba(23,37,45,.065); }
.hx-sol01--sol02 .hx-sol02__journey-step:nth-of-type(1) { grid-row: 1; grid-column: 1 / span 4; }
.hx-sol01--sol02 .hx-sol02__journey-step:nth-of-type(2) { grid-row: 1; grid-column: 5 / span 4; }
.hx-sol01--sol02 .hx-sol02__journey-step:nth-of-type(3) { grid-row: 1; grid-column: 9 / span 4; }
.hx-sol01--sol02 .hx-sol02__journey-step:nth-of-type(4) { grid-row: 2; grid-column: 1 / span 12; }
.hx-sol01--sol02 .hx-sol02__journey-step:nth-of-type(5) { grid-row: 3; grid-column: 9 / span 4; }
.hx-sol01--sol02 .hx-sol02__journey-step:nth-of-type(6) { grid-row: 3; grid-column: 5 / span 4; }
.hx-sol01--sol02 .hx-sol02__journey-step:nth-of-type(7) { grid-row: 3; grid-column: 1 / span 4; }
.hx-sol01--sol02 .hx-sol02__journey-step > b, .hx-sol01--sol02 .hx-sol02__journey-feature-copy > b { position: absolute; top: 20px; right: 22px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(235,97,32,.32); color: var(--hx-orange); background: #fff; font: 600 10px/1 "DIN Alternate","Bahnschrift",sans-serif; }
.hx-sol01--sol02 .hx-sol02__journey-step > div:not(.hx-sol02__journey-feature-copy) { min-width: 0; }
.hx-sol01--sol02 .hx-sol02__journey-step span { color: var(--hx-orange); font-size: 10px; font-weight: 600; letter-spacing: .12em; }
.hx-sol01--sol02 .hx-sol02__journey-step h3 { margin: 8px 0 12px; color: var(--hx-ink); font: 600 25px/1.24 "DIN Alternate","Bahnschrift","Microsoft YaHei",sans-serif; letter-spacing: -.025em; }
.hx-sol01--sol02 .hx-sol02__journey-step p { margin: 0; color: var(--hx-muted); font-size: 13px; line-height: 1.8; }
.hx-sol01--sol02 .hx-sol02__journey-step > i { position: relative; display: block; width: 64px; height: 64px; margin-bottom: 24px; color: var(--hx-orange); }
.hx-sol01--sol02 .hx-sol02__journey-step--phone > i { width: 36px; border: 2px solid #748188; border-radius: 8px; background: linear-gradient(150deg,#fff 0 54%,rgba(0,175,236,.12) 54%); box-shadow: inset 0 -8px 0 #edf1f3; }
.hx-sol01--sol02 .hx-sol02__journey-step--phone > i::after { position: absolute; bottom: 3px; left: 50%; width: 8px; height: 2px; background: #748188; content: ""; transform: translateX(-50%); }
.hx-sol01--sol02 .hx-sol02__journey-step--route > i { border: 2px solid #748188; background: linear-gradient(135deg,transparent 0 42%,rgba(0,175,236,.16) 42% 58%,transparent 58%); }
.hx-sol01--sol02 .hx-sol02__journey-step--route > i::before { position: absolute; top: 9px; left: 9px; width: 10px; height: 10px; border: 4px solid var(--hx-orange); border-radius: 50% 50% 50% 0; content: ""; transform: rotate(-45deg); }
.hx-sol01--sol02 .hx-sol02__journey-step--route > i::after { position: absolute; right: 8px; bottom: 9px; width: 28px; height: 19px; border-top: 2px dashed var(--hx-orange); border-right: 2px dashed var(--hx-orange); content: ""; }
.hx-sol01--sol02 .hx-sol02__journey-step--parking > i { border: 2px solid #748188; border-radius: 50%; }
.hx-sol01--sol02 .hx-sol02__journey-step--parking > i::before { position: absolute; inset: 8px; display: grid; place-items: center; color: var(--hx-orange); content: "P"; font: 600 28px/1 "DIN Alternate","Bahnschrift",sans-serif; }
.hx-sol01--sol02 .hx-sol02__journey-step--search > i { width: 54px; height: 54px; border: 4px solid var(--hx-orange); border-radius: 50%; }
.hx-sol01--sol02 .hx-sol02__journey-step--search > i::after { position: absolute; right: -13px; bottom: -8px; width: 24px; height: 4px; background: var(--hx-orange); content: ""; transform: rotate(45deg); }
.hx-sol01--sol02 .hx-sol02__journey-step--payment > i { height: 46px; margin-top: 9px; border: 2px solid #748188; border-radius: 5px; background: linear-gradient(#fff 0 28%,var(--hx-orange) 28% 42%,#fff 42%); }
.hx-sol01--sol02 .hx-sol02__journey-step--payment > i::after { position: absolute; right: 9px; bottom: 8px; width: 18px; height: 3px; background: #748188; content: ""; }
.hx-sol01--sol02 .hx-sol02__journey-step--exit > i { width: 62px; height: 52px; border: 2px solid #748188; border-left: 0; }
.hx-sol01--sol02 .hx-sol02__journey-step--exit > i::before { position: absolute; top: 23px; left: -10px; width: 54px; height: 3px; background: var(--hx-orange); content: ""; }
.hx-sol01--sol02 .hx-sol02__journey-step--exit > i::after { position: absolute; top: 16px; right: 12px; width: 14px; height: 14px; border-top: 3px solid var(--hx-orange); border-right: 3px solid var(--hx-orange); content: ""; transform: rotate(45deg); }
.hx-sol01--sol02 .hx-sol02__journey-step--feature { min-height: 350px; padding: 0; color: #fff; background: #17252d; }
.hx-sol01--sol02 .hx-sol02__journey-step--feature::after { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(15,27,34,.96) 0%,rgba(15,27,34,.86) 38%,rgba(15,27,34,.3) 68%,rgba(15,27,34,.08) 100%); content: ""; }
.hx-sol01--sol02 .hx-sol02__journey-step--feature img { width: 100%; height: 350px; object-fit: cover; object-position: center 54%; filter: saturate(.78) contrast(1.04); }
.hx-sol01--sol02 .hx-sol02__journey-feature-copy { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; display: flex; justify-content: center; flex-direction: column; width: min(610px,58%); padding: 54px 62px; }
.hx-sol01--sol02 .hx-sol02__journey-feature-copy > b { top: 28px; right: auto; left: 62px; border-color: rgba(255,255,255,.42); color: #fff; background: rgba(15,27,34,.45); }
.hx-sol01--sol02 .hx-sol02__journey-feature-copy span { margin-top: 42px; color: #72d6f7; }
.hx-sol01--sol02 .hx-sol02__journey-feature-copy h3 { color: #fff; font-size: clamp(34px,3vw,46px); }
.hx-sol01--sol02 .hx-sol02__journey-feature-copy p { max-width: 530px; color: rgba(255,255,255,.76); font-size: 14px; }
.hx-sol01--sol02 .hx-sol02__journey-feature-copy ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 22px 0 0; list-style: none; }
.hx-sol01--sol02 .hx-sol02__journey-feature-copy li { padding: 7px 12px; border: 1px solid rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.06); font-size: 11px; }
.hx-sol01--sol02 .hx-sol02__journey-note { max-width: 780px; margin: 24px 0 0 auto; color: var(--hx-muted); font-size: 11px; line-height: 1.75; text-align: right; }

@media (max-width: 1100px) {
  .hx-sol01--sol02 .hx-sol02__journey { gap: 14px; }
  .hx-sol01--sol02 .hx-sol02__journey-step { min-height: 256px; padding: 28px 22px 24px; }
  .hx-sol01--sol02 .hx-sol02__journey-step--feature { min-height: 330px; padding: 0; }
  .hx-sol01--sol02 .hx-sol02__journey-step--feature img { height: 330px; }
  .hx-sol01--sol02 .hx-sol02__journey-feature-copy { padding: 48px; }
  .hx-sol01--sol02 .hx-sol02__journey-feature-copy > b { left: 48px; }
}

@media (max-width: 760px) {
  .hx-sol01--sol02 .hx-sol02__journey { grid-template-columns: 1fr; gap: 14px; padding-left: 24px; }
  .hx-sol01--sol02 .hx-sol02__journey::before { top: 0; right: auto; bottom: 0; left: 9px; width: 2px; height: auto; border: 0; background: linear-gradient(var(--hx-orange),rgba(0,175,236,.5)); }
  .hx-sol01--sol02 .hx-sol02__journey-step:nth-of-type(n) { grid-row: auto; grid-column: 1; }
  .hx-sol01--sol02 .hx-sol02__journey-step { display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 18px; align-items: start; min-height: 0; padding: 24px 20px 24px 18px; overflow: visible; }
  .hx-sol01--sol02 .hx-sol02__journey-step > b, .hx-sol01--sol02 .hx-sol02__journey-feature-copy > b { top: 24px; right: auto; left: -36px; z-index: 2; width: 30px; height: 30px; border-color: var(--hx-orange); background: #fff; }
  .hx-sol01--sol02 .hx-sol02__journey-step > i { align-self: center; justify-self: center; margin: 4px 0 0; transform: scale(.78); transform-origin: top center; }
  .hx-sol01--sol02 .hx-sol02__journey-step h3 { font-size: 22px; }
  .hx-sol01--sol02 .hx-sol02__journey-step--feature { display: block; padding: 0; overflow: hidden; }
  .hx-sol01--sol02 .hx-sol02__journey-step--feature img { height: 190px; }
  .hx-sol01--sol02 .hx-sol02__journey-step--feature::after { background: linear-gradient(0deg,rgba(15,27,34,.95) 0%,rgba(15,27,34,.25) 100%); }
  .hx-sol01--sol02 .hx-sol02__journey-feature-copy { position: relative; width: auto; padding: 26px 20px 28px; background: #17252d; }
  .hx-sol01--sol02 .hx-sol02__journey-feature-copy > b { top: -174px; left: -36px; color: var(--hx-orange); }
  .hx-sol01--sol02 .hx-sol02__journey-feature-copy span { margin-top: 0; }
  .hx-sol01--sol02 .hx-sol02__journey-feature-copy h3 { margin-top: 7px; font-size: 28px; }
  .hx-sol01--sol02 .hx-sol02__journey-feature-copy p { font-size: 13px; }
  .hx-sol01--sol02 .hx-sol02__journey-note { margin-top: 20px; text-align: left; }
}

/* SOL-03: responsive network topology based on the approved architecture reference. */
.hx-sol01--sol03 .hx-sol03__topology { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--hx-line); color: var(--hx-ink); background: #fff; box-shadow: 0 24px 70px rgba(23,37,45,.1); }
.hx-sol01--sol03 .hx-sol03__topology::before { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(23,37,45,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(23,37,45,.028) 1px, transparent 1px); background-size: 40px 40px; content: ""; }
.hx-sol01--sol03 .hx-sol03__topology-head { display: flex; align-items: center; justify-content: space-between; gap: 36px; min-height: 210px; padding: 34px 52px 34px 74px; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,247,248,.94)); }
.hx-sol01--sol03 .hx-sol03__platform { display: flex; align-items: center; gap: 30px; }
.hx-sol01--sol03 .hx-sol03__platform > div:last-child { display: flex; align-items: flex-start; flex-direction: column; }
.hx-sol01--sol03 .hx-sol03__platform span, .hx-sol01--sol03 .hx-sol03__network-node span, .hx-sol01--sol03 .hx-sol03__lane span, .hx-sol01--sol03 .hx-sol03__endpoint figcaption span { color: var(--hx-orange); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.hx-sol01--sol03 .hx-sol03__platform strong { margin-top: 6px; font: 600 25px/1.35 "DIN Alternate", "Bahnschrift", "Microsoft YaHei", sans-serif; }
.hx-sol01--sol03 .hx-sol03__platform small, .hx-sol01--sol03 .hx-sol03__network-node small, .hx-sol01--sol03 .hx-sol03__lane small { margin-top: 8px; color: var(--hx-muted); font-size: 12px; }
.hx-sol01--sol03 .hx-sol03__platform-visual { position: relative; width: 172px; height: 104px; flex: 0 0 auto; }
.hx-sol01--sol03 .hx-sol03__platform-visual i { position: absolute; width: 44px; height: 50px; border: 2px solid var(--hx-orange); background: #fff; box-shadow: 0 7px 0 rgba(0,175,236,.16), 0 13px 0 rgba(0,175,236,.08); transform: skewY(24deg) rotate(-10deg); }
.hx-sol01--sol03 .hx-sol03__platform-visual i::after { position: absolute; right: 8px; bottom: 9px; left: 8px; height: 2px; background: var(--hx-orange); box-shadow: 0 -8px 0 rgba(235,97,32,.55), 0 -16px 0 rgba(235,97,32,.32); content: ""; }
.hx-sol01--sol03 .hx-sol03__platform-visual i:nth-child(1) { top: 22px; left: 0; }
.hx-sol01--sol03 .hx-sol03__platform-visual i:nth-child(2) { top: 0; right: 0; }
.hx-sol01--sol03 .hx-sol03__platform-visual i:nth-child(3) { right: 10px; bottom: 0; }
.hx-sol01--sol03 .hx-sol03__platform-visual b { position: absolute; top: 13px; left: 57px; width: 68px; height: 52px; border: 2px solid var(--hx-orange); background: linear-gradient(145deg, #fff 0 66%, #f3d2c2 66%); transform: skewY(24deg) rotate(-10deg); }
.hx-sol01--sol03 .hx-sol03__platform-visual b::after { position: absolute; right: -8px; bottom: -12px; left: 6px; height: 10px; border: 2px solid var(--hx-orange); background: #fff; content: ""; }
.hx-sol01--sol03 .hx-sol03__legend { display: grid; gap: 11px; min-width: 136px; }
.hx-sol01--sol03 .hx-sol03__legend span { display: grid; grid-template-columns: 58px auto; gap: 12px; align-items: center; color: var(--hx-muted); font-size: 12px; }
.hx-sol01--sol03 .hx-sol03__line { display: block; height: 2px; }
.hx-sol01--sol03 .hx-sol03__line--fiber { background: var(--hx-orange); }
.hx-sol01--sol03 .hx-sol03__line--cable { background: repeating-linear-gradient(90deg, #7b878d 0 6px, transparent 6px 10px); }
.hx-sol01--sol03 .hx-sol03__line--wireless { background: repeating-linear-gradient(90deg, var(--hx-orange) 0 4px, transparent 4px 8px); }
.hx-sol01--sol03 .hx-sol03__layer { display: grid; grid-template-columns: 136px minmax(0, 1fr); border-bottom: 1px solid var(--hx-line); }
.hx-sol01--sol03 .hx-sol03__layer:last-child { border-bottom: 0; }
.hx-sol01--sol03 .hx-sol03__layer > header { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 28px 18px; border-right: 1px solid var(--hx-line); background: rgba(237,241,243,.92); text-align: center; }
.hx-sol01--sol03 .hx-sol03__layer > header::after { position: absolute; top: 25%; right: -1px; width: 4px; height: 50%; background: var(--hx-orange); content: ""; }
.hx-sol01--sol03 .hx-sol03__layer--communication > header::after { background: var(--hx-blue); }
.hx-sol01--sol03 .hx-sol03__layer > header span { color: var(--hx-ink); font-size: 19px; font-weight: 600; letter-spacing: .08em; }
.hx-sol01--sol03 .hx-sol03__layer-body { position: relative; min-width: 0; padding: 34px 38px; background: rgba(255,255,255,.9); }
.hx-sol01--sol03 .hx-sol03__business-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; }
.hx-sol01--sol03 .hx-sol03__middleware-node { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 228px; padding: 28px 20px; background: #f7f9fa; text-align: center; }
.hx-sol01--sol03 .hx-sol03__middleware-node::before { position: absolute; top: -35px; left: 50%; width: 2px; height: 34px; background: var(--hx-orange); content: ""; }
.hx-sol01--sol03 .hx-sol03__middleware-node > span { margin-top: 18px; color: var(--hx-orange); font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.hx-sol01--sol03 .hx-sol03__middleware-node > strong { margin-top: 5px; font-size: 19px; }
.hx-sol01--sol03 .hx-sol03__middleware-node > small { margin-top: 7px; color: var(--hx-muted); font-size: 11px; }
.hx-sol01--sol03 .hx-sol03__server-icon { position: relative; width: 48px; height: 72px; border: 2px solid #7d8a90; background: #fff; }
.hx-sol01--sol03 .hx-sol03__server-icon::before { position: absolute; top: 13px; left: 50%; width: 10px; height: 10px; border: 2px solid #9aa5aa; border-radius: 50%; content: ""; transform: translateX(-50%); }
.hx-sol01--sol03 .hx-sol03__server-icon i { display: block; width: 26px; height: 2px; margin: 43px auto -36px; background: #9aa5aa; }
.hx-sol01--sol03 .hx-sol03__service-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hx-sol01--sol03 .hx-sol03__service-matrix article { padding: 24px; border-top: 3px solid var(--hx-orange); background: #edf1f3; }
.hx-sol01--sol03 .hx-sol03__service-matrix h3 { margin: 0 0 18px; font-size: 17px; font-weight: 600; }
.hx-sol01--sol03 .hx-sol03__service-matrix article > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hx-sol01--sol03 .hx-sol03__service-matrix span { padding: 9px 10px; border: 1px solid rgba(235,97,32,.24); color: var(--hx-muted); background: #fff; font-size: 11px; }
.hx-sol01--sol03 .hx-sol03__network-core { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; }
.hx-sol01--sol03 .hx-sol03__network-node { position: relative; display: grid; grid-template-columns: 120px 1fr; grid-template-rows: repeat(3, auto); align-content: center; min-height: 190px; padding: 26px; background: #f8fafb; }
.hx-sol01--sol03 .hx-sol03__network-node > div { grid-row: 1 / 4; align-self: center; justify-self: center; }
.hx-sol01--sol03 .hx-sol03__network-node strong { margin-top: 4px; font-size: 18px; }
.hx-sol01--sol03 .hx-sol03__network-node--switch::before, .hx-sol01--sol03 .hx-sol03__network-node--mobile::before { position: absolute; top: -35px; left: 50%; width: 2px; height: 34px; content: ""; }
.hx-sol01--sol03 .hx-sol03__network-node--switch::before { background: var(--hx-orange); }
.hx-sol01--sol03 .hx-sol03__network-node--mobile::before { background: repeating-linear-gradient(0deg, var(--hx-orange) 0 4px, transparent 4px 8px); }
.hx-sol01--sol03 .hx-sol03__network-node--switch::after, .hx-sol01--sol03 .hx-sol03__network-node--mobile::after { position: absolute; bottom: -35px; left: 50%; width: 1px; height: 34px; content: ""; }
.hx-sol01--sol03 .hx-sol03__network-node--switch::after { background: repeating-linear-gradient(0deg, #7b878d 0 6px, transparent 6px 10px); }
.hx-sol01--sol03 .hx-sol03__network-node--mobile::after { background: repeating-linear-gradient(0deg, var(--hx-orange) 0 4px, transparent 4px 8px); }
.hx-sol01--sol03 .hx-sol03__switch-icon { display: flex; align-items: center; justify-content: center; gap: 5px; width: 86px; height: 44px; border: 2px solid #66747b; background: linear-gradient(#e7ecee, #cbd4d8); box-shadow: 0 10px 18px rgba(23,37,45,.14); transform: perspective(80px) rotateX(7deg); }
.hx-sol01--sol03 .hx-sol03__switch-icon i { width: 10px; height: 9px; border: 2px solid #607078; background: #17252d; }
.hx-sol01--sol03 .hx-sol03__mast-icon { position: relative; width: 72px; height: 78px; border-bottom: 2px solid var(--hx-orange); }
.hx-sol01--sol03 .hx-sol03__mast-icon::before, .hx-sol01--sol03 .hx-sol03__mast-icon::after { position: absolute; top: 0; left: 50%; border: 2px solid var(--hx-orange); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; content: ""; transform: translateX(-50%); }
.hx-sol01--sol03 .hx-sol03__mast-icon::before { width: 54px; height: 34px; }
.hx-sol01--sol03 .hx-sol03__mast-icon::after { top: 8px; width: 34px; height: 22px; }
.hx-sol01--sol03 .hx-sol03__mast-icon i { position: absolute; bottom: 0; left: 50%; width: 4px; height: 56px; background: var(--hx-orange); transform: translateX(-50%); }
.hx-sol01--sol03 .hx-sol03__mast-icon i::after { position: absolute; bottom: 4px; left: 50%; width: 38px; height: 38px; border-right: 4px solid var(--hx-orange); border-bottom: 4px solid var(--hx-orange); content: ""; transform: translateX(-50%) rotate(45deg); }
.hx-sol01--sol03 .hx-sol03__network-lanes { display: grid; grid-template-columns: 1.35fr .65fr; gap: 22px; }
.hx-sol01--sol03 .hx-sol03__lane { position: relative; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; min-height: 128px; padding: 24px 28px 24px 76px; border: 1px solid var(--hx-line); background: #fff; }
.hx-sol01--sol03 .hx-sol03__lane::before { position: absolute; top: 50%; left: 26px; width: 30px; height: 2px; content: ""; }
.hx-sol01--sol03 .hx-sol03__lane--wired::before { background: repeating-linear-gradient(90deg, #7b878d 0 6px, transparent 6px 10px); }
.hx-sol01--sol03 .hx-sol03__lane--wireless::before { background: repeating-linear-gradient(90deg, var(--hx-orange) 0 4px, transparent 4px 8px); }
.hx-sol01--sol03 .hx-sol03__lane strong { margin-top: 4px; font-size: 17px; }
.hx-sol01--sol03 .hx-sol03__endpoint-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding-top: 26px; background: var(--hx-line); }
.hx-sol01--sol03 .hx-sol03__endpoint-grid::before { position: absolute; top: 0; right: 12.5%; left: 12.5%; height: 1px; background: linear-gradient(90deg, #7b878d 0 66%, transparent 66% 68%, var(--hx-orange) 68%); content: ""; }
.hx-sol01--sol03 .hx-sol03__endpoint { position: relative; display: grid; grid-template-rows: 170px auto; min-width: 0; margin: 0; background: #f7f9fa; }
.hx-sol01--sol03 .hx-sol03__endpoint::before { position: absolute; top: -26px; left: 50%; width: 1px; height: 26px; content: ""; }
.hx-sol01--sol03 .hx-sol03__endpoint--wired::before { background: repeating-linear-gradient(0deg, #7b878d 0 6px, transparent 6px 10px); }
.hx-sol01--sol03 .hx-sol03__endpoint--wireless::before { background: repeating-linear-gradient(0deg, var(--hx-orange) 0 4px, transparent 4px 8px); }
.hx-sol01--sol03 .hx-sol03__endpoint > div { display: grid; place-items: center; min-width: 0; padding: 20px; }
.hx-sol01--sol03 .hx-sol03__endpoint img { width: 100%; height: 130px; object-fit: contain; }
.hx-sol01--sol03 .hx-sol03__endpoint figcaption { display: flex; align-items: flex-start; flex-direction: column; min-height: 78px; padding: 15px 16px; border-top: 1px solid var(--hx-line); background: #fff; }
.hx-sol01--sol03 .hx-sol03__endpoint figcaption strong { margin-top: 5px; font-size: 13px; line-height: 1.55; }
.hx-sol01--sol03 .hx-sol03__endpoint--schematic > div > i { position: relative; display: block; width: 25px; height: 100px; border: 2px solid #8b979c; border-radius: 12px 12px 5px 5px; background: linear-gradient(#eef2f3 0 30%, #fff 30%); box-shadow: 0 8px 14px rgba(23,37,45,.12); }
.hx-sol01--sol03 .hx-sol03__endpoint--schematic > div > i::before { position: absolute; top: 9px; left: 50%; width: 10px; height: 16px; border-radius: 5px; background: #66747b; content: ""; transform: translateX(-50%); }
.hx-sol01--sol03 .hx-sol03__endpoint--schematic > div > i::after { position: absolute; bottom: -15px; left: 50%; width: 40px; height: 2px; background: #8b979c; content: ""; transform: translateX(-50%); }
.hx-sol01--sol03 .hx-sol03__topology-note { margin: 18px 0 0; color: var(--hx-muted); font-size: 11px; line-height: 1.7; text-align: right; }

@media (max-width: 1000px) {
  .hx-sol01__heading, .hx-sol01__heading--split { grid-template-columns: 1fr; gap: 24px; }
  .hx-sol01__section--architecture .hx-sol01__heading { grid-template-columns: 1fr; }
  .hx-sol01__heading > p:last-child { grid-column: 1; }
  .hx-sol01__heading > .hx-sol01__section-index { margin-bottom: -4px; }
  .hx-sol01__tier { grid-template-columns: 150px 1fr; }
  .hx-sol01__tier-mark { padding: 30px 26px; }
  .hx-sol01__stable-stack { grid-template-columns: 1fr; }
  .hx-sol01__scene, .hx-sol01__scene:nth-child(even) { grid-template-columns: 1fr 1fr; }
  .hx-sol01__scene-body { padding: 42px 36px; }
  .hx-sol01__product-grid { grid-template-columns: 1fr; }
  .hx-sol01__product-grid--single { grid-template-columns: minmax(0, 430px); }
  .hx-sol01__product { display: grid; grid-template-columns: .9fr 1.1fr; }
  .hx-sol01__product-copy { min-height: 0; }
  .hx-sol01--sol03 .hx-sol03__topology-head { padding-left: 48px; }
  .hx-sol01--sol03 .hx-sol03__business-body { grid-template-columns: 220px minmax(0, 1fr); }
  .hx-sol01--sol03 .hx-sol03__service-matrix span { padding: 8px; }
  .hx-sol01--sol03 .hx-sol03__network-node { grid-template-columns: 94px 1fr; padding: 22px 18px; }
}

@media (max-width: 700px) {
  .hx-sol01__hero { min-height: 700px; }
  .hx-sol01__hero-image { object-position: 68% center; }
  .hx-sol01--sol04 .hx-sol01__hero-image { object-position: 25% center; transform: none; }
  .hx-sol01__hero-shade { background: linear-gradient(0deg, rgba(246,248,249,.99) 0%, rgba(246,248,249,.94) 48%, rgba(246,248,249,.32) 100%); }
  .hx-sol01__hero-content { display: flex; justify-content: flex-end; flex-direction: column; min-height: 700px; padding-top: 250px; padding-bottom: 64px; }
  .hx-sol01__hero h1 { font-size: clamp(42px, 12vw, 52px); line-height: 1.1; }
  .hx-sol01__hero-lead { margin-top: 20px; font-size: 15px; line-height: 1.75; }
  .hx-sol01__primary-link { margin-top: 26px; }
  .hx-sol01__section { padding: 76px 0; }
  .hx-sol01__heading { margin-bottom: 38px; }
  .hx-sol01__heading h2 { font-size: 34px; line-height: 1.14; }
  .hx-sol01__section--architecture .hx-sol01__heading h2 { font-size: 34px; }
  .hx-sol01__heading > p:last-child { font-size: 14px; line-height: 1.8; }
  .hx-sol01__tier { grid-template-columns: 1fr; min-height: 0; }
  .hx-sol01__tier-mark { align-items: center; flex-direction: row; padding: 22px 24px; border-right: 0; border-bottom: 1px solid var(--hx-line); }
  .hx-sol01__tier-mark::after { right: auto; bottom: 0; left: 0; width: 42%; height: 4px; }
  .hx-sol01__tier:nth-child(2) .hx-sol01__tier-mark::after { width: 58%; height: 4px; }
  .hx-sol01__tier-mark b { font-size: 48px; }
  .hx-sol01__tier-content, .hx-sol01__front-devices { padding: 26px 20px 28px; }
  .hx-sol01__tier-banner { padding-bottom: 18px; font-size: 20px; }
  .hx-sol01__capabilities { grid-template-columns: 1fr; margin-top: 20px; }
  .hx-sol01__capabilities article { min-height: 0; padding: 20px; }
  .hx-sol01__stable-stack { padding: 20px; }
  .hx-sol01__stable-stack p { gap: 12px; padding: 20px; }
  .hx-sol01__device-grid { grid-template-columns: 1fr; margin-top: 20px; }
  .hx-sol01__device-grid figure { grid-template-columns: 1fr 124px; grid-template-rows: 124px; }
  .hx-sol01__device-grid .hx-sol01__device--label { display: block; }
  .hx-sol01__device-grid img { height: 124px; padding: 16px; }
  .hx-sol01__device-grid figcaption { min-height: 124px; border-top: 0; border-left: 1px solid var(--hx-line); font-size: 13px; }
  .hx-sol01__device-grid .hx-sol01__device--label figcaption { min-height: 58px; border-top: 1px solid var(--hx-line); border-left: 0; }
  .hx-sol01__device-note { text-align: left; }
  .hx-sol01__scene, .hx-sol01__scene:nth-child(even) { display: flex; min-height: 0; flex-direction: column; }
  .hx-sol01__scene-media, .hx-sol01__scene:nth-child(even) .hx-sol01__scene-media { order: 0; min-height: 260px; }
  .hx-sol01__scene-number, .hx-sol01__scene:nth-child(even) .hx-sol01__scene-number { top: 20px; right: auto; left: 20px; }
  .hx-sol01__scene-body, .hx-sol01__scene:nth-child(even) .hx-sol01__scene-body { order: 1; padding: 32px 24px 36px; }
  .hx-sol01__scene h3 { font-size: 32px; }
  .hx-sol01__scene dl { grid-template-columns: 1fr; gap: 6px; }
  .hx-sol01__product { display: block; }
  .hx-sol01__product-grid--single { grid-template-columns: 1fr; }
  .hx-sol01__product-image { height: 270px; }
  .hx-sol01__product-copy { padding: 26px 24px 30px; }
  .hx-sol01__product-copy h3, .hx-sol01__product-copy p { min-height: 0; }
  .hx-sol01--sol03 .hx-sol03__topology-head { display: block; min-height: 0; padding: 30px 22px; }
  .hx-sol01--sol03 .hx-sol03__platform { align-items: flex-start; gap: 14px; }
  .hx-sol01--sol03 .hx-sol03__platform-visual { width: 112px; height: 82px; transform: scale(.72); transform-origin: top left; margin-right: -28px; }
  .hx-sol01--sol03 .hx-sol03__platform strong { font-size: 19px; }
  .hx-sol01--sol03 .hx-sol03__legend { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
  .hx-sol01--sol03 .hx-sol03__legend span { display: flex; align-items: flex-start; flex-direction: column; gap: 7px; font-size: 10px; }
  .hx-sol01--sol03 .hx-sol03__legend .hx-sol03__line { width: 100%; }
  .hx-sol01--sol03 .hx-sol03__layer { grid-template-columns: 1fr; }
  .hx-sol01--sol03 .hx-sol03__layer > header { align-items: center; min-height: 62px; padding: 12px 20px; border-right: 0; border-bottom: 1px solid var(--hx-line); }
  .hx-sol01--sol03 .hx-sol03__layer > header::after { top: auto; right: auto; bottom: -1px; left: 0; width: 42%; height: 4px !important; }
  .hx-sol01--sol03 .hx-sol03__layer > header span { font-size: 18px; }
  .hx-sol01--sol03 .hx-sol03__layer-body { padding: 26px 18px; }
  .hx-sol01--sol03 .hx-sol03__business-body, .hx-sol01--sol03 .hx-sol03__network-core, .hx-sol01--sol03 .hx-sol03__network-lanes { grid-template-columns: 1fr; }
  .hx-sol01--sol03 .hx-sol03__middleware-node { min-height: 190px; }
  .hx-sol01--sol03 .hx-sol03__middleware-node::before, .hx-sol01--sol03 .hx-sol03__network-node--switch::before, .hx-sol01--sol03 .hx-sol03__network-node--mobile::before { top: -27px; height: 26px; }
  .hx-sol01--sol03 .hx-sol03__network-node--switch::after, .hx-sol01--sol03 .hx-sol03__network-node--mobile::after { display: none; }
  .hx-sol01--sol03 .hx-sol03__service-matrix { grid-template-columns: 1fr; }
  .hx-sol01--sol03 .hx-sol03__service-matrix article > div { grid-template-columns: repeat(2, 1fr); }
  .hx-sol01--sol03 .hx-sol03__network-node { grid-template-columns: 92px 1fr; min-height: 150px; }
  .hx-sol01--sol03 .hx-sol03__lane { min-height: 118px; }
  .hx-sol01--sol03 .hx-sol03__endpoint-grid { grid-template-columns: 1fr; gap: 12px; padding: 24px 0 0; background: transparent; }
  .hx-sol01--sol03 .hx-sol03__endpoint-grid::before { top: 0; right: auto; bottom: 0; left: 26px; width: 1px; height: auto; background: #7b878d; }
  .hx-sol01--sol03 .hx-sol03__endpoint { grid-template-columns: 106px minmax(0, 1fr); grid-template-rows: 116px; margin-left: 18px; border: 1px solid var(--hx-line); }
  .hx-sol01--sol03 .hx-sol03__endpoint::before { top: 50%; left: -18px; width: 18px; height: 1px; }
  .hx-sol01--sol03 .hx-sol03__endpoint--wired::before { background: repeating-linear-gradient(90deg, #7b878d 0 6px, transparent 6px 10px); }
  .hx-sol01--sol03 .hx-sol03__endpoint--wireless::before { background: repeating-linear-gradient(90deg, var(--hx-orange) 0 4px, transparent 4px 8px); }
  .hx-sol01--sol03 .hx-sol03__endpoint > div { padding: 10px; }
  .hx-sol01--sol03 .hx-sol03__endpoint img { height: 92px; }
  .hx-sol01--sol03 .hx-sol03__endpoint figcaption { justify-content: center; min-height: 0; border-top: 0; border-left: 1px solid var(--hx-line); }
  .hx-sol01--sol03 .hx-sol03__endpoint--schematic > div > i { height: 72px; }
  .hx-sol01--sol03 .hx-sol03__topology-note { text-align: left; }
}

@media (max-width: 390px) {
  .hx-sol01__shell { width: calc(100% - 28px); }
  .hx-sol01__hero h1 { font-size: 40px; }
  .hx-sol01__device-grid figure { grid-template-columns: 1fr 112px; grid-template-rows: 112px; }
  .hx-sol01__device-grid img, .hx-sol01__device-grid figcaption { height: 112px; min-height: 112px; }
  .hx-sol01__device-grid .hx-sol01__device--label figcaption { height: auto; min-height: 58px; }
  .hx-sol01__scene-media, .hx-sol01__scene:nth-child(even) .hx-sol01__scene-media { min-height: 230px; }
}

/* SOL-02 parking guidance and vehicle search topology */
.hx-sol01--sol02 .hx-sol02__topology { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--hx-line); color: var(--hx-ink); background: #fff; box-shadow: 0 24px 70px rgba(23,37,45,.1); }
.hx-sol01--sol02 .hx-sol02__topology::before { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(23,37,45,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(23,37,45,.026) 1px, transparent 1px); background-size: 40px 40px; content: ""; }
.hx-sol01--sol02 .hx-sol02__layer { display: grid; grid-template-columns: 148px minmax(0, 1fr); border-bottom: 1px solid var(--hx-line); }
.hx-sol01--sol02 .hx-sol02__layer:last-child { border-bottom: 0; }
.hx-sol01--sol02 .hx-sol02__layer > header { position: relative; display: flex; align-items: center; justify-content: center; padding: 28px 20px; border-right: 1px solid var(--hx-line); background: rgba(237,241,243,.94); text-align: center; }
.hx-sol01--sol02 .hx-sol02__layer > header::after { position: absolute; top: 25%; right: -1px; width: 4px; height: 50%; background: var(--hx-orange); content: ""; }
.hx-sol01--sol02 .hx-sol02__layer--communication > header::after { background: var(--hx-blue); }
.hx-sol01--sol02 .hx-sol02__layer > header span { color: var(--hx-ink); font-size: 18px; font-weight: 600; line-height: 1.45; letter-spacing: .06em; }
.hx-sol01--sol02 .hx-sol02__layer-body { position: relative; min-width: 0; padding: 34px 38px; background: rgba(255,255,255,.92); }
.hx-sol01--sol02 .hx-sol02__platform-body { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 34px; align-items: center; min-height: 220px; }
.hx-sol01--sol02 .hx-sol02__platform { display: flex; align-items: center; gap: 22px; }
.hx-sol01--sol02 .hx-sol02__platform > div:last-child { display: flex; align-items: flex-start; flex-direction: column; }
.hx-sol01--sol02 .hx-sol02__platform span, .hx-sol01--sol02 .hx-sol02__application span, .hx-sol01--sol02 .hx-sol02__communication span, .hx-sol01--sol02 .hx-sol02__device-grid figcaption span { color: var(--hx-orange); font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.hx-sol01--sol02 .hx-sol02__platform strong { margin-top: 6px; font: 600 23px/1.35 "DIN Alternate", "Bahnschrift", "Microsoft YaHei", sans-serif; }
.hx-sol01--sol02 .hx-sol02__platform small, .hx-sol01--sol02 .hx-sol02__application small, .hx-sol01--sol02 .hx-sol02__communication small { margin-top: 7px; color: var(--hx-muted); font-size: 11px; line-height: 1.65; }
.hx-sol01--sol02 .hx-sol02__capability-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.hx-sol01--sol02 .hx-sol02__capability-grid span { display: grid; place-items: center; min-height: 54px; padding: 9px; border: 1px solid rgba(235,97,32,.26); color: var(--hx-ink); background: #f7f9fa; font-size: 11px; text-align: center; }
.hx-sol01--sol02 .hx-sol02__application-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.hx-sol01--sol02 .hx-sol02__application { position: relative; display: grid; grid-template-columns: 88px minmax(0,1fr); align-items: center; min-height: 154px; padding: 22px; background: #f7f9fa; }
.hx-sol01--sol02 .hx-sol02__application::before { position: absolute; top: -35px; left: 50%; width: 2px; height: 34px; background: var(--hx-orange); content: ""; }
.hx-sol01--sol02 .hx-sol02__application > div, .hx-sol01--sol02 .hx-sol02__communication > div { display: flex; align-items: flex-start; flex-direction: column; }
.hx-sol01--sol02 .hx-sol02__application strong, .hx-sol01--sol02 .hx-sol02__communication strong { margin-top: 4px; font-size: 16px; }
.hx-sol01--sol02 .hx-sol02__application > i { position: relative; display: block; justify-self: center; width: 50px; height: 62px; border: 2px solid #75838a; background: #fff; }
.hx-sol01--sol02 .hx-sol02__application--manager > i { width: 66px; height: 44px; border-width: 2px 2px 8px; }
.hx-sol01--sol02 .hx-sol02__application--manager > i::after { position: absolute; bottom: -18px; left: 50%; width: 42px; height: 2px; background: #75838a; box-shadow: 0 -8px 0 -1px #75838a; content: ""; transform: translateX(-50%); }
.hx-sol01--sol02 .hx-sol02__application--mobile > i { width: 32px; border-radius: 7px; }
.hx-sol01--sol02 .hx-sol02__application--mobile > i::after { position: absolute; bottom: 5px; left: 50%; width: 8px; height: 2px; background: #75838a; content: ""; transform: translateX(-50%); }
.hx-sol01--sol02 .hx-sol02__application--search > i { width: 46px; height: 54px; border-radius: 2px 2px 10px 10px; transform: perspective(70px) rotateX(-3deg); }
.hx-sol01--sol02 .hx-sol02__communication-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.hx-sol01--sol02 .hx-sol02__communication { position: relative; display: grid; grid-template-columns: 92px minmax(0,1fr); align-items: center; min-height: 150px; padding: 22px; background: #f7f9fa; }
.hx-sol01--sol02 .hx-sol02__communication::before { position: absolute; top: -35px; left: 50%; width: 2px; height: 34px; background: var(--hx-orange); content: ""; }
.hx-sol01--sol02 .hx-sol02__communication--network::before { background: repeating-linear-gradient(0deg,#7b878d 0 6px,transparent 6px 10px); }
.hx-sol01--sol02 .hx-sol02__communication--position::before { background: repeating-linear-gradient(0deg,var(--hx-orange) 0 4px,transparent 4px 8px); }
.hx-sol01--sol02 .hx-sol02__communication > i { position: relative; display: block; justify-self: center; width: 62px; height: 56px; }
.hx-sol01--sol02 .hx-sol02__communication--server > i { border: 2px solid #66747b; background: repeating-linear-gradient(0deg,#dce3e6 0 9px,#8d999f 9px 11px); box-shadow: 0 9px 16px rgba(23,37,45,.14); }
.hx-sol01--sol02 .hx-sol02__communication--network > i { border: 4px solid var(--hx-orange); border-radius: 50%; }
.hx-sol01--sol02 .hx-sol02__communication--network > i::before, .hx-sol01--sol02 .hx-sol02__communication--network > i::after { position: absolute; inset: 10px -5px; border: 2px solid var(--hx-orange); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; content: ""; }
.hx-sol01--sol02 .hx-sol02__communication--network > i::after { inset: 24px -7px auto; height: 2px; border: 0; background: var(--hx-orange); }
.hx-sol01--sol02 .hx-sol02__communication--position > i::before { position: absolute; top: 5px; left: 24px; width: 12px; height: 46px; border: 4px solid var(--hx-orange); border-top-color: transparent; border-bottom-color: transparent; content: ""; transform: skew(-24deg); }
.hx-sol01--sol02 .hx-sol02__device-grid { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; padding-top: 26px; background: var(--hx-line); }
.hx-sol01--sol02 .hx-sol02__device-grid::before { position: absolute; top: 0; right: 12.5%; left: 12.5%; height: 1px; background: repeating-linear-gradient(90deg,#7b878d 0 8px,transparent 8px 12px); content: ""; }
.hx-sol01--sol02 .hx-sol02__device-grid figure { position: relative; display: grid; grid-template-rows: 160px auto; min-width: 0; margin: 0; background: #f7f9fa; }
.hx-sol01--sol02 .hx-sol02__device-grid figure::before { position: absolute; top: -26px; left: 50%; width: 1px; height: 26px; background: repeating-linear-gradient(0deg,#7b878d 0 6px,transparent 6px 10px); content: ""; }
.hx-sol01--sol02 .hx-sol02__device-grid figure > div { display: grid; place-items: center; min-width: 0; padding: 20px; }
.hx-sol01--sol02 .hx-sol02__device-grid img { width: 100%; height: 118px; object-fit: contain; }
.hx-sol01--sol02 .hx-sol02__device-grid figcaption { display: flex; align-items: flex-start; flex-direction: column; min-height: 80px; padding: 15px; border-top: 1px solid var(--hx-line); background: #fff; }
.hx-sol01--sol02 .hx-sol02__device-grid figcaption strong { margin-top: 5px; font-size: 13px; line-height: 1.55; }
.hx-sol01--sol02 .hx-sol02__device--panorama i { position: relative; width: 72px; height: 72px; border: 3px solid #7d8a90; border-radius: 50%; }
.hx-sol01--sol02 .hx-sol02__device--panorama i::before { position: absolute; inset: 14px; border: 5px solid var(--hx-orange); border-radius: 50%; content: ""; }
.hx-sol01--sol02 .hx-sol02__device--panorama i::after { position: absolute; right: -15px; bottom: 5px; left: -15px; height: 2px; background: #7d8a90; content: ""; }
.hx-sol01--sol02 .hx-sol02__device--external i { position: relative; width: 76px; height: 50px; border: 2px solid #7d8a90; background: #fff; }
.hx-sol01--sol02 .hx-sol02__device--external i::after { position: absolute; bottom: -14px; left: 50%; width: 38px; height: 2px; background: #7d8a90; box-shadow: 0 -8px 0 -1px #7d8a90; content: ""; transform: translateX(-50%); }
.hx-sol01--sol02 .hx-sol02__topology-note { margin: 18px 0 0; color: var(--hx-muted); font-size: 11px; line-height: 1.7; text-align: right; }

@media (max-width: 1100px) {
  .hx-sol01--sol02 .hx-sol02__platform-body { grid-template-columns: 280px minmax(0,1fr); }
  .hx-sol01--sol02 .hx-sol02__capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hx-sol01--sol02 .hx-sol02__application, .hx-sol01--sol02 .hx-sol02__communication { grid-template-columns: 70px minmax(0,1fr); padding: 18px 14px; }
}

@media (max-width: 760px) {
  .hx-sol01--sol02 .hx-sol02__layer { grid-template-columns: 1fr; }
  .hx-sol01--sol02 .hx-sol02__layer > header { min-height: 62px; padding: 12px 20px; border-right: 0; border-bottom: 1px solid var(--hx-line); }
  .hx-sol01--sol02 .hx-sol02__layer > header::after { top: auto; right: auto; bottom: -1px; left: 0; width: 42%; height: 4px; }
  .hx-sol01--sol02 .hx-sol02__layer > header span { font-size: 18px; }
  .hx-sol01--sol02 .hx-sol02__layer-body { padding: 26px 18px; }
  .hx-sol01--sol02 .hx-sol02__platform-body { grid-template-columns: 1fr; gap: 24px; }
  .hx-sol01--sol02 .hx-sol02__platform { align-items: flex-start; gap: 12px; }
  .hx-sol01--sol02 .hx-sol02__platform .hx-sol03__platform-visual { width: 112px; height: 82px; margin-right: -28px; transform: scale(.72); transform-origin: top left; }
  .hx-sol01--sol02 .hx-sol02__platform strong { font-size: 18px; }
  .hx-sol01--sol02 .hx-sol02__application-grid, .hx-sol01--sol02 .hx-sol02__communication-grid { grid-template-columns: 1fr; gap: 12px; }
  .hx-sol01--sol02 .hx-sol02__application, .hx-sol01--sol02 .hx-sol02__communication { grid-template-columns: 82px minmax(0,1fr); min-height: 126px; }
  .hx-sol01--sol02 .hx-sol02__application::before, .hx-sol01--sol02 .hx-sol02__communication::before { top: -27px; height: 26px; }
  .hx-sol01--sol02 .hx-sol02__device-grid { grid-template-columns: 1fr; gap: 12px; padding: 24px 0 0; background: transparent; }
  .hx-sol01--sol02 .hx-sol02__device-grid::before { top: 0; right: auto; bottom: 0; left: 26px; width: 1px; height: auto; background: #7b878d; }
  .hx-sol01--sol02 .hx-sol02__device-grid figure { grid-template-columns: 106px minmax(0,1fr); grid-template-rows: 116px; margin-left: 18px; border: 1px solid var(--hx-line); }
  .hx-sol01--sol02 .hx-sol02__device-grid figure::before { top: 50%; left: -18px; width: 18px; height: 1px; background: repeating-linear-gradient(90deg,#7b878d 0 6px,transparent 6px 10px); }
  .hx-sol01--sol02 .hx-sol02__device-grid figure > div { padding: 10px; }
  .hx-sol01--sol02 .hx-sol02__device-grid img { height: 90px; }
  .hx-sol01--sol02 .hx-sol02__device-grid figcaption { justify-content: center; min-height: 0; border-top: 0; border-left: 1px solid var(--hx-line); }
  .hx-sol01--sol02 .hx-sol02__device--panorama i { width: 58px; height: 58px; }
  .hx-sol01--sol02 .hx-sol02__topology-note { text-align: left; }
}

/* SOL-04 new-energy parking and charging topology */
.hx-sol01--sol04 .hx-sol04__topology { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--hx-line); color: var(--hx-ink); background: #fff; box-shadow: 0 24px 70px rgba(23,37,45,.1); }
.hx-sol01--sol04 .hx-sol04__topology::before { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(23,37,45,.026) 1px, transparent 1px), linear-gradient(90deg,rgba(23,37,45,.026) 1px,transparent 1px); background-size: 40px 40px; content: ""; }
.hx-sol01--sol04 .hx-sol04__layer { display: grid; grid-template-columns: 154px minmax(0,1fr); border-bottom: 1px solid var(--hx-line); }
.hx-sol01--sol04 .hx-sol04__layer:last-child { border-bottom: 0; }
.hx-sol01--sol04 .hx-sol04__layer > header { position: relative; display: flex; align-items: center; justify-content: center; padding: 28px 20px; border-right: 1px solid var(--hx-line); background: rgba(237,241,243,.94); text-align: center; }
.hx-sol01--sol04 .hx-sol04__layer > header::after { position: absolute; top: 25%; right: -1px; width: 4px; height: 50%; background: var(--hx-orange); content: ""; }
.hx-sol01--sol04 .hx-sol04__layer--communication > header::after { background: var(--hx-blue); }
.hx-sol01--sol04 .hx-sol04__layer > header span { color: var(--hx-ink); font-size: 18px; font-weight: 600; line-height: 1.45; letter-spacing: .05em; }
.hx-sol01--sol04 .hx-sol04__layer-body { position: relative; min-width: 0; padding: 34px 38px; background: rgba(255,255,255,.92); }
.hx-sol01--sol04 .hx-sol04__application-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.hx-sol01--sol04 .hx-sol04__application-grid article, .hx-sol01--sol04 .hx-sol04__communication-grid article { position: relative; display: flex; align-items: center; flex-direction: column; min-height: 170px; padding: 24px 16px; background: #f7f9fa; text-align: center; }
.hx-sol01--sol04 .hx-sol04__application-grid article::after { position: absolute; bottom: -35px; left: 50%; width: 2px; height: 34px; background: var(--hx-orange); content: ""; }
.hx-sol01--sol04 .hx-sol04__application-grid article > div, .hx-sol01--sol04 .hx-sol04__communication-grid article > div { display: flex; align-items: center; flex-direction: column; }
.hx-sol01--sol04 .hx-sol04__application-grid span, .hx-sol01--sol04 .hx-sol04__platform span, .hx-sol01--sol04 .hx-sol04__communication-grid span, .hx-sol01--sol04 .hx-sol04__device-grid figcaption span { color: var(--hx-orange); font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.hx-sol01--sol04 .hx-sol04__application-grid strong, .hx-sol01--sol04 .hx-sol04__communication-grid strong { margin-top: 5px; font-size: 15px; }
.hx-sol01--sol04 .hx-sol04__application-grid small, .hx-sol01--sol04 .hx-sol04__platform small, .hx-sol01--sol04 .hx-sol04__communication-grid small { margin-top: 7px; color: var(--hx-muted); font-size: 11px; line-height: 1.65; }
.hx-sol01--sol04 .hx-sol04__application-grid i { position: relative; width: 56px; height: 44px; margin-bottom: 18px; border: 2px solid #7a878d; border-width: 2px 2px 7px; background: #fff; }
.hx-sol01--sol04 .hx-sol04__application-grid i::after { position: absolute; bottom: -16px; left: 50%; width: 34px; height: 2px; background: #7a878d; content: ""; transform: translateX(-50%); }
.hx-sol01--sol04 .hx-sol04__management-body { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 30px; align-items: center; min-height: 220px; }
.hx-sol01--sol04 .hx-sol04__platform { display: flex; align-items: center; gap: 22px; }
.hx-sol01--sol04 .hx-sol04__platform > div:last-child { display: flex; align-items: flex-start; flex-direction: column; }
.hx-sol01--sol04 .hx-sol04__platform strong { margin-top: 6px; font: 600 22px/1.35 "DIN Alternate","Bahnschrift","Microsoft YaHei",sans-serif; }
.hx-sol01--sol04 .hx-sol04__capability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.hx-sol01--sol04 .hx-sol04__capability-grid span { display: grid; place-items: center; min-height: 58px; padding: 9px; border: 1px solid rgba(235,97,32,.26); color: var(--hx-ink); background: #f7f9fa; font-size: 11px; text-align: center; }
.hx-sol01--sol04 .hx-sol04__capability-grid span:last-child { grid-column: span 2; }
.hx-sol01--sol04 .hx-sol04__communication-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.hx-sol01--sol04 .hx-sol04__communication-grid article { display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: center; min-height: 154px; text-align: left; }
.hx-sol01--sol04 .hx-sol04__communication-grid article::before { position: absolute; top: -35px; left: 50%; width: 2px; height: 34px; background: var(--hx-orange); content: ""; }
.hx-sol01--sol04 .hx-sol04__communication-grid article > div { align-items: flex-start; }
.hx-sol01--sol04 .hx-sol04__communication-grid i { position: relative; display: block; justify-self: center; width: 62px; height: 54px; }
.hx-sol01--sol04 .hx-sol04__communication--network i { border: 2px solid #66747b; background: linear-gradient(#e7ecee,#cbd4d8); box-shadow: 0 9px 16px rgba(23,37,45,.14); }
.hx-sol01--sol04 .hx-sol04__communication--network i::after { position: absolute; right: 8px; bottom: 10px; left: 8px; height: 7px; background: repeating-linear-gradient(90deg,#17252d 0 7px,transparent 7px 11px); content: ""; }
.hx-sol01--sol04 .hx-sol04__communication--interface i { border: 4px solid var(--hx-orange); border-radius: 50%; }
.hx-sol01--sol04 .hx-sol04__communication--interface i::before, .hx-sol01--sol04 .hx-sol04__communication--interface i::after { position: absolute; content: ""; }
.hx-sol01--sol04 .hx-sol04__communication--interface i::before { inset: 10px -5px; border: 2px solid var(--hx-orange); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; }
.hx-sol01--sol04 .hx-sol04__communication--interface i::after { top: 24px; right: -7px; left: -7px; height: 2px; background: var(--hx-orange); }
.hx-sol01--sol04 .hx-sol04__communication--control i::before { position: absolute; top: 4px; left: 27px; width: 8px; height: 46px; border: 4px solid var(--hx-orange); border-top-color: transparent; border-bottom-color: transparent; content: ""; transform: skew(-24deg); }
.hx-sol01--sol04 .hx-sol04__device-grid { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; padding-top: 26px; background: var(--hx-line); }
.hx-sol01--sol04 .hx-sol04__device-grid::before { position: absolute; top: 0; right: 12.5%; left: 12.5%; height: 1px; background: repeating-linear-gradient(90deg,#7b878d 0 8px,transparent 8px 12px); content: ""; }
.hx-sol01--sol04 .hx-sol04__device-grid figure { position: relative; display: grid; grid-template-rows: 164px auto; min-width: 0; margin: 0; background: #f7f9fa; }
.hx-sol01--sol04 .hx-sol04__device-grid figure::before { position: absolute; top: -26px; left: 50%; width: 1px; height: 26px; background: repeating-linear-gradient(0deg,#7b878d 0 6px,transparent 6px 10px); content: ""; }
.hx-sol01--sol04 .hx-sol04__device-grid figure > div { display: grid; place-items: center; min-width: 0; padding: 20px; }
.hx-sol01--sol04 .hx-sol04__device-grid img { width: 100%; height: 122px; object-fit: contain; }
.hx-sol01--sol04 .hx-sol04__device-grid figcaption { display: flex; align-items: flex-start; flex-direction: column; min-height: 80px; padding: 15px; border-top: 1px solid var(--hx-line); background: #fff; }
.hx-sol01--sol04 .hx-sol04__device-grid figcaption strong { margin-top: 5px; font-size: 13px; line-height: 1.55; }
.hx-sol01--sol04 .hx-sol04__device--lock i { position: relative; width: 76px; height: 42px; border: 3px solid #7d8a90; border-radius: 36px 36px 10px 10px; }
.hx-sol01--sol04 .hx-sol04__device--lock i::before { position: absolute; top: -28px; left: 50%; width: 44px; height: 35px; border: 5px solid var(--hx-orange); border-bottom: 0; border-radius: 28px 28px 0 0; content: ""; transform: translateX(-50%); }
.hx-sol01--sol04 .hx-sol04__device--display i { position: relative; width: 76px; height: 50px; border: 2px solid #7d8a90; background: #fff; }
.hx-sol01--sol04 .hx-sol04__device--display i::after { position: absolute; bottom: -14px; left: 50%; width: 38px; height: 2px; background: #7d8a90; box-shadow: 0 -8px 0 -1px #7d8a90; content: ""; transform: translateX(-50%); }
.hx-sol01--sol04 .hx-sol04__device--indicator i { position: relative; width: 58px; height: 58px; border: 3px solid #7d8a90; border-radius: 50%; box-shadow: inset 0 0 0 12px #fff; background: var(--hx-orange); }
.hx-sol01--sol04 .hx-sol04__topology-note { margin: 18px 0 0; color: var(--hx-muted); font-size: 11px; line-height: 1.7; text-align: right; }

@media (max-width: 1100px) {
  .hx-sol01--sol04 .hx-sol04__application-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hx-sol01--sol04 .hx-sol04__management-body { grid-template-columns: 290px minmax(0,1fr); }
  .hx-sol01--sol04 .hx-sol04__communication-grid article { grid-template-columns: 72px minmax(0,1fr); padding: 18px 12px; }
}

@media (max-width: 760px) {
  .hx-sol01--sol04 .hx-sol04__layer { grid-template-columns: 1fr; }
  .hx-sol01--sol04 .hx-sol04__layer > header { min-height: 62px; padding: 12px 20px; border-right: 0; border-bottom: 1px solid var(--hx-line); }
  .hx-sol01--sol04 .hx-sol04__layer > header::after { top: auto; right: auto; bottom: -1px; left: 0; width: 42%; height: 4px; }
  .hx-sol01--sol04 .hx-sol04__layer > header span { font-size: 18px; }
  .hx-sol01--sol04 .hx-sol04__layer-body { padding: 26px 18px; }
  .hx-sol01--sol04 .hx-sol04__application-grid, .hx-sol01--sol04 .hx-sol04__communication-grid { grid-template-columns: 1fr; gap: 12px; }
  .hx-sol01--sol04 .hx-sol04__application-grid article { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center; min-height: 126px; text-align: left; }
  .hx-sol01--sol04 .hx-sol04__application-grid article > div { align-items: flex-start; }
  .hx-sol01--sol04 .hx-sol04__application-grid i { justify-self: center; margin: 0; }
  .hx-sol01--sol04 .hx-sol04__application-grid article::after { bottom: -13px; height: 12px; }
  .hx-sol01--sol04 .hx-sol04__management-body { grid-template-columns: 1fr; gap: 24px; }
  .hx-sol01--sol04 .hx-sol04__platform { align-items: flex-start; gap: 12px; }
  .hx-sol01--sol04 .hx-sol04__platform .hx-sol03__platform-visual { width: 112px; height: 82px; margin-right: -28px; transform: scale(.72); transform-origin: top left; }
  .hx-sol01--sol04 .hx-sol04__platform strong { font-size: 18px; }
  .hx-sol01--sol04 .hx-sol04__capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hx-sol01--sol04 .hx-sol04__capability-grid span:last-child { grid-column: span 2; }
  .hx-sol01--sol04 .hx-sol04__communication-grid article { grid-template-columns: 82px minmax(0,1fr); min-height: 126px; }
  .hx-sol01--sol04 .hx-sol04__communication-grid article::before { top: -27px; height: 26px; }
  .hx-sol01--sol04 .hx-sol04__device-grid { grid-template-columns: 1fr; gap: 12px; padding: 24px 0 0; background: transparent; }
  .hx-sol01--sol04 .hx-sol04__device-grid::before { top: 0; right: auto; bottom: 0; left: 26px; width: 1px; height: auto; background: #7b878d; }
  .hx-sol01--sol04 .hx-sol04__device-grid figure { grid-template-columns: 106px minmax(0,1fr); grid-template-rows: 116px; margin-left: 18px; border: 1px solid var(--hx-line); }
  .hx-sol01--sol04 .hx-sol04__device-grid figure::before { top: 50%; left: -18px; width: 18px; height: 1px; background: repeating-linear-gradient(90deg,#7b878d 0 6px,transparent 6px 10px); }
  .hx-sol01--sol04 .hx-sol04__device-grid figure > div { padding: 10px; }
  .hx-sol01--sol04 .hx-sol04__device-grid img { height: 90px; }
  .hx-sol01--sol04 .hx-sol04__device-grid figcaption { justify-content: center; min-height: 0; border-top: 0; border-left: 1px solid var(--hx-line); }
  .hx-sol01--sol04 .hx-sol04__topology-note { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-sol01 *, .hx-sol01 *::before, .hx-sol01 *::after { transition: none !important; }
}