:root {
  --ink: #15171b;
  --ink-2: #2e333b;
  --muted: #68717e;
  --line: #dfe3e8;
  --line-dark: #cbd1d9;
  --surface: #ffffff;
  --surface-soft: #f5f7fa;
  --surface-blue: #edf5ff;
  --brand: #1769d2;
  --brand-dark: #0d4fa6;
  --hermes-orange: #f37021;
  --hermes-orange-dark: #d85a0b;
  --cyan: #0b9aa8;
  --green: #2f8df3;
  --amber: #b87618;
  --night: #101e33;
  --danger: #c83a31;
  --content: 1200px;
  --radius: 8px;
  --shadow: 0 18px 45px rgba(22, 37, 58, 0.1);
  --header-height: 72px;
  --font: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: 0;
  line-height: 1.6;
}

body.dialog-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
  letter-spacing: 0;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 200;
  padding: 8px 12px;
  background: var(--ink);
  color: #fff;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid rgba(23, 105, 210, 0.32);
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(21, 23, 27, 0.09);
  backdrop-filter: blur(16px);
}

.header-inner {
  width: min(var(--content), calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  font-size: 21px;
  font-weight: 750;
  color: var(--ink);
}

.brand img {
  width: 156px;
  height: auto;
  object-fit: contain;
}

.primary-nav {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-left: auto;
}

.primary-nav > a,
.primary-nav > button {
  position: relative;
  min-width: 94px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 15px;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
}

.primary-nav > a::after,
.primary-nav > button::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.primary-nav > a:hover::after,
.primary-nav > button:hover::after,
.primary-nav > a.active::after,
.primary-nav > button.active::after {
  transform: scaleX(1);
}

.primary-nav svg {
  width: 15px;
  height: 15px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.icon-button:hover {
  background: #edf1f6;
  color: var(--brand);
}

.icon-button:active,
.button:active {
  transform: scale(0.97);
}

.icon-button svg {
  width: 21px;
  height: 21px;
}

.button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 650;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.button svg {
  width: 18px;
  height: 18px;
}

.button-primary {
  background: var(--brand);
  color: #fff;
}

.button-primary:hover {
  background: var(--brand-dark);
}

.header-cta,
.product-freight .detail-hero .button-primary {
  background: var(--hermes-orange);
}

.header-cta:hover,
.product-freight .detail-hero .button-primary:hover {
  background: var(--hermes-orange-dark);
}

.button-secondary {
  border-color: var(--line-dark);
  background: #fff;
  color: var(--ink);
}

.button-secondary:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.button-light {
  background: #fff;
  color: var(--night);
}

.button-ghost-light {
  border-color: rgba(255,255,255,0.45);
  background: transparent;
  color: #fff;
}

.mobile-menu-button {
  display: none;
  margin-left: auto;
}

.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header-height);
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 22px 34px rgba(26, 38, 55, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.mega-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-inner {
  width: min(var(--content), calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0 38px;
  display: grid;
  grid-template-columns: 245px 1fr;
  gap: 52px;
}

.mega-heading span,
.eyebrow,
.section-kicker {
  display: block;
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
}

.mega-heading strong {
  display: block;
  margin-top: 10px;
  font-size: 25px;
  line-height: 1.35;
}

.mega-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.mega-links a {
  min-height: 96px;
  padding: 19px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color 160ms ease;
}

.mega-links a:hover {
  background: var(--surface-blue);
}

.mega-links b,
.mega-links span {
  display: block;
}

.mega-links b {
  font-size: 16px;
}

.mega-links span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.page-shell {
  min-height: 70vh;
}

.content-wrap {
  width: min(var(--content), calc(100% - 48px));
  margin: 0 auto;
}

.hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background-color: #edf5ff;
  background-image: url("assets/home-scheduling-flow-banner-transparent.png");
  background-repeat: no-repeat;
  background-size: min(760px, 58vw) auto;
  background-position: calc(50% + 260px) center;
  display: flex;
  align-items: center;
}

.hero::after {
  content: "";
  position: absolute;
  left: calc(50% - 600px);
  bottom: 0;
  width: 72px;
  height: 4px;
  background: var(--brand);
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: min(var(--content), calc(100% - 48px));
  margin: 0 auto;
  padding: 66px 0;
}

.hero-copy {
  max-width: 600px;
}

.hero h1 {
  margin: 18px 0 20px;
  max-width: 580px;
  font-size: 58px;
  line-height: 1.14;
  font-weight: 760;
}

.hero-lead {
  margin: 0;
  max-width: 570px;
  color: var(--ink-2);
  font-size: 21px;
  line-height: 1.7;
}

.hero-actions,
.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 38px;
  color: #4c5968;
  font-size: 13px;
}

.hero-notes span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-notes svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
}

.section {
  padding: 92px 0;
}

.section-soft {
  background: var(--surface-soft);
}

.section-blue {
  background: var(--surface-blue);
}

.section-night {
  background: var(--night);
  color: #fff;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 48px;
  margin-bottom: 44px;
}

.section-heading h2,
.section-heading p {
  margin: 0;
}

.section-heading h2 {
  margin-top: 10px;
  font-size: 40px;
  line-height: 1.25;
}

.section-heading p {
  max-width: 470px;
  color: var(--muted);
}

.section-night .section-heading p {
  color: rgba(255,255,255,0.7);
}

.title-rule {
  width: 46px;
  height: 3px;
  margin-top: 16px;
  background: var(--brand);
}

.product-explorer {
  display: block;
  min-height: 0;
}

.product-matrix-visual {
  margin: 0;
  padding: 0;
  background: transparent;
}

.product-matrix-visual img {
  display: block;
  width: 100%;
  margin: 0 auto;
  height: auto;
}

.product-center-hero .detail-hero-copy { max-width: 760px; }
.product-center-hero .detail-hero-copy > p { max-width: 680px; }
.product-center-block {
  margin-top: 64px;
  padding: 42px;
  border: 1px solid var(--line);
  background: #fff;
}
.product-center-block-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 34%);
  gap: 44px;
  align-items: center;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.product-center-block-head h2 { margin: 10px 0 12px; font-size: 36px; }
.product-positioning { color: var(--ink-2); font-size: 18px; }
.product-center-block-head img { width: 100%; max-height: 220px; object-fit: contain; }
.product-center-intro { max-width: 850px; padding: 28px 0 8px; color: var(--muted); }
.product-center-intro p + p { margin-top: 16px; }
.product-center-columns,
.product-center-values { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); gap: 44px; margin-top: 28px; }
.product-center-values { padding-top: 28px; border-top: 1px solid var(--line); }
.product-center-block h3 { margin: 0 0 16px; font-size: 20px; }
.copy-list { margin: 0; padding-left: 20px; color: var(--ink-2); }
.copy-list li { margin: 10px 0; }
.customer-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.customer-card { min-height: 138px; padding: 20px; border: 1px solid var(--line); background: #fff; }
.customer-card p { margin: 16px 0 0; color: var(--ink-2); font-weight: 600; line-height: 1.5; }
.product-customer-grid { gap: 20px; }
.product-page .product-customer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-page .product-customer-grid[data-count="1"] { grid-template-columns: 1fr; }
.product-page .product-customer-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-page .product-customer-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-customer-card { overflow: hidden; min-height: 0; padding: 0; border: 1px solid #dce7f1; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgba(24, 67, 112, .07); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.product-customer-card:hover { transform: translateY(-3px); border-color: rgba(23, 105, 210, .35); box-shadow: 0 16px 30px rgba(24, 67, 112, .12); }
.product-customer-card-media { height: 190px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #fafdff 0%, #eff6fc 100%); }
.product-customer-card-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-customer-card-copy { padding: 18px 20px 20px; }
.product-customer-card-copy p { margin: 0; color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.45; }

@media (max-width: 980px) {
  .product-page .product-customer-grid,
  .product-page .product-customer-grid[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .product-page .product-customer-grid,
  .product-page .product-customer-grid[data-count="2"],
  .product-page .product-customer-grid[data-count="3"] { grid-template-columns: 1fr; }
}
.capability-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 24px; }
.capability-list article { padding: 16px; background: var(--surface-blue); }
.capability-list h4 { margin: 0 0 7px; font-size: 16px; }
.capability-list p, .product-highlights p, .product-center-values p { margin: 0; color: var(--muted); }
.capability-showcase {
  margin-top: 30px;
}
.product-page .product-capability-body {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-top: 0;
  margin-left: 0;
  padding: 0 max(24px, calc((100vw - var(--content)) / 2));
  background: #f3f5f8;
  transform: translateX(-50%);
}

/* Network freight: preserve a 40px breathing space below the capability content. */
.product-page.product-freight .product-capability-body {
  padding-bottom: 40px;
}
.product-page .product-capability-body .capability-picker,
.product-page .product-capability-body .capability-picker-track {
  background: #fff;
}
.product-page .product-capability-body .capability-picker {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.product-page .product-capability-body .capability-preview {
  background: #f3f5f8;
}
.product-page .capability-showcase:not(.generated-capabilities) .capability-tab-icon,
.product-page .capability-showcase:not(.generated-capabilities) .capability-tab.active .capability-tab-icon {
  background: transparent;
  color: var(--brand);
  box-shadow: none;
  transform: none;
}
.product-page .capability-showcase:not(.generated-capabilities) .capability-tab-icon svg {
  width: 32px;
  height: 32px;
}
.product-page .capability-showcase .capability-tab.active {
  transform: none;
}
.product-page .capability-showcase .capability-tab.active .capability-tab-title strong {
  color: #111827;
  font-weight: 800;
}
.product-page .capability-showcase .capability-tab.active::after {
  box-shadow: none;
}
.product-page .product-copy-section.section-soft {
  background: #fff;
  padding-top: 48px;
  padding-bottom: 0;
}
.product-page .customer-section {
  padding-bottom: 44px;
}
.product-page .product-copy-section.section-soft .section-heading {
  margin-bottom: 28px;
}
.capability-picker {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.capability-picker::-webkit-scrollbar { display: none; }
.capability-picker-track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding: 0 18px;
  background: #fff;
}
.capability-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 128px;
  min-height: 118px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 14px 18px 22px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #617089;
  text-align: center;
  cursor: pointer;
  opacity: .58;
  scroll-snap-align: center;
  transition: color 180ms ease, opacity 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.capability-tab::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: transparent;
  transition: background 180ms ease, box-shadow 180ms ease;
}
.capability-tab:hover {
  color: var(--brand);
  opacity: .86;
}
.capability-tab.active {
  color: var(--brand);
  opacity: 1;
  transform: translateY(-2px);
}
.capability-tab.active::after {
  background: var(--brand);
  box-shadow: 0 0 18px rgba(23, 105, 210, .3);
}
.capability-tab-title {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.capability-tab-title strong {
  font-size: 13px;
  line-height: 1.35;
}
.capability-tab-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(145deg, #e6f2ff, #c9e2ff);
  color: #4f9bf5;
  box-shadow: 0 8px 18px rgba(67,148,233,.12);
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.capability-tab-icon svg {
  width: 25px;
  height: 25px;
}
.capability-tab-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.capability-showcase.generated-capabilities .capability-tab-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}
.capability-showcase.generated-capabilities .capability-tab {
  opacity: .84;
}
.capability-showcase.generated-capabilities .capability-tab-icon img {
  filter: saturate(1.45) contrast(1.08);
  transition: filter 180ms ease;
}
.capability-tab.active .capability-tab-icon {
  background: linear-gradient(145deg, #4e91f4, #57c8f5);
  color: #fff;
  box-shadow: 0 12px 24px rgba(56,139,236,.26);
  transform: translateY(-2px);
}
.capability-showcase.generated-capabilities .capability-tab.active {
  opacity: 1;
  transform: none;
}
.capability-showcase.generated-capabilities .capability-tab.active .capability-tab-icon img {
  filter: saturate(1.8) contrast(1.12);
}
.capability-showcase.generated-capabilities .capability-tab.active .capability-tab-title strong {
  color: #111827;
  font-weight: 800;
}
.capability-showcase.generated-capabilities .capability-tab-icon,
.capability-showcase.generated-capabilities .capability-tab.active .capability-tab-icon {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.capability-showcase.generated-capabilities .capability-tab.active::after {
  box-shadow: none;
}
.capability-preview {
  min-width: 0;
  position: relative;
  margin-top: 20px;
  padding: 44px 56px 34px;
  background: #fff;
  overflow: hidden;
}
.capability-preview-copy {
  position: relative;
  z-index: 1;
  min-height: 48px;
  margin: 0 auto 26px;
  text-align: center;
}
.capability-preview-copy p {
  max-width: 820px;
  margin: 0;
  color: #6b7b91;
  font-size: 16px;
  line-height: 1.7;
}
.macbook-device {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 0 2.2cqw 1.1cqw;
}
.macbook-display-shell {
  position: relative;
  padding: 1.55cqw 1.55cqw 2.45cqw;
  border: .1cqw solid #65717e;
  border-radius: 1.7cqw 1.7cqw .65cqw .65cqw;
  background: linear-gradient(145deg, #20272f 0%, #070b10 44%, #111820 100%);
  box-shadow:
    0 2.2cqw 4.6cqw rgba(20, 35, 55, .24),
    inset 0 .12cqw 0 rgba(255,255,255,.26),
    inset .1cqw 0 .16cqw rgba(255,255,255,.08),
    inset -.1cqw 0 .18cqw rgba(0,0,0,.72);
}
.macbook-display-shell::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: .18cqw;
  height: .1cqw;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
}
.macbook-display-shell::after {
  content: "";
  position: absolute;
  inset: .45cqw;
  border: .06cqw solid rgba(255,255,255,.08);
  border-radius: 1.35cqw 1.35cqw .4cqw .4cqw;
  pointer-events: none;
}
.macbook-display {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: .08cqw solid #020408;
  border-radius: .62cqw;
  background: #eef2f7;
  box-shadow: inset 0 0 0 .06cqw rgba(255,255,255,.1), 0 .16cqw .32cqw rgba(0,0,0,.42);
}
.macbook-display:has(> img:not([hidden])) {
  aspect-ratio: auto;
}
.macbook-display::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.macbook-display img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #f2f5f8;
}
.macbook-display img[hidden],
.macbook-placeholder[hidden] {
  display: none;
}
.macbook-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr) auto;
  background: #f7f9fc;
  color: #596675;
}
.placeholder-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid #dfe6ee;
  background: #fff;
  color: #263648;
  font-size: 11px;
}
.placeholder-dots {
  display: inline-flex;
  gap: 5px;
}
.placeholder-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd5df;
}
.placeholder-dots i:first-child { background: #e5a39b; }
.placeholder-dots i:nth-child(2) { background: #e6c47e; }
.placeholder-dots i:nth-child(3) { background: #9fc6a7; }
.placeholder-window-code {
  margin-left: auto;
  color: #93a0ae;
  font-size: 9px;
  letter-spacing: .08em;
}
.placeholder-body {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  min-height: 0;
}
.placeholder-sidebar {
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 20px 16px;
  background: #223149;
}
.placeholder-sidebar span {
  width: 38px;
  height: 7px;
  border-radius: 4px;
  background: rgba(255,255,255,.24);
}
.placeholder-sidebar span:first-child {
  background: var(--brand);
}
.placeholder-main {
  padding: 26px 28px;
}
.placeholder-main-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #263648;
}
.placeholder-main-heading span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #e3efff;
  color: var(--brand);
  font-size: 10px;
  font-weight: 750;
}
.placeholder-main-heading strong {
  font-size: 15px;
}
.placeholder-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 26px;
}
.placeholder-skeleton-grid i {
  height: 58px;
  border: 1px solid #dce5ef;
  border-radius: 6px;
  background: linear-gradient(135deg, #fff, #edf3f8);
}
.placeholder-skeleton-line {
  width: 88%;
  height: 9px;
  margin-top: 22px;
  border-radius: 4px;
  background: #dfe7ef;
}
.placeholder-skeleton-line.short {
  width: 58%;
  margin-top: 11px;
}
.macbook-placeholder > p {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid #dfe6ee;
  background: #fff;
  color: #8a98a7;
  font-size: 11px;
  text-align: right;
}
.macbook-camera {
  position: absolute;
  z-index: 1;
  top: .55cqw;
  left: 50%;
  width: .52cqw;
  height: .52cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6f7d8c 0 16%, #18222e 32%, #05090f 72%);
  box-shadow: 0 0 0 .14cqw #111820, 0 0 0 .22cqw rgba(4,8,14,.86);
  transform: translateX(-50%);
}
.macbook-base {
  position: relative;
  z-index: 2;
  width: 116%;
  height: 4.05cqw;
  margin: -.08cqw -8% 0;
  border-top: .13cqw solid #f8fafb;
  border-bottom: .08cqw solid #687580;
  border-radius: .08cqw .08cqw 1.4cqw 1.4cqw;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.11) 0 .08cqw, rgba(76,88,101,.035) .08cqw .18cqw),
    linear-gradient(180deg, #ffffff 0%, #e9edf0 13%, #c6ced5 34%, #98a4af 57%, #d1d7dc 76%, #7b8792 100%);
  background-blend-mode: soft-light, normal;
  clip-path: none;
  box-shadow:
    inset 0 .18cqw 0 rgba(255,255,255,.98),
    inset 0 -.18cqw .3cqw rgba(49,61,73,.5),
    inset 0 -1.05cqw 1.1cqw rgba(255,255,255,.13);
  filter: drop-shadow(0 1.35cqw 1.45cqw rgba(15,35,62,.22));
}
.macbook-base::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 52%;
  height: .34cqw;
  border-radius: 0 0 .28cqw .28cqw;
  background: linear-gradient(180deg, #596572, #8e99a4);
  box-shadow: 0 .1cqw 0 rgba(255,255,255,.58);
  transform: translateX(-50%);
}
.macbook-base::after {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: .3cqw;
  height: .16cqw;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.54) 18%, rgba(71,83,95,.3) 50%, rgba(255,255,255,.48) 82%, transparent 100%);
}
.macbook-base span {
  position: absolute;
  left: 50%;
  top: .03cqw;
  width: 13%;
  height: .82cqw;
  border: .08cqw solid rgba(89, 101, 113, .55);
  border-top: 0;
  border-radius: 0 0 .78cqw .78cqw;
  background: linear-gradient(180deg, rgba(112,124,136,.5), rgba(241,244,246,.92));
  box-shadow: inset 0 .12cqw .22cqw rgba(64, 76, 88, .28), 0 .08cqw 0 rgba(255,255,255,.65);
  transform: translateX(-50%);
}
.product-highlights { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 28px; }
.product-highlights article { padding: 20px; border-left: 3px solid var(--brand); background: var(--surface-blue); }
.product-center-block .section-actions { margin-top: 30px; }
.connection-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 32px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.connection-grid article { min-height: 150px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.connection-grid span { color: var(--brand); font-size: 13px; font-weight: 700; }
.connection-grid h3 { margin: 18px 0 8px; }
.connection-grid p { margin: 0; color: var(--muted); }
.delivery-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.18); border-left: 1px solid rgba(255,255,255,.18); }
.delivery-grid span { padding: 20px 22px; color: rgba(255,255,255,.86); border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.section-night .product-center-values p, .section-night .product-center-values h3 { color: #fff; }
.product-copy-section-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
  gap: 48px;
  align-items: stretch;
}
.product-copy-section-layout > .copy-list,
.product-copy-section-layout > p { padding: 24px 0; }
.product-intro-copy { padding: 24px 0; color: var(--muted); }
.product-intro-copy p { text-indent: 2em; }
.product-intro-copy p + p { margin-top: 18px; }
.product-intro-section .product-copy-section-layout {
  display: block;
  max-width: 900px;
  margin: 0 auto;
}
.product-intro-section .product-image-slot { display: none; }
.product-copy-section .capability-list { margin-bottom: 30px; }
.product-page .product-copy-section .section-heading {
  justify-content: center;
  text-align: center;
}
.product-page .product-copy-section .title-rule {
  margin-left: auto;
  margin-right: auto;
}
.product-image-slot {
  min-height: 220px;
  border: 1px dashed var(--line-dark);
  background: rgba(255,255,255,.42);
}
.section-blue .product-image-slot { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.08); }
.product-value-section {
  color: var(--ink);
}
.product-value-section .section-heading { margin-bottom: 42px; }
.product-value-section .title-rule { background: var(--brand); }
.product-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
}
.product-value-card {
  min-height: 218px;
  display: flex;
  flex-direction: column;
  padding: 28px 30px 26px;
  border: 1px solid rgba(94,164,238,.08);
  border-radius: 8px;
  background: linear-gradient(135deg, #f3f9ff 0%, #e4f1ff 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(30,106,183,.06);
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.product-value-card::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -42px;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(23,105,210,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(23,105,210,.03), 0 0 0 28px rgba(23,105,210,.02);
  pointer-events: none;
}
.product-value-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 70px;
}
.product-value-card-top > span {
  color: rgba(23,105,210,.08);
  font-size: 76px;
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.06em;
}
.value-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.58);
  color: var(--brand);
  box-shadow: 0 8px 18px rgba(23,105,210,.08);
}
.value-icon svg { width: 23px; height: 23px; }
.product-value-card p {
  position: relative;
  z-index: 1;
  max-width: 290px;
  margin: auto 0 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
}
.product-value-card:hover,
.product-value-card:focus-within {
  border-color: rgba(23,105,210,.5);
  background: linear-gradient(135deg, #3f8df4 0%, #55c7f4 100%);
  box-shadow: 0 20px 42px rgba(23,105,210,.22);
  color: #fff;
  transform: translateY(-3px);
}
.product-value-card:hover::after,
.product-value-card:focus-within::after { border-color: rgba(255,255,255,.36); box-shadow: 0 0 0 14px rgba(255,255,255,.08), 0 0 0 28px rgba(255,255,255,.04); }
.product-value-card:hover .product-value-card-top > span,
.product-value-card:focus-within .product-value-card-top > span { color: rgba(255,255,255,.2); }
.product-value-card:hover .value-icon,
.product-value-card:focus-within .value-icon { background: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
.product-value-card:hover p,
.product-value-card:focus-within p { color: #fff; }
.product-value-section .product-image-slot { margin-top: 18px; min-height: 120px; }

.feature-points {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.feature-points li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 9px 0;
  color: var(--ink-2);
}

.feature-points svg {
  width: 17px;
  height: 17px;
  margin-top: 4px;
  color: var(--green);
  flex: 0 0 auto;
}

.solution-banner {
  min-height: 520px;
  background-color: var(--night);
  background-image: url("assets/about-coal-supply-chain-digital-twin-banner-web.png");
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: center;
}

.solution-copy {
  max-width: 610px;
  padding: 80px 0;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}

.solution-copy .section-kicker {
  color: #84c5ff;
}

.solution-copy h2 {
  margin: 14px 0 18px;
  font-size: 44px;
  line-height: 1.25;
}

.solution-copy p {
  margin: 0;
  font-size: 18px;
  color: rgba(255,255,255,0.86);
}

.mode-switcher {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: #fff;
}

.mode-switcher button {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  padding: 0 18px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.mode-switcher button.active {
  background: var(--night);
  color: #fff;
}

.flow-stage {
  margin-top: 34px;
  padding: 44px 0 22px;
  overflow-x: auto;
}

.flow-line {
  min-width: 760px;
  display: grid;
  grid-template-columns: repeat(var(--flow-count), minmax(120px, 1fr));
  align-items: start;
}

.flow-node {
  position: relative;
  text-align: center;
  padding: 0 18px;
}

.flow-node::before {
  content: "";
  position: absolute;
  top: 28px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #b9c4d2;
}

.flow-node:first-child::before {
  display: none;
}

.flow-marker {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px rgba(20, 105, 215, 0.2);
}

.flow-marker svg {
  width: 24px;
  height: 24px;
}

.flow-marker small {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--night);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.flow-node b,
.flow-node span {
  display: block;
}

.flow-node b {
  font-size: 15px;
}

.flow-node span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.case-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.case-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.case-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  background: var(--surface-blue);
}

.case-card-copy {
  padding: 24px;
}

.case-card-copy h3 {
  margin: 0 0 8px;
  font-size: 21px;
}

.case-card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.case-card-copy a {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-weight: 650;
  font-size: 14px;
}

.case-card-copy a svg {
  width: 16px;
  height: 16px;
}

.about-band {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  min-height: 440px;
}

.about-image {
  background: #dbe8f5 url("assets/about-coal-supply-chain-digital-twin-banner-web.png") center / cover no-repeat;
}

.about-copy {
  padding: 72px max(48px, calc((100vw - var(--content)) / 2));
  padding-right: max(32px, calc((100vw - var(--content)) / 2));
  background: var(--night);
  color: #fff;
}

.about-copy h2 {
  margin: 12px 0 18px;
  font-size: 38px;
  line-height: 1.28;
}

.about-copy p {
  color: rgba(255,255,255,0.72);
}

.about-copy .section-kicker {
  color: #84c5ff;
}

.contact-strip {
  padding: 62px 0;
  background: var(--brand);
  color: #fff;
}

.contact-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.contact-strip h2 {
  margin: 0;
  font-size: 31px;
}

.contact-strip p {
  margin: 8px 0 0;
  color: rgba(255,255,255,0.82);
}

.detail-hero {
  min-height: 610px;
  display: flex;
  align-items: center;
  background-color: var(--surface-blue);
  background-image: var(--detail-image);
  background-position: calc(50% + 390px) center;
  background-repeat: no-repeat;
  background-size: min(650px, 52vw) auto;
}
.product-page .detail-hero {
  background-position: calc(50% + 450px) center;
}

.product-sales .detail-hero {
  background-position: right 24px center;
  background-size: min(520px, 44vw) auto;
}

@media (min-width: 821px) and (max-width: 980px) {
  .product-sales .detail-hero {
    min-height: 820px;
    align-items: flex-start;
    background-position: right 18px bottom 18px;
    background-size: min(520px, 68vw) auto;
  }

  .product-sales .detail-hero-copy {
    max-width: 100%;
    padding-bottom: 400px;
  }
}

.detail-hero-scene {
  position: relative;
  overflow: hidden;
  background-position: right 8px bottom;
  background-size: min(900px, 86vw) auto;
}

.detail-hero-scene .content-wrap {
  position: relative;
  z-index: 1;
}

.detail-hero-copy {
  max-width: 700px;
  padding: 72px 0;
}

.case-detail-hero .detail-hero-copy {
  max-width: min(520px, 46vw);
}

.detail-hero h1 {
  margin: 16px 0 18px;
  font-size: 48px;
  line-height: 1.2;
}

.detail-hero p {
  margin: 0;
  color: var(--ink-2);
  font-size: 18px;
}
.detail-hero-positioning {
  max-width: 680px;
}
.detail-hero-intro {
  max-width: 700px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
.detail-hero-intro p {
  color: var(--muted);
  font-size: 16px;
  line-height: inherit;
}
.detail-hero-intro p + p { margin-top: 12px; }

.detail-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.4fr);
  gap: 72px;
  align-items: start;
}

.detail-intro h2,
.detail-section h2 {
  margin: 10px 0 18px;
  font-size: 36px;
  line-height: 1.3;
}

.detail-intro p,
.detail-section > p {
  color: var(--muted);
}

.stat-list {
  margin: 0;
  border-top: 1px solid var(--line-dark);
}

.stat-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.stat-row b,
.stat-row span {
  display: block;
}

.stat-row b {
  font-size: 17px;
}

.stat-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.product-screen-band {
  padding: 78px 0;
  background: var(--night);
  color: #fff;
}

.product-screen-layout {
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 84px;
  align-items: center;
}

.product-screen-layout h2 {
  margin: 12px 0 18px;
  max-width: 620px;
  font-size: 38px;
  line-height: 1.28;
}

.product-screen-layout p {
  max-width: 580px;
  color: rgba(255,255,255,0.68);
}

.product-screen-layout > img {
  width: 310px;
  margin: 0 auto;
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0,0,0,0.38);
}

.product-screen-layout.wide-screen-layout {
  grid-template-columns: minmax(0, 0.58fr) minmax(560px, 1fr);
  gap: 54px;
}

.product-screen-layout > img.wide-product-screen {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #fff;
}

.product-screen-layout .product-main-mockup {
  width: 279px;
  margin: 0 auto;
  box-shadow: 0 28px 70px rgba(0,0,0,0.42);
}

.product-screen-layout .product-main-mockup img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 24px;
  box-shadow: none;
  object-fit: cover;
}

