/* ============================================================
   客户案例页 - 多区域水处理环保项目
   来源：市场演示页落地改造（case-landing v2.3）
   说明：
   - 全部样式收拢在 .casecapability_main 作用域内，避免影响公共头尾
   - .container 改名 .case_container，避免与 bootstrap 冲突
   - 头部为项目固定导航（72px），主内容区 margin-top 让位
   ============================================================ */
.website_casecapability_body {
  --bg: #fff;
  --bg-alt: #f6f8fc;
  --line: #e6eaf2;
  --ink: #0f1b2d;
  --ink-2: #4a5868;
  --ink-3: #8894a4;
  --blue: #0040c0;
  --blue-60: #2b5ce8;
  --blue-50: #e9f1ff;
  --green: #16a34a;
  --green-50: #e7f7ec;
  --orange: #e88808;
  --orange-50: #fcf2e0;
  --red: #dc2424;
  --red-50: #fceaea;
  --navy: #081c3c;
  --tree: #c7d9ff;
  --r: 16px;
  --r-sm: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --sh-card: 0 4px 8px rgba(15, 27, 45, 0.04),
    0 12px 32px rgba(15, 27, 45, 0.08);
  --sh-float: 0 24px 64px rgba(15, 27, 45, 0.18);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

html {
  scroll-behavior: smooth;
}

/* ---------- 作用域内 reset 与基础 ---------- */
.casecapability_main,
.casecapability_main * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.casecapability_main {
  /* 顶部为项目固定导航（72px）让位 */
  margin-top: 72px;
  font-family: "Manrope", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.casecapability_main img,
.casecapability_main svg {
  display: block;
}

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

.casecapability_main button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.case_container {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 80px;
}

/* ---------- atoms ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--r-sm);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

/* 按钮需带 .casecapability_main 前缀，否则颜色会被 .casecapability_main a{color:inherit} 覆盖 */
.casecapability_main .btn-p {
  background: #0040c0;
  color: #fff;
  box-shadow: 0 12px 24px rgba(0, 64, 192, 0.28);
}

.btn-p:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 64, 192, 0.36);
}

.casecapability_main .btn-o {
  background: #fff;
  color: #0040c0;
  border: 1px solid #c7d6f5;
}

.btn-o:hover {
  border-color: var(--blue);
}

.casecapability_main .btn-w {
  background: #fff;
  color: #0040c0;
}

.casecapability_main .btn-gw {
  border: 1px solid rgba(255, 255, 255, 0.48);
  color: #fff;
}

/* 抵消 bootstrap.min.css 给 .btn:focus 加的默认蓝色光环：鼠标点击恢复各按钮自身阴影，键盘聚焦(:focus-visible)显示品牌色焦点圈 */
.casecapability_main .btn:focus {
  outline: none;
  box-shadow: none;
}

.casecapability_main .btn-p:focus {
  box-shadow: 0 12px 24px rgba(0, 64, 192, 0.28);
}

.casecapability_main .btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(43, 92, 232, 0.35);
}

.chip-ic {
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  flex: none;
}

.chip-ic svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.c-b {
  background: var(--blue-50);
  color: var(--blue);
}

.slot {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #eef1f6, #dce2eb);
  isolation: isolate;
}

.slot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.6;
  background: repeating-linear-gradient(
      115deg,
      transparent 0 48px,
      rgba(15, 27, 45, 0.03) 48px 52px
    ),
    radial-gradient(
      340px 240px at 78% 18%,
      rgba(255, 255, 255, 0.7),
      transparent 70%
    ),
    radial-gradient(
      300px 220px at 16% 88%,
      rgba(255, 255, 255, 0.5),
      transparent 70%
    );
}

.slot .ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #8695a9;
  text-align: center;
  padding: 0 16px;
}

.slot .ph svg {
  width: 32px;
  height: 32px;
  stroke: #9aa8ba;
  fill: none;
  stroke-width: 1.5;
}

.slot .ph b {
  font-size: 12px;
  font-weight: 700;
}

.slot .fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slot.hasimg {
  background: #edf0f5;
}

.slot.hasimg::after {
  content: none;
}

.slot .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #8695a9;
  background: #fff;
  border: 1px solid var(--line);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}

.cap {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-3);
}

.cap i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--blue);
}

.k-list {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.k-list li {
  list-style: none;
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-2);
}

.k-list li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--blue);
  margin-top: 4px;
}

.kh {
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
}

.kp {
  margin-top: 8px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-3);
}

/* ---------- section shell ---------- */
.casecapability_main section {
  position: relative;
}

.alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* 只设上下留白——用 padding 简写会覆盖 .case_container 的左右 80px，内容列从 1040 胖成 1200 */
.band {
  padding-top: 104px;
  padding-bottom: 104px;
}

.sec-head {
  max-width: 840px;
  margin-bottom: 48px;
}

.sec-num {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: var(--blue);
  background: var(--blue-50);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  margin-bottom: 24px;
}

.sec-head h2 {
  font-size: 32px;
  line-height: 48px;
  font-weight: 800;
}

.sec-head h2 em {
  font-style: normal;
  color: var(--blue);
}

.sec-head p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 32px;
  color: var(--ink-3);
}

/* ============ K1 首屏：左文右图 + 引线标注 ============ */
.case-hero {
  padding: 88px 0 104px;
  background: radial-gradient(
      720px 420px at 88% -8%,
      var(--blue-50),
      transparent 68%
    ),
    radial-gradient(560px 360px at -8% 32%, #f1f5fe, transparent 70%);
}

.k1 {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.kw-row {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.kw {
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
}

.kw:nth-child(4n + 1) {
  color: var(--blue);
  background: var(--blue-50);
  border-color: #8fb2f2;
}

.kw:nth-child(4n + 2) {
  color: #0c6834;
  background: var(--green-50);
  border-color: #7fcf9c;
}

.kw:nth-child(4n + 3) {
  color: #b45408;
  background: var(--orange-50);
  border-color: #efc083;
}

.kw:nth-child(4n + 4) {
  color: var(--navy);
  background: #e9eef8;
  border-color: #9fb3d6;
}

.pills {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  color: var(--blue);
  background: var(--blue-50);
  border: 1px solid #c7d9ff;
  padding: 8px 16px;
  border-radius: var(--r-pill);
}

.eyebrow i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

.k1 h1 {
  font-size: 40px;
  line-height: 56px;
  font-weight: 800;
}

.k1 h1 em {
  font-style: normal;
  color: var(--blue);
}

.k1 .sub {
  margin-top: 16px;
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  color: var(--ink);
}

.k1 .p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 32px;
  color: var(--ink-2);
  max-width: 480px;
}

.k1 .cta {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.k1 .media {
  position: relative;
}

.k1 .media .slot {
  aspect-ratio: 3/2;
  width: 100%;
}

.k1 .anno {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  box-shadow: var(--sh-card);
}

.k1 .anno::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 2px;
  background: var(--blue);
  opacity: 0.6;
  top: 50%;
  transform: translateY(-50%);
}

.k1 .anno::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 64, 192, 0.18);
  top: 50%;
  transform: translateY(-50%);
}

.k1 .anno.a1 {
  top: 96px;
  left: 24px;
}

.k1 .anno.a1::before {
  right: -40px;
}

.k1 .anno.a1::after {
  right: -48px;
}

.k1 .anno.a2 {
  top: 196px;
  right: 24px;
}

.k1 .anno.a2::before {
  left: -40px;
}

.k1 .anno.a2::after {
  left: -48px;
}

/* ============ K2 特征匹配：一个白容器 + 一行 5 列 + 右侧引导竖条 ============ */
.case-fit {
  padding: 104px 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.k2 {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

.k2 .k2-h {
  text-align: center;
  font-size: 20px;
  line-height: 32px;
  font-weight: 800;
  padding: 32px 32px 24px;
}

.k2 .k2-h em {
  font-style: normal;
  color: var(--blue);
}

.k2 .k2-body {
  display: grid;
  grid-template-columns: 1fr 200px;
  border-top: 1px solid var(--line);
}

.k2 .feats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.k2 .ft {
  padding: 24px 16px;
  border-right: 1px solid var(--line);
  display: grid;
  gap: 8px;
  align-content: start;
}

.k2 .ft:last-child {
  border-right: none;
}

.k2 .ft .chip-ic {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: none;
  color: var(--blue);
}

.k2 .ft .chip-ic svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.75;
}

.k2 .ft .kh {
  font-size: 16px;
  line-height: 24px;
  min-height: 32px;
}

.k2 .ft .kp {
  margin-top: 0;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-3);
}

.k2 .ask {
  background: linear-gradient(160deg, #e9f1ff, #f6faff);
  border-left: 1px solid #c7d9ff;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.k2 .ask .qk {
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
  color: var(--blue);
}

.k2 .ask p {
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-2);
}

.k2 .ask .chev {
  margin-top: auto;
  font-size: 24px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -4px;
}

/* ============ K3 客户画像 + 项目分布 ============ */
.k3 {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: stretch;
}

