/*
 * Final desktop visual system
 * This file is intentionally loaded last and is the single canonical layer for
 * typography, spacing and component polish. The page is desktop-only.
 */

:root {
  --font-final: "Alibaba PuHuiTi 3.0", "HarmonyOS Sans SC", "Source Han Sans SC",
    "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ink-final: #17191e;
  --muted-final: #687386;
  --muted-soft-final: #8a94a5;
  --line-final: #dfe6f0;
  --blue-final: #3f73f3;
  --blue-deep-final: #2862ed;
  --blue-soft-final: #f1f5fc;
  --surface-final: #f7f9fc;
  --stage-final: min(1320px, calc(100vw - 128px));
  --section-title-final: 52px;
  --feature-title-final: 42px;
  --module-title-final: 28px;
  --card-title-final: 21px;
  --lead-final: 18px;
  --body-final: 16px;
  --helper-final: 14px;
  --label-final: 13px;
}

html {
  scroll-padding-top: 76px;
}

body {
  min-width: 1180px;
  color: var(--ink-final);
  font-family: var(--font-final);
  font-size: var(--body-final);
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
  font: inherit;
}

.site-header {
  height: 76px;
  padding: 0 max(48px, calc((100vw - 1440px) / 2));
}

.brand strong {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.brand > span {
  font-weight: 700;
}

.site-header nav {
  gap: 24px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.site-header nav a {
  padding: 28px 0 25px;
  border-radius: 0;
  color: #737e90;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

.site-header nav a:hover,
.site-header nav a.is-active {
  color: var(--ink-final);
}

.site-header nav a.is-active {
  background: transparent;
  box-shadow: none;
}

.site-header nav a::after {
  bottom: 17px;
}

.site-header nav a.is-active::after {
  width: 22px;
}

/* Hero */
.hero {
  min-height: 720px;
  padding: 132px 0 116px;
}

.hero::after {
  inset: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  background:
    radial-gradient(circle at 14% 22%, rgba(63, 115, 243, 0.14) 0%, transparent 11%),
    radial-gradient(circle at 86% 16%, rgba(63, 115, 243, 0.11) 0%, transparent 10%),
    radial-gradient(circle at 10% 74%, rgba(63, 115, 243, 0.08) 0%, transparent 9%),
    radial-gradient(circle at 90% 78%, rgba(63, 115, 243, 0.11) 0%, transparent 11%),
    radial-gradient(circle at 50% 48%, rgba(63, 115, 243, 0.05) 0%, transparent 28%);
  transform: none;
}

.hero-copy {
  width: min(1160px, calc(100vw - 120px));
}

.hero-copy h1 {
  max-width: 1140px;
  font-family: var(--font-final);
  font-size: clamp(70px, 5.2vw, 82px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.055em;
}

.hero-copy > p {
  max-width: 760px;
  margin-top: 38px;
  color: #606b7e;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.75;
}

/* Global section hierarchy */
.page-section {
  padding: 116px 0 124px;
}

.section-heading,
.why-section .section-heading {
  width: min(1120px, calc(100vw - 160px));
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.section-heading h2,
.why-section .section-heading h2 {
  margin: 0;
  color: inherit;
  font-family: var(--font-final);
  font-size: var(--section-title-final);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.045em;
}

.section-heading h2::before,
.why-section .section-heading h2::before {
  width: 40px;
  height: 3px;
  margin: 0 auto 20px;
}

.section-heading > span,
.section-heading > p {
  max-width: 820px;
  margin: 22px auto 0;
  color: var(--muted-final);
  font-size: var(--lead-final);
  font-weight: 400;
  line-height: 1.75;
}

.content-stage,
.section-plain .content-stage,
.section-blue .content-stage,
.landing-stage,
.service-grid,
.why-grid {
  width: var(--stage-final);
}

.content-stage,
.landing-stage,
.service-grid {
  margin-top: 56px;
}

.section-tabs {
  width: var(--stage-final);
  margin-top: 52px;
}

.section-tabs button {
  min-height: 58px;
  color: #788397;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.section-tabs button:hover,
.section-tabs button[aria-selected="true"] {
  color: var(--ink-final);
}

.section-tabs button[aria-selected="true"] {
  font-weight: 600;
}

.capability-tabs {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
}

.capability-tabs button {
  min-width: 0;
  padding: 18px 8px 20px;
  white-space: nowrap;
}

/* Definition */
.definition-stage {
  margin-top: 60px;
}

.definition-item {
  min-height: 142px;
  padding: 25px 26px;
}

.definition-index {
  font-size: 12px;
  font-weight: 600;
}

.definition-item h3 {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.definition-item strong {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.definition-item p {
  margin-top: 8px;
  color: var(--muted-final);
  font-size: 14px;
  line-height: 1.72;
}

.definition-core > span {
  font-size: 13px;
  font-weight: 700;
}

.definition-core > strong {
  font-size: 30px;
  font-weight: 700;
}

.definition-core > em {
  font-size: 13px;
}

/* Capability */
.capability-stage {
  min-height: 620px;
}

.capability-video {
  min-height: 620px;
  padding: 44px;
}

.capability-copy {
  padding: 64px 60px 50px;
}

.capability-copy h3 {
  max-width: 12em;
  font-size: clamp(34px, 2.55vw, 44px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.capability-copy > p {
  max-width: 38em;
  margin-top: 24px;
  color: var(--muted-final);
  font-size: var(--body-final);
  line-height: 1.82;
}

.capability-stage.is-more-scenes {
  min-height: 0;
  padding: 30px;
  display: block;
  background: var(--surface-final);
}

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

.more-scene-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line-final);
  border-radius: 18px;
  color: var(--ink-final);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.more-scene-card:hover,
.more-scene-card:focus-visible {
  border-color: #c8d5ea;
  box-shadow: 0 16px 38px rgba(24, 38, 65, 0.07);
  transform: translateY(-2px);
}

.more-scene-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef2f7;
}

.more-scene-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.more-scene-media i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(23, 25, 30, 0.9);
  box-shadow: 0 12px 28px rgba(23, 25, 30, 0.2);
  transform: translate(-50%, -50%);
}

.more-scene-media i::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 18px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid #fff;
}

.more-scene-copy {
  padding: 22px 24px 24px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.more-scene-copy strong {
  font-size: 21px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.more-scene-copy > span {
  color: var(--muted-final);
  font-size: 14px;
  line-height: 1.65;
}

.employee-list {
  margin-top: 30px;
  padding-top: 24px;
}

.employee-list i {
  padding: 9px 12px;
  font-size: var(--label-final);
  font-weight: 500;
}

.capability-video-empty {
  width: 100%;
  min-height: 460px;
  display: grid;
  place-content: center;
  gap: 18px;
  border: 1px solid rgba(204, 214, 229, 0.86);
  border-radius: 24px;
  color: var(--muted-final);
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.capability-video-empty i {
  width: 58px;
  height: 58px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue-final);
  background: var(--blue-soft-final);
  font-size: 24px;
  font-style: normal;
}

.capability-video-empty strong {
  font-size: 18px;
  font-weight: 600;
}

.video-modal-dialog {
  width: min(90vw, 1540px);
}

.video-modal-close {
  font-weight: 400;
}

/* Roles */
.role-category-grid button {
  min-height: 92px;
}

.role-category-grid button > span {
  font-size: 12px;
  font-weight: 600;
}

.role-category-grid button strong {
  font-size: 17px;
  font-weight: 600;
}

.role-detail h3 {
  font-size: var(--feature-title-final);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.045em;
}

.role-detail {
  min-height: 350px;
}

.role-detail-copy > span {
  font-size: var(--label-final);
  font-weight: 600;
}

.role-detail > p {
  color: var(--muted-final);
  font-size: var(--body-final);
  line-height: 1.85;
}

.role-position-list article strong {
  font-size: 18px;
  font-weight: 600;
}

.role-position-list article > i {
  font-size: 12px;
  font-weight: 600;
}

.role-position-list article p {
  font-size: 14px;
  line-height: 1.7;
}

/* Organization */
.organization-panel {
  min-height: 590px;
}

.org-company strong,
.org-actor-row button strong {
  font-weight: 600;
}

.org-actor-row button {
  min-height: 128px;
  font-size: 15px;
}

.org-actor-row button[aria-pressed="true"],
.org-actor-row button[aria-selected="true"] {
  border-color: var(--ink-final);
  color: #fff;
  background: var(--ink-final);
  box-shadow: 0 14px 34px rgba(24, 29, 38, 0.18);
}

.org-detail > span,
.org-panel-head > span,
.org-collaboration-head > span {
  font-size: var(--label-final);
  font-weight: 600;
}

.org-detail h3 {
  font-size: var(--feature-title-final);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.045em;
}

.org-detail > p {
  font-size: var(--body-final);
  line-height: 1.9;
}

.org-relation > span {
  font-size: var(--label-final);
  font-weight: 500;
}

.org-relation p {
  font-size: 14px;
  line-height: 1.75;
}

.org-panel-head h3,
.org-collaboration-head h3 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.04em;
}

.org-collaboration-head p {
  font-size: 15px;
  line-height: 1.75;
}

.collaboration-hub span {
  font-size: 13px;
  font-weight: 500;
}

.collaboration-hub strong {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
}

.collaboration-grid article h4,
.collaboration-principles article strong {
  font-size: 17px;
  font-weight: 600;
}

.collaboration-grid article p,
.collaboration-principles article p {
  font-size: 14px;
  line-height: 1.72;
}

.evolution-flow article strong {
  font-size: 16px;
  font-weight: 600;
}

.evolution-flow article p {
  font-size: 14px;
  line-height: 1.68;
}

/* Organization: keep the existing tabbed stage, make each relationship readable. */
.org-system-panel {
  min-height: 620px;
  padding: 40px;
}

.org-system-heading > span {
  color: var(--blue-final);
  font-size: var(--label-final);
  font-weight: 600;
}

.org-system-heading h3 {
  max-width: 920px;
  margin: 12px 0 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.org-system-heading > p {
  margin: 16px 0 0;
  color: var(--muted-final);
  font-size: 15px;
  line-height: 1.8;
}

.org-business-flow,
.org-learning-flow {
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
}

.org-business-flow > li,
.org-learning-flow > li {
  position: relative;
  min-width: 0;
  padding: 24px 22px;
  border: 1px solid var(--line-final);
  border-radius: 16px;
  background: var(--blue-soft-final);
}

.org-business-flow > li:not(:last-child)::after,
.org-learning-flow > li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 52px;
  right: -21px;
  color: var(--blue-final);
  font-size: 18px;
}

.org-step-number {
  color: var(--blue-final);
  font-size: 12px;
  font-weight: 600;
}

.org-business-flow h4,
.org-learning-flow h4 {
  margin: 16px 0 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.org-system-panel li > p,
.org-system-panel article > p {
  margin: 0;
  color: var(--muted-final);
  font-size: 14px;
  line-height: 1.8;
}

.org-assets-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-top: 30px;
  padding: 24px;
  border: 1px solid var(--line-final);
  border-radius: 16px;
  background: #fff;
}

.org-assets-bar h4 {
  margin: 0;
  color: var(--blue-deep-final);
  font-size: 17px;
  font-weight: 600;
}

.org-assets-bar p {
  margin: 8px 0 0;
  max-width: 34em;
  color: var(--muted-final);
  font-size: 14px;
  line-height: 1.8;
}

.org-assets-bar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-assets-bar li {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--blue-deep-final);
  background: var(--blue-soft-final);
  font-size: 14px;
  white-space: nowrap;
}

.org-human-control {
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--blue-final);
  color: var(--ink-final);
  font-size: 15px;
  line-height: 1.8;
}

.org-relationship-map {
  --relation-gap: 56px;
  --relation-row-gap: 38px;
  --human-radius: 102px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 204px minmax(0, 1fr);
  align-items: center;
  gap: var(--relation-row-gap) var(--relation-gap);
  max-width: 1100px;
  margin: 36px auto 0;
}

.org-human-hub {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 204px;
}

.org-human-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 204px;
  height: 204px;
  border-radius: 50%;
  color: #fff;
  background: var(--ink-final);
  box-shadow: 0 0 0 10px var(--blue-soft-final);
  text-align: center;
}

.org-human-node h4 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.4;
}

.org-human-node > span {
  color: #c0d2ff;
  font-size: 15px;
}

.org-human-node p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.8;
}

.org-relation-link {
  position: absolute;
  display: block;
  overflow: visible;
  fill: none;
  stroke: #91aeea;
  stroke-width: 1.5px;
  pointer-events: none;
}

.org-relation-link path {
  vector-effect: non-scaling-stroke;
}

.org-relation-link-left,
.org-relation-link-right {
  top: calc(50% - 6px);
  width: calc(var(--relation-gap) - 14px);
  height: 12px;
}

.org-relation-link-left {
  left: calc(-1 * var(--relation-gap));
}

.org-relation-link-right {
  right: calc(-1 * var(--relation-gap));
}

.org-relation-link-bottom {
  left: calc(50% - 6px);
  top: calc(50% + var(--human-radius) + 14px);
  width: 12px;
  height: calc(50% - var(--human-radius) + var(--relation-row-gap) - 14px);
}

.org-ai-node {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line-final);
  border-radius: 18px;
  background: var(--blue-soft-final);
}

.org-ai-node[data-org-partner="secretary"] {
  grid-column: 1;
  grid-row: 1;
}

.org-ai-node[data-org-partner="team"] {
  grid-column: 3;
  grid-row: 1;
}

.org-ai-node[data-org-partner="process"] {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  width: min(620px, 100%);
}

.org-ai-node > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.org-ai-node h4 {
  margin: 0;
  color: var(--blue-deep-final);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
}

.org-ai-node > header > span {
  flex-shrink: 0;
  color: var(--muted-final);
  font-size: 12px;
}

.org-ai-node dl {
  display: grid;
  gap: 18px;
  margin: 22px 0 0;
}

.org-ai-node dt {
  margin: 0;
  color: var(--muted-final);
  font-size: 12px;
  font-weight: 400;
}

.org-ai-node dd {
  margin: 5px 0 0;
  color: var(--ink-final);
  font-size: 14px;
  line-height: 1.8;
}

.org-ai-node[data-org-partner="process"] dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.org-ai-node[data-org-partner="process"] dl > div {
  min-width: 0;
}

.org-ai-node[data-org-partner="process"] dl > div + div {
  padding-left: 24px;
  border-left: 1px solid var(--line-final);
}

.org-collaboration-note {
  margin: 28px 0 0;
  color: var(--muted-final);
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}

.org-learning-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.org-learning-flow > li {
  padding: 24px 18px;
}

.org-learning-flow > li:not(:last-child)::after {
  right: -18px;
}

.org-learning-flow h4 {
  font-size: 17px;
}

.org-learning-closing {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 30px 0 0;
  padding: 22px 24px;
  border-radius: 14px;
  color: var(--ink-final);
  background: var(--blue-soft-final);
  font-size: 16px;
  line-height: 1.8;
}

.org-learning-closing > span {
  color: var(--blue-final);
  font-size: 30px;
  line-height: 1;
}

/* Value */
#value .section-heading > span {
  color: rgba(255, 255, 255, 0.64);
}