.feature-item {
  min-height: 190px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--surface-blue);
  color: var(--brand);
}

.feature-icon svg {
  width: 21px;
  height: 21px;
}

.feature-item h3 {
  margin: 18px 0 8px;
  font-size: 19px;
}

.feature-item p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.role-card {
  border-top: 3px solid var(--brand);
  padding: 24px 0 8px;
}

.product-freight .role-card {
  border-top-color: var(--hermes-orange);
}

.product-freight .section-blue .title-rule {
  background: var(--hermes-orange);
}

.role-card-visual {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  padding: 28px;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  background: #eef4fb;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.role-card-visual:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.role-card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(238,244,251,0.98) 0%, rgba(238,244,251,0.82) 30%, rgba(238,244,251,0) 66%), linear-gradient(0deg, rgba(238,244,251,0.98) 0%, rgba(238,244,251,0) 58%);
}

.role-card-visual img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.role-copy {
  position: relative;
  z-index: 1;
  max-width: 72%;
}

.role-card h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.role-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.feature-showcase-list {
  margin-top: 42px;
  border-top: 1px solid var(--line);
}

.feature-showcase-block {
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1.15fr);
  align-items: center;
  gap: 64px;
  padding: 48px 72px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: #fff;
}

.feature-showcase-block:nth-child(even) {
  background: #f4f8fd;
}

.feature-showcase-block:nth-child(even) .feature-showcase-copy {
  order: 2;
}

.feature-showcase-block:nth-child(even) .phone-mockup {
  order: 1;
}

.feature-showcase-copy {
  max-width: 440px;
}

.feature-showcase-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.feature-showcase-copy h3 {
  margin: 0;
  font-size: 34px;
  line-height: 1.24;
}

.feature-showcase-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
}

.phone-mockup {
  position: relative;
  width: 228px;
  aspect-ratio: 390 / 844;
  margin: 0 auto;
  overflow: hidden;
  border: 8px solid #111a28;
  border-radius: 34px;
  background: #111a28;
  box-shadow: 0 30px 65px rgba(25, 45, 76, 0.22);
}

.phone-mockup::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 50%;
  width: 56px;
  height: 14px;
  border-radius: 12px;
  background: #111a28;
  transform: translateX(-50%);
}

.phone-mockup img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 24px;
  object-fit: cover;
}

/* Brochure iPhone shell, scaled with each mockup's existing width. */
.phone-mockup.iphone-device {
  container-type: inline-size;
  aspect-ratio: auto;
  padding: 0 5px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.iphone-device::before,
.iphone-device::after,
.iphone-device .iphone-action {
  content: "";
  position: absolute;
  z-index: 0;
  width: 1.8cqw;
  transform: none;
}

.iphone-device::before {
  left: 2px;
  top: 42cqw;
  height: 14cqw;
  border-radius: 1.2cqw 0 0 1.2cqw;
  background: linear-gradient(90deg, #53585d, #e7e8e9 55%, #737980);
  box-shadow: 0 20cqw 0 #a1a6ac;
}

.iphone-device::after {
  right: 2px;
  top: 52cqw;
  height: 26cqw;
  border-radius: 0 1.2cqw 1.2cqw 0;
  background: linear-gradient(90deg, #7d8389, #eef0f1 50%, #626970);
}

.iphone-device .iphone-action {
  left: 2px;
  top: 24cqw;
  height: 7.6cqw;
  border-radius: 1.2cqw 0 0 1.2cqw;
  background: linear-gradient(90deg, #60666b, #e0e2e4);
}

.iphone-device .iphone-screen {
  position: relative;
  z-index: 1;
  padding: 0;
  overflow: hidden;
  border: 1.6cqw solid #080a0d;
  border-radius: 16.4cqw;
  background: #080a0d;
  box-shadow: 0 0 0 .64cqw #eceff1,
    0 0 0 .9cqw #858b91,
    0 5cqw 10cqw rgba(10, 25, 38, .22);
}

.phone-mockup.iphone-device img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
}

.iphone-device .iphone-screen::before,
.iphone-device .iphone-screen::after {
  content: "";
  position: absolute;
  z-index: 2;
  transform: translateX(-50%);
}

.iphone-device .iphone-screen::before {
  top: 3cqw;
  left: 50%;
  width: 29cqw;
  height: 7.1cqw;
  border-radius: 5cqw;
  background: #030405;
  box-shadow: inset 0 0 0 .24cqw #111419;
}

.iphone-device .iphone-screen::after {
  top: 4.55cqw;
  left: calc(50% + 8.2cqw);
  width: 4cqw;
  height: 4cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #375273 0, #17263a 25%, #0b101a 52%, #020304 72%);
  box-shadow: inset 0 0 0 .24cqw #19222e;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,0.18);
  border-left: 1px solid rgba(255,255,255,0.18);
}

.related-grid a {
  min-height: 150px;
  padding: 26px;
  border-right: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.related-grid a:hover {
  background: rgba(255,255,255,0.07);
}

.related-grid b,
.related-grid span {
  display: block;
}

.related-grid span {
  margin-top: 8px;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}

.solution-page-hero,
.about-page-hero,
.cases-page-hero {
  min-height: 460px;
  color: #fff;
  display: flex;
  align-items: end;
  background-color: var(--night);
  background-image: url("assets/about-coal-supply-chain-digital-twin-banner-web.png");
  background-size: cover;
  background-position: center;
}

.about-page-hero {
  background-position: center 58%;
}

.cases-page-hero {
  background-image: url("assets/classic-cases-coal-digitalization-banner-web-v1.jpg");
}

.page-hero-copy {
  max-width: 720px;
  padding: 88px 0 64px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.58);
}

.page-hero-copy h1 {
  margin: 14px 0 14px;
  font-size: 48px;
  line-height: 1.2;
}

.page-hero-copy p {
  margin: 0;
  font-size: 18px;
  color: rgba(255,255,255,0.84);
}

.solution-layout {
  display: grid;
  grid-template-columns: 320px minmax(0,1fr);
  gap: 54px;
}

.solution-context-section {
  background: #fff;
}
.solution-context-heading {
  align-items: end;
  margin-bottom: 30px;
}
.solution-context-heading h2 {
  max-width: 720px;
  margin: 10px 0 0;
  font-size: 34px;
  line-height: 1.3;
}
.solution-context-heading > p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.solution-customer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
/* 2 个客户保持两列；4 个客户在中等宽度下切换为 2×2 */
@media (min-width: 641px) {
  .solution-customer-grid[data-count="1"] { grid-template-columns: 1fr; }
  .solution-customer-grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .solution-customer-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .solution-customer-grid[data-count="4"] .solution-customer-card-media {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}
@media (min-width: 641px) and (max-width: 980px) {
  .solution-customer-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.solution-customer-card {
  overflow: hidden;
  border: 1px solid #dce7f1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(24, 67, 112, .07);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.solution-customer-card:hover {
  transform: translateY(-3px);
  border-color: rgba(23, 105, 210, .35);
  box-shadow: 0 16px 30px rgba(24, 67, 112, .12);
}
.solution-customer-card-media {
  height: 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #fafdff 0%, #eff6fc 100%);
}
.solution-customer-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.solution-customer-card-copy {
  padding: 18px 20px 20px;
}
.solution-customer-card-copy > span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
}
.solution-customer-card-copy h3 {
  margin: 8px 0 7px;
  color: var(--ink);
  font-size: 20px;
}
.solution-customer-card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.solution-context-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.case-context-compare {
  margin-top: 0;
}

.case-context-compare .solution-context-card-head h3 {
  margin: 0;
}

.case-highlight-grid.feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.solution-context-card {
  min-height: 220px;
  padding: 24px 26px 26px;
  border-radius: 16px;
}
.solution-context-card-problem {
  border: 1px solid rgba(214, 133, 48, .24);
  background: linear-gradient(145deg, #fffaf3 0%, #fff5e9 100%);
}
.solution-context-card-answer {
  border: 1px solid rgba(23, 105, 210, .2);
  background: linear-gradient(145deg, #f3f9ff 0%, #eaf4ff 100%);
}
.solution-context-card-head {
  display: flex;
  align-items: center;
  gap: 13px;
}
.solution-context-card-head > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.solution-context-card-problem .solution-context-card-head > span { background: #d88935; }
.solution-context-card-answer .solution-context-card-head > span { background: var(--brand); }
.solution-context-card-head div { min-width: 0; }
.solution-context-card-head small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.solution-context-card-head h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 22px;
}
.solution-context-card-head > svg {
  width: 24px;
  height: 24px;
  margin-left: auto;
  flex: 0 0 auto;
}
.solution-context-card-problem .solution-context-card-head > svg { color: #d88935; }
.solution-context-card-answer .solution-context-card-head > svg { color: var(--brand); }
.solution-context-card > p {
  margin: 22px 0 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.8;
}

.pain-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}

.pain-list li {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
}

.pain-list svg {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  color: var(--danger);
  flex: 0 0 auto;
}

.solution-stack {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.solution-step {
  display: grid;
  grid-template-columns: 80px 230px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.solution-step em {
  color: var(--brand);
  font-style: normal;
  font-weight: 750;
}

.solution-step b {
  font-size: 17px;
}

.solution-step span {
  color: var(--muted);
  font-size: 14px;
}

.solution-page .solution-layout {
  grid-template-columns: 1fr;
  gap: 72px;
}

.solution-page .solution-layout > aside h2,
.solution-page .solution-layout > div > h2 {
  max-width: 860px;
  margin: 10px 0 0;
}

.solution-page .pain-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 30px;
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line);
}

.solution-page .pain-list li {
  min-height: 116px;
  padding: 22px 20px;
  align-items: flex-start;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.solution-page.solution-storage .pain-list {
  gap: 14px;
  border: 0;
}

.solution-page.solution-storage .pain-list .pain-card {
  min-height: 146px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid rgba(23, 105, 210, 0.16);
  border-radius: 14px;
  background: rgba(247, 251, 255, 0.86);
  box-shadow: 0 12px 28px rgba(28, 82, 143, 0.08);
}

.solution-page.solution-storage .pain-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #e97922;
  background: rgba(233, 121, 34, 0.12);
}

.solution-page.solution-storage .pain-card-icon svg {
  width: 22px;
  height: 22px;
  margin: 0;
  color: inherit;
}

.solution-page.solution-storage .pain-card > span {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
}

.solution-page .solution-stack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 34px;
  border-top: 0;
}

.solution-page .solution-stack::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 10%;
  right: 10%;
  top: 27px;
  height: 2px;
  background: #aebfd3;
}

.solution-page .solution-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  border-bottom: 0;
  text-align: center;
}

.solution-page .solution-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  right: -4px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--brand);
}

.solution-page .solution-step em {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 5px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 20px rgba(23,105,210,0.18);
}

.solution-page .solution-step b {
  margin-top: 16px;
  font-size: 17px;
}

.solution-page .solution-step span {
  max-width: 180px;
  margin-top: 7px;
  line-height: 1.65;
}

.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
}

.inline-link svg {
  width: 16px;
  height: 16px;
}

.coalboss-entry-band {
  padding: 84px 0;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
}

.coalboss-entry-band .coalboss-entry-copy > p {
  color: var(--muted);
}

.coalboss-entry-band .channel-levels span {
  border-color: rgba(23, 105, 210, 0.22);
  color: var(--ink-2);
}

.coalboss-entry-band .channel-phone,
.coalboss-entry-band .phone-mockup.iphone-device.channel-phone {
  box-shadow: none;
}