.k3 .prof {
  background: #f2f7ff;
  border: 1px solid #c7d9ff;
  border-radius: var(--r);
  padding: 4px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.k3 .prof .r {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 64, 192, 0.14);
}

.k3 .prof .r:last-child {
  border-bottom: none;
}

.k3 .prof .r .chip-ic {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: none;
  color: var(--blue);
  margin-top: 2px;
}

.k3 .prof .r .chip-ic svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.75;
}

.k3 .prof .r .tx {
  display: grid;
  gap: 4px;
}

.k3 .prof .r .k {
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
}

.k3 .prof .r .v {
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-2);
}

.k3 .dist {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.k3 .root {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--blue);
}

.k3 .root svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex: none;
}

.k3 .mids {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  padding-top: 24px;
}

.k3 .mids::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 24px;
  background: var(--tree);
}

.k3 .pill {
  justify-self: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--blue);
  background: #fff;
  border: 1px solid #c7d9ff;
  border-radius: var(--r-pill);
  padding: 4px 12px;
}

.k3 .cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  padding-top: 24px;
}

.k3 .cols::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 24px;
  background: var(--tree);
}

.k3 .col {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding-top: 24px;
  text-align: center;
}

.k3 .col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--tree);
}

.k3 .col::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 24px;
  background: var(--tree);
}

.k3 .col:first-child::before {
  left: 50%;
}

.k3 .col:last-child::before {
  right: 50%;
}

.k3 .col .slot {
  width: 100%;
  aspect-ratio: 4/3;
}

.k3 .col .slot .ph svg {
  width: 24px;
  height: 24px;
}

.k3 .col .sub {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-2);
}

.k3 .col .sub::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--tree);
}

.k3 .devs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
}

.k3 .devs div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  border-right: 1px solid var(--line);
}

.k3 .devs div:last-child {
  border-right: none;
}

.k3 .devs svg {
  width: 16px;
  height: 16px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
  flex: none;
}

.k3 .orgline {
  margin-top: 4px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-3);
  text-align: center;
}

.k3 .orgline b {
  color: var(--ink-2);
  font-weight: 800;
}

/* ============ K4 业务场景全景：中心照片 + 场景卡悬浮 ============ */
.k4 {
  position: relative;
}

.k4 .slot {
  aspect-ratio: 2/1;
  width: 100%;
}

.k4 .slot .badge {
  left: 50%;
  transform: translateX(-50%);
}

.k4 .fc {
  position: absolute;
  z-index: 2;
  width: 264px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-float);
  padding: 16px 20px;
}

.k4 .fc .fh {
  display: flex;
  align-items: center;
  gap: 8px;
}

.k4 .fc .fh .chip-ic {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: none;
  color: var(--blue);
}

.k4 .fc .fh .chip-ic svg {
  width: 20px;
  height: 20px;
}

.k4 .fc .fh b {
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
}

.k4 .fc p {
  margin-top: 8px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-2);
}

.k4 .fc.a {
  top: 24px;
  left: 24px;
}

.k4 .fc.b {
  top: 68px;
  right: 24px;
}

.k4 .fc.c {
  top: 188px;
  left: 24px;
}

.k4 .fc.d {
  top: 232px;
  right: 24px;
}

.k4 .fc.e {
  top: 352px;
  left: 24px;
}

.k4 .fc.f {
  top: 396px;
  right: 24px;
}

/* ============ K5 业务痛点演进 ============ */
.krow {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.kstage {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kstage .st {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.kstage .st b {
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
}

.kstage .st em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--blue);
  background: var(--blue-50);
  padding: 4px 8px;
  border-radius: var(--r-pill);
}

.k5 .k-list {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.k5 .k-list li {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 12px;
}

.k5 .k-list li::before {
  content: none;
}

/* 阶段箭头用 CSS 折角画——同一段里放多枚相同 SVG 会被"同块图标复用"眼拦下 */
.krow .arr {
  align-self: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-top: 2px solid var(--tree);
  border-right: 2px solid var(--tree);
  transform: rotate(45deg);
  border-radius: 0 4px 0 0;
}

.k5 {
  display: grid;
  gap: 24px;
}

.kconc {
  background: linear-gradient(120deg, var(--navy), #123a72);
  border-radius: var(--r);
  padding: 24px 32px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.kstage .done {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--blue);
  padding: 8px 16px;
  border-radius: var(--r-pill);
}

.kconc .bang {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.kconc p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
}

/* ============ K6 能力沉淀 / 复用：中心能力环 ============ */
.k6 {
  display: grid;
  grid-template-columns: 104px 1fr 280px 1fr 104px;
  gap: 24px;
  align-items: center;
}

.k6 .cap-col {
  display: grid;
  gap: 16px;
}

.k6 .cap-it {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  padding: 20px;
}

.k6 .cap-it .kh {
  font-size: 16px;
  line-height: 24px;
}

.k6 .cap-it .kp {
  margin-top: 4px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-3);
}

.k6 .ring {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 24px solid var(--blue-50);
  background: #fff;
  box-shadow: var(--sh-card);
  display: grid;
  place-items: center;
}

.k6 .disc {
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--blue-60), var(--blue));
  color: #fff;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  text-align: center;
  padding: 16px;
}