.value-ledger {
  width: var(--stage-final);
  margin: 54px auto 0;
}

.value-ledger-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.value-ledger-grid article {
  min-height: 176px;
  padding: 34px 38px 32px;
}

.value-ledger-grid article + article {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.value-ledger-grid h4 {
  margin: 0;
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.03em;
}

.value-ledger-grid p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  line-height: 1.78;
}

#value .value-tabs {
  margin-top: 64px;
}

#value .section-tabs button {
  color: rgba(255, 255, 255, 0.58);
}

.value-story > span,
.metric > span,
.value-employees > span {
  font-size: var(--label-final);
  font-weight: 500;
}

.value-story h3 {
  font-size: var(--feature-title-final);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.045em;
}

.value-path article span {
  font-size: 13px;
}

.value-path article p {
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  line-height: 1.72;
}

.value-result {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.72;
}

.metric-change del,
.metric-change i {
  font-size: 15px;
}

.metric-change strong {
  font-size: 32px;
  font-weight: 700;
}

.value-employees i {
  font-size: 13px;
  font-weight: 500;
}

.value-disclaimer {
  font-size: 13px;
  line-height: 1.65;
}

/* Landing */
.landing-route h3,
.landing-operations h3,
.landing-foundation h3 {
  font-size: var(--module-title-final);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.landing-route header > span,
.landing-operations header > span,
.landing-foundation header > span {
  font-size: var(--label-final);
  font-weight: 600;
}

.landing-rollout > ol {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 30px;
  gap: 28px;
}

.landing-rollout > ol > li,
.landing-rollout > ol > li:hover {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
}

.landing-rollout > ol > li:not(:last-child)::after {
  content: "";
  top: 38px;
  bottom: -20px;
  left: 14px;
  right: auto;
  width: 1px;
  background: var(--line-final);
}

.landing-rollout .landing-step-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--blue-deep-final);
  background: var(--blue-soft-final);
  font-size: 11px;
  font-weight: 600;
}