.coalboss-entry-layout {
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: center;
  gap: 92px;
}

.coalboss-entry-copy h2 {
  max-width: 700px;
  margin: 12px 0 18px;
  font-size: 42px;
  line-height: 1.28;
}

.coalboss-entry-copy > p {
  max-width: 650px;
  color: rgba(255,255,255,0.72);
  font-size: 17px;
}

.channel-levels,
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 28px 0 30px;
}

.channel-levels span,
.tag-row span {
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 4px;
  color: rgba(255,255,255,0.76);
  font-size: 12px;
}

.channel-phone {
  width: 260px;
  box-shadow: 0 38px 90px rgba(0,0,0,0.46);
}
.phone-mockup.iphone-device.channel-phone {
  width: 260px;
  box-shadow: 0 38px 90px rgba(0,0,0,0.46);
}

.coalboss-hero {
  min-height: 650px;
  overflow: hidden;
  background: #edf5ff;
}

.coalboss-hero-layout {
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: center;
  gap: 80px;
}

.coalboss-hero-copy {
  max-width: 720px;
}

.coalboss-hero-copy h1 {
  margin: 16px 0 20px;
  font-size: 50px;
  line-height: 1.2;
}

.coalboss-hero-copy > p {
  max-width: 660px;
  margin: 0;
  color: var(--ink-2);
  font-size: 19px;
}

.coalboss-hero-phone {
  width: 234px;
  box-shadow: 0 36px 80px rgba(24, 71, 128, 0.28);
}

.coalboss-tiered-heading h2 {
  margin-top: 0;
}

.coalboss-tiered-heading h3 {
  margin: 12px 0 0;
  color: var(--brand);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.012em;
}

.section-night .coalboss-tiered-heading h3 {
  color: #84c5ff;
}

.problem-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.problem-strip article {
  min-height: 220px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.problem-strip h3 {
  margin: 20px 0 8px;
  font-size: 19px;
}

.problem-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.service-layers {
  border-top: 1px solid var(--line-dark);
}

.service-layers article {
  min-height: 150px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}

.service-layers em {
  color: var(--brand);
  font-size: 42px;
  font-style: normal;
  font-weight: 760;
  line-height: 1;
}

.service-layers span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
}

.service-layers h3 {
  margin: 5px 0 7px;
  font-size: 24px;
}

.service-layers p {
  max-width: 800px;
  margin: 0;
  color: var(--muted);
}

.boundary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
  gap: 86px;
  align-items: start;
}

.boundary-layout h2 {
  margin: 10px 0 16px;
  font-size: 36px;
  line-height: 1.28;
}

.boundary-layout p {
  color: rgba(255,255,255,0.7);
}

.boundary-layout small {
  display: block;
  margin-top: 22px;
  color: rgba(255,255,255,0.48);
}

.boundary-list {
  border-top: 1px solid rgba(255,255,255,0.2);
}

.boundary-list span {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.76);
}

.boundary-list svg {
  width: 17px;
  height: 17px;
  color: #2f8df3;
}

.cds-hero {
  min-height: 630px;
  overflow: hidden;
  background: #eaf3ff;
}

.cds-hero-layout {
  min-height: 630px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(520px, 1.05fr);
  align-items: center;
  gap: 58px;
}

.cds-hero-copy h1 {
  margin: 16px 0 20px;
  font-size: 48px;
  line-height: 1.25;
}

.cds-hero-copy > p {
  max-width: 600px;
  margin: 0;
  color: var(--ink-2);
  font-size: 18px;
}

.cds-embed-section {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.cds-embed-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-size: 14px;
}

.cds-embed-meta > span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(23,105,210,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.68);
  color: var(--brand-dark);
  font-weight: 700;
}

.cds-embed-meta .text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-dark);
  font-weight: 700;
}

.cds-embed-meta .text-link:hover {
  color: var(--brand);
}

.cds-embed-meta svg {
  width: 16px;
  height: 16px;
}

.cds-embed-frame-wrap {
  position: relative;
  overflow: hidden;
  min-height: 860px;
  border: 1px solid #cbd9ea;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 24px 70px rgba(30, 73, 122, 0.14);
}

.cds-embed-frame {
  display: block;
  width: 100%;
  height: 860px;
  border: 0;
  background: #fff;
}