.k6 .disc svg {
  width: 28px;
  height: 28px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  margin: 0 auto;
}

.k6 .disc b {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
  color: #fff;
}

.k6 .disc span {
  font-size: 12px;
  line-height: 20px;
  color: #c7d9ff;
}

.k6 .side {
  display: grid;
  gap: 16px;
}

.k6 .node {
  background: #fff;
  border: 1px solid #c7d9ff;
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  padding: 16px 12px;
  text-align: center;
}

.k6 .node b {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
  color: var(--blue);
}

.k6 .node span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-2);
}

.k6 .node.g {
  border-color: #bfe8cd;
}

.k6 .node.g b {
  color: var(--green);
}

/* ============ K7 平台落地证明 ============ */
.k7 {
  display: grid;
  gap: 24px;
}

.k7 .mid {
  display: grid;
  grid-template-columns: 1fr 360px 1fr;
  gap: 24px;
  align-items: center;
}

.k7 .lst {
  display: grid;
  gap: 16px;
}

.k7 .lst .it {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.k7 .lst .it .chip-ic {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--blue-50);
  color: var(--blue);
}

.k7 .lst .it .chip-ic svg {
  width: 20px;
  height: 20px;
}

.k7 .lst .it .tx {
  display: grid;
  gap: 4px;
}

.k7 .lst .it b {
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
}

.k7 .lst .it p {
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-2);
}

/* 驾驶舱样机：只放文案给的屏名与能力名，不放运行数据 */
.mock {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-float);
  overflow: hidden;
}

.mock-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.mock-head i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

.mock-head b {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-2);
}

.mock-body {
  padding: 16px;
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 12px;
}

.mock-side {
  display: grid;
  gap: 8px;
  align-content: start;
  border-right: 1px solid var(--line);
  padding-right: 12px;
}

.mock-side span {
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-3);
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 8px;
}

.mock-side span.on {
  color: var(--blue);
  background: var(--blue-50);
  font-weight: 800;
}

.mock-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.mock-tiles div {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ink-2);
}

.mock-tiles div i {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--tree);
  margin-top: 8px;
}

.k7 .shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.k7 .shots .it {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

.k7 .shots .it .slot {
  border: none;
  border-radius: 0;
  aspect-ratio: 16/10;
}

.k7 .shots .it .nm {
  padding: 16px 20px;
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--line);
}

.k7 .shots .it .nm b {
  font-size: 12px;
  line-height: 20px;
  font-weight: 800;
  color: var(--ink);
}

.k7 .shots .it .slot {
  cursor: zoom-in;
}

.k7 .shots .it .zoom {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.k7 .shots .it:hover .zoom,
.k7 .shots .it:focus-within .zoom {
  opacity: 1;
}

.k7 .shots .it .nm span {
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-3);
}

/* 灯箱：点/回车放大看原图，Esc 或点背景关闭 */
/* z-index 高于项目固定导航（999），保证放大层全屏置顶 */
.lightbox[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 40px;
}

.lightbox .bd {
  position: absolute;
  inset: 0;
  background: rgba(8, 28, 60, 0.86);
}

.lightbox figure {
  position: relative;
  margin: 0;
  max-width: min(1200px, 100%);
}

.lightbox img {
  max-width: 100%;
  max-height: 76vh;
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--sh-float);
}

.lightbox figcaption {
  margin-top: 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
}

.lightbox .x {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: none;
  outline: none;
  background: #fff;
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* 键盘聚焦时保留可见提示（白圈代替默认黑框） */
.lightbox .x:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

/* ============ K8 价值路径：节点轨道 + 三站 + 终点面板 ============ */
.k8 .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.12fr);
  gap: 24px;
}

.k8 .step {
  display: grid;
  gap: 16px;
  align-content: start;
}

.k8 .step .top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.k8 .rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.12fr);
  gap: 24px;
  margin-bottom: 16px;
}

.k8 .rail .cell {
  display: flex;
  align-items: center;
}

.k8 .dot {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--blue);
}

.k8 .seg {
  flex: 1;
  height: 2px;
  background: var(--tree);
  border-radius: 2px;
  margin-right: -24px;
}