.landing-step-body {
  min-width: 0;
}

.landing-step-body h4 {
  margin: 0;
  color: var(--ink-final);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.landing-rollout .landing-step-body > p {
  margin: 8px 0 0;
  color: var(--muted-final);
  font-size: 14px;
  line-height: 1.8;
}

.landing-rollout .landing-step-body > .landing-step-note {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--blue-soft-final);
  font-size: 13px;
  line-height: 1.7;
}

.landing-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-final);
}

.landing-checks > div {
  min-width: 0;
}

.landing-checks dt {
  color: var(--blue-deep-final);
  font-size: 14px;
  font-weight: 600;
}

.landing-checks dd {
  margin: 6px 0 0;
  color: var(--muted-final);
  font-size: 13px;
  line-height: 1.75;
}

.landing-operations {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 34px 28px;
  border: 1px solid var(--ink-final);
  border-radius: 22px;
  color: #fff;
  background: var(--ink-final);
}

.landing-operations header > span {
  color: #9bbcff;
}

.landing-operations h3 {
  margin: 14px 0 0;
  color: #fff;
  font-size: 26px;
  line-height: 1.4;
}

.landing-operations ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.landing-operations li + li {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.landing-operations h4 {
  margin: 0;
  color: #bfd3ff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.landing-operations li p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.8;
}

.landing-foundation article strong {
  font-size: 15px;
  font-weight: 600;
}

.landing-preparation > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-foundation article {
  min-width: 0;
  padding-inline: 12px;
  justify-content: flex-start;
}

.landing-foundation article span {
  font-size: 13px;
  line-height: 1.65;
}

.landing-closing {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}

/* Cooperation */
.service-grid {
  gap: 22px;
}

.service-card {
  min-height: 720px;
  padding: 38px 34px 34px;
}

.service-card[href] {
  display: flex;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.service-card[href]:focus-visible {
  outline: 3px solid rgba(63, 115, 243, 0.34);
  outline-offset: 6px;
}

.service-details-link { display: inline-block; margin-top: 18px; color: var(--blue-final); font-size: 14px; }
.service-details-link > span { margin-left: 6px; }
.service-card[href]:hover .service-details-link { text-decoration: underline; text-underline-offset: 4px; }

.service-card header span {
  font-size: 13px;
  font-weight: 600;
}

.service-card header strong {
  font-size: 18px;
  font-weight: 600;
}

.service-card h3 {
  font-size: var(--module-title-final);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.025em;
}

.service-suitable {
  min-height: 72px;
  font-size: 14px;
  line-height: 1.65;
}

.service-suitable span,
.service-result span {
  font-size: 12px;
  font-weight: 600;
}

.service-flow li > span {
  font-size: 11px;
  font-weight: 600;
}

.service-flow strong {
  font-size: 15px;
  font-weight: 600;
}

.service-flow p {
  font-size: 13px;
  line-height: 1.68;
}

.service-card-primary .service-flow p {
  color: rgba(255, 255, 255, 0.64);
}

.service-result strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.service-card-primary .service-result span {
  color: rgba(255, 255, 255, 0.58);
}

.service-combination {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

/* Why us — reset all legacy dark-card rules */
.why-section {
  width: 100%;
  padding: 112px 0 120px;
  color: var(--ink-final);
  background: var(--surface-final);
}

.why-grid {
  margin: 52px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: var(--ink-final);
  background: transparent;
  box-shadow: none;
}

.why-card,
.why-card + .why-card {
  min-height: 344px;
  padding: 40px 40px 38px;
  border: 1px solid var(--line-final);
  border-radius: 24px;
  color: var(--ink-final);
  background: #fff;
  box-shadow: 0 18px 52px rgba(28, 43, 71, 0.045);
  transform: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.why-card:hover {
  border-color: #c7d4e8;
  color: var(--ink-final);
  background: #fff;
  box-shadow: 0 24px 64px rgba(28, 43, 71, 0.075);
  transform: translateY(-3px);
}

.why-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid #cfdbf3;
  border-radius: 15px;
  color: var(--blue-final);
  background: var(--blue-soft-final);
}

.why-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 2.6;
}

.why-card h3 {
  margin: 26px 0 0;
  color: var(--ink-final);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.025em;
}

.why-card ul {
  margin: 25px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  list-style: none;
}

.why-card li {
  min-height: 50px;
  padding: 13px 0 13px 34px;
  border-top: 1px solid #edf1f6;
  color: #394252;
  font-size: 15px;
  line-height: 1.6;
}

.why-card li::before {
  top: 13px;
  width: 20px;
  height: 20px;
  border: 1.5px solid #8a96a8;
  color: #536071;
  background: #fff;
  font-size: 11px;
}

/* CTA */
.start-section {
  padding: 64px 0 72px;
}

.start-panel {
  width: var(--stage-final);
  padding: 76px 64px 80px;
}

.start-copy > p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.start-copy h2 {
  margin: 18px 0 0;
  font-size: var(--section-title-final);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.start-copy > span {
  max-width: 820px;
  margin: 22px auto 0;
  display: block;
  color: rgba(255, 255, 255, 0.66);
  font-size: 17px;
  line-height: 1.75;
}

.contact-form {
  margin-top: 38px;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 24px;
  align-items: start;
  border-radius: 22px;
}

.contact-form label > span {
  color: #687386;
  font-size: 13px;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  height: 48px;
  margin-top: 6px;
  color: var(--ink-final);
  font-size: 15px;
  line-height: 1.5;
}

.contact-form textarea {
  min-height: 72px;
  padding-top: 12px;
}

.contact-form label small {
  min-height: 18px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.contact-form .task-field {
  grid-column: 1 / 3;
}

.contact-form button {
  min-height: 54px;
  margin-top: 26px;
  padding: 0 26px;
  align-self: start;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}

.contact-form > p {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

footer {
  min-height: 124px;
}

.footer-brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
}

.footer-brand img {
  display: block;
  width: auto;
  height: 42px;
  object-fit: contain;
}

footer > p,
footer > a:last-child {
  font-size: 13px;
}

/* Keyboard focus is visible without adding visual noise for pointer users. */
:where(a, button, input, textarea):focus-visible {
  outline: 3px solid rgba(63, 115, 243, 0.32);
  outline-offset: 3px;
}

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

/* Role family matrix: 12 business domains and 36 positions at once. */
#roles .role-matrix {
  width: var(--stage-final);
  margin-top: 52px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-final);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 18px 54px rgba(35, 48, 77, 0.045);
}

.role-family-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.role-family-card {
  min-height: 204px;
  padding: 30px 30px 28px;
  border-right: 1px solid var(--line-final);
  border-bottom: 1px solid var(--line-final);
  transition: background-color 180ms ease, transform 180ms ease;
}

.role-family-card:nth-child(4n) {
  border-right: 0;
}

.role-family-card:nth-last-child(-n + 4) {
  border-bottom: 1px solid var(--line-final);
}

.role-family-card:hover {
  background: #f8faff;
  transform: translateY(-2px);
}

.role-family-card h3 {
  margin: 0 0 12px;
  color: var(--blue-final);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.role-family-card ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
  list-style: none;
}

.role-family-card li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #4f5b6e;
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.role-family-card li::before {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #b6c2d7;
  content: "";
}

@media (max-width: 1180px) {
  .role-family-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .role-family-card:nth-child(4n) {
    border-right: 1px solid var(--line-final);
  }

  .role-family-card:nth-child(3n) {
    border-right: 0;
  }

  .role-family-card:nth-last-child(-n + 4) {
    border-bottom: 1px solid var(--line-final);
  }

  .role-family-card:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--line-final);
  }
}