.cds-hub {
  position: relative;
  width: 560px;
  height: 470px;
  margin: 0 auto;
  background-image: linear-gradient(rgba(23,105,210,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(23,105,210,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}

.cds-hub::before,
.cds-hub::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(23,105,210,0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cds-hub::before { width: 390px; height: 250px; }
.cds-hub::after { width: 270px; height: 170px; }

.hub-core {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 26px 70px rgba(23,105,210,0.34);
}

.hub-core small { font-size: 9px; opacity: 0.68; }
.hub-core strong { font-size: 26px; line-height: 1.2; }
.hub-core span { font-size: 12px; opacity: 0.82; }

.hub-node {
  position: absolute;
  z-index: 3;
  width: 128px;
  min-height: 82px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(23,105,210,0.2);
  border-radius: 6px;
  background: rgba(255,255,255,0.94);
  color: var(--brand-dark);
  box-shadow: 0 14px 35px rgba(37, 77, 125, 0.12);
}

.hub-node svg { width: 22px; height: 22px; }
.hub-node span { color: var(--ink-2); font-size: 12px; font-weight: 700; }
.hub-node-a { left: 4px; top: 64px; }
.hub-node-b { right: 8px; top: 44px; }
.hub-node-c { left: 6px; bottom: 56px; }
.hub-node-d { right: 0; bottom: 68px; }
.hub-node-e { left: 50%; top: 4px; transform: translateX(-50%); }

.protocol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 44px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.protocol-grid article {
  min-height: 210px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.protocol-grid span { color: var(--brand); font-size: 12px; font-weight: 700; }
.protocol-grid h3 { margin: 12px 0 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; }
.protocol-grid p { margin: 0; color: var(--muted); font-size: 14px; }

.connected-systems {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,0.18);
  border-left: 1px solid rgba(255,255,255,0.18);
}

.connected-systems article {
  min-height: 240px;
  padding: 26px 22px;
  border-right: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.connected-systems em { color: #84c5ff; font-style: normal; font-size: 12px; }
.connected-systems h3 { min-height: 52px; margin: 14px 0 18px; font-size: 18px; }
.connected-systems b { color: #84c5ff; font-size: 14px; }
.connected-systems p { color: rgba(255,255,255,0.58); font-size: 13px; }

.business-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.business-columns article {
  min-height: 300px;
  padding: 42px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.business-columns article > span {
  display: block;
  margin-top: 28px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
}

.business-columns h3 { margin: 8px 0 14px; font-size: 28px; }
.business-columns p { color: var(--muted); }
.business-columns .tag-row { margin: 26px 0 0; }
.business-columns .tag-row span { border-color: var(--line-dark); color: var(--muted); }

.storage-collaboration-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.65fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
}
.storage-collaboration-copy { min-width: 0; }
.storage-collaboration-copy h2 {
  margin: 16px 0 20px;
  font-size: clamp(28px, 2.45vw, 36px);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.025em;
}
.storage-collaboration-copy .title-rule { margin-bottom: 24px; }
.storage-collaboration-lead {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}
.storage-collaboration-steps {
  padding: 0;
  margin: 26px 0;
  list-style: none;
}
.storage-collaboration-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(23, 105, 210, 0.12);
}
.storage-collaboration-steps li > span {
  font-size: 12px;
  font-weight: 650;
  color: var(--brand);
  letter-spacing: .05em;
}
.storage-collaboration-steps p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
.storage-collaboration-conclusion {
  margin: 0;
  color: var(--brand-dark);
  font-size: 14px;
  line-height: 1.9;
}
.storage-collaboration-scene { min-width: 0; margin: 0; }
.storage-collaboration-scene img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 900px) {
  .storage-collaboration-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .storage-collaboration-copy { max-width: 660px; }
  .storage-collaboration-copy h2 { font-size: 30px; }
  .storage-collaboration-scene { width: 100%; max-width: 800px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .storage-collaboration-copy h2 { font-size: 27px; }
  .storage-collaboration-lead { font-size: 15px; }
}

.system-collaboration-visual {
  border-top: 0;
}

.solution-page > .section-blue .section-heading {
  display: block;
}

.solution-page > .section-blue .section-heading > div {
  max-width: 940px;
}

.solution-page > .section-blue .section-heading p {
  max-width: 820px;
  margin-top: 20px;
}

.collaboration-canvas {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: 0 0 22px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.collaboration-canvas > img {
  width: min(100%, 1120px);
  margin: 0 auto;
  object-fit: contain;
}

.collaboration-canvas > img[src$="solution-storage-v4.png"] {
  width: 100%;
}

.system-collaboration-visual:has(img[src$="solution-storage-v4.png"]) .legend-info {
  border-top-width: 6px;
}

.flow-legend {
  min-height: 72px;
  padding: 18px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  border: 0;
  background: transparent;
}

.flow-legend > span {
  min-height: 34px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.flow-legend > span:last-child { border-right: 0; }
.flow-legend b { color: var(--ink); white-space: nowrap; }

.legend-line {
  position: relative;
  width: 40px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 2px;
}

.legend-data {
  background: #1d86ff;
  box-shadow: 0 0 8px rgba(29,134,255,0.35);
}

.legend-data::before,
.legend-data::after {
  content: "";
  position: absolute;
  top: -3px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.legend-data::before { left: -1px; border-right: 6px solid #1d86ff; }
.legend-data::after { right: -1px; border-left: 6px solid #1d86ff; }

.legend-info {
  height: 0;
  border-top: 3px dashed var(--hermes-orange);
}

.legend-logistics {
  height: 8px;
  background: #596574;
}

.legend-logistics::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 3px;
  border-top: 2px dashed #fff;
}

.collaboration-summary {
  padding: 18px 0 0;
  display: block;
  border: 0;
  border-top: 1px solid rgba(23,105,210,0.16);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}

.summary-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.summary-flow > svg {
  width: 17px;
  height: 17px;
  color: var(--brand);
}

.collaboration-summary strong {
  display: block;
  margin-top: 8px;
  color: var(--brand);
  text-align: center;
  font-size: 12px;
}

/* Collaboration Split Layout (Left-Right Structure) */
.collaboration-section-split {
  padding-top: 84px;
  padding-bottom: 84px;
}

.collaboration-split-layout {
  display: grid;
  grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.collaboration-split-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.collaboration-split-heading {
  margin-bottom: 2px;
}

.collaboration-split-heading .section-kicker {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(23, 105, 210, 0.08);
  color: var(--brand);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.collaboration-split-heading h2 {
  font-size: 30px;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 14px;
}

.collaboration-split-heading .title-rule {
  width: 44px;
  height: 3px;
  background: var(--brand);
  border-radius: 2px;
  margin-bottom: 14px;
}

.collaboration-lead {
  font-size: 15px;
  line-height: 1.68;
  color: var(--muted);
  margin: 0;
}

.collaboration-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.collab-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid rgba(23, 105, 210, 0.12);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(10, 30, 60, 0.03);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.collab-step-item:hover {
  border-color: rgba(23, 105, 210, 0.35);
  box-shadow: 0 4px 14px rgba(23, 105, 210, 0.08);
  transform: translateY(-1px);
}

.collab-step-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand);
  background: rgba(23, 105, 210, 0.08);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex: 0 0 auto;
}

.collab-step-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.flow-legend-split {
  min-height: auto;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid rgba(23, 105, 210, 0.12);
  border-radius: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  box-shadow: 0 2px 8px rgba(10, 30, 60, 0.03);
}

.flow-legend-split > span {
  padding: 0 6px;
  font-size: 11px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}

.flow-legend-split > span:last-child {
  border-right: 0;
}

.collaboration-split-conclusion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(23, 105, 210, 0.06);
  border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0;
}

.collaboration-split-conclusion .conclusion-icon {
  width: 18px;
  height: 18px;
  color: var(--brand);
  flex: 0 0 auto;
  margin-top: 2px;
}

.collaboration-split-conclusion .conclusion-icon svg {
  width: 100%;
  height: 100%;
}

.collaboration-split-conclusion p {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  line-height: 1.5;
}

.collaboration-split-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collaboration-canvas-split {
  margin: 0;
  padding: 0;
  width: 100%;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.collaboration-canvas-split:hover {
  transform: translateY(-3px) scale(1.01);
}

.collaboration-canvas-split > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 36px rgba(18, 48, 90, 0.08));
}

@media (max-width: 1024px) {
  .collaboration-split-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .collaboration-split-copy {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .collaboration-steps-grid {
    grid-template-columns: 1fr;
  }
  .flow-legend-split {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .flow-legend-split > span {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 6px;
  }
  .flow-legend-split > span:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .collaboration-split-heading h2 {
    font-size: 25px;
  }
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(150px, 1fr));
  gap: 0;
  min-width: 1200px;
  min-height: 310px;
  padding: 0;
  border: 0;
  overflow: visible;
}

.timeline::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 2px dotted rgba(47, 141, 243, .6);
}

.timeline-item {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 310px;
  padding: 18px 18px 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border: 7px solid #d3e6fb;
  border-radius: 50%;
  background: #2f8df3;
  box-sizing: content-box;
}

.timeline-item:nth-child(even) {
  flex-direction: column-reverse;
  padding-top: 0;
  padding-bottom: 18px;
}

.timeline-item strong {
  display: block;
  margin-bottom: 14px;
  color: var(--brand);
  font-size: 24px;
  line-height: 1.2;
}

.timeline-item p {
  max-width: 150px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.timeline-item:nth-child(even) strong { margin-top: 14px; margin-bottom: 0; }

@media (max-width: 820px) {
  .timeline { overflow-x: auto; padding-bottom: 10px; }
}

/* 解决方案客户价值卡片：与产品价值卡片保持同一视觉语言 */
.solution-value-focus {
  padding: 34px;
  border: 1px solid #e0eaf4;
  border-radius: 24px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef5fc 100%);
  box-shadow: 0 20px 48px rgba(31, 74, 117, .1);
}
.solution-value-items .solution-build-item,
.solution-value-items .solution-value-filler {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: 200px;
  padding: 24px;
  border: 1px solid #dce7f1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(24, 67, 112, .08);
}
.solution-value-items .solution-build-item:nth-child(3n+1),
.solution-value-items .solution-build-item:nth-child(3n) { padding-left: 24px; padding-right: 24px; }
.solution-value-items .solution-build-item:not(:nth-child(3n)),
.solution-value-filler:not(:nth-child(3n)) { border-right: 1px solid #dce7f1; }
.solution-value-items .solution-build-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--surface-blue);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(23, 105, 210, .08), 0 8px 18px rgba(48, 116, 204, .12);
}
.solution-value-items .solution-build-item p {
  margin: 22px 0 0;
  padding-top: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
}
.solution-value-items .solution-build-index { display: block; top: 24px; right: 22px; color: rgba(23, 105, 210, .22); }
.solution-value-items .solution-build-item::after {
  top: auto;
  right: auto;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f8df3, #7dd3fc);
}
.solution-value-items .solution-build-item:hover {
  transform: translateY(-3px);
  border-color: rgba(23, 105, 210, .3);
  background: #fff;
  box-shadow: 0 16px 30px rgba(24, 67, 112, .14);
}
.solution-value-items .solution-build-item:hover > .solution-build-icon {
  transform: translateY(-2px);
  background: linear-gradient(145deg, #6ea9ed, #347bd2);
  color: #fff;
}

/* 产品价值卡片样式同步到解决方案的客户价值模块，仅改变视觉表现 */
.solution-value-focus {
  padding: 34px;
  border: 1px solid #e0eaf4;
  border-radius: 24px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef5fc 100%);
  box-shadow: 0 20px 48px rgba(31, 74, 117, .1);
}
.solution-value-items .solution-build-item,
.solution-value-items .solution-value-filler {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: 200px;
  padding: 24px;
  border: 1px solid #dce7f1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(24, 67, 112, .08);
}
.solution-value-items .solution-build-item:nth-child(3n+1),
.solution-value-items .solution-build-item:nth-child(3n) {
  padding-left: 24px;
  padding-right: 24px;
}
.solution-value-items .solution-build-item:not(:nth-child(3n)),
.solution-value-filler:not(:nth-child(3n)) {
  border-right: 1px solid #dce7f1;
}
.solution-value-items .solution-build-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--surface-blue);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(23, 105, 210, .08), 0 8px 18px rgba(48, 116, 204, .12);
}
.solution-value-items .solution-build-item p {
  margin: 22px 0 0;
  padding-top: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.002em;
  text-align: left;
}
.solution-value-items .solution-build-index {
  display: block;
  top: 24px;
  right: 22px;
  color: rgba(23, 105, 210, .22);
}
.solution-value-items .solution-build-item::after {
  top: auto;
  right: auto;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f8df3, #7dd3fc);
}
.solution-value-items .solution-build-item:hover {
  transform: translateY(-3px);
  border-color: rgba(23, 105, 210, .3);
  background: #fff;
  box-shadow: 0 16px 30px rgba(24, 67, 112, .14);
}
.solution-value-items .solution-build-item:hover > .solution-build-icon {
  transform: translateY(-2px);
  background: linear-gradient(145deg, #6ea9ed, #347bd2);
  color: #fff;
}

.section-certificates {
  background: #f4f6f8;
}

/* About page keeps the company story focused on the timeline and credentials. */
.about-page > .section-soft {
  display: none;
}

.about-page .detail-intro {
  grid-template-columns: 1fr;
  gap: 0;
}

.about-page .detail-intro > div {
  max-width: none;
}

.about-page .detail-intro h2 {
  text-align: center;
}

.about-page .page-hero-copy {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.about-page .section-heading {
  justify-content: center;
  text-align: center;
}

.about-page .section-heading > div {
  width: 100%;
}

.about-page .section-heading > p {
  margin: 18px auto 0;
  text-align: center;
}

.about-page .title-rule {
  margin-left: auto;
  margin-right: auto;
}

.about-page .detail-intro .title-rule {
  margin-bottom: 36px;
}

.about-page .boundary-layout > div:first-child > h2 {
  text-align: left;
}

.certificate-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 42px;
}

.certificate-card.certificate-featured {
  grid-column: span 2;
}

.certificate-card {
  min-width: 0;
  border: 1px solid #e2e7ec;
  background: #fff;
  box-shadow: 0 16px 40px rgba(21, 44, 69, 0.08);
}

.certificate-image {
  display: grid;
  place-items: center;
  padding: 12px;
  background: #e9edf0;
  overflow: hidden;
}

.certificate-image img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
}

.certificate-copy {
  display: none;
}

.certificate-copy > span {
  display: block;
  color: var(--brand);
  font: 11px/1.4 "SFMono-Regular", Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.certificate-copy h3 {
  margin: 8px 0 7px;
  font-size: 16px;
  line-height: 1.45;
}

.certificate-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 820px) {
  .certificate-grid { gap: 12px; }
}

@media (max-width: 520px) {
  .certificate-grid { grid-template-columns: 1fr; }
}

.site-footer {
  background: #0a1424;
  color: #fff;
}

.footer-main {
  width: min(var(--content), calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 56px;
  padding: 64px 0 54px;
}

.brand-light {
  color: #fff;
}

.brand-light img {
  filter: none;
}

.brand-light {
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
}

.footer-brand p {
  max-width: 280px;
  margin: 18px 0 0;
  color: rgba(255,255,255,0.58);
  font-size: 14px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-column strong {
  margin-bottom: 6px;
  font-size: 15px;
}

.footer-column a,
.footer-column span {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
}

.footer-column a:hover {
  color: #fff;
}

.footer-bottom {
  width: min(var(--content), calc(100% - 48px));
  margin: 0 auto;
  min-height: 62px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  color: rgba(255,255,255,0.42);
  font-size: 12px;
}

.footer-bottom > :last-child {
  justify-self: end;
  text-align: right;
}

.footer-icp {
  color: inherit;
  text-align: center;
  transition: color 150ms ease;
}

.footer-icp:hover,
.footer-icp:focus-visible {
  color: rgba(255,255,255,0.78);
}

dialog {
  width: min(560px, calc(100% - 32px));
  border: 0;
  border-radius: var(--radius);
  padding: 38px;
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(0,0,0,0.28);
}

dialog::backdrop {
  background: rgba(6, 15, 28, 0.62);
  backdrop-filter: blur(4px);
}

.dialog-close {
  position: absolute;
  right: 14px;
  top: 14px;
}

.dialog-copy h2,
.search-dialog h2 {
  margin: 10px 0 8px;
  font-size: 28px;
}

.dialog-copy p {
  margin: 0;
  color: var(--muted);
}

.contact-options {
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.contact-options > a,
.contact-options > div {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

.contact-options > a:hover {
  color: var(--brand);
}

.contact-options svg {
  width: 22px;
  height: 22px;
  color: var(--brand);
}

.contact-options b,
.contact-options em {
  display: block;
}

.contact-options em {
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}

.download-dialog {
  width: min(840px, calc(100% - 32px));
  max-height: min(88vh, 760px);
  overflow: auto;
  border-radius: 16px;
  padding: 38px;
}

.download-dialog-copy {
  padding-right: 42px;
}

.download-store-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.download-store-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
}

.download-store-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.download-platform-icon {
  display: inline-flex;
  min-width: 46px;
  height: 46px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: var(--ink);
  font-size: 12px;
  font-weight: 750;
}

.download-store-android .download-platform-icon {
  background: #238b57;
}

.download-store-heading strong,
.download-store-heading small {
  display: block;
}

.download-store-heading strong {
  font-size: 16px;
}

.download-store-heading small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.store-search-preview {
  padding: 14px;
  border: 1px solid #e5e9ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(22, 37, 58, .08);
}

.store-preview-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 12px;
  color: var(--ink-2);
  font-size: 12px;
}

.store-search-field {
  display: flex;
  height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--ink-2);
  background: #eef1f5;
  font-size: 12px;
}

.store-search-field svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.store-result-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.coalboss-app-icon {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(145deg, #edf6ff, #fff);
  box-shadow: inset 0 0 0 1px rgba(23, 105, 210, .12);
}

.coalboss-app-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.store-result-copy b,
.store-result-copy small {
  display: block;
}

.store-result-copy b {
  font-size: 14px;
}

.store-result-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.store-action-pill {
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--brand);
  background: var(--surface-blue);
  font-size: 11px;
  font-weight: 750;
}

.download-store-card > p {
  margin: 14px 2px 0;
  color: var(--muted);
  font-size: 12px;
}

.download-dialog-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.download-dialog-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.search-field {
  height: 52px;
  margin-top: 24px;
  padding: 0 16px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-field:focus-within {
  border-color: var(--brand);
}

.search-field svg {
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.search-field input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  font-size: 16px;
}

.search-results {
  margin-top: 18px;
  max-height: 360px;
  overflow: auto;
  border-top: 1px solid var(--line);
}

.search-results a {
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.search-results a:hover {
  color: var(--brand);
}

.search-results span {
  color: var(--muted);
  font-size: 13px;
}

.fade-in {
  animation: fade-in 420ms ease both;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1050px) {
  .header-inner {
    gap: 10px;
  }

  .primary-nav > a,
  .primary-nav > button {
    min-width: auto;
    padding: 0 8px;
    font-size: 14px;
  }

  .brand img { width: 142px; }
  .header-cta { padding: 0 14px; }

  .hero {
    background-size: 610px auto;
    background-position: calc(50% + 185px) center;
  }

  .hero-copy {
    max-width: 520px;
  }

  .hero h1 {
    font-size: 48px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .coalboss-entry-layout,
  .coalboss-hero-layout {
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 46px;
  }

  .coalboss-hero-copy h1 { font-size: 40px; }
  .cds-hero-layout { grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr); gap: 24px; }
  .cds-hub { width: 480px; transform: scale(0.9); transform-origin: center; }
  .connected-systems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  :root {
    --header-height: 64px;
  }

  .header-inner,
  .content-wrap,
  .hero-inner,
  .mega-inner,
  .footer-main,
  .footer-bottom {
    width: min(100% - 32px, var(--content));
  }

  .mobile-menu-button {
    display: inline-grid;
  }

  .header-actions .icon-button,
  .header-cta {
    display: none;
  }

  /* 注意：.site-header 带 backdrop-filter，会成为 fixed 子元素的包含块。
     所以这里不能用 top:var(--header-height) + bottom:0（会被压成 1px 高、
     内容被 overflow 裁掉、点击全部落到页面内容上），必须显式给视口高度。 */
  .primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-height);
    bottom: auto;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    padding: 18px 16px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .primary-nav.mobile-open {
    display: flex;
  }

  .primary-nav > a,
  .primary-nav > button {
    min-height: 56px;
    justify-content: space-between;
    padding: 0 8px;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
  }

  .primary-nav > a::after,
  .primary-nav > button::after {
    display: none;
  }

  /* 同上：改用 absolute（相对 sticky 头部），显式限制高度，避免面板塌陷 */
  .mega-menu {
    position: absolute;
    top: var(--header-height);
    bottom: auto;
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mega-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 28px;
  }

  .mega-links {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 650px;
    align-items: flex-start;
    background-size: 410px auto;
    background-position: center 94%;
  }

  .hero-inner {
    padding: 52px 0 242px;
  }

  .hero h1 {
    font-size: 42px;
  }

  .hero-lead {
    font-size: 18px;
  }

  .section {
    padding: 68px 0;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 32px;
  }

  .section-heading h2 {
    font-size: 32px;
  }

  .product-explorer,
  .product-center-block-head,
  .product-center-columns,
  .product-center-values,
  .product-copy-section-layout,
  .detail-intro,
  .solution-layout,
  .product-screen-layout,
  .coalboss-entry-layout,
  .coalboss-hero-layout,
  .cds-hero-layout,
  .boundary-layout,
  .business-columns {
    grid-template-columns: 1fr;
  }

  .product-center-block { padding: 26px 20px; }
  .product-center-block-head h2 { font-size: 30px; }
  .capability-list,
  .product-highlights,
  .customer-card-grid,
  .product-value-grid,
  .connection-grid,
  .delivery-grid { grid-template-columns: 1fr; }

  .coalboss-entry-layout,
  .coalboss-hero-layout,
  .cds-hero-layout { gap: 40px; padding: 62px 0; }
  .coalboss-hero-copy h1,
  .cds-hero-copy h1 { font-size: 38px; }
  .problem-strip,
  .protocol-grid,
  .connected-systems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-layers article { grid-template-columns: 80px minmax(0, 1fr); }
  .cds-hub { max-width: 100%; transform: scale(0.82); transform-origin: left center; }

  .flow-legend { grid-template-columns: 1fr; }
  .flow-legend > span { min-height: 48px; border-right: 0; border-bottom: 1px solid var(--line); }
  .flow-legend > span:last-child { border-bottom: 0; }
  .collaboration-summary { text-align: center; }
  .summary-flow > svg { display: none; }

  .product-screen-layout {
    gap: 34px;
  }

  .product-matrix-visual {
    padding: 0;
  }

  .solution-copy h2 {
    font-size: 36px;
  }

  .case-grid,
  .role-grid {
    grid-template-columns: 1fr;
  }

  .about-band {
    grid-template-columns: 1fr;
  }

  .about-image {
    min-height: 300px;
  }

  .about-copy {
    padding: 52px 24px;
  }

  .contact-strip-inner,
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-block: 18px;
  }

  .footer-bottom > :last-child,
  .footer-icp {
    justify-self: start;
    text-align: left;
  }

  .detail-hero {
    min-height: 680px;
    align-items: flex-start;
    background-size: 500px auto;
    background-position: center 92%;
  }
  .product-page .detail-hero {
    background-position: center 92%;
  }

  .detail-hero-copy {
    padding: 58px 0 310px;
  }

  .case-detail-hero .detail-hero-copy {
    max-width: 100%;
  }

  .detail-hero h1,
  .page-hero-copy h1 {
    font-size: 39px;
  }

  .related-grid,
  .timeline {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .solution-step {
    grid-template-columns: 52px 1fr;
  }

  .solution-step span {
    grid-column: 2;
  }
}

@media (max-width: 520px) {
  .brand {
    font-size: 18px;
  }

  .brand img {
    width: 142px;
    height: auto;
  }

  .hero {
    min-height: 700px;
    background-size: 430px auto;
  }

  .hero-inner {
    padding-top: 50px;
  }

  .hero h1 {
    font-size: 36px;
  }

  .hero-actions .button,
  .section-actions .button {
    width: 100%;
  }

  .hero-notes {
    gap: 8px 14px;
  }

  .section-heading h2,
  .detail-intro h2,
  .detail-section h2 {
    font-size: 29px;
  }

  .mode-switcher {
    display: flex;
    width: 100%;
  }

  .mode-switcher button {
    flex: 1;
  }

  .feature-grid,
  .related-grid,
  .timeline,
  .footer-main,
  .problem-strip,
  .protocol-grid,
  .connected-systems {
    grid-template-columns: 1fr;
  }

  .service-layers article { grid-template-columns: 1fr; gap: 14px; }

  .detail-hero h1,
  .page-hero-copy h1 {
    font-size: 34px;
  }

  .detail-hero {
    background-size: 420px auto;
  }

  .contact-strip h2 {
    font-size: 27px;
  }

  dialog {
    padding: 30px 22px;
  }

  .download-store-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep the about-page history as one continuous horizontal timeline at every viewport. */
.about-page .timeline {
  grid-template-columns: repeat(8, minmax(150px, 1fr));
}

@media (max-width: 820px) {
  .capability-picker {
    width: 100%;
    padding: 0;
  }
  .capability-picker-track {
    justify-content: flex-start;
    width: max-content;
    min-width: max-content;
    padding: 0 10px;
  }
  .capability-tab {
    flex: 0 0 132px;
    min-width: 132px;
    min-height: 104px;
    padding: 12px 10px 20px;
  }
  .capability-tab.active {
    transform: translateY(-2px);
  }
  .capability-tab-title strong {
    font-size: 13px;
  }
  .capability-tab-icon {
    width: 40px;
    height: 40px;
  }
  .capability-tab-icon svg {
    width: 22px;
    height: 22px;
  }
  .capability-preview {
    margin-top: 12px;
    padding: 34px 18px 30px;
  }
  .capability-preview-copy p {
    font-size: 14px;
  }

  .about-page .timeline {
    min-width: 0;
    grid-template-columns: repeat(8, minmax(78px, 1fr));
    min-height: 270px;
    overflow: visible;
  }
  .about-page .timeline-item {
    padding-left: 4px;
    padding-right: 4px;
  }
  .about-page .timeline-item p {
    max-width: 82px;
    font-size: 11px;
    line-height: 1.45;
  }
  .about-page .timeline-item strong {
    font-size: 15px;
  }
  .about-page .timeline-item::before {
    width: 12px;
    height: 12px;
    border-width: 5px;
  }
}

.about-page .detail-intro > div:first-child p {
  text-indent: 2em;
}

.certificate-groups {
  display: grid;
  gap: 48px;
  margin-top: 42px;
}

.certificate-group-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid #dce3e8;
  padding-bottom: 12px;
}

.certificate-group-heading span {
  color: var(--brand);
  font: 11px/1.4 "SFMono-Regular", Menlo, monospace;
  letter-spacing: .08em;
}

.certificate-group-heading h3 {
  margin: 0;
  font-size: 22px;
}

.certificate-group-grid {
  display: grid;
  gap: 20px;
}

.certificate-group-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.certificate-group-software { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 520px) {
  .certificate-group-featured,
  .certificate-group-software { grid-template-columns: 1fr; }
  .certificate-group-heading { display: block; }
  .certificate-group-heading h3 { margin-top: 6px; }
}

.about-page .section-blue .feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  border: 0;
}

.about-page .section-blue .feature-item {
  min-height: 190px;
  border: 1px solid #dfe7ef;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(20, 52, 82, 0.08);
}

@media (max-width: 820px) {
  .about-page .section-blue .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .about-page .section-blue .feature-grid { grid-template-columns: 1fr; }
}

/* Vertical history timeline: each date and description gets its own readable row. */
.about-page .timeline {
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 10px 0;
  flex-direction: column;
  gap: 0;
  overflow: visible;
}

.about-page .timeline::before {
  top: 0;
  bottom: 0;
  left: 10px;
  right: auto;
  border-top: 0;
  border-left: 2px dotted rgba(47, 141, 243, .6);
}

.about-page .timeline-item,
.about-page .timeline-item:nth-child(even) {
  min-height: 0;
  padding: 18px 18px 18px 42px;
  align-items: flex-start;
  text-align: left;
  flex-direction: column;
}

.about-page .timeline-item::before {
  top: 21px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-width: 5px;
}

.about-page .timeline-item strong,
.about-page .timeline-item:nth-child(even) strong {
  margin: 0 0 8px;
  font-size: 22px;
}

.about-page .timeline-item p {
  max-width: none;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

/* Final precedence guard for the about-page history timeline. */
#app .timeline {
  display: flex !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 10px 0 !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: visible !important;
}

#app .timeline::before {
  top: 0 !important;
  bottom: 0 !important;
  left: 10px !important;
  right: auto !important;
  border-top: 0 !important;
  border-left: 2px dotted rgba(47, 141, 243, .6) !important;
}

#app .timeline-item,
#app .timeline-item:nth-child(even) {
  min-height: 0 !important;
  padding: 18px 18px 18px 42px !important;
  align-items: flex-start !important;
  text-align: left !important;
  flex-direction: column !important;
}

#app .timeline-item::before {
  top: 21px !important;
  left: 1px !important;
  width: 12px !important;
  height: 12px !important;
  border-width: 5px !important;
}

/* CoalBoss capability showcases: two phone units per board. */
.coalboss-channel .feature-showcase-block {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  padding: 42px 48px;
}

.coalboss-channel .feature-showcase-unit {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 18px;
}

.coalboss-channel .feature-showcase-unit .phone-mockup {
  width: 180px;
}

.coalboss-channel .feature-showcase-unit .feature-showcase-copy {
  max-width: none;
}

.coalboss-channel .feature-showcase-unit .feature-showcase-copy h3 {
  font-size: 22px;
}

@media (max-width: 900px) {
  .coalboss-channel .feature-showcase-block {
    grid-template-columns: 1fr;
  }
}

/* Product menu uses individual system cards with a clear icon lead. */
.mega-menu[data-mega-menu="products"] .mega-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 0;
}

.mega-menu[data-mega-menu="products"] .mega-links a {
  min-height: 84px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-content: center;
  padding: 16px 18px;
  border: 1px solid #dfe6ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(27, 54, 84, 0.06);
}

.mega-menu[data-mega-menu="products"] .mega-links a:hover {
  border-color: var(--brand);
  background: var(--surface-blue);
}

.mega-menu[data-mega-menu="products"] .mega-product-icon {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 10px;
  color: var(--brand);
  background: #eaf2ff;
}

.mega-menu[data-mega-menu="products"] .mega-links b,
.mega-menu[data-mega-menu="products"] .mega-links span {
  grid-column: 2;
}

@media (max-width: 820px) {
  .mega-menu[data-mega-menu="products"] .mega-links { grid-template-columns: 1fr; }
}

/* Solution menu uses independent cards instead of a table-like matrix. */
.mega-menu[data-mega-menu="solutions"] .mega-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border: 0;
}

.mega-menu[data-mega-menu="solutions"] .mega-links a {
  min-height: 84px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-content: center;
  padding: 16px 18px;
  border: 1px solid #dfe6ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(27, 54, 84, 0.06);
}

.mega-menu[data-mega-menu="solutions"] .mega-links a:hover {
  border-color: var(--brand);
  background: var(--surface-blue);
}

.mega-menu[data-mega-menu="solutions"] .mega-solution-icon {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 10px;
  color: var(--brand);
  background: #eaf2ff;
}

.mega-menu[data-mega-menu="solutions"] .mega-links b,
.mega-menu[data-mega-menu="solutions"] .mega-links span { grid-column: 2; }

@media (max-width: 820px) {
  .mega-menu[data-mega-menu="solutions"] .mega-links { grid-template-columns: 1fr; }
}

/* 产品下拉菜单改为紧凑的单列纵向列表，便于快速扫描。 */
.mega-menu[data-mega-menu="products"] .mega-links {
  grid-template-columns: 1fr;
}
.mega-menu[data-mega-menu="products"] .mega-links a {
  min-height: 64px;
  grid-template-columns: 28px minmax(0, 1fr);
  padding: 10px 14px;
  column-gap: 10px;
}
.mega-menu[data-mega-menu="products"] .mega-product-icon {
  width: 28px;
  height: 28px;
  padding: 6px;
}
.mega-menu[data-mega-menu="products"] .mega-links b { font-size: 14px; }
.mega-menu[data-mega-menu="products"] .mega-links span { font-size: 12px; }

/* Mega menus use editorial grid dividers rather than card surfaces. */
.mega-menu[data-mega-menu="products"] .mega-links,
.mega-menu[data-mega-menu="solutions"] .mega-links {
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.mega-menu[data-mega-menu="products"] .mega-links a,
.mega-menu[data-mega-menu="solutions"] .mega-links a {
  min-height: 96px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mega-menu[data-mega-menu="products"] .mega-links a:hover,
.mega-menu[data-mega-menu="solutions"] .mega-links a:hover {
  border-color: var(--line);
  background: var(--surface-blue);
}

/* 产品菜单保留装饰 Icon，移除表格边框与单元格分隔线。 */
.mega-menu[data-mega-menu="products"] .mega-links {
  gap: 4px;
  border: 0;
}
.mega-menu[data-mega-menu="products"] .mega-links a {
  min-height: 64px;
  grid-template-rows: auto;
  align-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}
.mega-menu[data-mega-menu="products"] .mega-product-icon {
  grid-row: 1;
}
.mega-menu[data-mega-menu="products"] .mega-links b {
  grid-column: 2;
}
.mega-menu[data-mega-menu="products"] .mega-links a:hover {
  border: 0;
  background: var(--surface-blue);
}

/* 行业解决方案菜单与产品菜单保持同样的纵向列表样式。 */
.mega-menu[data-mega-menu="solutions"] .mega-links {
  grid-template-columns: 1fr;
  gap: 4px;
  border: 0;
}
.mega-menu[data-mega-menu="solutions"] .mega-links a {
  min-height: 64px;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  padding: 10px 14px;
  column-gap: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}
.mega-menu[data-mega-menu="solutions"] .mega-links a:hover {
  border: 0;
  background: var(--surface-blue);
}
.mega-menu[data-mega-menu="solutions"] .mega-solution-icon {
  grid-row: 1;
  width: 28px;
  height: 28px;
  padding: 6px;
}
.mega-menu[data-mega-menu="solutions"] .mega-links b {
  grid-column: 2;
  font-size: 14px;
}

/* CoalBoss problem points use separate cards. */
.coalboss-channel .problem-strip {
  gap: 18px;
  margin-top: 52px;
  border: 0;
}

.coalboss-channel .problem-strip article {
  min-height: 220px;
  border: 1px solid #dfe7ef;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(20, 52, 82, 0.08);
}

.coalboss-channel .outcome-card-grid article,
.coalboss-channel .connection-card-grid article {
  display: flex;
  min-height: 190px;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
}

.outcome-card-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(31, 111, 216, .08);
  color: var(--brand);
}

.outcome-card-icon svg {
  width: 21px;
  height: 21px;
}

.connection-card-icon {
  background: rgba(18, 156, 145, .1);
  color: #129c91;
}

.coalboss-channel .connection-card-grid article {
  padding: 20px 24px;
}

.coalboss-channel .connection-card-grid p {
  font-size: 13px;
  line-height: 1.65;
}

.coalboss-channel .outcome-card-grid h3,
.coalboss-channel .connection-card-grid h3 {
  margin-top: 14px;
}

.coalboss-channel .outcome-card-grid article,
.coalboss-channel .connection-card-grid article {
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.coalboss-channel .outcome-card-grid article h3,
.coalboss-channel .outcome-card-grid article p,
.coalboss-channel .outcome-card-grid article .outcome-card-icon,
.coalboss-channel .connection-card-grid article h3,
.coalboss-channel .connection-card-grid article p,
.coalboss-channel .connection-card-grid article .outcome-card-icon {
  transition: color 220ms ease, background-color 220ms ease;
}

.coalboss-channel .outcome-card-grid article:hover,
.coalboss-channel .outcome-card-grid article:focus-within {
  background-color: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 18px 38px rgba(23, 105, 210, 0.24);
  transform: translateY(-4px);
}

.coalboss-channel .outcome-card-grid article:hover h3,
.coalboss-channel .outcome-card-grid article:focus-within h3 {
  color: #fff;
}

.coalboss-channel .outcome-card-grid article:hover p,
.coalboss-channel .outcome-card-grid article:focus-within p {
  color: rgba(255, 255, 255, 0.84);
}

.coalboss-channel .outcome-card-grid article:hover .outcome-card-icon,
.coalboss-channel .outcome-card-grid article:focus-within .outcome-card-icon {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.coalboss-channel .connection-card-grid article:hover,
.coalboss-channel .connection-card-grid article:focus-within {
  background-color: #129c91;
  border-color: #129c91;
  box-shadow: 0 18px 38px rgba(18, 156, 145, 0.24);
  transform: translateY(-4px);
}

.coalboss-channel .connection-card-grid article:hover h3,
.coalboss-channel .connection-card-grid article:focus-within h3 {
  color: #fff;
}

.coalboss-channel .connection-card-grid article:hover p,
.coalboss-channel .connection-card-grid article:focus-within p {
  color: rgba(255, 255, 255, 0.84);
}

.coalboss-channel .connection-card-grid article:hover .outcome-card-icon,
.coalboss-channel .connection-card-grid article:focus-within .outcome-card-icon {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .coalboss-channel .outcome-card-grid article,
  .coalboss-channel .outcome-card-grid article h3,
  .coalboss-channel .outcome-card-grid article p,
  .coalboss-channel .outcome-card-grid article .outcome-card-icon,
  .coalboss-channel .connection-card-grid article,
  .coalboss-channel .connection-card-grid article h3,
  .coalboss-channel .connection-card-grid article p,
  .coalboss-channel .connection-card-grid article .outcome-card-icon {
    transition: none;
  }

  .coalboss-channel .outcome-card-grid article:hover,
  .coalboss-channel .outcome-card-grid article:focus-within,
  .coalboss-channel .connection-card-grid article:hover,
  .coalboss-channel .connection-card-grid article:focus-within {
    transform: none;
  }
}

/* CoalBoss problem section: title and supporting copy stack vertically. */
.coalboss-channel .section-soft .section-heading {
  display: block;
}

.coalboss-channel .section-soft .section-heading h2 {
  white-space: nowrap;
  font-size: clamp(26px, 4vw, 50px);
}

/* CoalBoss annotated section titles keep a consistent hierarchy across desktop and mobile. */
.coalboss-channel .coalboss-tiered-heading.coalboss-heading-compact h2 {
  font-size: clamp(29px, 3.5vw, 36px);
}

.coalboss-channel .coalboss-tiered-heading.coalboss-heading-market h2 {
  font-size: clamp(29px, 3.3vw, 34px);
}

.coalboss-channel .section-soft .section-heading > p {
  max-width: 900px;
  margin: 18px 0 0;
}

/* Page section headings: supporting copy always sits below the main title. */
.section-heading {
  display: block;
}

.section-heading > p {
  max-width: 760px;
  margin-top: 16px;
}

/* ===== 煤博事频道文案 V0.1 模块样式（20260911） ===== */
.coalboss-brandline {
  margin: 20px 0 0;
  color: var(--brand);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.coalboss-caption {
  margin-top: 20px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.coalboss-lead {
  width: 100%;
  max-width: none;
  margin: 28px 0 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.9;
  text-indent: 2em;
}

.coalboss-lead + .coalboss-lead,
.coalboss-outcome-section .coalboss-lead + .coalboss-lead {
  margin-top: 0;
}

.coalboss-pain-section .section-heading {
  margin-bottom: 22px;
}

.coalboss-pain-section .section-heading + .coalboss-lead {
  margin-top: 0;
}

.section-night .coalboss-lead {
  color: rgba(255,255,255,0.72);
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin-top: 36px;
}

.pain-grid article {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 22px;
  border: 1px solid rgba(232, 139, 43, .2);
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 28px rgba(51, 66, 84, .06);
  transition: border-color .24s ease, transform .24s ease, box-shadow .24s ease;
}

.pain-grid article:hover {
  border-color: rgba(232, 139, 43, .46);
  box-shadow: 0 14px 34px rgba(51, 66, 84, .1);
  transform: translateY(-3px);
}

.pain-grid svg {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(242, 140, 40, .12);
  color: #e9821e;
  flex: 0 0 auto;
  box-sizing: content-box;
}

.pain-grid p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.75;
}

.coalboss-slogan {
  max-width: 860px;
  margin: 44px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--brand);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
}

.coalboss-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.coalboss-chips span {
  padding: 9px 18px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
}

.coalboss-erp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 55%);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.coalboss-erp-copy .section-heading {
  margin-bottom: 36px;
}

.coalboss-erp-copy .coalboss-lead {
  font-size: 16px;
  line-height: 1.9;
}

.coalboss-orbit {
  position: relative;
  width: min(100%, 540px);
  height: clamp(440px, 45vw, 540px);
  margin: 0 auto;
  justify-self: end;
  overflow: visible;
  isolation: isolate;
}

.coalboss-orbit::before,
.coalboss-orbit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.coalboss-orbit::before {
  width: 76%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(23, 105, 210, .08) 0 2px, transparent 3px) 0 0 / 34px 34px;
  opacity: .62;
  -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 58%, transparent 78%);
  mask: radial-gradient(circle, transparent 0 18%, #000 58%, transparent 78%);
}

.coalboss-orbit::after {
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(44, 143, 243, .2), rgba(44, 143, 243, .05) 46%, transparent 70%);
  filter: blur(8px);
}

.coalboss-orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  border: 1px solid rgba(23, 105, 210, .2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.orbit-ring-outer {
  width: min(78%, 420px);
  border-style: dashed;
}

.orbit-ring-inner {
  width: min(46%, 250px);
  border-style: dotted;
  border-color: rgba(23, 105, 210, .3);
}

.coalboss-orbit-core {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  display: grid;
  place-content: center;
  width: 116px;
  height: 116px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: linear-gradient(145deg, #1769d2, #3798f0);
  color: #fff;
  text-align: center;
  box-shadow: 0 22px 54px rgba(23, 105, 210, .26), inset 0 0 0 8px rgba(255,255,255,.08);
  transform: translate(-50%, -50%);
}

.coalboss-orbit-core strong {
  font-size: 22px;
  letter-spacing: .08em;
}

.coalboss-orbit-core small {
  margin-top: 4px;
  color: rgba(255,255,255,.76);
  font-size: 12px;
  letter-spacing: .18em;
}

.coalboss-orbit-track {
  --orbit-duration: 32s;
  --orbit-radius: 120px;
  position: absolute;
  z-index: 3;
  inset: 0;
  animation: coalboss-orbit-spin var(--orbit-duration) linear infinite;
  pointer-events: none;
}

.orbit-track-inner {
  --orbit-radius: clamp(92px, 12vw, 125px);
  --orbit-duration: 36s;
}

.orbit-track-outer {
  --orbit-radius: clamp(154px, 20vw, 210px);
  --orbit-duration: 36s;
}

.coalboss-orbit-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--orbit-angle)) translateX(var(--orbit-radius));
  transform-origin: 0 0;
}