.k8 .rail .cell:nth-child(2) .dot {
  border-color: var(--green);
}

.k8 .rail .cell:nth-child(3) .dot {
  border-color: var(--orange);
}

.k8 .rail .cell:last-child .dot {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.14);
}

.k8 .rail .cell:last-child .seg {
  display: none;
}

.k8 .s {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--blue);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  line-height: 20px;
}

.k8 .step:nth-child(2) .s {
  background: var(--green);
}

.k8 .step:nth-child(3) .s {
  background: var(--orange);
}

.k8 h4 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
}

.k8 .k-list {
  margin-top: 0;
}

.k8 .fin {
  background: linear-gradient(160deg, #e7f7ec, #fff);
  border: 1px solid #bfe8cd;
  border-radius: var(--r);
  box-shadow: var(--sh-float);
  padding: 24px;
}

.k8 .step.last .s {
  background: var(--green);
}

.k8 .fin h4 {
  font-size: 20px;
  line-height: 28px;
}

.k8 .fin p {
  margin-top: 12px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-2);
}

/* ============ K9 终结语 CTA ============ */
.closing {
  padding: 104px 0;
}

.k9 {
  background: linear-gradient(120deg, var(--navy), #123a72);
  border-radius: var(--r-lg);
  padding: 48px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.k9::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px 260px at 88% 0%,
    rgba(255, 255, 255, 0.14),
    transparent 70%
  );
  /* 装饰层须放行鼠标事件，否则会盖住 .acts 按钮的点击与 hover */
  pointer-events: none;
}

.k9 .ey {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  color: #b9cbf2;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  margin-bottom: 16px;
  position: relative;
}

.k9 .txt {
  flex: 1;
  min-width: 320px;
  position: relative;
}

.k9 h3 {
  font-size: 28px;
  line-height: 40px;
  font-weight: 800;
  color: #fff;
}

.k9 p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 32px;
  color: #b9cbf2;
  max-width: 640px;
  position: relative;
}

.k9 .acts {
  margin-left: auto;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  flex: none;
}

/* ---------- 响应式（覆盖块必须排在最后） ---------- */
@media (max-width: 1280px) {
  .k4 .fc {
    width: 236px;
  }

  .k7 .mid {
    grid-template-columns: 1fr 340px 1fr;
  }
}

@media (max-width: 1100px) {
  .k1,
  .k3,
  .k7 .mid {
    grid-template-columns: 1fr;
  }

  /* 窄屏：首屏浮层收进流内（照片下方一排标签 + 屏卡），避免小图上叠字 */
  .k1 .anno {
    position: static;
    display: inline-flex;
    margin: 12px 0 0 12px;
    box-shadow: var(--sh-card);
  }

  .k1 .anno::before,
  .k1 .anno::after {
    display: none;
  }

  .k1 .media {
    margin-top: 40px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .k2 .k2-body {
    grid-template-columns: 1fr;
  }

  .k2 .ask {
    border-left: none;
    border-top: 1px solid #c7d9ff;
  }

  .k2 .feats {
    grid-template-columns: repeat(2, 1fr);
  }

  .k2 .ft {
    border-bottom: 1px solid var(--line);
  }

  .k3 .devs {
    grid-template-columns: repeat(2, 1fr);
  }

  .k3 .devs div {
    border-bottom: 1px solid var(--line);
  }

  .k4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .k4 .slot {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }

  .k4 .fc {
    position: static;
    width: auto;
    max-width: none;
    box-shadow: var(--sh-card);
  }

  .k6 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .k6 .ring {
    margin: 0 auto;
  }

  .k6 .side {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .k8 .steps {
    grid-template-columns: 1fr;
  }

  .k8 .rail {
    display: none;
  }

  .krow {
    flex-direction: column;
  }

  .krow .arr {
    transform: rotate(90deg);
  }

  .k9 {
    padding: 32px;
  }

  .k9 .acts {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .case_container {
    padding: 0 24px;
  }

  .band {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .case-hero {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .closing {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .k1 h1 {
    font-size: 32px;
    line-height: 48px;
  }

  .k2 .feats {
    grid-template-columns: 1fr;
  }

  .k3 .cols,
  .k3 .mids {
    grid-template-columns: repeat(2, 1fr);
  }

  .k4 {
    grid-template-columns: 1fr;
  }

  .k6 .side {
    grid-template-columns: 1fr;
  }

  .mock-body {
    grid-template-columns: 1fr;
  }

  .mock-side {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 12px;
    grid-template-columns: repeat(3, 1fr);
  }
}

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