/* Local content adaptation; keep the existing tabs, media area and role grid. */
.capability-example {
  padding: 32px;
  text-align: left;
  align-items: stretch;
  gap: 16px;
}
.capability-example > span { color: var(--blue-final); font-size: 13px; }
.capability-example > strong { font-size: 25px; }
.capability-example p { margin: 0; color: #59667b; font-size: 15px; line-height: 1.8; }
.capability-example b { display: block; color: #26334a; font-size: 13px; font-weight: 600; }
.role-family-scope { margin: 0 0 20px; min-height: 66px; color: #718097; font-size: 13px; line-height: 1.7; }
.role-scope-note { margin: 0; padding: 18px 24px; color: #718097; font-size: 13px; line-height: 1.7; }
.role-family-card:nth-last-child(-n + 2) { border-bottom: 0; }

/* Scene-led content, within the existing three modules. */
.capability-video {
  align-content: center;
  gap: 20px;
}

.capability-media-caption {
  margin: 0;
  color: #59667b;
  font-size: 14px;
  line-height: 1.6;
}

.capability-task-label {
  display: block;
  margin-bottom: 12px;
  color: #718097;
  font-size: 13px;
}

.capability-case-link {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0;
  color: var(--blue-final);
  font-size: 14px;
  line-height: 1.7;
  text-underline-offset: 4px;
}

.capability-scene-examples { margin-top: 22px; }
.capability-scene-examples > span { display: block; margin-bottom: 8px; color: #718097; font-size: 12px; }
.capability-scene-examples > div { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.capability-scene-examples .capability-case-link { min-height: 32px; }

.role-scene-label {
  margin: 0 0 14px;
  color: #718097;
  font-size: 12px;
  line-height: 1.6;
}

.role-family-card .role-scene {
  display: block;
  align-items: baseline;
  font-size: 14px;
}

.role-family-card .role-scene::before { content: none; }

.role-scene a {
  color: var(--blue-final);
  text-underline-offset: 4px;
}

.role-scope-note strong {
  display: block;
  margin-bottom: 6px;
  color: #4f5b6e;
  font-size: 16px;
  font-weight: 600;
}

.value-directions {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.value-directions article {
  min-height: 168px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
}

.value-directions h4 {
  font-size: 21px;
  letter-spacing: -0.025em;
}

.value-directions p {
  margin-top: 16px;
  font-size: 14px;
}

.value-directions > article > p { margin-bottom: 20px; }

.value-saving {
  scroll-margin-top: 24px;
}

.value-inline-example {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.value-inline-example p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

.value-example-open {
  min-height: 36px;
  margin-top: 6px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: #a7c6ff;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.value-example-open:hover { color: #d1e1ff; text-decoration: underline; text-underline-offset: 4px; }
.value-example-open span { margin-left: 4px; }

.capability-case-link,
.role-scene-open {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue-final);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.capability-case-link { font-size: 14px; }
.role-scene-open { line-height: inherit; }
.capability-case-link:hover,
.role-scene-open:hover { text-decoration: underline; text-underline-offset: 4px; }

.value-example-open:focus-visible,
.capability-case-link:focus-visible,
.role-scene-open:focus-visible,
.scene-dialog-close:focus-visible,
.scene-dialog-content:focus-visible {
  outline: 2px solid #5d85ef;
  outline-offset: 4px;
}

html.has-scene-dialog { overflow: hidden; scrollbar-gutter: stable; }

.scene-dialog {
  width: min(820px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dce4f1;
  border-radius: 24px;
  background: #fff;
  color: var(--ink-final);
  box-shadow: 0 28px 100px rgba(10, 20, 40, 0.3);
}
.scene-dialog:not([open]) { display: none; }
.scene-dialog[open] { display: flex; flex-direction: column; }
.scene-dialog::backdrop { background: rgba(14, 20, 32, 0.62); backdrop-filter: blur(3px); }

.scene-dialog-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 32px 20px;
  border-bottom: 1px solid #e2e8f1;
}
.scene-dialog-header span { color: #456ac4; font-size: 12px; }
.scene-dialog-header h2 { margin: 6px 0; color: #202d42; font-size: 28px; line-height: 1.35; }
.scene-dialog-header p { margin: 0; color: #657187; font-size: 13px; line-height: 1.6; }
.scene-dialog-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 1px solid #e2e8f1;
  border-radius: 12px;
  color: #46556c;
  background: #f6f8fc;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}
.scene-dialog-close:hover { color: #1f3770; background: #eaf0fc; }

.scene-dialog-content {
  min-height: 0;
  padding: 28px 32px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.scene-dialog-content:focus-visible { outline-offset: -5px; }
.scene-dialog-content h3 { margin: 0 0 20px; color: #25334a; font-size: 23px; line-height: 1.5; }
.scene-dialog-content p { margin: 0 0 14px; color: #536078; font-size: 15px; line-height: 1.85; }
.scene-detail-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.scene-detail-values.is-single-value { grid-template-columns: 1fr; }
.scene-detail-values section { padding: 22px; border: 1px solid #e2e9f4; border-radius: 14px; background: #f5f8fd; }
.scene-detail-values span { color: #456ac4; font-size: 12px; }
.scene-detail-values h4 { margin: 10px 0 12px; color: #27374f; font-size: 20px; line-height: 1.4; }
.scene-detail-values p { margin: 0; font-size: 14px; }
.scene-dialog-content .scene-detail-note { margin: 22px 0 0; color: #69758a; font-size: 12px; line-height: 1.8; }

@media (max-width: 640px) {
  .scene-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 18px; }
  .scene-dialog-header { padding: 20px; }
  .scene-dialog-content { padding: 24px 20px; }
  .scene-detail-values { grid-template-columns: 1fr; }
}

/* Shared role mapping and balanced three-step cycles */
.role-choice-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:20px; }
.role-choice-tabs button { flex:0 0 auto; padding:12px 18px; }
.role-capability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:12px 24px 24px; }
.role-capability-grid section { padding:24px; min-width:0; border-bottom:1px solid var(--line-final); }
.role-capability-grid h3 { font-size:19px; color:var(--blue-final); margin:0 0 16px; }
.role-capability-grid ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.role-capability-grid li { font-size:16px; line-height:1.65; color:var(--ink-final); }
.org-evolution-panel .org-learning-flow { grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:24px; }
.org-evolution-panel .org-learning-flow > li { padding:24px; }
.org-evolution-panel .org-system-heading h3 { margin-bottom:28px; }
.org-evolution-panel .cycle-label { display:inline-block; color:var(--blue-final); background:var(--blue-soft-final); padding:7px 14px; border-radius:7px; font-size:16px; font-weight:650; line-height:1.5; }
.org-evolution-panel .cycle-heading { margin:36px 0 24px; padding-top:28px; border-top:1px solid var(--line-final); }
.org-evolution-panel .org-learning-closing { margin-top:20px; padding:14px 20px; }
@media(max-width:760px) {
 .role-capability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:8px; }
 .role-capability-grid section { padding:16px; }
 .org-evolution-panel .org-learning-flow { grid-template-columns:1fr; gap:24px; }
 .org-evolution-panel .org-learning-flow > li:not(:last-child)::after { content:"↓"; right:50%; top:auto; bottom:-25px; }
}
@media(max-width:480px) { .role-capability-grid { grid-template-columns:1fr; } }

/* Static landing overview: three self-contained stages, no navigation. */
.landing-static-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line-final); border-radius:20px; background:white; overflow:hidden; }
.landing-static-column { padding:30px; min-width:0; }
.landing-static-column + .landing-static-column { border-left:1px solid var(--line-final); }
.landing-static-column header { border-bottom:1px solid var(--line-final); padding-bottom:24px; margin-bottom:24px; }
.landing-static-column .landing-number { color:var(--blue-final); font-size:14px; }
.landing-static-column h3 { font-size:25px; line-height:1.4; margin:16px 0 12px; }
.landing-static-column header p { min-height:51px; font-size:15px; line-height:1.7; margin:0; color:var(--muted-final); }
.landing-static-body { display:grid; grid-template-rows:repeat(3,minmax(110px,auto)); gap:20px; }
.landing-static-item h4 { margin:0 0 10px; font-size:17px; line-height:1.5; color:var(--ink-final); }
.landing-static-item p { margin:0; color:var(--muted-final); font-size:15px; line-height:1.8; }
.landing-start-strip { display:flex; flex-wrap:wrap; gap:14px 28px; padding:24px 8px 0; font-size:15px; line-height:1.8; }
.landing-start-strip strong { color:var(--ink-final); }
.landing-start-strip span { color:var(--muted-final); }
.landing-start-strip i { font-style:normal; padding:0 14px; color:#aab7cd; }
@media(max-width:760px) { .landing-static-grid { grid-template-columns:1fr; } .landing-static-column+.landing-static-column { border-left:0; border-top:1px solid var(--line-final); } .landing-static-body { grid-template-rows:none; } }

/* Unified landing story: selection, execution, organizational development. */
.landing-phase { margin-bottom:56px; }
.landing-phase-heading { display:flex; align-items:flex-start; gap:22px; margin:0 0 24px; padding-top:12px; }
.landing-phase-heading > span { color:var(--blue-final); background:var(--blue-soft-final); border-radius:12px; padding:12px 16px; font-size:20px; line-height:1.5; }
.landing-phase-heading h3 { margin:0 0 8px; font-size:28px; line-height:1.4; }
.landing-phase-heading p { margin:0; color:var(--muted-final); font-size:16px; line-height:1.7; }
.landing-selection-map { padding:32px; border:1px solid var(--line-final); border-radius:20px; background:white; }
.landing-selection-map > h4 { font-size:21px; margin:0 0 28px; }
.landing-filter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.landing-filter-grid article+article { border-left:1px solid var(--line-final); padding-left:28px; }
.landing-filter-grid h5 { font-size:18px; margin:0 0 12px; }
.landing-filter-grid p,.landing-filter-note { font-size:15px; color:var(--muted-final); line-height:1.8; margin:0; }
.landing-filter-note { border-top:1px solid var(--line-final); margin-top:28px; padding-top:22px; }
.landing-phase .org-system-panel { margin-top:20px; }
.landing-phase .org-system-heading h3 { font-size:24px; }
.landing-phase .org-business-flow { grid-template-columns:repeat(4,minmax(0,1fr)); }
.landing-phase .org-assets-bar { position:relative; margin-top:38px; border-top:2px solid #b4c8ff; }
.landing-phase .org-assets-bar::before { content:"↑ 按任务与权限调用"; position:absolute; top:-29px; left:24px; color:var(--blue-final); font-size:14px; }
.landing-phase .org-human-control:last-child { border-left:3px solid #9db8ff; padding:14px 20px; background:var(--blue-soft-final); }
@media(max-width:760px) { .landing-filter-grid {grid-template-columns:1fr;} .landing-filter-grid article+article {border-left:0;padding-left:0;} .landing-phase .org-business-flow {grid-template-columns:1fr;} }

/* Relational diagrams: solid progression/feedback, dashed support. */
.diagram-scroll { width:100%; overflow-x:auto; }
.business-loop-svg,.cycle-loop-svg { display:block; width:100%; height:auto; min-width:760px; font-family:inherit; }
.diagram-line { fill:none; stroke:#719af0; stroke-width:2; }
.diagram-support { stroke-dasharray:6 6; }
.execution-notes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:20px 0; }
.execution-notes p { margin:0; font-size:14px; line-height:1.8; color:var(--muted-final); }
.execution-notes strong,.execution-notes span { display:block; }
.execution-notes strong { color:var(--ink-final); margin-bottom:6px; }
.execution-human { border-top:1px solid var(--line-final); padding-top:22px; color:var(--muted-final); font-size:15px; line-height:1.8; }
.execution-human strong { display:block; color:var(--ink-final); margin-bottom:8px; }
.cycle-section-label { display:table; font-size:16px; line-height:1.5; padding:7px 14px; border-radius:7px; color:var(--blue-final); background:var(--blue-soft-final); margin:24px 0 10px; }
.selection-converge { height:55px; display:grid; grid-template-columns:repeat(3,1fr); margin:12px 0 0; position:relative; }
.selection-converge span { height:23px; border-bottom:1px solid #9db8ff; }
.selection-converge span:first-child { margin-left:50%;border-left:1px solid #9db8ff; }
.selection-converge span:nth-child(2)::before { content:"";display:block;height:23px;border-left:1px solid #9db8ff;margin-left:50%; }
.selection-converge span:nth-child(3) { margin-right:50%;border-right:1px solid #9db8ff; }
.selection-converge i { position:absolute;left:50%;top:21px;transform:translateX(-50%);font-size:25px;font-style:normal;color:#719af0; }
.landing-selection-map .landing-filter-note { border:0; margin:0; padding:18px 24px; background:var(--blue-soft-final); border-radius:10px; text-align:center; }
@media(max-width:760px) { .execution-notes {grid-template-columns:repeat(2,minmax(0,1fr));} .selection-converge {display:none;} .landing-selection-map .landing-filter-note {margin-top:20px;} }

/* Readable diagram typography and viewport fit */
body { min-width:0; }
.landing-stage { width:min(1200px,calc(100% - 48px)); margin-inline:auto; }
.landing-framework,.landing-phase { min-width:0; width:100%; }
.landing-phase .org-system-panel { min-height:0; padding:28px; box-shadow:none; }
.landing-phase .org-system-heading > span { display:none; }
.landing-phase .org-system-heading h3 { margin:0 0 24px; font-size:21px; font-weight:600; }
.landing-phase-heading { margin-bottom:16px; }
.landing-phase { margin-bottom:40px; }
.diagram-scroll { overflow:visible; }
.readable-diagram { position:relative; width:100%; }
.readable-business { height:350px; }
.readable-cycle { height:300px; }
.readable-diagram > svg { position:absolute; inset:0; width:100%; height:100%; min-width:0; }
.readable-label { position:absolute; font-size:16px; line-height:1.45; white-space:nowrap; transform:translateY(-50%); }
.readable-label.is-centered { transform:translate(-50%,-50%); }
.readable-label.diagram-bold { font-size:21px; font-weight:650; }
.readable-label.feedback-label { font-size:13px; }
.readable-label.feedback-label.diagram-bold { font-size:17px; }
.readable-cycle-node { position:absolute; top:6.45%; width:30%; height:56%; padding:18px; border:1px solid #c7d6fb; border-radius:12px; background:#f8faff; box-sizing:border-box; }
.readable-cycle-node:nth-of-type(2) { background:#eff4ff; border-color:#9db8ff; }
.readable-cycle-node > span { font-size:13px; color:#3463ff; }
.readable-cycle-node h5 { margin:12px 0 9px; font-size:19px; line-height:1.45; }
.readable-cycle-node p { margin:0; font-size:15px; line-height:1.7; color:#6c788d; }
.readable-return { position:absolute; left:48%; right:0; top:87%; text-align:center; margin:0; font-size:14px; color:#537bbb; }
.landing-phase .org-collaboration-map { background:#fafbfe; }
.landing-phase .org-relationship-map { margin-top:22px; }
@media(max-width:1000px) {
 .site-header { height:auto; }
 .header-inner { flex-wrap:wrap; }
 .landing-phase .org-system-panel { padding:20px; }
 .readable-cycle { height:340px; }
 .readable-cycle-node { padding:14px; }
 .readable-cycle-node h5 { font-size:17px; }
 .readable-cycle-node p { font-size:14px; }
 .readable-label.diagram-bold { font-size:17px; }
 .readable-label {font-size:14px;}
 .readable-label.feedback-label {font-size:11px;}
 .landing-phase .org-relationship-map {grid-template-columns:1fr;gap:18px;}
 .landing-phase .org-human-hub,.landing-phase .org-ai-node {grid-column:1;grid-row:auto;width:100%;}
 .landing-phase .org-relation-link {display:none;}
}
@media(max-width:560px) {
 .landing-stage {width:calc(100% - 24px);}
 .readable-cycle {height:auto;display:grid;gap:16px;}
 .readable-cycle > svg {display:none;}
 .readable-cycle-node {position:relative;left:auto!important;top:auto;width:100%;height:auto;}
 .readable-return {position:static;grid-column:1; padding:12px;background:#eff4ff;border-radius:8px;}
 .readable-return::before {content:"↶ 回到中台：";}
 .readable-business {height:270px;}
 .readable-label.diagram-bold {font-size:11px;}
 .readable-label {font-size:10px;}
 .readable-label.feedback-label {font-size:8px;}
 .readable-label.feedback-label.diagram-bold {font-size:10px;}
}

.support-caption { background:white; padding:5px 10px; }

/* Evidence from the existing practice deck; images remain uncropped. */
.service-evidence { margin:24px 0; padding:28px; border:1px solid var(--line-final); border-radius:18px; background:#fafbff; }
.service-evidence > header { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.service-evidence h4 {margin:0;font-size:21px;}
.service-evidence > header > span {font-size:13px;color:var(--muted-final);}
.service-evidence-grid {display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;}
.service-evidence figure {margin:0;min-width:0;}
.service-evidence-knowledge {grid-column:1/-1;}
.service-evidence h5 {margin:0 0 8px;font-size:17px;}
.service-evidence h5 span {color:var(--blue-final);font-size:13px;margin-right:12px;}
.service-evidence figcaption p {margin:0 0 16px;color:var(--muted-final);font-size:15px;line-height:1.7;}
.service-evidence img {display:block;width:100%;height:auto;border:1px solid var(--line-final);border-radius:8px;}
.practice-story-link {display:inline-block;margin-top:24px;color:var(--blue-final);font-size:15px;text-decoration:none;}
.practice-story-link:hover {text-decoration:underline;}
@media(max-width:760px){.service-evidence-grid {grid-template-columns:1fr;}.service-evidence {padding:20px;}}

/* Three stages, one visual hierarchy; evidence and preparation live elsewhere. */
.landing-phase { margin:0; padding:36px 0; }
.landing-phase + .landing-phase { border-top:1px solid var(--line-final); }
.landing-phase-heading { margin-bottom:22px; }
.landing-phase .org-system-panel,.landing-selection-map { border:0; border-radius:0; box-shadow:none; background:transparent; padding:0; margin:0; }
.landing-phase .org-system-panel {padding-top:0;}
.landing-phase .execution-human { font-size:15px; padding:14px 18px; background:#f5f7fc; border:0; border-radius:8px; margin:12px 0 0; }
.landing-phase .execution-human strong { display:inline; margin-right:18px; }
.landing-phase .cycle-section-label { margin:12px 0 0; }
.landing-phase .readable-cycle {height:290px;}
#value > .service-evidence {width:min(1200px,calc(100% - 48px));box-sizing:border-box;margin:48px auto 0;}
#cooperation > .landing-start-strip {width:min(1200px,calc(100% - 48px));box-sizing:border-box;margin:28px auto 0;border-top:1px solid var(--line-final);padding-top:22px;}
@media(max-width:1000px){.landing-phase .readable-cycle {height:330px;}}
@media(max-width:560px){.landing-phase .readable-cycle {height:auto;}.landing-phase {padding:28px 0;}}

/* All three steps switch in place, with a stable shared panel height. */
.landing-method-tabs { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line-final);margin-bottom:24px;gap:24px; }
.landing-method-tabs button {position:relative;appearance:none;border:0;background:transparent;padding:22px 8px;color:var(--muted-final);font:inherit;font-weight:600;font-size:20px;cursor:pointer;}
.landing-method-tabs button > span {font-size:15px;margin-right:8px;font-weight:500;}
.landing-method-tabs button[aria-selected="true"] {color:var(--ink-final);}
.landing-method-tabs button[aria-selected="true"]::after {content:"";position:absolute;width:44px;height:3px;bottom:-1px;left:calc(50% - 22px);border-radius:2px;background:var(--blue-final);}
.landing-method-tabs button:not(:last-child)::before {content:"→";position:absolute;right:-20px;top:50%;transform:translateY(-50%);color:#94aff0;font-size:18px;font-weight:400;}
.landing-method-tabs button:focus-visible {outline:2px solid var(--blue-final);outline-offset:-4px;border-radius:6px;}
.landing-method-panels {display:grid;}
.landing-method-panels > .landing-phase {grid-area:1/1;align-self:start;border:0;padding:8px 0 20px;}
.landing-method-panels > .landing-phase[hidden] {display:block;visibility:hidden;pointer-events:none;}
.landing-method-panels .landing-phase-heading > span,.landing-method-panels .landing-phase-heading h3 {display:none;}
.landing-method-panels .landing-phase-heading {margin:0 0 24px;padding:0;}
@media(max-width:600px){.landing-method-tabs {gap:12px;}.landing-method-tabs button {font-size:14px;padding:18px 2px;}.landing-method-tabs button > span {display:block;font-size:12px;margin:0 0 6px;}.landing-method-tabs button:not(:last-child)::before {right:-12px;font-size:14px;}}

/* Shared visual scale for the three landing panels. */
.landing-method-panels { --method-title:18px; --method-body:15px; --method-note:14px; }
.landing-method-panels .landing-phase-heading { margin-bottom:28px; }
.landing-method-panels .landing-phase-heading p { font-size:var(--method-body); line-height:1.7; }
.landing-method-panels .landing-filter-grid { gap:5%; }
.landing-method-panels .landing-filter-grid article { box-sizing:border-box; min-height:158px; padding:24px; border:1px solid #c7d6fb; border-radius:12px; background:#f8faff; display:flex; flex-direction:column; justify-content:center; }
.landing-method-panels .landing-filter-grid h5,
.landing-method-panels .readable-cycle-node h5,
.landing-method-panels .readable-label.diagram-bold { font-size:var(--method-title); font-weight:650; line-height:1.5; }
.landing-method-panels .landing-filter-grid p,
.landing-method-panels .readable-cycle-node p,
.landing-method-panels .readable-label,
.landing-method-panels .execution-human,
.landing-method-panels .landing-filter-note { font-size:var(--method-body); line-height:1.7; }
.landing-method-panels .cycle-section-label { font-size:var(--method-note); line-height:1.5; margin:0 0 12px; padding:0; background:none; border-radius:0; }
.landing-method-panels .readable-cycle { height:282px; }
.landing-method-panels .readable-cycle-node { padding:18px 20px; }
.landing-method-panels .readable-cycle-node > span { font-size:12px; line-height:1.5; }
.landing-method-panels .readable-cycle-node h5 { margin:8px 0; }
.landing-method-panels .readable-return { font-size:var(--method-note); line-height:1.7; top:86%; }
.landing-method-panels .readable-business { height:390px; }
.landing-method-panels .readable-label.feedback-label { font-size:var(--method-note); white-space:normal; width:15%; left:88%!important; }
.landing-method-panels .readable-label.feedback-label:not(.diagram-bold) { top:61%!important; }
.landing-method-panels .readable-label.feedback-label.diagram-bold { font-size:var(--method-title); }
.landing-method-panels .execution-human { padding:18px 24px; }
@media (max-width:1000px) and (min-width:561px) {
 .landing-method-panels .readable-cycle {height:322px;}
 .landing-method-panels .readable-cycle-node {padding:16px;}
 .landing-method-panels .landing-filter-grid article {padding:20px;min-height:180px;}
 .landing-method-panels .readable-label.feedback-label {left:87%!important;width:13%;}
}
@media (max-width:760px) {
 .landing-method-panels .landing-filter-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
 .landing-method-panels .landing-filter-grid article {padding:16px;}
 .landing-method-panels .selection-converge {display:grid;}
}
@media (max-width:560px) {
 .landing-method-panels {--method-title:17px;--method-body:15px;}
 .landing-method-panels .landing-filter-grid {grid-template-columns:1fr;gap:14px;}
 .landing-method-panels .landing-filter-grid article {min-height:116px;padding:20px;}
 .landing-method-panels .selection-converge {display:none;}
 .landing-method-panels .readable-cycle {height:auto;}
 .landing-method-panels .readable-cycle-node {min-height:130px;}
 .landing-method-panels .readable-return {margin-bottom:20px;}
 .landing-method-panels .org-architecture-panel .diagram-scroll {overflow-x:auto;}
 .landing-method-panels .readable-business {min-width:740px;}
}

.landing-method-panels .landing-filter-grid article { justify-content:flex-start; padding-top:32px; }

/* Global review: shared type/color tokens and readable intermediate widths. */
:root { --blue:#3f73f3; --blue-deep:#2862ed; --blue-soft:#f1f5fc; --ink:#17191e; --muted:#687386; }
.definition-item h3,.why-card h3,.value-directions h4 {font-size:21px;line-height:1.45;}
.definition-item p,.value-directions p,.service-suitable,.service-flow p,.service-combination,.start-copy > span {font-size:15px;line-height:1.75;}
.service-flow strong,.service-result strong {font-size:16px;line-height:1.65;}
.service-card-primary .service-flow p {color:#d5dce8;}
.service-card-primary .service-suitable {color:#d5dce8;}
#value .service-evidence {color:var(--ink-final);background:var(--surface-final);}
#value .service-evidence h4,#value .service-evidence h5 {color:var(--ink-final);}
#value .service-evidence figcaption p {color:var(--muted-final);}
.definition-map {grid-template-columns:minmax(0,1fr) 224px minmax(0,1fr);gap:32px;padding:40px;}
.definition-item {padding:22px 0;min-width:0;}
.definition-item > div {min-width:0;}
@media(max-width:1100px) {
 :root {--stage-final:min(1320px,calc(100vw - 48px));--section-title-final:40px;--feature-title-final:30px;}
 .section-heading,.why-section .section-heading {width:var(--stage-final);}
 .definition-map {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:28px;min-height:0;}
 .definition-core {grid-column:1/-1;grid-row:1;width:150px;height:150px;}
 .definition-orbit {display:none;}
 .definition-column {min-width:0;align-self:stretch;grid-template-rows:repeat(3,1fr);}
 .definition-column-left .definition-item,.definition-column-right .definition-item {grid-template-columns:32px minmax(0,1fr);gap:12px;text-align:left;}
 .definition-column-left .definition-index {grid-column:1;}
 .definition-column-left .definition-item > div {grid-column:2;}
 .definition-index {width:30px;height:30px;}
 .definition-item::after {display:none;}
 .value-directions {grid-template-columns:repeat(3,minmax(0,1fr));}
 .value-directions article {min-width:0;border-bottom:1px solid #394252;}
 .service-card,.why-card,.why-card + .why-card {padding:28px 24px;}
 .why-card h3 {font-size:20px;}
 .service-card h3 {font-size:24px;}
}
@media(max-width:900px) {
 .capability-stage {grid-template-columns:1fr;}
 .capability-copy {padding:28px;}
 .service-grid {grid-template-columns:1fr;}
 .service-card {min-height:0;}
 .service-suitable {min-height:0;}
 .service-flow {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;}
 .why-grid {grid-template-columns:1fr;}
 .why-card,.why-card + .why-card {min-height:0;}
 .why-card ul {grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
 .section-tabs {overflow-x:auto;justify-content:flex-start;}
 .capability-tabs button {flex:0 0 auto;min-width:108px;}
}
@media(max-width:560px) {
 :root {--stage-final:calc(100vw - 32px);--section-title-final:30px;--feature-title-final:25px;}
 .site-header {flex-wrap:wrap;gap:12px;padding:12px 16px;}
 .site-header nav {width:100%;overflow-x:auto;justify-content:flex-start;gap:20px;}
 .site-header nav a {white-space:nowrap;flex-shrink:0;}
 .definition-map {padding:20px;grid-template-columns:1fr;}
 .definition-core {grid-column:1;}
 .definition-column {grid-template-rows:none;}
 .value-directions {grid-template-columns:1fr;}
 .value-directions article {padding:24px;}
 .service-flow,.why-card ul {grid-template-columns:1fr;}
 .hero h1 {font-size:42px;}
 .hero-copy > p {font-size:16px;}
 .page-section,.why-section {padding-top:64px;padding-bottom:64px;}
}

/* Quiet diagram surfaces; preserve flow and feedback semantics. */
.landing-method-panels .readable-business {height:310px;}
.landing-method-panels .business-loop-svg > rect {fill:#fff;stroke:var(--line-final);rx:12px;}
.landing-method-panels .business-loop-svg > rect[fill="#eff4ff"] {fill:var(--blue-soft-final);stroke:#d5dfef;}
.landing-method-panels .business-loop-svg > rect[fill="#3463ff"] {fill:#fff;stroke:#b4c7eb;}
.landing-method-panels .execution-label {color:var(--blue-deep-final)!important;}
.landing-method-panels .diagram-line {stroke:#8ca8d3;stroke-width:1.5;}
.landing-method-panels marker path {stroke:#8ca8d3;stroke-width:1.5;}
.landing-method-panels .diagram-support {stroke-dasharray:5 6;}
.landing-method-panels .readable-cycle {height:254px;}
.landing-method-panels .readable-cycle-node {padding:16px 20px;background:#fff;border-color:var(--line-final);border-radius:12px;}
.landing-method-panels .readable-cycle-node:nth-of-type(2) {background:var(--blue-soft-final);border-color:#d5dfef;}
.landing-method-panels .readable-cycle-node > span {color:var(--muted-final);}
.landing-method-panels .readable-cycle-node h5 {margin:6px 0 8px;}
.landing-method-panels .cycle-section-label {font-size:18px;font-weight:650;color:var(--ink-final);margin:0 0 8px;}
.landing-method-panels .cycle-section-label:not(:first-child) {margin-top:20px;}
.landing-method-panels .readable-return {color:var(--muted-final);font-size:14px;}
.landing-method-panels .execution-human {background:transparent;border-top:1px solid var(--line-final);border-radius:0;padding:18px 0;margin-top:14px;}
@media(max-width:1000px) and (min-width:561px) {
 .landing-method-panels .readable-cycle {height:310px;}
 .landing-method-panels .readable-cycle-node {padding:14px 16px;}
 .landing-method-panels .readable-business {height:330px;}
}
@media(max-width:560px) {
 .landing-method-panels .readable-cycle {height:auto;}
 .landing-method-panels .readable-business {height:310px;}
}