.coalboss-orbit-node > span {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  min-width: 116px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border: 1px solid rgba(23, 105, 210, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #155898;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(36, 86, 139, .12);
  transform: translate(-50%, -50%) rotate(var(--label-angle));
  animation: coalboss-orbit-label var(--orbit-duration) linear infinite;
  pointer-events: auto;
}

.coalboss-orbit:hover .coalboss-orbit-track,
.coalboss-orbit:hover .coalboss-orbit-node > span {
  animation-play-state: paused;
}

@keyframes coalboss-orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes coalboss-orbit-label {
  from { transform: translate(-50%, -50%) rotate(var(--label-angle)); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--label-angle) - 360deg)); }
}

@media (max-width: 760px) {
  .coalboss-erp-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .coalboss-orbit {
    height: 420px;
    justify-self: center;
  }
  .orbit-track-inner { --orbit-radius: 78px; }
  .orbit-track-outer { --orbit-radius: 142px; }
  .coalboss-orbit-core {
    width: 104px;
    height: 104px;
  }
  .coalboss-orbit-core strong { font-size: 20px; }
  .coalboss-orbit-node > span {
    min-width: 96px;
    min-height: 38px;
    padding: 7px 10px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coalboss-orbit-track,
  .coalboss-orbit-node > span {
    animation-play-state: paused !important;
  }
}

.schedule-board {
  margin-top: 46px;
}

.coalboss-schedule-section {
  padding-bottom: 46px;
}

.schedule-illustration {
  margin: 0;
}

.schedule-illustration img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  filter: saturate(.72);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.schedule-illustration figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
}

.coalboss-quote {
  max-width: 860px;
  margin: 46px 0 0;
  padding: 28px 34px;
  border-radius: var(--radius);
  background: var(--night);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
}

.feature-points.market-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0;
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid rgba(23, 105, 210, .16);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(34, 76, 119, .07);
}

.coalboss-channel .feature-points.market-cols li {
  min-height: 68px;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 17px 20px;
  border-bottom: 1px solid rgba(23, 105, 210, .12);
  background: rgba(255, 255, 255, .92);
  font-size: 16px;
  line-height: 1.65;
}

.coalboss-channel .feature-points.market-cols li:nth-child(odd) {
  border-right: 1px solid rgba(23, 105, 210, .12);
}

.coalboss-channel .feature-points.market-cols li:last-child {
  border-bottom: 0;
}

.coalboss-channel .feature-points.market-cols svg {
  width: 18px;
  height: 18px;
  margin-top: 0;
  color: var(--brand);
}

.coalboss-market-lead {
  margin-top: 14px;
}

.coalboss-market-lead + .feature-points.market-cols {
  margin-top: 17px;
}

.coalboss-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.solution-page .solution-combo-note {
  margin-top: 12px;
  font-size: 10px;
  line-height: 1.6;
}

.solution-page .solution-combo-note + .solution-combo-note {
  margin-top: 2px;
}

.d3o5-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 26px;
  margin-top: 44px;
}

.d3o5-grid article {
  padding: 34px;
  border: 1px solid rgba(47, 141, 243, .48);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(47, 141, 243, .11), rgba(255,255,255,.035) 58%);
  box-shadow: inset 0 3px 0 rgba(47, 141, 243, .82);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.d3o5-grid article:nth-child(2) {
  border-color: rgba(232, 139, 43, .5);
  background: linear-gradient(145deg, rgba(232, 139, 43, .12), rgba(255,255,255,.035) 58%);
  box-shadow: inset 0 3px 0 rgba(232, 139, 43, .86);
}

.d3o5-grid em {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(47,141,243,0.14);
  color: #2f8df3;
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.d3o5-grid article:nth-child(2) em {
  background: rgba(232, 139, 43, .16);
  color: #f1a34f;
}

.d3o5-grid h3 {
  margin: 18px 0 10px;
  color: #fff;
  font-size: 22px;
}

.d3o5-grid .d3o5-principle {
  color: #84c5ff;
  font-weight: 700;
}

.d3o5-grid article:nth-child(2) .d3o5-principle {
  color: #f5b86f;
}

.d3o5-grid p {
  color: rgba(255,255,255,0.72);
}

.d3o5-grid em,
.d3o5-grid h3,
.d3o5-grid p {
  transition: color 220ms ease, background-color 220ms ease;
}

.d3o5-grid article:hover,
.d3o5-grid article:focus-within {
  border-color: #2f8df3;
  background: #1769d2;
  box-shadow: 0 18px 42px rgba(0, 40, 92, 0.38);
  transform: translateY(-4px);
}

.d3o5-grid article:nth-child(2):hover,
.d3o5-grid article:nth-child(2):focus-within {
  border-color: #e88b2b;
  background: #a95516;
  box-shadow: 0 18px 42px rgba(75, 34, 4, 0.38);
}

.d3o5-grid article:hover em,
.d3o5-grid article:focus-within em,
.d3o5-grid article:nth-child(2):hover em,
.d3o5-grid article:nth-child(2):focus-within em {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.d3o5-grid article:hover h3,
.d3o5-grid article:focus-within h3,
.d3o5-grid article:hover p,
.d3o5-grid article:focus-within p,
.d3o5-grid article:hover .d3o5-principle,
.d3o5-grid article:focus-within .d3o5-principle {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .d3o5-grid article,
  .d3o5-grid em,
  .d3o5-grid h3,
  .d3o5-grid p {
    transition: none;
  }

  .d3o5-grid article:hover,
  .d3o5-grid article:focus-within {
    transform: none;
  }
}

.d3o5-footer {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 36px;
  align-items: center;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.16);
}

.d3o5-footer p {
  margin: 0;
  color: rgba(255,255,255,0.6);
  font-size: 16px;
}

.coalboss-channel .coalboss-advantages-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.coalboss-channel .coalboss-advantages-grid .feature-item {
  position: relative;
  top: 0;
  z-index: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 24px 20px;
  transition:
    top 220ms ease,
    height 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.coalboss-channel .coalboss-advantages-grid .feature-item h3 {
  font-size: 18px;
}

.coalboss-channel .coalboss-advantages-grid .feature-item h3,
.coalboss-channel .coalboss-advantages-grid .feature-item p,
.coalboss-channel .coalboss-advantages-grid .feature-item .feature-icon {
  transition: color 220ms ease, background-color 220ms ease;
}

.coalboss-channel .coalboss-advantages-grid .feature-item:hover,
.coalboss-channel .coalboss-advantages-grid .feature-item:focus-within {
  z-index: 2;
  border-color: var(--brand);
  background-color: var(--brand);
  box-shadow: 0 22px 46px rgba(23, 105, 210, .26);
}

.coalboss-channel .coalboss-advantages-grid .feature-item:hover h3,
.coalboss-channel .coalboss-advantages-grid .feature-item:focus-within h3 {
  color: #fff;
}

.coalboss-channel .coalboss-advantages-grid .feature-item:hover p,
.coalboss-channel .coalboss-advantages-grid .feature-item:focus-within p {
  color: rgba(255, 255, 255, .86);
}

.coalboss-channel .coalboss-advantages-grid .feature-item:hover .feature-icon,
.coalboss-channel .coalboss-advantages-grid .feature-item:focus-within .feature-icon {
  background-color: rgba(255, 255, 255, .16);
  color: #fff;
}

@media (hover: hover) and (min-width: 901px) {
  .coalboss-channel .coalboss-advantages-grid .feature-item:hover,
  .coalboss-channel .coalboss-advantages-grid .feature-item:focus-within {
    top: -20px;
    height: calc(100% + 40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .coalboss-channel .coalboss-advantages-grid .feature-item,
  .coalboss-channel .coalboss-advantages-grid .feature-item h3,
  .coalboss-channel .coalboss-advantages-grid .feature-item p,
  .coalboss-channel .coalboss-advantages-grid .feature-item .feature-icon {
    transition: none;
  }
}

.coalboss-channel .outcome-card-grid p,
.coalboss-channel .coalboss-advantages-grid .feature-item p {
  font-size: 16px;
}

.coalboss-final {
  padding: 92px 0;
  background: var(--brand);
  color: #fff;
  text-align: center;
}

.coalboss-final h2 {
  font-size: 40px;
  line-height: 1.3;
}

.coalboss-final p {
  max-width: 780px;
  margin: 20px auto 0;
  color: rgba(255,255,255,0.82);
}

.coalboss-final .hero-actions {
  justify-content: center;
  margin-top: 36px;
}

@media (max-width: 900px) {
  .feature-points.market-cols,
  .d3o5-grid {
    grid-template-columns: 1fr;
  }

  .coalboss-channel .feature-points.market-cols li:nth-child(odd) {
    border-right: 0;
  }

  .coalboss-channel .coalboss-advantages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .d3o5-footer {
    grid-template-columns: 1fr;
  }

  .coalboss-final h2 {
    font-size: 32px;
  }
}

@media (max-width: 560px) {
  .coalboss-channel .coalboss-advantages-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .coalboss-schedule-section {
    padding-bottom: 34px;
  }
}

@media (max-width: 560px) {
  .pain-grid {
    grid-template-columns: 1fr;
  }

  .schedule-illustration img { border-radius: 0; }
}

/* ===== 行业解决方案频道文案 V0.1 模块样式（20260911） ===== */
.solutions-highlight {
  margin: 20px 0 0;
  color: var(--brand);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.scenario-card {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.scenario-card:hover {
  background: #f5f9ff;
  transform: translateY(-2px);
}

.scenario-question {
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}

.scenario-card strong {
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
}

.scenario-arrow {
  width: 20px;
  height: 20px;
  margin-top: auto;
  color: var(--brand);
}

.solution-value {
  max-width: 660px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
}
.solution-hero-combo {
  max-width: 760px;
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: 3px solid #70b7ff;
  color: rgba(255,255,255,.92);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.6;
}

.solution-customers {
  margin: 10px 0 0;
  font-size: 22px;
  line-height: 1.55;
}

.solution-boundary {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--brand);
  background: rgba(23, 105, 210, 0.06);
  color: var(--ink-2);
  font-size: 14px;
}

.solution-kicker-gap {
  margin-top: 34px;
}

.solution-combo {
  max-width: 900px;
  margin: 20px 0 0;
  padding: 26px 30px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}

.solution-combo-illustration {
  max-width: 1160px;
  margin: 34px auto 0;
  padding: 24px 20px 18px;
  border: 1px solid rgba(23, 105, 210, .14);
  border-radius: 20px;
  background: linear-gradient(180deg, #fafdff 0%, #f1f7fd 100%);
  overflow: hidden;
}
.solution-combo-illustration figcaption {
  margin: 0 0 16px 4px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .08em;
}
.solution-combo-illustration svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.solution-combo-illustration .combo-rail {
  fill: none;
  stroke: #2f8df3;
  stroke-width: 3;
  stroke-linecap: round;
}
.solution-combo-illustration .combo-rail-secondary {
  stroke: #86c9fb;
  stroke-width: 2;
  stroke-dasharray: 5 8;
}
.solution-combo-illustration text {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.solution-combo-illustration .combo-kicker {
  fill: #7890aa;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .05em;
}
.solution-combo-illustration .combo-kicker-blue { fill: var(--brand); }
.solution-combo-illustration .combo-title {
  fill: #102a43;
  font-size: 20px;
  font-weight: 800;
}
.solution-combo-illustration .combo-body {
  fill: #5f7894;
  font-size: 13px;
}
.solution-combo-illustration .combo-output {
  fill: #1769d2;
  font-size: 12px;
  font-weight: 700;
}
.solution-combo-illustration .combo-caption {
  fill: #647e98;
  font-size: 13px;
  letter-spacing: .02em;
}

.solution-system-map {
  margin: 34px auto 0;
  padding: 16px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.solution-system-map-head {
  display: block;
  margin-bottom: 24px;
}
.solution-map-kicker {
  color: var(--brand);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .08em;
}
.solution-system-map-head h3 {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 34px;
  line-height: 1.3;
  white-space: nowrap;
}
.solution-system-map-subtitle {
  max-width: none;
  margin: 12px 0 0;
  color: var(--brand);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  border-color: #2e2e2e;
}
.solution-system-map-generic-visual {
  margin: 0;
  padding: 20px 24px;
  border: 1px solid rgba(23, 105, 210, .14);
  border-radius: 18px;
  background: linear-gradient(180deg, #fafdff 0%, #eef6fd 100%);
}
.solution-system-map-generic-visual img {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: contain;
}
.solution-system-chip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.solution-system-chip-grid span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #d7e4f2;
  border-radius: 12px;
  background: #fff;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 8px 18px rgba(34, 83, 132, .05);
}
.solution-system-chip-grid b {
  color: var(--brand);
  font-size: 11px;
  letter-spacing: .06em;
}
.solution-system-map-generic .collaboration-summary {
  margin-top: 18px;
}
.solution-system-map-head p {
  max-width: 420px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.solution-system-map-head .solution-system-map-subtitle {
  max-width: none;
  width: max-content;
  font-size: 18px;
}
.solution-system-map-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.solution-system-card {
  position: relative;
  min-width: 0;
  overflow: visible;
  border: 1px solid #d7e4f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(34, 83, 132, .08);
}
.solution-system-card:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -16px;
  width: 16px;
  height: 2px;
  background: #2f8df3;
}
.solution-system-card:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: calc(50% - 4px);
  right: -17px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #2f8df3;
}
.solution-system-card.is-hub {
  border-color: #8ebcf0;
  box-shadow: 0 14px 30px rgba(23, 105, 210, .14);
}
.solution-system-card-media {
  height: 168px;
  padding: 8px 12px 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #fff 0%, #f3f8fd 100%);
}
.solution-system-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.solution-system-card-copy {
  padding: 16px 18px 18px;
}
.solution-system-card-copy > span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}
.solution-system-card-copy h4 {
  margin: 8px 0 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
}
.solution-system-card-copy p {
  min-height: 42px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.solution-system-card-copy strong {
  display: block;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef6ff;
  color: #1769d2;
  font-size: 12px;
  line-height: 1.5;
}
.solution-system-card.is-hub .solution-system-card-copy strong {
  background: #dceeff;
}
.solution-system-flow {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
.solution-flow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
}
.solution-flow-row b {
  margin-right: 8px;
  font-size: 12px;
  letter-spacing: .08em;
}
.solution-flow-row span { color: var(--ink-2); font-weight: 650; }
.solution-flow-row i { font-style: normal; font-size: 18px; line-height: 1; }
.solution-flow-data { background: #e9f4ff; color: #1769d2; }
.solution-flow-data i { color: #2f8df3; }
.solution-flow-goods { background: #fff7ec; color: #b6671f; }
.solution-flow-goods i { color: #d88935; }
.solution-system-map-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.solution-flow-lanes {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
.solution-flow-lane {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 12px 16px;
  border: 1px solid #dce7f1;
  border-left: 4px solid var(--brand);
  border-radius: 14px;
  background: rgba(255,255,255,.8);
}
.solution-flow-lane-head {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.solution-flow-lane-head > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(47,141,243,.1);
  color: var(--brand);
}
.solution-flow-lane-head svg { width: 18px; height: 18px; }
.solution-flow-lane-head b { display: block; color: var(--ink); font-size: 15px; }
.solution-flow-lane-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.solution-flow-lane-track {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}
.solution-flow-lane-track > span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid rgba(47,141,243,.18);
  border-radius: 9px;
  background: #f7fbff;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}
.solution-flow-lane-track > i { display: inline-flex; color: var(--brand); font-style: normal; }
.solution-flow-lane-track > i svg { width: 15px; height: 15px; }
.solution-flow-lane-information { border-left-color: #2f8df3; }
.solution-flow-lane-data { border-left-color: #2f9de4; }
.solution-flow-lane-data .solution-flow-lane-head > span { background: rgba(47,157,228,.12); color: #1a6fb5; }
.solution-flow-lane-data .solution-flow-lane-track > span { border-color: rgba(47,157,228,.2); background: #f3f9ff; }
.solution-flow-lane-data .solution-flow-lane-track > i { color: #1a6fb5; }
.solution-flow-lane-logistics { border-left-color: #d88935; }
.solution-flow-lane-logistics .solution-flow-lane-head > span { background: rgba(216,137,53,.12); color: #b6671f; }
.solution-flow-lane-logistics .solution-flow-lane-track > span { border-color: rgba(216,137,53,.22); background: #fff9f1; }
.solution-flow-lane-logistics .solution-flow-lane-track > i { color: #b6671f; }
.solution-flow-lane-funds { border-left-color: #6f62c6; }
.solution-flow-lane-funds .solution-flow-lane-head > span { background: rgba(111,98,198,.12); color: #6258af; }
.solution-flow-lane-funds .solution-flow-lane-track > span { border-color: rgba(111,98,198,.22); background: #f8f6ff; }
.solution-flow-lane-funds .solution-flow-lane-track > i { color: #6258af; }

/* Open 2.5D system map: the illustrations sit directly on the shared field. */
.solution-system-map-canvas {
  position: relative;
  min-height: 820px;
  margin-top: 8px;
}
.solution-system-map-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.solution-system-map-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.solution-system-map-full-art {
  width: 100%;
  max-width: none;
  left: 0;
  right: 0;
  transform: none;
  height: auto;
  object-fit: contain;
}

/* 解决方案透明系统图：统一降低蓝色饱和度与高光亮度 */
.solution-page .solution-system-map-mine .solution-system-map-full-art,
.solution-page .solution-system-map-supply .solution-system-map-full-art,
.solution-page .solution-system-map-washing .solution-system-map-full-art,
.solution-page .solution-system-map-freight .solution-system-map-full-art,
.solution-page .solution-system-map-storage .solution-system-map-full-art {
  filter: saturate(.72) brightness(.96);
}
.solution-system-map-supply .solution-system-map-canvas {
  min-height: 0;
  height: auto;
  aspect-ratio: 2003 / 785;
}
.solution-system-map-rendered .solution-system-map-canvas {
  min-height: 0;
  height: auto;
  aspect-ratio: 2003 / 785;
}
.solution-system-map-rendered .solution-system-map-lines,
.solution-system-map-rendered .solution-system-node,
.solution-system-map-rendered .solution-system-flow-legend,
.solution-system-map-rendered .solution-system-map-note {
  display: none;
}
.solution-system-map-supply .solution-system-map-lines,
.solution-system-map-supply .solution-system-node { display: none; }
.solution-system-map-supply .solution-system-flow-legend,
.solution-system-map-supply .solution-system-map-note { display: none; }
.solution-system-map-supply .solution-system-map-lines { display: none; }
.solution-system-node {
  position: absolute;
  z-index: 1;
  width: 250px;
  text-align: center;
}
.solution-system-node-1 { left: 1%; top: 54px; }
.solution-system-node-2 { right: 1%; top: 54px; }
.solution-system-node-3 { left: 1%; bottom: 70px; }
.solution-system-node-4 { right: 1%; bottom: 70px; }
.map-layout-five { min-height: 860px; }
.map-layout-five .solution-system-node-1 { left: 1%; top: 54px; }
.map-layout-five .solution-system-node-2 { right: 1%; top: 54px; }
.map-layout-five .solution-system-node-3 { left: 50%; top: 312px; transform: translateX(-50%); }
.map-layout-five .solution-system-node-4 { left: 1%; bottom: 70px; }
.map-layout-five .solution-system-node-5 { right: 1%; bottom: 70px; }
.map-layout-three { min-height: 760px; }
.map-layout-three .solution-system-node-1 { left: 1%; top: 166px; }
.map-layout-three .solution-system-node-2 { right: 1%; top: 166px; }
.map-layout-three .solution-system-node-3 { left: 50%; bottom: 70px; transform: translateX(-50%); }
.solution-system-node-label {
  position: relative;
  min-height: 76px;
  padding-top: 2px;
  text-align: left;
}
.solution-system-node-label > span {
  display: inline-grid;
  width: 28px;
  height: 28px;
  margin-right: 7px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #2f8df3, #1769d2);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
}
.solution-system-node-label small {
  color: var(--brand);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  vertical-align: middle;
}
.solution-system-node-label h4 {
  margin: 9px 0 0;
  color: #102a43;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.3;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
.solution-system-node-media {
  height: 208px;
  display: grid;
  place-items: center;
}
.solution-system-node-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.solution-system-node > p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.solution-system-node > strong {
  display: block;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(23, 105, 210, .2);
  color: #1769d2;
  font-size: 12px;
  line-height: 1.5;
}
.solution-system-node.is-hub .solution-system-node-label h4 { color: #1769d2; }
.solution-system-node.is-hub > strong { border-color: rgba(23, 105, 210, .38); }
.solution-system-map-lines .map-line {
  fill: none;
  stroke-linecap: round;
}
.solution-system-map-lines .map-line-data {
  stroke: #2f8df3;
  stroke-width: 3;
  opacity: .95;
}
.solution-system-map-lines .map-line-data-return {
  stroke: #74b5f6;
  stroke-width: 2;
  stroke-dasharray: 5 8;
}
.solution-system-map-lines .map-line-goods {
  stroke: #d88935;
  stroke-width: 3;
  stroke-dasharray: 9 8;
}
.solution-system-map-lines .map-line-funds {
  stroke: #6f62c6;
  stroke-width: 3;
  stroke-dasharray: 4 7;
}
.solution-system-map-lines .map-line-label {
  paint-order: stroke;
  stroke: rgba(250,253,255,.95);
  stroke-width: 6px;
  stroke-linejoin: round;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 750;
}
.solution-system-map-lines .map-line-label-data { fill: #1769d2; }
.solution-system-map-lines .map-line-label-goods { fill: #b6671f; }
.solution-system-map-lines .map-line-label-funds { fill: #6258af; }
.solution-flow-hub { pointer-events: none; }
.solution-flow-hub rect {
  fill: rgba(232, 243, 255, .96);
  stroke: #2f8df3;
  stroke-width: 2;
  filter: drop-shadow(0 10px 18px rgba(47, 141, 243, .16));
}
.solution-flow-hub circle { fill: #2f8df3; }
.solution-flow-hub path { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.solution-flow-hub text:first-of-type { fill: #1769d2; font-size: 16px; font-weight: 800; }
.solution-flow-hub text:last-of-type { fill: #5e7692; font-size: 11px; font-weight: 650; }
.solution-flow-line {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3;
  opacity: .95;
}
.solution-flow-line-information { stroke: #2f8df3; }
.solution-flow-line-data { stroke: #2f9de4; }
.solution-flow-line-logistics { stroke: #d88935; }
.solution-flow-line-funds { stroke: #6f62c6; }
.solution-flow-line.is-dashed { stroke-dasharray: 6 8; stroke-width: 2.5; }
.solution-flow-label {
  paint-order: stroke;
  stroke: rgba(246,249,252,.96);
  stroke-width: 7px;
  stroke-linejoin: round;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 750;
}
.solution-flow-label-information { fill: #1769d2; }
.solution-flow-label-data { fill: #1a6fb5; }
.solution-flow-label-logistics { fill: #b6671f; }
.solution-flow-label-funds { fill: #6258af; }
.solution-system-flow-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 16px 0 4px;
  border-top: 1px solid rgba(23, 105, 210, .16);
  color: var(--muted);
  font-size: 12px;
}
.solution-system-flow-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.solution-system-flow-legend b { color: var(--ink); }
.map-legend-line {
  width: 28px;
  height: 3px;
  display: inline-block;
  border-radius: 3px;
}
.map-legend-information { background: #2f8df3; }
.map-legend-data { background: #2f9de4; }
.map-legend-logistics { border-top: 3px dashed #d88935; }
.map-legend-funds { border-top: 3px dashed #6f62c6; }

.solution-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 64px;
}

.solution-build-focus-section {
  background:
    radial-gradient(70% 56% at 50% 0%, #e6f1ff 0%, rgba(230, 241, 255, 0) 74%),
    linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
}
.solution-build-focus-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 34px;
}
.solution-build-focus-head h2 {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 34px;
  line-height: 1.3;
}
.solution-build-focus-head > p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.solution-build-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.solution-build-pillar {
  min-height: 206px;
  padding: 22px 22px 24px;
  border-top: 4px solid var(--brand);
  background: #fff;
  box-shadow: 0 12px 28px rgba(26, 67, 111, .08);
}
.solution-build-pillar:nth-child(2) { border-top-color: #2f8df3; }
.solution-build-pillar:nth-child(3) { border-top-color: #6f62c6; }
.solution-build-pillar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.solution-build-pillar-top > span {
  color: rgba(23, 105, 210, .22);
  font-size: 42px;
  font-weight: 850;
  line-height: 1;
}
.solution-build-pillar-top > svg {
  width: 25px;
  height: 25px;
  color: var(--brand);
}
.solution-build-pillar:nth-child(3) .solution-build-pillar-top > svg { color: #6f62c6; }
.solution-build-pillar h3 {
  margin: 18px 0 8px;
  color: var(--ink);
  font-size: 21px;
}
.solution-build-pillar p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.solution-build-detail {
  margin-top: 22px;
  padding: 22px 26px 10px;
  border: 1px solid rgba(23, 105, 210, .13);
  background: rgba(255,255,255,.72);
}
.solution-build-detail-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.solution-build-detail-head span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
}
.solution-build-detail-head strong {
  color: var(--ink);
  font-size: 16px;
}
.solution-build-detail ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.solution-build-detail li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.solution-build-detail li > span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
}
.solution-build-detail li p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}

.solution-build-focus {
  max-width: 1160px;
}

/* 分区标题胶囊 */
.solution-build-focus .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 13px;
  border-radius: 999px;
  background: rgba(23, 105, 210, .08);
  letter-spacing: .03em;
}

.solution-build-focus .section-kicker::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* 重点建设内容：编号徽章卡片 */
.solution-build-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.solution-build-item {
  --accent: #2f8df3;
  --accent-deep: #1769d2;
  --accent-soft: rgba(47, 141, 243, .10);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 168px;
  padding: 24px 22px 22px;
  border: 1px solid rgba(23, 105, 210, .12);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 1px 2px rgba(20, 52, 92, .05), 0 24px 40px -30px rgba(20, 52, 92, .6);
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.solution-build-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
  transition: width 340ms cubic-bezier(.4, 0, .2, 1);
}

.solution-build-item::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, rgba(255, 255, 255, 0) 64%);
  pointer-events: none;
}

.solution-build-item:nth-child(3n+2) { --accent: #2f9de4; --accent-deep: #1a6fb5; --accent-soft: rgba(47, 157, 228, .11); }
.solution-build-item:nth-child(3n+3) { --accent: #6f62c6; --accent-deep: #4f43a6; --accent-soft: rgba(111, 98, 198, .10); }
.solution-build-item:nth-child(4n) { --accent: #d88935; --accent-deep: #b46a1c; --accent-soft: rgba(216, 137, 53, .11); }

.solution-build-item:hover {
  transform: translateY(-3px);
  border-color: rgba(23, 105, 210, .28);
  box-shadow: 0 2px 4px rgba(20, 52, 92, .06), 0 30px 46px -30px rgba(20, 52, 92, .78);
}

.solution-build-item:hover::before {
  width: 100%;
}

.solution-build-item > .solution-build-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65), 0 12px 22px -18px var(--accent-deep);
  transition: transform 220ms ease, background 220ms ease, color 220ms ease;
}

.solution-build-item > .solution-build-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.8;
}

.solution-build-index {
  position: absolute;
  z-index: 1;
  top: 25px;
  right: 24px;
  color: rgba(23, 105, 210, .24);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
}

.solution-build-item:hover > .solution-build-icon {
  transform: translateY(-2px);
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
}

.solution-build-item p {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  color: #16324f;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.72;
  letter-spacing: -.002em;
}

/* ── 重点建设内容：Bento 卡片 + 卡内界面示意（客户价值矩阵不受影响） ── */
.solution-build-items:not(.solution-value-items) {
  gap: 20px;
  margin-top: 30px;
}

.solution-build-items:not(.solution-value-items) > .solution-build-item {
  min-height: 0;
  padding: 24px 24px 0;
  border: 1px solid rgba(23, 105, 210, .10);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 52, 92, .04), 0 20px 44px -30px rgba(20, 52, 92, .55);
  overflow: hidden;
}

.solution-build-items:not(.solution-value-items) > .solution-build-item::before,
.solution-build-items:not(.solution-value-items) > .solution-build-item::after {
  display: none;
}

.solution-build-items:not(.solution-value-items) > .solution-build-item:hover {
  transform: translateY(-4px);
  border-color: rgba(23, 105, 210, .22);
  box-shadow: 0 2px 6px rgba(20, 52, 92, .05), 0 32px 52px -28px rgba(20, 52, 92, .7);
}

.solution-build-items:not(.solution-value-items) > .solution-build-item > p {
  margin: 16px 0 20px;
  color: #10304f;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.62;
  letter-spacing: -.002em;
  text-wrap: pretty;
}

.solution-build-items:not(.solution-value-items) > .solution-build-item > .solution-build-index {
  top: 28px;
  right: 24px;
  color: rgba(23, 105, 210, .22);
}

/* 卡内界面示意：浅蓝面板，下缘出血到卡片边缘，纵向撑满余量 */
.solution-build-illust {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  margin: 20px -24px 0;
  padding: 16px 22px 18px;
  border-top: 1px solid rgba(23, 105, 210, .08);
  background: linear-gradient(180deg, #f6faff 0%, #eaf3ff 100%);
}

.solution-build-illust svg {
  display: block;
  width: 100%;
  height: 132px;
}

/* 产品价值卡片：标题更醒目，底部示意图固定占卡片约三分之一 */
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item {
  min-height: 200px;
  padding-bottom: 30px;
}
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 126px;
  margin: 0;
  flex: none;
  min-height: 0;
}

.product-page .product-value-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust svg {
  width: 130%;
  height: 108px;
  max-width: none;
  margin-left: -15%;
  filter: drop-shadow(0 8px 12px rgba(23, 105, 210, .12));
  transform: scale(1.28);
}
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust { display: none; }
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0 62%, #2f8df3 74%, #7dd3fc 82%, transparent 94% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item::after {
  content: "";
  display: block;
  position: absolute;
  top: auto;
  left: auto;
  right: 24px;
  bottom: 20px;
  width: 104px;
  height: 104px;
  background: url("assets/brand/daye-mark.png") center / contain no-repeat;
  opacity: .06;
  pointer-events: none;
  z-index: 1;
}
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item:hover::before,
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item:focus-within::before {
  opacity: 1;
  animation: product-value-marquee 2.2s linear infinite;
}
@keyframes product-value-marquee { to { transform: rotate(360deg); } }
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item > .solution-build-icon:has(img) {
  width: 78px;
  height: 78px;
  margin-left: auto;
  background: rgba(255,255,255,.5);
  box-shadow: 0 10px 24px rgba(47,141,243,.12);
}
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item > .solution-build-icon img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust svg {
  width: 100%;
  height: 108px;
  margin-left: 0;
  transform: none;
}
/* 各类插画的独立构图微调：主节点放大，辅助节点向两侧展开 */
.product-page .illust-org svg > rect:nth-child(1) { transform: scale(1.14); transform-origin: 62px 26px; }
.product-page .illust-org svg > rect:nth-child(6),
.product-page .illust-org svg > rect:nth-child(9) { transform: translateX(8px); }
.product-page .illust-resource svg > rect[x="86"][y="41"] { transform: scale(1.16); transform-origin: 112px 47px; }
.product-page .illust-resource svg > rect[x="86"][y="63"] { transform: scale(1.12); transform-origin: 108px 69px; }
.product-page .illust-deal svg > rect[x="76"][y="44"] { transform: scale(1.16, 1.08); transform-origin: 86px 70px; }
.product-page .illust-deal svg > rect[x="140"] { transform: translateX(8px); }
.product-page .illust-contract svg > rect[x="30"][y="10"] { transform: scaleX(1.08); transform-origin: 90px 60px; }
.product-page .illust-contract svg > rect[x="166"] { transform: translateX(8px); }
.product-page .illust-payment svg > rect[x="14"] { transform: scale(1.12); transform-origin: 70px 52px; }
.product-page .illust-payment svg > rect[x="140"] { transform: translateX(8px); }
.product-page .illust-fleet svg > rect[x="76"][y="44"] { transform: scale(1.18); transform-origin: 86px 70px; }
.product-page .illust-trace svg > rect[x="88"] { transform: translateX(-8px); }
.product-page .illust-trace svg > rect[x="164"] { transform: translateX(8px); }
.product-page .illust-settle svg > rect[x="96"] { transform: scale(1.16); transform-origin: 130px 61px; }
.product-page .illust-ai svg > rect[x="26"][y="26"] { transform: scale(1.1); transform-origin: 72px 60px; }
.product-page .illust-ai svg > rect[x="136"] { transform: translateX(8px); }
.product-page .illust-api svg > rect[x="96"] { transform: scale(1.16); transform-origin: 130px 61px; }
.product-page .illust-api svg > rect[x="24"] { transform: translateX(-6px); }
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust {
  background:
    linear-gradient(rgba(47, 141, 243, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 141, 243, .055) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(125, 211, 252, .22), rgba(234, 243, 255, .04) 58%),
    linear-gradient(180deg, #f5faff 0%, #e8f2ff 100%);
  background-size: 28px 28px, 28px 28px, auto, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
/* 插画直接落在模块面板上：隐藏 SVG 自带的整块白色内卡，只保留其中的数据元素 */
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust svg > rect[x="12"][y="10"][stroke="#cfe0f6"],
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust svg > rect[x="14"][y="16"][stroke="#cfe0f6"],
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust svg > rect[x="30"][y="10"][stroke="#cfe0f6"] {
  display: none;
}
.product-page .product-value-items:not(.solution-value-items) > .solution-build-item > p {
  font-size: 22px;
}

/* ── 产品价值：沿用「重点建设内容」的 Bento 卡片语言 ── */
.solution-build-focus .section-kicker {
  margin: 0;
}

/* 预留图片槽位为空时不占位，后续替换为实拍图即自动出现 */
.product-value-section .product-image-slot:empty {
  display: none;
}

/* 客户价值：深色成果矩阵（去卡片，靠发丝线与文字建立高级感） */
.solution-value-focus {
  position: relative;
  overflow: hidden;
  margin-top: 64px;
  padding: 40px 44px 44px;
  border-radius: 24px;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(56, 189, 248, .24), rgba(56, 189, 248, 0) 54%),
    radial-gradient(90% 125% at 0% 100%, rgba(47, 141, 243, .26), rgba(47, 141, 243, 0) 58%),
    linear-gradient(152deg, #0a1e36 0%, #102c4b 52%, #0d2b52 100%);
  box-shadow: 0 42px 84px -48px rgba(9, 26, 48, .95), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* 极细网格纹理，只落在右上角 */
.solution-value-focus::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: radial-gradient(122% 112% at 100% 0%, #000 4%, transparent 74%);
  mask-image: radial-gradient(122% 112% at 100% 0%, #000 4%, transparent 74%);
  pointer-events: none;
}

.solution-value-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 22px;
}

.solution-value-focus .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #5fc9ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .24em;
}

.solution-value-focus .section-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.solution-value-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
}

.solution-value-items {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
  margin-top: 8px;
}

.solution-value-items .solution-build-item,
.solution-value-filler {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  min-height: 0;
  padding: 26px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.solution-value-items .solution-build-item:nth-child(3n+1) { padding-left: 0; }
.solution-value-items .solution-build-item:nth-child(3n) { padding-right: 0; }

.solution-value-items .solution-build-item:not(:nth-child(3n)),
.solution-value-filler:not(:nth-child(3n)) {
  border-right: 1px solid rgba(255, 255, 255, .12);
}

/* 补齐矩阵几何的装饰格（纯装饰，无文案） */
.solution-value-filler {
  list-style: none;
  pointer-events: none;
}

.solution-value-filler::before {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, .2) 0%, rgba(56, 189, 248, 0) 66%);
}

.solution-value-filler::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: 26px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(56, 189, 248, .18) 0 25%, transparent 26%),
    radial-gradient(circle, rgba(56, 189, 248, .12) 0 55%, transparent 56%),
    radial-gradient(circle, rgba(56, 189, 248, .07) 0 85%, transparent 86%);
}

.solution-value-items .solution-build-item::before {
  display: none;
}

/* 顶部发丝线悬停点亮 */
.solution-value-items .solution-build-item::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #5fc9ff, rgba(56, 189, 248, .08));
  pointer-events: none;
  transition: width 320ms ease;
}

.solution-value-items .solution-build-item:hover::after {
  width: 100%;
}

.solution-value-items .solution-build-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(56, 189, 248, .26), rgba(56, 189, 248, .05));
  color: #7dd3fc;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .24), 0 16px 28px -20px rgba(56, 189, 248, .95);
}

.solution-value-items .solution-build-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.7;
}

.solution-value-items .solution-build-index {
  display: none;
}

.solution-value-items .solution-build-item p {
  margin: 0;
  padding-top: 8px;
  color: rgba(255, 255, 255, .96);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.68;
  letter-spacing: .002em;
  text-wrap: balance;
}

.solution-value-items .solution-build-item:hover {
  transform: none;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
}

.solution-value-items .solution-build-item:hover > .solution-build-icon {
  transform: translateY(-2px);
  background: linear-gradient(150deg, #38bdf8 0%, #2563eb 100%);
  color: #031f38;
}

/* 四列断点下的网格自适应：按条目数铺满整行，不出现空洞、不用跨列补丁 */
@media (min-width: 981px) {
  /* 产品价值 7 项保持桌面端 3+4 排列：首卡占两列，后续四项铺满第二行。 */
  .product-page .product-value-items[data-count="7"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .product-page .product-value-items[data-count="7"] > .solution-build-item:first-child {
    grid-column: span 2;
  }

  /* 6 条 → 3×2、9 条 → 3×3，天然铺满 */
  .solution-build-items:not(.solution-value-items)[data-count="6"],
  .solution-build-items:not(.solution-value-items)[data-count="9"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 7 条 → 首条升为双宽主卡，2+1+1 与 1+1+1+1 正好填满 4×2 */
  .solution-build-items:not(.solution-value-items)[data-count="7"] > .solution-build-item:first-child {
    grid-column: span 2;
  }

  .solution-build-items:not(.solution-value-items)[data-count="7"] > .solution-build-item:first-child > p {
    font-size: 19px;
    line-height: 1.58;
  }

  /* 客户价值：5 条时用装饰格补齐第 6 格，矩阵始终完整 */
  .solution-value-items[data-count="6"] .solution-value-filler {
    display: none;
  }
}

.solution-bullets {
  margin-top: 22px;
}

.solution-bullets li {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.solution-media figure {
  margin: 0;
  text-align: center;
}

.solution-media img {
  width: 100%;
  max-width: 1080px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 20px 54px rgba(15,35,74,0.12);
}

.solution-caption {
  margin-top: 20px;
  color: var(--muted);
  font-size: 14px;
}

.solution-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

@media (max-width: 980px) {
  .scenario-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .solution-build-focus-head {
    align-items: start;
    flex-direction: column;
    gap: 16px;
  }
  .solution-build-focus-head > p { max-width: 620px; }

  .solution-build-items,
  .solution-value-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 客户价值：两列时改为奇偶分栏，装饰格隐藏、末条补满整行 */
  .solution-value-items .solution-value-filler { display: none; }

  .solution-value-items .solution-build-item:nth-child(odd) {
    padding: 24px 22px 24px 0;
    border-right: 1px solid rgba(255, 255, 255, .12);
  }

  .solution-value-items .solution-build-item:nth-child(even) {
    padding: 24px 0 24px 22px;
    border-right: 0;
  }

  .solution-value-items[data-count="5"] > .solution-build-item:nth-child(5) {
    grid-column: span 2;
    padding-right: 0;
    border-right: 0;
  }

  .solution-build-item { min-height: 0; }

  .product-page .product-value-items:not(.solution-value-items) > .solution-build-item { min-height: 200px; }
  .product-page .product-value-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust { height: 108px; }
  .product-page .product-value-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust svg { width: 100%; max-width: none; height: 88px; margin-left: 0; transform: none; }

  /* 两列时，跨列尾项改按奇偶处理，避免生成的隐式列撑乱网格 */
  .solution-build-items .solution-build-item:last-child:nth-child(odd) { grid-column: span 2; }
  .solution-build-items .solution-build-item:last-child:nth-child(even) { grid-column: auto; }

  .solution-system-node {
    width: 220px;
  }
  .solution-system-node-1 { left: 0; }
  .solution-system-node-2 { right: 0; }
  .solution-system-node-3 { left: 0; }
  .solution-system-node-4 { right: 0; }
  .solution-system-node-media { height: 184px; }
  .solution-system-node-label h4 { font-size: 18px; }
  .map-layout-five { min-height: 820px; }
  .map-layout-three { min-height: 720px; }

  .solution-context-heading {
    align-items: start;
    flex-direction: column;
    gap: 16px;
  }
  .solution-context-heading > p { max-width: 620px; }

  .solution-system-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .solution-system-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .solution-system-card:not(:last-child)::before,
  .solution-system-card:not(:last-child)::after {
    display: none;
  }

  .solution-detail-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 640px) {
  .scenario-grid {
    grid-template-columns: 1fr;
  }

  .solution-build-focus-head h2 { font-size: 28px; }
  .solution-build-pillars { grid-template-columns: 1fr; }
  .solution-build-pillar { min-height: 0; }
  .solution-build-detail { padding: 18px 16px 8px; }
  .solution-build-detail ol { grid-template-columns: 1fr; }
  .solution-build-items,
  .solution-value-items { grid-template-columns: 1fr; }

  .solution-build-items .solution-build-item:last-child:nth-child(odd),
  .solution-build-items .solution-build-item:last-child:nth-child(even) { grid-column: auto; }

  .solution-build-item { min-height: 0; }

  .solution-build-items:not(.solution-value-items) > .solution-build-item {
    padding: 22px 20px 0;
  }

  .solution-build-illust {
    margin-left: -20px;
    margin-right: -20px;
    padding: 16px 18px 18px;
  }

  .solution-value-focus {
    margin-top: 42px;
    padding: 26px 22px 30px;
    border-radius: 18px;
  }

  .solution-value-head { gap: 14px; }

  /* 单列：去掉分栏线与跨列，改为上下叠放 */
  .solution-value-items .solution-build-item,
  .solution-value-items .solution-build-item:nth-child(odd),
  .solution-value-items .solution-build-item:nth-child(even),
  .solution-value-items[data-count="5"] > .solution-build-item:nth-child(5) {
    grid-column: auto;
    padding: 22px 0;
    border-right: 0;
  }

  .solution-system-map-canvas {
    min-height: 0;
    display: grid;
    gap: 26px;
  }
  .solution-system-map-lines { display: none; }
  .solution-system-map-art { display: none; }
  .solution-system-map-supply .solution-system-node { display: block; }
  .solution-system-node,
  .solution-system-node-1,
  .solution-system-node-2,
  .solution-system-node-3,
  .solution-system-node-4 {
    position: static;
    width: 100%;
    transform: none;
  }
  .solution-system-node-label { min-height: 0; text-align: left; }
  .solution-system-node-media { height: 210px; }
  .solution-system-flow-legend {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .solution-customer-grid,
  .solution-context-compare {
    grid-template-columns: 1fr;
  }
  .solution-customer-card-media { height: 210px; }
  .solution-context-card { min-height: 0; padding: 22px 20px; }
  .solution-context-card-head h3 { font-size: 20px; }
  .solution-context-card > p { margin-top: 18px; font-size: 15px; }

  .solution-system-map {
    padding: 22px 16px 18px;
    border-radius: 18px;
  }
  .solution-system-map-head {
    display: block;
    margin-bottom: 18px;
  }
  .solution-system-map-head h3 {
    font-size: 25px;
    white-space: nowrap;
  }
  .solution-system-map-head p {
    margin-top: 12px;
    font-size: 13px;
  }
  .solution-system-map-grid {
    grid-template-columns: 1fr;
  }
  .solution-system-chip-grid {
    grid-template-columns: 1fr;
  }
  .solution-system-map-generic-visual {
    padding: 12px 10px;
  }
  .solution-system-card-media {
    height: 190px;
  }
  .solution-flow-row {
    justify-content: flex-start;
    gap: 7px;
    font-size: 12px;
  }
  .solution-flow-row b {
    flex-basis: 100%;
    margin-right: 0;
  }
  .solution-system-map-note {
    text-align: left;
  }
  .solution-flow-lane {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }
  .solution-flow-lane-track { gap: 6px; }
}

@media (max-width: 820px) {
  .cds-embed-meta {
    align-items: flex-start;
    gap: 12px;
    flex-direction: column;
  }

  .cds-embed-frame-wrap {
    display: none;
  }
}

/* The CDS channel replaces the page body below the persistent site header. */
.cds-embed-page {
  min-height: calc(100vh - var(--header-height));
  background: #fff;
}

.cds-embed-page .cds-embed-frame {
  display: block;
  width: 100%;
  height: calc(100vh - var(--header-height));
  min-height: 760px;
  border: 0;
  background: #fff;
}

/* About history: a left-open U-shaped timeline keeps all milestones in one compact path. */
.timeline-end-arrow {
  display: none;
}

@media (min-width: 821px) {
  #app .timeline {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 280px 340px !important;
    column-gap: 18px !important;
    row-gap: 22px !important;
    min-width: 0 !important;
    min-height: 642px !important;
    padding: 0 74px !important;
    overflow: visible !important;
  }

  #app .timeline::before {
    top: 185px !important;
    right: 74px !important;
    bottom: 244px !important;
    left: 74px !important;
    border: 2px dotted rgba(47, 141, 243, .6) !important;
    border-left: 0 !important;
    border-radius: 0 160px 160px 0 !important;
  }

  #app .timeline-end-arrow {
    position: absolute;
    top: calc(100% - 244px);
    left: 64px;
    z-index: 2;
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 11px solid rgba(47, 141, 243, .78);
    border-bottom: 7px solid transparent;
    transform: translateY(-50%);
  }

  #app .timeline-item,
  #app .timeline-item:nth-child(even) {
    min-height: 0 !important;
    padding: 18px 12px 104px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: center !important;
    flex-direction: column !important;
  }

  #app .timeline-item:nth-child(-n + 4) {
    flex-direction: column-reverse !important;
  }

  #app .timeline-item:nth-child(-n + 4) strong {
    position: absolute !important;
    bottom: 112px !important;
    left: 12px !important;
    right: 12px !important;
  }

  #app .timeline-item:nth-child(-n + 4) p {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 152px !important;
  }

  #app .timeline-item:nth-child(1) { grid-column: 1; grid-row: 1; }
  #app .timeline-item:nth-child(2) { grid-column: 2; grid-row: 1; }
  #app .timeline-item:nth-child(3) { grid-column: 3; grid-row: 1; }
  #app .timeline-item:nth-child(4) { grid-column: 4; grid-row: 1; }
  #app .timeline-item:nth-child(5) { grid-column: 4; grid-row: 2; }
  #app .timeline-item:nth-child(6) { grid-column: 3; grid-row: 2; }
  #app .timeline-item:nth-child(7) { grid-column: 2; grid-row: 2; }
  #app .timeline-item:nth-child(8) { grid-column: 1; grid-row: 2; }

  #app .timeline-item:nth-child(n + 5) {
    padding: 104px 12px 18px !important;
    justify-content: flex-start !important;
  }

  #app .timeline-item:nth-child(n + 5) strong {
    position: absolute !important;
    top: 120px !important;
    left: 12px !important;
    right: 12px !important;
  }

  #app .timeline-item:nth-child(n + 5) p {
    position: absolute !important;
    top: 160px !important;
    left: 12px !important;
    right: 12px !important;
  }

  #app .timeline-item::before {
    top: auto !important;
    right: auto !important;
    bottom: 84px !important;
    left: 50% !important;
    width: 12px !important;
    height: 12px !important;
    border: 5px solid #d3e6fb !important;
    border-radius: 50% !important;
    background: #2f8df3 !important;
    transform: translateX(-50%) !important;
  }

  #app .timeline-item:nth-child(n + 5)::before {
    top: 84px !important;
    right: auto !important;
    bottom: auto !important;
  }

  #app .timeline-item strong,
  #app .timeline-item:nth-child(even) strong {
    margin: 0 0 8px !important;
    font-size: 22px !important;
  }

  #app .timeline-item p {
    max-width: 210px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  #app .timeline-item:nth-child(-n + 4) p {
    margin: 0 0 8px !important;
  }

  #app .timeline::after {
    content: "从产业平台，到 AI 智能协同";
    position: absolute;
    top: calc(50% - 29.5px);
    left: 50%;
    z-index: 1;
    width: min(560px, 58vw);
    color: #151c26;
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }
}

/* About history heading and cards: title stays at the section entrance, while the former
   long title becomes the visual anchor inside the U-shaped timeline. */
#app .timeline-section-heading {
  display: block;
  margin-bottom: 30px;
}

#app .timeline-section-heading > p {
  max-width: 820px;
  margin-top: 18px;
}

#app .about-page > .section-soft {
  display: block;
}

#app .about-page > .business-heritage-section[hidden] {
  display: none !important;
}

#app .about-page .business-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  border: 0;
}

#app .about-page .business-columns article {
  min-height: 300px;
  padding: 34px 30px;
  border: 1px solid #dfe7ef;
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(20, 52, 82, 0.08);
}

#app .about-page .section-blue .feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  border: 0;
}

#app .about-page .section-blue .feature-item {
  min-height: 210px;
  padding: 30px;
  border: 1px solid #dfe7ef !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 34px rgba(20, 52, 82, 0.08);
}

@media (max-width: 980px) {
  #app .about-page .business-columns,
  #app .about-page .section-blue .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #app .timeline::after { display: none; }

  #app .about-page .business-columns,
  #app .about-page .section-blue .feature-grid {
    grid-template-columns: 1fr;
  }

  #app .about-page .business-columns article,
  #app .about-page .section-blue .feature-item {
    min-height: 0;
  }
}

/* 最终覆盖：解决方案客户价值卡片沿用产品价值卡片样式 */
.solution-value-focus { padding: 34px !important; border: 1px solid #e0eaf4 !important; border-radius: 24px !important; background: linear-gradient(180deg, #f7fbff 0%, #eef5fc 100%) !important; box-shadow: 0 20px 48px rgba(31, 74, 117, .1) !important; }
.solution-value-items .solution-build-item,
.solution-value-items .solution-value-filler { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; min-height: 200px !important; padding: 24px !important; border: 1px solid #dce7f1 !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 12px 26px rgba(24, 67, 112, .08) !important; }
.solution-value-items .solution-build-icon { width: 42px !important; height: 42px !important; border-radius: 13px !important; background: var(--surface-blue) !important; color: var(--brand) !important; box-shadow: inset 0 0 0 1px rgba(23, 105, 210, .08), 0 8px 18px rgba(48, 116, 204, .12) !important; }
.solution-value-items .solution-build-item p { margin: 22px 0 0 !important; padding-top: 0 !important; color: var(--ink) !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.45 !important; text-align: left !important; }
.solution-value-items .solution-build-index { display: block !important; top: 24px !important; right: 22px !important; color: rgba(23, 105, 210, .22) !important; }
.solution-value-items .solution-build-item:hover { transform: translateY(-3px) !important; border-color: rgba(23, 105, 210, .3) !important; background: #fff !important; box-shadow: 0 16px 30px rgba(24, 67, 112, .14) !important; }

/* 解决方案客户价值恢复为原深色成果矩阵样式 */
.solution-page .solution-value-focus {
  margin-top: 64px !important;
  padding: 40px 44px 44px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(56, 189, 248, .24), rgba(56, 189, 248, 0) 54%),
    radial-gradient(90% 125% at 0% 100%, rgba(47, 141, 243, .26), rgba(47, 141, 243, 0) 58%),
    linear-gradient(152deg, #0a1e36 0%, #102c4b 52%, #0d2b52 100%) !important;
  box-shadow: 0 42px 84px -48px rgba(9, 26, 48, .95), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
.solution-page .solution-value-items {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  margin-top: 8px !important;
}
.solution-page .solution-value-items .solution-build-item,
.solution-page .solution-value-items .solution-value-filler {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 26px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.solution-page .solution-value-items .solution-build-item:nth-child(3n+1) { padding-left: 0 !important; }
.solution-page .solution-value-items .solution-build-item:nth-child(3n) { padding-right: 0 !important; }
.solution-page .solution-value-items .solution-build-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background: linear-gradient(150deg, rgba(56, 189, 248, .26), rgba(56, 189, 248, .05)) !important;
  color: #7dd3fc !important;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .24), 0 16px 28px -20px rgba(56, 189, 248, .95) !important;
}
.solution-page .solution-value-items .solution-build-item p {
  margin: 0 !important;
  padding-top: 8px !important;
  color: rgba(255, 255, 255, .96) !important;
  font-size: 17px !important;
  line-height: 1.68 !important;
  text-align: left !important;
}
.solution-page .solution-value-items .solution-build-index { display: none !important; }
.solution-page .solution-value-head .section-kicker {
  display: inline-flex !important;
  width: auto !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 0 !important;
  color: #5fc9ff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .24em !important;
  text-align: left !important;
}
.solution-page .solution-value-head .section-kicker::after { display: none !important; }

/* 客户价值拆分为独立蓝图卡片，与重点建设内容使用同一视觉语言 */
.solution-page .solution-value-card-focus {
  margin-top: 80px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.solution-page .solution-value-card-focus .solution-value-head {
  display: block;
  text-align: center;
}
.solution-page .solution-value-card-focus .solution-value-rule { display: none; }
.solution-page .solution-value-card-focus .solution-value-head .section-kicker {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}
.solution-page .solution-value-card-focus .solution-value-head .section-kicker::after {
  content: "";
  display: block !important;
  width: 60px;
  height: 4px;
  margin: 16px auto 0;
  background: var(--brand);
}
.solution-page #solution-build .solution-value-card-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 38px;
}
@media (min-width: 701px) {
  .solution-page #solution-build .solution-value-card-items[data-count="5"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .solution-page #solution-build .solution-value-card-items[data-count="5"] > .solution-build-item:nth-child(-n+3) {
    grid-column: span 2;
  }
  .solution-page #solution-build .solution-value-card-items[data-count="5"] > .solution-build-item:nth-child(n+4) {
    grid-column: span 3;
  }
  .solution-page #solution-build .solution-value-card-items[data-count="6"] > .solution-build-item {
    grid-column: auto;
  }
}
@media (min-width: 701px) and (max-width: 980px) {
  .solution-page #solution-build .solution-value-card-items { gap: 16px; }
}
@media (max-width: 700px) {
  .solution-page .solution-value-focus.solution-value-card-focus {
    margin-top: 58px !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .solution-page #solution-build .solution-value-card-items { grid-template-columns: 1fr; }
}

/* 重点建设内容 v2：工业运营蓝图卡片 */
.solution-page #solution-build > .solution-build-focus > .solution-build-items:not(.solution-value-items) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 38px;
}
.solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px;
  grid-template-rows: 178px 150px;
  min-height: 328px !important;
  padding: 0 !important;
  border: 1px solid rgba(23, 105, 210, .14) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, #fff 0%, #f9fcff 100%) !important;
  box-shadow: none !important;
  isolation: isolate;
}
.solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item::before {
  display: none !important;
}
.solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item::after {
  content: "";
  display: block !important;
  position: absolute;
  top: 24px;
  right: 24px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 7px var(--accent-soft), 0 0 22px var(--accent);
  opacity: .85;
}
.solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item > .solution-build-icon {
  display: none !important;
}
.solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item > p {
  grid-column: 1 / 3;
  grid-row: 1;
  align-self: start;
  margin: 34px 34px 24px 30px !important;
  color: #10304f;
  font-size: 22px !important;
  font-weight: 760;
  line-height: 1.5;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item > .solution-build-index {
  grid-column: 2;
  grid-row: 1;
  position: static;
  align-self: end;
  justify-self: end;
  margin: 0 25px 22px 0;
  color: rgba(23, 105, 210, .28);
  font-size: 12px;
  letter-spacing: .16em;
}
.solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: stretch;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px 24px 16px !important;
  border-top: 1px solid rgba(23, 105, 210, .09);
  background:
    linear-gradient(rgba(47, 141, 243, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 141, 243, .055) 1px, transparent 1px),
    linear-gradient(180deg, #f7fbff 0%, #edf6ff 100%);
  background-size: 24px 24px, 24px 24px, auto;
  overflow: hidden;
}
.solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust::before {
  content: attr(data-visual);
  position: absolute;
  top: 12px;
  left: 18px;
  color: rgba(23, 105, 210, .3);
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
}
.solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust svg {
  width: 100%;
  height: 100%;
  max-height: 164px;
  filter: none;
  transition: transform 280ms cubic-bezier(.2, 0, 0, 1);
}
.solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(23, 105, 210, .3) !important;
  box-shadow: none !important;
}
.solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item:hover > .solution-build-illust svg {
  transform: translateY(-3px) scale(1.025);
}
.solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item:active {
  transform: translateY(-2px) scale(.995) !important;
}
.solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item:focus-within {
  outline: 3px solid rgba(47, 141, 243, .18);
  outline-offset: 3px;
}
@media (max-width: 980px) {
  .solution-page #solution-build > .solution-build-focus > .solution-build-items:not(.solution-value-items) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item {
    grid-template-columns: minmax(0, 1fr) 38px;
    grid-template-rows: 166px 150px;
    min-height: 316px !important;
  }
  .solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item > p {
    margin-right: 24px !important;
  }
}

/* 客户价值卡片右下角皇冠线稿装饰 */
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item::after {
  content: "";
  display: block !important;
  position: absolute;
  top: auto;
  right: 22px;
  bottom: 16px;
  left: auto;
  width: 43px;
  height: 43px;
  border: 0;
  border-radius: 0;
  background: rgba(23, 105, 210, .12) !important;
  box-shadow: none;
  opacity: 1;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 3 12h14l3-12-6 7-4-7-4 7-6-7z'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 3 12h14l3-12-6 7-4-7-4 7-6-7z'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color 180ms ease 120ms;
}
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item > p {
  position: relative;
  z-index: 1;
}
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item:hover::after {
  background: rgba(255, 255, 255, .22) !important;
}

/* 客户价值无缝矩阵：两竖一横分割，不保留独立卡片边框 */
.solution-page #solution-build .solution-value-card-items {
  gap: 0 !important;
}
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(90deg, #1769d2 0%, #2f8df3 100%) !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  background-size: 0% 100% !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-size 460ms cubic-bezier(.22, 1, .36, 1), color 180ms ease 100ms !important;
}
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item:nth-child(3n+1),
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item:nth-child(3n+2) {
  border-right: 1px solid rgba(23, 105, 210, .16) !important;
}
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item:nth-child(-n+3) {
  border-bottom: 1px solid rgba(23, 105, 210, .16) !important;
}
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item:hover {
  border-color: rgba(23, 105, 210, .16) !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  transform: none !important;
}
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item:hover > p {
  color: #fff !important;
}
@media (prefers-reduced-motion: reduce) {
  .solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item,
  .solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}
@media (max-width: 700px) {
  .solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item,
  .solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item:nth-child(3n+1),
  .solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item:nth-child(3n+2),
  .solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item:nth-child(-n+3) {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(23, 105, 210, .16) !important;
  }
  .solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item:last-child {
    border-bottom: 0 !important;
  }
}

/* 客户价值三列宫格 */
.solution-page #solution-build .solution-value-card-items {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100%;
  margin-left: 0;
  padding: 0;
  gap: 60px;
  overflow: visible;
}
.solution-page #solution-build .solution-value-card-items > .solution-build-item {
  grid-column: auto !important;
}
@media (max-width: 700px) {
  .solution-page #solution-build .solution-value-card-items {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
}
@media (max-width: 700px) {
  .solution-page #solution-build > .solution-build-focus > .solution-build-items:not(.solution-value-items) {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 701px) {
  .solution-page #solution-build > .solution-build-focus > .solution-build-items[data-count="6"]:not(.solution-value-items),
  .solution-page #solution-build > .solution-build-focus > .solution-build-items[data-count="9"]:not(.solution-value-items) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .solution-page #solution-build > .solution-build-focus > .solution-build-items[data-count="8"]:not(.solution-value-items) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .solution-page #solution-build .solution-build-items[data-count="6"]:not(.solution-value-items) > .solution-build-item,
  .solution-page #solution-build .solution-build-items[data-count="8"]:not(.solution-value-items) > .solution-build-item,
  .solution-page #solution-build .solution-build-items[data-count="9"]:not(.solution-value-items) > .solution-build-item {
    grid-column: auto;
  }
  .solution-page #solution-build > .solution-build-focus > .solution-build-items[data-count="7"]:not(.solution-value-items) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .solution-page #solution-build .solution-build-items[data-count="7"]:not(.solution-value-items) > .solution-build-item:nth-child(-n+3) {
    grid-column: span 4;
  }
  .solution-page #solution-build .solution-build-items[data-count="7"]:not(.solution-value-items) > .solution-build-item:nth-child(n+4) {
    grid-column: span 3;
  }
}
@media (min-width: 641px) and (max-width: 980px) {
  .solution-page .solution-system-map-rendered .solution-system-map-art {
    display: block;
  }
  .solution-page .solution-system-map-rendered .solution-system-node {
    display: none;
  }
}
@media (min-width: 701px) and (max-width: 980px) {
  .solution-page #solution-build > .solution-build-focus > .solution-build-items:not(.solution-value-items) {
    gap: 16px;
  }
  .solution-page #solution-build .solution-build-items:not(.solution-value-items) > .solution-build-item > p {
    margin: 28px 22px 18px !important;
    font-size: 18px !important;
    line-height: 1.45;
  }
}
.solution-page .solution-value-items .solution-build-item:hover { transform: none !important; border-color: rgba(255, 255, 255, .12) !important; background: rgba(255, 255, 255, .035) !important; box-shadow: none !important; }
.solution-page .solution-system-map-rendered .solution-system-map-head > p {
  max-width: none;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .solution-page .solution-value-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .solution-page .solution-system-map-rendered .solution-system-node {
    display: block !important;
  }
  .solution-page .solution-system-map-rendered .solution-system-map-head > p {
    white-space: normal;
  }
  .solution-page .solution-value-items { grid-template-columns: 1fr !important; }
  .solution-page .solution-value-focus { padding: 26px 22px 30px !important; border-radius: 18px !important; }
  .solution-page .solution-value-items .solution-build-item,
  .solution-page .solution-value-items .solution-build-item:nth-child(3n+1),
  .solution-page .solution-value-items .solution-build-item:nth-child(3n) { padding: 22px 0 !important; border-right: 0 !important; }
}

/* 解决方案页标题与产品中心统一 */
.solution-page .solution-context-heading {
  justify-content: center;
  text-align: center;
}
.solution-page .solution-context-heading > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.solution-page .solution-context-heading .section-kicker,
.solution-page .solution-build-focus > .section-kicker,
.solution-page .solution-value-head .section-kicker {
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
}
.solution-page .solution-context-heading .section-kicker::before,
.solution-page .solution-build-focus > .section-kicker::before,
.solution-page .solution-value-head .section-kicker::before {
  display: none;
}
.solution-page .solution-context-heading .title-rule,
.solution-page .solution-build-focus > .section-kicker + .title-rule {
  width: 60px;
  height: 4px;
  margin: 16px auto 0;
  background: var(--brand);
}
.solution-page .solution-build-focus > .section-kicker,
.solution-page .solution-value-head .section-kicker {
  position: relative;
  width: 100%;
  text-align: center;
}
.solution-page .solution-build-focus > .section-kicker::after,
.solution-page .solution-value-head .section-kicker::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 0;
  background: var(--brand);
}

/* 客户价值标题恢复原有深色矩阵标签 */
.solution-page .solution-value-head .section-kicker {
  display: inline-flex !important;
  width: auto !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 0 !important;
  color: #5fc9ff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .24em !important;
  text-align: left !important;
}
.solution-page .solution-value-head .section-kicker::after { display: none !important; }

/* 最终覆盖：客户价值只保留文案卡片 */
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item {
  display: flex !important;
  min-height: 180px !important;
  padding: 30px !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item > .solution-build-icon,
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item > .solution-build-index,
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item > .solution-build-illust {
  display: none !important;
}
.solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item > p {
  margin: 0 !important;
  color: #10304f !important;
  font-size: 22px !important;
  font-weight: 760;
  line-height: 1.5;
  letter-spacing: -.012em;
}
@media (min-width: 701px) and (max-width: 980px) {
  .solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item {
    min-height: 156px !important;
    padding: 26px 22px !important;
  }
  .solution-page #solution-build .solution-build-items.solution-value-card-items:not(.solution-value-items) > .solution-build-item > p {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.45;
  }
}

/* 首页产品矩阵：以信息卡片替代整张插画，CDS 保持九宫格中心 */
.product-matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line);
}

.product-matrix-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 248px;
  padding: 28px;
  flex-direction: column;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.98);
  transition:
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

a.product-matrix-card:hover,
a.product-matrix-card:focus-visible,
.product-matrix-card:not(a):hover {
  z-index: 1;
  color: #0b3566;
  background: #edf6ff;
  box-shadow: inset 0 0 0 1px rgba(23, 105, 210, 0.18);
  transform: translateY(-2px);
}

a.product-matrix-card:focus-visible {
  outline: 3px solid rgba(23, 105, 210, 0.28);
  outline-offset: -3px;
}

a.product-matrix-card:active {
  transform: scale(0.99);
}

.product-matrix-card.is-featured {
  color: #fff;
  background: var(--brand);
}

a.product-matrix-card.is-featured:hover,
a.product-matrix-card.is-featured:focus-visible {
  color: #0b3566;
  background: #edf6ff;
}

.product-matrix-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 24px;
}

.product-matrix-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8e7f9;
  border-radius: 12px;
  color: var(--brand);
  background: var(--surface-blue);
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.product-matrix-icon svg {
  width: 23px;
  height: 23px;
}

.product-matrix-card.is-featured .product-matrix-icon {
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.product-matrix-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -.02em;
  transition: color 180ms ease;
}

.product-matrix-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
  transition: color 180ms ease;
}

.product-matrix-card.is-featured p {
  color: rgba(255, 255, 255, 0.82);
}

.product-matrix-link {
  position: absolute;
  right: 26px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: var(--brand);
  transition: color 180ms ease, transform 180ms ease;
}

.product-matrix-card:hover .product-matrix-icon,
.product-matrix-card:focus-visible .product-matrix-icon {
  border-color: rgba(23, 105, 210, 0.22);
  color: #0d4f9c;
  background: rgba(23, 105, 210, 0.1);
}

.product-matrix-card:hover h3,
.product-matrix-card:focus-visible h3 {
  color: #0b3566;
}

.product-matrix-card:hover p,
.product-matrix-card:focus-visible p {
  color: #365d85;
}

.product-matrix-card:hover .product-matrix-link,
.product-matrix-card:focus-visible .product-matrix-link {
  color: #0d4f9c;
  transform: translate(2px, -2px);
}

.product-matrix-card.is-featured .product-matrix-link {
  color: #fff;
}

.product-matrix-card.is-featured:hover .product-matrix-link,
.product-matrix-card.is-featured:focus-visible .product-matrix-link {
  color: #0d4f9c;
}

.product-matrix-link svg {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .product-matrix-card,
  .product-matrix-card h3,
  .product-matrix-card p,
  .product-matrix-icon,
  .product-matrix-link {
    transition: none;
  }

  a.product-matrix-card:hover,
  a.product-matrix-card:focus-visible,
  .product-matrix-card:not(a):hover,
  .product-matrix-card:hover .product-matrix-link,
  .product-matrix-card:focus-visible .product-matrix-link {
    transform: none;
  }
}

@media (max-width: 700px) {
  .product-matrix-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-matrix-card.is-featured {
    grid-column: span 2;
  }
}

@media (max-width: 520px) {
  .product-matrix-grid {
    grid-template-columns: 1fr;
  }

  .product-matrix-card,
  .product-matrix-card.is-featured {
    min-height: 0;
    grid-column: auto;
  }
}

/* Product capability navigation: vertical controls beside the device preview. */
.product-page .product-capability-body .capability-showcase {
  display: grid;
  grid-template-columns: minmax(200px, 224px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: 32px;
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
}

.product-page .product-capability-body .capability-picker {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  margin: 0;
  padding: 0 0 34px;
  overflow: visible;
  background: transparent;
  transform: none;
}

.product-page .product-capability-body .capability-picker-track {
  display: grid;
  justify-content: stretch;
  gap: 18px;
  width: 100%;
  min-width: 0;
  padding: 0;
  background: transparent;
}

.product-page .product-capability-body .capability-tab {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  display: block;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #111827;
  text-align: left;
  opacity: 1;
  transform: none;
}

.product-page .product-capability-body .capability-tab:hover {
  background: rgba(23, 105, 210, .05);
  opacity: 1;
}

.product-page .product-capability-body .capability-tab.active {
  background: transparent;
  opacity: 1;
  transform: none;
}

.product-page .product-capability-body .capability-tab.active::before {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 3px;
  border-radius: 0;
  background: var(--brand);
  transform-origin: left center;
  animation: capability-marker-grow 220ms ease-out both;
}

@keyframes capability-marker-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .product-page .product-capability-body .capability-tab.active::before {
    animation: none;
  }
}

.product-page .product-capability-body .capability-tab::after,
.product-page .product-capability-body .capability-tab.active::after {
  display: none;
  content: none;
}

.product-page .product-capability-body .capability-tab-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}

.product-page .product-capability-body .capability-tab-title strong {
  min-width: 0;
  color: #111827;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
}

.product-page .product-capability-body .capability-tab.active .capability-tab-title strong {
  color: #111827;
  font-weight: 700;
}

.product-page .product-capability-body .capability-tab-icon,
.product-page .product-capability-body .capability-showcase.generated-capabilities .capability-tab-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 0;
}

.product-page .product-capability-body .capability-preview {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
  padding: 0 0 34px;
  overflow: visible;
}

.product-page .product-capability-body .capability-preview-copy {
  grid-column: 2;
  grid-row: 1;
  width: min(100%, 860px);
  min-height: 0;
  margin: 0 auto;
  padding: 44px 4.7% 0;
  text-align: left;
}

.product-page .product-capability-body .capability-preview-copy p {
  max-width: none;
}

@media (max-width: 700px) {
  .product-page .product-capability-body .capability-showcase {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 0;
  }

  .product-page .product-capability-body .capability-preview-copy {
    grid-column: 1;
    grid-row: 1;
    padding: 28px 1.2% 20px;
  }

  .product-page .product-capability-body .capability-picker {
    grid-column: 1;
    grid-row: 2;
    padding: 0;
  }

  .product-page .product-capability-body .capability-picker-track {
    width: 100%;
    min-width: 0;
  }

  .product-page .product-capability-body .capability-tab {
    min-width: 0;
    min-height: 56px;
    padding: 8px 12px;
  }

  .product-page .product-capability-body .capability-preview {
    grid-column: 1;
    grid-row: 3;
    padding: 28px 0 30px;
  }
}

/* About page: keep the three major section titles prominent on tablet widths,
   while preserving the existing compact type scale below 520px. */
@media (min-width: 521px) and (max-width: 820px) {
  #app .about-page .timeline-section-heading h2,
  #app .about-page .section-certificates .section-heading h2,
  #app .about-page .section-blue .section-heading h2 {
    font-size: 36px;
  }
}